@charset "UTF-8";
/*
!!! Don't modify these files manually !!!
instead run the following script:
./webapp/scripts/generate_css_imports.js
*/
/** Like opacify
* (http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#opacify-instance_method)
* but increases the opacity to exactly 1.0.
*/
/**
* Emit a background-color property with a opaque color fallback for
* browsers that don't support the colors with alpha
* (http://caniuse.com/css3-colors).
*
* $solidColor is optional. If not specified, we'll generate an opaque version
* of $color. Rule of thumb: Only specify $solidColor when the alpha component
* of $color is < 0.8.
*/
/**
* Emit a background property with a linear gradient and a solid color
* fallback for browsers that don't support gradients
* (http://caniuse.com/css-gradients).
*/
/*
* http://compass-style.org/reference/compass/utilities/general/clearfix/#mixin-clearfix
*/
/*
* http://compass-style.org/reference/compass/utilities/general/clearfix/#mixin-pie-clearfix
*/
/**
* Mixin to add a media-query based on the number of columns that are visible.
* @param {number} lower-bound number of columns
* @param {number} upper-bound number of columns, defaults to the lower-bound
*
* Usage:
* @include columns-query(3) to target layouts with 3 columns
* If $numColumnsBegin is equal to the minimum number of columns, it is
* assumed that the query applies to viewport sizes smaller than minColumns,
* and will begin at 0.
* @include columns-query(3, 5) to target layouts with 3-5 columns
*/
/*
* hover-mask styles the image-overlay that lightens on hover and darkens on active.
*/
/* Default is for desktop. Mobile can specify pinWidth and fontSize */
/*
* inner-shadow-container is a mixin that allows us to apply an inset shadow
* easily over an image.
*
*/
@-webkit-keyframes spin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes spin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
/* Gestalt global CSS */
/* DEPRECATED - use Gestalt components instead */
/* Border lines */
.border {
border: 1px solid #efefef; }
.border-top {
border-top: 1px solid #efefef; }
.border-right {
border-right: 1px solid #efefef; }
.border-bottom {
border-bottom: 1px solid #efefef; }
.border-left {
border-left: 1px solid #efefef; }
.no-border {
border: 0; }
/* Border radii */
.square {
border-radius: 0; }
.circle {
border-radius: 50%; }
.rounded {
border-radius: 8px; }
.rounded-top {
border-radius: 8px 8px 0 0; }
.rounded-right {
border-radius: 0 8px 8px 0; }
.rounded-bottom {
border-radius: 0 0 8px 8px; }
.rounded-left {
border-radius: 8px 0 0 8px; }
/* blue */
.blue {
color: #0084ff; }
.blue-hover:hover {
color: #0084ff; }
.bg-blue {
background-color: #0084ff; }
/* dark-gray */
.dark-gray {
color: #555; }
.dark-gray-hover:hover {
color: #555; }
/* gray */
.gray {
color: #b5b5b5; }
.bg-gray {
background-color: #b5b5b5; }
/* red */
.red {
color: #bd081c; }
.bg-red {
background-color: #bd081c; }
.bg-red-active:active {
background-color: #a3081a; }
.bg-red-focus:focus {
background-color: #ad081b; }
.bg-red-hover:hover {
background-color: #bd081c; }
/* super-light-gray */
.bg-super-light-gray {
background-color: #efefef; }
/* white */
.white {
color: #fff; }
.bg-white {
background-color: #fff; }
/* yellow */
.yellow {
color: #fab904; }
.bg-yellow {
background-color: #fab904; }
/* olive */
.olive {
color: #364a4c; }
/* columns */
.col, .xs-col {
display: inline-block;
vertical-align: top; }
.col-1, .xs-col-1 {
width: 8.33333%; }
.col-2, .xs-col-2 {
width: 16.66667%; }
.col-3, .xs-col-3 {
width: 25%; }
.col-4, .xs-col-4 {
width: 33.33333%; }
.col-5, .xs-col-5 {
width: 41.66667%; }
.col-6, .xs-col-6 {
width: 50%; }
.col-7, .xs-col-7 {
width: 58.33333%; }
.col-8, .xs-col-8 {
width: 66.66667%; }
.col-9, .xs-col-9 {
width: 75%; }
.col-10, .xs-col-10 {
width: 83.33333%; }
.col-11, .xs-col-11 {
width: 91.66667%; }
.col-12, .xs-col-12 {
width: 100%; }
@media (min-width: 360px) {
.sm-col-1 {
width: 8.33333%; }
.sm-col-2 {
width: 16.66667%; }
.sm-col-3 {
width: 25%; }
.sm-col-4 {
width: 33.33333%; }
.sm-col-5 {
width: 41.66667%; }
.sm-col-6 {
width: 50%; }
.sm-col-7 {
width: 58.33333%; }
.sm-col-8 {
width: 66.66667%; }
.sm-col-9 {
width: 75%; }
.sm-col-10 {
width: 83.33333%; }
.sm-col-11 {
width: 91.66667%; }
.sm-col-12 {
width: 100%; } }
@media (min-width: 800px) {
.md-col-1 {
width: 8.33333%; }
.md-col-2 {
width: 16.66667%; }
.md-col-3 {
width: 25%; }
.md-col-4 {
width: 33.33333%; }
.md-col-5 {
width: 41.66667%; }
.md-col-6 {
width: 50%; }
.md-col-7 {
width: 58.33333%; }
.md-col-8 {
width: 66.66667%; }
.md-col-9 {
width: 75%; }
.md-col-10 {
width: 83.33333%; }
.md-col-11 {
width: 91.66667%; }
.md-col-12 {
width: 100%; } }
@media (min-width: 1312px) {
.lg-col-1 {
width: 8.33333%; }
.lg-col-2 {
width: 16.66667%; }
.lg-col-3 {
width: 25%; }
.lg-col-4 {
width: 33.33333%; }
.lg-col-5 {
width: 41.66667%; }
.lg-col-6 {
width: 50%; }
.lg-col-7 {
width: 58.33333%; }
.lg-col-8 {
width: 66.66667%; }
.lg-col-9 {
width: 75%; }
.lg-col-10 {
width: 83.33333%; }
.lg-col-11 {
width: 91.66667%; }
.lg-col-12 {
width: 100%; } }
/* cursor */
.pointer {
cursor: pointer; }
.zoom-in {
cursor: zoom-in; }
.zoom-out {
cursor: zoom-out; }
/* floats */
.pull-left {
float: left; }
.pull-right {
float: right; }
.clearfix::before, .clearfix::after {
content: " ";
display: table; }
.clearfix::after {
clear: both; }
/* display */
.block {
display: block; }
.inline {
display: inline; }
.inline-block {
display: inline-block; }
.table {
display: table; }
.table-cell {
display: table-cell; }
/* overflow */
.overflow-hidden {
overflow: hidden; }
.overflow-scroll {
overflow: scroll; }
.overflow-auto {
overflow: auto; }
.fit {
max-width: 100%; }
/* position */
.relative {
position: relative; }
.fixed {
position: fixed; }
.absolute {
position: absolute; }
.top-0 {
top: 0; }
.right-0 {
right: 0; }
.bottom-0 {
bottom: 0; }
.left-0 {
left: 0; }
/* box model */
.border-box {
box-sizing: border-box; }
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
@media (min-width: 360px) {
.sm-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex; } }
@media (min-width: 800px) {
.md-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex; } }
@media (min-width: 1312px) {
.lg-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex; } }
.flex-column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.flex-wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.items-start {
-webkit-box-align: start;
-ms-flex-align: start;
-ms-grid-row-align: flex-start;
align-items: flex-start; }
.items-end {
-webkit-box-align: end;
-ms-flex-align: end;
-ms-grid-row-align: flex-end;
align-items: flex-end; }
.items-center {
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center; }
.items-baseline {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
-ms-grid-row-align: baseline;
align-items: baseline; }
.items-stretch {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
-ms-grid-row-align: stretch;
align-items: stretch; }
.self-start {
-ms-flex-item-align: start;
align-self: flex-start; }
.self-end {
-ms-flex-item-align: end;
align-self: flex-end; }
.self-center {
-ms-flex-item-align: center;
align-self: center; }
.self-baseline {
-ms-flex-item-align: baseline;
align-self: baseline; }
.self-stretch {
-ms-flex-item-align: stretch;
align-self: stretch; }
.justify-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start; }
.justify-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end; }
.justify-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
.justify-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
.justify-around {
-ms-flex-pack: distribute;
justify-content: space-around; }
.content-start {
-ms-flex-line-pack: start;
align-content: flex-start; }
.content-end {
-ms-flex-line-pack: end;
align-content: flex-end; }
.content-center {
-ms-flex-line-pack: center;
align-content: center; }
.content-between {
-ms-flex-line-pack: justify;
align-content: space-between; }
.content-around {
-ms-flex-line-pack: distribute;
align-content: space-around; }
.content-stretch {
-ms-flex-line-pack: stretch;
align-content: stretch; }
/* 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex-auto {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-height: 0;
/* 1 */
min-width: 0;
/* 1 */ }
.flex-none {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none; }
.order-first {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1; }
.order-last {
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999; }
/* formatting */
.text-left {
text-align: left; }
.text-right {
text-align: right; }
.text-center {
text-align: center; }
.text-justify {
text-align: justify; }
.bold {
font-weight: bold; }
.regular {
font-style: normal; }
.italic {
font-style: italic; }
.underline {
text-decoration: underline; }
/* lists */
.list-style-none {
list-style: none; }
/* text overflow */
.no-wrap {
white-space: nowrap; }
.break-word {
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
word-wrap: break-word; }
.truncate {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
/* styles */
.sans-serif {
font-family: "Helvetica Neue", Helvetica, "\30D2\30E9\30AE\30CE\89D2\30B4 Pro W3", "Hiragino Kaku Gothic Pro", "\30E1\30A4\30EA\30AA", Meiryo, "\FF2D\FF33 \FF30\30B4\30B7\30C3\30AF", arial, sans-serif; }
.antialiased {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; }
/* scale */
.text-xs, .news .pending .actions .Button.remove span.buttonText, .news .pending .actions .Button.primary span.buttonText, .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName, .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem, .ExploreStoryCredits .storyCredits > .creditItem, .ExploreStoryCredits .storyCredits .creditFooter, .Pin.summary .pinCredits > .pinCreditWrapper .creditItem, .Pin.summary .pinCredits > .creditItem, .Pin .creditFooter {
font-size: 10px;
letter-spacing: -0.025px;
line-height: 11px;
word-spacing: 0; }
:lang(ja) .text-xs, :lang(ja) .news .pending .actions .Button.remove span.buttonText, .news .pending .actions .Button.remove :lang(ja) span.buttonText, :lang(ja) .news .pending .actions .Button.primary span.buttonText, .news .pending .actions .Button.primary :lang(ja) span.buttonText, :lang(ja) .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName, .Typeahead.typeaheadWithTitles li a.titleItem :lang(ja) .typeaheadName, :lang(ja) .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem, .ExploreStoryCredits .storyCredits > .storyCreditWrapper :lang(ja) .creditItem, :lang(ja) .ExploreStoryCredits .storyCredits > .creditItem, .ExploreStoryCredits :lang(ja) .storyCredits > .creditItem, :lang(ja) .ExploreStoryCredits .storyCredits .creditFooter, .ExploreStoryCredits .storyCredits :lang(ja) .creditFooter, :lang(ja) .Pin.summary .pinCredits > .pinCreditWrapper .creditItem, .Pin.summary .pinCredits > .pinCreditWrapper :lang(ja) .creditItem, :lang(ja) .Pin.summary .pinCredits > .creditItem, .Pin.summary :lang(ja) .pinCredits > .creditItem, :lang(ja) .Pin .creditFooter, .Pin :lang(ja) .creditFooter {
font-size: 8.6px; }
.text-s, .FirstPinCreate .Pin.summary .pinMeta .TextField, .Board .boardName .boardPinCount, .Board .boardName.hasBoardContext .User.boardRepTitle .fullname, .Board .boardName.hasBoardContext .User.exploreTabTitle .fullname, .BoardHeader .belowBoardNameContainer .followerCount,
.BoardHeader .belowBoardNameContainer .pinCount, .BoardInfoBar .pinsAndFollowerCount .value, .BoardInfoBar .pinsAndFollowerCount .label, .PinCreate .Pin.summary .pinMeta .TextField, .text-sm {
font-size: 11px;
letter-spacing: -0.05px;
line-height: 12px;
word-spacing: 0; }
:lang(ja) .text-sm {
font-size: 9.5px; }
.text-m, .Button.boardSettingsButton .buttonText, .Modal .formFooter .Button.rounded:not(.primary) .buttonText,
.ReactModal__Content .formFooter .Button.rounded:not(.primary) .buttonText, .news .pending .actions .Button.remove .buttonText, .boardEdit .Button .buttonText, .Button.userFollowingGridButton .buttonText, .InviteButtonEmail .Button.btn .buttonText, .Button.moreItems .buttonText, .formFooterButton.cancelButton .buttonText, .Button.CardFollow.GrayButton .buttonText, .Button.FollowButton .buttonText, .Button.UserFollowButton .buttonText, .Button.InterestFollowButton .buttonText, .Modal .formFooter .Button.primary .buttonText,
.ReactModal__Content .formFooter .Button.primary .buttonText, .news .pending .actions .Button.primary .buttonText, .panelFooter .formFooterButtons .cancelButton .buttonText, .Button.searchToFollowButton .buttonText, .formFooterButton.confirmButton .buttonText, .Button.CardFollow.RedButton .buttonText, .Button.promoteYourPin .buttonText, .Button.userProfileMenu:not(.UnblockButton) .buttonText,
.Button.editProfile .buttonText, .Button.groupBoardChat .buttonText, .boardDetail .pending .actions .Button.remove .buttonText, .boardDetail .pending .actions .Button.primary .buttonText, .BoardCollaboratorInviter .BoardInviteForm .inviteButton .buttonText, .boardCollaboratorsWrapper .BoardInviteForm .inviteButton .buttonText, .InterestFeedPage .feedHeader .interestStats, .TopicFeedPage .feedHeader .interestStats, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .BoardHeader .description, .BoardInvite.news .boardName, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs .label, .UserProfileHeader.profileHeader .about .aboutText, .UserProfileHeader.profileHeader .about .iconsLinksEtc .locationWrapper, .UserProfileHeader.profileHeader .about .iconsLinksEtc .website, .UserProfileHeader.profileHeader .about .iconsLinksEtc .middot::after, .UpsellTip .footerButtons .cancelButton,
.UpsellTip .footerButtons .submitButton, .text-md {
font-size: 12px;
letter-spacing: -0.1px;
line-height: 14px;
word-spacing: 0; }
:lang(ja) .text-md {
font-size: 10.3px; }
.text-l, .User.gridItem .username, .Interest .interestWrapper .interestLabel h2, .ShopGridItem .productName, .Board .boardName .name, .Board .boardName.hasBoardContext .User.boardRepTitle .title, .Board .boardName.hasBoardContext .User.exploreTabTitle .title, .text-lg {
font-size: 14px;
letter-spacing: -0.15px;
line-height: 16px;
word-spacing: 0; }
:lang(ja) .text-lg {
font-size: 12px; }
.text-xl, .standaloneErrorPage .name, .UserSettingsPage .sectionTitle h2 {
font-size: 16px;
letter-spacing: -0.2px;
line-height: 18px;
word-spacing: 0; }
:lang(ja) .text-xl, :lang(ja) .standaloneErrorPage .name, .standaloneErrorPage :lang(ja) .name, :lang(ja) .UserSettingsPage .sectionTitle h2, .UserSettingsPage .sectionTitle :lang(ja) h2 {
font-size: 13.8px; }
.display-xs, .BoardInfoBar .smallBoardName, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName {
font-size: 18px;
letter-spacing: -0.25px;
line-height: 20px;
word-spacing: 0; }
:lang(ja) .display-xs, :lang(ja) .BoardInfoBar .smallBoardName, .BoardInfoBar :lang(ja) .smallBoardName, :lang(ja) .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage :lang(ja) .fixedHeaderName {
font-size: 15.5px; }
.display-s, .UserInfoBar.infoBar .tabs .value, .display-sm {
font-size: 21px;
letter-spacing: -0.3px;
line-height: 23px;
word-spacing: -1.3px; }
:lang(ja) .display-sm {
font-size: 18.1px; }
.display-m, .InterestFeedPage .feedHeader .authLandingPageTitle .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .display-md {
font-size: 24px;
letter-spacing: -1px;
line-height: 28px;
word-spacing: -2px; }
:lang(ja) .display-md {
font-size: 20.6px; }
.display-l, .FeedPage .feedName, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .display-lg {
font-size: 36px;
letter-spacing: -1.25px;
line-height: 42px;
word-spacing: -2.25px; }
:lang(ja) .display-lg {
font-size: 31px; }
.display-xl {
font-size: 48px;
letter-spacing: -1.75px;
line-height: 56px;
word-spacing: -2.75px; }
:lang(ja) .display-xl {
font-size: 41.3px; }
@media (min-width: 360px) {
.text-xs, .news .pending .actions .Button.remove span.buttonText, .news .pending .actions .Button.primary span.buttonText, .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName, .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem, .ExploreStoryCredits .storyCredits > .creditItem, .ExploreStoryCredits .storyCredits .creditFooter, .Pin.summary .pinCredits > .pinCreditWrapper .creditItem, .Pin.summary .pinCredits > .creditItem, .Pin .creditFooter {
font-size: 11px;
letter-spacing: -0.05px;
line-height: 12px;
word-spacing: 0; }
:lang(ja) .text-xs, :lang(ja) .news .pending .actions .Button.remove span.buttonText, .news .pending .actions .Button.remove :lang(ja) span.buttonText, :lang(ja) .news .pending .actions .Button.primary span.buttonText, .news .pending .actions .Button.primary :lang(ja) span.buttonText, :lang(ja) .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName, .Typeahead.typeaheadWithTitles li a.titleItem :lang(ja) .typeaheadName, :lang(ja) .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem, .ExploreStoryCredits .storyCredits > .storyCreditWrapper :lang(ja) .creditItem, :lang(ja) .ExploreStoryCredits .storyCredits > .creditItem, .ExploreStoryCredits :lang(ja) .storyCredits > .creditItem, :lang(ja) .ExploreStoryCredits .storyCredits .creditFooter, .ExploreStoryCredits .storyCredits :lang(ja) .creditFooter, :lang(ja) .Pin.summary .pinCredits > .pinCreditWrapper .creditItem, .Pin.summary .pinCredits > .pinCreditWrapper :lang(ja) .creditItem, :lang(ja) .Pin.summary .pinCredits > .creditItem, .Pin.summary :lang(ja) .pinCredits > .creditItem, :lang(ja) .Pin .creditFooter, .Pin :lang(ja) .creditFooter {
font-size: 9.5px; }
.text-s, .FirstPinCreate .Pin.summary .pinMeta .TextField, .Board .boardName .boardPinCount, .Board .boardName.hasBoardContext .User.boardRepTitle .fullname, .Board .boardName.hasBoardContext .User.exploreTabTitle .fullname, .BoardHeader .belowBoardNameContainer .followerCount,
.BoardHeader .belowBoardNameContainer .pinCount, .BoardInfoBar .pinsAndFollowerCount .value, .BoardInfoBar .pinsAndFollowerCount .label, .PinCreate .Pin.summary .pinMeta .TextField, .text-sm {
font-size: 12px;
letter-spacing: -0.1px;
line-height: 14px;
word-spacing: 0; }
:lang(ja) .text-sm {
font-size: 10.3px; }
.text-m, .Button.boardSettingsButton .buttonText, .Modal .formFooter .Button.rounded:not(.primary) .buttonText,
.ReactModal__Content .formFooter .Button.rounded:not(.primary) .buttonText, .news .pending .actions .Button.remove .buttonText, .boardEdit .Button .buttonText, .Button.userFollowingGridButton .buttonText, .InviteButtonEmail .Button.btn .buttonText, .Button.moreItems .buttonText, .formFooterButton.cancelButton .buttonText, .Button.CardFollow.GrayButton .buttonText, .Button.FollowButton .buttonText, .Button.UserFollowButton .buttonText, .Button.InterestFollowButton .buttonText, .Modal .formFooter .Button.primary .buttonText,
.ReactModal__Content .formFooter .Button.primary .buttonText, .news .pending .actions .Button.primary .buttonText, .panelFooter .formFooterButtons .cancelButton .buttonText, .Button.searchToFollowButton .buttonText, .formFooterButton.confirmButton .buttonText, .Button.CardFollow.RedButton .buttonText, .Button.promoteYourPin .buttonText, .Button.userProfileMenu:not(.UnblockButton) .buttonText,
.Button.editProfile .buttonText, .Button.groupBoardChat .buttonText, .boardDetail .pending .actions .Button.remove .buttonText, .boardDetail .pending .actions .Button.primary .buttonText, .BoardCollaboratorInviter .BoardInviteForm .inviteButton .buttonText, .boardCollaboratorsWrapper .BoardInviteForm .inviteButton .buttonText, .InterestFeedPage .feedHeader .interestStats, .TopicFeedPage .feedHeader .interestStats, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .BoardHeader .description, .BoardInvite.news .boardName, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs .label, .UserProfileHeader.profileHeader .about .aboutText, .UserProfileHeader.profileHeader .about .iconsLinksEtc .locationWrapper, .UserProfileHeader.profileHeader .about .iconsLinksEtc .website, .UserProfileHeader.profileHeader .about .iconsLinksEtc .middot::after, .UpsellTip .footerButtons .cancelButton,
.UpsellTip .footerButtons .submitButton, .text-md {
font-size: 14px;
letter-spacing: -0.15px;
line-height: 16px;
word-spacing: 0; }
:lang(ja) .text-md {
font-size: 12px; }
.text-l, .User.gridItem .username, .Interest .interestWrapper .interestLabel h2, .ShopGridItem .productName, .Board .boardName .name, .Board .boardName.hasBoardContext .User.boardRepTitle .title, .Board .boardName.hasBoardContext .User.exploreTabTitle .title, .text-lg {
font-size: 16px;
letter-spacing: -0.2px;
line-height: 18px;
word-spacing: 0; }
:lang(ja) .text-lg {
font-size: 13.8px; }
.text-xl, .standaloneErrorPage .name, .UserSettingsPage .sectionTitle h2 {
font-size: 18px;
letter-spacing: -0.25px;
line-height: 20px;
word-spacing: 0; }
:lang(ja) .text-xl, :lang(ja) .standaloneErrorPage .name, .standaloneErrorPage :lang(ja) .name, :lang(ja) .UserSettingsPage .sectionTitle h2, .UserSettingsPage .sectionTitle :lang(ja) h2 {
font-size: 15.5px; }
.display-xs, .BoardInfoBar .smallBoardName, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName {
font-size: 21px;
letter-spacing: -0.3px;
line-height: 23px;
word-spacing: -1.3px; }
:lang(ja) .display-xs, :lang(ja) .BoardInfoBar .smallBoardName, .BoardInfoBar :lang(ja) .smallBoardName, :lang(ja) .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage :lang(ja) .fixedHeaderName {
font-size: 18.1px; }
.display-s, .UserInfoBar.infoBar .tabs .value, .display-sm {
font-size: 24px;
letter-spacing: -1px;
line-height: 28px;
word-spacing: -2px; }
:lang(ja) .display-sm {
font-size: 20.6px; }
.display-m, .InterestFeedPage .feedHeader .authLandingPageTitle .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .display-md {
font-size: 36px;
letter-spacing: -1.25px;
line-height: 42px;
word-spacing: -2.25px; }
:lang(ja) .display-md {
font-size: 31px; }
.display-l, .FeedPage .feedName, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .display-lg {
font-size: 48px;
letter-spacing: -1.75px;
line-height: 56px;
word-spacing: -2.75px; }
:lang(ja) .display-lg {
font-size: 41.3px; }
.display-xl {
font-size: 64px;
letter-spacing: -2.25px;
line-height: 76px;
word-spacing: -3.25px; }
:lang(ja) .display-xl {
font-size: 55px; } }
@media (min-width: 1312px) {
.text-xs, .news .pending .actions .Button.remove span.buttonText, .news .pending .actions .Button.primary span.buttonText, .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName, .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem, .ExploreStoryCredits .storyCredits > .creditItem, .ExploreStoryCredits .storyCredits .creditFooter, .Pin.summary .pinCredits > .pinCreditWrapper .creditItem, .Pin.summary .pinCredits > .creditItem, .Pin .creditFooter {
font-size: 12px;
letter-spacing: -0.1px;
line-height: 14px;
word-spacing: 0; }
:lang(ja) .text-xs, :lang(ja) .news .pending .actions .Button.remove span.buttonText, .news .pending .actions .Button.remove :lang(ja) span.buttonText, :lang(ja) .news .pending .actions .Button.primary span.buttonText, .news .pending .actions .Button.primary :lang(ja) span.buttonText, :lang(ja) .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName, .Typeahead.typeaheadWithTitles li a.titleItem :lang(ja) .typeaheadName, :lang(ja) .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem, .ExploreStoryCredits .storyCredits > .storyCreditWrapper :lang(ja) .creditItem, :lang(ja) .ExploreStoryCredits .storyCredits > .creditItem, .ExploreStoryCredits :lang(ja) .storyCredits > .creditItem, :lang(ja) .ExploreStoryCredits .storyCredits .creditFooter, .ExploreStoryCredits .storyCredits :lang(ja) .creditFooter, :lang(ja) .Pin.summary .pinCredits > .pinCreditWrapper .creditItem, .Pin.summary .pinCredits > .pinCreditWrapper :lang(ja) .creditItem, :lang(ja) .Pin.summary .pinCredits > .creditItem, .Pin.summary :lang(ja) .pinCredits > .creditItem, :lang(ja) .Pin .creditFooter, .Pin :lang(ja) .creditFooter {
font-size: 10.3px; }
.text-s, .FirstPinCreate .Pin.summary .pinMeta .TextField, .Board .boardName .boardPinCount, .Board .boardName.hasBoardContext .User.boardRepTitle .fullname, .Board .boardName.hasBoardContext .User.exploreTabTitle .fullname, .BoardHeader .belowBoardNameContainer .followerCount,
.BoardHeader .belowBoardNameContainer .pinCount, .BoardInfoBar .pinsAndFollowerCount .value, .BoardInfoBar .pinsAndFollowerCount .label, .PinCreate .Pin.summary .pinMeta .TextField, .text-sm {
font-size: 14px;
letter-spacing: -0.15px;
line-height: 16px;
word-spacing: 0; }
:lang(ja) .text-sm {
font-size: 12px; }
.text-m, .Button.boardSettingsButton .buttonText, .Modal .formFooter .Button.rounded:not(.primary) .buttonText,
.ReactModal__Content .formFooter .Button.rounded:not(.primary) .buttonText, .news .pending .actions .Button.remove .buttonText, .boardEdit .Button .buttonText, .Button.userFollowingGridButton .buttonText, .InviteButtonEmail .Button.btn .buttonText, .Button.moreItems .buttonText, .formFooterButton.cancelButton .buttonText, .Button.CardFollow.GrayButton .buttonText, .Button.FollowButton .buttonText, .Button.UserFollowButton .buttonText, .Button.InterestFollowButton .buttonText, .Modal .formFooter .Button.primary .buttonText,
.ReactModal__Content .formFooter .Button.primary .buttonText, .news .pending .actions .Button.primary .buttonText, .panelFooter .formFooterButtons .cancelButton .buttonText, .Button.searchToFollowButton .buttonText, .formFooterButton.confirmButton .buttonText, .Button.CardFollow.RedButton .buttonText, .Button.promoteYourPin .buttonText, .Button.userProfileMenu:not(.UnblockButton) .buttonText,
.Button.editProfile .buttonText, .Button.groupBoardChat .buttonText, .boardDetail .pending .actions .Button.remove .buttonText, .boardDetail .pending .actions .Button.primary .buttonText, .BoardCollaboratorInviter .BoardInviteForm .inviteButton .buttonText, .boardCollaboratorsWrapper .BoardInviteForm .inviteButton .buttonText, .InterestFeedPage .feedHeader .interestStats, .TopicFeedPage .feedHeader .interestStats, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .BoardHeader .description, .BoardInvite.news .boardName, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs .label, .UserProfileHeader.profileHeader .about .aboutText, .UserProfileHeader.profileHeader .about .iconsLinksEtc .locationWrapper, .UserProfileHeader.profileHeader .about .iconsLinksEtc .website, .UserProfileHeader.profileHeader .about .iconsLinksEtc .middot::after, .UpsellTip .footerButtons .cancelButton,
.UpsellTip .footerButtons .submitButton, .text-md {
font-size: 16px;
letter-spacing: -0.2px;
line-height: 18px;
word-spacing: 0; }
:lang(ja) .text-md {
font-size: 13.8px; }
.text-l, .User.gridItem .username, .Interest .interestWrapper .interestLabel h2, .ShopGridItem .productName, .Board .boardName .name, .Board .boardName.hasBoardContext .User.boardRepTitle .title, .Board .boardName.hasBoardContext .User.exploreTabTitle .title, .text-lg {
font-size: 18px;
letter-spacing: -0.25px;
line-height: 20px;
word-spacing: 0; }
:lang(ja) .text-lg {
font-size: 15.5px; }
.text-xl, .standaloneErrorPage .name, .UserSettingsPage .sectionTitle h2 {
font-size: 21px;
letter-spacing: -0.3px;
line-height: 23px;
word-spacing: -1.3px; }
:lang(ja) .text-xl, :lang(ja) .standaloneErrorPage .name, .standaloneErrorPage :lang(ja) .name, :lang(ja) .UserSettingsPage .sectionTitle h2, .UserSettingsPage .sectionTitle :lang(ja) h2 {
font-size: 18.1px; }
.display-xs, .BoardInfoBar .smallBoardName, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName {
font-size: 24px;
letter-spacing: -1px;
line-height: 28px;
word-spacing: -2px; }
:lang(ja) .display-xs, :lang(ja) .BoardInfoBar .smallBoardName, .BoardInfoBar :lang(ja) .smallBoardName, :lang(ja) .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage :lang(ja) .fixedHeaderName {
font-size: 20.6px; }
.display-s, .UserInfoBar.infoBar .tabs .value, .display-sm {
font-size: 36px;
letter-spacing: -1.25px;
line-height: 42px;
word-spacing: -2.25px; }
:lang(ja) .display-sm {
font-size: 31px; }
.display-m, .InterestFeedPage .feedHeader .authLandingPageTitle .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .display-md {
font-size: 48px;
letter-spacing: -1.75px;
line-height: 56px;
word-spacing: -2.75px; }
:lang(ja) .display-md {
font-size: 41.3px; }
.display-l, .FeedPage .feedName, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .display-lg {
font-size: 64px;
letter-spacing: -2.25px;
line-height: 76px;
word-spacing: -3.25px; }
:lang(ja) .display-lg {
font-size: 55px; }
.display-xl {
font-size: 96px;
letter-spacing: -3.25px;
line-height: 114px;
word-spacing: -4.25px; }
:lang(ja) .display-xl {
font-size: 82.6px; } }
.m0 {
margin: 0; }
.mt0 {
margin-top: 0; }
.mr0 {
margin-right: 0; }
.mb0 {
margin-bottom: 0; }
.ml0 {
margin-left: 0; }
.p0 {
padding: 0; }
.px0 {
padding-left: 0;
padding-right: 0; }
.py0 {
padding-bottom: 0;
padding-top: 0; }
.m1 {
margin: 3px; }
.mt1, .Board .boardName .boardPinCount .PinCount, .Board .boardName.hasBoardContext, .BoardHeader .description {
margin-top: 3px; }
.mr1, .TypeaheadField.guided.buttonOnRight::before, .TokenizedInput.drawerNav .tokensWrapper .tokenizedItem, .Board .boardName > .secretIcon, .Board .boardName .User.boardRepTitle.hasText.thumb,
.Board .boardName .User.exploreTabTitle.hasText.thumb, .BoardInfoBar .boardButtons > *, .UserSettingsPage .formInlineCheckedSet label > input {
margin-right: 3px; }
.mb1 {
margin-bottom: 3px; }
.ml1, .TokenizedInput.guided .tokensWrapper .tokenizedItem {
margin-left: 3px; }
.mn1 {
margin: -3px; }
.mtn1 {
margin-top: -3px; }
.mbn1 {
margin-bottom: -3px; }
.mln1 {
margin-left: -3px; }
.mrn1, .mxn1, .UserInfoBar.infoBar .tabs {
margin-right: -3px; }
.mxn1, .UserInfoBar.infoBar .tabs {
margin-left: -3px; }
.myn1 {
margin-bottom: -3px;
margin-top: -3px; }
.p1 {
padding: 3px; }
.px1, .standaloneErrorPage .name, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .ExploreStoryCredits .storyCredits > .creditItem, .ShopGridItem .productName, .Board .boardName, .BoardInfoBar .pinsAndFollowerCount > ul > li, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs li a {
padding-left: 3px;
padding-right: 3px; }
.py1, .UserInfoBar.infoBar .tabs ul {
padding-bottom: 3px;
padding-top: 3px; }
.m2 {
margin: 6px; }
.mt2 {
margin-top: 6px; }
.mr2, .FeedPage .RelatedInterestsSection > ul > li, .InterestFeedPage .RelatedInterestsSection > ul > li, .TopicFeedPage .RelatedInterestsSection > ul > li, .Board .boardName .name, .UserProfileHeader.profileHeader .profileImage::after {
margin-right: 6px; }
.mb2, .Interest.storyView .interestWrapper, .FirstPinCreate .Pin.summary .pinMeta .TextField, .PinCreate .Pin.summary .pinMeta .TextField {
margin-bottom: 6px; }
.ml2, .TypeaheadField.guided.buttonOnRight::before, .UserProfileHeader.profileHeader .profileImage::after {
margin-left: 6px; }
.mn2 {
margin: -6px; }
.mtn2 {
margin-top: -6px; }
.mbn2 {
margin-bottom: -6px; }
.mln2 {
margin-left: -6px; }
.mrn2, .mxn2 {
margin-right: -6px; }
.mxn2 {
margin-left: -6px; }
.myn2 {
margin-bottom: -6px;
margin-top: -6px; }
.p2 {
padding: 6px; }
.px2, .SearchForm.guided, .BoardHeader .boardHeaderWrapper, .BoardInfoBar .infoBarWrapper, .BulkEditBar .boardBulkEditBar, .UserProfileHeader.profileHeader .profileImage, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar {
padding-left: 6px;
padding-right: 6px; }
.py2, .standaloneErrorPage .name, .User.gridItem .username, .ShopGridItem .productName, .Board .boardName {
padding-bottom: 6px;
padding-top: 6px; }
.m3 {
margin: 9px; }
.mt3, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage {
margin-top: 9px; }
.mr3, .FeedPage .RelatedInterestsSection > ul, .User.thumb.boardRepTitle .title, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul {
margin-right: 9px; }
.mb3, .BoardHeader .boardHeaderWrapper {
margin-bottom: 9px; }
.ml3, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul {
margin-left: 9px; }
.mn3 {
margin: -9px; }
.mtn3 {
margin-top: -9px; }
.mbn3 {
margin-bottom: -9px; }
.mln3 {
margin-left: -9px; }
.mrn3, .mxn3 {
margin-right: -9px; }
.mxn3 {
margin-left: -9px; }
.myn3 {
margin-bottom: -9px;
margin-top: -9px; }
.p3 {
padding: 9px; }
.px3, .FeedPage .feedName, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .UserInfoBar {
padding-left: 9px;
padding-right: 9px; }
.py3, .FeedPage .feedName, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .TopicFeedPage .RelatedInterestsSection > ul, .BoardInfoBar .infoBarWrapper, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar {
padding-bottom: 9px;
padding-top: 9px; }
.m4 {
margin: 12px; }
.mt4, .FeedPage .feedName {
margin-top: 12px; }
.mr4 {
margin-right: 12px; }
.mb4, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .NagSearch .message {
margin-bottom: 12px; }
.ml4 {
margin-left: 12px; }
.mn4 {
margin: -12px; }
.mtn4 {
margin-top: -12px; }
.mbn4 {
margin-bottom: -12px; }
.mln4 {
margin-left: -12px; }
.mrn4, .mxn4 {
margin-right: -12px; }
.mxn4 {
margin-left: -12px; }
.myn4 {
margin-bottom: -12px;
margin-top: -12px; }
.p4 {
padding: 12px; }
.px4 {
padding-left: 12px;
padding-right: 12px; }
.py4 {
padding-bottom: 12px;
padding-top: 12px; }
.m5 {
margin: 15px; }
.mt5 {
margin-top: 15px; }
.mr5 {
margin-right: 15px; }
.mb5 {
margin-bottom: 15px; }
.ml5 {
margin-left: 15px; }
.mn5 {
margin: -15px; }
.mtn5 {
margin-top: -15px; }
.mbn5 {
margin-bottom: -15px; }
.mln5 {
margin-left: -15px; }
.mrn5, .mxn5 {
margin-right: -15px; }
.mxn5 {
margin-left: -15px; }
.myn5 {
margin-bottom: -15px;
margin-top: -15px; }
.p5 {
padding: 15px; }
.px5 {
padding-left: 15px;
padding-right: 15px; }
.py5 {
padding-bottom: 15px;
padding-top: 15px; }
.m6 {
margin: 18px; }
.mt6 {
margin-top: 18px; }
.mr6 {
margin-right: 18px; }
.mb6 {
margin-bottom: 18px; }
.ml6 {
margin-left: 18px; }
.mn6 {
margin: -18px; }
.mtn6 {
margin-top: -18px; }
.mbn6 {
margin-bottom: -18px; }
.mln6 {
margin-left: -18px; }
.mrn6, .mxn6 {
margin-right: -18px; }
.mxn6 {
margin-left: -18px; }
.myn6 {
margin-bottom: -18px;
margin-top: -18px; }
.p6 {
padding: 18px; }
.px6 {
padding-left: 18px;
padding-right: 18px; }
.py6 {
padding-bottom: 18px;
padding-top: 18px; }
@media (min-width: 360px) {
.m1 {
margin: 4px; }
.mt1, .Board .boardName .boardPinCount .PinCount, .Board .boardName.hasBoardContext, .BoardHeader .description {
margin-top: 4px; }
.mr1, .TypeaheadField.guided.buttonOnRight::before, .TokenizedInput.drawerNav .tokensWrapper .tokenizedItem, .Board .boardName > .secretIcon, .Board .boardName .User.boardRepTitle.hasText.thumb,
.Board .boardName .User.exploreTabTitle.hasText.thumb, .BoardInfoBar .boardButtons > *, .UserSettingsPage .formInlineCheckedSet label > input {
margin-right: 4px; }
.mb1 {
margin-bottom: 4px; }
.ml1, .TokenizedInput.guided .tokensWrapper .tokenizedItem {
margin-left: 4px; }
.mn1 {
margin: -4px; }
.mtn1 {
margin-top: -4px; }
.mbn1 {
margin-bottom: -4px; }
.mln1 {
margin-left: -4px; }
.mrn1, .mxn1, .UserInfoBar.infoBar .tabs {
margin-right: -4px; }
.mxn1, .UserInfoBar.infoBar .tabs {
margin-left: -4px; }
.myn1 {
margin-bottom: -4px;
margin-top: -4px; }
.p1 {
padding: 4px; }
.px1, .standaloneErrorPage .name, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .ExploreStoryCredits .storyCredits > .creditItem, .ShopGridItem .productName, .Board .boardName, .BoardInfoBar .pinsAndFollowerCount > ul > li, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs li a {
padding-left: 4px;
padding-right: 4px; }
.py1, .UserInfoBar.infoBar .tabs ul {
padding-bottom: 4px;
padding-top: 4px; }
.m2 {
margin: 8px; }
.mt2 {
margin-top: 8px; }
.mr2, .FeedPage .RelatedInterestsSection > ul > li, .InterestFeedPage .RelatedInterestsSection > ul > li, .TopicFeedPage .RelatedInterestsSection > ul > li, .Board .boardName .name, .UserProfileHeader.profileHeader .profileImage::after {
margin-right: 8px; }
.mb2, .Interest.storyView .interestWrapper, .FirstPinCreate .Pin.summary .pinMeta .TextField, .PinCreate .Pin.summary .pinMeta .TextField {
margin-bottom: 8px; }
.ml2, .TypeaheadField.guided.buttonOnRight::before, .UserProfileHeader.profileHeader .profileImage::after {
margin-left: 8px; }
.mn2 {
margin: -8px; }
.mtn2 {
margin-top: -8px; }
.mbn2 {
margin-bottom: -8px; }
.mln2 {
margin-left: -8px; }
.mrn2, .mxn2 {
margin-right: -8px; }
.mxn2 {
margin-left: -8px; }
.myn2 {
margin-bottom: -8px;
margin-top: -8px; }
.p2 {
padding: 8px; }
.px2, .SearchForm.guided, .BoardHeader .boardHeaderWrapper, .BoardInfoBar .infoBarWrapper, .BulkEditBar .boardBulkEditBar, .UserProfileHeader.profileHeader .profileImage, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar {
padding-left: 8px;
padding-right: 8px; }
.py2, .standaloneErrorPage .name, .User.gridItem .username, .ShopGridItem .productName, .Board .boardName {
padding-bottom: 8px;
padding-top: 8px; }
.m3 {
margin: 12px; }
.mt3, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage {
margin-top: 12px; }
.mr3, .FeedPage .RelatedInterestsSection > ul, .User.thumb.boardRepTitle .title, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul {
margin-right: 12px; }
.mb3, .BoardHeader .boardHeaderWrapper {
margin-bottom: 12px; }
.ml3, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul {
margin-left: 12px; }
.mn3 {
margin: -12px; }
.mtn3 {
margin-top: -12px; }
.mbn3 {
margin-bottom: -12px; }
.mln3 {
margin-left: -12px; }
.mrn3, .mxn3 {
margin-right: -12px; }
.mxn3 {
margin-left: -12px; }
.myn3 {
margin-bottom: -12px;
margin-top: -12px; }
.p3 {
padding: 12px; }
.px3, .FeedPage .feedName, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .UserInfoBar {
padding-left: 12px;
padding-right: 12px; }
.py3, .FeedPage .feedName, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .TopicFeedPage .RelatedInterestsSection > ul, .BoardInfoBar .infoBarWrapper, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar {
padding-bottom: 12px;
padding-top: 12px; }
.m4 {
margin: 16px; }
.mt4, .FeedPage .feedName {
margin-top: 16px; }
.mr4 {
margin-right: 16px; }
.mb4, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .NagSearch .message {
margin-bottom: 16px; }
.ml4 {
margin-left: 16px; }
.mn4 {
margin: -16px; }
.mtn4 {
margin-top: -16px; }
.mbn4 {
margin-bottom: -16px; }
.mln4 {
margin-left: -16px; }
.mrn4, .mxn4 {
margin-right: -16px; }
.mxn4 {
margin-left: -16px; }
.myn4 {
margin-bottom: -16px;
margin-top: -16px; }
.p4 {
padding: 16px; }
.px4 {
padding-left: 16px;
padding-right: 16px; }
.py4 {
padding-bottom: 16px;
padding-top: 16px; }
.m5 {
margin: 20px; }
.mt5 {
margin-top: 20px; }
.mr5 {
margin-right: 20px; }
.mb5 {
margin-bottom: 20px; }
.ml5 {
margin-left: 20px; }
.mn5 {
margin: -20px; }
.mtn5 {
margin-top: -20px; }
.mbn5 {
margin-bottom: -20px; }
.mln5 {
margin-left: -20px; }
.mrn5, .mxn5 {
margin-right: -20px; }
.mxn5 {
margin-left: -20px; }
.myn5 {
margin-bottom: -20px;
margin-top: -20px; }
.p5 {
padding: 20px; }
.px5 {
padding-left: 20px;
padding-right: 20px; }
.py5 {
padding-bottom: 20px;
padding-top: 20px; }
.m6 {
margin: 24px; }
.mt6 {
margin-top: 24px; }
.mr6 {
margin-right: 24px; }
.mb6 {
margin-bottom: 24px; }
.ml6 {
margin-left: 24px; }
.mn6 {
margin: -24px; }
.mtn6 {
margin-top: -24px; }
.mbn6 {
margin-bottom: -24px; }
.mln6 {
margin-left: -24px; }
.mrn6, .mxn6 {
margin-right: -24px; }
.mxn6 {
margin-left: -24px; }
.myn6 {
margin-bottom: -24px;
margin-top: -24px; }
.p6 {
padding: 24px; }
.px6 {
padding-left: 24px;
padding-right: 24px; }
.py6 {
padding-bottom: 24px;
padding-top: 24px; } }
@media (min-width: 800px) {
.m1 {
margin: 6px 8px; }
.mt1, .Board .boardName .boardPinCount .PinCount, .Board .boardName.hasBoardContext, .BoardHeader .description {
margin-top: 6px; }
.mr1, .TypeaheadField.guided.buttonOnRight::before, .TokenizedInput.drawerNav .tokensWrapper .tokenizedItem, .Board .boardName > .secretIcon, .Board .boardName .User.boardRepTitle.hasText.thumb,
.Board .boardName .User.exploreTabTitle.hasText.thumb, .BoardInfoBar .boardButtons > *, .UserSettingsPage .formInlineCheckedSet label > input {
margin-right: 8px; }
.mb1 {
margin-bottom: 6px; }
.ml1, .TokenizedInput.guided .tokensWrapper .tokenizedItem {
margin-left: 8px; }
.mn1 {
margin: -6px -8px; }
.mtn1 {
margin-top: -6px; }
.mbn1 {
margin-bottom: -6px; }
.mln1 {
margin-left: -8px; }
.mrn1, .mxn1, .UserInfoBar.infoBar .tabs {
margin-right: -8px; }
.mxn1, .UserInfoBar.infoBar .tabs {
margin-left: -8px; }
.myn1 {
margin-bottom: -6px;
margin-top: -6px; }
.p1 {
padding: 6px 8px; }
.px1, .standaloneErrorPage .name, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .ExploreStoryCredits .storyCredits > .creditItem, .ShopGridItem .productName, .Board .boardName, .BoardInfoBar .pinsAndFollowerCount > ul > li, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs li a {
padding-left: 8px;
padding-right: 8px; }
.py1, .UserInfoBar.infoBar .tabs ul {
padding-bottom: 6px;
padding-top: 6px; }
.m2 {
margin: 12px 16px; }
.mt2 {
margin-top: 12px; }
.mr2, .FeedPage .RelatedInterestsSection > ul > li, .InterestFeedPage .RelatedInterestsSection > ul > li, .TopicFeedPage .RelatedInterestsSection > ul > li, .Board .boardName .name, .UserProfileHeader.profileHeader .profileImage::after {
margin-right: 16px; }
.mb2, .Interest.storyView .interestWrapper, .FirstPinCreate .Pin.summary .pinMeta .TextField, .PinCreate .Pin.summary .pinMeta .TextField {
margin-bottom: 12px; }
.ml2, .TypeaheadField.guided.buttonOnRight::before, .UserProfileHeader.profileHeader .profileImage::after {
margin-left: 16px; }
.mn2 {
margin: -12px -16px; }
.mtn2 {
margin-top: -12px; }
.mbn2 {
margin-bottom: -12px; }
.mln2 {
margin-left: -16px; }
.mrn2, .mxn2 {
margin-right: -16px; }
.mxn2 {
margin-left: -16px; }
.myn2 {
margin-bottom: -12px;
margin-top: -12px; }
.p2 {
padding: 12px 16px; }
.px2, .SearchForm.guided, .BoardHeader .boardHeaderWrapper, .BoardInfoBar .infoBarWrapper, .BulkEditBar .boardBulkEditBar, .UserProfileHeader.profileHeader .profileImage, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar {
padding-left: 16px;
padding-right: 16px; }
.py2, .standaloneErrorPage .name, .User.gridItem .username, .ShopGridItem .productName, .Board .boardName {
padding-bottom: 12px;
padding-top: 12px; }
.m3 {
margin: 18px 24px; }
.mt3, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage {
margin-top: 18px; }
.mr3, .FeedPage .RelatedInterestsSection > ul, .User.thumb.boardRepTitle .title, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul {
margin-right: 24px; }
.mb3, .BoardHeader .boardHeaderWrapper {
margin-bottom: 18px; }
.ml3, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul {
margin-left: 24px; }
.mn3 {
margin: -18px -24px; }
.mtn3 {
margin-top: -18px; }
.mbn3 {
margin-bottom: -18px; }
.mln3 {
margin-left: -24px; }
.mrn3, .mxn3 {
margin-right: -24px; }
.mxn3 {
margin-left: -24px; }
.myn3 {
margin-bottom: -18px;
margin-top: -18px; }
.p3 {
padding: 18px 24px; }
.px3, .FeedPage .feedName, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .UserInfoBar {
padding-left: 24px;
padding-right: 24px; }
.py3, .FeedPage .feedName, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .TopicFeedPage .RelatedInterestsSection > ul, .BoardInfoBar .infoBarWrapper, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar {
padding-bottom: 18px;
padding-top: 18px; }
.m4 {
margin: 24px 32px; }
.mt4, .FeedPage .feedName {
margin-top: 24px; }
.mr4 {
margin-right: 32px; }
.mb4, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .NagSearch .message {
margin-bottom: 24px; }
.ml4 {
margin-left: 32px; }
.mn4 {
margin: -24px -32px; }
.mtn4 {
margin-top: -24px; }
.mbn4 {
margin-bottom: -24px; }
.mln4 {
margin-left: -32px; }
.mrn4, .mxn4 {
margin-right: -32px; }
.mxn4 {
margin-left: -32px; }
.myn4 {
margin-bottom: -24px;
margin-top: -24px; }
.p4 {
padding: 24px 32px; }
.px4 {
padding-left: 32px;
padding-right: 32px; }
.py4 {
padding-bottom: 24px;
padding-top: 24px; }
.m5 {
margin: 30px 40px; }
.mt5 {
margin-top: 30px; }
.mr5 {
margin-right: 40px; }
.mb5 {
margin-bottom: 30px; }
.ml5 {
margin-left: 40px; }
.mn5 {
margin: -30px -40px; }
.mtn5 {
margin-top: -30px; }
.mbn5 {
margin-bottom: -30px; }
.mln5 {
margin-left: -40px; }
.mrn5, .mxn5 {
margin-right: -40px; }
.mxn5 {
margin-left: -40px; }
.myn5 {
margin-bottom: -30px;
margin-top: -30px; }
.p5 {
padding: 30px 40px; }
.px5 {
padding-left: 40px;
padding-right: 40px; }
.py5 {
padding-bottom: 30px;
padding-top: 30px; }
.m6 {
margin: 36px 48px; }
.mt6 {
margin-top: 36px; }
.mr6 {
margin-right: 48px; }
.mb6 {
margin-bottom: 36px; }
.ml6 {
margin-left: 48px; }
.mn6 {
margin: -36px -48px; }
.mtn6 {
margin-top: -36px; }
.mbn6 {
margin-bottom: -36px; }
.mln6 {
margin-left: -48px; }
.mrn6, .mxn6 {
margin-right: -48px; }
.mxn6 {
margin-left: -48px; }
.myn6 {
margin-bottom: -36px;
margin-top: -36px; }
.p6 {
padding: 36px 48px; }
.px6 {
padding-left: 48px;
padding-right: 48px; }
.py6 {
padding-bottom: 36px;
padding-top: 36px; } }
@media (min-width: 1312px) {
.m1 {
margin: 6px 8px; }
.mt1, .Board .boardName .boardPinCount .PinCount, .Board .boardName.hasBoardContext, .BoardHeader .description {
margin-top: 6px; }
.mr1, .TypeaheadField.guided.buttonOnRight::before, .TokenizedInput.drawerNav .tokensWrapper .tokenizedItem, .Board .boardName > .secretIcon, .Board .boardName .User.boardRepTitle.hasText.thumb,
.Board .boardName .User.exploreTabTitle.hasText.thumb, .BoardInfoBar .boardButtons > *, .UserSettingsPage .formInlineCheckedSet label > input {
margin-right: 8px; }
.mb1 {
margin-bottom: 6px; }
.ml1, .TokenizedInput.guided .tokensWrapper .tokenizedItem {
margin-left: 8px; }
.mn1 {
margin: -6px -8px; }
.mtn1 {
margin-top: -6px; }
.mbn1 {
margin-bottom: -6px; }
.mln1 {
margin-left: -8px; }
.mrn1, .mxn1, .UserInfoBar.infoBar .tabs {
margin-right: -8px; }
.mxn1, .UserInfoBar.infoBar .tabs {
margin-left: -8px; }
.myn1 {
margin-bottom: -6px;
margin-top: -6px; }
.p1 {
padding: 6px 8px; }
.px1, .standaloneErrorPage .name, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .ExploreStoryCredits .storyCredits > .creditItem, .ShopGridItem .productName, .Board .boardName, .BoardInfoBar .pinsAndFollowerCount > ul > li, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs li a {
padding-left: 8px;
padding-right: 8px; }
.py1, .UserInfoBar.infoBar .tabs ul {
padding-bottom: 6px;
padding-top: 6px; }
.m2 {
margin: 12px 16px; }
.mt2 {
margin-top: 12px; }
.mr2, .FeedPage .RelatedInterestsSection > ul > li, .InterestFeedPage .RelatedInterestsSection > ul > li, .TopicFeedPage .RelatedInterestsSection > ul > li, .Board .boardName .name, .UserProfileHeader.profileHeader .profileImage::after {
margin-right: 16px; }
.mb2, .Interest.storyView .interestWrapper, .FirstPinCreate .Pin.summary .pinMeta .TextField, .PinCreate .Pin.summary .pinMeta .TextField {
margin-bottom: 12px; }
.ml2, .TypeaheadField.guided.buttonOnRight::before, .UserProfileHeader.profileHeader .profileImage::after {
margin-left: 16px; }
.mn2 {
margin: -12px -16px; }
.mtn2 {
margin-top: -12px; }
.mbn2 {
margin-bottom: -12px; }
.mln2 {
margin-left: -16px; }
.mrn2, .mxn2 {
margin-right: -16px; }
.mxn2 {
margin-left: -16px; }
.myn2 {
margin-bottom: -12px;
margin-top: -12px; }
.p2 {
padding: 12px 16px; }
.px2, .SearchForm.guided, .BoardHeader .boardHeaderWrapper, .BoardInfoBar .infoBarWrapper, .BulkEditBar .boardBulkEditBar, .UserProfileHeader.profileHeader .profileImage, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar {
padding-left: 16px;
padding-right: 16px; }
.py2, .standaloneErrorPage .name, .User.gridItem .username, .ShopGridItem .productName, .Board .boardName {
padding-bottom: 12px;
padding-top: 12px; }
.m3 {
margin: 18px 24px; }
.mt3, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage {
margin-top: 18px; }
.mr3, .FeedPage .RelatedInterestsSection > ul, .User.thumb.boardRepTitle .title, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul {
margin-right: 24px; }
.mb3, .BoardHeader .boardHeaderWrapper {
margin-bottom: 18px; }
.ml3, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul {
margin-left: 24px; }
.mn3 {
margin: -18px -24px; }
.mtn3 {
margin-top: -18px; }
.mbn3 {
margin-bottom: -18px; }
.mln3 {
margin-left: -24px; }
.mrn3, .mxn3 {
margin-right: -24px; }
.mxn3 {
margin-left: -24px; }
.myn3 {
margin-bottom: -18px;
margin-top: -18px; }
.p3 {
padding: 18px 24px; }
.px3, .FeedPage .feedName, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .UserInfoBar {
padding-left: 24px;
padding-right: 24px; }
.py3, .FeedPage .feedName, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .TopicFeedPage .RelatedInterestsSection > ul, .BoardInfoBar .infoBarWrapper, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar {
padding-bottom: 18px;
padding-top: 18px; }
.m4 {
margin: 24px 32px; }
.mt4, .FeedPage .feedName {
margin-top: 24px; }
.mr4 {
margin-right: 32px; }
.mb4, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .NagSearch .message {
margin-bottom: 24px; }
.ml4 {
margin-left: 32px; }
.mn4 {
margin: -24px -32px; }
.mtn4 {
margin-top: -24px; }
.mbn4 {
margin-bottom: -24px; }
.mln4 {
margin-left: -32px; }
.mrn4, .mxn4 {
margin-right: -32px; }
.mxn4 {
margin-left: -32px; }
.myn4 {
margin-bottom: -24px;
margin-top: -24px; }
.p4 {
padding: 24px 32px; }
.px4 {
padding-left: 32px;
padding-right: 32px; }
.py4 {
padding-bottom: 24px;
padding-top: 24px; }
.m5 {
margin: 30px 40px; }
.mt5 {
margin-top: 30px; }
.mr5 {
margin-right: 40px; }
.mb5 {
margin-bottom: 30px; }
.ml5 {
margin-left: 40px; }
.mn5 {
margin: -30px -40px; }
.mtn5 {
margin-top: -30px; }
.mbn5 {
margin-bottom: -30px; }
.mln5 {
margin-left: -40px; }
.mrn5, .mxn5 {
margin-right: -40px; }
.mxn5 {
margin-left: -40px; }
.myn5 {
margin-bottom: -30px;
margin-top: -30px; }
.p5 {
padding: 30px 40px; }
.px5 {
padding-left: 40px;
padding-right: 40px; }
.py5 {
padding-bottom: 30px;
padding-top: 30px; }
.m6 {
margin: 36px 48px; }
.mt6 {
margin-top: 36px; }
.mr6 {
margin-right: 48px; }
.mb6 {
margin-bottom: 36px; }
.ml6 {
margin-left: 48px; }
.mn6 {
margin: -36px -48px; }
.mtn6 {
margin-top: -36px; }
.mbn6 {
margin-bottom: -36px; }
.mln6 {
margin-left: -48px; }
.mrn6, .mxn6 {
margin-right: -48px; }
.mxn6 {
margin-left: -48px; }
.myn6 {
margin-bottom: -36px;
margin-top: -36px; }
.p6 {
padding: 36px 48px; }
.px6 {
padding-left: 48px;
padding-right: 48px; }
.py6 {
padding-bottom: 36px;
padding-top: 36px; } }
@-webkit-keyframes scrollBgGrid {
from {
-webkit-transform: translateY(0px);
transform: translateY(0px); }
to {
-webkit-transform: translateY(-300px);
transform: translateY(-300px); } }
@keyframes scrollBgGrid {
from {
-webkit-transform: translateY(0px);
transform: translateY(0px); }
to {
-webkit-transform: translateY(-300px);
transform: translateY(-300px); } }
/* From https://github.com/daneden/animate.css */
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3); }
50% {
opacity: 1;
-webkit-transform: scale(1.02);
transform: scale(1.02); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3); }
50% {
opacity: 1;
-webkit-transform: scale(1.02);
transform: scale(1.02); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
@-webkit-keyframes rotateCircle {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes rotateCircle {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); }
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px); } }
@keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); }
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px); } }
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
@keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
@-webkit-keyframes fadeOutUpAndHide {
0% {
display: block;
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); }
99% {
display: block;
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px); }
100% {
display: none;
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px); } }
@keyframes fadeOutUpAndHide {
0% {
display: block;
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); }
99% {
display: block;
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px); }
100% {
display: none;
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px); } }
@-webkit-keyframes fadeOutToTransparentFromEightyPercent {
0% {
opacity: 0.8; }
100% {
opacity: 0; } }
@keyframes fadeOutToTransparentFromEightyPercent {
0% {
opacity: 0.8; }
100% {
opacity: 0; } }
@-webkit-keyframes fadeOutToTransparent {
100% {
opacity: 0; } }
@keyframes fadeOutToTransparent {
100% {
opacity: 0; } }
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
display: block; }
100% {
opacity: 1; } }
@keyframes fadeIn {
0% {
opacity: 0;
display: block; }
100% {
opacity: 1; } }
@-webkit-keyframes fadeOut {
0% {
opacity: 1; }
100% {
opacity: 0; } }
@keyframes fadeOut {
0% {
opacity: 1; }
100% {
opacity: 0; } }
@-webkit-keyframes fadeOutAndHide {
0% {
opacity: 1;
display: block; }
99% {
opacity: 0;
display: block; }
100% {
opacity: 0;
display: none; } }
@keyframes fadeOutAndHide {
0% {
opacity: 1;
display: block; }
99% {
opacity: 0;
display: block; }
100% {
opacity: 0;
display: none; } }
@-webkit-keyframes fadeInAndShow {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
@keyframes fadeInAndShow {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
@-webkit-keyframes rotater {
0% {
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1); }
50% {
-webkit-transform: rotate(360deg) scale(2);
transform: rotate(360deg) scale(2); }
100% {
-webkit-transform: rotate(720deg) scale(1);
transform: rotate(720deg) scale(1); } }
@keyframes rotater {
0% {
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1); }
50% {
-webkit-transform: rotate(360deg) scale(2);
transform: rotate(360deg) scale(2); }
100% {
-webkit-transform: rotate(720deg) scale(1);
transform: rotate(720deg) scale(1); } }
.rotate {
-webkit-animation-name: rotater;
animation-name: rotater;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; }
@-webkit-keyframes heroParallax {
from {
-webkit-transform: translateX(0px);
transform: translateX(0px); }
to {
-webkit-transform: translateX(-50%);
transform: translateX(-50%); } }
@keyframes heroParallax {
from {
-webkit-transform: translateX(0px);
transform: translateX(0px); }
to {
-webkit-transform: translateX(-50%);
transform: translateX(-50%); } }
@-webkit-keyframes heroBalloon {
from {
-webkit-transform: translateY(20px);
transform: translateY(20px); }
to {
-webkit-transform: translateY(0px);
transform: translateY(0px); } }
@keyframes heroBalloon {
from {
-webkit-transform: translateY(20px);
transform: translateY(20px); }
to {
-webkit-transform: translateY(0px);
transform: translateY(0px); } }
@-webkit-keyframes conversationListItemSlideOut {
0% {
opacity: 1; }
100% {
opacity: 0;
-webkit-transform: translate3d(-500px, 0, 0);
transform: translate3d(-500px, 0, 0); } }
@keyframes conversationListItemSlideOut {
0% {
opacity: 1; }
100% {
opacity: 0;
-webkit-transform: translate3d(-500px, 0, 0);
transform: translate3d(-500px, 0, 0); } }
@-webkit-keyframes popBadge {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0); }
75% {
opacity: 1;
-webkit-transform: scale(1.1);
transform: scale(1.1); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes popBadge {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0); }
75% {
opacity: 1;
-webkit-transform: scale(1.1);
transform: scale(1.1); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
@-webkit-keyframes scrollBgGridLinks {
from {
-webkit-transform: translateY(0px);
transform: translateY(0px); }
to {
-webkit-transform: translateY(-330px);
transform: translateY(-330px); } }
@keyframes scrollBgGridLinks {
from {
-webkit-transform: translateY(0px);
transform: translateY(0px); }
to {
-webkit-transform: translateY(-330px);
transform: translateY(-330px); } }
@-webkit-keyframes scrollFooterWithBgGrid {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px); }
91% {
-webkit-transform: translateY(0px);
transform: translateY(0px); }
100% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px); } }
@keyframes scrollFooterWithBgGrid {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px); }
91% {
-webkit-transform: translateY(0px);
transform: translateY(0px); }
100% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px); } }
@-webkit-keyframes anchored-card-slide-up {
from {
-webkit-transform: translateY(130%) rotate(15deg);
transform: translateY(130%) rotate(15deg);
opacity: 0; }
to {
-webkit-transform: translateY(6%) rotate(0deg);
transform: translateY(6%) rotate(0deg);
opacity: 1; } }
@keyframes anchored-card-slide-up {
from {
-webkit-transform: translateY(130%) rotate(15deg);
transform: translateY(130%) rotate(15deg);
opacity: 0; }
to {
-webkit-transform: translateY(6%) rotate(0deg);
transform: translateY(6%) rotate(0deg);
opacity: 1; } }
@-webkit-keyframes move-up-down {
0% {
-webkit-transform: translateY(6%);
transform: translateY(6%); }
50% {
-webkit-transform: translateY(-6%);
transform: translateY(-6%); }
100% {
-webkit-transform: translateY(6%);
transform: translateY(6%); } }
@keyframes move-up-down {
0% {
-webkit-transform: translateY(6%);
transform: translateY(6%); }
50% {
-webkit-transform: translateY(-6%);
transform: translateY(-6%); }
100% {
-webkit-transform: translateY(6%);
transform: translateY(6%); } }
@-webkit-keyframes hide-card {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translateY(40%) rotate(3deg);
transform: translateY(40%) rotate(3deg); } }
@keyframes hide-card {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: translateY(40%) rotate(3deg);
transform: translateY(40%) rotate(3deg); } }
@-webkit-keyframes menu-fade-in {
from {
display: block;
opacity: 0;
-webkit-transform: translateY(0px) scale(0.9);
transform: translateY(0px) scale(0.9); }
to {
opacity: 1;
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1); } }
@keyframes menu-fade-in {
from {
display: block;
opacity: 0;
-webkit-transform: translateY(0px) scale(0.9);
transform: translateY(0px) scale(0.9); }
to {
opacity: 1;
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1); } }
@-webkit-keyframes shimmer {
0% {
opacity: 0; }
50% {
opacity: 1; }
70% {
opacity: 0.65; }
80% {
opacity: 0.65; }
100% {
opacity: 1; } }
@keyframes shimmer {
0% {
opacity: 0; }
50% {
opacity: 1; }
70% {
opacity: 0.65; }
80% {
opacity: 0.65; }
100% {
opacity: 1; } }
@-webkit-keyframes menu-slide-in-up {
from {
opacity: 0;
-webkit-transform: translateY(30px);
transform: translateY(30px); }
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
@keyframes menu-slide-in-up {
from {
opacity: 0;
-webkit-transform: translateY(30px);
transform: translateY(30px); }
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
@-webkit-keyframes pinSlideIn {
from {
opacity: 0;
-webkit-transform: translateY(80px);
transform: translateY(80px); }
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
@keyframes pinSlideIn {
from {
opacity: 0;
-webkit-transform: translateY(80px);
transform: translateY(80px); }
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
@-webkit-keyframes pinFadeIn {
0% {
opacity: 0;
-webkit-transform: scale(0.93);
transform: scale(0.93); }
39% {
opacity: 0;
-webkit-transform: scale(0.93);
transform: scale(0.93); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes pinFadeIn {
0% {
opacity: 0;
-webkit-transform: scale(0.93);
transform: scale(0.93); }
39% {
opacity: 0;
-webkit-transform: scale(0.93);
transform: scale(0.93); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
@-webkit-keyframes trigger-card-slide-up {
from {
-webkit-transform: translateY(200%) rotate(-15deg);
transform: translateY(200%) rotate(-15deg);
opacity: 1; }
to {
-webkit-transform: translateY(0%) rotate(0deg);
transform: translateY(0%) rotate(0deg);
opacity: 1; } }
@keyframes trigger-card-slide-up {
from {
-webkit-transform: translateY(200%) rotate(-15deg);
transform: translateY(200%) rotate(-15deg);
opacity: 1; }
to {
-webkit-transform: translateY(0%) rotate(0deg);
transform: translateY(0%) rotate(0deg);
opacity: 1; } }
@-webkit-keyframes trigger-card-slide-down {
from {
-webkit-transform: translateY(0%) rotate(0deg);
transform: translateY(0%) rotate(0deg);
opacity: 1; }
to {
-webkit-transform: translateY(200%) rotate(-15deg);
transform: translateY(200%) rotate(-15deg);
opacity: 1; } }
@keyframes trigger-card-slide-down {
from {
-webkit-transform: translateY(0%) rotate(0deg);
transform: translateY(0%) rotate(0deg);
opacity: 1; }
to {
-webkit-transform: translateY(200%) rotate(-15deg);
transform: translateY(200%) rotate(-15deg);
opacity: 1; } }
@-webkit-keyframes pop-button-scale {
0% {
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
opacity: 1; }
10% {
-webkit-transform: translateY(-8px) scale(0.7);
transform: translateY(-8px) scale(0.7);
opacity: 1; }
100% {
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
opacity: 1; } }
@keyframes pop-button-scale {
0% {
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
opacity: 1; }
10% {
-webkit-transform: translateY(-8px) scale(0.7);
transform: translateY(-8px) scale(0.7);
opacity: 1; }
100% {
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
opacity: 1; } }
@-webkit-keyframes zoomInAndFade {
0% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1); }
1%, 29% {
opacity: 1; }
30%, 100% {
opacity: 0;
-webkit-transform: scale(1.15);
transform: scale(1.15); } }
@keyframes zoomInAndFade {
0% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1); }
1%, 29% {
opacity: 1; }
30%, 100% {
opacity: 0;
-webkit-transform: scale(1.15);
transform: scale(1.15); } }
@-webkit-keyframes zoomOutAndFade {
0% {
opacity: 0;
-webkit-transform: scale(1.15);
transform: scale(1.15); }
1%, 29% {
opacity: 1; }
30%, 100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes zoomOutAndFade {
0% {
opacity: 0;
-webkit-transform: scale(1.15);
transform: scale(1.15); }
1%, 29% {
opacity: 1; }
30%, 100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1); } }
@-webkit-keyframes fadeInAndOut {
0% {
opacity: 0;
z-index: 801; }
1%, 24% {
opacity: 1;
z-index: 801; }
25%, 100% {
opacity: 0;
z-index: 1; } }
@keyframes fadeInAndOut {
0% {
opacity: 0;
z-index: 801; }
1%, 24% {
opacity: 1;
z-index: 801; }
25%, 100% {
opacity: 0;
z-index: 1; } }
@-webkit-keyframes slideLeftIn {
from {
-webkit-transform: translateX(100%);
transform: translateX(100%); }
to {
-webkit-transform: translateX(0);
transform: translateX(0); } }
@keyframes slideLeftIn {
from {
-webkit-transform: translateX(100%);
transform: translateX(100%); }
to {
-webkit-transform: translateX(0);
transform: translateX(0); } }
@-webkit-keyframes slideRightOut {
from {
-webkit-transform: translateX(0);
transform: translateX(0); }
to {
-webkit-transform: translateX(100%);
transform: translateX(100%); } }
@keyframes slideRightOut {
from {
-webkit-transform: translateX(0);
transform: translateX(0); }
to {
-webkit-transform: translateX(100%);
transform: translateX(100%); } }
@-webkit-keyframes tapAnimation {
0% {
opacity: 0;
-webkit-transform: scale(0.96);
transform: scale(0.96); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes tapAnimation {
0% {
opacity: 0;
-webkit-transform: scale(0.96);
transform: scale(0.96); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
.standardForm {
margin: 0 auto 70px;
max-width: 734px; }
.inModal .standardForm,
.modalStyle .standardForm {
background-color: #fff;
border-radius: 6px;
margin-bottom: 0;
width: auto; }
.standardForm .formFieldMessage {
color: #bd081c;
margin: 10px 0 0; }
.standardForm > h1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
font-size: 35px;
margin: 25px 0 0; }
.inModal .standardForm > h1,
.modalStyle .standardForm > h1 {
border-bottom: 1px solid #e7e7e7;
color: #333;
font-size: 20px;
margin: 0;
min-height: 20px;
padding: 17px 18px 13px 18px;
position: relative; }
.modalHasClose .standardForm > h1 {
padding-right: 50px; }
.standardForm .formTitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
font-size: 35px;
margin: 25px 0 0; }
.inModal .standardForm .formTitle,
.modalStyle .standardForm .formTitle {
border-bottom: 1px solid #e7e7e7;
color: #333;
font-size: 20px;
margin: 0;
min-height: 20px;
padding: 17px 18px 13px 18px;
position: relative; }
.modalHasClose .standardForm .formTitle {
padding-right: 50px; }
.standardForm > h2,
.standardForm .formSectionHeading {
font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", sans-serif;
font-weight: bold;
color: #333;
font-size: 20px;
margin: 40px 0 10px; }
.standardForm > ul,
.standardForm .formSection {
background: #fff;
border-radius: 6px;
margin: 0; }
.standardForm > ul > li,
.standardForm .formSection > li {
overflow: hidden;
border-top: 1px solid #dfdfdf;
padding: 15px 21px 15px 27px; }
.standardForm > ul > li:first-child,
.standardForm .formSection > li:first-child {
border: 0; }
.inModal .standardForm > ul > li,
.modalStyle .standardForm > ul > li, .inModal
.standardForm .formSection > li,
.modalStyle
.standardForm .formSection > li {
padding-left: 18px;
padding-right: 21px; }
.standardForm .formItem {
overflow: hidden;
border-top: 1px solid #dfdfdf;
padding: 15px 21px 15px 27px; }
.standardForm .formItem:first-child {
border: 0; }
.inModal .standardForm .formItem,
.modalStyle .standardForm .formItem {
padding-left: 18px;
padding-right: 21px; }
.standardForm > ul > li > h3,
.standardForm .formSection > li > h3 {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #555;
float: left;
font-size: 13px;
font-weight: bold;
padding: 4px 10px 0 0;
width: 216px; }
.standardForm > ul > li > h3 .hasError,
.standardForm .formSection > li > h3 .hasError {
color: #bd081c; }
.inModal .standardForm > ul > li > h3,
.modalStyle .standardForm > ul > li > h3, .inModal
.standardForm .formSection > li > h3,
.modalStyle
.standardForm .formSection > li > h3 {
width: 130px; }
.standardForm > ul > li > h3.optional,
.standardForm .formSection > li > h3.optional {
font-style: italic;
font-weight: normal; }
.standardForm .formItem > h3 {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #555;
float: left;
font-size: 13px;
font-weight: bold;
padding: 4px 10px 0 0;
width: 216px; }
.standardForm .formItem > h3 .hasError {
color: #bd081c; }
.inModal .standardForm .formItem > h3,
.modalStyle .standardForm .formItem > h3 {
width: 130px; }
.standardForm .formItem > h3.optional {
font-style: italic;
font-weight: normal; }
.standardForm .formItemHeading {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #555;
float: left;
font-size: 13px;
font-weight: bold;
padding: 4px 10px 0 0;
width: 216px; }
.standardForm .formItemHeading .hasError {
color: #bd081c; }
.inModal .standardForm .formItemHeading,
.modalStyle .standardForm .formItemHeading {
width: 130px; }
.standardForm .formItemHeading.optional {
font-style: italic;
font-weight: normal; }
.standardForm > ul > li > div,
.standardForm .formSection > li > div {
margin-left: 226px; }
.inModal .standardForm > ul > li > div,
.modalStyle .standardForm > ul > li > div, .inModal
.standardForm .formSection > li > div,
.modalStyle
.standardForm .formSection > li > div {
margin-left: 140px; }
.standardForm .formItem > div {
margin-left: 226px; }
.inModal .standardForm .formItem > div,
.modalStyle .standardForm .formItem > div {
margin-left: 140px; }
.standardForm .formRightColumn {
margin-left: 226px; }
.inModal .standardForm .formRightColumn,
.modalStyle .standardForm .formRightColumn {
margin-left: 140px; }
.standardForm .learnMore {
float: right;
font-size: 11px; }
.standardForm input[type="email"],
.standardForm input[type="number"],
.standardForm input[type="password"],
.standardForm input[type="text"],
.standardForm input[type="url"],
.standardForm textarea {
background-color: #f3f3f3;
background: -webkit-linear-gradient(#f0f0f0, #f5f5f5);
background: linear-gradient(#f0f0f0, #f5f5f5);
box-sizing: border-box;
width: 100%;
border: 1px solid #d6d3ce;
border-radius: 3px;
color: #333;
font-size: 14px;
padding: 7px; }
.standardForm input[type="email"]:focus,
.standardForm input[type="number"]:focus,
.standardForm input[type="password"]:focus,
.standardForm input[type="text"]:focus,
.standardForm input[type="url"]:focus,
.standardForm textarea:focus {
background: #fff; }
.standardForm input[type="email"].hasError, .standardForm input[type="email"].hasWarning,
.standardForm input[type="number"].hasError,
.standardForm input[type="number"].hasWarning,
.standardForm input[type="password"].hasError,
.standardForm input[type="password"].hasWarning,
.standardForm input[type="text"].hasError,
.standardForm input[type="text"].hasWarning,
.standardForm input[type="url"].hasError,
.standardForm input[type="url"].hasWarning,
.standardForm textarea.hasError,
.standardForm textarea.hasWarning {
background: #e6abad;
border-color: #bd081c; }
.standardForm input[type="email"].disabled,
.standardForm input[type="number"].disabled,
.standardForm input[type="password"].disabled,
.standardForm input[type="text"].disabled,
.standardForm input[type="url"].disabled,
.standardForm textarea.disabled {
background-color: #f8f8f8;
background: -webkit-linear-gradient(#f5f5f5, #fafafa);
background: linear-gradient(#f5f5f5, #fafafa);
border-color: #dcdcdc;
color: #999;
cursor: default; }
.safari .standardForm input[type="email"].disabled, .safari
.standardForm input[type="number"].disabled, .safari
.standardForm input[type="password"].disabled, .safari
.standardForm input[type="text"].disabled, .safari
.standardForm input[type="url"].disabled, .safari
.standardForm textarea.disabled {
background-color: #f8f8f8; }
.standardForm textarea {
height: 85px;
line-height: 20px;
resize: vertical; }
.standardForm select {
box-sizing: border-box;
width: 100%;
background-color: #f5f5f5;
border-radius: 6px;
border: 1px solid #cfcfcf;
color: #333;
cursor: pointer;
font-weight: bold;
height: 28px;
padding: 4px 4px 4px 14px; }
.standardForm .learnMore {
margin: 7px 0 0 10px; }
.formFooter {
background: #f0f0f0;
border-radius: 0 0 6px 6px;
border-top: 1px solid #dadada;
clear: both;
padding: 10px 20px; }
.formFooter::after {
clear: both;
content: "";
display: table; }
.formFooter a:active {
color: #bd081c; }
.formFooter .formFooterDelete {
float: left; }
.formFooter .formFooterButtons {
float: right; }
.formFooter .helpText {
color: #444;
float: left;
font-size: 11px;
line-height: 15px;
margin: 0; }
.formFooter .helpText a {
color: #bd081c;
font-weight: bold; }
.formFooter .helpText a:hover {
text-decoration: underline; }
.formFooter .helpText a:active {
color: #bd081c; }
.formFooter .btn.Button {
margin-left: 8px;
padding-left: 15px;
padding-right: 15px; }
.formFooter .btn.Button.deleteButton {
margin-left: 0; }
.formCheckedSet li {
margin-top: 10px; }
.formCheckedSet li:first-child {
margin: 0; }
.formCheckedSet label {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
color: #555;
cursor: pointer; }
.formCheckedSet label .fancyToggle {
float: left;
margin-right: 8px; }
.formCheckedSet label > input {
margin-right: 3px; }
.formCheckedSet label > span {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 13px;
font-weight: bold;
vertical-align: middle; }
.formCheckedSetItem {
margin-top: 10px; }
.formCheckedSetItem:first-child {
margin: 0; }
.formInlineCheckedSet {
padding-top: 6px; }
.formInlineCheckedSet li {
display: inline-block;
margin-right: 25px; }
.formInlineCheckedSet label {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
color: #555;
cursor: pointer; }
.formInlineCheckedSet label .fancyToggle {
float: left;
margin-right: 8px; }
.formInlineCheckedSet label > input {
margin-right: 3px; }
.formInlineCheckedSet label > span {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 13px;
font-weight: bold;
vertical-align: middle; }
.formInlineCheckedSet label.hasError span {
color: #bd081c; }
.formInlineCheckedSet .formFieldMessage {
display: none; }
.formInlineCheckedSet .formHelpMessage {
display: none; }
.formInlineCheckedSetItem {
display: inline-block;
margin-right: 25px; }
.formInlineLabel {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
color: #555;
cursor: pointer; }
.formInlineLabel .fancyToggle {
float: left;
margin-right: 8px; }
.formInlineLabel > input {
margin-right: 3px; }
.formInlineLabel > span {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 13px;
font-weight: bold;
vertical-align: middle; }
.formFieldMessage {
font-size: 13px; }
label {
cursor: pointer; }
.formFooter .formFooterDelete {
margin-right: 10px; }
.standardForm--login {
max-width: 470px;
padding-top: 20px; }
.standardForm--login > ul > li,
.standardForm--login .formSection > li {
border: none;
padding: 5px 40px;
position: relative; }
.standardForm--login .formItem {
border: none;
padding: 5px 40px;
position: relative; }
.standardForm--login > h1 {
color: #525252;
font-size: 23px;
margin: 10px 40px 15px; }
.standardForm--login .formTitle {
color: #525252;
font-size: 23px;
margin: 10px 40px 15px; }
.standardForm--login > ul,
.standardForm--login .formSection {
margin-bottom: 20px;
overflow: hidden; }
.standardForm--login select {
font-size: 16px;
font-weight: normal;
height: 36px; }
.standardForm--login .formFooter {
font-size: 14px;
padding: 20px 40px; }
.standardForm--login .formFooter a:hover {
color: #bd081c; }
.standardForm--login .formHelpMessage {
color: #008000;
position: absolute;
right: 57px;
top: 16px; }
.standardForm--login input[type="email"],
.standardForm--login input[type="number"],
.standardForm--login input[type="password"],
.standardForm--login input[type="text"],
.standardForm--login input[type="url"],
.standardForm--login textarea {
border-radius: 3px;
font-size: 20px;
padding: 15px; }
.standardForm--login .helpText {
line-height: 40px;
font-size: 15px; }
.standardForm--login .email.hasError {
padding-right: 130px; }
.standardForm--login .formFieldMessage {
position: absolute;
right: 57px;
top: 16px; }
.standardForm--login input.hasError {
background: transparent !important;
border-color: #bd081c !important;
box-shadow: 0 0 6px rgba(255, 0, 0, 0.35); }
.standardForm--trademark {
margin: 14px auto; }
.standardForm--trademark > ul,
.standardForm--trademark .formSection {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
margin: 14px auto; }
.standardForm--trademark .formCheckedSet li {
padding: 1px; }
@media (min-width: 0) and (max-width: 999px) {
.centeredWithinWrapper {
width: 750px; }
.centeredWithinWrapper.gridWidth {
width: 736px; } }
.centeredWith3Columns {
width: 750px;
margin: auto; }
.centeredWith3Columns.gridWidth {
width: 736px; }
@media (min-width: 1000px) and (max-width: 1249px) {
.centeredWithinWrapper {
width: 1000px; }
.centeredWithinWrapper.gridWidth {
width: 986px; } }
.centeredWith4Columns {
width: 1000px;
margin: auto; }
.centeredWith4Columns.gridWidth {
width: 986px; }
@media (min-width: 1250px) and (max-width: 1499px) {
.centeredWithinWrapper {
width: 1250px; }
.centeredWithinWrapper.gridWidth {
width: 1236px; } }
.centeredWith5Columns {
width: 1250px;
margin: auto; }
.centeredWith5Columns.gridWidth {
width: 1236px; }
@media (min-width: 1500px) and (max-width: 1749px) {
.centeredWithinWrapper {
width: 1500px; }
.centeredWithinWrapper.gridWidth {
width: 1486px; } }
.centeredWith6Columns {
width: 1500px;
margin: auto; }
.centeredWith6Columns.gridWidth {
width: 1486px; }
@media (min-width: 1750px) and (max-width: 1999px) {
.centeredWithinWrapper {
width: 1750px; }
.centeredWithinWrapper.gridWidth {
width: 1736px; } }
.centeredWith7Columns {
width: 1750px;
margin: auto; }
.centeredWith7Columns.gridWidth {
width: 1736px; }
@media (min-width: 2000px) and (max-width: 2249px) {
.centeredWithinWrapper {
width: 2000px; }
.centeredWithinWrapper.gridWidth {
width: 1986px; } }
.centeredWith8Columns {
width: 2000px;
margin: auto; }
.centeredWith8Columns.gridWidth {
width: 1986px; }
@media (min-width: 2250px) and (max-width: 2499px) {
.centeredWithinWrapper {
width: 2250px; }
.centeredWithinWrapper.gridWidth {
width: 2236px; } }
.centeredWith9Columns {
width: 2250px;
margin: auto; }
.centeredWith9Columns.gridWidth {
width: 2236px; }
@media (min-width: 2500px) and (max-width: 2749px) {
.centeredWithinWrapper {
width: 2500px; }
.centeredWithinWrapper.gridWidth {
width: 2486px; } }
.centeredWith10Columns {
width: 2500px;
margin: auto; }
.centeredWith10Columns.gridWidth {
width: 2486px; }
html, body {
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif;
color: #211922;
font-size: 12px; }
html {
height: 100%; }
body {
min-height: 100%;
overflow-y: scroll;
position: relative; }
body.newUserBastilleStepsTutorial, body.newUserExtensionStepsTutorial {
background-color: #fff; }
input::-ms-clear {
display: none; }
.noScroll, .ReactModal__Body--open {
overflow: hidden; }
ul {
margin: 0;
padding: 0; }
ul li {
list-style: none;
padding: 0; }
:focus {
outline: #d1d1d1 auto 1px; }
.dangerouslyDisableFocusStyle:focus {
outline: none; }
.centeredWithinWrapper {
margin: 0 auto; }
.hidden {
display: none; }
.errorMessage {
-webkit-animation: bounceIn .5s;
animation: bounceIn .5s;
color: #444;
font-size: 21px;
font-weight: bold;
line-height: 30px;
margin: 0 auto;
max-width: 738px;
padding-top: 130px;
text-align: center; }
.errorMessage .back,
.errorMessage .retry {
font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", sans-serif;
font-weight: bold;
color: #d62229;
display: block; }
.errorMessage .retry {
margin-top: 13px; }
.errorMessage .errorInternal {
margin: 0 auto 32px;
background: url(https://s.pinimg.com/webapp/style/images/502_tools-1x-675419bc.png) no-repeat;
background-size: contain;
height: 222px;
width: 303px; }
.errorMessage .suggestionText {
color: #777; }
.inlineError {
color: #bd081c;
font-size: 13px;
font-weight: bold;
margin-bottom: 1em;
margin-top: 0;
text-align: center; }
a {
color: #717171;
font-weight: bold;
text-decoration: none;
/* Only apply focus style for non Gestalt classes */ }
a:not([class*="_"]):focus, a:not([class*="_"]):hover {
color: #8a8a8a; }
.transitionMask {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0; }
.placeholder {
color: #aaa !important; }
.bottomDrawer {
background: rgba(200, 200, 200, 0.6);
border-top: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15) inset, 0 -1px 0 rgba(255, 255, 255, 0.18);
clear: both;
margin-top: 25px;
padding-bottom: 40px; }
.sectionTitle {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", sans-serif;
font-weight: bold;
color: #444;
font-size: 13px;
margin-bottom: 7px;
margin-top: 28px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); }
.tutorialHighlight {
-webkit-animation: fadeIn .2s linear;
animation: fadeIn .2s linear;
border-radius: 6px;
overflow: hidden;
position: fixed !important;
z-index: 999999998 !important; }
.tutorialHighlightMask {
position: fixed !important;
z-index: 999999999 !important; }
.tutorialHighlightBackground {
background: #fff;
margin-left: -2px;
margin-top: -2px;
padding: 2px;
position: fixed !important;
z-index: 999999997 !important; }
.tutorialHighlightBackground.categoriesDropdownButtonBg {
border-radius: 0 8px 8px 0; }
.tutorialHighlightBackground.footerButtonWrapperBg {
background: #e9e9e9;
border-radius: 18px;
margin-left: -3px;
margin-top: -3px;
padding: 3px 2px 2px 3px; }
.tutorialHighlightBackground.logoNavButtonBg {
border-radius: 8px 0 0 8px; }
.tutorialHighlightBackground.mainSearchTextboxBg {
border-radius: 0; }
.tutorialHighlightBackground.searchInputTokenBg {
border-radius: 8px;
margin: 0 0 0 -3px;
padding: 0 0 0 2px; }
.debugMacro {
border: 2px solid #f00;
overflow: auto; }
.standaloneErrorPage .category {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
border: 0;
box-shadow: none;
display: inline-block;
margin-bottom: 10px;
padding: 10px;
position: relative;
vertical-align: top;
width: 216px; }
.standaloneErrorPage .categoryLinkWrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.standaloneErrorPage .categoryImage {
overflow: hidden;
border-radius: 6px;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.standaloneErrorPage .categoryImage.animals {
background: url(https://s.pinimg.com/webapp/style/images/animals-1x-50ba8d38.jpg) no-repeat;
background-size: contain;
height: 145px;
width: 216px; }
.standaloneErrorPage .categoryImage.architecture {
background: url(https://s.pinimg.com/webapp/style/images/architecture-1x-97b5b7b8.jpg) no-repeat;
background-size: contain;
height: 145px;
width: 216px; }
.standaloneErrorPage .categoryImage.travel {
background: url(https://s.pinimg.com/webapp/style/images/travel-1x-d0640cf1.jpg) no-repeat;
background-size: contain;
height: 145px;
width: 216px; }
.standaloneErrorPage .categoryImage.food_drink {
background: url(https://s.pinimg.com/webapp/style/images/food_drink-1x-5975e611.jpg) no-repeat;
background-size: contain;
height: 145px;
width: 216px; }
.standaloneErrorPage .categoryImage.photography {
background: url(https://s.pinimg.com/webapp/style/images/photography-1x-3030c6e9.jpg) no-repeat;
background-size: contain;
height: 145px;
width: 216px; }
.standaloneErrorPage .categoryImage.film_music_books {
background: url(https://s.pinimg.com/webapp/style/images/film_music_books-1x-8a7bbd9b.jpg) no-repeat;
background-size: contain;
height: 145px;
width: 216px; }
.standaloneErrorPage .name {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */
color: #555;
max-width: 100%;
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999;
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap; }
.panelBase {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px; }
.panelBase .panelBody {
overflow: hidden; }
.panelBase .panelHeading {
border-bottom: 1px solid transparent;
border-top-radius: 5px;
padding: 22px; }
.panelBase .panelHeading > .dropdown .dropdown-toggle {
color: inherit; }
.panelBase .panelTitle {
color: inherit;
font-size: 20px;
margin-top: 0;
margin-bottom: 5px; }
.panelBase .panelTitle > a {
color: inherit; }
.panelBase .panelSubtitle {
color: #808080;
font-size: 16px;
margin-top: 0;
margin-bottom: 0; }
.panelBase .panelFooter {
background-color: #f5f5f5;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top: 1px solid #ccc;
color: #999;
padding: 14px;
overflow: hidden; }
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
ul {
display: block; }
audio,
canvas,
video {
display: inline-block; }
audio:not([controls]) {
display: none; }
html {
font-size: 100%;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none; }
a:hover,
a:active {
outline: 0; }
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline; }
sup {
top: -0.5em; }
sub {
bottom: -0.25em; }
img {
/* Responsive images (ensure images don't scale beyond their parents) */
max-width: 100%;
/* Part 1: Set a maxium relative to the parent */
width: auto\9;
/* IE7-8 need help adjusting responsive images */
height: auto;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic; }
#map_canvas img {
max-width: none; }
fieldset {
border: 0;
margin: 0;
padding: 0; }
button,
input,
select,
textarea {
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif;
font-size: 100%;
margin: 0;
vertical-align: middle; }
button,
input {
line-height: normal; }
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0; }
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button; }
input[type="search"] {
-webkit-appearance: textfield; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
margin: 0; }
textarea {
overflow: auto;
vertical-align: top; }
body {
margin: 0; }
h1, h2, h3, h4, h5, h6 {
margin: 0; }
.Module.fadeIn {
-webkit-animation: fadeIn 0.3s;
animation: fadeIn 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; }
.Module.fadeOut {
-webkit-animation: fadeOut 0.3s;
animation: fadeOut 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; }
.Module.slideIn {
-webkit-animation: menu-slide-in-up 0.3s;
animation: menu-slide-in-up 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; }
.Module.hideModule {
opacity: 0; }
.Module.error {
opacity: 1;
visibility: visible; }
.Module .moduleMask {
background: #fff;
opacity: 0.9;
position: absolute;
z-index: 660; }
.Spinner {
height: 100%;
left: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
z-index: 659; }
.Spinner.hidden {
display: none; }
.Spinner .spinnerSmall {
background: url(https://s.pinimg.com/webapp/style/images/spinner-small-1x-b897d25e.gif) no-repeat;
background-size: contain;
height: 16px;
width: 16px;
display: inline-block;
opacity: .5;
left: 50%;
margin-left: -8px;
margin-top: -8px;
position: absolute;
top: 50%; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Spinner .spinnerSmall {
background-image: url(https://s.pinimg.com/webapp/style/images/spinner-small-2x-dbb1334f.gif); } }
.Spinner .spinnerMedium {
background: url(https://s.pinimg.com/webapp/style/images/spinner-medium-1x-dbb1334f.gif) no-repeat;
background-size: contain;
height: 32px;
width: 32px;
display: inline-block;
opacity: .5;
left: 50%;
margin-left: -16px;
margin-top: -16px;
position: absolute;
top: 50%; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Spinner .spinnerMedium {
background-image: url(https://s.pinimg.com/webapp/style/images/spinner-medium-2x-3ffcb44b.gif); } }
.Spinner .whiteSpinnerSmall {
background: url(https://s.pinimg.com/webapp/style/images/white-spinner-small-1x-e0121c37.gif) no-repeat;
background-size: contain;
height: 16px;
width: 16px;
display: inline-block;
opacity: .5;
left: 50%;
margin-left: -8px;
margin-top: -8px;
position: absolute;
top: 50%; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Spinner .whiteSpinnerSmall {
background-image: url(https://s.pinimg.com/webapp/style/images/white-spinner-small-2x-0b36bec0.gif); } }
.Spinner .whiteSpinnerMedium {
background: url(https://s.pinimg.com/webapp/style/images/white-spinner-medium-1x-0b36bec0.gif) no-repeat;
background-size: contain;
height: 32px;
width: 32px;
display: inline-block;
opacity: .5;
left: 50%;
margin-left: -16px;
margin-top: -16px;
position: absolute;
top: 50%; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Spinner .whiteSpinnerMedium {
background-image: url(https://s.pinimg.com/webapp/style/images/white-spinner-medium-2x-d8c7106a.gif); } }
.Spinner .redSpinnerSmall {
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
border-radius: 50%;
border-right: 2px solid transparent;
border-top: 2px solid #bd081c;
content: '';
height: 16px;
width: 16px;
left: 50%;
margin-left: -8px;
margin-top: -8px;
position: absolute;
top: 50%; }
.newForm {
/*
label[class^="formCol-"] {
position: relative;
display: block;
&.hasError {
padding-top: 14px;
}
.formErrorMessage {
position: absolute;
left: 10px;
top: 0;
margin: 0;
}
}
*/ }
.newForm label {
color: #333;
font-size: 14px; }
.newForm input[type=text],
.newForm input[type=password],
.newForm input[type=button],
.newForm button,
.newForm select {
box-sizing: border-box;
color: #333;
font-size: 14px;
width: 100%; }
.newForm input[type=text]:focus,
.newForm input[type=password]:focus,
.newForm input[type=button]:focus,
.newForm button:focus,
.newForm select:focus {
border-color: #a6a6a6; }
.newForm input[type=text],
.newForm input[type=password] {
border-radius: 6px;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px #f0ede7;
color: #333;
padding: 8px 10px; }
.newForm input[type=text].hasError,
.newForm input[type=password].hasError {
border-color: #d7222a; }
.newForm .formRow {
padding: 4px 0;
overflow: hidden; }
.newForm .formCol-1 {
width: 100%; }
.newForm .formCol-2 {
float: left;
width: 49%; }
.newForm .formCol-2:last-of-type {
float: right; }
.newForm .formCol-3 {
float: left;
width: 31%; }
.newForm .formErrorMessage {
font-size: 11px;
font-weight: bold;
color: #d7222a;
margin: 2px 0; }
.fixedsticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky; }
/* When position: sticky is supported but native behavior is ignored */
.fixedsticky-withoutfixedfixed .fixedsticky-off,
.fixed-supported .fixedsticky-off {
position: static; }
.fixedsticky-withoutfixedfixed .fixedsticky-on,
.fixed-supported .fixedsticky-on {
position: fixed; }
.fixedsticky-dummy {
display: none; }
.fixedsticky-on + .fixedsticky-dummy {
display: block; }
/* Gestalt global CSS */
/* DEPRECATED - use Gestalt components instead */
/* Border lines */
.border {
border: 1px solid #efefef; }
.border-top {
border-top: 1px solid #efefef; }
.border-right {
border-right: 1px solid #efefef; }
.border-bottom {
border-bottom: 1px solid #efefef; }
.border-left {
border-left: 1px solid #efefef; }
.no-border {
border: 0; }
/* Border radii */
.square {
border-radius: 0; }
.circle {
border-radius: 50%; }
.rounded {
border-radius: 8px; }
.rounded-top {
border-radius: 8px 8px 0 0; }
.rounded-right {
border-radius: 0 8px 8px 0; }
.rounded-bottom {
border-radius: 0 0 8px 8px; }
.rounded-left {
border-radius: 8px 0 0 8px; }
/* blue */
.blue {
color: #0084ff; }
.blue-hover:hover {
color: #0084ff; }
.bg-blue {
background-color: #0084ff; }
/* dark-gray */
.dark-gray {
color: #555; }
.dark-gray-hover:hover {
color: #555; }
/* gray */
.gray {
color: #b5b5b5; }
.bg-gray {
background-color: #b5b5b5; }
/* red */
.red {
color: #bd081c; }
.bg-red {
background-color: #bd081c; }
.bg-red-active:active {
background-color: #a3081a; }
.bg-red-focus:focus {
background-color: #ad081b; }
.bg-red-hover:hover {
background-color: #bd081c; }
/* super-light-gray */
.bg-super-light-gray {
background-color: #efefef; }
/* white */
.white {
color: #fff; }
.bg-white {
background-color: #fff; }
/* yellow */
.yellow {
color: #fab904; }
.bg-yellow {
background-color: #fab904; }
/* olive */
.olive {
color: #364a4c; }
/* columns */
.col, .xs-col {
display: inline-block;
vertical-align: top; }
.col-1, .xs-col-1 {
width: 8.33333%; }
.col-2, .xs-col-2 {
width: 16.66667%; }
.col-3, .xs-col-3 {
width: 25%; }
.col-4, .xs-col-4 {
width: 33.33333%; }
.col-5, .xs-col-5 {
width: 41.66667%; }
.col-6, .xs-col-6 {
width: 50%; }
.col-7, .xs-col-7 {
width: 58.33333%; }
.col-8, .xs-col-8 {
width: 66.66667%; }
.col-9, .xs-col-9 {
width: 75%; }
.col-10, .xs-col-10 {
width: 83.33333%; }
.col-11, .xs-col-11 {
width: 91.66667%; }
.col-12, .xs-col-12 {
width: 100%; }
@media (min-width: 360px) {
.sm-col-1 {
width: 8.33333%; }
.sm-col-2 {
width: 16.66667%; }
.sm-col-3 {
width: 25%; }
.sm-col-4 {
width: 33.33333%; }
.sm-col-5 {
width: 41.66667%; }
.sm-col-6 {
width: 50%; }
.sm-col-7 {
width: 58.33333%; }
.sm-col-8 {
width: 66.66667%; }
.sm-col-9 {
width: 75%; }
.sm-col-10 {
width: 83.33333%; }
.sm-col-11 {
width: 91.66667%; }
.sm-col-12 {
width: 100%; } }
@media (min-width: 800px) {
.md-col-1 {
width: 8.33333%; }
.md-col-2 {
width: 16.66667%; }
.md-col-3 {
width: 25%; }
.md-col-4 {
width: 33.33333%; }
.md-col-5 {
width: 41.66667%; }
.md-col-6 {
width: 50%; }
.md-col-7 {
width: 58.33333%; }
.md-col-8 {
width: 66.66667%; }
.md-col-9 {
width: 75%; }
.md-col-10 {
width: 83.33333%; }
.md-col-11 {
width: 91.66667%; }
.md-col-12 {
width: 100%; } }
@media (min-width: 1312px) {
.lg-col-1 {
width: 8.33333%; }
.lg-col-2 {
width: 16.66667%; }
.lg-col-3 {
width: 25%; }
.lg-col-4 {
width: 33.33333%; }
.lg-col-5 {
width: 41.66667%; }
.lg-col-6 {
width: 50%; }
.lg-col-7 {
width: 58.33333%; }
.lg-col-8 {
width: 66.66667%; }
.lg-col-9 {
width: 75%; }
.lg-col-10 {
width: 83.33333%; }
.lg-col-11 {
width: 91.66667%; }
.lg-col-12 {
width: 100%; } }
/* cursor */
.pointer {
cursor: pointer; }
.zoom-in {
cursor: zoom-in; }
.zoom-out {
cursor: zoom-out; }
/* floats */
.pull-left {
float: left; }
.pull-right {
float: right; }
.clearfix::before, .clearfix::after {
content: " ";
display: table; }
.clearfix::after {
clear: both; }
/* display */
.block {
display: block; }
.inline {
display: inline; }
.inline-block {
display: inline-block; }
.table {
display: table; }
.table-cell {
display: table-cell; }
/* overflow */
.overflow-hidden {
overflow: hidden; }
.overflow-scroll {
overflow: scroll; }
.overflow-auto {
overflow: auto; }
.fit {
max-width: 100%; }
/* position */
.relative {
position: relative; }
.fixed {
position: fixed; }
.absolute {
position: absolute; }
.top-0 {
top: 0; }
.right-0 {
right: 0; }
.bottom-0 {
bottom: 0; }
.left-0 {
left: 0; }
/* box model */
.border-box {
box-sizing: border-box; }
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
@media (min-width: 360px) {
.sm-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex; } }
@media (min-width: 800px) {
.md-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex; } }
@media (min-width: 1312px) {
.lg-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex; } }
.flex-column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.flex-wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.items-start {
-webkit-box-align: start;
-ms-flex-align: start;
-ms-grid-row-align: flex-start;
align-items: flex-start; }
.items-end {
-webkit-box-align: end;
-ms-flex-align: end;
-ms-grid-row-align: flex-end;
align-items: flex-end; }
.items-center {
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center; }
.items-baseline {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
-ms-grid-row-align: baseline;
align-items: baseline; }
.items-stretch {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
-ms-grid-row-align: stretch;
align-items: stretch; }
.self-start {
-ms-flex-item-align: start;
align-self: flex-start; }
.self-end {
-ms-flex-item-align: end;
align-self: flex-end; }
.self-center {
-ms-flex-item-align: center;
align-self: center; }
.self-baseline {
-ms-flex-item-align: baseline;
align-self: baseline; }
.self-stretch {
-ms-flex-item-align: stretch;
align-self: stretch; }
.justify-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start; }
.justify-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end; }
.justify-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
.justify-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
.justify-around {
-ms-flex-pack: distribute;
justify-content: space-around; }
.content-start {
-ms-flex-line-pack: start;
align-content: flex-start; }
.content-end {
-ms-flex-line-pack: end;
align-content: flex-end; }
.content-center {
-ms-flex-line-pack: center;
align-content: center; }
.content-between {
-ms-flex-line-pack: justify;
align-content: space-between; }
.content-around {
-ms-flex-line-pack: distribute;
align-content: space-around; }
.content-stretch {
-ms-flex-line-pack: stretch;
align-content: stretch; }
/* 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex-auto {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-height: 0;
/* 1 */
min-width: 0;
/* 1 */ }
.flex-none {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none; }
.order-first {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1; }
.order-last {
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999; }
/* formatting */
.text-left {
text-align: left; }
.text-right {
text-align: right; }
.text-center {
text-align: center; }
.text-justify {
text-align: justify; }
.bold {
font-weight: bold; }
.regular {
font-style: normal; }
.italic {
font-style: italic; }
.underline {
text-decoration: underline; }
/* lists */
.list-style-none {
list-style: none; }
/* text overflow */
.no-wrap {
white-space: nowrap; }
.break-word {
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
word-wrap: break-word; }
.truncate {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
/* styles */
.sans-serif {
font-family: "Helvetica Neue", Helvetica, "\30D2\30E9\30AE\30CE\89D2\30B4 Pro W3", "Hiragino Kaku Gothic Pro", "\30E1\30A4\30EA\30AA", Meiryo, "\FF2D\FF33 \FF30\30B4\30B7\30C3\30AF", arial, sans-serif; }
.antialiased {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; }
/* scale */
.text-xs, .news .pending .actions .Button.remove span.buttonText, .news .pending .actions .Button.primary span.buttonText, .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName, .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem, .ExploreStoryCredits .storyCredits > .creditItem, .ExploreStoryCredits .storyCredits .creditFooter, .Pin.summary .pinCredits > .pinCreditWrapper .creditItem, .Pin.summary .pinCredits > .creditItem, .Pin .creditFooter {
font-size: 10px;
letter-spacing: -0.025px;
line-height: 11px;
word-spacing: 0; }
:lang(ja) .text-xs, :lang(ja) .news .pending .actions .Button.remove span.buttonText, .news .pending .actions .Button.remove :lang(ja) span.buttonText, :lang(ja) .news .pending .actions .Button.primary span.buttonText, .news .pending .actions .Button.primary :lang(ja) span.buttonText, :lang(ja) .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName, .Typeahead.typeaheadWithTitles li a.titleItem :lang(ja) .typeaheadName, :lang(ja) .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem, .ExploreStoryCredits .storyCredits > .storyCreditWrapper :lang(ja) .creditItem, :lang(ja) .ExploreStoryCredits .storyCredits > .creditItem, .ExploreStoryCredits :lang(ja) .storyCredits > .creditItem, :lang(ja) .ExploreStoryCredits .storyCredits .creditFooter, .ExploreStoryCredits .storyCredits :lang(ja) .creditFooter, :lang(ja) .Pin.summary .pinCredits > .pinCreditWrapper .creditItem, .Pin.summary .pinCredits > .pinCreditWrapper :lang(ja) .creditItem, :lang(ja) .Pin.summary .pinCredits > .creditItem, .Pin.summary :lang(ja) .pinCredits > .creditItem, :lang(ja) .Pin .creditFooter, .Pin :lang(ja) .creditFooter {
font-size: 8.6px; }
.text-s, .FirstPinCreate .Pin.summary .pinMeta .TextField, .Board .boardName .boardPinCount, .Board .boardName.hasBoardContext .User.boardRepTitle .fullname, .Board .boardName.hasBoardContext .User.exploreTabTitle .fullname, .BoardHeader .belowBoardNameContainer .followerCount,
.BoardHeader .belowBoardNameContainer .pinCount, .BoardInfoBar .pinsAndFollowerCount .value, .BoardInfoBar .pinsAndFollowerCount .label, .PinCreate .Pin.summary .pinMeta .TextField, .text-sm {
font-size: 11px;
letter-spacing: -0.05px;
line-height: 12px;
word-spacing: 0; }
:lang(ja) .text-sm {
font-size: 9.5px; }
.text-m, .Button.boardSettingsButton .buttonText, .Modal .formFooter .Button.rounded:not(.primary) .buttonText,
.ReactModal__Content .formFooter .Button.rounded:not(.primary) .buttonText, .news .pending .actions .Button.remove .buttonText, .boardEdit .Button .buttonText, .Button.userFollowingGridButton .buttonText, .InviteButtonEmail .Button.btn .buttonText, .Button.moreItems .buttonText, .formFooterButton.cancelButton .buttonText, .Button.CardFollow.GrayButton .buttonText, .Button.FollowButton .buttonText, .Button.UserFollowButton .buttonText, .Button.InterestFollowButton .buttonText, .Modal .formFooter .Button.primary .buttonText,
.ReactModal__Content .formFooter .Button.primary .buttonText, .news .pending .actions .Button.primary .buttonText, .panelFooter .formFooterButtons .cancelButton .buttonText, .Button.searchToFollowButton .buttonText, .formFooterButton.confirmButton .buttonText, .Button.CardFollow.RedButton .buttonText, .Button.promoteYourPin .buttonText, .Button.userProfileMenu:not(.UnblockButton) .buttonText,
.Button.editProfile .buttonText, .Button.groupBoardChat .buttonText, .boardDetail .pending .actions .Button.remove .buttonText, .boardDetail .pending .actions .Button.primary .buttonText, .BoardCollaboratorInviter .BoardInviteForm .inviteButton .buttonText, .boardCollaboratorsWrapper .BoardInviteForm .inviteButton .buttonText, .InterestFeedPage .feedHeader .interestStats, .TopicFeedPage .feedHeader .interestStats, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .BoardHeader .description, .BoardInvite.news .boardName, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs .label, .UserProfileHeader.profileHeader .about .aboutText, .UserProfileHeader.profileHeader .about .iconsLinksEtc .locationWrapper, .UserProfileHeader.profileHeader .about .iconsLinksEtc .website, .UserProfileHeader.profileHeader .about .iconsLinksEtc .middot::after, .UpsellTip .footerButtons .cancelButton,
.UpsellTip .footerButtons .submitButton, .text-md {
font-size: 12px;
letter-spacing: -0.1px;
line-height: 14px;
word-spacing: 0; }
:lang(ja) .text-md {
font-size: 10.3px; }
.text-l, .User.gridItem .username, .Interest .interestWrapper .interestLabel h2, .ShopGridItem .productName, .Board .boardName .name, .Board .boardName.hasBoardContext .User.boardRepTitle .title, .Board .boardName.hasBoardContext .User.exploreTabTitle .title, .text-lg {
font-size: 14px;
letter-spacing: -0.15px;
line-height: 16px;
word-spacing: 0; }
:lang(ja) .text-lg {
font-size: 12px; }
.text-xl, .standaloneErrorPage .name, .UserSettingsPage .sectionTitle h2 {
font-size: 16px;
letter-spacing: -0.2px;
line-height: 18px;
word-spacing: 0; }
:lang(ja) .text-xl, :lang(ja) .standaloneErrorPage .name, .standaloneErrorPage :lang(ja) .name, :lang(ja) .UserSettingsPage .sectionTitle h2, .UserSettingsPage .sectionTitle :lang(ja) h2 {
font-size: 13.8px; }
.display-xs, .BoardInfoBar .smallBoardName, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName {
font-size: 18px;
letter-spacing: -0.25px;
line-height: 20px;
word-spacing: 0; }
:lang(ja) .display-xs, :lang(ja) .BoardInfoBar .smallBoardName, .BoardInfoBar :lang(ja) .smallBoardName, :lang(ja) .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage :lang(ja) .fixedHeaderName {
font-size: 15.5px; }
.display-s, .UserInfoBar.infoBar .tabs .value, .display-sm {
font-size: 21px;
letter-spacing: -0.3px;
line-height: 23px;
word-spacing: -1.3px; }
:lang(ja) .display-sm {
font-size: 18.1px; }
.display-m, .InterestFeedPage .feedHeader .authLandingPageTitle .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .display-md {
font-size: 24px;
letter-spacing: -1px;
line-height: 28px;
word-spacing: -2px; }
:lang(ja) .display-md {
font-size: 20.6px; }
.display-l, .FeedPage .feedName, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .display-lg {
font-size: 36px;
letter-spacing: -1.25px;
line-height: 42px;
word-spacing: -2.25px; }
:lang(ja) .display-lg {
font-size: 31px; }
.display-xl {
font-size: 48px;
letter-spacing: -1.75px;
line-height: 56px;
word-spacing: -2.75px; }
:lang(ja) .display-xl {
font-size: 41.3px; }
@media (min-width: 360px) {
.text-xs, .news .pending .actions .Button.remove span.buttonText, .news .pending .actions .Button.primary span.buttonText, .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName, .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem, .ExploreStoryCredits .storyCredits > .creditItem, .ExploreStoryCredits .storyCredits .creditFooter, .Pin.summary .pinCredits > .pinCreditWrapper .creditItem, .Pin.summary .pinCredits > .creditItem, .Pin .creditFooter {
font-size: 11px;
letter-spacing: -0.05px;
line-height: 12px;
word-spacing: 0; }
:lang(ja) .text-xs, :lang(ja) .news .pending .actions .Button.remove span.buttonText, .news .pending .actions .Button.remove :lang(ja) span.buttonText, :lang(ja) .news .pending .actions .Button.primary span.buttonText, .news .pending .actions .Button.primary :lang(ja) span.buttonText, :lang(ja) .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName, .Typeahead.typeaheadWithTitles li a.titleItem :lang(ja) .typeaheadName, :lang(ja) .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem, .ExploreStoryCredits .storyCredits > .storyCreditWrapper :lang(ja) .creditItem, :lang(ja) .ExploreStoryCredits .storyCredits > .creditItem, .ExploreStoryCredits :lang(ja) .storyCredits > .creditItem, :lang(ja) .ExploreStoryCredits .storyCredits .creditFooter, .ExploreStoryCredits .storyCredits :lang(ja) .creditFooter, :lang(ja) .Pin.summary .pinCredits > .pinCreditWrapper .creditItem, .Pin.summary .pinCredits > .pinCreditWrapper :lang(ja) .creditItem, :lang(ja) .Pin.summary .pinCredits > .creditItem, .Pin.summary :lang(ja) .pinCredits > .creditItem, :lang(ja) .Pin .creditFooter, .Pin :lang(ja) .creditFooter {
font-size: 9.5px; }
.text-s, .FirstPinCreate .Pin.summary .pinMeta .TextField, .Board .boardName .boardPinCount, .Board .boardName.hasBoardContext .User.boardRepTitle .fullname, .Board .boardName.hasBoardContext .User.exploreTabTitle .fullname, .BoardHeader .belowBoardNameContainer .followerCount,
.BoardHeader .belowBoardNameContainer .pinCount, .BoardInfoBar .pinsAndFollowerCount .value, .BoardInfoBar .pinsAndFollowerCount .label, .PinCreate .Pin.summary .pinMeta .TextField, .text-sm {
font-size: 12px;
letter-spacing: -0.1px;
line-height: 14px;
word-spacing: 0; }
:lang(ja) .text-sm {
font-size: 10.3px; }
.text-m, .Button.boardSettingsButton .buttonText, .Modal .formFooter .Button.rounded:not(.primary) .buttonText,
.ReactModal__Content .formFooter .Button.rounded:not(.primary) .buttonText, .news .pending .actions .Button.remove .buttonText, .boardEdit .Button .buttonText, .Button.userFollowingGridButton .buttonText, .InviteButtonEmail .Button.btn .buttonText, .Button.moreItems .buttonText, .formFooterButton.cancelButton .buttonText, .Button.CardFollow.GrayButton .buttonText, .Button.FollowButton .buttonText, .Button.UserFollowButton .buttonText, .Button.InterestFollowButton .buttonText, .Modal .formFooter .Button.primary .buttonText,
.ReactModal__Content .formFooter .Button.primary .buttonText, .news .pending .actions .Button.primary .buttonText, .panelFooter .formFooterButtons .cancelButton .buttonText, .Button.searchToFollowButton .buttonText, .formFooterButton.confirmButton .buttonText, .Button.CardFollow.RedButton .buttonText, .Button.promoteYourPin .buttonText, .Button.userProfileMenu:not(.UnblockButton) .buttonText,
.Button.editProfile .buttonText, .Button.groupBoardChat .buttonText, .boardDetail .pending .actions .Button.remove .buttonText, .boardDetail .pending .actions .Button.primary .buttonText, .BoardCollaboratorInviter .BoardInviteForm .inviteButton .buttonText, .boardCollaboratorsWrapper .BoardInviteForm .inviteButton .buttonText, .InterestFeedPage .feedHeader .interestStats, .TopicFeedPage .feedHeader .interestStats, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .BoardHeader .description, .BoardInvite.news .boardName, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs .label, .UserProfileHeader.profileHeader .about .aboutText, .UserProfileHeader.profileHeader .about .iconsLinksEtc .locationWrapper, .UserProfileHeader.profileHeader .about .iconsLinksEtc .website, .UserProfileHeader.profileHeader .about .iconsLinksEtc .middot::after, .UpsellTip .footerButtons .cancelButton,
.UpsellTip .footerButtons .submitButton, .text-md {
font-size: 14px;
letter-spacing: -0.15px;
line-height: 16px;
word-spacing: 0; }
:lang(ja) .text-md {
font-size: 12px; }
.text-l, .User.gridItem .username, .Interest .interestWrapper .interestLabel h2, .ShopGridItem .productName, .Board .boardName .name, .Board .boardName.hasBoardContext .User.boardRepTitle .title, .Board .boardName.hasBoardContext .User.exploreTabTitle .title, .text-lg {
font-size: 16px;
letter-spacing: -0.2px;
line-height: 18px;
word-spacing: 0; }
:lang(ja) .text-lg {
font-size: 13.8px; }
.text-xl, .standaloneErrorPage .name, .UserSettingsPage .sectionTitle h2 {
font-size: 18px;
letter-spacing: -0.25px;
line-height: 20px;
word-spacing: 0; }
:lang(ja) .text-xl, :lang(ja) .standaloneErrorPage .name, .standaloneErrorPage :lang(ja) .name, :lang(ja) .UserSettingsPage .sectionTitle h2, .UserSettingsPage .sectionTitle :lang(ja) h2 {
font-size: 15.5px; }
.display-xs, .BoardInfoBar .smallBoardName, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName {
font-size: 21px;
letter-spacing: -0.3px;
line-height: 23px;
word-spacing: -1.3px; }
:lang(ja) .display-xs, :lang(ja) .BoardInfoBar .smallBoardName, .BoardInfoBar :lang(ja) .smallBoardName, :lang(ja) .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage :lang(ja) .fixedHeaderName {
font-size: 18.1px; }
.display-s, .UserInfoBar.infoBar .tabs .value, .display-sm {
font-size: 24px;
letter-spacing: -1px;
line-height: 28px;
word-spacing: -2px; }
:lang(ja) .display-sm {
font-size: 20.6px; }
.display-m, .InterestFeedPage .feedHeader .authLandingPageTitle .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .display-md {
font-size: 36px;
letter-spacing: -1.25px;
line-height: 42px;
word-spacing: -2.25px; }
:lang(ja) .display-md {
font-size: 31px; }
.display-l, .FeedPage .feedName, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .display-lg {
font-size: 48px;
letter-spacing: -1.75px;
line-height: 56px;
word-spacing: -2.75px; }
:lang(ja) .display-lg {
font-size: 41.3px; }
.display-xl {
font-size: 64px;
letter-spacing: -2.25px;
line-height: 76px;
word-spacing: -3.25px; }
:lang(ja) .display-xl {
font-size: 55px; } }
@media (min-width: 1312px) {
.text-xs, .news .pending .actions .Button.remove span.buttonText, .news .pending .actions .Button.primary span.buttonText, .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName, .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem, .ExploreStoryCredits .storyCredits > .creditItem, .ExploreStoryCredits .storyCredits .creditFooter, .Pin.summary .pinCredits > .pinCreditWrapper .creditItem, .Pin.summary .pinCredits > .creditItem, .Pin .creditFooter {
font-size: 12px;
letter-spacing: -0.1px;
line-height: 14px;
word-spacing: 0; }
:lang(ja) .text-xs, :lang(ja) .news .pending .actions .Button.remove span.buttonText, .news .pending .actions .Button.remove :lang(ja) span.buttonText, :lang(ja) .news .pending .actions .Button.primary span.buttonText, .news .pending .actions .Button.primary :lang(ja) span.buttonText, :lang(ja) .Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName, .Typeahead.typeaheadWithTitles li a.titleItem :lang(ja) .typeaheadName, :lang(ja) .ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem, .ExploreStoryCredits .storyCredits > .storyCreditWrapper :lang(ja) .creditItem, :lang(ja) .ExploreStoryCredits .storyCredits > .creditItem, .ExploreStoryCredits :lang(ja) .storyCredits > .creditItem, :lang(ja) .ExploreStoryCredits .storyCredits .creditFooter, .ExploreStoryCredits .storyCredits :lang(ja) .creditFooter, :lang(ja) .Pin.summary .pinCredits > .pinCreditWrapper .creditItem, .Pin.summary .pinCredits > .pinCreditWrapper :lang(ja) .creditItem, :lang(ja) .Pin.summary .pinCredits > .creditItem, .Pin.summary :lang(ja) .pinCredits > .creditItem, :lang(ja) .Pin .creditFooter, .Pin :lang(ja) .creditFooter {
font-size: 10.3px; }
.text-s, .FirstPinCreate .Pin.summary .pinMeta .TextField, .Board .boardName .boardPinCount, .Board .boardName.hasBoardContext .User.boardRepTitle .fullname, .Board .boardName.hasBoardContext .User.exploreTabTitle .fullname, .BoardHeader .belowBoardNameContainer .followerCount,
.BoardHeader .belowBoardNameContainer .pinCount, .BoardInfoBar .pinsAndFollowerCount .value, .BoardInfoBar .pinsAndFollowerCount .label, .PinCreate .Pin.summary .pinMeta .TextField, .text-sm {
font-size: 14px;
letter-spacing: -0.15px;
line-height: 16px;
word-spacing: 0; }
:lang(ja) .text-sm {
font-size: 12px; }
.text-m, .Button.boardSettingsButton .buttonText, .Modal .formFooter .Button.rounded:not(.primary) .buttonText,
.ReactModal__Content .formFooter .Button.rounded:not(.primary) .buttonText, .news .pending .actions .Button.remove .buttonText, .boardEdit .Button .buttonText, .Button.userFollowingGridButton .buttonText, .InviteButtonEmail .Button.btn .buttonText, .Button.moreItems .buttonText, .formFooterButton.cancelButton .buttonText, .Button.CardFollow.GrayButton .buttonText, .Button.FollowButton .buttonText, .Button.UserFollowButton .buttonText, .Button.InterestFollowButton .buttonText, .Modal .formFooter .Button.primary .buttonText,
.ReactModal__Content .formFooter .Button.primary .buttonText, .news .pending .actions .Button.primary .buttonText, .panelFooter .formFooterButtons .cancelButton .buttonText, .Button.searchToFollowButton .buttonText, .formFooterButton.confirmButton .buttonText, .Button.CardFollow.RedButton .buttonText, .Button.promoteYourPin .buttonText, .Button.userProfileMenu:not(.UnblockButton) .buttonText,
.Button.editProfile .buttonText, .Button.groupBoardChat .buttonText, .boardDetail .pending .actions .Button.remove .buttonText, .boardDetail .pending .actions .Button.primary .buttonText, .BoardCollaboratorInviter .BoardInviteForm .inviteButton .buttonText, .boardCollaboratorsWrapper .BoardInviteForm .inviteButton .buttonText, .InterestFeedPage .feedHeader .interestStats, .TopicFeedPage .feedHeader .interestStats, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .BoardHeader .description, .BoardInvite.news .boardName, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs .label, .UserProfileHeader.profileHeader .about .aboutText, .UserProfileHeader.profileHeader .about .iconsLinksEtc .locationWrapper, .UserProfileHeader.profileHeader .about .iconsLinksEtc .website, .UserProfileHeader.profileHeader .about .iconsLinksEtc .middot::after, .UpsellTip .footerButtons .cancelButton,
.UpsellTip .footerButtons .submitButton, .text-md {
font-size: 16px;
letter-spacing: -0.2px;
line-height: 18px;
word-spacing: 0; }
:lang(ja) .text-md {
font-size: 13.8px; }
.text-l, .User.gridItem .username, .Interest .interestWrapper .interestLabel h2, .ShopGridItem .productName, .Board .boardName .name, .Board .boardName.hasBoardContext .User.boardRepTitle .title, .Board .boardName.hasBoardContext .User.exploreTabTitle .title, .text-lg {
font-size: 18px;
letter-spacing: -0.25px;
line-height: 20px;
word-spacing: 0; }
:lang(ja) .text-lg {
font-size: 15.5px; }
.text-xl, .standaloneErrorPage .name, .UserSettingsPage .sectionTitle h2 {
font-size: 21px;
letter-spacing: -0.3px;
line-height: 23px;
word-spacing: -1.3px; }
:lang(ja) .text-xl, :lang(ja) .standaloneErrorPage .name, .standaloneErrorPage :lang(ja) .name, :lang(ja) .UserSettingsPage .sectionTitle h2, .UserSettingsPage .sectionTitle :lang(ja) h2 {
font-size: 18.1px; }
.display-xs, .BoardInfoBar .smallBoardName, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName {
font-size: 24px;
letter-spacing: -1px;
line-height: 28px;
word-spacing: -2px; }
:lang(ja) .display-xs, :lang(ja) .BoardInfoBar .smallBoardName, .BoardInfoBar :lang(ja) .smallBoardName, :lang(ja) .UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage :lang(ja) .fixedHeaderName {
font-size: 20.6px; }
.display-s, .UserInfoBar.infoBar .tabs .value, .display-sm {
font-size: 36px;
letter-spacing: -1.25px;
line-height: 42px;
word-spacing: -2.25px; }
:lang(ja) .display-sm {
font-size: 31px; }
.display-m, .InterestFeedPage .feedHeader .authLandingPageTitle .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .display-md {
font-size: 48px;
letter-spacing: -1.75px;
line-height: 56px;
word-spacing: -2.75px; }
:lang(ja) .display-md {
font-size: 41.3px; }
.display-l, .FeedPage .feedName, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .display-lg {
font-size: 64px;
letter-spacing: -2.25px;
line-height: 76px;
word-spacing: -3.25px; }
:lang(ja) .display-lg {
font-size: 55px; }
.display-xl {
font-size: 96px;
letter-spacing: -3.25px;
line-height: 114px;
word-spacing: -4.25px; }
:lang(ja) .display-xl {
font-size: 82.6px; } }
.m0 {
margin: 0; }
.mt0 {
margin-top: 0; }
.mr0 {
margin-right: 0; }
.mb0 {
margin-bottom: 0; }
.ml0 {
margin-left: 0; }
.p0 {
padding: 0; }
.px0 {
padding-left: 0;
padding-right: 0; }
.py0 {
padding-bottom: 0;
padding-top: 0; }
.m1 {
margin: 3px; }
.mt1, .Board .boardName .boardPinCount .PinCount, .Board .boardName.hasBoardContext, .BoardHeader .description {
margin-top: 3px; }
.mr1, .TypeaheadField.guided.buttonOnRight::before, .TokenizedInput.drawerNav .tokensWrapper .tokenizedItem, .Board .boardName > .secretIcon, .Board .boardName .User.boardRepTitle.hasText.thumb,
.Board .boardName .User.exploreTabTitle.hasText.thumb, .BoardInfoBar .boardButtons > *, .UserSettingsPage .formInlineCheckedSet label > input {
margin-right: 3px; }
.mb1 {
margin-bottom: 3px; }
.ml1, .TokenizedInput.guided .tokensWrapper .tokenizedItem {
margin-left: 3px; }
.mn1 {
margin: -3px; }
.mtn1 {
margin-top: -3px; }
.mbn1 {
margin-bottom: -3px; }
.mln1 {
margin-left: -3px; }
.mrn1, .mxn1, .UserInfoBar.infoBar .tabs {
margin-right: -3px; }
.mxn1, .UserInfoBar.infoBar .tabs {
margin-left: -3px; }
.myn1 {
margin-bottom: -3px;
margin-top: -3px; }
.p1 {
padding: 3px; }
.px1, .standaloneErrorPage .name, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .ExploreStoryCredits .storyCredits > .creditItem, .ShopGridItem .productName, .Board .boardName, .BoardInfoBar .pinsAndFollowerCount > ul > li, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs li a {
padding-left: 3px;
padding-right: 3px; }
.py1, .UserInfoBar.infoBar .tabs ul {
padding-bottom: 3px;
padding-top: 3px; }
.m2 {
margin: 6px; }
.mt2 {
margin-top: 6px; }
.mr2, .FeedPage .RelatedInterestsSection > ul > li, .InterestFeedPage .RelatedInterestsSection > ul > li, .TopicFeedPage .RelatedInterestsSection > ul > li, .Board .boardName .name, .UserProfileHeader.profileHeader .profileImage::after {
margin-right: 6px; }
.mb2, .Interest.storyView .interestWrapper, .FirstPinCreate .Pin.summary .pinMeta .TextField, .PinCreate .Pin.summary .pinMeta .TextField {
margin-bottom: 6px; }
.ml2, .TypeaheadField.guided.buttonOnRight::before, .UserProfileHeader.profileHeader .profileImage::after {
margin-left: 6px; }
.mn2 {
margin: -6px; }
.mtn2 {
margin-top: -6px; }
.mbn2 {
margin-bottom: -6px; }
.mln2 {
margin-left: -6px; }
.mrn2, .mxn2 {
margin-right: -6px; }
.mxn2 {
margin-left: -6px; }
.myn2 {
margin-bottom: -6px;
margin-top: -6px; }
.p2 {
padding: 6px; }
.px2, .SearchForm.guided, .BoardHeader .boardHeaderWrapper, .BoardInfoBar .infoBarWrapper, .BulkEditBar .boardBulkEditBar, .UserProfileHeader.profileHeader .profileImage, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar {
padding-left: 6px;
padding-right: 6px; }
.py2, .standaloneErrorPage .name, .User.gridItem .username, .ShopGridItem .productName, .Board .boardName {
padding-bottom: 6px;
padding-top: 6px; }
.m3 {
margin: 9px; }
.mt3, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage {
margin-top: 9px; }
.mr3, .FeedPage .RelatedInterestsSection > ul, .User.thumb.boardRepTitle .title, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul {
margin-right: 9px; }
.mb3, .BoardHeader .boardHeaderWrapper {
margin-bottom: 9px; }
.ml3, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul {
margin-left: 9px; }
.mn3 {
margin: -9px; }
.mtn3 {
margin-top: -9px; }
.mbn3 {
margin-bottom: -9px; }
.mln3 {
margin-left: -9px; }
.mrn3, .mxn3 {
margin-right: -9px; }
.mxn3 {
margin-left: -9px; }
.myn3 {
margin-bottom: -9px;
margin-top: -9px; }
.p3 {
padding: 9px; }
.px3, .FeedPage .feedName, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .UserInfoBar {
padding-left: 9px;
padding-right: 9px; }
.py3, .FeedPage .feedName, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .TopicFeedPage .RelatedInterestsSection > ul, .BoardInfoBar .infoBarWrapper, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar {
padding-bottom: 9px;
padding-top: 9px; }
.m4 {
margin: 12px; }
.mt4, .FeedPage .feedName {
margin-top: 12px; }
.mr4 {
margin-right: 12px; }
.mb4, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .NagSearch .message {
margin-bottom: 12px; }
.ml4 {
margin-left: 12px; }
.mn4 {
margin: -12px; }
.mtn4 {
margin-top: -12px; }
.mbn4 {
margin-bottom: -12px; }
.mln4 {
margin-left: -12px; }
.mrn4, .mxn4 {
margin-right: -12px; }
.mxn4 {
margin-left: -12px; }
.myn4 {
margin-bottom: -12px;
margin-top: -12px; }
.p4 {
padding: 12px; }
.px4 {
padding-left: 12px;
padding-right: 12px; }
.py4 {
padding-bottom: 12px;
padding-top: 12px; }
.m5 {
margin: 15px; }
.mt5 {
margin-top: 15px; }
.mr5 {
margin-right: 15px; }
.mb5 {
margin-bottom: 15px; }
.ml5 {
margin-left: 15px; }
.mn5 {
margin: -15px; }
.mtn5 {
margin-top: -15px; }
.mbn5 {
margin-bottom: -15px; }
.mln5 {
margin-left: -15px; }
.mrn5, .mxn5 {
margin-right: -15px; }
.mxn5 {
margin-left: -15px; }
.myn5 {
margin-bottom: -15px;
margin-top: -15px; }
.p5 {
padding: 15px; }
.px5 {
padding-left: 15px;
padding-right: 15px; }
.py5 {
padding-bottom: 15px;
padding-top: 15px; }
.m6 {
margin: 18px; }
.mt6 {
margin-top: 18px; }
.mr6 {
margin-right: 18px; }
.mb6 {
margin-bottom: 18px; }
.ml6 {
margin-left: 18px; }
.mn6 {
margin: -18px; }
.mtn6 {
margin-top: -18px; }
.mbn6 {
margin-bottom: -18px; }
.mln6 {
margin-left: -18px; }
.mrn6, .mxn6 {
margin-right: -18px; }
.mxn6 {
margin-left: -18px; }
.myn6 {
margin-bottom: -18px;
margin-top: -18px; }
.p6 {
padding: 18px; }
.px6 {
padding-left: 18px;
padding-right: 18px; }
.py6 {
padding-bottom: 18px;
padding-top: 18px; }
@media (min-width: 360px) {
.m1 {
margin: 4px; }
.mt1, .Board .boardName .boardPinCount .PinCount, .Board .boardName.hasBoardContext, .BoardHeader .description {
margin-top: 4px; }
.mr1, .TypeaheadField.guided.buttonOnRight::before, .TokenizedInput.drawerNav .tokensWrapper .tokenizedItem, .Board .boardName > .secretIcon, .Board .boardName .User.boardRepTitle.hasText.thumb,
.Board .boardName .User.exploreTabTitle.hasText.thumb, .BoardInfoBar .boardButtons > *, .UserSettingsPage .formInlineCheckedSet label > input {
margin-right: 4px; }
.mb1 {
margin-bottom: 4px; }
.ml1, .TokenizedInput.guided .tokensWrapper .tokenizedItem {
margin-left: 4px; }
.mn1 {
margin: -4px; }
.mtn1 {
margin-top: -4px; }
.mbn1 {
margin-bottom: -4px; }
.mln1 {
margin-left: -4px; }
.mrn1, .mxn1, .UserInfoBar.infoBar .tabs {
margin-right: -4px; }
.mxn1, .UserInfoBar.infoBar .tabs {
margin-left: -4px; }
.myn1 {
margin-bottom: -4px;
margin-top: -4px; }
.p1 {
padding: 4px; }
.px1, .standaloneErrorPage .name, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .ExploreStoryCredits .storyCredits > .creditItem, .ShopGridItem .productName, .Board .boardName, .BoardInfoBar .pinsAndFollowerCount > ul > li, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs li a {
padding-left: 4px;
padding-right: 4px; }
.py1, .UserInfoBar.infoBar .tabs ul {
padding-bottom: 4px;
padding-top: 4px; }
.m2 {
margin: 8px; }
.mt2 {
margin-top: 8px; }
.mr2, .FeedPage .RelatedInterestsSection > ul > li, .InterestFeedPage .RelatedInterestsSection > ul > li, .TopicFeedPage .RelatedInterestsSection > ul > li, .Board .boardName .name, .UserProfileHeader.profileHeader .profileImage::after {
margin-right: 8px; }
.mb2, .Interest.storyView .interestWrapper, .FirstPinCreate .Pin.summary .pinMeta .TextField, .PinCreate .Pin.summary .pinMeta .TextField {
margin-bottom: 8px; }
.ml2, .TypeaheadField.guided.buttonOnRight::before, .UserProfileHeader.profileHeader .profileImage::after {
margin-left: 8px; }
.mn2 {
margin: -8px; }
.mtn2 {
margin-top: -8px; }
.mbn2 {
margin-bottom: -8px; }
.mln2 {
margin-left: -8px; }
.mrn2, .mxn2 {
margin-right: -8px; }
.mxn2 {
margin-left: -8px; }
.myn2 {
margin-bottom: -8px;
margin-top: -8px; }
.p2 {
padding: 8px; }
.px2, .SearchForm.guided, .BoardHeader .boardHeaderWrapper, .BoardInfoBar .infoBarWrapper, .BulkEditBar .boardBulkEditBar, .UserProfileHeader.profileHeader .profileImage, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar {
padding-left: 8px;
padding-right: 8px; }
.py2, .standaloneErrorPage .name, .User.gridItem .username, .ShopGridItem .productName, .Board .boardName {
padding-bottom: 8px;
padding-top: 8px; }
.m3 {
margin: 12px; }
.mt3, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage {
margin-top: 12px; }
.mr3, .FeedPage .RelatedInterestsSection > ul, .User.thumb.boardRepTitle .title, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul {
margin-right: 12px; }
.mb3, .BoardHeader .boardHeaderWrapper {
margin-bottom: 12px; }
.ml3, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul {
margin-left: 12px; }
.mn3 {
margin: -12px; }
.mtn3 {
margin-top: -12px; }
.mbn3 {
margin-bottom: -12px; }
.mln3 {
margin-left: -12px; }
.mrn3, .mxn3 {
margin-right: -12px; }
.mxn3 {
margin-left: -12px; }
.myn3 {
margin-bottom: -12px;
margin-top: -12px; }
.p3 {
padding: 12px; }
.px3, .FeedPage .feedName, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .UserInfoBar {
padding-left: 12px;
padding-right: 12px; }
.py3, .FeedPage .feedName, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .TopicFeedPage .RelatedInterestsSection > ul, .BoardInfoBar .infoBarWrapper, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar {
padding-bottom: 12px;
padding-top: 12px; }
.m4 {
margin: 16px; }
.mt4, .FeedPage .feedName {
margin-top: 16px; }
.mr4 {
margin-right: 16px; }
.mb4, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .NagSearch .message {
margin-bottom: 16px; }
.ml4 {
margin-left: 16px; }
.mn4 {
margin: -16px; }
.mtn4 {
margin-top: -16px; }
.mbn4 {
margin-bottom: -16px; }
.mln4 {
margin-left: -16px; }
.mrn4, .mxn4 {
margin-right: -16px; }
.mxn4 {
margin-left: -16px; }
.myn4 {
margin-bottom: -16px;
margin-top: -16px; }
.p4 {
padding: 16px; }
.px4 {
padding-left: 16px;
padding-right: 16px; }
.py4 {
padding-bottom: 16px;
padding-top: 16px; }
.m5 {
margin: 20px; }
.mt5 {
margin-top: 20px; }
.mr5 {
margin-right: 20px; }
.mb5 {
margin-bottom: 20px; }
.ml5 {
margin-left: 20px; }
.mn5 {
margin: -20px; }
.mtn5 {
margin-top: -20px; }
.mbn5 {
margin-bottom: -20px; }
.mln5 {
margin-left: -20px; }
.mrn5, .mxn5 {
margin-right: -20px; }
.mxn5 {
margin-left: -20px; }
.myn5 {
margin-bottom: -20px;
margin-top: -20px; }
.p5 {
padding: 20px; }
.px5 {
padding-left: 20px;
padding-right: 20px; }
.py5 {
padding-bottom: 20px;
padding-top: 20px; }
.m6 {
margin: 24px; }
.mt6 {
margin-top: 24px; }
.mr6 {
margin-right: 24px; }
.mb6 {
margin-bottom: 24px; }
.ml6 {
margin-left: 24px; }
.mn6 {
margin: -24px; }
.mtn6 {
margin-top: -24px; }
.mbn6 {
margin-bottom: -24px; }
.mln6 {
margin-left: -24px; }
.mrn6, .mxn6 {
margin-right: -24px; }
.mxn6 {
margin-left: -24px; }
.myn6 {
margin-bottom: -24px;
margin-top: -24px; }
.p6 {
padding: 24px; }
.px6 {
padding-left: 24px;
padding-right: 24px; }
.py6 {
padding-bottom: 24px;
padding-top: 24px; } }
@media (min-width: 800px) {
.m1 {
margin: 6px 8px; }
.mt1, .Board .boardName .boardPinCount .PinCount, .Board .boardName.hasBoardContext, .BoardHeader .description {
margin-top: 6px; }
.mr1, .TypeaheadField.guided.buttonOnRight::before, .TokenizedInput.drawerNav .tokensWrapper .tokenizedItem, .Board .boardName > .secretIcon, .Board .boardName .User.boardRepTitle.hasText.thumb,
.Board .boardName .User.exploreTabTitle.hasText.thumb, .BoardInfoBar .boardButtons > *, .UserSettingsPage .formInlineCheckedSet label > input {
margin-right: 8px; }
.mb1 {
margin-bottom: 6px; }
.ml1, .TokenizedInput.guided .tokensWrapper .tokenizedItem {
margin-left: 8px; }
.mn1 {
margin: -6px -8px; }
.mtn1 {
margin-top: -6px; }
.mbn1 {
margin-bottom: -6px; }
.mln1 {
margin-left: -8px; }
.mrn1, .mxn1, .UserInfoBar.infoBar .tabs {
margin-right: -8px; }
.mxn1, .UserInfoBar.infoBar .tabs {
margin-left: -8px; }
.myn1 {
margin-bottom: -6px;
margin-top: -6px; }
.p1 {
padding: 6px 8px; }
.px1, .standaloneErrorPage .name, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .ExploreStoryCredits .storyCredits > .creditItem, .ShopGridItem .productName, .Board .boardName, .BoardInfoBar .pinsAndFollowerCount > ul > li, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs li a {
padding-left: 8px;
padding-right: 8px; }
.py1, .UserInfoBar.infoBar .tabs ul {
padding-bottom: 6px;
padding-top: 6px; }
.m2 {
margin: 12px 16px; }
.mt2 {
margin-top: 12px; }
.mr2, .FeedPage .RelatedInterestsSection > ul > li, .InterestFeedPage .RelatedInterestsSection > ul > li, .TopicFeedPage .RelatedInterestsSection > ul > li, .Board .boardName .name, .UserProfileHeader.profileHeader .profileImage::after {
margin-right: 16px; }
.mb2, .Interest.storyView .interestWrapper, .FirstPinCreate .Pin.summary .pinMeta .TextField, .PinCreate .Pin.summary .pinMeta .TextField {
margin-bottom: 12px; }
.ml2, .TypeaheadField.guided.buttonOnRight::before, .UserProfileHeader.profileHeader .profileImage::after {
margin-left: 16px; }
.mn2 {
margin: -12px -16px; }
.mtn2 {
margin-top: -12px; }
.mbn2 {
margin-bottom: -12px; }
.mln2 {
margin-left: -16px; }
.mrn2, .mxn2 {
margin-right: -16px; }
.mxn2 {
margin-left: -16px; }
.myn2 {
margin-bottom: -12px;
margin-top: -12px; }
.p2 {
padding: 12px 16px; }
.px2, .SearchForm.guided, .BoardHeader .boardHeaderWrapper, .BoardInfoBar .infoBarWrapper, .BulkEditBar .boardBulkEditBar, .UserProfileHeader.profileHeader .profileImage, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar {
padding-left: 16px;
padding-right: 16px; }
.py2, .standaloneErrorPage .name, .User.gridItem .username, .ShopGridItem .productName, .Board .boardName {
padding-bottom: 12px;
padding-top: 12px; }
.m3 {
margin: 18px 24px; }
.mt3, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage {
margin-top: 18px; }
.mr3, .FeedPage .RelatedInterestsSection > ul, .User.thumb.boardRepTitle .title, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul {
margin-right: 24px; }
.mb3, .BoardHeader .boardHeaderWrapper {
margin-bottom: 18px; }
.ml3, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul {
margin-left: 24px; }
.mn3 {
margin: -18px -24px; }
.mtn3 {
margin-top: -18px; }
.mbn3 {
margin-bottom: -18px; }
.mln3 {
margin-left: -24px; }
.mrn3, .mxn3 {
margin-right: -24px; }
.mxn3 {
margin-left: -24px; }
.myn3 {
margin-bottom: -18px;
margin-top: -18px; }
.p3 {
padding: 18px 24px; }
.px3, .FeedPage .feedName, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .UserInfoBar {
padding-left: 24px;
padding-right: 24px; }
.py3, .FeedPage .feedName, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .TopicFeedPage .RelatedInterestsSection > ul, .BoardInfoBar .infoBarWrapper, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar {
padding-bottom: 18px;
padding-top: 18px; }
.m4 {
margin: 24px 32px; }
.mt4, .FeedPage .feedName {
margin-top: 24px; }
.mr4 {
margin-right: 32px; }
.mb4, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .NagSearch .message {
margin-bottom: 24px; }
.ml4 {
margin-left: 32px; }
.mn4 {
margin: -24px -32px; }
.mtn4 {
margin-top: -24px; }
.mbn4 {
margin-bottom: -24px; }
.mln4 {
margin-left: -32px; }
.mrn4, .mxn4 {
margin-right: -32px; }
.mxn4 {
margin-left: -32px; }
.myn4 {
margin-bottom: -24px;
margin-top: -24px; }
.p4 {
padding: 24px 32px; }
.px4 {
padding-left: 32px;
padding-right: 32px; }
.py4 {
padding-bottom: 24px;
padding-top: 24px; }
.m5 {
margin: 30px 40px; }
.mt5 {
margin-top: 30px; }
.mr5 {
margin-right: 40px; }
.mb5 {
margin-bottom: 30px; }
.ml5 {
margin-left: 40px; }
.mn5 {
margin: -30px -40px; }
.mtn5 {
margin-top: -30px; }
.mbn5 {
margin-bottom: -30px; }
.mln5 {
margin-left: -40px; }
.mrn5, .mxn5 {
margin-right: -40px; }
.mxn5 {
margin-left: -40px; }
.myn5 {
margin-bottom: -30px;
margin-top: -30px; }
.p5 {
padding: 30px 40px; }
.px5 {
padding-left: 40px;
padding-right: 40px; }
.py5 {
padding-bottom: 30px;
padding-top: 30px; }
.m6 {
margin: 36px 48px; }
.mt6 {
margin-top: 36px; }
.mr6 {
margin-right: 48px; }
.mb6 {
margin-bottom: 36px; }
.ml6 {
margin-left: 48px; }
.mn6 {
margin: -36px -48px; }
.mtn6 {
margin-top: -36px; }
.mbn6 {
margin-bottom: -36px; }
.mln6 {
margin-left: -48px; }
.mrn6, .mxn6 {
margin-right: -48px; }
.mxn6 {
margin-left: -48px; }
.myn6 {
margin-bottom: -36px;
margin-top: -36px; }
.p6 {
padding: 36px 48px; }
.px6 {
padding-left: 48px;
padding-right: 48px; }
.py6 {
padding-bottom: 36px;
padding-top: 36px; } }
@media (min-width: 1312px) {
.m1 {
margin: 6px 8px; }
.mt1, .Board .boardName .boardPinCount .PinCount, .Board .boardName.hasBoardContext, .BoardHeader .description {
margin-top: 6px; }
.mr1, .TypeaheadField.guided.buttonOnRight::before, .TokenizedInput.drawerNav .tokensWrapper .tokenizedItem, .Board .boardName > .secretIcon, .Board .boardName .User.boardRepTitle.hasText.thumb,
.Board .boardName .User.exploreTabTitle.hasText.thumb, .BoardInfoBar .boardButtons > *, .UserSettingsPage .formInlineCheckedSet label > input {
margin-right: 8px; }
.mb1 {
margin-bottom: 6px; }
.ml1, .TokenizedInput.guided .tokensWrapper .tokenizedItem {
margin-left: 8px; }
.mn1 {
margin: -6px -8px; }
.mtn1 {
margin-top: -6px; }
.mbn1 {
margin-bottom: -6px; }
.mln1 {
margin-left: -8px; }
.mrn1, .mxn1, .UserInfoBar.infoBar .tabs {
margin-right: -8px; }
.mxn1, .UserInfoBar.infoBar .tabs {
margin-left: -8px; }
.myn1 {
margin-bottom: -6px;
margin-top: -6px; }
.p1 {
padding: 6px 8px; }
.px1, .standaloneErrorPage .name, .SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .ExploreStoryCredits .storyCredits > .creditItem, .ShopGridItem .productName, .Board .boardName, .BoardInfoBar .pinsAndFollowerCount > ul > li, .BulkEditBar .notifications, .UserInfoBar.infoBar .tabs li a {
padding-left: 8px;
padding-right: 8px; }
.py1, .UserInfoBar.infoBar .tabs ul {
padding-bottom: 6px;
padding-top: 6px; }
.m2 {
margin: 12px 16px; }
.mt2 {
margin-top: 12px; }
.mr2, .FeedPage .RelatedInterestsSection > ul > li, .InterestFeedPage .RelatedInterestsSection > ul > li, .TopicFeedPage .RelatedInterestsSection > ul > li, .Board .boardName .name, .UserProfileHeader.profileHeader .profileImage::after {
margin-right: 16px; }
.mb2, .Interest.storyView .interestWrapper, .FirstPinCreate .Pin.summary .pinMeta .TextField, .PinCreate .Pin.summary .pinMeta .TextField {
margin-bottom: 12px; }
.ml2, .TypeaheadField.guided.buttonOnRight::before, .UserProfileHeader.profileHeader .profileImage::after {
margin-left: 16px; }
.mn2 {
margin: -12px -16px; }
.mtn2 {
margin-top: -12px; }
.mbn2 {
margin-bottom: -12px; }
.mln2 {
margin-left: -16px; }
.mrn2, .mxn2 {
margin-right: -16px; }
.mxn2 {
margin-left: -16px; }
.myn2 {
margin-bottom: -12px;
margin-top: -12px; }
.p2 {
padding: 12px 16px; }
.px2, .SearchForm.guided, .BoardHeader .boardHeaderWrapper, .BoardInfoBar .infoBarWrapper, .BulkEditBar .boardBulkEditBar, .UserProfileHeader.profileHeader .profileImage, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar {
padding-left: 16px;
padding-right: 16px; }
.py2, .standaloneErrorPage .name, .User.gridItem .username, .ShopGridItem .productName, .Board .boardName {
padding-bottom: 12px;
padding-top: 12px; }
.m3 {
margin: 18px 24px; }
.mt3, .ExploreStoryCredits .storyCredits > .storyCreditWrapper, .UserProfileHeader.profileHeader .fixedHeaderNameAndImage {
margin-top: 18px; }
.mr3, .FeedPage .RelatedInterestsSection > ul, .User.thumb.boardRepTitle .title, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul {
margin-right: 24px; }
.mb3, .BoardHeader .boardHeaderWrapper {
margin-bottom: 18px; }
.ml3, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .RelatedInterestsSection > ul {
margin-left: 24px; }
.mn3 {
margin: -18px -24px; }
.mtn3 {
margin-top: -18px; }
.mbn3 {
margin-bottom: -18px; }
.mln3 {
margin-left: -24px; }
.mrn3, .mxn3 {
margin-right: -24px; }
.mxn3 {
margin-left: -24px; }
.myn3 {
margin-bottom: -18px;
margin-top: -18px; }
.p3 {
padding: 18px 24px; }
.px3, .FeedPage .feedName, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .UserInfoBar {
padding-left: 24px;
padding-right: 24px; }
.py3, .FeedPage .feedName, .FeedPage .RelatedInterestsSection > ul, .InterestFeedPage .feedButtonWrapper, .InterestFeedPage .feedHeader .interestNameStats, .InterestFeedPage .RelatedInterestsSection > ul, .TopicFeedPage .feedButtonWrapper, .TopicFeedPage .feedHeader .interestNameStats, .TopicFeedPage .RelatedInterestsSection > ul, .BoardInfoBar .infoBarWrapper, .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .titleBar {
padding-bottom: 18px;
padding-top: 18px; }
.m4 {
margin: 24px 32px; }
.mt4, .FeedPage .feedName {
margin-top: 24px; }
.mr4 {
margin-right: 32px; }
.mb4, .InterestFeedPage .feedHeader .interestName, .TopicFeedPage .feedHeader .interestName, .BoardHeader .boardName, .UserProfileHeader.profileHeader .name, .NagSearch .message {
margin-bottom: 24px; }
.ml4 {
margin-left: 32px; }
.mn4 {
margin: -24px -32px; }
.mtn4 {
margin-top: -24px; }
.mbn4 {
margin-bottom: -24px; }
.mln4 {
margin-left: -32px; }
.mrn4, .mxn4 {
margin-right: -32px; }
.mxn4 {
margin-left: -32px; }
.myn4 {
margin-bottom: -24px;
margin-top: -24px; }
.p4 {
padding: 24px 32px; }
.px4 {
padding-left: 32px;
padding-right: 32px; }
.py4 {
padding-bottom: 24px;
padding-top: 24px; }
.m5 {
margin: 30px 40px; }
.mt5 {
margin-top: 30px; }
.mr5 {
margin-right: 40px; }
.mb5 {
margin-bottom: 30px; }
.ml5 {
margin-left: 40px; }
.mn5 {
margin: -30px -40px; }
.mtn5 {
margin-top: -30px; }
.mbn5 {
margin-bottom: -30px; }
.mln5 {
margin-left: -40px; }
.mrn5, .mxn5 {
margin-right: -40px; }
.mxn5 {
margin-left: -40px; }
.myn5 {
margin-bottom: -30px;
margin-top: -30px; }
.p5 {
padding: 30px 40px; }
.px5 {
padding-left: 40px;
padding-right: 40px; }
.py5 {
padding-bottom: 30px;
padding-top: 30px; }
.m6 {
margin: 36px 48px; }
.mt6 {
margin-top: 36px; }
.mr6 {
margin-right: 48px; }
.mb6 {
margin-bottom: 36px; }
.ml6 {
margin-left: 48px; }
.mn6 {
margin: -36px -48px; }
.mtn6 {
margin-top: -36px; }
.mbn6 {
margin-bottom: -36px; }
.mln6 {
margin-left: -48px; }
.mrn6, .mxn6 {
margin-right: -48px; }
.mxn6 {
margin-left: -48px; }
.myn6 {
margin-bottom: -36px;
margin-top: -36px; }
.p6 {
padding: 36px 48px; }
.px6 {
padding-left: 48px;
padding-right: 48px; }
.py6 {
padding-bottom: 36px;
padding-top: 36px; } }
.AppealConfirmationPage .standardForm {
font-size: 14px;
line-height: 21px;
margin: 20px auto 40px; }
.AppealForm {
overflow: hidden; }
.AppealForm h1 {
color: #333;
color: rgba(21, 21, 21, 0.8);
font-size: 47px;
font-weight: bold;
line-height: 52px;
margin-left: auto;
margin-right: auto;
max-width: 736px;
text-align: center;
word-wrap: break-word;
margin-bottom: 52px; }
.AppealForm .formDescription {
color: #555;
font-weight: 500; }
.AppealForm .standardForm {
margin: 0 auto; }
.AppealForm .standardForm ul {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
margin-bottom: 14px; }
.AppealForm .standardForm ul li {
overflow: hidden; }
.AppealForm .standardForm ul li.empty {
padding: 0; }
.AppealForm .standardForm ul li div {
float: left;
margin-left: 0;
width: 515px; }
.AppealForm .standardForm ul li h2 {
float: left; }
.AppealForm .standardForm ul li h3 {
color: #555;
font-size: 13px;
padding: 0;
width: 170px; }
.AppealForm .standardForm ul li h4 {
float: left;
font-size: 12px;
font-weight: normal;
margin-left: 20px;
padding: 6px;
width: 170px; }
.AnchorLinks .links li {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-bottom: 3px solid #fff;
cursor: pointer;
display: inline-block;
padding: 20px; }
.AnchorLinks .links li span {
color: #5f5f5f;
font-size: 14px; }
.AnchorLinks .links li:hover .link {
color: #333; }
.AnchorLinks .links li.selected {
border-color: #bd081c; }
.AnchorLinks .links li.selected span {
color: #333; }
.AnchorLinks .links span {
font-weight: bold;
text-decoration: none; }
.BackgroundImage {
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
z-index: -1; }
.BackgroundImage .prefetch {
display: none; }
.BackgroundImage .background {
background-size: cover;
height: 100%;
opacity: 0;
position: absolute;
-webkit-transition: opacity .5s;
transition: opacity .5s;
width: 100%; }
.BackgroundImage .background.loaded {
opacity: 1; }
.BackgroundImage .homepageWallBackground {
background-image: url(https://s.pinimg.com/webapp/style/images/pin_grid-7106f39b.jpg);
height: 100%;
margin: 0 auto;
width: 90%; }
.BoardPickerSpinnerBlock {
cursor: progress !important;
height: 82px;
pointer-events: none;
position: relative; }
.BusinessTypeList > li > label {
color: #444;
font-size: 14px;
font-weight: bold;
line-height: 22px; }
.BusinessTypeList > li > label input[type=radio] {
float: left;
height: 22px; }
.BusinessTypeList .businessTypeLabel {
margin-left: 8px; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
/* stylelint-disable-next-line at-rule-no-unknown */
.Button {
outline: none;
position: relative; }
.Button.borderless {
background-color: transparent;
border: 0;
margin: 0;
padding: 0; }
.Button.btn {
background-color: #f8f8f8;
background: -webkit-linear-gradient(#fff, #f0f0f0);
background: linear-gradient(#fff, #f0f0f0);
border: 1px solid #ccc;
color: #5f5f5f;
cursor: pointer;
font-weight: bold;
text-shadow: 0 1px #fff;
white-space: nowrap;
background-color: #f0f0f0;
padding: 7px 13px; }
.Button.btn.rounded {
border-radius: 3px; }
.Button.btn:hover, .Button.btn:focus {
border-color: #ccc #c2c2c2 #b8b8b8; }
.Button.btn.primary, .Button.btn.primaryOnHover:hover, .Button.btn.primaryOnHover:focus, .Button.btn.primaryOnHover.active {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: -webkit-linear-gradient(#e3262e, #ab171e);
background-image: linear-gradient(#e3262e, #ab171e);
background-color: #ab171e;
border-bottom-color: #820a0f;
border-left-color: #9a1015;
border-right-color: #9a1015;
border-top-color: #af151b;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.34);
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.11); }
.Button.btn.primary:not(.noHoverActive):hover, .Button.btn.primary:not(.noHoverActive):focus, .Button.btn.primaryOnHover:hover:not(.noHoverActive):hover, .Button.btn.primaryOnHover:hover:not(.noHoverActive):focus, .Button.btn.primaryOnHover:focus:not(.noHoverActive):hover, .Button.btn.primaryOnHover:focus:not(.noHoverActive):focus, .Button.btn.primaryOnHover.active:not(.noHoverActive):hover, .Button.btn.primaryOnHover.active:not(.noHoverActive):focus {
background-image: -webkit-linear-gradient(#e63d44, #c11a22);
background-image: linear-gradient(#e63d44, #c11a22);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border: 1px solid #920c12; }
.Button.btn.primary:not(.noHoverActive):active, .Button.btn.primary:not(.noHoverActive).active, .Button.btn.primaryOnHover:hover:not(.noHoverActive):active, .Button.btn.primaryOnHover:hover:not(.noHoverActive).active, .Button.btn.primaryOnHover:focus:not(.noHoverActive):active, .Button.btn.primaryOnHover:focus:not(.noHoverActive).active, .Button.btn.primaryOnHover.active:not(.noHoverActive):active, .Button.btn.primaryOnHover.active:not(.noHoverActive).active {
background-image: -webkit-linear-gradient(#bb1618, #e22123);
background-image: linear-gradient(#bb1618, #e22123);
box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.5) inset;
background-color: #e22123;
border-color: #99161b;
text-shadow: 0 1px rgba(0, 0, 0, 0.6); }
.Button.btn.dim {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #777; }
.Button.btn.unAuthFacebookConnect, .Button.btn.unAuthGplusConnect, .Button.btn.unAuthTwitterConnect {
height: 42px;
position: relative; }
.Button.btn.unAuthFacebookConnect em, .Button.btn.unAuthGplusConnect em, .Button.btn.unAuthTwitterConnect em {
bottom: 0;
box-shadow: 1px 0 0 rgba(0, 0, 0, 0.05);
height: 39px;
left: 0;
padding: 0;
position: absolute;
top: 0;
width: 41px; }
.Button.btn.unAuthFacebookConnect span, .Button.btn.unAuthGplusConnect span, .Button.btn.unAuthTwitterConnect span {
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.25); }
.Button.btn.unAuthFacebookConnect em {
width: 42px;
height: 42px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -215px -88px no-repeat; }
.Button.btn.unAuthFacebookConnect.flat, .Button.btn.unAuthFacebookConnect.flat:hover, .Button.btn.unAuthFacebookConnect.flat:active {
background: #3b5998;
font-size: 16px;
line-height: 19px; }
.Button.btn.unAuthFacebookConnect.flat em, .Button.btn.unAuthFacebookConnect.flat:hover em, .Button.btn.unAuthFacebookConnect.flat:active em {
width: 44px;
height: 44px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -92px -296px no-repeat;
border-right: 1px solid rgba(255, 255, 255, 0.3);
height: 40px;
width: 40px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.btn.unAuthFacebookConnect.flat em, .Button.btn.unAuthFacebookConnect.flat:hover em, .Button.btn.unAuthFacebookConnect.flat:active em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -45px -258px;
background-size: 428px 427px; } }
.Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect, .Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect:hover, .Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect:active {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #3b5998;
background-clip: padding-box;
border: 5px solid #3b5998;
border-radius: 4px;
box-shadow: none;
height: auto;
padding-bottom: 12px;
padding-top: 10px; }
.Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect em, .Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect:hover em, .Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect:active em {
width: 24px;
height: 24px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -28px -214px no-repeat;
background-color: rgba(255, 255, 255, 0.04);
margin-top: -2px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect em, .Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect:hover em, .Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect:active em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -27px -174px;
background-size: 249px 231px; } }
.UnauthBanner .Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect em, .UnauthBanner .Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect:hover em, .UnauthBanner .Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect:active em {
background-color: transparent; }
.Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthFacebookConnect, .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthFacebookConnect:active, .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthFacebookConnect:hover {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border: none;
border-radius: 3px;
height: 40px;
width: 100%; }
.Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthFacebookConnect em, .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthFacebookConnect:active em, .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthFacebookConnect:hover em {
margin: 8px; }
.Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthFacebookConnect.intButton, .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthFacebookConnect.intButton:active, .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthFacebookConnect.intButton:hover {
float: left;
margin-right: 16px;
width: 126px; }
.Button.btn.unauthHomeRegisterButton.unAuthemailSignup, .Button.btn.unauthHomeRegisterButton.unAuthemailSignup:hover {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-clip: padding-box;
border: 3px solid rgba(51, 51, 51, 0.4);
border-radius: 6px;
color: #666;
padding-bottom: 12px;
padding-top: 10px; }
.Button.btn.unauthHomeRegisterButton.unAuthemailSignup em, .Button.btn.unauthHomeRegisterButton.unAuthemailSignup:hover em {
width: 50px;
height: 42px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -171px -174px no-repeat;
height: 40px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.btn.unauthHomeRegisterButton.unAuthemailSignup em, .Button.btn.unauthHomeRegisterButton.unAuthemailSignup:hover em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -291px -51px;
background-size: 428px 427px; } }
.Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthemailSignup, .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthemailSignup:active, .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthemailSignup:hover {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-radius: 3px;
height: 39px;
width: 268px; }
.Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthemailSignup em, .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthemailSignup:active em, .Button.btn.unauthHomeRegisterButton.multiStepRedesign.unAuthemailSignup:hover em {
height: 37px;
margin-left: -6px;
width: 40px; }
.Button.btn.unAuthGplusConnect {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #4285f4;
border: none;
height: 40px; }
.Button.btn.unAuthGplusConnect em {
width: 38px;
height: 38px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -160px -133px no-repeat;
margin: 1px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.btn.unAuthGplusConnect em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -127px -96px;
background-size: 249px 231px; } }
.Button.btn.registerLoginButton em {
left: 0;
padding: 0;
position: absolute;
top: 0; }
.Button.btn.registerLoginButton span {
display: inline-block;
margin-left: 42px;
margin-top: -3px; }
.Button.btn.registerLoginButton.multiStepRedesign span {
margin-left: 42px; }
.Button.btn.registerLoginButton.multiStepRedesign.intButton span {
bottom: 6px; }
.Button.btn[disabled], .Button.btn.disabled, .Button.btn.disabled:hover, .Button.btn.disabled:focus, .Button.btn.disabled:active {
box-shadow: none !important;
text-shadow: 0 0 0 !important;
background: #ebebeb !important;
border: 1px solid #ddd !important;
color: #aaa !important;
cursor: default; }
.Button.btn[disabled].repinSmall em, .Button.btn.disabled.repinSmall em, .Button.btn.disabled:hover.repinSmall em, .Button.btn.disabled:focus.repinSmall em, .Button.btn.disabled:active.repinSmall em {
width: 34px;
height: 15px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -204px -176px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.btn[disabled].repinSmall em, .Button.btn.disabled.repinSmall em, .Button.btn.disabled:hover.repinSmall em, .Button.btn.disabled:focus.repinSmall em, .Button.btn.disabled:active.repinSmall em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -128px -78px;
background-size: 249px 231px; } }
.Button.btn.noSidePadding {
padding-left: 0;
padding-right: 0; }
.Button.btn.buyButton {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #0084ff;
border: 1px solid #0084ff;
border-radius: 4px;
color: #fff;
font-size: 14px;
height: 35px;
text-shadow: none; }
.Button.btn.buyButton.invalid {
background: #ebebeb;
border: 1px solid #ebebeb;
color: #a6a6a6; }
.Button.btn.buyButton:active {
background: #0084ff;
border: 1px solid #0084ff; }
.Button.btn.buyButton:active.invalid {
background: #ebebeb;
border: 1px solid #ebebeb;
color: #a6a6a6; }
.Button.btn.shop {
background: none;
border: 0; }
.Button.btn.shop:active {
box-shadow: none; }
.Button.btn.shop.tutorialHighlight {
background-color: #fff;
border-radius: 50%;
color: #0084ff;
height: 55px !important;
margin: -19px 0 -9px;
padding: 19px 9px;
width: 55px !important; }
.Button.btn.shop.tutorialHighlight .buttonText {
font-size: 14px; }
.Button.btn:active, .Button.btn.active {
background-color: #f8f8f8;
background: -webkit-linear-gradient(#f0f0f0, #fff);
background: linear-gradient(#f0f0f0, #fff);
border-color: #b8b8b8 #c2c2c2 #ccc;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset; }
.Button.btn.isBrioFlat {
background-color: #efefef;
background-image: none;
border: 0;
border-radius: 4px;
box-shadow: none;
color: #555;
height: 36px;
text-shadow: none;
padding: 9px 12px; }
.Button.btn.isBrioFlat:hover {
background-color: #e3e3e3;
border: 0; }
.Button.btn.isBrioFlat:active, .Button.btn.isBrioFlat:focus, .Button.btn.isBrioFlat.active {
background-color: #e3e3e3;
background-image: none;
border: 0;
box-shadow: none; }
.Button.btn.isBrioFlat.primary, .Button.btn.isBrioFlat.primary:active {
background-color: #bd081c;
border: 0;
box-shadow: none;
color: #efefef;
text-shadow: none; }
.Button.btn.isBrioFlat.primary.btn.primary:hover, .Button.btn.isBrioFlat.primary.btn.primaryOnHover:hover:not(.noHoverActive):hover, .Button.btn.isBrioFlat.primary:focus, .Button.btn.isBrioFlat.primary:active, .Button.btn.isBrioFlat.primary.active .Button.btn.isBrioFlat.primary:not(.noHoverActive):active, .Button.btn.isBrioFlat.primary:not(.noHoverActive):focus, .Button.btn.isBrioFlat.primary:active.btn.primary:hover, .Button.btn.isBrioFlat.primary:active.btn.primaryOnHover:hover:not(.noHoverActive):hover, .Button.btn.isBrioFlat.primary:active:focus, .Button.btn.isBrioFlat.primary:active:active, .Button.btn.isBrioFlat.primary:active.active .Button.btn.isBrioFlat.primary:not(.noHoverActive):active, .Button.btn.isBrioFlat.primary:active:not(.noHoverActive):focus, .Button.btn.isBrioFlat.primary.active .Button.btn.isBrioFlat.primary:active:not(.noHoverActive):active, .Button.btn.isBrioFlat.primary:active.active .Button.btn.isBrioFlat.primary:active:not(.noHoverActive):active {
/* the above is for css specificity, will be better after the experiments are shipped to
all users */
background: #b7071b;
border: 0;
box-shadow: none;
text-shadow: none; }
.Button.btn.isBrioFlat.white, .Button.btn.isBrioFlat.white:active {
background-color: white; }
.Button.btn.isBrioFlat.white:hover {
background-color: #efefef; }
.Button.btn.isBrioFlat.hasText.hasIcon span {
margin-left: 4px; }
.Button.btn.isBrioFlat.hasText.unlike span {
margin-left: 0; }
.Button.btn.didItImageUpload {
background: #fff;
height: inherit;
padding: 0;
text-align: left; }
.Button.btn.didItImageUpload > em {
width: 20px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -88px -353px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.btn.didItImageUpload > em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -105px -347px;
background-size: 399px 382px; } }
.Button.btn.didItImageUpload:hover {
background: #fff; }
.Button.btn.didItImageUpload.disabled {
background: #fff !important;
border: 0 !important; }
.Button.btn.boardInviteBlockButton {
background: transparent;
height: inherit;
padding: 0; }
.Button.btn.boardInviteBlockButton:focus, .Button.btn.boardInviteBlockButton:hover {
background: transparent; }
.Button.btn.boardInviteBlockButton em {
width: 10px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -120px -442px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.btn.boardInviteBlockButton em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -418px -16px;
background-size: 428px 427px; } }
.Button.btn.toastUndoButton {
background: transparent;
border: 1px solid #fff;
color: #fff; }
.Button.btn.toastUndoButton:hover {
background: #fff;
border: 1px solid #fff;
color: #0a0e13; }
.Button.btn.contactRequestsCount {
width: 100%; }
.Button.btn.contactRequestsCount.contactRequestView {
background: transparent; }
.Button.btn.contactRequestsCount.contactRequestView:hover {
background: transparent; }
.Button.didIt em {
width: 17px;
height: 13px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -290px -325px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.didIt em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -246px -320px;
background-size: 399px 382px; } }
.Button.didIt.done em {
width: 17px;
height: 13px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -309px -325px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.didIt.done em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -343px -292px;
background-size: 399px 382px; } }
.Button.didIt.square {
padding: 0 0 2px 0;
width: 36px; }
.Button.didItFeedAction {
background: none;
border: 0;
height: 20px;
padding: 0;
width: 20px; }
.Button.didItFeedAction:active, .Button.didItFeedAction.active {
background: none;
box-shadow: none; }
.Button.didItFeedAction.didItEdit {
background: none !important; }
.Button.didItFeedAction.didItEdit em {
width: 20px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -198px -353px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.didItFeedAction.didItEdit em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -210px -347px;
background-size: 399px 382px; } }
.Button.didItFeedAction.didItSeeMore em {
width: 20px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -132px -353px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.didItFeedAction.didItSeeMore em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -147px -347px;
background-size: 399px 382px; } }
.Button.loading {
min-height: 0;
min-height: 0; }
.Button.loading .buttonText, .Button.loading em {
visibility: hidden; }
.Button.loading .buttonText, .Button.loading em {
visibility: hidden; }
.Button.gridItem {
bottom: 10px;
display: block;
left: 10px;
width: 216px; }
.Button .buttonHoverMask {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 100; }
.Button .buttonBadge {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
font-size: 11px;
font-weight: 700;
min-width: 8px;
position: relative;
-webkit-transition: opacity .3s linear, margin-right .3s ease-out;
transition: opacity .3s linear, margin-right .3s ease-out;
vertical-align: middle; }
.Button .buttonBadge.leftBadge {
background-color: #bd081c;
border-radius: 50%;
color: #fff;
display: inline-block;
height: 14px;
margin-left: 0;
margin-right: 5px;
opacity: 0;
padding: 0 3px;
text-align: center;
top: -1px; }
.Button.badged .buttonBadge {
-webkit-animation: popBadge .5s ease-out;
animation: popBadge .5s ease-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
margin-right: 0;
opacity: 1; }
.Button em {
display: inline-block;
outline: none;
position: relative;
vertical-align: middle; }
.Button .accessibilityText {
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
position: absolute; }
.Button.seeMoreButton {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: rgba(0, 0, 0, 0.2);
background-image: none;
border: 0;
border-radius: 4px;
box-shadow: none;
color: #fff;
height: 36px;
text-shadow: none;
font-size: 14px;
height: 36px;
letter-spacing: -.3px;
width: 98px; }
.Button.seeMoreButton:hover {
background-color: rgba(0, 0, 0, 0.3);
border: 0; }
.Button.seeMoreButton:active, .Button.seeMoreButton:focus, .Button.seeMoreButton.active {
background-color: rgba(0, 0, 0, 0.3);
background-image: none;
border: 0;
box-shadow: none; }
.Button.seeMoreButton.primary, .Button.seeMoreButton.primary:active {
background-color: #bd081c;
border: 0;
box-shadow: none;
color: rgba(0, 0, 0, 0.2);
text-shadow: none; }
.Button.seeMoreButton.primary.btn.primary:hover, .Button.seeMoreButton.primary.btn.primaryOnHover:hover:not(.noHoverActive):hover, .Button.seeMoreButton.primary:focus, .Button.seeMoreButton.primary:active, .Button.seeMoreButton.primary.active .Button.seeMoreButton.primary:not(.noHoverActive):active, .Button.seeMoreButton.primary:not(.noHoverActive):focus, .Button.seeMoreButton.primary:active.btn.primary:hover, .Button.seeMoreButton.primary:active.btn.primaryOnHover:hover:not(.noHoverActive):hover, .Button.seeMoreButton.primary:active:focus, .Button.seeMoreButton.primary:active:active, .Button.seeMoreButton.primary:active.active .Button.seeMoreButton.primary:not(.noHoverActive):active, .Button.seeMoreButton.primary:active:not(.noHoverActive):focus, .Button.seeMoreButton.primary.active .Button.seeMoreButton.primary:active:not(.noHoverActive):active, .Button.seeMoreButton.primary:active.active .Button.seeMoreButton.primary:active:not(.noHoverActive):active {
/* the above is for css specificity, will be better after the experiments are shipped to
all users */
background: #b7071b;
border: 0;
box-shadow: none;
text-shadow: none; }
.Button.seeMoreButton.white, .Button.seeMoreButton.white:active {
background-color: white; }
.Button.seeMoreButton.white:hover {
background-color: rgba(0, 0, 0, 0.2); }
.Button.opaqueGrayButton {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: rgba(0, 0, 0, 0.1);
background-image: none;
border: 0;
border-radius: 4px;
box-shadow: none;
color: #fff;
height: 36px;
text-shadow: none;
font-size: 14px;
height: 31px;
letter-spacing: -.3px;
line-height: 1.1; }
.Button.opaqueGrayButton:hover {
background-color: rgba(0, 0, 0, 0.7);
border: 0; }
.Button.opaqueGrayButton:active, .Button.opaqueGrayButton:focus, .Button.opaqueGrayButton.active {
background-color: rgba(0, 0, 0, 0.7);
background-image: none;
border: 0;
box-shadow: none; }
.Button.opaqueGrayButton.primary, .Button.opaqueGrayButton.primary:active {
background-color: #bd081c;
border: 0;
box-shadow: none;
color: rgba(0, 0, 0, 0.1);
text-shadow: none; }
.Button.opaqueGrayButton.primary.btn.primary:hover, .Button.opaqueGrayButton.primary.btn.primaryOnHover:hover:not(.noHoverActive):hover, .Button.opaqueGrayButton.primary:focus, .Button.opaqueGrayButton.primary:active, .Button.opaqueGrayButton.primary.active .Button.opaqueGrayButton.primary:not(.noHoverActive):active, .Button.opaqueGrayButton.primary:not(.noHoverActive):focus, .Button.opaqueGrayButton.primary:active.btn.primary:hover, .Button.opaqueGrayButton.primary:active.btn.primaryOnHover:hover:not(.noHoverActive):hover, .Button.opaqueGrayButton.primary:active:focus, .Button.opaqueGrayButton.primary:active:active, .Button.opaqueGrayButton.primary:active.active .Button.opaqueGrayButton.primary:not(.noHoverActive):active, .Button.opaqueGrayButton.primary:active:not(.noHoverActive):focus, .Button.opaqueGrayButton.primary.active .Button.opaqueGrayButton.primary:active:not(.noHoverActive):active, .Button.opaqueGrayButton.primary:active.active .Button.opaqueGrayButton.primary:active:not(.noHoverActive):active {
/* the above is for css specificity, will be better after the experiments are shipped to
all users */
background: #b7071b;
border: 0;
box-shadow: none;
text-shadow: none; }
.Button.opaqueGrayButton.white, .Button.opaqueGrayButton.white:active {
background-color: white; }
.Button.opaqueGrayButton.white:hover {
background-color: rgba(0, 0, 0, 0.1); }
.Button.storyTitle {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: none;
border-style: none;
color: #555;
font-size: 48px;
font-weight: bold;
letter-spacing: -2.2px;
margin-top: 4px; }
.Button.storyTitle:active {
background: none;
box-shadow: none; }
.Button .hasText em {
margin-right: 6px; }
.Button.website em {
width: 18px;
height: 17px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -100px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.website em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -370px -112px;
background-size: 399px 382px; } }
.Button.website:hover em,
.Button.website:focus em {
width: 18px;
height: 17px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -138px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.website:hover em,
.Button.website:focus em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -370px -76px;
background-size: 399px 382px; } }
.Button.website:active em {
width: 18px;
height: 17px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -119px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.website:active em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -370px -94px;
background-size: 399px 382px; } }
.Button.crop em {
width: 17px;
height: 17px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -171px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.crop em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -138px -201px;
background-size: 249px 231px; } }
.Button.buy em {
margin-top: -2px;
width: 18px;
height: 17px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -130px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.buy em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -100px -201px;
background-size: 249px 231px; } }
.Button.buy:hover em {
width: 18px;
height: 17px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -111px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.buy:hover em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -119px -201px;
background-size: 249px 231px; } }
.Button.buy:active em {
width: 18px;
height: 17px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -92px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.buy:active em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -188px -60px;
background-size: 249px 231px; } }
.Button.moreInfo {
max-width: 250px;
width: auto; }
.Button.moreInfo em {
width: 14px;
height: 14px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -263px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.moreInfo em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -207px -201px;
background-size: 249px 231px; } }
.Button.addPinButton span {
color: #333;
font-weight: bold;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.Button.addPinButton em {
display: block;
margin: 0 auto; }
.Button.addPinButton.addPinUpload em {
width: 72px;
height: 77px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) 0 -97px no-repeat;
margin-bottom: 43px; }
.Button.addPinButton.addPinURL em {
width: 84px;
height: 84px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -129px 0 no-repeat;
margin-bottom: 36px; }
.Button.xlarge {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
font-size: 14px;
margin-bottom: 4px;
padding-bottom: 11px;
padding-top: 12px; }
.Button.unAuthLogin {
color: #333;
margin-left: 5px;
white-space: normal; }
.Button.loginText {
background: none;
border: 0;
color: #000;
font-weight: bold;
margin-bottom: 2px;
padding: 0; }
.Button.annotationButton .buttonText {
color: #454545;
font-size: 14px;
font-weight: bold; }
.Button.annotationButton:hover .buttonText {
color: #666; }
.Button.annotationButton.active .buttonText {
color: #878787; }
.Button.unauthNagButton, .Button.appInstallButton {
font-size: 14px;
padding: 6px 12px 7px; }
.Button.medium {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-shadow: 1px -1px 1px rgba(255, 255, 255, 0.98) inset, -1px 0 1px rgba(255, 255, 255, 0.98) inset;
font-size: 14px;
height: 36px;
padding-bottom: 7px;
padding-top: 8px; }
.Button.rightRounded {
border-radius: 0 6px 6px 0; }
.Button.leftRounded {
border-radius: 6px 0 0 6px; }
.Button.repin em {
width: 10px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -18px no-repeat;
margin: 0;
position: relative;
top: 0; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.repin em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -402px -190px;
background-size: 428px 427px; } }
.Button.repin:active em {
width: 10px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -18px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.repin:active em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -402px -190px;
background-size: 428px 427px; } }
.ja .Button.repin {
height: 36px; }
.ja .Button.repin em,
.ja .Button.repin:active em {
width: 10px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -18px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ja .Button.repin em,
.ja .Button.repin:active em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -402px -190px;
background-size: 428px 427px; } }
.Button.repinSmall {
height: 33px;
padding-top: 7px; }
.Button.repinSmall em {
width: 10px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -18px no-repeat;
position: relative;
top: 0; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.repinSmall em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -402px -190px;
background-size: 428px 427px; } }
.Button.repinSmall.repinSmall.matchDenzel em {
/* hack to make react save button match denzel */
margin-right: 4px; }
.Button.gear em {
width: 28px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -334px -248px no-repeat; }
.Button.embed em {
width: 17px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -70px -442px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.embed em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -208px -375px;
background-size: 428px 427px; } }
.Button.pinEdit em {
width: 15px;
height: 15px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -349px -418px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.pinEdit em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -402px -141px;
background-size: 428px 427px; } }
.Button.editPin {
margin-left: 5px;
padding: 7px 8px 7px 9px; }
.Button.editPin em {
width: 15px;
height: 15px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -255px -325px no-repeat; }
.Button.editPin:hover {
color: #191919; }
.Button.editPin.isBrioFlat {
margin: 0;
padding: 9px 10px; }
.Button.editPin.isBrioFlat em {
width: 16px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -291px no-repeat;
top: -1px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.editPin.isBrioFlat em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -370px -257px;
background-size: 399px 382px; } }
.Button.pinAnalyticsButton:hover {
color: #191919; }
.Button.pinAnalyticsButton.isBrioFlat {
padding: 9px 10px; }
.Button.editProfile em {
width: 15px;
height: 15px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -349px -418px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.editProfile em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -402px -141px;
background-size: 428px 427px; } }
.Button.languageButton {
padding-right: 40px; }
.Button.languageButton::before, .Button.languageButton::after {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
content: "";
height: 0;
margin-left: -4px;
position: absolute;
right: 0;
width: 0; }
.Button.languageButton::before {
border-top: 4px solid #5f5f5f;
top: 18px; }
.Button.languageButton::after {
border-bottom: 4px solid #5f5f5f;
top: 10px; }
.Button.export {
padding: 6px 2px; }
.Button.export .buttonText {
margin-left: -7px; }
.Button.export em {
width: 8px;
height: 8px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -42px -373px no-repeat;
float: right;
margin-right: 7px;
margin-top: 5px; }
.Button.pinFlag em {
width: 12px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -137px no-repeat; }
.Button.share em {
width: 17px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -377px -342px no-repeat;
position: relative;
top: -1px; }
.Button.flagBase {
display: inline-block; }
.Button > .downArrow {
width: 7px;
height: 6px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -315px -97px no-repeat;
display: inline-block;
float: right;
margin-left: 10px;
margin-top: 5px; }
.Button.unAuthemailSignup {
color: #333;
white-space: normal; }
.Button.unAuthemailSignup em {
width: 42px;
height: 42px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -215px -44px no-repeat;
border-right: 1px solid #ccc;
box-shadow: -1px 0 0 #fff inset;
height: 100%;
left: 1px;
width: 40px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.unAuthemailSignup em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: 0 -96px;
background-size: 249px 231px; } }
.Button.email em {
width: 16px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -89px -442px no-repeat;
top: -2px; }
.Button.facebook em {
width: 16px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -313px -418px no-repeat;
left: -1px;
top: -1px; }
.Button.facebookShare em {
width: 17px;
height: 17px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -320px -342px no-repeat;
left: -1px;
top: -1px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.facebookShare em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -265px -234px;
background-size: 428px 427px; } }
.Button.facebookConnect, .Button.emailSignup {
font-size: 17px;
font-weight: 500;
padding: 0 14px 0 0; }
.Button.facebookConnect em, .Button.emailSignup em {
margin-right: 15px; }
.Button.moreItems {
text-align: center; }
.Button.closeIcon {
float: right;
height: 14px;
width: 14px; }
.Button.closeIcon em {
width: 12px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -261px -242px no-repeat; }
.Button.closeModal, .Button.closeDialog {
margin: -6px;
padding: 6px;
position: absolute;
right: 18px;
top: 22px; }
@media (max-width: 475px) {
.Button.closeModal, .Button.closeDialog {
top: 12px; } }
.Button.closeModal em, .Button.closeDialog em {
width: 12px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -261px -242px no-repeat; }
.Button.closeModal.closeOnMask {
margin: 24px 24px 0 0;
position: fixed;
right: 22px;
top: 9px; }
.Button.closeModal.closeOnMask em {
background: url(https://s.pinimg.com/webapp/style/images/modal_cancel-1x-04ae52d3.png) no-repeat;
background-size: contain;
height: 16px;
width: 16px; }
.Button.closeModal.closeOnMask.variantPickerModal {
top: 0; }
.Button.closeModal.closeOnMask.variantPickerModal em {
width: 16px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -309px no-repeat; }
.Button.close {
background-color: whitesmoke;
background: -webkit-linear-gradient(#fff, #ebebeb);
background: linear-gradient(#fff, #ebebeb);
border-radius: 0 0 6px 6px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.34), 1px 0 0 rgba(255, 255, 255, 0.9) inset;
cursor: pointer;
display: block;
height: 44px;
right: 14px;
-webkit-transform: translateY(-60px);
transform: translateY(-60px);
-webkit-transition-delay: .3s;
transition-delay: .3s;
-webkit-transition-duration: .35s;
transition-duration: .35s;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform; }
.Button.close.visible {
-webkit-transform: translateY(0);
transform: translateY(0); }
.Button.close em {
width: 16px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -309px no-repeat;
margin: 10px; }
.Button.close:hover {
background-color: #c11d24;
background: -webkit-linear-gradient(#d62229, #ab171e);
background: linear-gradient(#d62229, #ab171e);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.74);
-webkit-transition-delay: 0;
transition-delay: 0;
-webkit-transition-duration: 0;
transition-duration: 0; }
.Button.close:hover em {
width: 16px;
height: 17px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -236px no-repeat;
position: relative;
top: -1px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.close:hover em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -370px -187px;
background-size: 399px 382px; } }
.Button.close .buttonText {
display: block;
height: 20px;
line-height: 6px; }
.Button.pinCreateClose em, .Button.twoPaneClose em {
width: 12px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -107px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.pinCreateClose em, .Button.twoPaneClose em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -321px -271px;
background-size: 399px 382px; } }
.Button.pinCreateClose:hover em, .Button.twoPaneClose:hover em {
width: 12px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -65px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.pinCreateClose:hover em, .Button.twoPaneClose:hover em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -357px -269px;
background-size: 399px 382px; } }
.Button.nuxPickerInterestButton {
font-size: 13px;
min-width: 122px; }
.Button.pinActionBarButton {
overflow: hidden;
float: left;
height: 34px;
margin-right: 6px; }
.Button.pinActionBarButton.webResult {
height: 35px; }
.Button.pinActionBarButton.webResult em {
width: 16px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -228px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.pinActionBarButton.webResult em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -190px -201px;
background-size: 249px 231px; } }
.Button.pinActionBarButton.showMoreButton {
background-color: #fff;
margin-right: 0;
padding: 9px 10px; }
.Button.pinActionBarButton.showMoreButton em {
width: 20px;
height: 6px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -153px -100px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.pinActionBarButton.showMoreButton em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -237px -224px;
background-size: 399px 382px; } }
.Button.pinActionBarButton.showMoreButton:active, .Button.pinActionBarButton.showMoreButton:focus, .Button.pinActionBarButton.showMoreButton:hover {
background-color: #fff;
border: 0; }
.Button.dark:active, .Button.dark.active {
background-color: #fbfbfb;
background-color: rgba(251, 251, 251, 0.29);
background: -webkit-linear-gradient(rgba(240, 240, 240, 0.07), rgba(255, 255, 255, 0.51));
background: linear-gradient(rgba(240, 240, 240, 0.07), rgba(255, 255, 255, 0.51));
border-color: #939393 #a2a2a2 #acacac;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13) inset; }
.Button.large {
font-size: 15px;
padding: 10px 18px; }
.Button.btn.shopBag {
background-color: #fafafa;
background: -webkit-linear-gradient(#fff, #f5f5f5);
background: linear-gradient(#fff, #f5f5f5);
border-color: #d4d4d4;
border-radius: 0;
border-right: 0;
padding: 2px 0 0;
position: relative;
z-index: 104; }
.Button.btn.shopBag .buttonBadge {
color: #fff;
left: 0;
margin: 0;
position: absolute;
right: 0;
text-shadow: none; }
.Button.btn.shopBag.user.tutorialHighlight {
height: 34px !important;
padding: 0; }
.Button.btn.shopBag.user:focus, .Button.btn.shopBag.user:hover {
background: -webkit-linear-gradient(#fff, #eee);
background: linear-gradient(#fff, #eee);
border-color: #c0c0c0;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07);
z-index: 105; }
.Button.btn.shopBag.user:active, .Button.btn.shopBag.user.active {
background: #e9e9e9;
border-color: #cfcfcf;
box-shadow: none; }
.Button.btn.shopBag.user.emptyBag em {
width: 18px;
height: 22px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -282px -186px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.btn.shopBag.user.emptyBag em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -278px -183px;
background-size: 399px 382px; } }
.Button.btn.shopBag.user em {
width: 18px;
height: 22px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -220px -124px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.btn.shopBag.user em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -217px -122px;
background-size: 399px 382px; } }
.Button.btn.shopBag.user .buttonBadge {
top: 11px; }
.Button.btn.shopBag.partner em {
background: #0084ff;
border-radius: 50%;
height: 28px;
width: 28px; }
.Button.btn.shopBag.partner .buttonBadge {
font-size: 16px;
top: 4px; }
.Button.flat.hasText {
background: #fff;
border-color: #c7c7c7;
color: #333;
font-size: 14px;
line-height: 16px;
outline: 0;
padding: 7px 10px; }
.Button.flat.hasText.borderless {
border: 0;
color: #5f5f5f;
font-size: 12px; }
.Button.flat.hasText.primary.rounded {
background: #bd081c;
border-color: #bd081c;
color: #fff; }
.Button.flat.hasText.primary.rounded:hover {
background: #b0071a;
background-image: none;
border: 1px solid #b0071a;
box-shadow: none;
text-shadow: none; }
.Button.flat.hasText.primary.rounded:active {
background: #930616;
border: 1px solid #930616;
box-shadow: none;
text-shadow: none; }
.Button.flat.hasText.rounded {
border-radius: 4px;
box-shadow: none; }
.Button.flat.hasText:hover, .Button.flat.hasText.active:hover {
background: #eee;
text-shadow: none; }
.Button.flat.hasText:active, .Button.flat.hasText.active {
background: #c7c7c7;
border: 1px solid #c7c7c7;
box-shadow: none;
text-shadow: none; }
.Button.flat.hasText.active {
background: #fff; }
.Button.flat.hasText:disabled, .Button.flat.hasText:disabled:hover {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #fff !important;
border: 1px solid #e7e7e7;
color: #d7d7d7; }
.Button.flat.hasText:disabled em, .Button.flat.hasText:disabled:hover em {
opacity: .22; }
.Button.flat.hasText.messageDraft {
padding: 12px;
width: 100%; }
.Button.flat.hasText.messageDraft .buttonText {
font-size: 14px;
line-height: 16px; }
.Button.basicRed, .Button.basicGray, .Button.basicLightGray {
border: 0;
border-radius: 5px !important;
color: #fff;
font-size: 18px;
height: 45px;
margin: 0 auto;
padding: 0 30px;
text-shadow: none; }
.Button.basicRed.small, .Button.basicGray.small, .Button.basicLightGray.small {
font-size: 15px;
height: 35px;
padding: 0 15px; }
.Button.basicRed {
background: #bc232c; }
.Button.basicRed:hover {
background: #7f0513; }
.Button.basicGray {
background: #aaa;
font-size: 14px !important; }
.Button.basicLightGray {
background: #efefef;
padding: 0 24px; }
.Button.basicLightGray .buttonText {
color: #555 !important; }
.Button.unauthBrioRedBorder {
background: #fff;
border: 1px solid #bd081c;
border-radius: 4px !important;
padding: 7px 20px; }
.Button.unauthBrioRedBorder .buttonText {
font-size: 14px; }
.Button.datePickerButton.flat.hasText {
font-size: 13px; }
.Button.reportPinButton {
display: none; }
.Button.notificationActionButton {
display: inline-block;
text-align: center; }
.Button.sterlingNuxPrimary {
width: 98px; }
.Button.toolTipCancelButton {
background-color: #4dd3f5;
background-image: none;
border: 3px solid #fff;
color: #fff;
font-size: 14px;
font-weight: normal;
height: 40px;
text-shadow: none;
width: 125px; }
.Button.toolTipCancelButton:hover {
border-color: #fff; }
.Button.toolTipActionButton {
background-color: #fff;
background-image: none;
border: 1px solid #fff;
color: #4dd3f5;
font-size: 14px;
font-weight: normal;
height: 40px;
text-shadow: none;
width: 125px; }
.Button.toolTipActionButton:hover {
border-color: #fff; }
.Button.fullWidth {
width: 100%; }
.Button.unauthSignup {
display: block;
text-align: center; }
.Button.btn.brio {
border-radius: 8px;
padding-left: 20px;
padding-right: 20px; }
.Button.btn.brio.primary {
background: #bd081c;
border: 0; }
.Button.btn.brio.primary:hover, .Button.btn.brio.primaryOnHover:hover:not(.noHoverActive):hover, .Button.btn.brio:focus, .Button.btn.brio:active, .Button.btn.brio.active, .Button.btn.brio:not(.noHoverActive):active, .Button.btn.brio:not(.noHoverActive):focus {
background: #d50c22;
border: 0; }
.Button.btn.brio.flat {
font-size: 14px;
height: 35px;
margin-top: 0; }
.Button.btn.brio.flat:hover, .Button.btn.brio.flat.dim:hover {
background: #bd081c;
border: 1px solid #bd081c; }
.Button.btn.brio.flat:hover .buttonText, .Button.btn.brio.flat.dim:hover .buttonText {
color: #fff; }
.Button.btn.brio.flat:active, .Button.btn.brio.flat:focus, .Button.btn.brio.flat.dim:active, .Button.btn.brio.flat.dim:focus {
background: #970616;
border: 1px solid #970616; }
.Button.btn.brio.flat.dim {
border: 1px solid #b5b5b5; }
.Button.btn.brio.flat.dim .buttonText {
color: #b5b5b5; }
.Button.inlineHover {
background: none;
border: 0;
padding: 0; }
.Button.createConversationTab {
color: #5f5f5f;
font-weight: bold;
height: 36px;
vertical-align: middle;
width: 100%; }
.Button.createConversationTab:focus, .Button.createConversationTab:hover {
background-color: #f1f1f1 !important;
color: #333; }
.Button.createConversationTab:active {
color: #bd081c; }
.Button.exportModalQuickSelectButton {
border: none;
font-weight: normal; }
.Button.exportModalQuickSelectButton.flat {
font-size: 16px; }
.Button.exportModalQuickSelectButton.flat:hover, .Button.exportModalQuickSelectButton.flat:active {
background-color: #fff;
border: none;
font-weight: bold; }
.Button.exportModalAttributionWindowDropdown {
border: none; }
.Button.exportModalAttributionWindowDropdown.flat.hasText {
background: #efefef;
border: none;
color: #555;
font-size: 16px; }
.Button.exportModalAttributionWindowDropdown.flat.hasText:hover, .Button.exportModalAttributionWindowDropdown.flat.hasText:active {
background: #efefef; }
.Button.exportModalAttributionWindowDropdown.flat.hasText .active {
border: none; }
.Button.cancelNewMessageView .buttonText {
color: rgba(0, 0, 0, 0.3);
font-size: 14px;
font-weight: bold; }
.Button.sendNewMessageButton .buttonText {
color: #bd081c;
font-size: 14px;
font-weight: bold; }
a.Button {
box-sizing: border-box; }
/* desktop.scss */
/* stylelint-disable at-rule-no-unknown */
.Button.btn.addToMap {
color: #666;
padding-left: 12px;
padding-right: 12px; }
.Button.btn.bulkEditCheckbox {
background: none;
position: absolute;
right: 16px;
top: 16px;
z-index: 101; }
.Button.btn.bulkEditCheckbox em {
width: 31px;
height: 31px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -72px -176px no-repeat;
opacity: .9; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.btn.bulkEditCheckbox em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -68px -139px;
background-size: 249px 231px; } }
.Button.btn.bulkEditCheckbox.selected em {
width: 31px;
height: 31px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -105px -176px no-repeat;
opacity: 1; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.btn.bulkEditCheckbox.selected em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -100px -139px;
background-size: 249px 231px; } }
.Button.btn.bulkEditCheckbox.rounded {
border: 0;
border-radius: 6px;
padding: 0; }
.Button.followerCount em {
display: none; }
.Button.followerCount .buttonText {
line-height: 14px; }
.Button.faded {
background-color: #e0dfde;
background: -webkit-linear-gradient(#e5e4e3, #dad9d9);
background: linear-gradient(#e5e4e3, #dad9d9);
border-color: #b7b7b7;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36);
color: #999;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); }
.Button.faded:hover {
background-color: #e7e6e6;
background: -webkit-linear-gradient(#ececeb, #e2e1e1);
background: linear-gradient(#ececeb, #e2e1e1);
border-color: #b7b7b7; }
.Button.userSelect {
text-align: center; }
.Button.toastButton, .Button.toastButton:focus {
background-color: #0f0f0f;
background-image: -webkit-linear-gradient(#0f0f0f, #000);
background-image: linear-gradient(#0f0f0f, #000);
border-color: #000;
border-radius: 5px;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.13) inset;
color: #fff;
padding: 4px 6px; }
.Button.toastButton:hover, .Button.toastButton:focus:hover {
background-color: ligthen(#0f0f0f, 2%);
background-image: -webkit-linear-gradient(#141414, #050505);
background-image: linear-gradient(#141414, #050505);
border-color: #000;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.2) inset; }
.Button.toastButton:active, .Button.toastButton:focus:active {
background-color: #0a0a0a;
background-image: -webkit-linear-gradient(#0a0a0a, #000);
background-image: linear-gradient(#0a0a0a, #000);
box-shadow: 0 0 2px rgba(255, 255, 255, 0.1) inset; }
.Button.toastButton span, .Button.toastButton:focus span {
font-size: 13px;
text-shadow: none; }
.Button.conversationHeadClose {
background-color: #efefef !important;
border-radius: 10px !important;
height: 20px !important;
width: 20px !important; }
.Button.conversationHeadClose em {
width: 8px;
height: 8px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -363px -226px no-repeat;
top: -1px !important; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.conversationHeadClose em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -389px -101px;
background-size: 399px 382px; } }
.Button.conversationClose em {
width: 13px;
height: 13px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -301px no-repeat;
height: 14px;
width: 14px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.conversationClose em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -26px -400px;
background-size: 428px 427px; } }
.Button.createConversationTab em {
width: 18px;
height: 18px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -178px -418px no-repeat;
margin-right: 5px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.createConversationTab em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -318px -303px;
background-size: 428px 427px; } }
.Button.createConversationTab:hover em {
width: 18px;
height: 18px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -198px -418px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.createConversationTab:hover em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -280px -303px;
background-size: 428px 427px; } }
.Button.createConversationTab:active em, .Button.createConversationTab.active em {
width: 18px;
height: 18px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -218px -418px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.createConversationTab:active em, .Button.createConversationTab.active em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -299px -303px;
background-size: 428px 427px; } }
.Button.contactRequestView {
color: #555;
font-size: 14px;
font-weight: bold;
letter-spacing: -.4px;
line-height: 1; }
.Button.contactRequestView em {
width: 10px;
height: 15px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -316px no-repeat;
float: left; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.contactRequestView em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -418px 0;
background-size: 428px 427px; } }
.Button.reportMsgButton em {
width: 10px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -120px -442px no-repeat;
margin-right: 10px;
opacity: 0; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.reportMsgButton em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -418px -16px;
background-size: 428px 427px; } }
.Button.footerIcon {
border-radius: 50%;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.04); }
.Button.footerIcon.borderless {
background-color: #fff;
padding: 8px; }
.Button.footerIcon.rounded {
border-radius: 50%; }
.Button.footerIcon:hover {
background-color: #f5f5f5; }
.Button.footerIcon:active, .Button.footerIcon.active {
background-color: #e9e9e9; }
.Button.footerIcon.moreFooter.triggerActive {
background-color: #24cefd; }
.Button.addPinFooter {
padding: 12.5px !important; }
.Button.addPinFooter em {
width: 14px;
height: 14px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -16px -375px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.addPinFooter em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: 0 -368px;
background-size: 399px 382px; } }
.Button.addPinFooter:not(.disabled):hover em {
width: 14px;
height: 14px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -16px -375px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.addPinFooter:not(.disabled):hover em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: 0 -368px;
background-size: 399px 382px; } }
.Button.moreFooter {
padding: 12.5px !important; }
.Button.moreFooter em {
width: 10px;
height: 15px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -20px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.moreFooter em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -357px -253px;
background-size: 399px 382px; } }
.Button.moreFooter:not(.disabled):hover em {
width: 10px;
height: 15px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -20px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.moreFooter:not(.disabled):hover em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -357px -253px;
background-size: 399px 382px; } }
.Button.moreFooter.triggerActive em {
width: 10px;
height: 15px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -20px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.moreFooter.triggerActive em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -357px -253px;
background-size: 399px 382px; } }
.Button.adminFooter em {
width: 23px;
height: 24px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -201px -260px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.adminFooter em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -220px -256px;
background-size: 399px 382px; } }
.Button.adminFooter.inAdmin em {
width: 23px;
height: 24px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -276px -260px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.adminFooter.inAdmin em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -268px -256px;
background-size: 399px 382px; } }
.Button.userProfileMenu {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07);
padding: 7px 8px;
position: absolute;
right: 15px;
top: 15px; }
.Button.userProfileMenu.rounded {
border-radius: 6px; }
.Button.userProfileMenu em {
width: 28px;
height: 17px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -124px -152px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.userProfileMenu em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -198px -292px;
background-size: 399px 382px; } }
.Button.userProfileMenu.other em {
width: 28px;
height: 17px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -124px -152px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.userProfileMenu.other em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -198px -292px;
background-size: 399px 382px; } }
.Button.userProfileMenu:focus, .Button.userProfileMenu:hover {
background: -webkit-linear-gradient(#fff, #f0f0f0);
background: linear-gradient(#fff, #f0f0f0);
border-color: #acacac;
border-radius: 6px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
.Button.userProfileMenu:focus em, .Button.userProfileMenu:hover em {
width: 28px;
height: 17px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -207px -296px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.userProfileMenu:focus em, .Button.userProfileMenu:hover em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -122px -150px;
background-size: 399px 382px; } }
.Button.userProfileMenu:focus.other em, .Button.userProfileMenu:hover.other em {
width: 28px;
height: 17px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -207px -296px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.userProfileMenu:focus.other em, .Button.userProfileMenu:hover.other em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -122px -150px;
background-size: 399px 382px; } }
.Button.userProfileMenu:active, .Button.userProfileMenu.active {
background: #e9e9e9;
border-color: #cfcfcf;
border-radius: 6px;
box-shadow: none; }
.Button.userProfileMenu:active em, .Button.userProfileMenu.active em {
width: 28px;
height: 17px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -207px -296px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.userProfileMenu:active em, .Button.userProfileMenu.active em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -122px -150px;
background-size: 399px 382px; } }
.Button.userProfileMenu:active.other em, .Button.userProfileMenu.active.other em {
width: 28px;
height: 17px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -207px -296px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.userProfileMenu:active.other em, .Button.userProfileMenu.active.other em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -122px -150px;
background-size: 399px 382px; } }
.Button.boardSettingsButton em {
width: 19px;
height: 5px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -207px -315px no-repeat;
height: 6px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.boardSettingsButton em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -258px -224px;
background-size: 399px 382px; } }
.Button.pinMarker {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.Button.pinMarker em {
width: 23px;
height: 30px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -442px -372px no-repeat;
display: inline-block; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.pinMarker em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -349px -342px;
background-size: 428px 427px; } }
.Button.pinMarker:hover em, .Button.pinMarker:active em, .Button.pinMarker.highlighted em {
width: 23px;
height: 30px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -223px -174px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.pinMarker:hover em, .Button.pinMarker:active em, .Button.pinMarker.highlighted em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -378px 0;
background-size: 428px 427px; } }
.Button.createGroup em {
width: 20px;
height: 17px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -257px -342px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.createGroup em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -223px -234px;
background-size: 428px 427px; } }
.Button.createGroup.selected em {
width: 20px;
height: 17px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -279px -342px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.createGroup.selected em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -244px -234px;
background-size: 428px 427px; } }
.Button.notifSettingsButton em {
width: 17px;
height: 18px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -258px -418px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.notifSettingsButton em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -34px -375px;
background-size: 428px 427px; } }
.Button.createConversation {
height: 19px;
margin-bottom: 5px; }
.Button.createConversation .Spinner {
display: none; }
.Button.createConversation.loading .Spinner {
display: block;
left: -9px;
top: -4px; }
.Button.createConversation.loading em {
display: none; }
.Button.createConversation em {
width: 18px;
height: 19px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -237px -342px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.createConversation em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -320px -229px;
background-size: 428px 427px; } }
.Button.createGroupClose em {
width: 13px;
height: 13px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -301px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.createGroupClose em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -26px -400px;
background-size: 428px 427px; } }
.Button.userSelectMessage {
padding-left: 11px;
padding-right: 11px; }
.Button.userSelectMessage em {
width: 14px;
height: 13px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -186px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.userSelectMessage em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -402px -302px;
background-size: 428px 427px; } }
.Button.userSelectMessage:hover em {
width: 14px;
height: 13px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -155px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.userSelectMessage:hover em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -402px -316px;
background-size: 428px 427px; } }
.Button.addPlace em {
width: 15px;
height: 15px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -434px -418px no-repeat;
margin-right: 5px;
margin-top: -6px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.addPlace em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -402px -125px;
background-size: 428px 427px; } }
.Button.addPlace span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow: hidden;
color: #999;
display: inline-block;
font-size: 13px;
max-width: 525px;
position: relative; }
.Button.addAPlace, .Button.addPinToMapClose, .Button.toggleView {
background: rgba(255, 255, 255, 0.95);
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.18);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); }
.Button.addAPlace:hover, .Button.addPinToMapClose:hover, .Button.toggleView:hover {
background-color: #f2f2f1;
background: -webkit-linear-gradient(#f2f2f1, #f1f1f0);
background: linear-gradient(#f2f2f1, #f1f1f0); }
.Button.addAPlace:active, .Button.addPinToMapClose:active, .Button.toggleView:active {
background-color: #f0f0ef;
background: -webkit-linear-gradient(#eee, #f1f1f0);
background: linear-gradient(#eee, #f1f1f0); }
.Button.addAPlace span, .Button.addPinToMapClose span {
color: #777;
font-size: 13px;
position: relative;
top: 1px; }
.Button.addAPlace:hover span, .Button.addAPlace:active span, .Button.addPinToMapClose:hover span, .Button.addPinToMapClose:active span {
color: #333; }
.Button.addAPlace {
padding: 8px 14px 7px; }
.Button.addAPlace em {
width: 15px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -442px no-repeat;
margin-right: 4px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.addAPlace em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -402px 0;
background-size: 428px 427px; } }
.Button.addAPlace:hover em {
width: 15px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -17px -442px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.addAPlace:hover em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -402px -21px;
background-size: 428px 427px; } }
.Button.addPinToMapClose {
padding: 9px 11px 10px; }
.Button.addPinToMapClose span {
margin-right: 5px;
top: 0; }
.Button.addPinToMapClose em {
width: 11px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -461px -404px no-repeat;
margin: 0 6px 2px 4px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.addPinToMapClose em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -24px -416px;
background-size: 428px 427px; } }
.Button.toggleView {
padding: 8px 10px; }
.Button.toggleView em {
width: 15px;
height: 15px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -366px -418px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.toggleView em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -402px -77px;
background-size: 428px 427px; } }
.Button.toggleView:hover em {
width: 15px;
height: 15px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -383px -418px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.toggleView:hover em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -402px -109px;
background-size: 428px 427px; } }
.Button.userSelectConnect {
background: #fff;
padding: 10px 14px;
width: 100%; }
.Button.userSelectConnect:hover {
background: #e5e5e5; }
.Button.userSelectConnect:active {
background: #ddd; }
.Button.userSelectConnect em {
float: left;
height: 38px;
margin-right: 12px;
width: 38px; }
.Button.userSelectConnect span {
float: left;
font-size: 13px;
font-weight: 500;
margin-top: 11px; }
.Button.userSelectEmailConnect em {
width: 38px;
height: 38px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -365px -209px no-repeat;
overflow: hidden;
border-radius: 2px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.userSelectEmailConnect em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -299px -258px;
background-size: 428px 427px; } }
.Button.userSelectFacebookConnect em {
width: 40px;
height: 40px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -342px no-repeat; }
.Button.userSelectGmailConnect em {
width: 38px;
height: 38px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -365px -89px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.userSelectGmailConnect em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -252px -162px;
background-size: 428px 427px; } }
.Button.userSelectYahooConnect em {
width: 38px;
height: 38px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -365px -49px no-repeat; }
.Button.userSelectGplusConnect em {
width: 38px;
height: 38px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -365px -129px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.userSelectGplusConnect em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -252px -123px;
background-size: 428px 427px; } }
.Button.categories {
height: 30px;
padding: 3px 0 0;
width: 36px; }
.Button.categories em {
width: 16px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -295px -418px no-repeat;
left: 9px;
top: 2px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.categories em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -106px -375px;
background-size: 428px 427px; } }
.Button.categories:hover em,
.Button.categories.active em,
.Button.categories.primary em {
width: 16px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -277px -418px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.categories:hover em,
.Button.categories.active em,
.Button.categories.primary em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -123px -375px;
background-size: 428px 427px; } }
.Button.showMoreCategories em {
width: 7px;
height: 6px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -315px -97px no-repeat; }
.expand .Button.showLessCategories em {
width: 7px;
height: 6px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -396px -342px no-repeat; }
.Button.unauthHomePageDismissButton {
display: none; }
.inModal .Button.unauthHomePageDismissButton {
border-bottom: 1px dotted #333;
color: #333;
display: inline;
font-weight: bold;
margin: 20px;
margin-right: 25px;
position: absolute;
right: 0;
z-index: 683; }
.inModal .Button.unauthHomePageDismissButton:hover {
border-bottom: 0; }
.Button.interest {
padding: 4px 0 4px 6px; }
.Button.interest em {
width: 20px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -24px -418px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.interest em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -378px -174px;
background-size: 428px 427px; } }
.Button.interest:hover em, .Button.interest.active em {
width: 20px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -90px -418px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.interest:hover em, .Button.interest.active em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -378px -321px;
background-size: 428px 427px; } }
.Button .addButtonWrapper {
visibility: hidden; }
.Button.interestFollow.btn {
margin: 11px 0 18px;
padding: 8px 18px 7px; }
.Button.removePlaceButton {
color: #999; }
.Button.removePlaceButton:hover {
color: #bd081c; }
.Button.page {
font-size: 12px;
margin-right: -1px;
padding: 7px 0;
width: 35px; }
.Button.page.current {
background-color: #6d6d6d;
background: -webkit-linear-gradient(#7f7f7f, #5a5a5a);
background: linear-gradient(#7f7f7f, #5a5a5a);
border-color: #404040;
color: #fff;
position: relative;
text-shadow: none;
z-index: 1; }
.Button.page:first-child {
border-bottom-left-radius: 6px;
border-top-left-radius: 6px; }
.Button.page:last-child {
/** Last child doesn't work for ie8 and less, but
neither is border radius. */
border-bottom-right-radius: 6px;
border-top-right-radius: 6px; }
.Button.page.prev em,
.Button.page.next em {
margin-top: -1px; }
.Button.page.prev em {
width: 6px;
height: 8px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -315px -77px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.page.prev em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -45px -222px;
background-size: 249px 231px; } }
.Button.page.next em {
width: 6px;
height: 8px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -315px -87px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.page.next em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -59px -222px;
background-size: 249px 231px; } }
.Button.nagActionButton {
font-size: 12px;
position: absolute;
right: 8px;
top: 8px; }
.Button.appUpsellButton em {
width: 14px;
height: 24px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -349px -138px no-repeat;
margin-right: 14px;
position: relative; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.appUpsellButton em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: 0 -375px;
background-size: 428px 427px; } }
.Button.menuItem .buttonText {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start; }
.Button.item .buttonText {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start; }
.Button.mainSiteNavMenu {
color: #818181;
font-size: 16px; }
.Button.mainSiteNavMenu.onCampbellSiteMenu {
color: #333; }
.Button.mainSiteNavMenu:hover, .Button.mainSiteNavMenu:focus, .Button.mainSiteNavMenu:active, .Button.mainSiteNavMenu.active {
color: #333; }
.Button.flashlightIcon em {
width: 35px;
height: 35px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px 0 no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.flashlightIcon em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -342px 0;
background-size: 428px 427px; } }
.Button.userRegisterButton.flat {
font-size: 16px;
line-height: 19px; }
.Button.contactRequestsCount {
border-radius: 8px;
font-size: 14px;
letter-spacing: -.2px;
line-height: 1.3; }
.Button.homefeedBuilderBackButton em {
width: 17px;
height: 24px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -276px 0 no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.homefeedBuilderBackButton em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -188px -35px;
background-size: 249px 231px; } }
.Button.boardSettingsButton .buttonText, .Modal .formFooter .Button.rounded:not(.primary) .buttonText,
.ReactModal__Content .formFooter .Button.rounded:not(.primary) .buttonText, .news .pending .actions .Button.remove .buttonText, .boardEdit .Button .buttonText, .Button.userFollowingGridButton .buttonText, .InviteButtonEmail .Button.btn .buttonText, .Button.moreItems .buttonText, .formFooterButton.cancelButton .buttonText, .Button.CardFollow.GrayButton .buttonText, .Button.FollowButton .buttonText, .Button.UserFollowButton .buttonText, .Button.InterestFollowButton .buttonText, .Modal .formFooter .Button.primary .buttonText,
.ReactModal__Content .formFooter .Button.primary .buttonText, .news .pending .actions .Button.primary .buttonText, .panelFooter .formFooterButtons .cancelButton .buttonText, .Button.searchToFollowButton .buttonText, .formFooterButton.confirmButton .buttonText, .Button.CardFollow.RedButton .buttonText, .Button.promoteYourPin .buttonText, .Button.userProfileMenu:not(.UnblockButton) .buttonText,
.Button.editProfile .buttonText, .Button.groupBoardChat .buttonText, .boardDetail .pending .actions .Button.remove .buttonText, .boardDetail .pending .actions .Button.primary .buttonText, .BoardCollaboratorInviter .BoardInviteForm .inviteButton .buttonText, .boardCollaboratorsWrapper .BoardInviteForm .inviteButton .buttonText {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: bold; }
.Button.boardSettingsButton, .Button.UserFollowButton.followed, .Button.InterestFollowButton.followed, .Modal .formFooter .Button.rounded:not(.primary),
.ReactModal__Content .formFooter .Button.rounded:not(.primary), .news .pending .actions .Button.remove, .boardEdit .Button, .Button.userFollowingGridButton, .InviteButtonEmail .Button.btn, .Button.moreItems, .formFooterButton.cancelButton, .Button.CardFollow.GrayButton, .Button.FollowButton, .Button.UserFollowButton, .Button.InterestFollowButton, .Modal .formFooter .Button.primary,
.ReactModal__Content .formFooter .Button.primary, .news .pending .actions .Button.primary, .panelFooter .formFooterButtons .cancelButton, .Button.searchToFollowButton, .formFooterButton.confirmButton, .Button.CardFollow.RedButton, .Button.promoteYourPin, .Button.userProfileMenu:not(.UnblockButton),
.Button.editProfile, .Button.groupBoardChat, .boardDetail .pending .actions .Button.remove, .boardDetail .pending .actions .Button.primary, .BoardCollaboratorInviter .BoardInviteForm .inviteButton, .boardCollaboratorsWrapper .BoardInviteForm .inviteButton {
background-image: none !important;
border: none !important;
border-radius: 4px !important;
box-shadow: none !important;
padding: 10px 14px !important;
position: relative !important;
text-shadow: none !important; }
.Button.boardSettingsButton, .Button.UserFollowButton.followed, .Button.InterestFollowButton.followed, .Modal .formFooter .Button.rounded:not(.primary),
.ReactModal__Content .formFooter .Button.rounded:not(.primary), .news .pending .actions .Button.remove, .boardEdit .Button, .Button.userFollowingGridButton, .InviteButtonEmail .Button.btn, .Button.moreItems, .formFooterButton.cancelButton, .Button.CardFollow.GrayButton, .Button.FollowButton, .Button.UserFollowButton, .Button.InterestFollowButton, .Modal .formFooter .Button.primary,
.ReactModal__Content .formFooter .Button.primary, .news .pending .actions .Button.primary, .panelFooter .formFooterButtons .cancelButton, .Button.searchToFollowButton, .formFooterButton.confirmButton, .Button.CardFollow.RedButton, .Button.promoteYourPin, .Button.userProfileMenu:not(.UnblockButton),
.Button.editProfile, .Button.groupBoardChat, .boardDetail .pending .actions .Button.remove, .boardDetail .pending .actions .Button.primary, .BoardCollaboratorInviter .BoardInviteForm .inviteButton, .boardCollaboratorsWrapper .BoardInviteForm .inviteButton, .btn.btn.disabled.disabled.Button.boardSettingsButton, .Modal .formFooter .btn.btn.disabled.disabled.Button.rounded:not(.primary),
.ReactModal__Content .formFooter .btn.btn.disabled.disabled.Button.rounded:not(.primary), .news .pending .actions .btn.btn.disabled.disabled.Button.remove, .boardEdit .btn.btn.disabled.disabled.Button, .btn.btn.disabled.disabled.Button.userFollowingGridButton, .InviteButtonEmail .btn.btn.disabled.disabled.Button, .btn.btn.disabled.disabled.Button.moreItems, .btn.btn.disabled.disabled.formFooterButton.cancelButton, .btn.btn.disabled.disabled.Button.CardFollow.GrayButton, .btn.btn.disabled.disabled.Button.FollowButton, .btn.btn.disabled.disabled.Button.UserFollowButton, .btn.btn.disabled.disabled.Button.InterestFollowButton, .Modal .formFooter .btn.btn.disabled.disabled.Button.primary,
.ReactModal__Content .formFooter .btn.btn.disabled.disabled.Button.primary, .news .pending .actions .btn.btn.disabled.disabled.Button.primary, .panelFooter .formFooterButtons .btn.btn.disabled.disabled.cancelButton, .btn.btn.disabled.disabled.Button.searchToFollowButton, .btn.btn.disabled.disabled.formFooterButton.confirmButton, .btn.btn.disabled.disabled.Button.CardFollow.RedButton, .btn.btn.disabled.disabled.Button.promoteYourPin, .btn.btn.disabled.disabled.Button.userProfileMenu:not(.UnblockButton),
.btn.btn.disabled.disabled.Button.editProfile, .btn.btn.disabled.disabled.Button.groupBoardChat, .boardDetail .pending .actions .btn.btn.disabled.disabled.Button.remove, .boardDetail .pending .actions .btn.btn.disabled.disabled.Button.primary, .BoardCollaboratorInviter .BoardInviteForm .btn.btn.disabled.disabled.inviteButton, .boardCollaboratorsWrapper .BoardInviteForm .btn.btn.disabled.disabled.inviteButton {
border: none !important; }
.btn.btn.disabled.disabled.Button.boardSettingsButton .buttonText, .Modal .formFooter .btn.btn.disabled.disabled.Button.rounded:not(.primary) .buttonText,
.ReactModal__Content .formFooter .btn.btn.disabled.disabled.Button.rounded:not(.primary) .buttonText, .news .pending .actions .btn.btn.disabled.disabled.Button.remove .buttonText, .boardEdit .btn.btn.disabled.disabled.Button .buttonText, .btn.btn.disabled.disabled.Button.userFollowingGridButton .buttonText, .InviteButtonEmail .btn.btn.disabled.disabled.Button .buttonText, .btn.btn.disabled.disabled.Button.moreItems .buttonText, .btn.btn.disabled.disabled.formFooterButton.cancelButton .buttonText, .btn.btn.disabled.disabled.Button.CardFollow.GrayButton .buttonText, .btn.btn.disabled.disabled.Button.FollowButton .buttonText, .btn.btn.disabled.disabled.Button.UserFollowButton .buttonText, .btn.btn.disabled.disabled.Button.InterestFollowButton .buttonText, .Modal .formFooter .btn.btn.disabled.disabled.Button.primary .buttonText,
.ReactModal__Content .formFooter .btn.btn.disabled.disabled.Button.primary .buttonText, .news .pending .actions .btn.btn.disabled.disabled.Button.primary .buttonText, .panelFooter .formFooterButtons .btn.btn.disabled.disabled.cancelButton .buttonText, .btn.btn.disabled.disabled.Button.searchToFollowButton .buttonText, .btn.btn.disabled.disabled.formFooterButton.confirmButton .buttonText, .btn.btn.disabled.disabled.Button.CardFollow.RedButton .buttonText, .btn.btn.disabled.disabled.Button.promoteYourPin .buttonText, .btn.btn.disabled.disabled.Button.userProfileMenu:not(.UnblockButton) .buttonText,
.btn.btn.disabled.disabled.Button.editProfile .buttonText, .btn.btn.disabled.disabled.Button.groupBoardChat .buttonText, .boardDetail .pending .actions .btn.btn.disabled.disabled.Button.remove .buttonText, .boardDetail .pending .actions .btn.btn.disabled.disabled.Button.primary .buttonText, .BoardCollaboratorInviter .BoardInviteForm .btn.btn.disabled.disabled.inviteButton .buttonText, .boardCollaboratorsWrapper .BoardInviteForm .btn.btn.disabled.disabled.inviteButton .buttonText {
color: #b5b5b5 !important; }
.Button.boardSettingsButton, .Button.UserFollowButton.followed, .Button.InterestFollowButton.followed, .Modal .formFooter .Button.rounded:not(.primary),
.ReactModal__Content .formFooter .Button.rounded:not(.primary), .news .pending .actions .Button.remove, .boardEdit .Button, .Button.userFollowingGridButton, .InviteButtonEmail .Button.btn, .Button.moreItems, .formFooterButton.cancelButton, .Button.CardFollow.GrayButton {
background-color: #efefef !important; }
.Button.boardSettingsButton .buttonText, .Button.UserFollowButton.followed .buttonText, .Button.InterestFollowButton.followed .buttonText, .Modal .formFooter .Button.rounded:not(.primary) .buttonText,
.ReactModal__Content .formFooter .Button.rounded:not(.primary) .buttonText, .news .pending .actions .Button.remove .buttonText, .boardEdit .Button .buttonText, .Button.userFollowingGridButton .buttonText, .InviteButtonEmail .Button.btn .buttonText, .Button.moreItems .buttonText, .formFooterButton.cancelButton .buttonText, .Button.CardFollow.GrayButton .buttonText {
color: #555 !important; }
.Button.FollowButton, .Button.UserFollowButton, .Button.InterestFollowButton, .Modal .formFooter .Button.primary,
.ReactModal__Content .formFooter .Button.primary, .news .pending .actions .Button.primary, .panelFooter .formFooterButtons .cancelButton, .Button.searchToFollowButton, .formFooterButton.confirmButton, .Button.CardFollow.RedButton, .Button.promoteYourPin {
background-color: #bd081c !important; }
.Button.FollowButton .buttonText, .Button.UserFollowButton .buttonText, .Button.InterestFollowButton .buttonText, .Modal .formFooter .Button.primary .buttonText,
.ReactModal__Content .formFooter .Button.primary .buttonText, .news .pending .actions .Button.primary .buttonText, .panelFooter .formFooterButtons .cancelButton .buttonText, .Button.searchToFollowButton .buttonText, .formFooterButton.confirmButton .buttonText, .Button.CardFollow.RedButton .buttonText, .Button.promoteYourPin .buttonText {
color: #fff !important; }
.Button.userProfileMenu:not(.UnblockButton),
.Button.editProfile, .Button.groupBoardChat {
background: transparent !important; }
.Button.userProfileMenu:not(.UnblockButton) .buttonText,
.Button.editProfile .buttonText, .Button.groupBoardChat .buttonText {
color: #555 !important; }
.Button.boardSettingsButton:not(.disabled):hover, .Button.UserFollowButton.followed:not(.disabled):hover, .Button.InterestFollowButton.followed:not(.disabled):hover, .Modal .formFooter .Button.rounded:not(.disabled):hover:not(.primary),
.ReactModal__Content .formFooter .Button.rounded:not(.disabled):hover:not(.primary), .news .pending .actions .Button.remove:not(.disabled):hover, .boardEdit .Button:not(.disabled):hover, .Button.userFollowingGridButton:not(.disabled):hover, .InviteButtonEmail .Button.btn:not(.disabled):hover, .Button.moreItems:not(.disabled):hover, .formFooterButton.cancelButton:not(.disabled):hover, .Button.CardFollow.GrayButton:not(.disabled):hover, .Button.boardSettingsButton:not(.disabled):active, .Button.UserFollowButton.followed:not(.disabled):active, .Button.InterestFollowButton.followed:not(.disabled):active, .Modal .formFooter .Button.rounded:not(.disabled):active:not(.primary),
.ReactModal__Content .formFooter .Button.rounded:not(.disabled):active:not(.primary), .news .pending .actions .Button.remove:not(.disabled):active, .boardEdit .Button:not(.disabled):active, .Button.userFollowingGridButton:not(.disabled):active, .InviteButtonEmail .Button.btn:not(.disabled):active, .Button.moreItems:not(.disabled):active, .formFooterButton.cancelButton:not(.disabled):active, .Button.CardFollow.GrayButton:not(.disabled):active, .Button.boardSettingsButton:not(.disabled).active, .Button.UserFollowButton.followed:not(.disabled).active, .Button.InterestFollowButton.followed:not(.disabled).active, .Modal .formFooter .Button.rounded:not(.disabled).active:not(.primary),
.ReactModal__Content .formFooter .Button.rounded:not(.disabled).active:not(.primary), .news .pending .actions .Button.remove:not(.disabled).active, .boardEdit .Button:not(.disabled).active, .Button.userFollowingGridButton:not(.disabled).active, .InviteButtonEmail .Button.btn:not(.disabled).active, .Button.moreItems:not(.disabled).active, .formFooterButton.cancelButton:not(.disabled).active, .Button.CardFollow.GrayButton:not(.disabled).active, .Button.FollowButton:not(.disabled):hover, .Button.UserFollowButton:not(.disabled):hover, .Button.InterestFollowButton:not(.disabled):hover, .Modal .formFooter .Button.primary:not(.disabled):hover,
.ReactModal__Content .formFooter .Button.primary:not(.disabled):hover, .news .pending .actions .Button.primary:not(.disabled):hover, .panelFooter .formFooterButtons .cancelButton:not(.disabled):hover, .Button.searchToFollowButton:not(.disabled):hover, .formFooterButton.confirmButton:not(.disabled):hover, .Button.CardFollow.RedButton:not(.disabled):hover, .Button.promoteYourPin:not(.disabled):hover, .Button.FollowButton:not(.disabled):active, .Button.UserFollowButton:not(.disabled):active, .Button.InterestFollowButton:not(.disabled):active, .Modal .formFooter .Button.primary:not(.disabled):active,
.ReactModal__Content .formFooter .Button.primary:not(.disabled):active, .news .pending .actions .Button.primary:not(.disabled):active, .panelFooter .formFooterButtons .cancelButton:not(.disabled):active, .Button.searchToFollowButton:not(.disabled):active, .formFooterButton.confirmButton:not(.disabled):active, .Button.CardFollow.RedButton:not(.disabled):active, .Button.promoteYourPin:not(.disabled):active, .Button.FollowButton:not(.disabled).active, .Button.UserFollowButton:not(.disabled).active, .Button.InterestFollowButton:not(.disabled).active, .Modal .formFooter .Button.primary:not(.disabled).active,
.ReactModal__Content .formFooter .Button.primary:not(.disabled).active, .news .pending .actions .Button.primary:not(.disabled).active, .panelFooter .formFooterButtons .cancelButton:not(.disabled).active, .Button.searchToFollowButton:not(.disabled).active, .formFooterButton.confirmButton:not(.disabled).active, .Button.CardFollow.RedButton:not(.disabled).active, .Button.promoteYourPin:not(.disabled).active, .Button.userProfileMenu:not(.disabled):hover:not(.UnblockButton),
.Button.editProfile:not(.disabled):hover, .Button.groupBoardChat:not(.disabled):hover, .Button.userProfileMenu:not(.disabled):active:not(.UnblockButton),
.Button.editProfile:not(.disabled):active, .Button.groupBoardChat:not(.disabled):active, .Button.userProfileMenu:not(.disabled).active:not(.UnblockButton),
.Button.editProfile:not(.disabled).active, .Button.groupBoardChat:not(.disabled).active {
box-shadow: none !important; }
.Button.boardSettingsButton:not(.disabled):hover::after, .Button.UserFollowButton.followed:not(.disabled):hover::after, .Button.InterestFollowButton.followed:not(.disabled):hover::after, .Modal .formFooter .Button.rounded:not(.primary):not(.disabled):hover::after,
.ReactModal__Content .formFooter .Button.rounded:not(.primary):not(.disabled):hover::after, .news .pending .actions .Button.remove:not(.disabled):hover::after, .boardEdit .Button:not(.disabled):hover::after, .Button.userFollowingGridButton:not(.disabled):hover::after, .InviteButtonEmail .Button.btn:not(.disabled):hover::after, .Button.moreItems:not(.disabled):hover::after, .formFooterButton.cancelButton:not(.disabled):hover::after, .Button.CardFollow.GrayButton:not(.disabled):hover::after, .Button.boardSettingsButton:not(.disabled):active::after, .Button.UserFollowButton.followed:not(.disabled):active::after, .Button.InterestFollowButton.followed:not(.disabled):active::after, .Modal .formFooter .Button.rounded:not(.primary):not(.disabled):active::after,
.ReactModal__Content .formFooter .Button.rounded:not(.primary):not(.disabled):active::after, .news .pending .actions .Button.remove:not(.disabled):active::after, .boardEdit .Button:not(.disabled):active::after, .Button.userFollowingGridButton:not(.disabled):active::after, .InviteButtonEmail .Button.btn:not(.disabled):active::after, .Button.moreItems:not(.disabled):active::after, .formFooterButton.cancelButton:not(.disabled):active::after, .Button.CardFollow.GrayButton:not(.disabled):active::after, .Button.boardSettingsButton:not(.disabled).active::after, .Button.UserFollowButton.followed:not(.disabled).active::after, .Button.InterestFollowButton.followed:not(.disabled).active::after, .Modal .formFooter .Button.rounded:not(.primary):not(.disabled).active::after,
.ReactModal__Content .formFooter .Button.rounded:not(.primary):not(.disabled).active::after, .news .pending .actions .Button.remove:not(.disabled).active::after, .boardEdit .Button:not(.disabled).active::after, .Button.userFollowingGridButton:not(.disabled).active::after, .InviteButtonEmail .Button.btn:not(.disabled).active::after, .Button.moreItems:not(.disabled).active::after, .formFooterButton.cancelButton:not(.disabled).active::after, .Button.CardFollow.GrayButton:not(.disabled).active::after, .Button.FollowButton:not(.disabled):hover::after, .Button.UserFollowButton:not(.disabled):hover::after, .Button.InterestFollowButton:not(.disabled):hover::after, .Modal .formFooter .Button.primary:not(.disabled):hover::after,
.ReactModal__Content .formFooter .Button.primary:not(.disabled):hover::after, .news .pending .actions .Button.primary:not(.disabled):hover::after, .panelFooter .formFooterButtons .cancelButton:not(.disabled):hover::after, .Button.searchToFollowButton:not(.disabled):hover::after, .formFooterButton.confirmButton:not(.disabled):hover::after, .Button.CardFollow.RedButton:not(.disabled):hover::after, .Button.promoteYourPin:not(.disabled):hover::after, .Button.FollowButton:not(.disabled):active::after, .Button.UserFollowButton:not(.disabled):active::after, .Button.InterestFollowButton:not(.disabled):active::after, .Modal .formFooter .Button.primary:not(.disabled):active::after,
.ReactModal__Content .formFooter .Button.primary:not(.disabled):active::after, .news .pending .actions .Button.primary:not(.disabled):active::after, .panelFooter .formFooterButtons .cancelButton:not(.disabled):active::after, .Button.searchToFollowButton:not(.disabled):active::after, .formFooterButton.confirmButton:not(.disabled):active::after, .Button.CardFollow.RedButton:not(.disabled):active::after, .Button.promoteYourPin:not(.disabled):active::after, .Button.FollowButton:not(.disabled).active::after, .Button.UserFollowButton:not(.disabled).active::after, .Button.InterestFollowButton:not(.disabled).active::after, .Modal .formFooter .Button.primary:not(.disabled).active::after,
.ReactModal__Content .formFooter .Button.primary:not(.disabled).active::after, .news .pending .actions .Button.primary:not(.disabled).active::after, .panelFooter .formFooterButtons .cancelButton:not(.disabled).active::after, .Button.searchToFollowButton:not(.disabled).active::after, .formFooterButton.confirmButton:not(.disabled).active::after, .Button.CardFollow.RedButton:not(.disabled).active::after, .Button.promoteYourPin:not(.disabled).active::after, .Button.userProfileMenu:not(.UnblockButton):not(.disabled):hover::after,
.Button.editProfile:not(.disabled):hover::after, .Button.groupBoardChat:not(.disabled):hover::after, .Button.userProfileMenu:not(.UnblockButton):not(.disabled):active::after,
.Button.editProfile:not(.disabled):active::after, .Button.groupBoardChat:not(.disabled):active::after, .Button.userProfileMenu:not(.UnblockButton):not(.disabled).active::after,
.Button.editProfile:not(.disabled).active::after, .Button.groupBoardChat:not(.disabled).active::after {
background: rgba(0, 0, 0, 0.06);
border-radius: 4px !important;
content: " ";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 100; }
.Button.boardSettingsButton:not(.disabled):active, .Button.UserFollowButton.followed:not(.disabled):active, .Button.InterestFollowButton.followed:not(.disabled):active, .Modal .formFooter .Button.rounded:not(.disabled):active:not(.primary),
.ReactModal__Content .formFooter .Button.rounded:not(.disabled):active:not(.primary), .news .pending .actions .Button.remove:not(.disabled):active, .boardEdit .Button:not(.disabled):active, .Button.userFollowingGridButton:not(.disabled):active, .InviteButtonEmail .Button.btn:not(.disabled):active, .Button.moreItems:not(.disabled):active, .formFooterButton.cancelButton:not(.disabled):active, .Button.CardFollow.GrayButton:not(.disabled):active, .Button.FollowButton:not(.disabled):active, .Button.UserFollowButton:not(.disabled):active, .Button.InterestFollowButton:not(.disabled):active, .Modal .formFooter .Button.primary:not(.disabled):active,
.ReactModal__Content .formFooter .Button.primary:not(.disabled):active, .news .pending .actions .Button.primary:not(.disabled):active, .panelFooter .formFooterButtons .cancelButton:not(.disabled):active, .Button.searchToFollowButton:not(.disabled):active, .formFooterButton.confirmButton:not(.disabled):active, .Button.CardFollow.RedButton:not(.disabled):active, .Button.promoteYourPin:not(.disabled):active, .Button.userProfileMenu:not(.disabled):active:not(.UnblockButton),
.Button.editProfile:not(.disabled):active, .Button.groupBoardChat:not(.disabled):active {
box-shadow: none !important; }
.Button.boardSettingsButton:not(.disabled):active::after, .Button.UserFollowButton.followed:not(.disabled):active::after, .Button.InterestFollowButton.followed:not(.disabled):active::after, .Modal .formFooter .Button.rounded:not(.primary):not(.disabled):active::after,
.ReactModal__Content .formFooter .Button.rounded:not(.primary):not(.disabled):active::after, .news .pending .actions .Button.remove:not(.disabled):active::after, .boardEdit .Button:not(.disabled):active::after, .Button.userFollowingGridButton:not(.disabled):active::after, .InviteButtonEmail .Button.btn:not(.disabled):active::after, .Button.moreItems:not(.disabled):active::after, .formFooterButton.cancelButton:not(.disabled):active::after, .Button.CardFollow.GrayButton:not(.disabled):active::after, .Button.FollowButton:not(.disabled):active::after, .Button.UserFollowButton:not(.disabled):active::after, .Button.InterestFollowButton:not(.disabled):active::after, .Modal .formFooter .Button.primary:not(.disabled):active::after,
.ReactModal__Content .formFooter .Button.primary:not(.disabled):active::after, .news .pending .actions .Button.primary:not(.disabled):active::after, .panelFooter .formFooterButtons .cancelButton:not(.disabled):active::after, .Button.searchToFollowButton:not(.disabled):active::after, .formFooterButton.confirmButton:not(.disabled):active::after, .Button.CardFollow.RedButton:not(.disabled):active::after, .Button.promoteYourPin:not(.disabled):active::after, .Button.userProfileMenu:not(.UnblockButton):not(.disabled):active::after,
.Button.editProfile:not(.disabled):active::after, .Button.groupBoardChat:not(.disabled):active::after {
background: rgba(0, 0, 0, 0.1); }
.Button.userProfileMenu:not(.UnblockButton),
.Button.editProfile {
padding: 10px 0 !important; }
.Button.gridItem {
left: 0;
width: 236px; }
/* Modal Buttons */
/* Board invite buttons in notifications */
.news .pending .actions .Button.remove {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
margin-right: 4px; }
.news .pending .actions .Button.primary {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
/* Board invite buttons on board */
.boardDetail .pending .actions .Button.remove {
background: #88a5ab;
border: 2px solid #fff !important;
color: #fff;
margin-right: 4px;
padding: 6px 40px !important; }
.boardDetail .pending .actions .Button.primary {
background: #fff;
border: 2px solid #fff !important;
color: #88a5ab;
padding: 6px 40px !important; }
/* Board invite buttons on board edit */
.BoardCollaboratorInviter .BoardInviteForm .inviteButton {
background: #555 !important;
border-radius: 0 !important;
color: #fff !important;
padding: 0 18px !important;
position: absolute !important; }
/* BoardCollaboratorInviter */
.Button.pinCreateClose em,
.Button.twoPaneClose em {
width: 17px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -358px -342px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.pinCreateClose em,
.Button.twoPaneClose em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -88px -375px;
background-size: 428px 427px; } }
.Button.pinCreateClose:hover em,
.Button.twoPaneClose:hover em {
width: 17px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -339px -342px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.pinCreateClose:hover em,
.Button.twoPaneClose:hover em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -70px -375px;
background-size: 428px 427px; } }
.Button.shopBag.emptyBag em {
width: 20px;
height: 24px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -185px -296px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.shopBag.emptyBag em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -156px -292px;
background-size: 399px 382px; } }
.Button.shopBag.emptyBag:hover em {
width: 20px;
height: 24px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -141px -296px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.shopBag.emptyBag:hover em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -135px -292px;
background-size: 399px 382px; } }
.Button.shopBag em {
width: 22px;
height: 24px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -23px -296px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.shopBag em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -91px -292px;
background-size: 399px 382px; } }
.Button.groupBoardChat {
top: 2px !important; }
.Button.groupBoardChat:not(.disabled).active::after, .Button.groupBoardChat:not(.disabled):focus::after, .Button.groupBoardChat:not(.disabled):hover::after {
border-radius: 50% !important;
height: 48px !important;
top: -2px !important;
width: 48px !important; }
.Button.groupBoardChat em {
width: 22px;
height: 24px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -95px -296px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Button.groupBoardChat em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -22px -292px;
background-size: 399px 382px; } }
.InviteButtonEmail .Button.btn {
margin: 0 !important;
padding: 10px 65px !important;
width: inherit !important; }
.Button.campbellCategories {
margin-top: 4px; }
.Button.CardFollow {
width: 100%; }
.Checkbox {
display: inline-block; }
.Checkbox.fancyToggle input,
.Checkbox.flatToggle input,
.Checkbox.fancyCheckbox input {
border: 0;
height: 0;
margin: 0;
opacity: 0;
padding: 0;
width: 0; }
.Checkbox.styledToggle {
border-radius: 3px;
cursor: pointer;
height: 28px;
position: relative;
width: 80px; }
.Checkbox.styledToggle .slider,
.Checkbox.styledToggle .onText,
.Checkbox.styledToggle .offText {
position: absolute; }
.Checkbox.styledToggle .slider {
background-color: #fff;
border-radius: 3px;
display: inline-block;
width: 40%; }
.Checkbox.styledToggle.on .slider {
left: auto; }
.Checkbox.styledToggle.on .offText {
visibility: hidden; }
.Checkbox.styledToggle.on .onText {
right: auto;
visibility: visible; }
.Checkbox.styledToggle.disabled {
opacity: .33; }
.Checkbox.styledToggle .onText {
visibility: hidden; }
.Checkbox.styledToggle .status {
margin: 0;
position: absolute; }
.Checkbox.flatToggle {
background: #fff;
border: 1px solid #c7c7c7;
border-radius: 4px;
box-sizing: border-box; }
.Checkbox.flatToggle .slider {
background: #fff;
border: 0;
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
height: 26px;
left: 0;
top: 0;
width: 30px; }
.Checkbox.flatToggle.on {
background: #bd081c;
border-color: #bd081c; }
.Checkbox.flatToggle.on .slider {
right: 0; }
.Checkbox.flatToggle.on .onText {
left: 13px; }
.Checkbox.flatToggle.on .status {
color: #fff; }
.Checkbox.flatToggle .status {
color: #333;
font-size: 14px;
font-weight: bold;
right: 14px;
text-shadow: none;
top: 4px; }
.Checkbox.fancyToggle {
background: #e3e3e3; }
.Checkbox.fancyToggle .slider {
background: #fff;
border: 1px solid #ececec;
height: 22px;
left: 2px;
top: 2px; }
.Checkbox.fancyToggle.on {
background: #bd081c; }
.Checkbox.fancyToggle.on .slider {
right: 2px; }
.Checkbox.fancyToggle.on .onText {
left: 10px; }
.Checkbox.fancyToggle.on .status {
color: #fff; }
.Checkbox.fancyToggle .status {
color: #555;
font-size: 12px;
font-weight: bold;
right: 13px;
top: 7px; }
.Checkbox.fancyCheckbox .visibleCheck {
width: 21px;
height: 21px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) 0 -242px no-repeat;
display: inline-block;
vertical-align: middle; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Checkbox.fancyCheckbox .visibleCheck {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -208px -136px;
background-size: 249px 231px; } }
.Checkbox.fancyCheckbox:hover .visibleCheck {
width: 21px;
height: 21px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -92px -242px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Checkbox.fancyCheckbox:hover .visibleCheck {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -208px -158px;
background-size: 249px 231px; } }
.Checkbox.fancyCheckbox.on .visibleCheck {
width: 21px;
height: 21px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -191px -97px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Checkbox.fancyCheckbox.on .visibleCheck {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -208px -92px;
background-size: 249px 231px; } }
.Checkbox.fancyCheckbox.facebook .visibleCheck {
width: 25px;
height: 23px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -162px -214px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Checkbox.fancyCheckbox.facebook .visibleCheck {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -208px 0;
background-size: 249px 231px; } }
.Checkbox.fancyCheckbox.facebook:hover .visibleCheck {
width: 25px;
height: 23px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -216px -214px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Checkbox.fancyCheckbox.facebook:hover .visibleCheck {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -104px -174px;
background-size: 249px 231px; } }
.Checkbox.fancyCheckbox.facebook.on .visibleCheck {
width: 25px;
height: 23px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -189px -214px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Checkbox.fancyCheckbox.facebook.on .visibleCheck {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -208px -24px;
background-size: 249px 231px; } }
.Checkbox.fancyCheckbox.facebook.on:hover .visibleCheck {
width: 25px;
height: 23px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -243px -214px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Checkbox.fancyCheckbox.facebook.on:hover .visibleCheck {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -130px -174px;
background-size: 249px 231px; } }
.Checkbox.fancyCheckbox.twitter .visibleCheck {
width: 25px;
height: 23px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -108px -214px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Checkbox.fancyCheckbox.twitter .visibleCheck {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -182px -174px;
background-size: 249px 231px; } }
.Checkbox.fancyCheckbox.twitter:hover .visibleCheck {
width: 25px;
height: 23px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -81px -214px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Checkbox.fancyCheckbox.twitter:hover .visibleCheck {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -52px -174px;
background-size: 249px 231px; } }
.Checkbox.fancyCheckbox.twitter.on .visibleCheck {
width: 25px;
height: 23px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -135px -214px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Checkbox.fancyCheckbox.twitter.on .visibleCheck {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -156px -174px;
background-size: 249px 231px; } }
.Checkbox.fancyCheckbox.twitter.on:hover .visibleCheck {
width: 25px;
height: 23px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -54px -214px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Checkbox.fancyCheckbox.twitter.on:hover .visibleCheck {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -78px -174px;
background-size: 249px 231px; } }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.Collage {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.Collage .item {
position: relative; }
.Collage .item::after {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
background: rgba(0, 0, 0, 0.02);
content: "";
display: block; }
.Collage .item {
box-sizing: border-box;
overflow: hidden;
position: relative; }
.Collage .item img {
-o-object-fit: cover;
object-fit: cover; }
.Collage.tiles {
-ms-flex-flow: column wrap;
flex-flow: column wrap;
height: 188px; }
.Collage.tiles img,
.Collage.tiles .item {
height: 92px;
width: 92px; }
.Collage.tiles .item {
margin: 1px; }
.Collage.tiles.fiveItems .item:nth-child(1) {
height: 187px; }
.Collage.tiles.fiveItems .item:nth-child(1) img {
height: 100%; }
.Collage.tiles.sixItems .item:nth-child(1) {
height: 135px; }
.Collage.tiles.sixItems .item:nth-child(1) img {
height: auto;
min-height: 100%;
min-width: 100%;
width: auto; }
.Collage.tiles.sixItems .item:nth-child(2) {
height: 49px; }
.Collage.landscape {
-ms-flex-line-pack: justify;
align-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
.Collage.landscape.fourItems {
-webkit-box-flex: 0;
-ms-flex: 0 0 374px;
flex: 0 0 374px; }
.Collage.landscape.fourItems img,
.Collage.landscape.fourItems .item {
height: 99px;
width: 186px; }
.Collage.landscape.twoItems img {
height: 99px;
width: 280px; }
.Collage .stepNumber {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: rgba(0, 0, 0, 0.75);
border-radius: 50%;
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 18px;
font-weight: bold;
height: 40px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 40px;
left: 50%;
margin-left: -20px;
margin-top: -20px;
position: absolute;
top: 50%; }
.Collage.showMore:last-child .item {
position: relative; }
.Collage.showMore:last-child .more {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
background: rgba(0, 0, 0, 0.45);
color: #fff;
font-size: 18px;
font-weight: bold;
padding-top: 34px;
text-align: center; }
.Collage.showMore:last-child .more::before {
width: 6px;
height: 13px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -315px -32px no-repeat;
content: "";
display: inline-block;
margin-right: 2px;
vertical-align: -1px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Collage.showMore:last-child .more::before {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -196px -139px;
background-size: 249px 231px; } }
.Collage.gatorFeed .item img, .Collage.gatorFeed .item.placeholder {
background: #efefef;
border-radius: 4px; }
/* desktop.scss */
.Collage.gatorFeed.tiles {
height: 240px; }
.Collage.gatorFeed.tiles img,
.Collage.gatorFeed.tiles .item {
height: 118px;
width: 118px; }
.Collage.gatorFeed.tiles .item {
margin: 0 4px 4px 0; }
.Collage.gatorFeed.tiles .item:nth-child(even) {
margin-bottom: 0; }
.Collage.gatorFeed.tiles .item:nth-last-child(1), .Collage.gatorFeed.tiles .item:nth-last-child(2) {
margin-right: 0; }
.ConfirmDialog {
width: 380px; }
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.ConfirmDialog {
width: 100%; } }
.ConfirmDialog .body {
color: #555;
font-size: 14px;
line-height: 21px;
padding: 21px; }
.ConfirmDialog p {
margin: 0; }
.ConfirmDialog p.text {
margin-bottom: 1em; }
.ConfirmDialog .standardForm h1 {
white-space: normal; }
.ConfirmDialog .standardForm a.confirm {
display: inline-block; }
.ConfirmDialog .searchPrivacyForm .body a {
text-decoration: underline; }
.ConfirmDialog .switchDialog .dialogTitle,
.ConfirmDialog .switchDialog .body {
font-weight: normal; }
.ConfirmDialog .switchDialog .dialogLearnMore,
.ConfirmDialog .switchDialog .dialogNoThanks {
line-height: 32px;
position: relative;
vertical-align: middle; }
.ConfirmDialog.fluid {
width: auto; }
.ConfirmDialog.wide {
width: 700px; }
.ConfirmDialog.mediumWide {
width: 550px; }
.ConfirmDialog.reportBug a {
color: #bd081c; }
.ConfirmDialog.reportBug a:hover {
text-decoration: underline; }
.ConfirmDialog .apiSecret {
background: #eee;
border: 1px solid #ddd;
border-radius: 2px;
/* stylelint-disable-next-line property-blacklist */
font-family: monospace;
margin-top: 7px;
padding: 3px;
text-align: center; }
.ConfirmDialog .messageError h1 {
font-size: 18px; }
.ConfirmDialog .messageError ul {
margin-top: 10px; }
.ConfirmDialog .messageError ul li {
color: #717171;
font-weight: bold; }
.ConfirmDialog .modalActionDescription {
color: #999;
display: table;
font-size: 13px;
height: 360px;
width: 550px; }
.ConfirmDialog .modalActionDescription > span {
display: table-cell;
padding: 0 18px;
text-align: center;
vertical-align: middle; }
.ConfirmDialog .modalActionTitle {
width: 514px; }
.ConfirmDialog .standardForm.boldForm > h1 {
padding-top: 40px; }
.ConfirmDialog .standardForm.boldForm > h1,
.ConfirmDialog .standardForm.boldForm .formFooter {
border: none; }
.ReactModal__Overlay {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: rgba(226, 228, 228, 0.9);
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
left: 0;
overflow-y: scroll;
padding: 20px;
position: fixed;
right: 0;
top: 0;
z-index: 751; }
.ReactModal__Content {
border-radius: 6px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
margin: auto;
max-height: 200%;
position: relative; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.Dropdown {
cursor: default;
text-align: left; }
.Dropdown.active .dropdownContainer {
display: block; }
.Dropdown .dropdownTitle {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 13px;
font-weight: bold;
margin: 10px 0 5px;
padding: 0 15px; }
.Dropdown .dropdownText {
color: #555;
font-weight: 500;
margin: 5px 0 10px;
max-width: 175px;
padding: 0 15px; }
.Dropdown .dropdownText b {
color: #333; }
.Dropdown.activeConversationDropdown {
bottom: 21px !important;
margin-left: 14px !important;
margin-top: 10px;
max-height: 460px;
top: auto !important;
z-index: 700 !important; }
.Dropdown.activeConversationDropdown .positionModuleCaret.lightGrayConversationsCaretStyle.lightGray {
width: 17px;
height: 31px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -341px -90px no-repeat;
left: -17px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Dropdown.activeConversationDropdown .positionModuleCaret.lightGrayConversationsCaretStyle.lightGray {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -378px -79px;
background-size: 428px 427px; } }
.Dropdown.gridShare.isEmpty {
height: 460px !important; }
.Dropdown.gridShare.isEmptyWithoutFriends {
height: 362px !important; }
.Dropdown.conversationsDropdown.isEmpty {
max-height: 371px !important; }
.Dropdown.conversationsDropdown.isEmptyWithoutFriends {
max-height: 273px !important; }
.Dropdown.geoFeatureDropdown {
margin-left: -6px;
width: 276px; }
.Dropdown.geoFeatureDropdown .positionModuleCaret {
left: 14px !important; }
.Dropdown.geoFeatureDropdown li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-bottom: 1px solid #e5e5e5;
color: #000;
cursor: pointer;
font-size: 13px;
padding: 2px 14px; }
.Dropdown.geoFeatureDropdown li:first-child {
margin-top: 5px;
padding-top: 0; }
.Dropdown.geoFeatureDropdown li:last-child {
border-bottom: 0;
margin-bottom: 5px;
padding-bottom: 0; }
.Dropdown.geoFeatureDropdown li:hover {
background: #f4f4f4; }
.Dropdown.geoFeatureDropdown li .geoFeature {
left: 1px;
position: relative;
top: 1px; }
.Dropdown.large .dropdownText {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
font-weight: normal;
margin: 10px 0;
max-width: 500px; }
.Dropdown.large .dropdownText em {
color: #bd081c;
font-style: normal;
font-weight: bold; }
.Dropdown.userDropdown {
margin-left: 1px; }
.Dropdown.positionModuleElement.active {
min-height: 0; }
.Dropdown.sterlingUserDropdown.positionModuleElement span.positionModuleCaret {
width: 15px;
height: 6px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -384px -329px no-repeat;
left: 213px !important;
top: -6px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Dropdown.sterlingUserDropdown.positionModuleElement span.positionModuleCaret {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -402px -393px;
background-size: 428px 427px; } }
.Dropdown.sterlingContentDropdown.positionModuleElement {
z-index: 669; }
.Dropdown.sterlingHeaderDropdown {
z-index: 669; }
.Dropdown.sterlingPaginatedTableDropdown.positionModuleElement {
z-index: 1; }
.Dropdown.fake .dropdownContainer {
opacity: .7;
z-index: 900; }
.Dropdown.underneathHeader {
z-index: 669; }
.Dropdown.tutorial {
background-color: #fff;
bottom: auto;
opacity: .98;
z-index: 999999999; }
.Dropdown.tutorial .dropdownContainer {
box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.44); }
.Dropdown.aboveModal {
z-index: 751; }
.Dropdown.strongBorder {
background-color: #fbfbfb;
border: 1px solid #b6b6b6;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); }
.Dropdown.boardPicker {
margin-left: -7px;
margin-top: -77px; }
.Dropdown.autoFollowMemo .dropdownTitle {
line-height: 50px;
margin: 0; }
.Dropdown.tooltip {
text-align: center; }
.Dropdown.tooltip.active {
min-height: 0;
padding-bottom: 7px;
padding-top: 7px; }
.Dropdown.tooltip.active .dropdownText {
margin: 0; }
.Dropdown.pinContainer.positionModuleElement {
background-color: #f5f5f5;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 2px 8px 0 rgba(0, 0, 0, 0.06);
margin-left: -62px;
margin-top: -140px;
padding: 15px;
z-index: 668; }
.Dropdown.pinContainer.positionModuleElement span.positionModuleCaret {
width: 17px;
height: 9px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -365px -329px no-repeat;
right: 15px !important;
top: -7px;
width: 18px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Dropdown.pinContainer.positionModuleElement span.positionModuleCaret {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -226px -375px;
background-size: 428px 427px; } }
.Dropdown.advertiserCountryDropdown {
width: 400px; }
.Dropdown.exploreSendPinDropdown {
z-index: 801; }
.Dropdown.sterlingPinnerListDropdown {
width: 550px; }
.Dropdown.sterlingPinnerListDropdown.positionModuleElement {
z-index: 751; }
.Dropdown.sterlingPinnerListDropdown .paginatedTableControl {
max-height: 124px; }
.Dropdown.sterlingPinnerListDropdownCountry {
width: 124px; }
.Dropdown.sterlingPinnerListDropdownCountry.positionModuleElement {
z-index: 751; }
.Dropdown.sterlingPinnerListDropdownCountry .paginatedTableControl {
max-height: 124px; }
.Dropdown.sterlingPinnerListDropdownPercentage {
width: 200px; }
.Dropdown.sterlingPinnerListDropdownPercentage.positionModuleElement {
z-index: 751; }
.Dropdown.sterlingPinnerListDropdownPercentage .paginatedTableControl {
max-height: 124px; }
.Dropdown.sterlingExportModalDropdown.positionModuleElement {
z-index: 751; }
.Dropdown.sterlingExportModalDropdown.positionModuleElement ul {
min-width: 120px; }
.Dropdown.sterlingExportModalDropdown.positionModuleElement ul.constrainHeight {
height: 260px;
overflow-y: scroll; }
.Dropdown.sterlingPreviewDropdown.hide:not(.slideIn) {
display: none; }
/* desktop.scss */
.Dropdown.helpDropdown {
width: 200px; }
.Dropdown.userDropdown {
width: 185px; }
.Dropdown.userDropdown.compact {
width: 156px; }
.Dropdown2 {
-webkit-transform: translateZ(0);
background: #fbfbfb;
border: 1px solid #b6b6b6;
border-radius: 3px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
display: none;
margin-left: -6px;
position: absolute;
top: 23px;
z-index: 752; }
.Dropdown2.visible {
display: block; }
.DropdownButton {
display: inline-block;
position: relative; }
.DropdownButton em {
width: 10px;
height: 7px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -162px -200px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.DropdownButton em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -143px -162px;
background-size: 249px 231px; } }
.DropdownButton.embed em {
width: 17px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -442px -404px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.DropdownButton.embed em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -378px -362px;
background-size: 428px 427px; } }
.DropdownButton.inContextDropdownButton {
background: none;
border: 0;
color: inherit;
font: inherit;
margin: 0;
padding: 0; }
.DropdownButton.caret em {
width: 10px;
height: 7px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -162px -200px no-repeat;
opacity: .5; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.DropdownButton.caret em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -143px -162px;
background-size: 249px 231px; } }
.DropdownButton.flat .buttonText {
float: left; }
.DropdownButton.flat em {
background: url(https://s.pinimg.com/webapp/style/images/arrow_down-1x-f80d10cd.png) no-repeat;
background-size: contain;
height: 6px;
width: 10px;
float: right;
margin: 6px 0 0 8px;
opacity: 1; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.DropdownButton.flat em {
background-image: url(https://s.pinimg.com/webapp/style/images/arrow_down-2x-f08d1bc4.png); } }
.DropdownButton.metricsGraph .buttonText {
font-size: 14px; }
.DropdownButton.metricsGraph.cpe .buttonText {
color: #a24e8c; }
.DropdownButton.metricsGraph.cpc .buttonText {
color: #c5a807; }
.DropdownButton.metricsGraph.cpm .buttonText {
color: #417505; }
.DropdownButton.metricsGraph.cpa .buttonText {
color: #ec7a70; }
.DropdownButton.metricsGraph.bcpm .buttonText {
color: #685cae; }
.DropdownButton.sterling .downArrow {
background: url(https://s.pinimg.com/webapp/style/images/arrow_down-1x-f80d10cd.png) no-repeat;
background-size: contain;
height: 6px;
width: 10px;
display: block;
float: right;
margin: 6px 0;
opacity: 1; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.DropdownButton.sterling .downArrow {
background-image: url(https://s.pinimg.com/webapp/style/images/arrow_down-2x-f08d1bc4.png); } }
.DropdownButton.campbellAddPin em {
width: 40px;
height: 40px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -124px -110px no-repeat;
background-position: -130px -116px;
border-radius: 50%;
height: 28px;
width: 28px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.DropdownButton.campbellAddPin em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -122px -109px;
background-size: 399px 382px; } }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.DropdownButton.campbellAddPin:hover em, .DropdownButton.campbellAddPin:focus em, .DropdownButton.campbellAddPin.active em, .DropdownButton.campbellAddPin:active em, .DropdownButton.campbellAddPin em {
background-position: -128px -115px; } }
.DropdownButton.campbellCategories {
background: none;
border: 0;
padding: 0; }
.DropdownButton.campbellCategories.active, .DropdownButton.campbellCategories:active, .DropdownButton.campbellCategories:focus, .DropdownButton.campbellCategories:hover {
background: none;
box-shadow: none; }
.DropdownButton.campbellCategories.active em, .DropdownButton.campbellCategories:active em, .DropdownButton.campbellCategories:focus em, .DropdownButton.campbellCategories:hover em {
width: 32px;
height: 14px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-partners-1x-9f7312af.png) -34px -60px no-repeat;
background-color: none;
border: 0; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.DropdownButton.campbellCategories.active em, .DropdownButton.campbellCategories:active em, .DropdownButton.campbellCategories:focus em, .DropdownButton.campbellCategories:hover em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-partners-2x-19664238.png);
background-position: -33px -58px;
background-size: 86px 72px; } }
.DropdownButton.campbellCategories em {
width: 32px;
height: 14px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-partners-1x-9f7312af.png) 0 -60px no-repeat;
display: inline-block;
height: 14px;
margin: -4px 6px 0 8px;
vertical-align: middle;
width: 32px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.DropdownButton.campbellCategories em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-partners-2x-19664238.png);
background-position: 0 -58px;
background-size: 86px 72px; } }
.DropdownButton.wideDropdownButton {
width: 100%; }
.Field {
cursor: text;
font-size: 13px;
position: relative; }
.Field .content {
background: #f0f0f0;
border: 1px solid #d1d1d1;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.07);
box-sizing: border-box;
color: #333;
display: block;
margin: 0; }
.Field .content.detailed {
background: #efefef;
border: 0;
height: 40px; }
.Field .content.detailed:focus {
background: #efefef;
outline: 0; }
.Field .content:focus {
background-color: #fafafa;
border: 1px solid #c3c3c3;
color: #333; }
.Field .content:active {
border-color: #bcbcbc; }
.Field .currencySymbol {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #777; }
.Field.withCurrencySymbol {
width: 152px; }
.Field.withCurrencySymbol .inputWrapper {
display: block;
overflow: hidden; }
.Field.withCurrencySymbol .inputWrapper input {
height: 30px; }
.Field.withCurrencySymbol .currencySymbol {
background: #fff;
border: 1px solid #dfdfdf;
border-bottom-left-radius: 3px;
border-right: 0;
border-top-left-radius: 3px;
color: #999;
float: left;
height: 28px;
line-height: 28px;
padding: 0 10px;
text-align: center;
width: 10px; }
.Field.flat.withCurrencySymbol .currencySymbol {
background: #c7c7c7;
border-bottom-left-radius: 4px;
border-color: #c7c7c7;
border-top-left-radius: 4px;
color: #fff;
font-weight: bold; }
.Field.noRightBorder input {
border-bottom-right-radius: 0;
border-right: 0;
border-top-right-radius: 0; }
.FollowButton:not(.primary):not(.followed):not(.disabled) .buttonText {
color: #bd081c; }
.FollowButton.exploreTabFollowButton.btn, .FollowButton.exploreTabFollowButton.btn.primary, .FollowButton.exploreTabFollowButton.btn.followed {
background: rgba(255, 255, 255, 0.5);
border-color: #eaeaea;
border-radius: 4px;
font-size: 14px;
margin-top: 0;
text-shadow: none;
width: 100%; }
.FollowButton.exploreTabFollowButton.btn:hover, .FollowButton.exploreTabFollowButton.btn.primary:hover, .FollowButton.exploreTabFollowButton.btn.followed:hover {
background: #bd081c;
border-color: #bd081c;
box-shadow: none; }
.FollowButton.exploreTabFollowButton.btn:hover .buttonText, .FollowButton.exploreTabFollowButton.btn.primary:hover .buttonText, .FollowButton.exploreTabFollowButton.btn.followed:hover .buttonText {
color: #fff; }
.FollowButton.exploreTabFollowButton.btn:active .buttonHoverMask, .FollowButton.exploreTabFollowButton.btn.primary:active .buttonHoverMask, .FollowButton.exploreTabFollowButton.btn.followed:active .buttonHoverMask {
background-color: rgba(0, 0, 0, 0.2); }
.FollowButton.exploreTabFollowButton.btn:focus, .FollowButton.exploreTabFollowButton.btn.primary:focus, .FollowButton.exploreTabFollowButton.btn.followed:focus {
outline: none; }
.FollowButton.homefeedBuilderFollowButton.btn, .FollowButton.homefeedBuilderFollowButton.btn.primary, .FollowButton.homefeedBuilderFollowButton.btn.followed {
background: none; }
.FollowButton.homefeedBuilderFollowButton.btn.followed, .FollowButton.exploreTabFollowButton.btn {
color: #b5b5b5; }
.FollowButton.homefeedBuilderFollowButton.btn, .FollowButton.exploreTabFollowButton.btn {
color: #bd081c; }
.FollowButton.gatorFollowButton.btn {
background: #fff;
border: 1px solid #e7e7e7;
font-size: 14px;
height: 35px; }
.FollowButton.gatorFollowButton.btn .buttonText {
line-height: 16px !important; }
.FollowButton.gatorFollowButton.btn:hover, .FollowButton.gatorFollowButton.btn:focus, .FollowButton.gatorFollowButton.btn:active {
background: #bd081c;
border: 1px solid #bd081c; }
.FollowButton.gatorFollowButton.btn:hover .buttonText, .FollowButton.gatorFollowButton.btn:focus .buttonText, .FollowButton.gatorFollowButton.btn:active .buttonText {
color: #fff; }
.FollowButton.gatorFollowButton.btn.followed {
color: #b5b5b5; }
.FollowButton.isBrioFlat {
height: 35px; }
.FollowButton.isBrioFlat.btn.hasText {
background: #fff;
border: 1px solid;
border-color: #c7c7c7;
color: #b5b5b5;
font-size: 14px;
line-height: 16px;
margin-top: 0;
outline: 0; }
.FollowButton.isBrioFlat.btn.hasText:hover, .FollowButton.isBrioFlat.btn.hasText.dim:hover {
background: #bd081c;
border: 1px solid #bd081c; }
.FollowButton.isBrioFlat.btn.hasText:hover .buttonText, .FollowButton.isBrioFlat.btn.hasText.dim:hover .buttonText {
color: #fff; }
.FollowButton.isBrioFlat.rounded {
border-radius: 4px; }
.Dropdown .FormItemGroup {
min-width: 200px; }
.Dropdown .FormItemGroup li {
border-top: 1px solid #eee; }
.Dropdown .FormItemGroup li:first-child {
border-top: 0; }
.Dropdown .FormItemGroup li label {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #333;
display: block;
font-size: 14px;
font-weight: bold;
padding: 14px 28px 14px 14px; }
.Dropdown .FormItemGroup li .labelContent {
display: inline-block;
margin-left: 7px;
vertical-align: middle; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.Grid {
margin: 0 auto 14px;
position: relative; }
.Grid .seeMoreButtonWrapper {
text-align: center; }
.Grid.hasError {
padding-bottom: 120px; }
.Grid.hasFooter {
padding-bottom: 22.5px; }
.Grid.hasFooter.hasError {
padding-bottom: 142.5px; }
.Grid .navigator {
display: none; }
.Grid.rowLayout {
margin: 0; }
.Grid.rowLayout .gridContainer {
-webkit-overflow-scrolling: touch;
overflow-x: scroll;
overflow-y: hidden;
pointer-events: none;
position: relative; }
.Grid.rowLayout .gridContainer .item {
pointer-events: auto; }
.Grid.rowLayout .navigator {
height: 100%;
position: absolute;
top: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
width: 100px; }
.Grid.rowLayout .navigator em {
cursor: pointer;
display: inline-block;
position: absolute;
top: 50%; }
.Grid.rowLayout .navigator.left {
background-image: -webkit-linear-gradient(right, rgba(233, 233, 233, 0) 0%, #e9e9e9 95%);
background-image: linear-gradient(to left, rgba(233, 233, 233, 0) 0%, #e9e9e9 95%);
left: 0; }
.Grid.rowLayout .navigator.left em {
width: 22px;
height: 31px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -302px -261px no-repeat;
left: 0;
margin-top: -15.5px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Grid.rowLayout .navigator.left em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -298px -258px;
background-size: 399px 382px; } }
.Grid.rowLayout .navigator.left em:hover {
width: 22px;
height: 31px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -339px -226px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Grid.rowLayout .navigator.left em:hover {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -334px -221px;
background-size: 399px 382px; } }
.Grid.rowLayout .navigator.right {
background-image: -webkit-linear-gradient(left, rgba(233, 233, 233, 0) 0%, #e9e9e9 95%);
background-image: linear-gradient(to right, rgba(233, 233, 233, 0) 0%, #e9e9e9 95%);
right: 0;
text-align: right; }
.Grid.rowLayout .navigator.right em {
width: 22px;
height: 31px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -339px -259px no-repeat;
margin-top: -15.5px;
right: 0; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Grid.rowLayout .navigator.right em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -334px -253px;
background-size: 399px 382px; } }
.Grid.rowLayout .navigator.right em:hover {
width: 22px;
height: 31px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -153px -67px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Grid.rowLayout .navigator.right em:hover {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -151px -66px;
background-size: 399px 382px; } }
.Grid.rowLayout .navigator.right.loading {
display: inline !important; }
.Grid.rowLayout .navigator.right.loading em {
width: 24px;
height: 24px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -193px -234px no-repeat;
-webkit-animation: rotateCircle 500ms infinite;
animation: rotateCircle 500ms infinite;
cursor: default;
margin-top: -12px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Grid.rowLayout .navigator.right.loading em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -189px -231px;
background-size: 399px 382px; } }
/* desktop.scss */
/* stylelint-disable at-rule-no-unknown */
@media (min-width: 260px) and (max-width: 519px) {
.Grid .centeredWithinWrapper {
width: 260px; }
.Grid .centeredWithinWrapper.gridWidth {
width: 236px; } }
@media (min-width: 520px) and (max-width: 779px) {
.Grid .centeredWithinWrapper {
width: 520px; }
.Grid .centeredWithinWrapper.gridWidth {
width: 496px; } }
@media (min-width: 780px) and (max-width: 1039px) {
.Grid .centeredWithinWrapper {
width: 780px; }
.Grid .centeredWithinWrapper.gridWidth {
width: 756px; } }
@media (min-width: 1040px) and (max-width: 1299px) {
.Grid .centeredWithinWrapper {
width: 1040px; }
.Grid .centeredWithinWrapper.gridWidth {
width: 1016px; } }
@media (min-width: 1300px) and (max-width: 1559px) {
.Grid .centeredWithinWrapper {
width: 1300px; }
.Grid .centeredWithinWrapper.gridWidth {
width: 1276px; } }
@media (min-width: 1560px) and (max-width: 1819px) {
.Grid .centeredWithinWrapper {
width: 1560px; }
.Grid .centeredWithinWrapper.gridWidth {
width: 1536px; } }
@media (min-width: 1820px) and (max-width: 2079px) {
.Grid .centeredWithinWrapper {
width: 1820px; }
.Grid .centeredWithinWrapper.gridWidth {
width: 1796px; } }
@media (min-width: 2080px) and (max-width: 2339px) {
.Grid .centeredWithinWrapper {
width: 2080px; }
.Grid .centeredWithinWrapper.gridWidth {
width: 2056px; } }
@media (min-width: 2340px) and (max-width: 2599px) {
.Grid .centeredWithinWrapper {
width: 2340px; }
.Grid .centeredWithinWrapper.gridWidth {
width: 2316px; } }
@media (min-width: 2600px) and (max-width: 2859px) {
.Grid .centeredWithinWrapper {
width: 2600px; }
.Grid .centeredWithinWrapper.gridWidth {
width: 2576px; } }
.GridFooter {
display: none;
margin-top: 31px;
/* TODO cvuerings - remove from actual DOM instead of hiding in CSS */ }
.GridFooter.visible {
display: block; }
.GridFooter hr {
display: none; }
.GridFooter .gridError {
border-top: #ccc dashed 2px;
bottom: 0;
display: none;
left: 0;
right: 0;
text-align: center; }
.GridFooter .gridError::after {
clear: both;
content: "";
display: table; }
.GridFooter .gridError .btn {
margin: 20px auto 50px; }
.GridFooter .gridError .btn span {
font-weight: normal; }
.GridFooter .gridLoadingWrapper {
position: relative;
z-index: -2; }
.GridFooter .gridLoading {
background: #fff;
display: inline-block;
left: 50%;
margin-left: -24.5px;
padding: 20px 10px;
position: absolute;
text-align: center;
top: -26.5px;
width: 29px; }
.GridFooter .gridLoading .gridFooterLogoIcon {
width: 29px;
height: 31px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -339px -163px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.GridFooter .gridLoading .gridFooterLogoIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -334px -160px;
background-size: 399px 382px; } }
.GridFooter .gridLoading .gridFooterSpinner {
background: url(https://s.pinimg.com/webapp/style/images/spinner-medium-1x-dbb1334f.gif) no-repeat;
background-size: contain;
height: 32px;
width: 32px;
display: inline-block;
opacity: .5;
display: none; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.GridFooter .gridLoading .gridFooterSpinner {
background-image: url(https://s.pinimg.com/webapp/style/images/spinner-medium-2x-3ffcb44b.gif); } }
.GridFooter.showGridLoading .gridFooterLogoIcon {
display: none; }
.GridFooter.showGridLoading .gridFooterSpinner {
display: block; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.GridItems {
margin: 0 auto 14px;
position: relative; }
.GridItems.max-columns-3 {
max-width: 750px; }
.GridItems.max-columns-4 {
max-width: 1000px; }
.GridItems.max-columns-5 {
max-width: 1250px; }
.GridItems.max-columns-6 {
max-width: 1500px; }
.GridItems.max-columns-7 {
max-width: 1750px; }
.GridItems.max-columns-8 {
max-width: 2000px; }
.GridItems.max-columns-9 {
max-width: 2250px; }
.GridItems.max-columns-10 {
max-width: 2500px; }
.GridItems.centeredWithinWrapper {
margin-bottom: 14px;
padding-bottom: 4px; }
.GridItems.loading {
min-height: 100px; }
.GridItems.animated .item {
-webkit-transition: -webkit-transform .2s ease-out;
transition: -webkit-transform .2s ease-out;
transition: transform .2s ease-out;
transition: transform .2s ease-out, -webkit-transform .2s ease-out; }
.GridItems .item.slideIn {
-webkit-animation: pinFadeIn .33s forwards;
animation: pinFadeIn .33s forwards;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
display: block; }
.GridItems .item {
-webkit-transform: translateZ(0);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d; }
.GridItems .item .itemClickMask {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 6px;
bottom: 0;
color: #fff;
cursor: pointer;
font-size: 20px;
font-weight: bold;
left: 0;
opacity: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
z-index: 200; }
.GridItems .item .itemClickMask .selectItemIconWrapper {
left: 50%;
position: absolute;
top: 50%; }
.GridItems .item .itemClickMask .selectItemIcon {
width: 40px;
height: 40px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -274px -296px no-repeat;
left: -16px;
position: absolute;
top: -45px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.GridItems .item .itemClickMask .selectItemIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -178px -258px;
background-size: 428px 427px; } }
.GridItems .item .itemClickMask .selectItemTextWrapper {
position: relative;
top: 14px; }
.GridItems .item .itemClickMask::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle; }
.GridItems .item .itemClickMask:hover {
opacity: 1; }
.GridItems .item .sideHighlight {
border-left: 2px solid #bd081c;
height: 70%;
left: 0;
opacity: 0;
position: absolute;
top: 15%;
-webkit-transition-duration: .23s;
transition-duration: .23s;
-webkit-transition-property: opacity;
transition-property: opacity; }
.GridItems .item.dropPreview {
z-index: 2; }
.GridItems .item.dropPreview .sideHighlight {
opacity: 1; }
.GridItems.variableHeightLayout > .item {
position: absolute;
visibility: hidden; }
.GridItems.fixedHeightLayout {
padding-bottom: 2px; }
.GridItems.fixedHeightLayout::after {
clear: both;
content: "";
display: table; }
.GridItems.fixedHeightLayout > .item {
float: left; }
.GridItems.padItems > .item {
margin: 14px 7px 0 7px;
width: 236px; }
.GridItems.rowLayout {
margin: 14px 0 0; }
.GridItems.rowLayout > .item {
float: left;
padding: 0 7px; }
.GridItems.rowLayout.padItems > .item {
margin: 0;
padding: 14px 7px 0 7px; }
.GridItems.exploreExp {
min-width: 1000px; }
.GridItems .quickPromoteTutorial {
z-index: 1; }
.GridItems .quickPromoteTutorialSubsequent {
z-index: 0; }
/* desktop.scss */
.GridItems {
/* stylelint-disable-next-line at-rule-no-unknown */ }
@media (min-width: 260px) and (max-width: 519px) {
.GridItems.variableHeightLayout.loadingItems > .item:nth-child(-n+1) {
float: left;
position: static;
visibility: visible; } }
.GridItems.max-columns-1 {
/* stylelint-disable-next-line at-rule-no-unknown */ }
.GridItems.max-columns-1.variableHeightLayout.loadingItems > .item:nth-child(2) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-1.variableHeightLayout.loadingItems > .item:nth-child(3) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-1.variableHeightLayout.loadingItems > .item:nth-child(4) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-1.variableHeightLayout.loadingItems > .item:nth-child(5) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-1.variableHeightLayout.loadingItems > .item:nth-child(6) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-1.variableHeightLayout.loadingItems > .item:nth-child(7) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-1.variableHeightLayout.loadingItems > .item:nth-child(8) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-1.variableHeightLayout.loadingItems > .item:nth-child(9) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-1.variableHeightLayout.loadingItems > .item:nth-child(10) {
position: absolute;
visibility: hidden; }
@media (min-width: 520px) and (max-width: 779px) {
.GridItems.variableHeightLayout.loadingItems > .item:nth-child(-n+2) {
float: left;
position: static;
visibility: visible; } }
.GridItems.max-columns-2 {
/* stylelint-disable-next-line at-rule-no-unknown */ }
.GridItems.max-columns-2.variableHeightLayout.loadingItems > .item:nth-child(3) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-2.variableHeightLayout.loadingItems > .item:nth-child(4) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-2.variableHeightLayout.loadingItems > .item:nth-child(5) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-2.variableHeightLayout.loadingItems > .item:nth-child(6) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-2.variableHeightLayout.loadingItems > .item:nth-child(7) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-2.variableHeightLayout.loadingItems > .item:nth-child(8) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-2.variableHeightLayout.loadingItems > .item:nth-child(9) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-2.variableHeightLayout.loadingItems > .item:nth-child(10) {
position: absolute;
visibility: hidden; }
@media (min-width: 780px) and (max-width: 1039px) {
.GridItems.variableHeightLayout.loadingItems > .item:nth-child(-n+3) {
float: left;
position: static;
visibility: visible; } }
.GridItems.max-columns-3 {
/* stylelint-disable-next-line at-rule-no-unknown */ }
.GridItems.max-columns-3.variableHeightLayout.loadingItems > .item:nth-child(4) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-3.variableHeightLayout.loadingItems > .item:nth-child(5) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-3.variableHeightLayout.loadingItems > .item:nth-child(6) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-3.variableHeightLayout.loadingItems > .item:nth-child(7) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-3.variableHeightLayout.loadingItems > .item:nth-child(8) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-3.variableHeightLayout.loadingItems > .item:nth-child(9) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-3.variableHeightLayout.loadingItems > .item:nth-child(10) {
position: absolute;
visibility: hidden; }
@media (min-width: 1040px) and (max-width: 1299px) {
.GridItems.variableHeightLayout.loadingItems > .item:nth-child(-n+4) {
float: left;
position: static;
visibility: visible; } }
.GridItems.max-columns-4 {
/* stylelint-disable-next-line at-rule-no-unknown */ }
.GridItems.max-columns-4.variableHeightLayout.loadingItems > .item:nth-child(5) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-4.variableHeightLayout.loadingItems > .item:nth-child(6) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-4.variableHeightLayout.loadingItems > .item:nth-child(7) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-4.variableHeightLayout.loadingItems > .item:nth-child(8) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-4.variableHeightLayout.loadingItems > .item:nth-child(9) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-4.variableHeightLayout.loadingItems > .item:nth-child(10) {
position: absolute;
visibility: hidden; }
@media (min-width: 1300px) and (max-width: 1559px) {
.GridItems.variableHeightLayout.loadingItems > .item:nth-child(-n+5) {
float: left;
position: static;
visibility: visible; } }
.GridItems.max-columns-5 {
/* stylelint-disable-next-line at-rule-no-unknown */ }
.GridItems.max-columns-5.variableHeightLayout.loadingItems > .item:nth-child(6) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-5.variableHeightLayout.loadingItems > .item:nth-child(7) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-5.variableHeightLayout.loadingItems > .item:nth-child(8) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-5.variableHeightLayout.loadingItems > .item:nth-child(9) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-5.variableHeightLayout.loadingItems > .item:nth-child(10) {
position: absolute;
visibility: hidden; }
@media (min-width: 1560px) and (max-width: 1819px) {
.GridItems.variableHeightLayout.loadingItems > .item:nth-child(-n+6) {
float: left;
position: static;
visibility: visible; } }
.GridItems.max-columns-6 {
/* stylelint-disable-next-line at-rule-no-unknown */ }
.GridItems.max-columns-6.variableHeightLayout.loadingItems > .item:nth-child(7) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-6.variableHeightLayout.loadingItems > .item:nth-child(8) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-6.variableHeightLayout.loadingItems > .item:nth-child(9) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-6.variableHeightLayout.loadingItems > .item:nth-child(10) {
position: absolute;
visibility: hidden; }
@media (min-width: 1820px) and (max-width: 2079px) {
.GridItems.variableHeightLayout.loadingItems > .item:nth-child(-n+7) {
float: left;
position: static;
visibility: visible; } }
.GridItems.max-columns-7 {
/* stylelint-disable-next-line at-rule-no-unknown */ }
.GridItems.max-columns-7.variableHeightLayout.loadingItems > .item:nth-child(8) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-7.variableHeightLayout.loadingItems > .item:nth-child(9) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-7.variableHeightLayout.loadingItems > .item:nth-child(10) {
position: absolute;
visibility: hidden; }
@media (min-width: 2080px) and (max-width: 2339px) {
.GridItems.variableHeightLayout.loadingItems > .item:nth-child(-n+8) {
float: left;
position: static;
visibility: visible; } }
.GridItems.max-columns-8 {
/* stylelint-disable-next-line at-rule-no-unknown */ }
.GridItems.max-columns-8.variableHeightLayout.loadingItems > .item:nth-child(9) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-8.variableHeightLayout.loadingItems > .item:nth-child(10) {
position: absolute;
visibility: hidden; }
@media (min-width: 2340px) and (max-width: 2599px) {
.GridItems.variableHeightLayout.loadingItems > .item:nth-child(-n+9) {
float: left;
position: static;
visibility: visible; } }
.GridItems.max-columns-9 {
/* stylelint-disable-next-line at-rule-no-unknown */ }
.GridItems.max-columns-9.variableHeightLayout.loadingItems > .item:nth-child(10) {
position: absolute;
visibility: hidden; }
@media (min-width: 2600px) and (max-width: 2859px) {
.GridItems.variableHeightLayout.loadingItems > .item:nth-child(-n+10) {
float: left;
position: static;
visibility: visible; } }
.GridItems.max-columns-10 {
/* stylelint-disable-next-line at-rule-no-unknown */ }
.GridItems.max-columns-10.variableHeightLayout.loadingItems > .item:nth-child(11) {
position: absolute;
visibility: hidden; }
.GridItems.max-columns-10.variableHeightLayout.loadingItems > .item:nth-child(10) {
position: absolute;
visibility: hidden; }
.GridItems.padItems.variableHeightLayout > .item, .GridItems.padItems.fixedHeightLayout > .item {
margin: 0;
padding: 24px 12px;
width: 236px; }
.GridItems.variableHeightLayout > .item, .GridItemsfixedHeightLayout > .item {
margin: 0;
padding-top: 10px;
width: 236px; }
.GridItems.imageOnlyWeb.padItems.variableHeightLayout > .item, .GridItems.imageOnlyWeb.padItems.fixedHeightLayout > .item {
padding: 12px !important; }
.HelpMenu li {
overflow: hidden;
color: #777;
display: block;
font-size: 12px; }
.HelpMenu li:first-child {
padding-top: 5px; }
.HelpMenu li:last-child {
padding-bottom: 5px; }
.HelpMenu li a {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", sans-serif;
font-weight: bold;
color: #777;
cursor: pointer;
display: block;
padding: 9px 14px; }
.HelpMenu li a:hover {
background: #f1f1f1;
color: #333; }
.HelpMenu li a:active {
background: #eaeaea; }
.HelpMenu li a {
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif;
color: #595959;
font-size: 13px;
font-weight: 600;
padding: 7px 18px; }
.HelpMenu li a:hover {
background-color: #f2f2f2;
color: #333; }
.HelpMenu li a:active {
background-color: #cb2027;
color: #fff; }
.HelpMenu li:first-child {
border-radius: 6px 6px 0 0;
padding-top: 0; }
.HelpMenu li:first-child a {
padding-top: 10px; }
.HelpMenu li:last-child {
border-radius: 0 0 6px 6px;
padding-bottom: 0; }
.HelpMenu li:last-child a {
padding-bottom: 10px; }
.Image {
max-width: 100%;
position: relative; }
.Image > .heightContainer > img {
height: 100%;
position: absolute;
width: 100%; }
.Image.unknownImage > .heightContainer > img {
position: static; }
.Image.gatorUserProfileIcon {
border-radius: 50%;
height: 40px;
overflow: hidden;
width: 40px; }
.Image.gatorFeed {
max-width: 564px; }
.Image.gatorFeed img {
border-radius: 8px;
position: relative; }
.Image.gatorFeedInlineHeader {
border-radius: 4px;
height: 35px;
overflow: hidden;
width: 35px; }
.Image.activityPreviewUserProfile {
border: 2px solid #fff;
border-radius: 50%;
height: 24px;
overflow: hidden;
width: 24px; }
.Image.activityPreviewUserProfile .heightContainer img {
position: absolute; }
.Image.activityPreview {
border-radius: 8px;
height: 100px;
overflow: hidden;
width: 100px; }
.Image.activityPreview .heightContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.Image.activityPreview .heightContainer img {
-o-object-fit: cover;
object-fit: cover;
width: inherit; }
.Image.didItPinRepIcon {
border-radius: 8px;
height: 40px;
overflow: hidden;
width: 40px; }
.Image.didItUserContent {
border-radius: 8px;
overflow: hidden; }
.Image.didItUserContent.profile {
width: 480px; }
.Image.brioBorderRadius img {
border-radius: 8px; }
.Image.boardMessageRep {
height: 50px;
width: 50px; }
.Image.boardMessageRep img {
border-radius: 8px; }
.Image.boardMessageRep.normal {
height: 60px;
width: 60px; }
.ImageBlock .left,
.ImageBlock .right {
display: table-cell;
vertical-align: top; }
.ImageBlock.selectable.selected > .left {
border: 2px solid #bd081c; }
.ImageBlock.selectable.selected > .left img, .ImageBlock.selectable.selected > .left .icon {
border: 2px solid #fff;
margin-left: 1px; }
.ImageBlock .left {
float: left;
margin-right: 10px;
overflow: hidden; }
.ImageBlock .left.smooth {
border-radius: 6px; }
.ImageBlock .left.smooth img {
border-radius: 6px; }
.ImageBlock .left.circle {
border: 2px solid transparent;
border-radius: 50%;
-webkit-transition: border .15s ease-out;
transition: border .15s ease-out; }
.ImageBlock .left.circle img,
.ImageBlock .left.circle .icon {
border: 0;
border-radius: 50%;
box-sizing: border-box;
-webkit-transition: border .15s ease-out;
transition: border .15s ease-out; }
.ImageBlock .left.imageSize_small {
margin-right: 5px; }
.ImageBlock .left.imageSize_small img,
.ImageBlock .left.imageSize_small .icon {
font-size: 18px;
height: 32px;
line-height: 32px;
width: 32px; }
.ImageBlock .left.imageSize_sendShare {
margin-right: 12px; }
.ImageBlock .left.imageSize_sendShare img,
.ImageBlock .left.imageSize_sendShare .icon {
font-size: 18px;
height: 32px;
line-height: 32px;
width: 32px; }
.ImageBlock .left.imageSize_sendShareBrio {
margin-right: 12px; }
.ImageBlock .left.imageSize_sendShareBrio img,
.ImageBlock .left.imageSize_sendShareBrio .icon {
font-size: 18px;
height: 44px;
line-height: 44px;
width: 44px; }
.ImageBlock .left.imageSize_medium {
margin-right: 8px; }
.ImageBlock .left.imageSize_medium img,
.ImageBlock .left.imageSize_medium .icon {
font-size: 28px;
height: 50px;
line-height: 50px;
width: 50px; }
.ImageBlock .left.imageSize_large {
margin-right: 10px; }
.ImageBlock .left.imageSize_large img,
.ImageBlock .left.imageSize_large .icon {
font-size: 36px;
height: 75px;
line-height: 75px;
width: 75px; }
.ImageBlock .left .icon {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif;
background-color: #999;
color: #fff;
display: block;
font-weight: bold;
text-align: center; }
.ImageBlock .left .icon.primary {
background-color: #bd081c; }
.ImageBlock .right .imageBlockContentTitle {
color: #211922;
font-size: 12px;
font-weight: bold; }
.ImageBlock .right .imageBlockContentBody {
font-weight: normal;
margin-top: 4px; }
.ImageBlock.imageBlockDemo .left em {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -38px -176px no-repeat;
display: block;
height: 32px;
width: 32px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ImageBlock.imageBlockDemo .left em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -35px -139px;
background-size: 249px 231px; } }
.ImageBlock.sendShareUserContact {
display: table-row;
height: 32px; }
.ImageBlock.sendShareUserContact .left {
min-width: 34px; }
.ImageBlock.sendShareUserContact .right {
height: 32px;
vertical-align: middle;
width: 100%; }
.ImageBlock.sendShareUserContact .right .imageBlockContentTitle {
color: #666;
font-size: 13px; }
.ImageBlock.sendShareUserContact .right .imageBlockContentBody {
color: #666; }
.ImageBlock.sendShareBrioUserContact {
height: 44px;
padding: 4px 0; }
.ImageBlock.sendShareBrioUserContact .right {
height: 44px;
vertical-align: middle; }
.ImageBlock.sendShareBrioUserContact .right .imageBlockContentTitle {
color: #555;
font-size: 18px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
width: 235px; }
.ImageBlock.sendShareBrioUserContact .right .imageBlockContentBody {
color: #b5b5b5; }
.ImageCrop .holder {
overflow: hidden;
height: 300px;
margin: 15px;
position: relative; }
.ImageCrop .spinner {
background: url(https://s.pinimg.com/webapp/style/images/spinner-a8ae820b.gif) no-repeat center;
bottom: 5px;
display: none;
height: 30px;
left: 0;
position: absolute;
right: 0; }
.ImageCrop .frame {
box-shadow: 0 2px 3px rgba(34, 25, 25, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.3);
position: absolute; }
.ImageCrop .mask {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0; }
.ImageCrop .mask span {
background: #fcf9f9;
opacity: .9;
position: absolute; }
.ImageCrop .bg {
overflow: hidden;
left: 0;
position: absolute;
top: 0; }
.ImageCrop .bg img {
max-width: none;
opacity: .01;
-webkit-transition-duration: .4s;
transition-duration: .4s;
-webkit-transition-property: opacity;
transition-property: opacity; }
.ImageCrop .bg img.in {
opacity: 1; }
.ImageCrop .help {
left: 0;
padding-top: 20px;
position: absolute;
right: 0;
text-align: center;
top: 0; }
.ImageCrop .drag {
background: #fff;
bottom: 0;
cursor: move;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
z-index: 0; }
.ImageUploader {
background-color: #f3f3f3;
background: -webkit-linear-gradient(#ededed, #f9f9f9);
background: linear-gradient(#ededed, #f9f9f9);
border-radius: 0 0 6px 6px;
overflow: hidden;
padding: 15px 20px;
position: relative; }
.ImageUploader.reportBug {
background: #fff;
padding: 0; }
.ImageUploader.loading {
min-height: 0; }
.ImageUploader .disabled input {
display: none; }
.ImageUploader.selected {
background: #f00; }
.ImageUploader .Button.large {
float: left;
font-size: 13px;
margin: -1px;
padding: 6px 12px 7px;
position: relative; }
.ImageUploader div.Button {
box-sizing: border-box;
text-align: center; }
.ImageUploader .hasUploadedImage {
cursor: pointer; }
.ImageUploader .uploaderProgress {
overflow: hidden;
border-radius: 0 6px 6px 0;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.31) inset;
height: 31px;
position: relative;
top: -1px; }
.ImageUploader .uploaderProgress span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
display: block;
float: left;
font-size: 14px;
margin-left: 7px;
margin-top: 4px;
padding: 3px; }
.ImageUploader.didIt {
background: none;
padding: 0; }
.ImageUploader.didIt .uploaderProgress {
box-shadow: none;
height: inherit;
position: absolute;
right: 0; }
.ImageUploader.didIt .uploaderProgress span {
float: none;
margin: 0;
text-align: center; }
.ImageUploader.nextToGestaltmdButton {
padding: 3px 0; }
.ImportantImage {
display: inline-block;
height: 136px;
margin: 0;
width: 136px; }
.ImportantImage.newUserFindFriends {
margin: 0 7px 40px; }
.ImportantImage.nuxModalFindFriends {
margin: 0; }
.IncrementingNavigateButton.hidden {
display: none; }
.InlineHoverButton {
cursor: pointer;
position: absolute;
z-index: 3; }
.InlineHoverButton.deleteComment, .InlineHoverButton.flagComment {
right: 18px;
top: 16px; }
.InlineHoverButton .buttonText {
display: none; }
.InlineHoverButton .flagComment > em {
width: 13px;
height: 14px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -170px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.InlineHoverButton .flagComment > em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -402px -330px;
background-size: 428px 427px; } }
.InlineHoverButton .flagComment:focus em,
.InlineHoverButton .flagComment:active em {
width: 13px;
height: 15px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -120px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.InlineHoverButton .flagComment:focus em,
.InlineHoverButton .flagComment:active em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -402px -286px;
background-size: 428px 427px; } }
.InlineHoverButton .flagComment em {
display: none; }
.InlineHoverButton .deleteComment > em {
width: 12px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -347px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.InlineHoverButton .deleteComment > em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -67px -400px;
background-size: 428px 427px; } }
.InlineHoverButton .deleteComment:focus em,
.InlineHoverButton .deleteComment:active em {
width: 12px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -375px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.InlineHoverButton .deleteComment:focus em,
.InlineHoverButton .deleteComment:active em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -54px -400px;
background-size: 428px 427px; } }
.InlineHoverButton .deleteComment em {
display: none; }
.Input {
overflow: hidden;
border-top: 1px solid #dfdfdf;
padding: 15px 21px 15px 27px;
background-color: #f3f3f3;
background: -webkit-linear-gradient(#f0f0f0, #f5f5f5);
background: linear-gradient(#f0f0f0, #f5f5f5);
box-sizing: border-box;
width: 100%;
border: 1px solid #d6d3ce;
border-radius: 3px;
color: #333;
font-size: 14px;
padding: 7px; }
.Input:first-child {
border: 0; }
.Input:focus {
background: #fff; }
.Input.hasError, .Input.hasWarning {
background: #e6abad;
border-color: #bd081c; }
.Input.disabled {
background-color: #f8f8f8;
background: -webkit-linear-gradient(#f5f5f5, #fafafa);
background: linear-gradient(#f5f5f5, #fafafa);
border-color: #dcdcdc;
color: #999;
cursor: default; }
.safari .Input.disabled {
background-color: #f8f8f8; }
.Input.flat {
background: #fff;
border: 1px solid #c7c7c7;
border-radius: 4px;
box-shadow: none;
color: #333;
font-size: 14px;
padding: 7px; }
.Input.flat:focus {
border-color: #12afe3;
outline: none; }
.Input.flat:disabled {
background-color: #f5f5f5;
color: #b9b9b9; }
.withCurrencySymbol .Input {
border-bottom-left-radius: 0;
border-top-left-radius: 0; }
.Input.searchInput {
padding-right: 30px; }
.Input.bottomBorder {
border: 0;
border-bottom: 1px solid #e3e3e3;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.Input.bottomBorder:focus {
border-color: #e3e3e3; }
.Input.noBorder {
border: 0; }
.Input.searchInputRight {
padding-left: 30px; }
.Input.targetingValueList {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
height: 40px; }
.Label.ellipsis {
overflow: hidden;
text-overflow: ellipsis; }
.Label .subheading {
color: #555;
font-size: smaller;
font-weight: normal; }
.LegacyVideo {
max-width: 100%;
position: relative; }
.LegacyVideo video {
border-radius: 8px;
display: block;
margin: auto; }
.MockInterestFollowButton:not(.primary):not(.followed):not(.disabled) .buttonText {
color: #bd081c; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.Modal {
position: fixed;
top: 0;
z-index: 751; }
.Modal.hide {
opacity: 0; }
.Modal .modalMask {
bottom: 0;
left: 0;
right: 0;
top: 0;
background-color: #e2e4e4;
opacity: 0.9;
position: fixed; }
.Modal .modalMask.dark {
background-color: #000;
opacity: .5; }
.Modal .modalMask.shadow {
background-color: #000;
opacity: .8; }
.Modal .modalMask.transparent {
background-color: transparent; }
.Modal .modalScroller {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
bottom: 0;
left: 0;
right: 0;
top: 0;
position: fixed; }
.Modal.absoluteCenter .modalScroller {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: distribute;
justify-content: space-around; }
.Modal .modalContainer {
min-height: 0;
position: relative;
text-align: center; }
.Modal.fullScreen .modalContainer {
height: 100%; }
.Modal.fullScreen .modalContent {
display: block;
height: 100%;
margin-bottom: 0;
margin-top: 0; }
.Modal.fullScreen .modalModule {
height: 100%; }
.Modal.fullScreen .modalModule > * {
height: 100%;
width: 100%; }
.Modal.panel .modalContent {
background: transparent;
box-shadow: none;
opacity: 1; }
.Modal.panel .modalModule {
-webkit-transform: translateZ(0);
overflow: hidden;
border-radius: 0 5px 5px 0;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); }
.Modal.panel .modalContainer {
-webkit-transform: translateZ(0);
background: transparent;
border-radius: 0 5px 5px 0;
bottom: 0;
box-shadow: none;
left: 0;
position: fixed;
top: 0;
visibility: hidden; }
.Modal.panel .modalContainer.show {
visibility: visible; }
.Modal.panel .modalScroller {
overflow: hidden; }
.Modal.panel .modalMask {
opacity: 0;
-webkit-transition: opacity .3s;
transition: opacity .3s; }
.Modal.panel .modalMask.show {
opacity: 1; }
.Modal.panel.panelRight .modalContainer {
left: auto;
right: 0; }
.Modal .fastFollowModalContainer .closeModal {
right: 10px;
top: 10px; }
.Modal .closeModal {
-webkit-transform: translateZ(0);
display: none; }
.Modal .closeModal.show {
display: block; }
.Modal .positionModuleElement.modalContainer {
display: block;
padding-bottom: 0;
position: fixed; }
.Modal .positionModuleElement.modalContainer .modalContent {
margin: 0; }
.Modal .mobileModal {
margin: auto 3%; }
.Modal .modalContent {
-webkit-transform: translateZ(0);
background: #fff;
border-radius: 6px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
display: inline-block;
margin: 20px auto;
opacity: 0;
position: relative;
text-align: left; }
.Modal .modalContent.addPinToMapWrapper {
background: rgba(255, 255, 255, 0.82); }
.Modal .modalContent.transparent {
background: transparent;
box-shadow: none; }
.Modal.show .modalContent {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); }
.Modal.registerNux {
height: 100%;
position: absolute;
width: 100%; }
.Modal.registerNux .modalMask {
background-color: #efefef;
opacity: 1;
position: absolute;
width: 100%; }
.Modal.registerNux .modalScroller {
position: absolute;
width: 100%; }
.Modal.registerNux .modalContent {
box-shadow: none;
width: 100% !important; }
.Modal.registerNux .modalContainer {
margin: 0 !important; }
.Modal.webNewContentNewRepin .modalMask {
background-color: #0a0e13; }
.Modal.webNewContentNewRepin .modalMask.animateOut {
-webkit-transform: translateZ(0);
-webkit-animation: fadeOutToTransparentFromEightyPercent .2s ease-out;
animation: fadeOutToTransparentFromEightyPercent .2s ease-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; }
.Modal.webNewContentNewRepin .modalContent {
background: transparent;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.6); }
.Modal.webNewContentNewRepin .modalContent::after {
clear: both;
content: "";
display: table; }
.Modal.webNewContentNewRepin .closeModal {
display: none; }
.Modal.sterlingPinEditModal .modalContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 450px; }
.Modal.flashlightModal .modalContainer {
width: 100%; }
.Modal.flashlightModal .modalMask {
background-color: #f6f6f6;
opacity: .98; }
.Modal.flashlightModal .modalContent {
background: transparent;
bottom: 0;
box-shadow: none;
display: block;
left: 0;
margin: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transform: none;
transform: none; }
.Modal.flashlightModal .closeModal {
margin-right: 21px;
margin-top: 10px;
position: fixed; }
.Modal.flashlightModal .closeModal em {
width: 17px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -358px -342px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Modal.flashlightModal .closeModal em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -88px -375px;
background-size: 428px 427px; } }
.Modal.flashlightModal .closeModal:hover em,
.Modal.flashlightModal .closeModal:active em,
.Modal.flashlightModal .closeModal:focus em {
width: 17px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -339px -342px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Modal.flashlightModal .closeModal:hover em,
.Modal.flashlightModal .closeModal:active em,
.Modal.flashlightModal .closeModal:focus em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -70px -375px;
background-size: 428px 427px; } }
.Modal.flashlightModal .modalScroller {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: initial;
flex-direction: initial; }
.Modal.homefeedBuilderModal .closeModal {
height: 24px;
right: 40px;
top: 40px;
width: 24px;
z-index: 11; }
.Modal.homefeedBuilderModal .closeModal em {
width: 17px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -358px -342px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Modal.homefeedBuilderModal .closeModal em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -88px -375px;
background-size: 428px 427px; } }
.Modal.homefeedBuilderModal .closeModal:hover em,
.Modal.homefeedBuilderModal .closeModal:active em,
.Modal.homefeedBuilderModal .closeModal:focus em {
width: 17px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -339px -342px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Modal.homefeedBuilderModal .closeModal:hover em,
.Modal.homefeedBuilderModal .closeModal:active em,
.Modal.homefeedBuilderModal .closeModal:focus em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -70px -375px;
background-size: 428px 427px; } }
.Modal.exploreTabStoryModal .modalContent {
border-radius: 16px; }
.Modal.exploreTabStoryModal .closeModal {
height: 24px;
right: 40px;
top: 40px;
width: 24px; }
.Modal.exploreTabStoryModal .closeModal em {
width: 17px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -358px -342px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Modal.exploreTabStoryModal .closeModal em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -88px -375px;
background-size: 428px 427px; } }
.Modal.exploreTabStoryModal .closeModal:hover em,
.Modal.exploreTabStoryModal .closeModal:active em,
.Modal.exploreTabStoryModal .closeModal:focus em {
width: 17px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -339px -342px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Modal.exploreTabStoryModal .closeModal:hover em,
.Modal.exploreTabStoryModal .closeModal:active em,
.Modal.exploreTabStoryModal .closeModal:focus em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -70px -375px;
background-size: 428px 427px; } }
.Modal.appUpsellModal .closeModal {
height: 18px;
right: 30px;
top: 20px;
width: 18px; }
.Modal.appUpsellModal .closeModal em {
width: 17px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -358px -342px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Modal.appUpsellModal .closeModal em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -88px -375px;
background-size: 428px 427px; } }
.Modal.appUpsellModal .closeModal:hover em,
.Modal.appUpsellModal .closeModal:active em,
.Modal.appUpsellModal .closeModal:focus em {
width: 17px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -339px -342px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Modal.appUpsellModal .closeModal:hover em,
.Modal.appUpsellModal .closeModal:active em,
.Modal.appUpsellModal .closeModal:focus em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -70px -375px;
background-size: 428px 427px; } }
.Modal.appUpsellModal .modalMask {
top: 64px; }
.Modal.appUpsellModal .modalScroller {
top: 64px; }
.Modal.fullScreenWhiteModal .modalMask {
background-color: #fff; }
.Modal.fullScreenWhiteModal .modalScroller {
overflow-x: auto;
overflow-y: hidden; }
.Modal.fullScreenWhiteModal .closeModal {
position: fixed;
right: 14px;
top: 18px;
z-index: 1000; }
.Modal.fullScreenWhiteModal .closeModal em {
width: 17px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -358px -342px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Modal.fullScreenWhiteModal .closeModal em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -88px -375px;
background-size: 428px 427px; } }
.Modal.fullScreenWhiteModal .closeModal:hover em,
.Modal.fullScreenWhiteModal .closeModal:active em,
.Modal.fullScreenWhiteModal .closeModal:focus em {
width: 17px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -339px -342px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Modal.fullScreenWhiteModal .closeModal:hover em,
.Modal.fullScreenWhiteModal .closeModal:active em,
.Modal.fullScreenWhiteModal .closeModal:focus em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -70px -375px;
background-size: 428px 427px; } }
.Modal.confirmDialogModal {
z-index: 1001; }
/* desktop.scss */
.Modal .modalMask,
.Modal.webNewContentNewRepin .modalMask,
.ReactModal__Overlay {
background-color: rgba(0, 0, 0, 0.6);
opacity: 1; }
.Modal.flashlightModal .modalMask {
background: #fff; }
.Modal .modalContent,
.Modal.webNewContentNewRepin .modalContent {
border-radius: 8px;
box-shadow: none; }
.Modal .formFooter,
.ReactModal__Content .formFooter {
background: #fff; }
.Modal.fullScreenWhiteModal .modalMask {
background: #fff; }
.ModuleCycler .navigation {
opacity: 0;
position: absolute;
-webkit-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
width: 236px;
z-index: 101; }
.ModuleCycler .navigation .navigator {
position: absolute; }
.ModuleCycler .navigation .navigator em {
cursor: pointer;
display: inline-block;
margin-top: -24px; }
.ModuleCycler .navigation .navigator.disabled {
display: none; }
.ModuleCycler .navigation .navigator.leftArrow {
left: 0; }
.ModuleCycler .navigation .navigator.leftArrow em {
width: 35px;
height: 85px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -339px 0 no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ModuleCycler .navigation .navigator.leftArrow em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -334px 0;
background-size: 399px 382px; } }
.ModuleCycler .navigation .navigator.rightArrow {
right: 0;
text-align: right; }
.ModuleCycler .navigation .navigator.rightArrow em {
width: 35px;
height: 85px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -302px 0 no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ModuleCycler .navigation .navigator.rightArrow em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -298px 0;
background-size: 399px 382px; } }
.MultipleSelectButton {
display: inline-block;
vertical-align: baseline; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.NavigateButton.linkModuleActionButton.btn.hasText {
font-size: 14px;
height: 34px;
margin-top: 0; }
.NavigateButton.inlineBlock {
display: inline-block; }
.NavigateButton .accessibilityText {
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
position: absolute; }
/* desktop.scss */
.NavigateButton.borderless.homeUnauthTertiary, .NavigateButton.borderless.homeUnauthTertiaryHorizontal {
background: rgba(0, 0, 0, 0.4);
border-radius: 6px;
bottom: 15px;
color: #fff;
display: block;
font-size: 11px;
font-weight: bold;
margin-bottom: 6px;
max-width: 135px;
padding: 4px 7px;
text-align: center; }
.NavigateButton.borderless.homeUnauthTertiary span, .NavigateButton.borderless.homeUnauthTertiaryHorizontal span {
overflow: hidden;
text-overflow: ellipsis;
display: block; }
.NavigateButton.borderless.homeUnauthTertiary:hover, .NavigateButton.borderless.homeUnauthTertiaryHorizontal:hover {
background: rgba(0, 0, 0, 0.6); }
.UnauthHomePage.inModal .NavigateButton.borderless.homeUnauthTertiary {
background: transparent;
bottom: 0;
color: #333;
display: inline;
margin-bottom: 0;
max-width: 100%;
padding-left: 10px;
padding-right: 10px;
padding-top: 0; }
.UnauthHomePage.inModal .NavigateButton.borderless.homeUnauthTertiary span {
display: inline; }
.UnauthHomePage.inModal .NavigateButton.borderless.homeUnauthTertiary:hover {
text-decoration: underline; }
.NavigateButton.borderless.homeUnauthTertiaryHorizontal {
background: none;
display: inline; }
.NavigateButton.borderless.homeUnauthTertiaryHorizontal a, .NavigateButton.borderless.homeUnauthTertiaryHorizontal span {
display: inline; }
.NavigateButton.borderless.homeUnauthTertiaryHorizontal:hover {
background: none; }
.NavigateButton.loginButton {
background: #555;
border: 0;
color: #fff;
display: inline-block;
font-size: 14px;
font-weight: bold;
padding: 10px 20px;
text-shadow: none; }
.NavigateButton.exploreButton {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #fafafa;
background: -webkit-linear-gradient(#fff, #f5f5f5);
background: linear-gradient(#fff, #f5f5f5);
background-color: #f5f5f5;
border: 1px solid #d4d4d4;
border-radius: 6px 0 0 6px;
box-sizing: border-box;
color: #818181;
cursor: pointer;
display: inline-block;
outline: none;
position: relative;
text-align: left;
z-index: 104;
background: transparent;
border: none;
margin-right: 0;
vertical-align: middle; }
.NavigateButton.exploreButton::after {
clear: both;
content: "";
display: table; }
.NavigateButton.exploreButton:focus, .NavigateButton.exploreButton:hover {
background: -webkit-linear-gradient(#fff, #eee);
background: linear-gradient(#fff, #eee);
border-color: #c0c0c0;
border-radius: 6px 0 0 6px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07);
z-index: 105; }
.NavigateButton.exploreButton:focus .buttonText, .NavigateButton.exploreButton:hover .buttonText {
color: #818181;
text-shadow: none; }
.NavigateButton.exploreButton em {
width: 25px;
height: 25px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -147px -260px no-repeat;
float: left; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NavigateButton.exploreButton em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -144px -256px;
background-size: 399px 382px; } }
.NavigateButton.exploreButton:hover, .NavigateButton.exploreButton:focus {
background: none;
box-shadow: none; }
.NavigateButton.exploreButton:hover > em {
width: 25px;
height: 25px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -174px -260px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NavigateButton.exploreButton:hover > em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -170px -256px;
background-size: 399px 382px; } }
.NavigateButton.labeledNavbarButton {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 4px 0 0;
width: 80px; }
.NavigateButton.labeledNavbarButton .buttonText {
color: #b3b3b3;
font-size: 12px;
text-align: center;
text-shadow: none; }
.NavigateButton.labeledNavbarButton em {
margin: auto;
margin-bottom: 2px; }
.NavigateButton.labeledNavbarButton.exploreButton em {
margin-bottom: 1px; }
.NavigateButton.labeledNavbarButton .accessibilityText {
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
position: absolute; }
.NavigateButton.labeledNavbarButton:hover svg, .NavigateButton.labeledNavbarButton.active svg {
color: #555; }
.NavigateButton.labeledNavbarButton:hover .buttonText, .NavigateButton.labeledNavbarButton.active .buttonText {
color: #555; }
.PagedCollection .moreItemsContainer {
text-align: center; }
.PagedCollection .moreItemsContainer.loading {
position: relative; }
.PagedCollection .moreItemsContainer.loading .Button {
visibility: hidden; }
.PagedCollection .moreItemsContainer.hidden {
display: none; }
.PagedGrid.forceVerticalScroll::-webkit-scrollbar {
height: auto;
width: 11px;
-webkit-appearance: none; }
.PagedGrid.forceVerticalScroll::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5);
border: 2px solid #fff;
border-radius: 8px;
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); }
.PagedGrid.forceVerticalScroll .fixedHeightLayout {
overflow-x: hidden; }
.PagedGrid .Grid {
margin: 0; }
.PagedGrid .moreItems {
margin-top: 10px;
width: 100%; }
.PagedGrid .moreItems.hide {
display: none; }
.PagedGrid.padItems .moreItemsContainer {
margin-left: 7px;
margin-right: 7px; }
.Picker .createButton {
float: right; }
.Picker .nameWrapper {
overflow: hidden;
padding-right: 10px; }
.Picker .nameWrapper.withoutCreate {
padding-right: 0; }
.Picker .name {
width: 100%; }
.Picker .top {
overflow: hidden;
margin-bottom: 9px; }
.Picker .selectionBody {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
overflow-y: auto;
padding-bottom: 7px; }
.Picker .itemSection {
background: #fff6c4;
border-radius: 6px;
color: #615e4b;
margin-bottom: 3px;
padding: 6px 13px; }
.Picker .itemSection h2 {
font-size: 13px; }
.Picker .item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 6px;
color: #555;
cursor: pointer;
padding: 6px 13px; }
.Picker .item:hover {
background-color: #f7f7f7; }
.Picker .selected {
background: #bd081c;
color: #fff; }
.Picker .normalItem,
.Picker .createItem .createName,
.Picker .createSuggestionItem {
font-weight: bold; }
.PickerItemCreate .createLabel {
font-weight: normal; }
.PickerItemCreate.normal .icon {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -38px -176px no-repeat;
border-radius: 3px;
display: inline-block;
margin-right: 10px;
vertical-align: middle; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.PickerItemCreate.normal .icon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -35px -139px;
background-size: 249px 231px; } }
.PickerItemCreate.pinCreate {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border: 0;
color: #555;
cursor: pointer;
font-size: 16px;
font-weight: bold;
letter-spacing: -.25px;
line-height: 35px; }
.PickerItemCreate.pinCreate .icon {
width: 36px;
height: 36px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) 0 -176px no-repeat;
display: block;
float: left;
margin-right: 12px;
vertical-align: middle; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.PickerItemCreate.pinCreate .icon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -166px -96px;
background-size: 249px 231px; } }
.PickerItemCreate.pinCreate.createSuggestion {
color: #b5b5b5;
overflow: hidden;
padding: 0 22px;
text-overflow: ellipsis; }
.PickerItemCreate.pinCreate.createSuggestion:hover {
color: #555; }
.PickerItemCreate.pinCreate.createSuggestion:hover .icon {
width: 20px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -342px -219px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.PickerItemCreate.pinCreate.createSuggestion:hover .icon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -378px -237px;
background-size: 428px 427px; } }
.PickerItemCreate.pinCreate.createSuggestion .icon {
width: 20px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -68px -418px no-repeat;
margin: 9px 20px 9px 9px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.PickerItemCreate.pinCreate.createSuggestion .icon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -378px -300px;
background-size: 428px 427px; } }
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */
.PositionModule > .Module {
display: none; }
.modalPinIntro .positionModuleElement.defaultCaret.positionLeft {
z-index: 999999999; }
.positionModuleElement {
-webkit-transform: translateZ(0);
background: #fff;
border-radius: 6px;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.07);
display: none;
position: absolute;
z-index: 685; }
.positionModuleElement.defaultCaret.positionBottom {
margin-top: 11px; }
.positionModuleElement.defaultCaret.positionBottom .positionModuleCaret {
width: 20px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -135px -265px no-repeat;
top: -11px; }
.positionModuleElement.defaultCaret.positionLeft {
margin-left: -11px; }
.positionModuleElement.defaultCaret.positionLeft .positionModuleCaret {
width: 11px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -258px -132px no-repeat;
right: -10px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.positionModuleElement.defaultCaret.positionLeft .positionModuleCaret {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -234px -37px;
background-size: 249px 231px; } }
.positionModuleElement.defaultCaret.positionRight {
margin-left: 11px; }
.positionModuleElement.defaultCaret.positionRight .positionModuleCaret {
width: 11px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -276px -222px no-repeat;
left: -10px; }
.positionModuleElement.defaultCaret.positionTop {
margin-top: -9px; }
.positionModuleElement.defaultCaret.positionTop .positionModuleCaret {
width: 18px;
height: 9px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -149px -86px no-repeat;
bottom: -8px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.positionModuleElement.defaultCaret.positionTop .positionModuleCaret {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -19px -222px;
background-size: 249px 231px; } }
.positionModuleElement.bigCaret.positionBottom {
margin-top: 13px; }
.positionModuleElement.bigCaret.positionBottom .positionModuleCaret {
width: 27px;
height: 13px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) 0 -265px no-repeat;
top: -13px; }
.positionModuleElement.bigCaret.positionLeft {
margin-left: -13px; }
.positionModuleElement.bigCaret.positionLeft .positionModuleCaret {
width: 13px;
height: 27px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -276px -113px no-repeat;
right: -12px; }
.positionModuleElement.bigCaret.positionRight {
margin-left: 13px; }
.positionModuleElement.bigCaret.positionRight .positionModuleCaret {
width: 13px;
height: 27px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -276px -55px no-repeat;
left: -12px; }
.positionModuleElement.bigCaret.positionTop {
margin-top: -13px; }
.positionModuleElement.bigCaret.positionTop .positionModuleCaret {
width: 27px;
height: 13px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -29px -265px no-repeat;
bottom: -12px; }
.positionModuleElement.defaultCaret.positionBottom .positionModuleCaret.lightGrayCaretStyle {
width: 18px;
height: 9px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -189px -86px no-repeat; }
.positionModuleElement.defaultCaret.positionLeft .positionModuleCaret.lightGrayCaretStyle {
width: 11px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -259px -44px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.positionModuleElement.defaultCaret.positionLeft .positionModuleCaret.lightGrayCaretStyle {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -234px -58px;
background-size: 249px 231px; } }
.positionModuleElement.defaultCaret.positionRight .positionModuleCaret.lightGrayCaretStyle {
width: 9px;
height: 18px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -315px 0 no-repeat; }
.positionModuleElement.defaultCaret.positionTop .positionModuleCaret.lightGrayCaretStyle {
width: 18px;
height: 9px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -169px -86px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.positionModuleElement.defaultCaret.positionTop .positionModuleCaret.lightGrayCaretStyle {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -184px -78px;
background-size: 249px 231px; } }
.positionModuleElement.bigCaret.positionBottom .positionModuleCaret.lightGrayCaretStyle {
width: 27px;
height: 13px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -240px -176px no-repeat; }
.positionModuleElement.bigCaret.positionLeft .positionModuleCaret.lightGrayCaretStyle {
width: 13px;
height: 27px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -276px -26px no-repeat; }
.positionModuleElement.bigCaret.positionRight .positionModuleCaret.lightGrayCaretStyle {
width: 13px;
height: 27px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -276px -171px no-repeat; }
.positionModuleElement.bigCaret.positionTop .positionModuleCaret.lightGrayCaretStyle {
width: 27px;
height: 13px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -58px -265px no-repeat; }
.positionModuleElement.defaultCaret.positionBottom .positionModuleCaret.userEdBlueCaretStyle {
width: 36px;
height: 22px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -138px -176px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.positionModuleElement.defaultCaret.positionBottom .positionModuleCaret.userEdBlueCaretStyle {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -132px -139px;
background-size: 249px 231px; } }
.positionModuleElement.defaultCaret.positionLeft .positionModuleCaret.userEdBlueCaretStyle {
width: 13px;
height: 24px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -40px no-repeat; }
.positionModuleElement.defaultCaret.positionRight .positionModuleCaret.userEdBlueCaretStyle {
width: 13px;
height: 24px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -66px no-repeat; }
.positionModuleElement.defaultCaret.positionTop .positionModuleCaret.userEdBlueCaretStyle {
width: 24px;
height: 13px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -87px -265px no-repeat; }
.positionModuleElement.defaultCaret.positionBottom .positionModuleCaret.whiteWashCaretStyle {
width: 20px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -113px -265px no-repeat; }
.positionModuleElement.defaultCaret.positionLeft .positionModuleCaret.whiteWashCaretStyle {
width: 11px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -276px -200px no-repeat; }
.positionModuleElement.defaultCaret.positionRight .positionModuleCaret.whiteWashCaretStyle {
width: 11px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -259px -66px no-repeat; }
.positionModuleElement.defaultCaret.positionTop .positionModuleCaret.whiteWashCaretStyle {
width: 18px;
height: 9px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -129px -86px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.positionModuleElement.defaultCaret.positionTop .positionModuleCaret.whiteWashCaretStyle {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: 0 -222px;
background-size: 249px 231px; } }
.positionModuleElement.bigCaret.positionBottom .positionModuleCaret.whiteWashCaretStyle {
width: 27px;
height: 13px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -232px -242px no-repeat; }
.positionModuleElement.bigCaret.positionLeft .positionModuleCaret.whiteWashCaretStyle {
width: 13px;
height: 27px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -276px -84px no-repeat; }
.positionModuleElement.bigCaret.positionRight .positionModuleCaret.whiteWashCaretStyle {
width: 13px;
height: 27px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -276px -142px no-repeat; }
.positionModuleElement.bigCaret.positionTop .positionModuleCaret.whiteWashCaretStyle {
width: 27px;
height: 13px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -203px -242px no-repeat; }
.positionModuleElement.defaultCaret.positionBottom .positionModuleCaret.fpxBlueCaretStyle {
width: 20px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -191px -120px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.positionModuleElement.defaultCaret.positionBottom .positionModuleCaret.fpxBlueCaretStyle {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -163px -78px;
background-size: 249px 231px; } }
.positionModuleElement.defaultCaret.positionLeft .positionModuleCaret.fpxBlueCaretStyle {
width: 11px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -259px -88px no-repeat; }
.positionModuleElement.defaultCaret.positionRight .positionModuleCaret.fpxBlueCaretStyle {
width: 11px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -259px -110px no-repeat; }
.positionModuleElement.defaultCaret.positionTop .positionModuleCaret.fpxBlueCaretStyle {
width: 20px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -157px -265px no-repeat; }
.positionModuleElement.active {
display: block;
min-height: 50px;
min-width: 50px; }
.positionModuleElement.positionModuleFixed {
position: fixed;
z-index: 686; }
.positionModuleElement.positionModuleFixed .positionModuleCaret {
z-index: 687; }
.positionModuleElement.large {
min-height: 0; }
.positionModuleElement.aboveModal.positionModuleFixed {
z-index: 752; }
.positionModuleElement.aboveModal.positionModuleFixed .positionModuleCaret {
z-index: 753; }
.positionModuleElement .positionModuleCaret {
position: absolute;
z-index: 686; }
.positionModuleElement .positionModuleCaret.gsHeaderIntroLastStepCaretStyle {
left: 20px !important; }
.positionModuleElement > .Module {
display: block; }
.positionModuleElement.defaultCaret.positionBottom .positionModuleCaret {
width: 29px;
height: 15px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -237px -296px no-repeat;
height: 11px !important; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.positionModuleElement.defaultCaret.positionBottom .positionModuleCaret {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -227px -292px;
background-size: 399px 382px; } }
.Progress {
overflow: hidden; }
.Progress li {
float: left;
margin-right: 4px; }
.Progress.hidden {
display: none; }
.Progress.round li {
background: #cfcfcf;
border-radius: 8px;
font-size: 0;
height: 8px;
overflow: hidden;
text-indent: -9999em;
width: 8px; }
.Progress.numerical li,
.Progress.numericalCheck li {
border-radius: 3px;
font-weight: bold;
height: 24px;
line-height: 24px;
text-align: center;
width: 24px; }
.Progress li.active {
background: #cd1d1f;
color: #fff; }
.Progress li.leftRounded {
border-radius: 3px 0 0; }
.Progress li.rightRounded {
border-radius: 0 3px 0 0; }
.Progress.numericalCheck li {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset;
color: #777;
height: 28px;
line-height: 28px;
margin: 0 0 0 7px;
position: relative;
width: 28px; }
.Progress.numericalCheck li .completed {
width: 13px;
height: 10px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -427px no-repeat;
display: none;
left: 8px;
position: absolute;
top: 9px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Progress.numericalCheck li .completed {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -149px -400px;
background-size: 428px 427px; } }
.Progress.numericalCheck li.active {
font: 0 / 0 serif;
text-shadow: none;
color: transparent; }
.Progress.numericalCheck li.active .completed {
display: block; }
.Progress.bar li {
float: left;
font-size: 0;
height: 10px;
margin-right: 0;
overflow: hidden;
text-align: center;
text-indent: -9999em;
width: 0; }
.Progress.bar li .dot {
border-radius: 3px;
display: inline-block;
height: 3px;
margin-top: 3px;
width: 3px; }
.Progress.bar li.first {
border-radius: 3px 0 0; }
.Progress.bar li.last {
border-radius: 0 3px 0 0; }
.Progress.bar li.interest, .Progress.bar li.extension, .Progress.bar li.building_homefeed {
background-color: #d9d9d9; }
.Progress.bar li.interest .dot, .Progress.bar li.extension .dot, .Progress.bar li.building_homefeed .dot {
background-color: #a3a3a3; }
.Progress.bar li.interest.active, .Progress.bar li.extension.active, .Progress.bar li.building_homefeed.active {
background-color: #cb2027; }
.Progress.bar li.interest.active .dot, .Progress.bar li.extension.active .dot, .Progress.bar li.building_homefeed.active .dot {
background-color: #7a1317; }
.Progress.bar li.facebook {
background-color: #b2b2b2; }
.Progress.bar li.facebook .dot {
background-color: #fff; }
.Progress.bar li.facebook.active {
background-color: #3c5b9b; }
.Progress.bar li.facebook.active .dot {
background-color: #fff; }
.Progress.bar li.twitter {
background-color: #b2b2b2; }
.Progress.bar li.twitter .dot {
background-color: #fff; }
.Progress.bar li.twitter.active {
background-color: #5fa9dd; }
.Progress.bar li.twitter.active .dot {
background-color: #fff; }
.ProgressMinistep {
float: left; }
.RadioButton {
display: inline-block;
vertical-align: middle; }
.RadioButton.fancy {
width: 21px;
height: 21px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -69px -242px no-repeat;
position: relative; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.RadioButton.fancy {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -208px -70px;
background-size: 249px 231px; } }
.RadioButton.fancy.fancySelected {
width: 21px;
height: 21px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -23px -242px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.RadioButton.fancy.fancySelected {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -208px -48px;
background-size: 249px 231px; } }
.RadioButton.fancy input {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%; }
.Dropdown .RadioGroup {
min-width: 0; }
.Dropdown .RadioGroup li:first-child {
border-radius: 6px 6px 0 0; }
.Dropdown .RadioGroup li:last-child {
border-radius: 0 0 6px 6px; }
.Dropdown .RadioGroup li:hover {
background-color: #eee; }
.RadioGroup.noRadioButtons li label {
padding: 15px 30px 15px 10px; }
.RadioGroup.noRadioButtons li label .labelContent {
margin-left: 0; }
.RadioGroup.noRadioButtons .RadioButton {
display: none; }
.RadioGroup.paginatedTableControl {
max-height: 264px;
overflow-y: scroll; }
.SearchForm {
position: relative;
text-align: left;
width: 194px; }
.SearchForm.guided {
/* stylelint-disable-next-line at-rule-no-unknown */
/* Fix for Chrome 44 bug: https://code.google.com/p/chromium/issues/detail?id=506893 */
box-sizing: border-box;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
height: auto;
min-height: 0;
/* 1 */
min-width: 0;
/* 1 */
width: auto; }
.SearchForm.guided.buttonOnRight {
margin-right: 0; }
.SearchForm.guided.buttonOnRight.tutorialHighlight {
border-left: 1px solid #d4d4d4;
border-radius: 0;
border-right: 1px solid #d4d4d4;
height: 34px !important;
margin: 0 !important; }
.SearchForm.guided.openSearch {
display: block;
height: auto;
margin-left: 10px;
margin-top: 0;
overflow: visible;
width: 194px; }
.SearchForm.fit {
max-width: auto; }
.SearchForm.fit .TypeaheadField {
width: 100%; }
.SearchForm.gigantic {
width: 100%; }
.SearchForm.gigantic .TypeaheadField {
width: 92%; }
.SearchForm.gigantic .submit {
width: 30px;
height: 30px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -202px -384px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
right: 10px;
top: 12px;
z-index: 667; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SearchForm.gigantic .submit {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -318px -342px;
background-size: 428px 427px; } }
.SearchForm.gigantic .submit:hover {
width: 30px;
height: 30px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -234px -384px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SearchForm.gigantic .submit:hover {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -287px -342px;
background-size: 428px 427px; } }
.SearchForm.gigantic.ignition {
color: #151515;
font-size: 21px;
margin: 0 auto;
width: 736px; }
.SearchForm.gigantic.ignition .TypeaheadField {
width: 100%; }
.SearchForm.gigantic.ignition input {
padding-left: 50px; }
.SearchForm.gigantic.ignition .submit {
width: 27px;
height: 26px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -442px -344px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
left: 12px;
top: 15px;
z-index: 667; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SearchForm.gigantic.ignition .submit {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -216px -201px;
background-size: 428px 427px; } }
.SearchForm .TypeaheadField {
float: left;
width: 194px; }
.SearchForm .TypeaheadField.guided {
display: block;
float: none;
width: 100%; }
.SearchForm .submit {
width: 16px;
height: 17px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -190px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
background-color: transparent;
border: 0;
position: absolute;
right: 9px;
top: 7px;
z-index: 671; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SearchForm .submit {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -173px -201px;
background-size: 249px 231px; } }
.SearchForm .submit.newSearchForm {
display: none; }
.SearchForm .submit:hover {
width: 16px;
height: 17px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -209px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SearchForm .submit:hover {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -156px -201px;
background-size: 249px 231px; } }
.SearchForm.drawerNav {
box-sizing: border-box;
height: 34px; }
.SearchForm.drawerNav .tokenizedInputWrapper {
background-color: #f0f0f0;
border-color: #d9d9d9; }
.SearchForm.drawerNav .TypeaheadField.drawerNav {
width: 100%; }
.SelectButton {
display: inline-block;
vertical-align: baseline; }
.SelectList {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
position: relative; }
.SelectList .hidden {
display: none; }
.SelectList.compact:focus {
background-color: rgba(255, 255, 255, 0.4); }
.SelectList.compact .sectionHeading {
background: #fff6c4;
border-radius: 6px;
color: #615e4b;
margin-bottom: 3px;
padding: 6px 13px; }
.SelectList.compact .item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 3px;
color: #333;
cursor: pointer;
font-weight: bold;
padding: 6px 13px; }
.SelectList.compact .item:hover {
background-color: #ebe8e8; }
.SelectList.compact .item.selected {
background: #bd081c;
color: #fff; }
.SelectList.normal .sections {
background: #fff;
border-radius: 3px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.18);
margin: 10px; }
.SelectList.normal li {
border-bottom: 1px solid #e3e3e3; }
.SelectList.normal .sectionHeading {
color: #717171;
font-weight: normal;
padding: 10px; }
.SelectList.normal .item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 6px;
color: #333;
cursor: pointer;
font-weight: bold;
padding: 10px; }
.SelectList.normal .item:hover {
background-color: #ebe8e8; }
.SelectList.normal .item.selected {
background: #bd081c; }
.SelectList.normal.sterlingList {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
font-size: 14px;
width: 300px; }
.SelectList.normal.sterlingList.halfSizePicker {
width: 146px; }
.SelectList.normal.sterlingList.adGroupList {
width: 356px; }
.SelectList.normal.sterlingList.sterlingListNoFilter {
border-radius: 6px; }
.SelectList.normal.sterlingList.sterlingListNoFilter .sectionItems li.item {
font-weight: bold; }
.SelectList.normal.sterlingList .sectionItems {
box-shadow: none; }
.SelectList.normal.sterlingList .sectionItems li.item {
border-bottom: 0;
border-radius: 0;
border-top: 1px solid #eee;
font-weight: normal;
padding: 8.5px 10px; }
.SelectList.normal.sterlingList .sectionItems li.item.selected {
background: #ddd;
color: #333; }
.SelectList.normal.sterlingList .sections {
margin: 0; }
.SelectList.normal.sterlingList .section:not(:first-child) li.item {
padding: 16.5px 10px; }
.SelectList.normal.sterlingList .sectionItems .item {
background-color: #fff;
font-weight: normal; }
.SocialTypeaheadField.socialSearchDemo {
width: 300px; }
.SocialTypeaheadField.sendShare, .SocialTypeaheadField.sendShareBrio {
display: block; }
.SocialTypeaheadField.sendShare.flex, .SocialTypeaheadField.sendShareBrio.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden; }
.SocialTypeaheadField.sendShare.compact .searchIconInputWrapper, .SocialTypeaheadField.sendShareBrio.compact .searchIconInputWrapper {
padding: 4px 8px; }
.SocialTypeaheadField.sendShare.compact .searchIconInputWrapper > input, .SocialTypeaheadField.sendShareBrio.compact .searchIconInputWrapper > input {
border-radius: 3px;
padding-bottom: 8px;
padding-top: 8px; }
.SocialTypeaheadField.sendShare.compact .searchIcon, .SocialTypeaheadField.sendShareBrio.compact .searchIcon {
margin: 7px; }
.SocialTypeaheadField.sendShare input, .SocialTypeaheadField.sendShareBrio input {
background: #efefef;
border-bottom: 0;
border-radius: 3px;
font-size: 18px;
font-weight: bold; }
.SocialTypeaheadField.sendShare input:focus, .SocialTypeaheadField.sendShareBrio input:focus {
background: #efefef;
outline: none; }
.SocialTypeaheadField.sendShare input {
padding-left: 44px; }
.SocialTypeaheadField.sendShare .searchIconInputWrapper {
border-bottom: 1px solid #ddd;
padding: 10px; }
.SocialTypeaheadField.sendShare .searchIcon {
width: 18px;
height: 18px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -238px -418px no-repeat;
margin: 12px;
position: absolute; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SocialTypeaheadField.sendShare .searchIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -15px -375px;
background-size: 428px 427px; } }
.SocialTypeaheadField.sendShareBrio input {
padding-left: 56px; }
.SocialTypeaheadField.sendShareBrio .searchIconInputWrapper {
padding: 20px 20px 16px; }
.SocialTypeaheadField.sendShareBrio .searchIcon {
width: 18px;
height: 18px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -238px -418px no-repeat;
margin: 11px 13px;
position: absolute; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SocialTypeaheadField.sendShareBrio .searchIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -15px -375px;
background-size: 428px 427px; } }
.SocialTypeaheadField.sendShareBrio .userCircleAvatar .left, .SocialTypeaheadField.sendShareBrio .connectCta .left {
margin-right: 12px; }
.SocialTypeaheadField.sendShareBrio .userCircleAvatar .right, .SocialTypeaheadField.sendShareBrio .connectCta .right {
padding-top: 5px; }
.SocialTypeaheadField.sendShareBrio .userCircleAvatar .right .title, .SocialTypeaheadField.sendShareBrio .connectCta .right .title {
color: #555;
font-size: 18px;
line-height: 20px; }
.SocialTypeaheadField.sendShareBrio .userCircleAvatar img, .SocialTypeaheadField.sendShareBrio .connectCta img {
width: 44px; }
.Tabs .header {
display: table;
table-layout: fixed;
text-align: center; }
.Tabs .header li {
cursor: pointer;
display: table-cell;
width: 1%; }
.Tabs.default .header {
background-color: #ececec;
background: -webkit-linear-gradient(#f3f3f3, #e5e5e5);
background: linear-gradient(#f3f3f3, #e5e5e5);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
clear: both;
color: #333;
height: 44px;
line-height: 44px;
margin-bottom: 2px;
max-width: 10000px;
position: relative; }
.Tabs.default .header .headerText {
color: #555;
font-size: 16px;
font-weight: normal;
padding: 0 26px 0 13px; }
.Tabs.default .header li:not(:first-child) {
border-left: 1px solid #cdcdcd; }
.Tabs.default .header .tabName {
box-shadow: 0 0 1px rgba(255, 255, 255, 0.9) inset;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
color: #777;
display: block;
font-weight: bold;
padding: 1px 20px 0 0; }
.Tabs.default .header .tabName:not(.disabled):focus, .Tabs.default .header .tabName:not(.disabled):hover, .Tabs.default .header .tabName.active {
background-color: #fafafa;
background: -webkit-linear-gradient(#fff, #f4f4f4);
background: linear-gradient(#fff, #f4f4f4);
color: #333; }
.Tabs.default .header .tabName:active {
background: url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowLeftSide-5cbf77e0.png) repeat-y left top, url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowRightSide-96a21610.png) repeat-y right top, -webkit-linear-gradient(#fff, #f4f4f4);
background: url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowLeftSide-5cbf77e0.png) repeat-y left top, url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowRightSide-96a21610.png) repeat-y right top, linear-gradient(#fff, #f4f4f4);
color: #000; }
.Tabs.vertical .header {
background-color: #ececec;
background: -webkit-linear-gradient(#f3f3f3, #e5e5e5);
background: linear-gradient(#f3f3f3, #e5e5e5);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
clear: both;
color: #333;
height: 44px;
line-height: 44px;
margin-bottom: 2px;
max-width: 10000px;
position: relative;
float: left;
margin-right: 24px; }
.Tabs.vertical .header .headerText {
color: #555;
font-size: 16px;
font-weight: normal;
padding: 0 26px 0 13px; }
.Tabs.vertical .header li {
display: table-row; }
.Tabs.vertical .header li:hover {
border-left: 2px solid #cdcdcd; }
.Tabs.vertical .header .tabName {
box-shadow: 0 0 1px rgba(255, 255, 255, 0.9) inset;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
color: #777;
display: block;
font-weight: bold;
padding: 0 20px; }
.Tabs.vertical .header .tabName:not(.disabled):focus, .Tabs.vertical .header .tabName:not(.disabled):hover, .Tabs.vertical .header .tabName.active {
background-color: #fafafa;
background: -webkit-linear-gradient(#fff, #f4f4f4);
background: linear-gradient(#fff, #f4f4f4);
color: #333; }
.Tabs.vertical .header .tabName:active {
background: url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowLeftSide-5cbf77e0.png) repeat-y left top, url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowRightSide-96a21610.png) repeat-y right top, -webkit-linear-gradient(#fff, #f4f4f4);
background: url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowLeftSide-5cbf77e0.png) repeat-y left top, url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowRightSide-96a21610.png) repeat-y right top, linear-gradient(#fff, #f4f4f4);
color: #000; }
.Tabs.vertical .content {
display: inline-block; }
.Tabs.inviterTabs .header {
background-color: #ececec;
background: -webkit-linear-gradient(#f3f3f3, #e5e5e5);
background: linear-gradient(#f3f3f3, #e5e5e5);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
clear: both;
color: #333;
height: 44px;
line-height: 44px;
margin-bottom: 2px;
max-width: 10000px;
position: relative; }
.Tabs.inviterTabs .header .headerText {
color: #555;
font-size: 16px;
font-weight: normal;
padding: 0 26px 0 13px; }
.Tabs.inviterTabs .header li:not(:first-child) {
border-left: 1px solid #cdcdcd; }
.Tabs.inviterTabs .header .tabName {
box-shadow: 0 0 1px rgba(255, 255, 255, 0.9) inset;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
color: #777;
display: block;
font-weight: bold; }
.Tabs.inviterTabs .header .tabName:not(.disabled):focus, .Tabs.inviterTabs .header .tabName:not(.disabled):hover, .Tabs.inviterTabs .header .tabName.active {
background-color: #fafafa;
background: -webkit-linear-gradient(#fff, #f4f4f4);
background: linear-gradient(#fff, #f4f4f4);
color: #333; }
.Tabs.inviterTabs .header .tabName:active {
background: url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowLeftSide-5cbf77e0.png) repeat-y left top, url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowRightSide-96a21610.png) repeat-y right top, -webkit-linear-gradient(#fff, #f4f4f4);
background: url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowLeftSide-5cbf77e0.png) repeat-y left top, url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowRightSide-96a21610.png) repeat-y right top, linear-gradient(#fff, #f4f4f4);
color: #000; }
.Tabs.colored {
border: 1px solid #eee;
border-radius: 3px; }
.Tabs.colored .tabName {
background: #fbfbfb;
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
border-top: 3px solid transparent;
color: #666;
font-weight: bold;
height: 56px;
line-height: 56px; }
.Tabs.colored .tabName.active {
background: #fff;
border-bottom-color: transparent;
border-top-color: inherit;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
color: inherit; }
.Tabs.colored .tab:last-child .tabName {
border-right: 0; }
.TextContainer {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", sans-serif;
margin: 15px; }
.TextContainer.textHeader {
font-size: 16px;
font-weight: bold;
margin: 0; }
.TextContainer.textHeader > p {
word-wrap: break-word; }
.TextField textarea.detailed,
.TextField textarea.detailed:focus {
border: 0;
box-shadow: none;
color: #555; }
.TextField textarea.detailed.content,
.TextField textarea.detailed:focus.content {
padding: 10px; }
.TextField .content {
border-radius: 3px;
min-height: 1em;
padding: 8px;
width: 100%;
word-wrap: break-word; }
.TextField .content.flat {
background: #fff;
border: 1px solid #c7c7c7;
border-radius: 4px;
box-shadow: none;
color: #333;
font-size: 14px;
padding: 7px; }
.TextField .content.pinCreateDescription {
padding: 0; }
.TextField .content.autogrow {
overflow: hidden; }
.TextField .content.autogrow.maxheight {
overflow-y: scroll; }
.TextField .content.brioFlat {
background: #efefef;
border: 0;
border-radius: 4px;
box-shadow: none;
min-height: 90px;
outline: none;
resize: vertical; }
.TextField .content.brioFlat:focus {
background: #fff;
border: 1px solid #efefef; }
.TextField .invisibleElemContainer {
bottom: -1000px;
height: 0;
position: fixed;
right: -1000px;
width: 0; }
.TextField .invisibleElemContainer .invisibleElem {
overflow: hidden;
position: absolute;
visibility: hidden; }
.TextField.error .content {
background: #e6abad;
border: 1px solid #bd081c; }
.TextField.hasValue .brioFlat {
background: #fff;
border: 1px solid #efefef;
font-weight: bold; }
/* Code for the at-who lib */
.at-view {
-webkit-transform: translateZ(0);
z-index: 802; }
.at-view ul {
background: #fff;
border-radius: 3px;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
cursor: pointer;
list-style-type: none;
max-width: 300px; }
.at-view ul li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #777;
font-size: 13px;
font-weight: normal;
padding: 4px;
white-space: nowrap; }
.at-view ul li img {
border-radius: 3px;
height: 30px;
margin-right: 2px;
width: 30px; }
.at-view ul li .username {
color: #000;
font-weight: 500; }
.at-view ul li.cur {
background-color: #eee; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.TwoPaneModal {
background: #d9d9d9;
border-radius: 6px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative; }
.TwoPaneModal::after {
clear: both;
content: "";
display: table; }
.TwoPaneModal .twoPaneClose {
padding: 10px;
position: absolute;
z-index: 2; }
.TwoPaneModal .pane {
height: inherit;
overflow: hidden; }
.TwoPaneModal .pane .animateIn {
-webkit-animation: slideLeftIn 150ms ease-out forwards;
animation: slideLeftIn 150ms ease-out forwards; }
.TwoPaneModal .pane .animateOut {
-webkit-animation: slideRightOut 150ms ease-out forwards;
animation: slideRightOut 150ms ease-out forwards; }
.TwoPaneModal .pane.right {
position: relative; }
/* desktop.scss */
.TwoPaneModal {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
max-height: 660px;
min-height: 490px;
width: 660px; }
.TwoPaneModal .twoPaneClose {
padding: 10px;
right: 14px;
top: 18px; }
.TwoPaneModal .pane {
bottom: 0;
top: 0;
width: 50%; }
.TwoPaneModal .left.pane {
border-radius: 6px 0 0 6px; }
.TwoPaneModal .right.pane {
background-color: #fff;
border-radius: 0 6px 6px 0; }
.Typeahead {
background: #fff;
border-radius: 6px;
display: none;
left: 0;
right: 0;
-webkit-transition: opacity .25s linear;
transition: opacity .25s linear;
z-index: -1; }
.Typeahead li:first-child {
padding-top: 10px !important; }
.Typeahead.flexible {
overflow-y: auto;
z-index: 0; }
.Typeahead.typeaheadWithTitles {
padding-bottom: 5px; }
.Typeahead.typeaheadWithTitles li a {
color: #4a4a4a;
font-size: 16px;
padding: 6px 15px; }
.Typeahead.typeaheadWithTitles li a:hover {
color: #4a4a4a; }
.Typeahead.typeaheadWithTitles li a.titleItem {
color: #999;
font-size: 10px;
line-height: 12px;
margin-top: 5px; }
.Typeahead.typeaheadWithTitles li a.titleItem .typeaheadName {
/* stylelint-disable-next-line at-rule-no-unknown */
color: #555;
font-weight: normal; }
.Typeahead.typeaheadWithTitles li a.clearRecentItem {
color: #ddd;
font-size: 12px; }
.Typeahead.typeaheadWithTitles li a.clearRecentItem:hover {
color: #777; }
.Typeahead.typeaheadWithTitles li a.trending-1 {
color: #555; }
.Typeahead.typeaheadWithTitles li a.trending-2 {
color: #666; }
.Typeahead.typeaheadWithTitles li a.trending-3 {
color: #757575; }
.Typeahead.typeaheadWithTitles li a.trending-4 {
color: #838383; }
.Typeahead.typeaheadWithTitles li a.trending-5 {
color: #909090; }
.Typeahead.typeaheadWithTitles li a.trending-6 {
color: #9f9f9f; }
.Typeahead.typeaheadWithTitles li a.trending-7 {
color: #acacac; }
.Typeahead.typeaheadWithTitles .chevron {
width: 9px;
height: 13px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -268px no-repeat;
float: right;
margin: 3px 0 0; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Typeahead.typeaheadWithTitles .chevron {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -389px -14px;
background-size: 399px 382px; } }
.Typeahead.open {
-webkit-animation: fadeIn .2s ease-out;
animation: fadeIn .2s ease-out;
display: block;
opacity: 1; }
.Typeahead.expanded {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: transparent;
border: 0;
box-shadow: none;
max-width: 1000px; }
.Typeahead.expanded .results ul {
float: left;
width: 33.3%; }
.Typeahead.expanded .cancelButton {
color: #fff;
font-size: 32px;
font-weight: 400;
position: absolute;
right: 20px;
top: 30px; }
.Typeahead.expanded.open {
-webkit-animation: none;
animation: none; }
.Typeahead.expanded.showRecentQueries .recentQueriesHeader {
display: block; }
.Typeahead.expanded .recentQueriesHeader {
display: none;
padding-top: 20px; }
.Typeahead.expanded .recentQueriesHeader .title {
color: #fff;
font-size: 18px;
font-weight: 500;
padding-left: 10px; }
.Typeahead.expanded .recentQueriesHeader hr {
background-color: rgba(255, 255, 255, 0.18);
height: 1px;
margin-top: 25px; }
.Typeahead.expanded li:first-child, .Typeahead.expanded li:last-child {
padding: 0; }
.Typeahead.expanded li a {
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif;
border-radius: 6px;
color: #b9b9b9;
font-size: 16px;
font-weight: 500;
padding: 15px 10px; }
.Typeahead.expanded li a.recentQuery, .Typeahead.expanded li a.searchMore {
padding: 20px 10px; }
.Typeahead.expanded li a.searchMore {
font-size: 18px; }
.Typeahead.expanded li a .typeaheadSearchIcon em {
width: 14px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px 0 no-repeat;
float: left;
margin-right: 10px;
margin-top: 4px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Typeahead.expanded li a .typeaheadSearchIcon em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -402px -173px;
background-size: 428px 427px; } }
.Typeahead.expanded li a .typeaheadScope {
color: #fff; }
.Typeahead.expanded li.highlighted a,
.Typeahead.expanded li a:hover {
background-color: #262626;
color: #fff;
font-size: 16px;
font-weight: 500;
padding: 15px 10px; }
.Typeahead.expanded li.highlighted a.recentQuery, .Typeahead.expanded li.highlighted a.searchMore,
.Typeahead.expanded li a:hover.recentQuery,
.Typeahead.expanded li a:hover.searchMore {
padding: 20px 10px; }
.Typeahead.expanded li.highlighted a.searchMore,
.Typeahead.expanded li a:hover.searchMore {
font-size: 18px; }
.Typeahead.expanded li hr {
background-color: rgba(255, 255, 255, 0.18);
height: 1px;
margin: 5px; }
.Typeahead li {
overflow: hidden;
color: #777;
display: block;
font-size: 12px;
position: relative; }
.Typeahead li:first-child {
padding-top: 5px; }
.Typeahead li:last-child {
padding-bottom: 5px; }
.Typeahead li a {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", sans-serif;
font-weight: bold;
color: #777;
cursor: pointer;
display: block;
padding: 9px 14px; }
.Typeahead li a:hover {
background: #f1f1f1;
color: #333; }
.Typeahead li a:active {
background: #eaeaea; }
.Typeahead li a {
overflow: hidden;
padding: 6px 10px;
white-space: nowrap; }
.Typeahead li.highlighted a {
background: rgba(0, 0, 0, 0.08);
color: #333; }
.Typeahead li:hover .remove {
display: inline; }
.Typeahead li .user, .Typeahead li .board {
text-overflow: ellipsis; }
.Typeahead li .user .typeaheadName, .Typeahead li .board .typeaheadName {
box-sizing: border-box;
margin-left: -43px;
padding-left: 43px; }
.Typeahead li .user .sublabel, .Typeahead li .user .label, .Typeahead li .board .sublabel, .Typeahead li .board .label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.Typeahead li .user .subLabel, .Typeahead li .board .subLabel {
color: #999;
font-size: 10px;
font-weight: normal; }
.Typeahead.advanced li:first-child {
padding-top: 0; }
.Typeahead .results li:first-child .breakLine {
border-top: 0; }
.Typeahead .results .sectionHeader {
background: #f1f1f1;
cursor: default; }
.Typeahead .typeaheadImg {
position: relative;
display: inline-block;
margin-right: 5px;
vertical-align: middle;
width: 38px; }
.Typeahead .typeaheadImg::after {
border-radius: 2px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.9) inset;
content: " ";
height: 38px;
left: 0;
position: absolute;
top: 0;
width: 38px; }
.Typeahead .typeaheadImg img {
border-radius: 2px;
height: 38px;
width: 38px; }
.Typeahead .myPins {
color: #bd081c; }
.Typeahead .remove {
width: 8px;
height: 8px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -315px -47px no-repeat;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
border: 0;
cursor: pointer;
display: none;
float: right;
margin-top: 4px;
padding: 0;
position: absolute;
right: 15px;
top: 8px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Typeahead .remove {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -222px -201px;
background-size: 249px 231px; } }
.Typeahead.gigantic li {
font-size: 16px; }
.Typeahead.gigantic li a {
font-weight: normal; }
.Typeahead .hintWrapper {
border-bottom: 1px solid #eee;
font-size: 13px;
padding-left: 12px;
padding-right: 12px; }
.Typeahead .hintWrapper .hint {
color: #333; }
.Typeahead .hintWrapper .highlighted {
color: #bd081c; }
.Typeahead.addPlaceToPinForm {
margin-bottom: 14px; }
.Typeahead.addPlaceToPinForm li:first-child {
padding-top: 0; }
.Typeahead.addPlaceToPinForm li:last-child {
padding-bottom: 0; }
.Typeahead.addPlaceToPinForm li a {
border-bottom: 1px solid #eaeaea;
padding-bottom: 14px;
padding-top: 14px; }
.Typeahead.addPlaceToPinForm li .addToMap {
float: right;
visibility: hidden; }
.Typeahead.addPlaceToPinForm li .addToMap p {
margin: 0; }
.Typeahead.addPlaceToPinForm li.highlighted .addToMap, .Typeahead.addPlaceToPinForm li:hover .addToMap {
visibility: visible; }
.Typeahead.addPlaceToPinForm li.highlighted a,
.Typeahead.addPlaceToPinForm li a:hover {
background: #f1f1f1 !important; }
.Typeahead.addPlaceToPinForm li:focus {
background: #fff; }
.Typeahead.addPlaceToPinForm li .typeaheadResultMetaData {
clear: both;
color: #999;
float: left;
font-size: 13px;
font-weight: normal;
margin: 1px 0 0; }
.Typeahead.addPlaceToPinForm li .typeaheadResultMetaData:first-child {
margin-top: 13px; }
.Typeahead.addPlaceToPinForm li .typeaheadResultMetaData,
.Typeahead.addPlaceToPinForm li .typeaheadResultEmphasized {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 336px; }
.Typeahead.addPlaceToPinForm li .typeaheadResultEmphasized {
color: #666;
float: left;
font-size: 13px; }
.Typeahead.userSelect {
background: #fff;
border-radius: 0 0 6px 6px;
border-top: 1px solid #ccc;
box-shadow: none;
margin: 0;
position: absolute;
text-align: left; }
.Typeahead.userSelect .highlighted a,
.Typeahead.userSelect a:hover,
.Typeahead.userSelect .socialConnectItem:hover {
background: #f1f1f1; }
.Typeahead.userSelect a:active {
background: #eaeaea; }
.Typeahead.userSelect .useEmail .typeaheadImg {
position: relative; }
.Typeahead.userSelect .useEmail .typeaheadImg::after {
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3) inset;
content: " ";
height: 38px;
left: 0;
position: absolute;
top: 0;
width: 38px; }
.Typeahead.userSelect .useEmail .typeaheadImg img {
border-radius: 3px;
height: 38px;
width: 38px; }
.Typeahead.userSelect li {
border-bottom: 1px solid #e5e5e5; }
.Typeahead.userSelect li:first-child, .Typeahead.userSelect li:last-child {
padding-bottom: 0;
padding-top: 0; }
.Typeahead.userSelect li:last-child {
border-bottom: 0; }
.Typeahead.userSelect li a, .Typeahead.userSelect li .socialConnectItem {
padding: 10px 14px; }
.Typeahead.userSelect .typeaheadImg {
float: left;
margin-right: 12px; }
.Typeahead.userSelect p {
margin: 0; }
.Typeahead.userSelect .typeaheadName {
color: #000;
font-size: 13px;
margin-bottom: 2px;
margin-top: 6px; }
.Typeahead.userSelect .titleWrapper {
font-size: 11px; }
.Typeahead.userSelect .titleWrapper .title {
display: inline-block;
margin-left: 5px; }
.Typeahead.userSelect .titleIcon {
width: 11px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -107px -442px no-repeat;
display: inline-block;
float: left; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Typeahead.userSelect .titleIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: 0 -416px;
background-size: 428px 427px; } }
.Typeahead.userSelect .titleIcon.isPinner {
width: 11px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -439px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Typeahead.userSelect .titleIcon.isPinner {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -12px -416px;
background-size: 428px 427px; } }
.Typeahead.userSelect .titleIcon.isFacebook {
width: 10px;
height: 10px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -223px -206px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Typeahead.userSelect .titleIcon.isFacebook {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -418px -39px;
background-size: 428px 427px; } }
.Typeahead.userSelect .titleIcon.isGplus {
width: 10px;
height: 10px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -452px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Typeahead.userSelect .titleIcon.isGplus {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -418px -28px;
background-size: 428px 427px; } }
.Typeahead.userSelect .title {
font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", sans-serif;
color: #666;
font-weight: normal;
margin-left: 16px;
position: relative;
top: -1px; }
.Typeahead.userSelect .collaboratorInviterTypeahead {
padding: 7px;
width: 100%; }
.Typeahead.userSelect .collaboratorInviterTypeaheadCustom {
height: 230px; }
.Typeahead.addPinToMap.hidden {
display: none; }
.Typeahead.addPinToMap li:first-child {
padding-top: 0; }
.Typeahead.addPinToMap li:last-child {
padding-bottom: 0; }
.Typeahead.addPinToMap li a {
border-bottom: 1px solid #eaeaea;
padding-bottom: 21px;
padding-top: 21px; }
.Typeahead.addPinToMap li .addToMap {
float: right;
visibility: hidden; }
.Typeahead.addPinToMap li .addToMap p {
margin: 0;
padding-left: 14px;
padding-right: 14px;
width: auto; }
.Typeahead.addPinToMap li.highlighted .addToMap, .Typeahead.addPinToMap li:hover .addToMap {
visibility: visible; }
.Typeahead.addPinToMap li.highlighted a,
.Typeahead.addPinToMap li a:hover {
background: #f1f1f1 !important; }
.Typeahead.addPinToMap li:focus {
background: #fff; }
.Typeahead.addPinToMap li .typeaheadResultMetaData {
clear: both;
color: #9a9a9a;
float: left;
font-size: 13px;
margin: 0;
margin-bottom: 0;
margin-top: -10px; }
.Typeahead.addPinToMap li .typeaheadResultMetaData:first-child {
margin-top: 13px; }
.Typeahead.addPinToMap li .typeaheadResultMetaData,
.Typeahead.addPinToMap li .typeaheadResultEmphasized {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 390px; }
.Typeahead.addPinToMap li .typeaheadResultEmphasized {
color: #333;
float: left;
font-size: 16px; }
.Typeahead.interestsTypeaheadItem .typeaheadImg {
float: left; }
.Typeahead.interestsTypeaheadItem .typeaheadSummary {
float: left;
margin-top: 3px; }
.Typeahead.interestsTypeaheadItem .typeaheadSummary .typeaheadName {
color: #000;
font-size: 15px;
font-weight: bold;
margin-bottom: 2px; }
.Typeahead.interestsTypeaheadItem .typeaheadSummary .typeaheadStats .numPinnersIcon {
width: 14px;
height: 10px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -403px no-repeat;
float: left;
margin-right: 3px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Typeahead.interestsTypeaheadItem .typeaheadSummary .typeaheadStats .numPinnersIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -134px -400px;
background-size: 428px 427px; } }
.Typeahead.interestsTypeaheadItem .typeaheadSummary .typeaheadStats .numPinnersStat {
float: left;
font-size: 11px;
font-weight: normal; }
.Typeahead.interestsTypeaheadItem .plusIcon {
width: 16px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -331px -418px no-repeat;
float: right;
margin-top: 10px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Typeahead.interestsTypeaheadItem .plusIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -140px -375px;
background-size: 428px 427px; } }
.Typeahead.userCircleSelect.compact > ul > li {
border-bottom: 0; }
.Typeahead.userCircleSelect.compact > ul > li a {
padding: 4px 8px; }
.Typeahead.userCircleSelect li {
border-bottom: 1px solid #e7e7e7; }
.Typeahead.userCircleSelect li:last-child {
border-bottom: 0; }
.Typeahead.userCircleSelect li a {
padding: 10px; }
.Typeahead.userCircleSelect li.highlighted a {
background-color: #eeeeee; }
.Typeahead.userCircleSelect li.selected .userCircleAvatar .left {
border: 2px solid #bd081c; }
.Typeahead.userCircleSelect li.selected .userCircleAvatar .left img {
border: 2px solid #fff; }
.Typeahead.sendShareUserCircleSelect li {
border: 0;
padding: 0; }
.Typeahead.sendShareUserCircleSelect li a {
padding: 4px 20px; }
.Typeahead.sendShareUserCircleSelect li.highlighted a {
background-color: #eeeeee; }
.Typeahead .userCircleAvatar, .Typeahead .sendToEmail, .Typeahead .connectCta, .Typeahead .socialConnect {
display: table;
width: 100%; }
.Typeahead .userCircleAvatar .left, .Typeahead .sendToEmail .left, .Typeahead .connectCta .left, .Typeahead .socialConnect .left {
display: table-cell; }
.Typeahead .userCircleAvatar .right, .Typeahead .sendToEmail .right, .Typeahead .connectCta .right, .Typeahead .socialConnect .right {
display: table-cell;
vertical-align: middle;
width: 100%; }
.Typeahead .userCircleAvatar .left {
border: 2px solid transparent;
border-radius: 50%;
min-width: 34px;
-webkit-transition: border .15s ease-out;
transition: border .15s ease-out; }
.Typeahead .userCircleAvatar .left img {
border: 0;
box-sizing: border-box;
-webkit-transition: border .15s ease-out;
transition: border .15s ease-out; }
.Typeahead .userCircleAvatar .right {
padding-left: 10px; }
.Typeahead .userCircleAvatar .title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
font-weight: bold;
margin: 1px 0; }
.Typeahead .userCircleAvatar .subtitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #b7b7b7;
font-weight: normal;
margin: 2px 0 0; }
.Typeahead .userCircleAvatar img {
border-radius: 50%;
width: 34px; }
.Typeahead .sendToEmail.unclickable a {
cursor: default; }
.Typeahead .sendToEmail .left {
padding-right: 10px; }
.Typeahead .sendToEmail .left .icon {
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif;
background-color: #999;
border-radius: 50%;
color: #fff;
font-size: 20px;
font-weight: bold;
height: 33px;
line-height: 33px;
margin-top: 1px;
text-align: center;
width: 33px; }
.Typeahead .sendToEmail .left .icon.typingEmail em {
width: 33px;
height: 33px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -146px no-repeat;
display: block; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Typeahead .sendToEmail .left .icon.typingEmail em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -342px -142px;
background-size: 428px 427px; } }
.Typeahead .sendToEmail .title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
font-weight: bold;
margin: 1px 0; }
.Typeahead .sendToEmail .subtitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #b7b7b7;
font-weight: normal;
margin: 2px 0 0; }
.Typeahead .socialConnect .left {
padding-right: 10px; }
.Typeahead .socialConnect .left .icon {
height: 32px;
width: 32px; }
.Typeahead .socialConnect .left .icon em {
display: block; }
.Typeahead .socialConnect .left .icon.socialConnect-facebook em {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -284px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Typeahead .socialConnect .left .icon.socialConnect-facebook em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -33px -342px;
background-size: 428px 427px; } }
.Typeahead .socialConnect .left .icon.socialConnect-gplus em {
width: 33px;
height: 33px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -181px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Typeahead .socialConnect .left .icon.socialConnect-gplus em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -342px -176px;
background-size: 428px 427px; } }
.Typeahead .socialConnect .left .icon.socialConnect-twitter em {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -68px -384px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Typeahead .socialConnect .left .icon.socialConnect-twitter em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -342px -276px;
background-size: 428px 427px; } }
.Typeahead .socialConnect .left .icon.socialConnect-yahoo em {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -384px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Typeahead .socialConnect .left .icon.socialConnect-yahoo em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -99px -342px;
background-size: 428px 427px; } }
.Typeahead .socialConnect .title {
color: #211922;
font-weight: bold;
line-height: 32px; }
.Typeahead .connectCta .left {
padding-right: 10px; }
.Typeahead .connectCta .left .socialConnectCta {
display: block; }
.Typeahead .connectCta .title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
font-weight: bold;
margin: 1px 0; }
.Typeahead .connectCta .subtitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #b7b7b7;
font-weight: normal;
margin: 2px 0 0; }
.Typeahead.sendShare .userCircleAvatar .right, .Typeahead.sendShare .sendToEmail .right, .Typeahead.sendShare .connectCta .right {
height: 32px; }
.Typeahead.sendShare .sendToEmail .icon {
height: 32px;
line-height: 32px;
width: 32px; }
.Typeahead.sendShare .sendToEmail .icon.typingEmail em {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -250px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Typeahead.sendShare .sendToEmail .icon.typingEmail em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: 0 -342px;
background-size: 428px 427px; } }
.Typeahead.sendShare .icon.typingEmail {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -250px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Typeahead.sendShare .icon.typingEmail {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: 0 -342px;
background-size: 428px 427px; } }
.Typeahead.sendShare .icon.socialConnectCta {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -34px -384px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Typeahead.sendShare .icon.socialConnectCta {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -342px -243px;
background-size: 428px 427px; } }
.Typeahead.sendShare .connectCta .socialConnectCta {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -34px -384px no-repeat;
height: 32px;
width: 32px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Typeahead.sendShare .connectCta .socialConnectCta {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -342px -243px;
background-size: 428px 427px; } }
.Typeahead.sendShare .title {
white-space: normal;
width: 258px; }
.Typeahead.sendShareBrio .userCircleAvatar .right, .Typeahead.sendShareBrio .sendToEmail .right, .Typeahead.sendShareBrio .connectCta .right {
height: 44px; }
.Typeahead.sendShareBrio .sendToEmail .left {
margin-right: 12px; }
.Typeahead.sendShareBrio .sendToEmail .left .icon {
height: 44px;
line-height: 44px;
width: 44px; }
.Typeahead.sendShareBrio .sendToEmail .left .icon.typingEmail em {
width: 44px;
height: 44px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -138px -296px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Typeahead.sendShareBrio .sendToEmail .left .icon.typingEmail em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -90px -258px;
background-size: 428px 427px; } }
.Typeahead.sendShareBrio .sendToEmail .right {
padding-top: 5px; }
.Typeahead.sendShareBrio .sendToEmail .right .title {
color: #555;
font-size: 18px;
line-height: 20px; }
.Typeahead.sendShareBrio .sendToEmail img {
width: 44px; }
.Typeahead.sendShareBrio .connectCta .socialConnectCta {
width: 44px;
height: 44px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -184px -296px no-repeat;
height: 44px;
margin-top: 0;
width: 44px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Typeahead.sendShareBrio .connectCta .socialConnectCta {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -291px -184px;
background-size: 428px 427px; } }
.Typeahead .lightText {
color: #999; }
.Typeahead .board .typeaheadImg::after {
border-radius: none;
box-shadow: none; }
.Typeahead .board .typeaheadImg img {
border-radius: 6px; }
.Typeahead .typeaheadName {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
vertical-align: middle;
width: 100%; }
.Typeahead .typeaheadName.hasImage {
width: 273px; }
.Typeahead .verifiedIdentifyIcon {
width: 11px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -204px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Typeahead .verifiedIdentifyIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -69px -368px;
background-size: 399px 382px; } }
.Typeahead .footer {
height: 105px; }
.TypeaheadField {
display: inline-block;
position: relative; }
.TypeaheadField .tokenizedInputWrapper {
background-color: #efefef;
border: none;
border-radius: 4px;
height: 40px; }
.TypeaheadField.guided .tokenizedInputWrapper {
box-sizing: border-box;
height: 40px;
position: relative;
z-index: 670; }
.TypeaheadField.guided.buttonOnRight .tokenizedInputWrapper {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-left: 36px; }
@media (min-width: 800px) {
.TypeaheadField.guided.buttonOnRight .tokenizedInputWrapper {
padding-left: 44px; } }
.TypeaheadField.guided.buttonOnRight::before {
width: 20px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -176px -353px no-repeat;
content: " ";
margin-top: 10px;
position: absolute;
z-index: 999999999;
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */ }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.TypeaheadField.guided.buttonOnRight::before {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -189px -347px;
background-size: 399px 382px; } }
.TypeaheadField.guided.openSearch .tokenizedInputWrapper {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 36px; }
.TypeaheadField.guided.openSearch .tokenizedInputWrapper .tokensWrapper {
margin-top: 0; }
.TypeaheadField.guided.openHome {
position: relative;
z-index: 501; }
.TypeaheadField.guided.openHome .tokenizedInputWrapper {
margin: 1px; }
.TypeaheadField.guided.openHome .tokenizedInputWrapper.focused {
border: 1px solid #555;
margin: 0; }
.TypeaheadField.guided.openHome .tokenizedInputWrapper > em {
background: url(https://s.pinimg.com/webapp/style/images/search-1x-cdb3ad08.png) no-repeat;
background-size: contain;
height: 20px;
width: 20px;
float: left;
margin: 16px 0 0 16px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.TypeaheadField.guided.openHome .tokenizedInputWrapper > em {
background-image: url(https://s.pinimg.com/webapp/style/images/search-2x-3fbd7faf.png); } }
.TypeaheadField.drawerNav .tokenizedInputWrapper {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
z-index: 670; }
.TypeaheadField.search .field {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #faf9f7;
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.07);
box-sizing: border-box;
color: #717171;
font-size: 13px;
font-weight: bold;
margin: 0;
padding: 6px 30px 6px 9px;
position: relative;
width: 100%;
z-index: 670; }
.TypeaheadField.search .field:active {
border-color: #bcbcbc; }
.TypeaheadField.search .field:focus {
background-color: #fafafa;
border-color: #aaa;
color: #333; }
.TypeaheadField .typeaheadCaret {
width: 20px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -135px -265px no-repeat;
display: none;
position: absolute; }
.TypeaheadField .typeaheadCaret.visible {
display: block; }
.TypeaheadField.gigantic .field {
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.07), 0 1px 1px #eee;
font-size: 20px;
font-weight: normal;
padding: 15px 30px 15px 15px;
z-index: 667; }
.TypeaheadField.gigantic .Typeahead {
position: absolute;
top: auto;
z-index: 669; }
.TypeaheadField.userSelect {
width: 100%; }
.TypeaheadField.userSelect input {
background: #fff;
border: 1px solid #dadada;
position: relative;
width: 308px;
z-index: 3; }
.TypeaheadField.boardPickerTypeahead .field {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.07);
box-sizing: border-box;
color: #717171;
font-size: 13px;
font-weight: bold;
margin: 0;
position: relative;
width: 100%; }
.TypeaheadField.addPinToMapField .field {
border: 1px solid #c6c6c5;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) inset;
font-size: 13px;
padding: 14px; }
.UserEducationGuideDropdown {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: slide-in-up 0.7s cubic-bezier(0, 1, 0.5, 1);
animation: slide-in-up 0.7s cubic-bezier(0, 1, 0.5, 1);
background-color: #fff;
border-radius: 6px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 6px 0 rgba(0, 0, 0, 0.2);
overflow: hidden;
/* So backgrounds on guides don't spill out of the menu */
padding: 22px 26px;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 170px;
/* ### FOOTER ### */ }
.UserEducationGuideDropdown .helpCenterText {
color: #4d4d4d;
font-size: 13px;
font-weight: 500;
line-height: 17px;
margin-bottom: 18px; }
.UserEducationGuideDropdown .footer {
background-color: rgba(0, 0, 0, 0.06);
border-top: 1px solid rgba(0, 0, 0, 0.06);
color: rgba(0, 0, 0, 0.6);
cursor: pointer;
display: block;
font-size: 11px;
font-weight: normal;
line-height: 11px;
padding: 15px 18px 16px;
/* Pad the top less so the text is optically centred */ }
.UserEducationGuideDropdown .footer:hover {
background-color: rgba(0, 0, 0, 0.1); }
.UserEducationGuideDropdown .footer:active {
background-color: rgba(0, 0, 0, 0.15); }
.UserEducationGuideDropdown .footer:hover strong {
color: rgba(0, 0, 0, 0.8); }
.UserSearchResult {
box-sizing: border-box;
height: 69px;
padding: 7px 15px;
width: 100%; }
.UserSearchResult .sendButton {
float: right;
opacity: 0;
top: 12px;
-webkit-transition: visibility .2s linear, opacity .2s linear;
transition: visibility .2s linear, opacity .2s linear;
visibility: hidden;
z-index: 999999999; }
.UserSearchResult .userProfilePic {
border-radius: 100%;
float: left;
margin-right: 10px;
width: 55px; }
.UserSearchResult .userFullName {
font-family: HelveticaNeue-Bold, 'Helvetica', arial;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 325px;
padding-bottom: 1px;
white-space: nowrap; }
.UserSearchResult .userNameEmailContainer {
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif;
position: relative;
top: 13px; }
.UserSearchResult:hover .sendButton {
opacity: 1;
visibility: visible; }
.UserSearchResult .clearfix {
clear: both; }
.Video {
max-width: 100%;
padding: 16px 40px;
position: relative; }
.Video:-webkit-full-screen {
cursor: pointer;
padding: 0;
width: 100%; }
.Video:-moz-full-screen {
cursor: pointer;
padding: 0;
width: 100%; }
.Video:-ms-fullscreen {
cursor: pointer;
padding: 0;
width: 100%; }
.Video:fullscreen {
cursor: pointer;
padding: 0;
width: 100%; }
.Video:-webkit-full-screen .videoBox video {
border-radius: 0; }
.Video:-moz-full-screen .videoBox video {
border-radius: 0; }
.Video:-ms-fullscreen .videoBox video {
border-radius: 0; }
.Video:fullscreen .videoBox video {
border-radius: 0; }
.Video:-webkit-full-screen .videoBox .videoOverlay .videoFade {
border-radius: 0; }
.Video:-moz-full-screen .videoBox .videoOverlay .videoFade {
border-radius: 0; }
.Video:-ms-fullscreen .videoBox .videoOverlay .videoFade {
border-radius: 0; }
.Video:fullscreen .videoBox .videoOverlay .videoFade {
border-radius: 0; }
.Video button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: none;
padding: 0; }
.Video button:focus {
outline: none; }
.Video .videoBox {
cursor: pointer;
height: 100%;
position: relative;
width: 100%;
/*
These weird width / height settings are for cross browser support
When updating the code below, please test in Firefox / Safari and Chrome
*/ }
.Video .videoBox video {
background-color: #efefef;
border-radius: 8px;
display: block;
height: auto;
max-height: 100vh;
max-width: 100%;
min-height: 100%;
min-width: 100%;
-o-object-fit: contain;
object-fit: contain;
width: auto; }
.Video .videoBox .videoOverlay:hover, .Video .videoBox .videoOverlay.forceShow {
opacity: 1;
-webkit-transition: opacity .32s ease-out;
transition: opacity .32s ease-out; }
.Video .videoBox .videoOverlay {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
-webkit-transition: opacity .88s ease .24s;
transition: opacity .88s ease .24s;
width: 100%; }
.Video .videoBox .videoOverlay .videoFade {
background-image: -webkit-linear-gradient(top, rgba(215, 215, 215, 0) 0%, #000 100%);
background-image: linear-gradient(-180deg, rgba(215, 215, 215, 0) 0%, #000 100%);
border-radius: 8px;
bottom: 0;
height: 180px;
left: 0;
opacity: .31;
position: absolute;
width: 100%; }
.Video .videoBox .videoOverlay .videoControls {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-item-align: end;
align-self: flex-end;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
height: 20px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 16px;
position: relative;
width: 100%; }
.Video .videoBox .videoOverlay .videoControls div, .Video .videoBox .videoOverlay .videoControls button {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-right: 16px;
width: 24px; }
.Video .videoBox .videoOverlay .videoControls *:last-child {
margin-right: 0; }
.Video .videoBox .videoOverlay .videoControls .playhead {
display: block;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
height: 2px;
padding-bottom: 22px; }
.Video .videoBox .videoOverlay .videoControls .playheadBar {
background-color: rgba(255, 255, 255, 0.41);
border-radius: 2px;
cursor: pointer;
height: 2px;
margin: 11px 0;
position: relative;
width: 100%; }
.Video .videoBox .videoOverlay .videoControls .playheadProgress {
background-color: #fff;
border-radius: 2px;
display: block;
height: 2px;
left: 0;
position: absolute;
top: 0; }
.Video .videoBox .videoOverlay .videoControls .playheadPosition {
background-color: #fff;
border-radius: 100px;
height: 18px;
left: 0%;
margin: -20.5px -10px;
pointer-events: none;
position: relative;
top: 0;
width: 18px; }
.Video .videoBox .videoOverlay .videoControls .currentPlayTime {
color: rgba(255, 255, 255, 0.41);
font-size: 12px;
font-weight: 800;
letter-spacing: -.11px;
margin-top: -1px;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.Video .videoBox .videoOverlay .videoControls .endPlayTime {
color: rgba(255, 255, 255, 0.41);
font-size: 12px;
font-weight: 800;
letter-spacing: -.11px;
margin-top: -1px;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.Video .videoBox .videoOverlay .videoControls .playPauseButton {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 18px; }
@-webkit-keyframes spinVideoLoadingIndicator {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn); } }
@keyframes spinVideoLoadingIndicator {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn); } }
.Video .videoBox .videoOverlay .videoControls .loadingIndicator {
-webkit-animation: spinVideoLoadingIndicator 1s infinite linear;
animation: spinVideoLoadingIndicator 1s infinite linear; }
.Video .videoBox:focus {
outline: none; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.App > .moduleMask {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0; }
.App .appendedContainer > .Module:not(.reactCloseupContainer) {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 680; }
.App > .Spinner {
position: fixed; }
.App .fbAd {
display: none; }
.App .inspiredWallOverlay {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
left: 0;
opacity: 1;
position: fixed;
right: 0;
top: 0;
-webkit-transition: opacity 1s ease;
transition: opacity 1s ease;
z-index: 1000; }
.App .inspiredWallOverlay.doNotShow {
opacity: 0;
pointer-events: none; }
.App .typeaheadOverlay {
background-color: rgba(0, 0, 0, 0.4);
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 500; }
.underlineLink:focus, .underlineLink:hover {
text-decoration: underline; }
.visuallyHidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.visuallyHiddenFocusable:active, .visuallyHiddenFocusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto; }
/* desktop.scss */
.App .draggable-dragging {
opacity: .6;
position: absolute;
-webkit-transform-origin: top left;
transform-origin: top left;
z-index: 999999999 !important; }
.App .appContent > .Module.loading {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0; }
.App .appContent > .Module.error {
border: 0;
display: block;
margin: 100px auto;
width: 300px; }
.App.full .appContent.hasKLPBar {
margin-top: 44px; }
.App.full .appContent.hasSpellCheck {
margin-top: 24px; }
.App.full.unauth .appContent {
padding-top: 64px; }
.App.hasInterstitialHeader .appContent {
left: 0;
position: absolute;
right: 0;
top: 100%; }
.App.hasInterstitialHeader .Header {
display: none; }
.App .footerButtons {
bottom: 14px;
position: fixed;
right: 14px;
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 660; }
.App .footerButtons.visible .buttonInoutWrapper {
opacity: 1;
position: relative;
text-align: center;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition-duration: .85s;
transition-duration: .85s;
-webkit-transition-timing-function: cubic-bezier(0.19, 1.32, 0.48, 1);
transition-timing-function: cubic-bezier(0.19, 1.32, 0.48, 1); }
.App .footerButtons.tutorialHighlight .buttonInoutWrapper {
-webkit-animation: none;
animation: none;
-webkit-animation-timing-function: none;
animation-timing-function: none;
opacity: 1;
-webkit-transform: none;
transform: none; }
.App .footerButtons.aboveChatheads {
bottom: 110px; }
.App .footerButtons .buttonInoutWrapper {
opacity: 0;
position: relative;
-webkit-transform: translateY(200px);
transform: translateY(200px); }
.App .footerButtons .buttonInoutWrapper.appUpsellButtonWrapper {
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
margin-bottom: 8px;
-webkit-transition-delay: 100ms;
transition-delay: 100ms; }
.App .footerButtons .buttonInoutWrapper.addButtonWrapper {
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
margin-bottom: 8px;
-webkit-transition-delay: 100ms;
transition-delay: 100ms; }
.App .footerButtons .buttonInoutWrapper.helpButtonWrapper {
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
margin-bottom: 15px;
-webkit-transition-delay: 100ms;
transition-delay: 100ms; }
.App .footerButtons .buttonInoutWrapper.privacyPolicyWrapper {
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
margin-top: 8px;
-webkit-transition-delay: 100ms;
transition-delay: 100ms; }
.App .footerButtons .appUpsellFooter {
background: #fff;
border: none;
padding: 10.5px 14px !important; }
.App .footerButtons .appUpsellFooter em {
width: 12px;
height: 18px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px 0 no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.App .footerButtons .appUpsellFooter em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -357px -221px;
background-size: 399px 382px; } }
.App .footerButtons .appUpsellFooter:not(.disabled):hover em {
width: 12px;
height: 18px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px 0 no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.App .footerButtons .appUpsellFooter:not(.disabled):hover em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -357px -221px;
background-size: 399px 382px; } }
.App .footerButtons .appUpsellFooter.triggerActive em {
width: 12px;
height: 18px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px 0 no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.App .footerButtons .appUpsellFooter.triggerActive em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -357px -221px;
background-size: 399px 382px; } }
.App .footerButtons .appUpsellFooterIcon {
padding: 12px 12.5px !important; }
.App .footerButtons .appUpsellFooterIcon em {
width: 16px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -273px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.App .footerButtons .appUpsellFooterIcon em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -370px -325px;
background-size: 399px 382px; } }
.App .footerButtons .appUpsellFooterIcon:not(.disabled):hover em {
width: 16px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -273px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.App .footerButtons .appUpsellFooterIcon:not(.disabled):hover em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -370px -325px;
background-size: 399px 382px; } }
.App .footerButtons .appUpsellFooterIcon.triggerActive em {
width: 16px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -273px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.App .footerButtons .appUpsellFooterIcon.triggerActive em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -370px -325px;
background-size: 399px 382px; } }
.App .footerButtons .nonEuPrivacyPolicy {
font-family: HelveticaNeue-Bold, 'Helvetica', arial;
background-color: #fff;
border-radius: 4px;
bottom: 15px;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
color: #555;
font-size: 12px;
font-weight: normal;
padding: 2px 5px 3px;
z-index: 100; }
.App .footerButtons .nonEuPrivacyPolicy:hover {
background-color: #f5f5f5; }
.App .footerButtons .nonEuPrivacyPolicy:active, .App .footerButtons .nonEuPrivacyPolicy.active {
background-color: #e9e9e9; }
.App .footerButtons.hide {
-webkit-transform: translateY(22px);
transform: translateY(22px);
-webkit-transition-duration: .85s;
transition-duration: .85s;
-webkit-transition-timing-function: cubic-bezier(0.19, 1.32, 0.48, 1);
transition-timing-function: cubic-bezier(0.19, 1.32, 0.48, 1); }
.App .footerButtons.hide .privacyPolicyWrapper {
opacity: 0; }
.App .footerButtons.show {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition-duration: .85s;
transition-duration: .85s;
-webkit-transition-timing-function: cubic-bezier(0.19, 1.32, 0.48, 1);
transition-timing-function: cubic-bezier(0.19, 1.32, 0.48, 1); }
.App .footerButtons.shiftedLeft {
right: 310px; }
.AppBase {
margin-top: -1px;
min-width: 320px;
padding-top: 1px; }
.AuthHomePage .buttons .btn {
display: inline-block;
font-size: 13px;
margin: -2px;
min-width: 135px;
padding: 6px auto; }
.AuthHomePage .buttons .btn:last-of-type {
border-radius: 0 6px 6px 0; }
.AuthHomePage .buttons .btn:first-of-type {
border-radius: 6px 0 0 6px; }
.AuthHomePage .buttons .btn.active {
background-color: #fbfbfb;
background: -webkit-linear-gradient(#fff, #f7f7f7);
background: linear-gradient(#fff, #f7f7f7);
border-color: #b7b7b7;
box-shadow: none;
color: #222; }
.AuthHomePage .nonEuPrivacyPolicy {
-webkit-animation: trigger-card-slide-up .8s forwards;
animation: trigger-card-slide-up .8s forwards;
-webkit-animation-timing-function: cubic-bezier(0.21, 1.4, 0.37, 1);
animation-timing-function: cubic-bezier(0.21, 1.4, 0.37, 1);
bottom: 15px;
color: #fff;
font-size: 13px;
font-weight: normal;
margin-left: 20px;
position: fixed;
text-shadow: 0 1px 4px #000;
-webkit-transition-delay: 200ms;
transition-delay: 200ms;
-webkit-transition-duration: .85s;
transition-duration: .85s;
-webkit-transition-timing-function: cubic-bezier(0.19, 1.32, 0.48, 1);
transition-timing-function: cubic-bezier(0.19, 1.32, 0.48, 1);
z-index: 100; }
.AuthHomePage .nonEuPrivacyPolicy:hover {
text-decoration: underline; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.FeedPage .categoryHeader {
padding: 45px; }
.FeedPage .categoryHeader .feedName {
color: #fff;
margin-top: 5px; }
.FeedPage .categoryHeader .categoryStats {
height: 15px;
margin: 0 auto 18px;
text-align: center; }
.FeedPage .categoryHeader .categoryStats .categoryStatsInner {
display: inline-block; }
.FeedPage .categoryHeader .categoryStats .categoryStatsInner .categoryStat {
float: left;
line-height: 12px; }
.FeedPage .categoryHeader .categoryStats .categoryStatsInner .categoryStat .categoryStatIcon {
float: left;
margin-right: 5px;
margin-top: 12px; }
.FeedPage .categoryHeader .categoryStats .categoryStatsInner .categoryStat .pins {
color: #fff;
float: left;
font-size: 12px;
font-weight: bold;
margin-right: 10px;
opacity: .7;
text-align: center; }
.FeedPage .categoryHeader .categoryStats .categoryStatsInner .pins .categoryStatIcon {
width: 12px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -333px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.FeedPage .categoryHeader .categoryStats .categoryStatsInner .pins .categoryStatIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -93px -400px;
background-size: 428px 427px; } }
.ja .FeedPage .feedName {
font-size: 36px; }
.FeedPage .RelatedInterestsSection {
margin: 16px 0; }
/* desktop.scss */
/* stylelint-disable at-rule-no-unknown */
.FeedPage .feedName,
.FeedPage > .centeredWithinWrapper {
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
max-width: 744px;
min-width: auto;
text-align: left; }
.FeedPage .feedName {
box-sizing: border-box;
color: #555; }
/* Related interests */
.FeedPage .RelatedInterestsSection {
margin: 0; }
.FeedPage .RelatedInterestsSection > ul {
text-align: left; }
@media (min-width: 800px) {
.FeedPage .RelatedInterestsSection > ul {
max-width: 645px; } }
.FeedPage .RelatedInterestsSection > ul > li {
margin-left: 0; }
.FeedPage .RelatedInterestsSection .title {
display: none; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.Header .fillWidth {
width: 100%; }
.Header .fillWidth > .DenzelReactBridge {
width: 100%; }
.Header .homefeedIndicatorReactWrapper {
-webkit-box-ordinal-group: 99999;
-ms-flex-order: 99998;
order: 99998; }
/* desktop.scss */
.Header {
position: fixed;
-webkit-transition: opacity 1s ease;
transition: opacity 1s ease;
z-index: 671; }
.Header.unfixedHeader {
position: absolute; }
.Header.unfixedHeader .headerContainer {
position: absolute; }
.Header.disableHeader {
z-index: 0; }
.Header.hasSpellCheck, .Header.showHeaderMessage {
height: 88px;
/* Deals with boint spacing for appContent */ }
@media (min-width: 360px) {
.Header.hasSpellCheck, .Header.showHeaderMessage {
height: 88px; } }
@media (min-width: 800px) {
.Header.hasSpellCheck, .Header.showHeaderMessage {
height: 88px; } }
.Header.hasSpellCheck .SearchAutocorrect, .Header.showHeaderMessage .SearchAutocorrect {
display: block;
margin-top: 0; }
.Header .TypeaheadField .Typeahead {
margin: 40px 0 0;
padding-top: 0;
position: absolute;
top: 0;
z-index: 669; }
.Header.alt .SearchForm {
display: none; }
.Header .interest,
.Header .categories {
float: left;
margin-right: 6px; }
.Header .UserMenu .profileName {
padding-right: 9px; }
.Header .rightHeaderContent .NotificationsConversationsButton {
float: right; }
.Header .logo {
left: 50%;
margin-left: -52px;
margin-top: 16px;
position: absolute;
top: -7px; }
.Header .userDropdown .Button {
border-color: #c1c1c1;
border-left: 0;
border-radius: 0 6px 6px 0;
height: 30px;
width: 36px; }
.Header .unauthActions {
float: right; }
.Header .unauthActions .LanguageMenu {
float: left; }
.es .Header .unauthActions .LanguageMenu .languageButton,
.ms .Header .unauthActions .LanguageMenu .languageButton,
.pt .Header .unauthActions .LanguageMenu .languageButton {
font-size: 10px;
padding-right: 20px; }
.Header .unauthActions .LoginButton, .Header .unauthActions .SignupButton {
float: left;
font-size: 12px;
margin: 1px 0 0 8px; }
.es .Header .unauthActions .LoginButton,
.ms .Header .unauthActions .LoginButton,
.pt .Header .unauthActions .LoginButton, .es .Header .unauthActions .SignupButton,
.ms .Header .unauthActions .SignupButton,
.pt .Header .unauthActions .SignupButton {
font-size: 10px; }
.Header .categoriesMenuContainer {
display: none; }
.Header.invisible {
opacity: 0; }
.HeaderBase.hidden {
display: none; }
.PopularSearchesBar {
height: 40px;
line-height: 40px;
overflow: hidden;
text-align: center; }
.PopularSearchesBar .popularSearchesList {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
.PopularSearchesBar .popularSearchItem {
border-radius: 4px;
cursor: pointer;
display: inline;
float: left;
height: 40px;
margin-right: 9px; }
.PopularSearchesBar .popularSearchItem.red {
background-color: #c99e92;
color: inherit; }
.PopularSearchesBar .popularSearchItem.yellow {
background-color: #cfbfa4;
color: inherit; }
.PopularSearchesBar .popularSearchItem.green {
background-color: #aeb7a4; }
.PopularSearchesBar .popularSearchItem.blue {
background-color: #b1bdc0;
color: inherit; }
.PopularSearchesBar .popularSearchItem.purple {
background-color: #bfb8ca; }
.PopularSearchesBar .popularSearchItem.grey {
background-color: #bebbaf; }
.PopularSearchesBar .popularSearchItem:hover {
opacity: .8; }
.PopularSearchesBar .popularTopicText {
color: #fff;
font-size: 14px;
font-weight: bold;
height: 17px;
letter-spacing: -.2px;
line-height: 40px;
margin-left: 12px;
margin-right: 12px;
vertical-align: middle; }
.RightHeader {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
width: 100%; }
.RightHeader .userMenuWrapper {
margin-right: 42px;
overflow: visible; }
.RightHeader > .DenzelReactBridge {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.User.exploreStoryHeaderView img,
.User.exploreStoryHeaderView .hoverMask {
border-radius: 50%;
height: 60px; }
.User.exploreStoryHeaderView .userPhoto {
display: block;
margin: 0 auto;
width: 60px; }
.User.exploreStoryHeaderView .thumbImageWrapper {
position: relative; }
.User.exploreStoryHeaderView .thumbImageWrapper:hover .hoverMask {
background: rgba(0, 0, 0, 0.15); }
.User.exploreStoryHeaderView .thumbImageWrapper:active .hoverMask {
background: rgba(0, 0, 0, 0.25); }
.User.exploreStoryHeaderView .thumbImageWrapper .hoverMask {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
box-shadow: none;
z-index: 100; }
.User.exploreStoryHeaderView .userFullName {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #555;
display: inline-block;
font-size: 16px;
font-weight: bold;
letter-spacing: -.2px;
margin: 8px auto; }
.User.exploreStoryHeaderView .userFullName .verifiedIdentifyIcon {
width: 11px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -204px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
height: 12px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.User.exploreStoryHeaderView .userFullName .verifiedIdentifyIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -69px -368px;
background-size: 399px 382px; } }
.User.exploreStoryHeaderView .userFollowerCount {
color: #555;
font-size: 12px;
letter-spacing: -.1px;
margin-top: 4px; }
.User.exploreTabView {
margin: 0 17px 34px;
width: 218px; }
.User.exploreTabView img, .User.exploreTabView .homefeedBuilderHoverMask {
height: 218px;
width: 218px; }
.User.exploreTabView .userFullName {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #555;
font-size: 21px;
line-height: 23px;
margin-top: 15px; }
.User.exploreTabView .homefeedBuilderHoverMask {
margin: 0 17px; }
.User.homefeedBuilderView {
margin: 0 7px 30px;
width: 172px; }
.User.homefeedBuilderView img, .User.homefeedBuilderView .homefeedBuilderHoverMask {
height: 172px;
width: 172px; }
.User.homefeedBuilderView .userFullName {
color: #444;
font-size: 14px;
line-height: 18px;
margin-bottom: 8px;
margin-top: 10px; }
.User.homefeedBuilderView .userFullName .verifiedIdentifyIcon {
height: 12px; }
.User.homefeedBuilderView .homefeedBuilderHoverMask {
margin: 0 7px; }
.User.homefeedBuilderView .userFullName, .User.exploreTabView .userFullName {
font-weight: bold;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap; }
.User.homefeedBuilderView .userFullName .verifiedIdentifyIcon, .User.exploreTabView .userFullName .verifiedIdentifyIcon {
width: 11px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -204px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.User.homefeedBuilderView .userFullName .verifiedIdentifyIcon, .User.exploreTabView .userFullName .verifiedIdentifyIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -69px -368px;
background-size: 399px 382px; } }
.User.homefeedBuilderView .thumbImageWrapper:hover .homefeedBuilderHoverMask, .User.exploreTabView .thumbImageWrapper:hover .homefeedBuilderHoverMask {
background: rgba(0, 0, 0, 0.15); }
.User.homefeedBuilderView .thumbImageWrapper:active .homefeedBuilderHoverMask, .User.exploreTabView .thumbImageWrapper:active .homefeedBuilderHoverMask {
background: rgba(0, 0, 0, 0.25); }
.User.homefeedBuilderView .thumbImageWrapper .homefeedBuilderHoverMask, .User.exploreTabView .thumbImageWrapper .homefeedBuilderHoverMask {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 100; }
.User.homefeedBuilderView .thumbImageWrapper img, .User.homefeedBuilderView .thumbImageWrapper .homefeedBuilderHoverMask, .User.exploreTabView .thumbImageWrapper img, .User.exploreTabView .thumbImageWrapper .homefeedBuilderHoverMask {
border-radius: 50%; }
.User.homefeedBuilderView .userFollowers, .User.exploreTabView .userFollowers {
color: #555;
font-size: 14px;
letter-spacing: -.2px;
line-height: 16px;
margin-bottom: 6px;
margin-top: 4px;
text-align: center; }
.User.homefeedBuilderView .followMask, .User.exploreTabView .followMask {
background-color: rgba(0, 0, 0, 0.7);
border-radius: 50%;
height: 172px;
opacity: 0;
position: absolute;
-webkit-transition: visibility 0s .2s, opacity .2s linear;
transition: visibility 0s .2s, opacity .2s linear;
visibility: hidden;
width: 172px; }
.User.homefeedBuilderView .followMask .followMaskIcon, .User.exploreTabView .followMask .followMaskIcon {
width: 59px;
height: 42px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -215px 0 no-repeat;
display: inline-block;
margin-left: 57px;
margin-top: 65px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.User.homefeedBuilderView .followMask .followMaskIcon, .User.exploreTabView .followMask .followMaskIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -128px -35px;
background-size: 249px 231px; } }
.User.homefeedBuilderView .followMask.visible, .User.exploreTabView .followMask.visible {
opacity: 1;
-webkit-transition: opacity .2s linear;
transition: opacity .2s linear;
visibility: visible; }
.User.linkModule {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
.User.linkModule.thumb.domainOwner .thumbImageWrapper {
margin-right: 8px; }
.User.linkModule .profileSource {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.User.linkModule .profileSource .profileSourceAttributionContent {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 3px; }
.User.linkModule .profileSource .profileSourceAttributionContent .title, .User.linkModule .profileSource .profileSourceAttributionContent .fullname {
color: #444;
max-width: 414px; }
.User.linkModule .profileSource .profileSourceAttributionContent .title {
margin-top: 0; }
.User.linkModule .profileSource .thumbImageWrapper {
float: none;
margin-right: 8px; }
.User.linkModule .profileSource .thumbImageWrapper,
.User.linkModule .profileSource .thumbImageWrapper img, .User.linkModule .profileSource .thumbImageWrapper::after {
height: 40px;
width: 40px; }
.User.linkModule.User.thumb.domainOwner.hasText .thumbImageWrapper {
margin-left: 0; }
.User .hoverMask {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background 0.04s linear;
transition: background 0.04s linear;
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
z-index: 100; }
.User .userWrapper:hover .hoverMask {
background: rgba(255, 255, 255, 0.08); }
.User .userWrapper:active .hoverMask {
background: rgba(255, 255, 255, 0.08); }
.User.gridItem {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px; }
.User.gridItem .userThumbs {
overflow: hidden; }
.User.thumb.small .title,
.User.thumb.small .subtitle,
.User.thumb.small .location,
.User.thumb.small .fullname {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 11px;
line-height: 14px;
margin-bottom: 1px;
margin-top: 1px; }
.User.thumb .title,
.User.thumb .subtitle,
.User.thumb .location {
font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", sans-serif;
font-weight: bold;
color: #808080; }
.User.thumb.hasText .thumbImageWrapper {
margin-right: 8px; }
.User.dim {
opacity: 0.5; }
.User .focusThumbContainer {
position: relative;
background: #eee;
height: 106px;
float: left;
width: 106px; }
.User .focusThumbContainer::after {
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 106px;
left: 0;
position: absolute;
top: 0;
width: 106px; }
.User .focusThumbContainer img {
border-radius: 3px;
height: 106px;
width: 106px; }
.User .thumbContainer {
position: relative;
background-color: #eee;
float: left;
margin: 0 3px 3px 0; }
.User .thumbContainer::after {
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 51px;
left: 0;
position: absolute;
top: 0;
width: 51px; }
.User .thumbContainer img {
border-radius: 3px;
height: 51px;
width: 51px; }
.User .thumbContainer.rightWrap {
margin-right: 0; }
.User .userFocusImage {
display: block;
height: 106px;
width: 106px;
float: left;
margin: 0 3px 3px 0; }
.User .userPin {
display: block;
height: 51px;
width: 51px;
max-width: none; }
.User.inline {
display: inline-block;
margin: 0 2px;
vertical-align: middle; }
.User.inline a {
display: inline-block; }
.User.large .thumbImageWrapper {
position: relative;
width: 100px; }
.User.large .thumbImageWrapper::after {
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 100px;
left: 0;
position: absolute;
top: 0;
width: 100px; }
.User.large .thumbImageWrapper img {
border-radius: 50%;
height: 100px;
width: 100px; }
.User.medium .thumbImageWrapper {
position: relative;
width: 50px; }
.User.medium .thumbImageWrapper::after {
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 50px;
left: 0;
position: absolute;
top: 0;
width: 50px; }
.User.medium .thumbImageWrapper img {
border-radius: 50%;
height: 50px;
width: 50px; }
.User.smallerMedium .thumbImageWrapper {
position: relative;
width: 40px; }
.User.smallerMedium .thumbImageWrapper::after {
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 40px;
left: 0;
position: absolute;
top: 0;
width: 40px; }
.User.smallerMedium .thumbImageWrapper img {
border-radius: 50%;
height: 40px;
width: 40px; }
.User.smallerMedium.brio .title {
font-weight: normal !important;
margin-bottom: 0; }
.User.smallerMedium.brio .title, .User.smallerMedium.brio .fullname {
color: #555;
font-size: 14px; }
.User.smallerMedium.brio .fullname {
margin-top: 2px; }
.User.largerMedium .thumbImageWrapper {
position: relative;
width: 60px; }
.User.largerMedium .thumbImageWrapper::after {
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 60px;
left: 0;
position: absolute;
top: 0;
width: 60px; }
.User.largerMedium .thumbImageWrapper img {
border-radius: 50%;
height: 60px;
width: 60px; }
.User.small {
line-height: 30px; }
.User.small .thumbImageWrapper {
position: relative;
height: 30px;
width: 30px; }
.User.small .thumbImageWrapper::after {
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 30px;
left: 0;
position: absolute;
top: 0;
width: 30px; }
.User.small .thumbImageWrapper img {
border-radius: 50%;
height: 30px;
width: 30px; }
.User.small .thumbImageWrapper img {
vertical-align: top; }
.User.small .thumbImageWrapper .icon {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif;
background-color: #999;
border: 0;
border-radius: 50%;
box-sizing: border-box;
color: #fff;
display: block;
font-size: 18px;
font-weight: bold;
height: 32px;
line-height: 32px;
text-align: center;
width: 32px; }
.User.interests .thumbImageWrapper img {
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
height: 65px;
width: 65px; }
.User.userSelectFollow {
display: inline-block;
padding: 0 0 30px 13px;
position: relative;
vertical-align: top;
width: 85px; }
.User.userSelectFollow .UserFollowButton {
background: transparent;
border: 0;
border-radius: 50%;
font-size: 0;
height: 85px;
left: 13px;
position: absolute;
top: 0;
-webkit-transition: background .1s ease-in, opacity .1s ease-in, box-shadow .1s ease-in, -webkit-transform .1s ease-in;
transition: background .1s ease-in, opacity .1s ease-in, box-shadow .1s ease-in, -webkit-transform .1s ease-in;
transition: background .1s ease-in, opacity .1s ease-in, box-shadow .1s ease-in, transform .1s ease-in;
transition: background .1s ease-in, opacity .1s ease-in, box-shadow .1s ease-in, transform .1s ease-in, -webkit-transform .1s ease-in;
width: 85px;
z-index: 100; }
.User.userSelectFollow .UserFollowButton:hover {
-webkit-transform: scale(1.05);
transform: scale(1.05); }
.User.userSelectFollow .UserFollowButton.dim {
background: url(https://s.pinimg.com/webapp/style/images/follow-friends-checkmark-1x-5bfb33da.png) no-repeat;
background-size: contain;
height: 85px;
width: 85px; }
.User.userSelectFollow .profileImage {
border-radius: 50%;
height: 85px;
-webkit-transition: -webkit-transform .1s ease-in;
transition: -webkit-transform .1s ease-in;
transition: transform .1s ease-in;
transition: transform .1s ease-in, -webkit-transform .1s ease-in;
width: 85px; }
.User.userSelectFollow p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
font: bold 15px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
text-align: center; }
.User.userSelectFollow .profileLink:hover,
.User.userSelectFollow .profileLink:active,
.User.userSelectFollow .profileLink:focus {
text-decoration: underline; }
.User.userSelectFollow .firstName {
margin-top: 12px; }
.User.userSelectFollow .numPins {
color: #999;
font-size: 11px;
font-weight: normal; }
.User.gridItem {
position: relative;
width: 236px; }
.User.gridItem .userDismiss {
width: 18px;
height: 18px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px 0 no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
cursor: pointer;
float: right;
margin: 10px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.User.gridItem .userDismiss {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -62px -201px;
background-size: 249px 231px; } }
.User.gridItem .verifiedDomainIcon {
width: 18px;
height: 18px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -80px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
float: right; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.User.gridItem .verifiedDomainIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -351px -347px;
background-size: 399px 382px; } }
.User.gridItem .verifiedIdentifyIcon {
width: 11px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -204px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.User.gridItem .verifiedIdentifyIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -69px -368px;
background-size: 399px 382px; } }
.User.gridItem .followersCount {
background-color: #000;
background-color: rgba(68, 68, 68, 0.7);
border-radius: 2px;
bottom: 3px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.3);
color: #fff;
padding: 3px 6px;
position: absolute;
right: 3px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7); }
.User.gridItem .username {
margin-bottom: 0; }
.User.gridItem .userStats {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow: hidden;
color: #777;
line-height: 14px;
margin: 2px 0 10px 3px; }
.ja .User.gridItem .userStats {
font-size: 10px; }
.User.debugWrapper {
padding: 2px; }
.User.storyView {
box-shadow: None; }
.User .focusThumbContainer {
margin-right: 3px; }
.User .fullname {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
display: block;
font-size: 15px;
line-height: 17px; }
.User h3 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
height: 18px; }
.User .userThumbs {
margin-bottom: 7px; }
.User .userWrapper {
display: block;
padding: 10px;
bottom: 0;
left: 0;
right: 0;
top: 0; }
.User .userWrapper .debugMacro {
color: #000;
font-weight: normal;
margin: 10px -10px 0; }
.User.userSelect {
cursor: pointer;
position: relative; }
.User.userSelect .hoverMask {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background 0.04s linear;
transition: background 0.04s linear;
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
z-index: 100; }
.User.userSelect .userSelectImageWrapper:hover .hoverMask {
background: rgba(255, 255, 255, 0.08); }
.User.userSelect .userSelectImageWrapper:active .hoverMask {
background: rgba(255, 255, 255, 0.08); }
.User.userSelect .userWrapper {
padding: 0; }
.User.userSelect .moduleMask {
background: #f5f5f5; }
.User.userSelect .userSelectImageWrapper {
position: relative;
overflow: hidden;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
display: block;
height: 68px;
width: 68px; }
.User.userSelect .userSelectImageWrapper::after {
border-radius: 50%;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.75), inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.16);
content: " ";
height: 68px;
left: 0;
position: absolute;
top: 0;
width: 68px; }
.User.userSelect .userSelectImageWrapper img {
border-radius: 50%;
height: 68px;
width: 68px; }
.User.userSelect.fakeUser {
cursor: default; }
.User.userSelect .userName {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
clear: both;
color: #000;
font-size: 13px;
font-weight: 600;
margin: 9px 0 0;
max-width: 68px;
text-align: center; }
.User.userSelect:active {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-transition: scale .1s ease-in-out;
transition: scale .1s ease-in-out; }
.User.userSelect:active.fakeUser {
-webkit-transform: scale(1);
transform: scale(1); }
.User.userCheckableSelectView {
display: inline-block;
padding-bottom: 50px;
position: relative;
text-align: center;
vertical-align: top;
width: 136px; }
.User.userCheckableSelectView.noPadding {
padding-bottom: 0; }
.User.userCheckableSelectView .selectCheck {
width: 21px;
height: 21px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) 0 -242px no-repeat;
position: absolute;
right: 25px;
top: 5px;
z-index: 101; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.User.userCheckableSelectView .selectCheck {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -208px -136px;
background-size: 249px 231px; } }
.User.userCheckableSelectView .selectCheck.checked {
width: 21px;
height: 21px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -191px -97px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.User.userCheckableSelectView .selectCheck.checked {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -208px -92px;
background-size: 249px 231px; } }
.User.userCheckableSelectView .profileImage {
border-radius: 50%;
cursor: pointer;
height: 116px;
-webkit-transition: -webkit-transform .1s ease-in;
transition: -webkit-transform .1s ease-in;
transition: transform .1s ease-in;
transition: transform .1s ease-in, -webkit-transform .1s ease-in;
width: 116px; }
.User.userCheckableSelectView .profileName {
font-size: 15px;
margin-top: 8px; }
.User.userCheckableSelectView p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
font: bold 15px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
text-align: center; }
.User.userCheckableSelectView .numPins {
color: #999;
font-size: 12px;
font-weight: normal; }
.User.imageOnlyThumb {
display: inline-block;
position: relative;
text-align: center;
vertical-align: top;
width: 136px; }
.User.imageOnlyThumb .overflowMask {
background: #bd081c;
border-radius: 50%;
height: 136px;
position: absolute;
-webkit-transition: -webkit-transform .1s ease-in;
transition: -webkit-transform .1s ease-in;
transition: transform .1s ease-in;
transition: transform .1s ease-in, -webkit-transform .1s ease-in;
width: 136px;
z-index: 103; }
.User.imageOnlyThumb .overflowMask .mask {
display: table;
height: 100%;
width: 100%; }
.User.imageOnlyThumb .overflowMask .text {
color: #fff;
display: table-cell;
font-size: 24px;
font-weight: bold;
line-height: 29px;
padding: 8px;
text-align: center;
vertical-align: middle; }
.User.imageOnlyThumb .profileImage {
border-radius: 50%;
cursor: pointer;
height: 136px;
-webkit-transition: -webkit-transform .1s ease-in;
transition: -webkit-transform .1s ease-in;
transition: transform .1s ease-in;
transition: transform .1s ease-in, -webkit-transform .1s ease-in;
width: 136px; }
.User.thumb, .User.thumbUserInfo {
overflow: hidden;
position: relative; }
.User.thumb.has_via:first-child, .User.thumbUserInfo.has_via:first-child {
border-right: 1px solid #e3e3e3; }
.User.thumb .thumbImageWrapper,
.User.thumb .profileSourceAttributionContent, .User.thumbUserInfo .thumbImageWrapper,
.User.thumbUserInfo .profileSourceAttributionContent {
float: left; }
.User.thumb .fullname, .User.thumbUserInfo .fullname {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", sans-serif;
font-weight: bold;
color: #333;
display: block; }
.User.thumb .Button, .User.thumbUserInfo .Button {
float: right;
font-size: 12px;
margin-top: 10px;
padding-left: 15px;
padding-right: 15px; }
.User.thumb.small .title,
.User.thumb.small .subtitle,
.User.thumb.small .location,
.User.thumb.small .fullname, .User.thumbUserInfo.small .title,
.User.thumbUserInfo.small .subtitle,
.User.thumbUserInfo.small .location,
.User.thumbUserInfo.small .fullname {
line-height: 14px; }
.User.thumb.small.inline .fullname, .User.thumbUserInfo.small.inline .fullname {
display: inline-block; }
.User.thumb.notification, .User.thumbUserInfo.notification {
line-height: 33px; }
.User.thumb.notification .thumbImageWrapper, .User.thumbUserInfo.notification .thumbImageWrapper {
position: relative;
height: 33px;
width: 33px; }
.User.thumb.notification .thumbImageWrapper::after, .User.thumbUserInfo.notification .thumbImageWrapper::after {
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 33px;
left: 0;
position: absolute;
top: 0;
width: 33px; }
.User.thumb.notification .thumbImageWrapper img, .User.thumbUserInfo.notification .thumbImageWrapper img {
border-radius: 50%;
height: 33px;
width: 33px; }
.User.thumb.notification .thumbImageWrapper img, .User.thumbUserInfo.notification .thumbImageWrapper img {
vertical-align: top; }
.User.thumb.notification .title,
.User.thumb.notification .subtitle,
.User.thumb.notification .location,
.User.thumb.notification .fullname, .User.thumbUserInfo.notification .title,
.User.thumbUserInfo.notification .subtitle,
.User.thumbUserInfo.notification .location,
.User.thumbUserInfo.notification .fullname {
font-size: 11px;
line-height: 14px;
margin-bottom: 1px;
margin-top: 1px; }
.BoardInfoBar .User.thumb.notification .fullname, .BoardInfoBar .User.thumbUserInfo.notification .fullname {
color: #444;
font-size: 13px;
margin-top: 9px; }
.User.thumb.homefeedBuilderTitle .thumbImageWrapper, .User.thumb.exploreTabTitle .thumbImageWrapper, .User.thumbUserInfo.homefeedBuilderTitle .thumbImageWrapper, .User.thumbUserInfo.exploreTabTitle .thumbImageWrapper {
position: relative;
margin-right: 9px;
width: 38px; }
.User.thumb.homefeedBuilderTitle .thumbImageWrapper::after, .User.thumb.exploreTabTitle .thumbImageWrapper::after, .User.thumbUserInfo.homefeedBuilderTitle .thumbImageWrapper::after, .User.thumbUserInfo.exploreTabTitle .thumbImageWrapper::after {
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 38px;
left: 0;
position: absolute;
top: 0;
width: 38px; }
.User.thumb.homefeedBuilderTitle .thumbImageWrapper img, .User.thumb.exploreTabTitle .thumbImageWrapper img, .User.thumbUserInfo.homefeedBuilderTitle .thumbImageWrapper img, .User.thumbUserInfo.exploreTabTitle .thumbImageWrapper img {
border-radius: 50%;
height: 38px;
width: 38px; }
.User.thumb.homefeedBuilderTitle .title,
.User.thumb.homefeedBuilderTitle .fullname, .User.thumb.exploreTabTitle .title,
.User.thumb.exploreTabTitle .fullname, .User.thumbUserInfo.homefeedBuilderTitle .title,
.User.thumbUserInfo.homefeedBuilderTitle .fullname, .User.thumbUserInfo.exploreTabTitle .title,
.User.thumbUserInfo.exploreTabTitle .fullname {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #444;
max-width: 100%; }
.User.thumb.homefeedBuilderTitle .title, .User.thumb.exploreTabTitle .title, .User.thumbUserInfo.homefeedBuilderTitle .title, .User.thumbUserInfo.exploreTabTitle .title {
font-size: 14px;
letter-spacing: -.2px;
line-height: 16px;
padding: 2px 0; }
.User.thumb.homefeedBuilderTitle .fullname, .User.thumb.exploreTabTitle .fullname, .User.thumbUserInfo.homefeedBuilderTitle .fullname, .User.thumbUserInfo.exploreTabTitle .fullname {
font-size: 12px;
font-weight: normal;
letter-spacing: -.1px; }
.User.thumb.boardRepTitle .thumbImageWrapper, .User.thumbUserInfo.boardRepTitle .thumbImageWrapper {
position: relative;
margin-right: 9px;
width: 38px; }
.User.thumb.boardRepTitle .thumbImageWrapper::after, .User.thumbUserInfo.boardRepTitle .thumbImageWrapper::after {
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 38px;
left: 0;
position: absolute;
top: 0;
width: 38px; }
.User.thumb.boardRepTitle .thumbImageWrapper img, .User.thumbUserInfo.boardRepTitle .thumbImageWrapper img {
border-radius: 50%;
height: 38px;
width: 38px; }
.User.thumb.boardRepTitle .title,
.User.thumb.boardRepTitle .fullname, .User.thumbUserInfo.boardRepTitle .title,
.User.thumbUserInfo.boardRepTitle .fullname {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%; }
.User.thumb.boardRepTitle .title, .User.thumbUserInfo.boardRepTitle .title {
color: #333;
font-size: 15px;
line-height: 15px;
padding: 2px 0; }
.User.thumb.boardRepTitle .fullname, .User.thumbUserInfo.boardRepTitle .fullname {
color: #8e8e8e;
font-size: 13px; }
.User.thumb.medium .title,
.User.thumb.medium .subtitle,
.User.thumb.medium .location,
.User.thumb.medium .fullname, .User.thumbUserInfo.medium .title,
.User.thumbUserInfo.medium .subtitle,
.User.thumbUserInfo.medium .location,
.User.thumbUserInfo.medium .fullname {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 6px;
margin-top: 6px; }
.User.thumb.medium .title,
.User.thumb.medium .subtitle,
.User.thumb.medium .location, .User.thumbUserInfo.medium .title,
.User.thumbUserInfo.medium .subtitle,
.User.thumbUserInfo.medium .location {
font-size: 13px; }
.User.thumb.medium .location, .User.thumbUserInfo.medium .location {
margin-top: 0; }
.User.thumb.medium .fullname, .User.thumbUserInfo.medium .fullname {
font-size: 16px;
margin-bottom: 1px;
margin-top: 8px; }
.User.thumb.medium.boardCollaborator.noLocation .fullname, .User.thumbUserInfo.medium.boardCollaborator.noLocation .fullname {
line-height: 34px; }
.User.thumb.medium.boardFollower .fullname, .User.thumbUserInfo.medium.boardFollower .fullname {
line-height: 34px; }
.User.thumb.pinner .thumbImageWrapper, .User.thumbUserInfo.pinner .thumbImageWrapper {
margin-right: 15px; }
.User.thumb.pinner .title, .User.thumbUserInfo.pinner .title {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #999;
font-size: 13px;
font-weight: bold;
line-height: 13px;
height: auto;
margin: 6.5px 0 7px; }
.User.thumb.pinner .fullname, .User.thumbUserInfo.pinner .fullname {
color: #333;
font-size: 16px;
font-weight: bold;
line-height: 17px; }
.User.thumb.domainOwner .thumbImageWrapper, .User.thumbUserInfo.domainOwner .thumbImageWrapper {
margin-right: 4px; }
.User.thumb.domainOwner .fullname, .User.thumbUserInfo.domainOwner .fullname {
color: #555;
font-size: 14px;
font-weight: bold; }
.User.thumb.domainOwner .title, .User.thumbUserInfo.domainOwner .title {
color: #555;
font-size: 14px;
font-weight: normal;
margin-top: 2px; }
.User.thumbUserInfo .fullname {
margin-left: 10px; }
.User.news {
margin: 7px 14px;
width: 208px; }
.User.news.small .UserFollowButton {
margin-top: 0; }
.User.followFriendsItem {
font-size: 11px;
line-height: 1.2em;
padding: 5px 14px;
position: relative; }
.User.followFriendsItem::after {
clear: both;
content: "";
display: table; }
.User.followFriendsItem.loading {
min-height: 0; }
.User.followFriendsItem:hover {
background: #f3f3f3; }
.User.followFriendsItem .thumbImageWrapper {
position: relative;
float: left;
height: 30px;
width: 30px; }
.User.followFriendsItem .thumbImageWrapper::after {
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 30px;
left: 0;
position: absolute;
top: 0;
width: 30px; }
.User.followFriendsItem .thumbImageWrapper img {
border-radius: 50%;
height: 30px;
width: 30px; }
.User.followFriendsItem .thumbImageWrapper img {
border-radius: 50%;
height: 30px;
width: 30px; }
.User.followFriendsItem .contactUser {
margin-left: 35px; }
.User.followFriendsItem .contactUsername {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #717171;
font-weight: 700; }
.User.followFriendsItem:hover .dismiss {
width: 9px;
height: 10px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -235px -206px no-repeat;
cursor: pointer;
margin-right: 14px;
position: absolute;
right: 0;
top: 40%; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.User.followFriendsItem:hover .dismiss {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -418px -89px;
background-size: 428px 427px; } }
.User.followFriendsItem .contactConfirmation {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: #ffa;
bottom: 0;
display: none;
left: 0;
padding: 10px;
position: absolute;
right: 0;
top: 0; }
.User.followFriendsItem.contactConfirmed .contactConfirmation {
display: block; }
.User.followFriendsItem .UserFollowButton {
color: #bd081c; }
.User.followFriendsItem .UserFollowButton:hover {
text-decoration: none; }
.User.followFriendsItem .UserFollowButton.disabled {
color: #717171; }
.User.followFriendsItem .UserFollowButton.disabled:hover {
cursor: default;
text-decoration: none; }
.User.thumbHomefeedBuilder {
width: 172px; }
.User.thumbHomefeedBuilder .thumbImageWrapper {
bottom: 38px;
left: 12px;
position: absolute;
width: auto;
width: initial;
z-index: 101; }
.User.thumbHomefeedBuilder .thumbImageWrapper img {
border: 2px solid #fff;
border-radius: 50%;
display: inline-block;
float: none;
height: 30px;
width: 30px; }
.User.thumbHomefeedBuilder .thumbImageWrapper img:nth-child(1) {
border-radius: 50%; }
.User.thumbHomefeedBuilder .thumbImageWrapper::after {
box-shadow: none;
height: 30px;
width: 30px; }
.User.thumbHomefeedBuilder .title {
color: #444;
letter-spacing: -.2px;
line-height: 18px;
padding-top: 12px;
size: 16px; }
.User.thumbHomefeedBuilder .fullname {
color: #444;
font-weight: normal;
letter-spacing: -1px;
size: 12px; }
.User.contactRequestListItem {
margin: 0 10px; }
.User.communityItem .profileSource {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.User.communityItem .fullname {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 0 !important; }
/* desktop.scss */
.User a.profileSource {
display: block; }
.User .focusThumbContainer {
background: none;
height: 236px;
margin-right: 0;
width: 236px; }
.User .focusThumbContainer img {
border-radius: 50%;
height: 236px;
width: 236px; }
.User .focusThumbContainer::after {
background: rgba(0, 0, 0, 0.02);
border-radius: 50%;
box-shadow: none;
height: 236px;
width: 236px; }
.User.thumbUserInfo.small .fullname {
color: #333;
font-size: 13px;
line-height: 30px;
max-width: 150px; }
.User.exploreTabView .homefeedBuilderHoverMask {
margin: 10px 17px; }
.User.gridItem {
background: none;
box-shadow: none;
cursor: pointer;
margin: -10px;
padding: 10px;
width: 236px; }
.User.gridItem .username {
height: 20px;
text-align: center;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */ }
.User.gridItem .userThumbs {
margin-bottom: 0; }
.User.gridItem::before {
background: rgba(0, 0, 0, 0.05);
border-radius: 8px;
content: " " !important;
height: 100%;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
-webkit-transform: scale(0.96);
transform: scale(0.96);
width: 100%;
z-index: 3; }
.User.gridItem:not(.userWrapperDisableHover):hover::before {
-webkit-animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards;
animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; }
.User.storyView::before {
display: none; }
.User .hoverMask {
border-radius: none;
box-shadow: none; }
.User .thumbImageWrapper::after {
box-shadow: none !important; }
.User .userFocusImage {
margin: 0; }
.User .userWrapper {
padding: 0; }
.User .Button.gridItem {
bottom: auto;
width: 236px; }
.User .homefeedBuilderHoverMask {
margin-top: 10px; }
.User.thumb.boardRepTitle .title {
/* stylelint-disable-next-line at-rule-no-unknown */ }
.UserCardWrapper {
margin: 0 7px 30px;
width: 172px; }
.UserMenu {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #f8f8f8;
background: -webkit-linear-gradient(#fff, #f0f0f0);
background: linear-gradient(#fff, #f0f0f0);
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 3px;
color: #888;
cursor: pointer;
font-size: 13px;
font-weight: bold;
margin-right: 7px;
position: relative; }
.UserMenu::after {
clear: both;
content: "";
display: table; }
.UserMenu.full {
margin-right: 0; }
.UserMenu.merged, .UserMenu.merged:hover, .UserMenu.merged.active {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 0 0;
border-right: 0;
border-top-right-radius: 0 0;
margin-right: 0; }
.UserMenu:hover, .UserMenu.active {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #c11d24;
background: -webkit-linear-gradient(#d62229, #ab171e);
background: linear-gradient(#d62229, #ab171e);
background-color: #d62229;
border: 1px solid #b3171e;
border-radius: 3px 3px 0 0; }
.UserMenu:hover .caret, .UserMenu.active .caret {
width: 10px;
height: 7px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -138px -200px no-repeat;
opacity: 1; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserMenu:hover .caret, .UserMenu.active .caret {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -132px -162px;
background-size: 249px 231px; } }
.UserMenu:hover .profileImage, .UserMenu.active .profileImage {
box-shadow: 0 0 2px #590b0e inset; }
.UserMenu:hover .profileName, .UserMenu.active .profileName {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.11); }
.UserMenu .usernameLink {
float: left;
width: 100%; }
.UserMenu .profileImage {
background-size: cover;
border-radius: 3px 0 0 3px;
box-shadow: 0 0 2px #616161 inset;
float: left;
height: 30px;
margin: -1px;
width: 30px; }
.UserMenu .profileName {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
height: 21px;
padding: 6px 0 1px 10px; }
.UserMenu .caret {
width: 10px;
height: 7px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -162px -200px no-repeat;
opacity: .5;
position: absolute;
right: 5px;
top: 11px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserMenu .caret {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -143px -162px;
background-size: 249px 231px; } }
.UserMenu .caret + .usernameLink .profileName {
padding-right: 20px; }
.AboutLinks {
padding: 10px 15px; }
.AboutLinks li {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
padding: 0 3px; }
.AboutLinks li:last-child a::after {
content: ""; }
.AboutLinks li a {
font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", sans-serif;
color: #999;
display: inline-block;
padding: 0 !important; }
.AboutLinks li a.smallFont, .AboutLinks li a.normalFont {
color: #949494;
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8); }
.AboutLinks li a.smallFont {
font-size: 11px; }
.AboutLinks li a.normalFont {
font-size: 12px; }
.AboutLinks li a:hover {
color: #333; }
.AboutLinks li a::after {
content: ".";
position: relative;
right: -4px;
top: -3px; }
.AboutLinks.aboutLinksReact li {
padding: 0 6px; }
.AboutLinks.aboutLinksReact li a::after {
right: -6px; }
.AboutLinks.helpCenterButton {
border-bottom: 1px solid #ebebeb;
margin-bottom: 10px;
padding: 0 0 10px; }
.AboutLinks.helpCenterButton li {
display: block;
padding: 3px;
text-align: left; }
.AboutLinks.helpCenterButton li:last-child a::after {
content: ""; }
.AboutLinks.helpCenterButton li a {
font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", sans-serif;
color: #717171; }
.AboutLinks.helpCenterButton li a.smallFont, .AboutLinks.helpCenterButton li a.normalFont {
color: #717171;
font-weight: bold;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8); }
.AboutLinks.helpCenterButton li a.smallFont {
font-size: 12px; }
.AboutLinks.helpCenterButton li a.normalFont {
font-size: 14px; }
.AboutLinks.helpCenterButton li a:hover {
color: #333; }
.AboutLinks.helpCenterButton li a::after {
content: " "; }
.CategoriesMenu {
-webkit-overflow-scrolling: touch;
overflow-y: auto;
border-radius: 6px;
height: 100%;
text-align: left;
width: 496px; }
.CategoriesMenu .categoriesWrapper {
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: auto;
-ms-flex-pack: distribute;
justify-content: space-around;
margin: 0;
padding: 30px 24px 16px; }
.CategoriesMenu .categoriesWrapper.iPad {
position: static; }
.CategoriesMenu ul {
margin: 0;
padding: 0;
width: 201px; }
.CategoriesMenu li {
margin-bottom: 3px; }
.CategoriesMenu .item {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-radius: 6px;
color: #838383;
display: inline-block;
font-size: 14px;
font-weight: 600;
padding: 0;
position: relative; }
.CategoriesMenu .item.shop {
color: #0084ff;
margin-bottom: 3px; }
.CategoriesMenu .item.shop:hover {
color: #0084ff; }
.CategoriesMenu .item:active, .CategoriesMenu .item.selected {
color: #000; }
.CategoriesMenu .item.highlight span {
color: #bd081c; }
.CategoriesMenu .item:focus {
outline: none; }
.CategoriesMenu .item:focus, .CategoriesMenu .item:hover {
background-color: #ededed;
background: -webkit-linear-gradient(#f1f1f1, #e8e8e8);
background: linear-gradient(#f1f1f1, #e8e8e8);
background: none;
background-color: transparent;
color: #cb2027; }
.CategoriesMenu .AboutLinks {
border-top: 1px solid #ebebeb; }
.CategoriesMenu .AboutLinks ul {
width: 100%; }
.CategoriesPage .categoriesSep {
border-bottom: 1px solid #ccc;
box-shadow: 0 1px 0 #eee;
margin: 50px 0 40px;
text-align: center; }
.CategoriesPage .categoriesSep h2 {
background-color: #e9e9e9;
color: #8d8d8d;
font-size: 14px;
margin: 0 auto -8px;
text-shadow: 0 1px 0 #eee;
width: 220px; }
.Category {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
padding: 10px;
position: relative;
width: 216px; }
.Category .hoverMask {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background 0.04s linear;
transition: background 0.04s linear;
border-radius: 3px;
box-shadow: none;
z-index: 100; }
.Category .imageWrapper:hover .hoverMask {
background: rgba(255, 255, 255, 0.08); }
.Category .imageWrapper:active .hoverMask {
background: rgba(255, 255, 255, 0.08); }
.Category .name {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #555;
display: block;
font-size: 14px;
font-weight: bold;
height: 18px;
line-height: 18px;
margin: 0 3px 6px;
position: relative; }
.Category .imageWrapper {
position: relative; }
.Category .imageWrapper::after {
border-radius: 6px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 120px;
left: 0;
position: absolute;
top: 0;
width: 216px; }
.Category .imageWrapper .categoryImage {
border-radius: 6px;
height: 120px;
width: 216px; }
.Category .imageWrapper .categoryImage {
height: 120px;
overflow: hidden; }
.FeedUsers {
overflow: hidden;
width: 236px; }
.FeedUsers .User {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
margin-bottom: 14px; }
.FeedUsers .User:last-child {
margin-bottom: 0; }
.Domain .domainWrapper {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
cursor: pointer;
padding: 10px;
width: 216px; }
.Domain .domainWrapper .hoverMask {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background 0.04s linear;
transition: background 0.04s linear;
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
z-index: 100; }
.Domain .domainWrapper .domainLinkWrapper:hover .hoverMask {
background: rgba(255, 255, 255, 0.08); }
.Domain .domainWrapper .domainLinkWrapper:active .hoverMask {
background: rgba(255, 255, 255, 0.08); }
.Domain .thumbRow {
padding-bottom: 3px; }
.Domain .thumbRow::after {
clear: both;
content: "";
display: table; }
.Domain .domainLinkWrapper {
display: block; }
.Domain .domainName {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #555;
display: block;
font-size: 14px;
font-weight: bold;
height: 18px;
line-height: 18px;
margin: 0 3px 6px;
position: relative; }
.Domain .domainSubtitle {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #8e8e8e;
font-size: 12px;
margin-left: 3px; }
.Domain .thumb {
position: relative;
overflow: hidden;
background-color: #eee;
border-radius: 6px;
float: left;
margin-left: 3px;
width: 70px; }
.Domain .thumb::after {
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 70px;
left: 0;
position: absolute;
top: 0;
width: 70px; }
.Domain .thumb .thumbImage {
border-radius: 3px;
height: 70px;
width: 70px; }
.Domain .thumb img {
display: block; }
.Domain .thumb:first-child {
margin: 0; }
.DomainFeedPage .feedName {
color: #333;
color: rgba(21, 21, 21, 0.8);
font-size: 47px;
font-weight: bold;
line-height: 52px;
margin-left: auto;
margin-right: auto;
max-width: 736px;
text-align: center;
word-wrap: break-word;
margin-bottom: 21px;
margin-top: 33px; }
.DomainFeedPage .pinsFrom {
color: #999;
font-size: 13px;
font-weight: normal;
padding-bottom: 7px;
padding-top: 25px;
text-align: center; }
.DomainFeedPage .noData {
color: #333;
text-align: center;
display: none;
margin-top: 100px; }
.DomainFeedPage .noData p {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 17px;
margin: 0 0 1em; }
.DomainFeedPage .noData .emptyIcon {
background: url(https://s.pinimg.com/webapp/style/images/empty_user_pins-1x-977b487f.png) no-repeat;
background-size: contain;
height: 166px;
width: 100px;
display: inline-block;
margin-bottom: 16px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.DomainFeedPage .noData .emptyIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/empty_user_pins-2x-ec575230.png); } }
.ExploreTabPage {
background: #fff;
min-width: 1270px; }
.ExploreTabPage.tablet {
display: none; }
.ExploreTabStory {
margin: 0 auto;
padding: 45px;
width: 1180px; }
.ExploreTabStory .exploreTabStoryWrapper {
border-radius: 16px; }
.ExploreTabStory .exploreTabStoryWrapper.curated {
padding: 48px 0; }
.ExploreTabStory .exploreTabStoryWrapper .explore_tab_search, .ExploreTabStory .exploreTabStoryWrapper .explore_tab_board, .ExploreTabStory .exploreTabStoryWrapper .explore_tab_user {
margin: 0 auto;
width: 1008px; }
.ExploreTabStory .exploreTabStoryWrapper .explore_tab_pin {
margin: 0 auto 20px;
width: 1014px; }
.ExploreTabStory .seeMoreWrapper {
text-align: center; }
.ExploreTabStoryHeader {
margin-bottom: 20px;
text-align: center; }
.ExploreTabStoryHeader .bubbleWrapper {
display: inline-block;
height: 32px;
position: relative;
width: 80px; }
.ExploreTabStoryHeader .bubble {
width: 79px;
height: 34px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -74px -97px no-repeat;
display: inline-block;
left: -2px;
position: absolute;
top: -1px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ExploreTabStoryHeader .bubble {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -128px 0;
background-size: 249px 231px; } }
.ExploreTabStoryHeader .bubble.boards {
background-color: #93b6c1; }
.ExploreTabStoryHeader .bubble.users {
background-color: #a9ba97; }
.ExploreTabStoryHeader .bubble.pins {
background-color: #a9ba97; }
.ExploreTabStoryHeader .bubble.searches {
background-color: #e8bcaf; }
.ExploreTabStoryHeader .categoryTitle {
color: #fff;
font-size: 12px;
letter-spacing: -.1px;
padding-top: 8px; }
.ExploreTabStoryHeader .storyTitle {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #555;
font-size: 38px;
font-weight: bold;
letter-spacing: -2.2px;
margin-top: 4px; }
.ExploreTabStoryHeader .storyTitle .buttonText:hover {
color: #5f5f5f; }
.ExploreTabStoryHeader .storySubtitle {
color: #555;
font-size: 16px;
letter-spacing: 0.2px;
margin: 4px auto 0;
opacity: .5;
width: 930px; }
.ExploreTabStoryHeader .shareStoryButtonWrapper {
float: right;
margin-right: 20px; }
.ExploreTabStoryHeader .shareStoryButtonWrapper .btn {
background-color: rgba(0, 0, 0, 0.1);
background-image: none;
border: 0;
border-radius: 4px;
box-shadow: none;
color: rgba(0, 0, 0, 0.7);
height: 36px;
text-shadow: none;
height: 31px;
opacity: 0.8;
padding: 0 16px; }
.ExploreTabStoryHeader .shareStoryButtonWrapper .btn:hover {
background-color: rgba(0, 0, 0, 0.2);
border: 0; }
.ExploreTabStoryHeader .shareStoryButtonWrapper .btn:active, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn:focus, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.active {
background-color: rgba(0, 0, 0, 0.2);
background-image: none;
border: 0;
box-shadow: none; }
.ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:active {
background-color: #bd081c;
border: 0;
box-shadow: none;
color: rgba(0, 0, 0, 0.1);
text-shadow: none; }
.ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary.btn.primary:hover, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary.btn.primaryOnHover:hover:not(.noHoverActive):hover, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:focus, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:active, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary.active .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:not(.noHoverActive):active, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:not(.noHoverActive):focus, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:active.btn.primary:hover, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:active.btn.primaryOnHover:hover:not(.noHoverActive):hover, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:active:focus, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:active:active, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:active.active .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:not(.noHoverActive):active, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:active:not(.noHoverActive):focus, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary.active .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:active:not(.noHoverActive):active, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:active.active .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.primary:active:not(.noHoverActive):active {
/* the above is for css specificity, will be better after the experiments are shipped to
all users */
background: #b7071b;
border: 0;
box-shadow: none;
text-shadow: none; }
.ExploreTabStoryHeader .shareStoryButtonWrapper .btn.white, .ExploreTabStoryHeader .shareStoryButtonWrapper .btn.white:active {
background-color: white; }
.ExploreTabStoryHeader .shareStoryButtonWrapper .btn.white:hover {
background-color: rgba(0, 0, 0, 0.1); }
.ExploreTabStoryHeader.articleHeader .buttonText:hover {
color: #555; }
.ExploreTabStoryHeader.articleHeader .bubbleWrapper {
display: block;
margin: 0 auto; }
.ExploreTabStoryHeader.articleHeader.flat .storySubtitle {
margin-bottom: 30px; }
.ExploreTabStorySeeMore {
border-radius: 16px;
height: auto;
margin: 20px auto 0;
padding-top: 20px;
width: 1100px; }
.ExploreTabStorySeeMore.defaultLoaded {
background-color: #fff; }
.ExploreTabStorySeeMore.exploreTabStorySeeMoreModal {
height: 800px; }
.ExploreTabStorySeeMore.exploreTabStorySeeMoreModal .contentContainer {
height: 640px;
overflow-y: auto;
position: relative;
top: 160px; }
.ExploreTabStorySeeMore.exploreTabStorySeeMoreModal .contentContainer.curated {
height: 500px;
top: 300px; }
.ExploreTabStorySeeMoreBlock {
padding-bottom: 60px; }
.ExploreTabStorySeeMoreBlock .blockTitle {
color: #555;
font-size: 20px;
font-weight: 500;
text-align: center; }
.ExploreTabStorySeeMoreBlock .blockSubtitle {
color: #555;
font-size: 16px;
letter-spacing: 0.2px;
line-height: 1.4;
opacity: .5;
padding-bottom: 30px;
text-align: center; }
.ExploreTabStorySeeMoreBlock .blockContent .explore_tab_search, .ExploreTabStorySeeMoreBlock .blockContent .explore_tab_board {
width: 1008px; }
.ExploreTabStorySeeMoreBlock .blockContent .explore_tab_pin {
margin-bottom: 20px;
width: 1014px; }
.ExploreTabStorySeeMoreBlock .blockContent .explore_tab_user {
width: 756px; }
.FlashlightEnabledImage {
max-width: 100%;
position: relative; }
.FlashlightEnabledImage > .heightContainer > img {
height: 100%;
position: absolute;
width: 100%; }
.FlashlightEnabledImage.unknownImage > .heightContainer > img {
position: static; }
.FlashlightEnabledImage .flashlightContainer {
position: absolute;
right: 10px;
top: 10px;
z-index: 6; }
.FlashlightEnabledImage .visualSearchObjectOverlay {
height: 0;
left: 50%;
position: absolute;
width: 0;
z-index: 6; }
.FlashlightEnabledImage .visualLiveSearchOverlayOuterWrapper {
display: none;
height: 100%;
left: 0;
position: absolute;
width: 100%;
z-index: 6; }
.FlashlightEnabledImage .visualLiveSearchOverlay {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 6; }
.FlashlightEnabledImage .visualLiveSearchOverlayInnerWrapper {
display: block; }
.FlashlightEnabledImage .visualLiveSearchOverlayInnerWrapper .jcrop-holder {
background-color: transparent !important; }
.FlashlightEnabledImage .visualLiveSearchOverlayInnerWrapper .jcrop-handle {
background-color: transparent;
border: 0;
height: 20px;
width: 20px; }
.FlashlightEnabledImage .visualLiveSearchOverlayInnerWrapper .ord-nw {
opacity: 100 !important;
border-top: 6px solid white;
border-left: 6px solid white;
margin: 0 !important; }
.FlashlightEnabledImage .visualLiveSearchOverlayInnerWrapper .ord-ne {
opacity: 100 !important;
border-top: 6px solid white;
border-right: 6px solid white;
margin: 0 !important; }
.FlashlightEnabledImage .visualLiveSearchOverlayInnerWrapper .ord-sw {
opacity: 100 !important;
border-bottom: 6px solid white;
border-left: 6px solid white;
margin: 0 !important; }
.FlashlightEnabledImage .visualLiveSearchOverlayInnerWrapper .ord-se {
opacity: 100 !important;
border-bottom: 6px solid white;
border-right: 6px solid white;
margin: 0 !important; }
.FlashlightEnabledImage .flashlightAnimationContainer {
height: 100%;
position: absolute;
width: 100%;
z-index: 6; }
.FlashlightEnabledImage .flashlightAnimationContainer .flashlightAnimationOverlay {
background-color: #000;
height: 100%;
opacity: .4;
position: relative;
width: 100%; }
.FlashlightEnabledImage .flashlightAnimationContainer .flashlightAnimationWrapper {
height: 5px;
position: absolute;
right: 10px;
top: 10px;
width: 5px;
z-index: 7; }
.FlashlightEnabledImage .flashlightAnimationContainer .flashlightAnimationWrapper .topRightHandle {
opacity: 100 !important;
border-top: 6px solid white;
border-right: 6px solid white;
margin: 0 !important;
right: 0;
top: 0; }
.FlashlightEnabledImage .flashlightAnimationContainer .flashlightAnimationWrapper .topLeftHandle {
opacity: 100 !important;
border-top: 6px solid white;
border-left: 6px solid white;
margin: 0 !important;
left: 0;
top: 0; }
.FlashlightEnabledImage .flashlightAnimationContainer .flashlightAnimationWrapper .bottomRightHandle {
opacity: 100 !important;
border-bottom: 6px solid white;
border-right: 6px solid white;
margin: 0 !important;
bottom: 0;
right: 0; }
.FlashlightEnabledImage .flashlightAnimationContainer .flashlightAnimationWrapper .bottomLeftHandle {
opacity: 100 !important;
border-bottom: 6px solid white;
border-left: 6px solid white;
margin: 0 !important;
bottom: 0;
left: 0; }
.FlashlightEnabledImage .flashlightAnimationContainer .flashlightAnimationWrapper .handle {
height: 20px;
position: absolute;
width: 20px;
z-index: 7; }
.FlashlightEnabledImage .noDisplay {
display: none; }
.FlashlightEnabledImage .visible {
visibility: visible; }
.FlashlightEnabledImage .hidden {
visibility: hidden; }
.FlashlightEnabledImage .stlDot {
background-color: #0084ff;
border-radius: 50%;
cursor: pointer;
height: 24px;
opacity: .6;
position: absolute;
-webkit-transition: .1s;
transition: .1s;
width: 24px;
z-index: 7; }
.FlashlightEnabledImage .stlDot.active {
-webkit-animation: dotPop .55s;
animation: dotPop .55s; }
@-webkit-keyframes dotPop {
0% {
height: 24px;
margin: 0;
width: 24px; }
50% {
height: 28px;
margin: -4px;
width: 28px; }
100% {
height: 24px;
margin: 0;
width: 24px; } }
@keyframes dotPop {
0% {
height: 24px;
margin: 0;
width: 24px; }
50% {
height: 28px;
margin: -4px;
width: 28px; }
100% {
height: 24px;
margin: 0;
width: 24px; } }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.FindMoreButton {
border: 1px solid #efefef;
border-radius: 4px;
box-sizing: border-box;
cursor: pointer;
margin: 0 8px;
position: relative;
width: 172px; }
.FindMoreButton.findMoreTopics {
height: 214px;
margin-bottom: 28px; }
.FindMoreButton.findMoreBoards {
height: 258px;
margin-bottom: 26px; }
.FindMoreButton.findMorePinners {
height: 241px;
margin-bottom: 30px; }
.FindMoreButton .findMoreButtonWrapper {
left: 50%;
position: absolute;
text-align: center;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
.FindMoreButton .findMoreButtonWrapper .findMoreButtonIcon {
width: 41px;
height: 42px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -215px -132px no-repeat;
display: inline-block; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.FindMoreButton .findMoreButtonWrapper .findMoreButtonIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -43px -96px;
background-size: 249px 231px; } }
.FindMoreButton .findMoreButtonWrapper .findMoreButtonText {
color: #b5b5b5;
font-size: 21px;
font-weight: bold;
letter-spacing: -.3px;
line-height: 23px;
margin-top: 12px;
width: 132px; }
/* desktop.scss */
.FindMoreButton.findMoreBoards {
height: 269px;
margin-bottom: 27px;
margin-top: 16px; }
.FindMoreButton.findMorePinners {
height: 245px; }
.HomefeedBuilder {
height: 802px;
padding-top: 20px;
width: 1004px; }
.HomefeedBuilder .contentContainer {
height: 802px;
overflow-x: hidden;
overflow-y: auto;
position: relative;
z-index: 11; }
.HomefeedBuilderButton {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
cursor: pointer;
margin-bottom: 10px;
overflow: hidden;
padding: 12px 16px;
position: relative; }
.HomefeedBuilderButton .textContainer {
float: left;
width: 150px; }
.HomefeedBuilderButton .textContainer .titleText {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #555;
font-size: 15px;
font-weight: bold;
line-height: 18px; }
.HomefeedBuilderButton .textContainer .subtitleText {
color: #b6b6b6;
font-size: 12px;
line-height: 14px;
padding-top: 2px; }
.HomefeedBuilderButton .builderIcon {
width: 26px;
height: 26px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) 0 -214px no-repeat;
display: inline-block;
float: left;
height: 27px;
margin: 4px 8px 0 0;
width: 27px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.HomefeedBuilderButton .builderIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: 0 -174px;
background-size: 249px 231px; } }
.HomefeedBuilderButton .arrow {
width: 9px;
height: 13px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -268px no-repeat;
float: right;
margin: 0 0 0;
position: absolute;
right: 16px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.HomefeedBuilderButton .arrow {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -389px -14px;
background-size: 399px 382px; } }
.HomefeedBuilderContent {
height: 565px;
padding-top: 237px;
position: relative; }
.HomefeedBuilderContent .topics, .HomefeedBuilderContent .pinners, .HomefeedBuilderContent .boards, .HomefeedBuilderContent .pins {
width: 940px; }
.HomefeedBuilderContent .topics .centeredWithinWrapper, .HomefeedBuilderContent .pinners .centeredWithinWrapper, .HomefeedBuilderContent .boards .centeredWithinWrapper, .HomefeedBuilderContent .pins .centeredWithinWrapper {
width: 940px; }
.HomefeedBuilderContent .pins .centeredWithinWrapper {
width: 780px; }
.HomefeedBuilderContent.fadeOutUp {
-webkit-animation: fadeOutUpAndHide .3s;
animation: fadeOutUpAndHide .3s; }
.HomefeedBuilderContent.notVisible {
opacity: 0; }
.HomefeedBuilderGrid .emptyText {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #b5b5b5;
font-size: 18px;
letter-spacing: -.2px;
line-height: 20px;
margin: 0 auto 44px;
text-align: center; }
.HomefeedBuilderGrid .gridWrapper.fadeInUp {
-webkit-animation: menu-slide-in-up .3s;
animation: menu-slide-in-up .3s; }
.HomefeedBuilderHeader {
background-image: -webkit-linear-gradient(top, #fff, rgba(255, 255, 255, 0.95));
background-image: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.95));
border-radius: 6px;
padding: 40px 0 24px;
position: fixed;
text-align: center;
top: 0;
width: 1004px;
z-index: 10; }
.HomefeedBuilderHeader .titleText {
color: #555;
font-size: 48px;
font-weight: bold;
letter-spacing: -1.8px;
margin-bottom: 4px; }
.HomefeedBuilderHeader .subText {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #b5b5b5;
font-size: 18px;
letter-spacing: -.2px;
line-height: 20px;
margin-bottom: 28px; }
.HomefeedBuilderHeader .homefeedBuilderBackButton {
left: 40px;
position: absolute; }
.HomefeedBuilderNavBar .navigateBar {
text-align: center; }
.HomefeedBuilderNavBar .navigateScope {
background-color: rgba(0, 0, 0, 0.06);
border-radius: 5px;
display: inline-block;
padding: 2px;
text-align: left; }
.HomefeedBuilderNavBar .navScopeBtn {
background: none;
border: 0;
color: #b5b5b5;
display: inline-block;
font-size: 16px;
font-weight: bold;
height: 37px;
margin-right: -4px;
min-width: 115px;
text-align: center;
text-shadow: none;
width: 136px; }
.HomefeedBuilderNavBar .navScopeBtn.selected {
background: #fff;
border-radius: 5px;
box-shadow: none;
color: #141414;
text-shadow: none; }
.HomefeedBuilderNavBar .navScopeBtn:hover {
color: #141414; }
.HomefeedBuilderNavBar .navScopeBtn:active {
background: #e6e6e6;
border-radius: 5px;
box-shadow: none; }
.navigateBar .HomefeedBuilderNavBar .navScopeBtn:active {
background: #000; }
.navigateBar .HomefeedBuilderNavBar .navScopeBtn:active .selected {
background: #efefef;
color: #141414; }
.HomefeedBuilderNavBar:active.selected {
background: #efefef;
color: #141414; }
.HomefeedBuilderNavBar .buttonText {
font-size: 16px; }
.HomefeedBuilderSearchBar {
padding: 0 40px; }
.HomefeedBuilderSearchBar .searchBar {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative; }
.HomefeedBuilderSearchBar .searchBar .searchIcon {
width: 21px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -115px -242px no-repeat;
display: inline-block;
left: 20px;
position: absolute;
top: 12px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.HomefeedBuilderSearchBar .searchBar .searchIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -208px -180px;
background-size: 249px 231px; } }
.HomefeedBuilderSearchBar .searchBar .searchIcon:focus {
visibility: hidden; }
.HomefeedBuilderSearchBar .searchBar .loadingIcon {
display: inline-block;
position: absolute;
right: 24px;
top: 20px; }
.HomefeedBuilderSearchBar .searchBar .search {
background: #eee;
border: 0;
border-radius: 4px;
box-shadow: none;
color: #9b9b9b;
font-size: 16px;
letter-spacing: -.2px;
outline: none;
padding: 12px 0 12px 12px; }
.HomefeedBuilderSearchBar .searchBar .search:focus::-webkit-input-placeholder {
color: transparent; }
.HomefeedBuilderSearchBar .searchBar .search:focus::-moz-placeholder {
color: transparent; }
.HomefeedBuilderSearchBar .searchBar .search:focus:-ms-input-placeholder {
color: transparent; }
.HomefeedBuilderSearchBar .searchBar .search:focus::placeholder {
color: transparent; }
.HomefeedBuilderSearchBar .searchBar .search.searchIconShow {
padding: 12px 0 12px 52px; }
.SeeMoreButton.btn {
background: #efefef;
border: 0;
border-radius: 4px;
color: #555;
font-size: 14px;
font-weight: bold;
height: 33px;
text-shadow: none;
width: 91px; }
.SeeMoreButton.btn:hover, .SeeMoreButton.btn:active {
background: #e3e3e3;
box-shadow: none; }
.SeeMoreButton.hideModule {
display: none; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.Interest {
height: 136px;
position: relative;
width: 136px; }
.Interest.authLandingPageView {
height: 36px;
width: auto; }
.Interest.authLandingPageView .pillWrapper {
border-radius: 4px; }
.Interest.authLandingPageView .labelText {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #fff;
display: inline-block;
font-size: 14px;
font-weight: bold;
padding: 10px 14px; }
.Interest.authLandingPageView span:hover {
background: rgba(0, 0, 0, 0.05); }
.Interest.homefeedSetupView {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
height: 176px; }
.Interest.homefeedSetupView .MockInterestFollowButton.btn {
margin: 4px;
width: 128px; }
.Interest.homefeedSetupView .interestWrapper {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
box-shadow: none;
height: 136px; }
.Interest.homefeedSetupView .interestWrapper .interestImage {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.Interest.homefeedSetupView .mask {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.Interest.homefeedSetupViewNoFollowButton {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
height: 136px; }
.Interest.homefeedSetupViewNoFollowButton .interestWrapper {
box-shadow: none;
height: 136px; }
.Interest.homefeedBuilderView .interestWrapper:active, .Interest.storyView .interestWrapper:active {
-webkit-transform: none;
transform: none; }
.Interest.homefeedBuilderView .interestWrapper .hoverMask, .Interest.storyView .interestWrapper .hoverMask {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
background: transparent;
background: -webkit-linear-gradient(transparent, transparent 50%, rgba(51, 51, 51, 0.5) 95%);
background: linear-gradient(transparent, transparent 50%, rgba(51, 51, 51, 0.5) 95%);
z-index: 100; }
.Interest.homefeedBuilderView .interestWrapper .interestLabel, .Interest.storyView .interestWrapper .interestLabel {
margin-bottom: 15px;
margin-left: 15px;
width: auto;
width: initial; }
.Interest.homefeedBuilderView .interestWrapper .interestLabel h2, .Interest.storyView .interestWrapper .interestLabel h2 {
font-size: 16px;
font-weight: bold;
letter-spacing: -.2px;
line-height: 18px;
padding: 0;
text-shadow: none; }
.Interest.homefeedBuilderView .interestWrapper .interestLabel .followerCount, .Interest.storyView .interestWrapper .interestLabel .followerCount {
color: #fff;
font-size: 12px;
letter-spacing: -.3px;
line-height: 16px; }
.Interest.homefeedBuilderView .interestWrapper .interestLabel .followerCountFollowers, .Interest.storyView .interestWrapper .interestLabel .followerCountFollowers {
font-weight: normal; }
.Interest.homefeedBuilderView {
height: 210px;
margin-bottom: 32px;
padding: 0 8px;
position: relative;
width: 172px; }
.Interest.homefeedBuilderView .followMask {
background-color: rgba(0, 0, 0, 0.7);
border-radius: 4px;
height: 100%;
opacity: 0;
position: absolute;
-webkit-transition: visibility 0s .2s, opacity .2s linear;
transition: visibility 0s .2s, opacity .2s linear;
visibility: hidden;
width: 100%;
z-index: 1; }
.Interest.homefeedBuilderView .followMask .followMaskIcon {
width: 59px;
height: 42px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -215px 0 no-repeat;
display: inline-block;
margin-left: 57px;
margin-top: 65px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Interest.homefeedBuilderView .followMask .followMaskIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -128px -35px;
background-size: 249px 231px; } }
.Interest.homefeedBuilderView .followMask.visible {
opacity: 1;
-webkit-transition: opacity .2s linear;
transition: opacity .2s linear;
visibility: visible; }
.Interest.homefeedBuilderView .interestWrapper {
border-radius: 4px;
height: 172px;
margin-bottom: 8px;
width: 172px; }
.Interest.homefeedBuilderView .interestWrapper:hover .hoverMask {
background: rgba(0, 0, 0, 0.15); }
.Interest.homefeedBuilderView .interestWrapper:active .hoverMask {
background: rgba(0, 0, 0, 0.25); }
.Interest.homefeedBuilderView .interestWrapper:hover > .interestImage {
background: #fff center;
background-size: cover;
opacity: .8; }
.Interest.storyView {
height: auto;
height: initial;
width: 236px; }
.Interest.storyView .interestMaskAndWrapper {
display: block;
padding: 10px;
bottom: 0;
left: 0;
right: 0;
top: 0; }
.Interest.storyView .interestWrapper {
border-radius: 3px;
height: 216px;
width: 216px; }
.Interest.storyView .Button {
margin: 0 10px 10px;
width: 216px; }
.Interest .selectCheck {
width: 21px;
height: 21px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) 0 -242px no-repeat;
position: absolute;
right: 10px;
top: 10px;
z-index: 101; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Interest .selectCheck {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -208px -136px;
background-size: 249px 231px; } }
.Interest .selectCheck.checked {
width: 21px;
height: 21px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -191px -97px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Interest .selectCheck.checked {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -208px -92px;
background-size: 249px 231px; } }
.Interest .wholeInterestMask {
cursor: pointer;
position: absolute;
z-index: 101; }
.Interest .wholeInterestMask .check {
width: 35px;
height: 35px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -37px no-repeat;
background-repeat: no-repeat;
margin: 47px;
position: absolute;
z-index: 102; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Interest .wholeInterestMask .check {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -342px -36px;
background-size: 428px 427px; } }
.Interest .wholeInterestMask .mask {
background-color: #000;
border-radius: 6px;
height: 136px;
opacity: .5;
position: absolute;
top: 0;
width: 136px; }
.Interest .overflowMask {
background-color: #f0f0f1;
border-radius: 6px;
height: 100%;
position: absolute;
width: 100%;
z-index: 103; }
.Interest .overflowMask.briofy {
background-color: #bd081c; }
.Interest .overflowMask .mask {
display: table;
height: 100%;
width: 100%; }
.Interest .overflowMask .text {
color: #a6a8ab;
display: table-cell;
font-size: 18px;
font-weight: bold;
padding: 8px;
text-align: center;
vertical-align: middle; }
.Interest .overflowMask .text.briofy {
color: #fff;
font-size: 24px;
line-height: 29px; }
.Interest .interestWrapper {
overflow: hidden;
border-radius: 6px;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.25);
display: block;
height: 136px;
position: relative;
-webkit-transition: -webkit-transform .1s ease-in-out;
transition: -webkit-transform .1s ease-in-out;
transition: transform .1s ease-in-out;
transition: transform .1s ease-in-out, -webkit-transform .1s ease-in-out;
width: 136px; }
.Interest .interestWrapper:active {
-webkit-transform: scale(0.95);
transform: scale(0.95); }
.Interest .interestWrapper:active > .interestImage {
overflow: hidden;
background-color: #000;
opacity: .5; }
.Interest .interestWrapper .interestImage {
background: #fff center;
background-size: cover;
border-radius: 6px;
display: block;
height: 100%;
opacity: .8;
position: relative;
-webkit-transition: opacity .1s ease-in-out;
transition: opacity .1s ease-in-out;
width: 100%; }
.Interest .interestWrapper .interestLabel {
bottom: 0;
position: absolute;
width: 100%;
z-index: 102; }
.Interest .interestWrapper .interestLabel h2 {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* stylelint-disable-next-line at-rule-no-unknown */
color: #fff;
overflow: hidden;
padding: 8px;
text-overflow: ellipsis;
white-space: normal; }
.Interest .interestWrapper img {
max-width: 100%; }
.Interest.small {
height: 110px;
width: 110px; }
.Interest.small .interestWrapper {
height: 110px;
width: 110px; }
.Interest.microsmall {
height: 100px;
width: 100px; }
.Interest.microsmall .interestWrapper {
height: 100px;
width: 100px; }
.Interest.followingView, .Interest.followingOneClickView, .Interest.followingOneClickHoverView {
height: 236px;
width: 236px; }
.Interest.followingOneClickHoverView .interestFollowButton.btn,
.Interest.followingOneClickHoverView .wideInterestFollowButton.btn {
display: none; }
.Interest.followingOneClickHoverView:hover .interestFollowButton.btn,
.Interest.followingOneClickHoverView:hover .wideInterestFollowButton.btn {
display: inline-block; }
.Interest.followingOneClickView .interestFollowButton.btn, .Interest.followingOneClickHoverView .interestFollowButton.btn {
padding: 8px 0 7px;
width: 70px; }
.Interest.followingOneClickView .interestFollowButton.btn,
.Interest.followingOneClickView .wideInterestFollowButton.btn, .Interest.followingOneClickHoverView .interestFollowButton.btn,
.Interest.followingOneClickHoverView .wideInterestFollowButton.btn {
margin: 10px 10px 0 0;
position: absolute;
right: 0;
top: 0; }
/* desktop.scss */
.Interest .interestWrapper {
box-shadow: none;
cursor: pointer; }
.Interest .interestWrapper:focus > .interestImage, .Interest .interestWrapper:hover > .interestImage {
overflow: hidden;
opacity: 1; }
.Interest.large {
height: 285px;
width: 285px; }
.Interest.interestMenuGridItem {
height: 90px;
width: 90px; }
.Interest.storyView {
background: none;
box-shadow: none;
cursor: pointer;
margin: -10px;
padding: 10px;
width: 236px; }
.Interest.storyView .interestWrapper {
border-radius: 8px;
height: 236px;
width: 236px;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.Interest.storyView .interestMaskAndWrapper {
padding: 0; }
.Interest.storyView .Button {
margin: 0;
width: 236px; }
.InterestCardWrapper {
height: 213px;
margin-bottom: 28px;
margin-left: 8px;
margin-right: 8px;
width: 172px; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.InterestFeedPage {
position: relative; }
.InterestFeedPage .interestName {
color: #333;
color: rgba(21, 21, 21, 0.8);
font-size: 40px;
font-weight: bold;
line-height: 45px;
margin-left: auto;
margin-right: auto;
max-width: 736px;
text-align: center;
word-wrap: break-word;
margin-bottom: 10px;
margin-top: 20px; }
.ja .InterestFeedPage .interestName {
font-size: 29px; }
.InterestFeedPage .feedHeader {
position: relative;
text-align: center;
z-index: 3; }
.InterestFeedPage .feedHeader .feedMainHeader {
position: relative; }
.InterestFeedPage .feedHeader .authLandingPageTitle {
padding: 30px 0; }
.InterestFeedPage .feedHeader .interestName {
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */
color: #555;
margin-top: 0;
padding-top: 25px;
word-wrap: normal; }
.InterestFeedPage .feedHeader .FollowButton {
margin-bottom: 20px; }
.InterestFeedPage .feedHeader .interestStats {
height: 15px;
margin: 0 auto 18px;
text-align: center; }
.InterestFeedPage .feedHeader .interestStats .interestStatsInner {
display: inline-block; }
.InterestFeedPage .feedHeader .interestStats .interestStatsInner .interestStat {
float: left;
line-height: 12px; }
.InterestFeedPage .feedHeader .interestStats .interestStatsInner .interestStatValue {
color: #fff;
float: left;
font-size: 12px;
font-weight: bold;
opacity: .7; }
.InterestFeedPage .feedHeader .interestStats .interestStatsInner .followCount {
margin-right: 15px; }
.InterestFeedPage .feedHeader .RelatedInterestsSection {
margin: 16px 0; }
.InterestFeedPage .feedHeader hr {
border-bottom: 0;
border-left: 0;
border-right: 0;
border-top-color: #fff;
opacity: .2;
width: 240px; }
.InterestFeedPage.showOpenNav {
background-color: #fff; }
.InterestFeedPage.showOpenNav .openNavContainer {
min-height: 100vh; }
.InterestFeedPage.showOpenNav .openNavContent {
background-color: #fff;
margin-left: 246px; }
@media (min-width: 0px) and (max-width: 999px) {
.InterestFeedPage.showOpenNav .openNavContent {
margin-left: 0; } }
.InterestFeedPage.showOpenNav .openNavSubtitle {
color: #555;
font-size: 14px;
padding-left: 8px; }
.InterestFeedPage.showOpenNav .klpTitle {
padding-bottom: 32px;
padding-left: 5px;
padding-top: 32px; }
.InterestFeedPage.showOpenNav .RelatedInterestsSection {
margin-bottom: 24px;
margin-top: 14px; }
/* desktop.scss */
.InterestFeedPage .feedHeader {
box-sizing: border-box;
margin: 0 auto;
max-width: 744px;
min-width: auto;
text-align: left; }
.InterestFeedPage .feedHeader .authLandingPageTitle .interestName {
/* stylelint-disable-next-line at-rule-no-unknown */
margin: 0;
padding: 0;
width: 50%; }
.InterestFeedPage .feedButtonWrapper {
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */
box-sizing: border-box;
height: auto;
margin: 0 auto;
overflow: hidden; }
.InterestFeedPage .feedHeader .FollowButton {
float: right;
margin-bottom: 0; }
.InterestFeedPage .feedHeader .interestNameStats {
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */
box-sizing: border-box; }
.InterestFeedPage .feedHeader .interestName {
color: #555;
margin-left: 0;
margin-right: 0;
max-width: 100%;
padding-top: 0;
text-align: left; }
.InterestFeedPage .feedHeader .interestStats {
color: #555;
font-weight: bold;
height: auto;
margin-bottom: 0;
text-align: left;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.InterestFeedPage .feedHeader .interestStats .interestStatsValue {
font-weight: normal; }
.InterestFeedPage .feedHeader .RelatedInterestsSection {
margin: 0; }
.InterestFeedPage .RelatedInterestsSection > ul {
text-align: left;
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */ }
@media (min-width: 800px) {
.InterestFeedPage .RelatedInterestsSection > ul {
max-width: 645px; } }
.InterestFeedPage .RelatedInterestsSection > ul > li {
margin-left: 0;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.InterestFeedPage .RelatedInterestsSection .title {
display: none; }
.RelatedInterestsSection .title {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #9a9a9a;
font-size: 13px;
margin: 16px 0;
opacity: .6;
text-align: center;
text-transform: uppercase; }
.RelatedInterestsSection.hideTitle {
margin-top: 30px; }
.RelatedInterestsSection.hideTitle .title {
display: none; }
.RelatedInterestsSection.highConverting .List {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height: auto;
width: 732px; }
.RelatedInterestsSection.highConverting .List .interestLabel {
text-align: left; }
.RelatedInterestsSection.highConverting .List .interestImage {
opacity: .75; }
.RelatedInterestsSection > ul {
height: 110px;
margin: auto;
overflow: hidden;
overflow-y: hidden;
text-align: center;
white-space: nowrap; }
.RelatedInterestsSection > ul > li {
display: inline-block;
margin: 0 6px 10px; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.TopicFeedPage {
position: relative; }
.TopicFeedPage .interestName {
color: #333;
color: rgba(21, 21, 21, 0.8);
font-size: 40px;
font-weight: bold;
line-height: 45px;
margin-left: auto;
margin-right: auto;
max-width: 736px;
text-align: center;
word-wrap: break-word;
margin-bottom: 10px;
margin-top: 20px; }
.ja .TopicFeedPage .interestName {
font-size: 29px; }
.TopicFeedPage .feedHeader {
/* height: $interestExtendedHeaderHeight; */
position: relative;
text-align: center;
z-index: 3; }
.TopicFeedPage .feedHeader .feedMainHeader {
position: relative; }
.TopicFeedPage .feedHeader .interestName {
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */
margin: 0 auto 20px;
padding-top: 25px;
word-wrap: normal; }
.TopicFeedPage .feedHeader .FollowButton {
margin-bottom: 20px; }
.TopicFeedPage .feedHeader .interestStats {
height: 15px;
margin: 0 auto 18px;
text-align: center; }
.TopicFeedPage .feedHeader .interestStats .interestStatsInner {
display: inline-block; }
.TopicFeedPage .feedHeader .interestStats .interestStatsInner .interestStat {
float: left;
line-height: 12px; }
.TopicFeedPage .feedHeader .interestStats .interestStatsInner .interestStatValue {
color: #fff;
float: left;
font-size: 12px;
font-weight: bold;
opacity: .7; }
.TopicFeedPage .feedHeader .interestStats .interestStatsInner .followCount {
margin-right: 15px; }
.TopicFeedPage .feedHeader .RelatedInterestsSection {
margin: 16px 0; }
.TopicFeedPage .feedHeader hr {
border-bottom: 0;
border-left: 0;
border-right: 0;
border-top-color: #fff;
opacity: .2;
width: 240px; }
/* desktop.scss */
.TopicFeedPage .feedHeader {
box-sizing: border-box;
margin: 0 auto;
max-width: 744px;
min-width: auto;
text-align: left; }
.TopicFeedPage .feedButtonWrapper {
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */
box-sizing: border-box;
height: auto;
margin: 0 auto;
overflow: hidden; }
.TopicFeedPage .feedHeader .FollowButton {
float: right;
margin-bottom: 0; }
.TopicFeedPage .feedHeader .interestNameStats {
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */
box-sizing: border-box; }
.TopicFeedPage .feedHeader .interestName {
color: #555;
margin-left: 0;
margin-right: 0;
max-width: 100%;
padding-top: 0;
text-align: left; }
.TopicFeedPage .feedHeader .interestStats {
color: #555;
font-weight: bold;
height: auto;
margin-bottom: 0;
text-align: left;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.TopicFeedPage .feedHeader .interestStats .interestStatsValue {
font-weight: normal; }
.TopicFeedPage .feedHeader .RelatedInterestsSection {
margin: 0; }
.TopicFeedPage .RelatedInterestsSection > ul {
text-align: left;
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */ }
@media (min-width: 800px) {
.TopicFeedPage .RelatedInterestsSection > ul {
max-width: 645px; } }
.TopicFeedPage .RelatedInterestsSection > ul > li {
margin-left: 0;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.TopicFeedPage .RelatedInterestsSection .title {
display: none; }
.PinFeedbackConfirmation a, .PinFeedbackConfirmation a:visited {
color: #fff; }
.PinFeedbackDialog {
color: #333;
font-size: 14px;
width: 558px; }
.PinFeedbackDialog .radioOption {
border-bottom: solid 1px #ddd;
cursor: pointer;
padding: 25px; }
.PinFeedbackDialog .radioOption input {
margin-right: 25px; }
.PinFeedbackDialog .radioOption.selected, .PinFeedbackDialog .radioOption:hover {
background-color: #f4f4f4; }
.PinFeedbackDialog .learnPolicies {
float: left;
font-size: 12px;
margin-top: 7px; }
.PinFeedbackDialog .learnPolicies a {
color: #bd081c; }
.RelatedPinInfo {
max-width: 227px; }
.RelatedPinInfo .stopShowing {
overflow: hidden; }
.RelatedPinInfo .action {
padding: 17px 14px; }
.RemovePinDialog {
background-color: #ddd;
border: solid 1px #d1d1d1;
border-radius: 6px;
color: #585858;
font-size: 12px;
padding: 10px;
width: 216px; }
.RemovePinDialog .askForFeedback {
padding: 4px; }
.RemovePinDialog .askForFeedback .openPinFeedback {
cursor: pointer; }
.RemovePinDialog .feedbackGiven {
display: none;
padding: 4px; }
.RemovePinDialog.submitted .askForFeedback {
display: none; }
.RemovePinDialog.submitted .feedbackGiven {
padding: 4px;
display: block; }
.RemovePinDialog .askForFeedback {
margin-top: 2px; }
.RemovePinDialog .feedbackGiven {
margin-top: 9px; }
.RemovePinDialog .acknowledgement {
height: 100%;
line-height: 40px; }
.RelatedBoards {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
background-color: #fff;
width: 236px; }
.RelatedBoards h2 {
border-bottom: 1px solid #dfdfdf;
color: #5f5f5f;
font: 14px;
padding: 10px 15px; }
.RelatedBoards li {
clear: both;
height: 30px;
padding: 5px 15px; }
.RelatedBoards li .thumbImageWrapper,
.RelatedBoards li .itemTitle {
display: inline-block;
float: left; }
.RelatedBoards li .thumbImageWrapper {
position: relative;
height: 30px;
margin-right: 10px;
width: 30px; }
.RelatedBoards li .thumbImageWrapper::after {
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 30px;
left: 0;
position: absolute;
top: 0;
width: 30px; }
.RelatedBoards li .thumbImageWrapper img {
border-radius: 3px;
height: 30px;
width: 30px; }
.RelatedBoards li .thumbImageWrapper img {
vertical-align: top; }
.RelatedBoards li .itemTitle {
margin-top: 7px;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 166px; }
.RelatedBoards li:first-child {
padding-top: 15px; }
.RelatedBoards li:last-child {
padding-bottom: 15px; }
.ContextualSearch {
height: 216px;
position: relative;
width: 216px; }
.ContextualSearch .searchImage {
height: 100%;
width: 100%;
background-color: #98958c;
background-size: cover;
border-radius: 4px;
position: relative; }
.ContextualSearch .searchImage::after {
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.2);
border-radius: 4px;
content: "\A";
position: absolute; }
.ContextualSearch .searchImage:hover::after {
background: rgba(0, 0, 0, 0.3); }
.ContextualSearch .searchLabel {
bottom: 0;
margin: 18px;
position: absolute;
z-index: 102; }
.ContextualSearch .searchLabel h2 {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #fff;
font-size: 20px;
letter-spacing: -.2px;
line-height: 1.1;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
white-space: normal; }
.ContextualSearch.exploreTabView {
margin: 0 17px 34px; }
.SearchGuidesBar {
position: relative;
z-index: 101; }
.SearchGuidesBar .guidesWrapper {
height: 85px;
overflow: hidden; }
.SearchGuidesBar .guidesWrapper .guidesSlider {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 120px;
overflow-x: scroll;
overflow-y: hidden; }
.SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer {
height: 85px;
overflow: hidden;
padding: 0 7px;
position: relative; }
.SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer li {
float: left;
margin: 15px 0;
width: 125px; }
.SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer {
cursor: pointer;
min-width: 111px; }
.SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideImgMask {
border-radius: 6px;
box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.33);
height: 55px;
position: absolute;
width: 111px; }
.SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideImgMask:hover {
background-color: rgba(255, 255, 255, 0.08); }
.SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideImg {
border-radius: 6px;
height: 55px;
min-width: 111px; }
.SearchGuidesBar .guidesWrapper .guidesSlider .guidesContainer .guideContainer .guideText {
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */
box-sizing: border-box;
color: #fff;
display: inline-block;
font-weight: bold;
margin-left: -112px;
max-width: 100%;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
width: 107px; }
.SearchGuidesBar .guidesWrapper .navigator {
display: none;
height: 85px;
position: absolute;
top: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
width: 210px; }
.SearchGuidesBar .guidesWrapper .navigator.left {
background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0) 0%, #fff 90%);
background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 90%);
left: 0; }
.SearchGuidesBar .guidesWrapper .navigator.left em {
width: 35px;
height: 85px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -339px 0 no-repeat;
cursor: pointer;
display: inline-block;
opacity: .5; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SearchGuidesBar .guidesWrapper .navigator.left em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -334px 0;
background-size: 399px 382px; } }
.SearchGuidesBar .guidesWrapper .navigator.left em:hover {
opacity: 1; }
.SearchGuidesBar .guidesWrapper .navigator.right {
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #fff 90%);
background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 90%);
right: 0;
text-align: right; }
.SearchGuidesBar .guidesWrapper .navigator.right em {
width: 35px;
height: 85px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -302px 0 no-repeat;
cursor: pointer;
display: inline-block;
opacity: .5; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SearchGuidesBar .guidesWrapper .navigator.right em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -298px 0;
background-size: 399px 382px; } }
.SearchGuidesBar .guidesWrapper .navigator.right em:hover {
opacity: 1; }
.SearchGuidesBar.tutorialHighlight {
height: 85px !important; }
.SearchInputToken {
float: none;
height: auto; }
.SearchInputToken.tokenSelected .tokenContainer {
background-color: #cb2027 !important; }
.SearchInputToken .tokenContainer {
border-radius: 6px;
color: #fff;
cursor: pointer;
float: left;
font-size: 13px;
font-weight: 600;
height: 26px;
letter-spacing: -.01em;
margin: 0; }
.SearchInputToken .tokenContainer span {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-radius: 6px 0 0 6px;
box-sizing: border-box;
float: left;
height: 26px;
padding: 4px 8px 6px; }
.SearchInputToken .tokenContainer span:hover {
background-color: rgba(0, 0, 0, 0.06); }
.SearchInputToken .tokenContainer span.remove {
border-left: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 0 6px 6px 0;
float: left;
padding: 9px 6px 6px 5px; }
.SearchInputToken .tokenContainer span.remove em {
width: 8px;
height: 8px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -363px -246px no-repeat;
display: block; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SearchInputToken .tokenContainer span.remove em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -389px -83px;
background-size: 399px 382px; } }
.SearchInputToken.tutorialHighlight {
height: 32px !important; }
.SearchPage {
/* For the carousel transition */
/* For the transition between the texts */ }
.SearchPage .debugMacro {
margin: 10px;
padding: 5px; }
.SearchPage .oneBoxContainer {
margin-left: auto;
margin-right: auto;
position: relative; }
.SearchPage .placeBoardSearch {
color: #333;
font-size: 13px;
margin-bottom: -7px;
margin-top: 14px;
padding-left: 14px; }
.SearchPage .placeBoardSearch a {
color: #333; }
.SearchPage .customizationCarousel {
height: 240px;
margin-bottom: 10px;
overflow: hidden;
-webkit-transition: height .7s, margin-bottom .7s;
transition: height .7s, margin-bottom .7s;
-webkit-transition-delay: .3s;
transition-delay: .3s; }
.SearchPage .customizationCarouselCollapsed {
height: 0;
margin-bottom: 0;
overflow: hidden; }
.SearchPage .customizationText {
height: 40px;
margin-left: 6px;
margin-top: 14.5px;
position: relative;
width: 1000px; }
.SearchPage .customizationInstructions {
margin-top: 4px; }
.SearchPage .customizationWelcome, .SearchPage .customizationInstructions {
opacity: 1;
position: absolute;
-webkit-transition: all .3s;
transition: all .3s;
-webkit-transition-delay: .3s;
transition-delay: .3s; }
.SearchPage .customizationTransparent {
opacity: 0;
-webkit-transition-delay: 0s;
transition-delay: 0s; }
.SearchPageContent .searchTerm {
font-weight: bold; }
.SearchPageContent .boardSearchTypeSelector {
margin-top: 14px;
text-align: center; }
.SearchPageContent .boardSearchTypeSelector .searchTypeSelectorItem {
border: 1px solid #ccc;
display: inline-block;
padding: 7px 14px; }
.SearchPageContent .boardSearchTypeSelector .searchTypeSelectorItem.allBoards {
border-radius: 6px 0 0 6px; }
.SearchPageContent .boardSearchTypeSelector .searchTypeSelectorItem.placeBoards {
border-radius: 0 6px 6px 0;
margin-left: -4px; }
.SearchPageContent .boardSearchTypeSelector .searchTypeSelectorItem:hover {
background: #fff; }
.SearchPageContent .boardSearchTypeSelector .searchTypeSelectorItem:active, .SearchPageContent .boardSearchTypeSelector .searchTypeSelectorItem.active {
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3) inset; }
.SearchPageContent .emptyQuery,
.SearchPageContent .noResults {
font-size: 18px;
font-weight: normal;
margin: 54px auto;
text-align: center;
width: 50%; }
.SearchPageContent .blankRow {
height: 334px; }
.SearchPageContent .blankRow .placeholder {
background: #efefef; }
.SearchPageContent .blankRow .placeholder.big {
height: 308px; }
.SearchPageContent .blankRow .placeholder.small {
height: 263px; }
.SearchPageContent .autocorrectContainer {
box-sizing: border-box;
font-size: 18px;
padding-left: 7px;
padding-top: 7px; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.openHome .TokenizedInput.guided.openHome {
margin-left: 48px; }
.TokenizedInput.guided.openHome .tokensWrapper .tokenizedItem.inputToken {
height: 52px; }
.TokenizedInput.guided.openHome .tokensWrapper .tokenizedItem.inputToken .field {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: HelveticaNeue-Bold, 'Helvetica', arial;
color: #b5b5b5;
font-size: 24px;
letter-spacing: -1px;
line-height: 1.2;
margin: 10px 0; }
.TokenizedInput.guided.openHome .tokensWrapper .tokenizedItem.inputToken .field:focus {
color: #555; }
.TokenizedInput.guided {
margin-left: 3px;
margin-right: 30px;
overflow: hidden; }
.TokenizedInput.guided .tokensWrapper {
left: 0;
overflow: visible;
position: relative;
-webkit-transition-duration: .25s;
transition-duration: .25s;
-webkit-transition-property: left;
transition-property: left; }
.TokenizedInput.guided .tokensWrapper .tokenizedItem {
height: 32px;
margin: 0;
padding-left: 8px;
vertical-align: middle; }
.TokenizedInput.guided .tokensWrapper .tokenizedItem.inputToken {
width: 100%; }
.TokenizedInput.guided .tokensWrapper .tokenizedItem.inputToken .field {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #a7a7a7;
font-size: 16px;
font-weight: 600;
height: 32px;
line-height: 20px;
padding: 6px 0 6px 4px; }
.TokenizedInput.guided .tokensWrapper .tokenizedItem.inputToken .field:focus {
color: #333; }
.TokenizedInput.guided.typeaheadWithTitles {
margin-left: 12px; }
.TokenizedInput.guided .removeAll {
border-radius: 0 6px 6px 0;
cursor: pointer;
display: inline-block;
margin-top: -6px;
position: absolute;
right: 10px;
top: 50%;
-webkit-transition: display 1s linear;
transition: display 1s linear; }
.TokenizedInput.guided .removeAll.hidden {
display: none; }
.TokenizedInput.guided .removeAll em {
width: 12px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -149px no-repeat;
float: left; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.TokenizedInput.guided .removeAll em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -357px -240px;
background-size: 399px 382px; } }
.TokenizedInput.guided .removeAll:hover em {
width: 12px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -79px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.TokenizedInput.guided .removeAll:hover em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -163px -109px;
background-size: 399px 382px; } }
.TokenizedInput.guided .removeAll:active em, .TokenizedInput.guided .removeAll.active em {
width: 12px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -93px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.TokenizedInput.guided .removeAll:active em, .TokenizedInput.guided .removeAll.active em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -321px -258px;
background-size: 399px 382px; } }
.TokenizedInput.drawerNav {
margin-left: 3px;
margin-right: 30px;
overflow: hidden;
width: 100%; }
.TokenizedInput.drawerNav .tokensWrapper {
left: 0;
overflow: visible;
position: relative;
-webkit-transition-duration: .25s;
transition-duration: .25s;
-webkit-transition-property: left;
transition-property: left; }
.TokenizedInput.drawerNav .tokensWrapper .tokenizedItem {
height: 32px;
vertical-align: middle; }
.TokenizedInput.drawerNav .tokensWrapper .tokenizedItem.inputToken {
width: 100%; }
.TokenizedInput.drawerNav .tokensWrapper .tokenizedItem.inputToken .field {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #a7a7a7;
font-size: 16px;
font-weight: 600;
height: 32px;
line-height: 20px;
padding: 6px 0 6px 4px; }
.TokenizedInput.drawerNav .tokensWrapper .tokenizedItem.inputToken .field:focus {
color: #333; }
.TokenizedInput.drawerNav.typeaheadWithTitles {
margin-left: 12px; }
.TokenizedInput.drawerNav .removeAll {
border-radius: 0 6px 6px 0;
cursor: pointer;
display: none;
padding: 10px;
position: absolute;
right: 0;
top: 0;
-webkit-transition: display 1s linear;
transition: display 1s linear; }
.TokenizedInput.drawerNav .removeAll em {
width: 12px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -149px no-repeat;
float: left; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.TokenizedInput.drawerNav .removeAll em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -357px -240px;
background-size: 399px 382px; } }
.TokenizedInput.drawerNav .removeAll:hover em {
width: 12px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -79px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.TokenizedInput.drawerNav .removeAll:hover em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -163px -109px;
background-size: 399px 382px; } }
.TokenizedInput.drawerNav .removeAll:active em, .TokenizedInput.drawerNav .removeAll.active em {
width: 12px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -93px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.TokenizedInput.drawerNav .removeAll:active em, .TokenizedInput.drawerNav .removeAll.active em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -321px -258px;
background-size: 399px 382px; } }
.TokenizedInput .tokensWrapper {
-webkit-overflow-scrolling: touch;
overflow-x: auto;
overflow-y: hidden;
cursor: text;
float: left;
min-height: 1px;
white-space: nowrap;
width: 100%; }
.InternalModuleCatalog .TokenizedInput .tokensWrapper {
border: 1px solid #ff0; }
.InternalModuleCatalog .TokenizedInput .tokensWrapper input {
background: #0f0;
border: 1px solid #f00; }
.InternalModuleCatalog .TokenizedInput .tokensWrapper input.tokenSelected {
background: none;
border-color: #333; }
.TokenizedInput .tokensWrapper input {
background: transparent;
border: 0;
box-shadow: none;
font-size: 14px; }
.TokenizedInput .tokensWrapper input:focus {
outline: none; }
.TokenizedInput.userCircleSelect {
width: 100%; }
.TokenizedInput.userCircleSelect .tokenizedItem.inputToken {
width: 100%; }
.TokenizedInput .tokenizedItem {
overflow: hidden;
color: #000;
display: inline-block;
height: auto;
margin: 3px;
white-space: nowrap; }
.TokenizedInput .scrollWrapper {
overflow: hidden; }
/* desktop.scss */
.TokenizedInput.guided {
width: 100%; }
.TokenizedInput.guided.typeaheadWithTitles {
margin-left: 0; }
.TokenizedInput.drawerNav .tokensWrapper .tokenizedItem {
height: auto;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.TokenizedInput.guided .tokensWrapper .tokenizedItem.inputToken .field {
height: auto;
line-height: auto;
padding: 0; }
.TokenizedInput.guided .tokensWrapper {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%; }
.TokenizedInput.guided .tokensWrapper .tokenizedItem {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
height: auto;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.TokenizedInput.guided .tokensWrapper .tokenizedItem.inputToken {
/* Fix for Chrome 44 bug: https://code.google.com/p/chromium/issues/detail?id=506893 */
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-height: 0;
/* 1 */
min-width: 0;
/* 1 */
width: auto; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.ExploreStory {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
background-color: transparent;
box-shadow: none;
display: inline-block;
width: 236px; }
/* desktop.scss */
.ExploreStory .storyWrapper {
cursor: zoom-in;
margin: -10px;
padding: 10px;
position: relative; }
.ExploreStory .storyWrapper::before {
background: rgba(0, 0, 0, 0.05);
border-radius: 8px;
content: " ";
height: 100%;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
-webkit-transform: scale(0.96);
transform: scale(0.96);
width: 100%;
z-index: 3; }
.ExploreStory .storyWrapper:not(.storyWrapperDisableHover):hover::before {
-webkit-animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards;
animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; }
.ExploreStory .storyWrapper .creditItem:hover {
background: inherit; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.ExploreStoryCredits {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background: #fff;
border-radius: 6px; }
.ExploreStoryCredits .creditItem {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
border-radius: 0 0 6px 6px;
display: block;
line-height: 14px;
padding: 5px 14px;
z-index: 3; }
.ExploreStoryCredits .creditItem .creditImg {
position: relative;
border-radius: 2px;
float: left;
height: 30px;
margin-right: 5px;
width: 30px; }
.ExploreStoryCredits .creditItem .creditImg::after {
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 30px;
left: 0;
position: absolute;
top: 0;
width: 30px; }
.ExploreStoryCredits .creditItem .creditImg img {
border-radius: 3px;
height: 30px;
width: 30px; }
.ExploreStoryCredits .creditItem .creditImg.user {
position: relative;
border-radius: 50%; }
.ExploreStoryCredits .creditItem .creditImg.user::after {
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 30px;
left: 0;
position: absolute;
top: 0;
width: 30px; }
.ExploreStoryCredits .creditItem .creditImg.user img {
border-radius: 50%;
height: 30px;
width: 30px; }
.ExploreStoryCredits .creditItem .creditName {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #999;
display: block; }
.ExploreStoryCredits .creditItem .creditName h3 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 11px; }
.ExploreStoryCredits .creditItem .creditTitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #717171; }
.ExploreStoryCredits .creditItem:active .creditTitle {
color: #717171; }
.ExploreStoryCredits .creditItem:active .creditName {
color: #999; }
.ExploreStoryCredits .creditItem .span {
vertical-align: middle; }
.ExploreStoryCredits .pinCredits {
font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", sans-serif;
font-weight: bold;
border-top: 1px solid #e7e7e7;
color: #777; }
.ExploreStoryCredits .pinCredits.userBoardCondensed .creditName {
margin-top: 2px; }
.ExploreStoryCredits .pinCredits button {
z-index: 3; }
.ExploreStoryCredits .creditItem {
line-height: 15px;
padding: 10px;
position: relative; }
.ExploreStoryCredits .creditItem .creditTitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow: hidden;
color: #555;
display: block;
font-weight: normal; }
.ExploreStoryCredits .creditItem .creditName {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #555;
font-weight: bold; }
.ExploreStoryCredits .storyCreditWrapper {
border-radius: 0 0 6px 6px;
border-top: 1px solid #e7e7e7;
position: relative; }
.ExploreStoryCredits .storyCreditWrapper .creditTitle, .ExploreStoryCredits .storyCreditWrapper .creditName {
width: 151px; }
.ExploreStoryCredits .storyCreditWrapper:hover {
background-color: #f1f1f1; }
.ExploreStoryCredits .creditFooter {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-top: 1px solid #e7e7e7;
color: #555;
font-size: 11px;
font-weight: bold;
overflow: hidden;
padding: 9px 12px;
text-overflow: ellipsis;
white-space: nowrap; }
.ExploreStoryCredits .storyCredits {
font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", sans-serif;
font-weight: bold;
color: #777;
font-size: 11px; }
/* desktop.scss */
.ExploreStoryCredits .storyCredits {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse; }
.ExploreStoryCredits .storyCredits > .storyCreditWrapper {
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-top: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative; }
.ExploreStoryCredits .storyCredits > .storyCreditWrapper::before {
background: rgba(0, 0, 0, 0.05);
border-radius: 4px;
content: " ";
height: calc(100% + 10px);
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: -5px;
-webkit-transform: scale(0.96);
transform: scale(0.96);
width: 100%;
z-index: 3; }
.ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem {
/* Fix for Chrome 44 bug: https://code.google.com/p/chromium/issues/detail?id=506893 */
border-radius: 4px;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
max-width: 100%;
min-height: 0;
/* 1 */
min-width: 0;
/* 1 */
overflow: hidden;
padding: 0;
text-overflow: ellipsis;
white-space: nowrap;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem:hover {
color: #555; }
.ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem > a {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem .creditName,
.ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem .creditTitle {
color: #555;
width: 125px; }
.ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem .creditName {
font-weight: bold; }
.ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem .creditTitle {
font-weight: normal; }
.ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem .creditImg.user::after {
display: none; }
.ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem .creditImg,
.ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem .creditImg img {
height: 36px;
width: 36px; }
.ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem .creditImg {
background-color: #efefef;
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
margin-right: 8px; }
.ExploreStoryCredits .storyCredits > .storyCreditWrapper .creditItem .creditImg::after {
display: none; }
.ExploreStoryCredits .storyCredits > .storyCreditWrapper:hover {
background: transparent; }
.ExploreStoryCredits .storyCredits > .storyCreditWrapper:hover::before {
-webkit-animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards;
animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; }
.ExploreStoryCredits .storyCredits > .creditItem {
border-radius: 4px;
max-width: 100%;
overflow: hidden;
padding-bottom: 0;
padding-top: 0;
text-overflow: ellipsis;
white-space: nowrap;
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */ }
.ExploreStoryCredits .storyCredits > .creditItem:hover {
background-color: #efefef; }
.ExploreStoryCredits .storyCredits > .creditItem > a {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.ExploreStoryCredits .storyCredits > .creditItem .creditName,
.ExploreStoryCredits .storyCredits > .creditItem .creditTitle {
color: #b5b5b5;
max-width: 160px; }
.ExploreStoryCredits .storyCredits > .creditItem .creditName {
font-weight: normal; }
.ExploreStoryCredits .storyCredits > .creditItem .creditTitle {
font-weight: bold; }
.ExploreStoryCredits .storyCredits .creditFooter {
border-top: none;
padding: 10px 0 0;
/* stylelint-disable-next-line at-rule-no-unknown */ }
/* stylelint-disable-next-line at-rule-no-unknown */
.Snackbox {
background-color: #fff;
cursor: pointer;
padding-bottom: 12px;
position: absolute;
visibility: hidden;
width: 236px; }
.Snackbox.insertedSnackbox {
position: static;
visibility: visible; }
.Snackbox.insertedSnackbox.animated .item.normal:nth-child(2) {
-webkit-animation: pinSlideIn .2s forwards ease-out;
animation: pinSlideIn .2s forwards ease-out;
-webkit-animation-delay: .25s;
animation-delay: .25s;
opacity: 0; }
.Snackbox.insertedSnackbox.animated .item.normal:nth-child(3) {
-webkit-animation: pinSlideIn .2s forwards ease-out;
animation: pinSlideIn .2s forwards ease-out;
-webkit-animation-delay: .18s;
animation-delay: .18s;
opacity: 0; }
.Snackbox.insertedSnackbox.animated .item.normal:nth-child(4) {
-webkit-animation: pinSlideIn .2s forwards ease-out;
animation: pinSlideIn .2s forwards ease-out;
-webkit-animation-delay: .32s;
animation-delay: .32s;
opacity: 0; }
.Snackbox.insertedSnackbox.animated .item.normal:nth-child(5) {
-webkit-animation: pinSlideIn .2s forwards ease-out;
animation: pinSlideIn .2s forwards ease-out;
-webkit-animation-delay: .36s;
animation-delay: .36s;
opacity: 0; }
.Snackbox.insertedSnackbox.animated .item.small:nth-child(2), .Snackbox.insertedSnackbox.animated .item.large:nth-child(2) {
-webkit-animation: pinSlideIn .2s forwards ease-out;
animation: pinSlideIn .2s forwards ease-out;
-webkit-animation-delay: .18s;
animation-delay: .18s;
opacity: 0; }
.Snackbox.insertedSnackbox.animated .item.small:nth-child(3), .Snackbox.insertedSnackbox.animated .item.large:nth-child(3) {
-webkit-animation: pinSlideIn .2s forwards ease-out;
animation: pinSlideIn .2s forwards ease-out;
-webkit-animation-delay: .25s;
animation-delay: .25s;
opacity: 0; }
.Snackbox.insertedSnackbox.animated .item.small:nth-child(4), .Snackbox.insertedSnackbox.animated .item.large:nth-child(4) {
-webkit-animation: pinSlideIn .2s forwards ease-out;
animation: pinSlideIn .2s forwards ease-out;
-webkit-animation-delay: .32s;
animation-delay: .32s;
opacity: 0; }
.Snackbox .snackboxTitle {
color: #b5b5b5;
font-size: 13px;
height: 14px;
letter-spacing: -.4px;
padding-bottom: 8px; }
.Snackbox .snackboxImagesWrapper {
-ms-flex-line-pack: start;
align-content: flex-start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
margin: 0 auto;
width: 236px; }
.Snackbox .item {
background-position: center;
background-size: cover;
border-radius: 8px;
box-sizing: border-box;
display: inline-block;
margin: 2px;
overflow: hidden;
width: 114px; }
.Snackbox .item.large:nth-child(1) {
background-size: 100% 100%; }
.Snackbox.itemsHidden .item:nth-child(1) {
visibility: hidden; }
.Snackbox.itemsHidden .item:nth-child(2) {
visibility: hidden; }
.Snackbox.itemsHidden .item:nth-child(3) {
visibility: hidden; }
.Snackbox.itemsHidden .item:nth-child(4) {
visibility: hidden; }
.Snackbox.itemsHidden .item:nth-child(5) {
visibility: hidden; }
.Snackbox.showSnackbox {
position: static;
position: initial;
visibility: visible; }
.Snackbox.showSnackbox .item.normal:nth-child(1) {
visibility: visible; }
.Snackbox.showSnackbox .item.normal:nth-child(2) {
-webkit-animation: u1409122d 0.25s forwards;
animation: u1409122d 0.25s forwards;
-webkit-animation-timing-function: ease;
animation-timing-function: ease; }
@-webkit-keyframes u1409122d {
0% {
opacity: 0;
-webkit-transform: translate(-10px, 10px);
transform: translate(-10px, 10px);
visibility: visible; }
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
visibility: visible; } }
@keyframes u1409122d {
0% {
opacity: 0;
-webkit-transform: translate(-10px, 10px);
transform: translate(-10px, 10px);
visibility: visible; }
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
visibility: visible; } }
.Snackbox.showSnackbox .item.normal:nth-child(3) {
-webkit-animation: u4b306172 0.25s forwards;
animation: u4b306172 0.25s forwards;
-webkit-animation-timing-function: ease;
animation-timing-function: ease; }
@-webkit-keyframes u4b306172 {
0% {
opacity: 0;
-webkit-transform: translate(10px, -10px);
transform: translate(10px, -10px);
visibility: visible; }
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
visibility: visible; } }
@keyframes u4b306172 {
0% {
opacity: 0;
-webkit-transform: translate(10px, -10px);
transform: translate(10px, -10px);
visibility: visible; }
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
visibility: visible; } }
.Snackbox.showSnackbox .item.normal:nth-child(4) {
-webkit-animation: ufee7f1dc 0.25s forwards;
animation: ufee7f1dc 0.25s forwards;
-webkit-animation-timing-function: ease;
animation-timing-function: ease; }
@-webkit-keyframes ufee7f1dc {
0% {
opacity: 0;
-webkit-transform: translate(10px, 0);
transform: translate(10px, 0);
visibility: visible; }
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
visibility: visible; } }
@keyframes ufee7f1dc {
0% {
opacity: 0;
-webkit-transform: translate(10px, 0);
transform: translate(10px, 0);
visibility: visible; }
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
visibility: visible; } }
.Snackbox.showSnackbox .item.normal:nth-child(5) {
-webkit-animation: uf1cad8a5 0.25s forwards;
animation: uf1cad8a5 0.25s forwards;
-webkit-animation-timing-function: ease;
animation-timing-function: ease; }
@-webkit-keyframes uf1cad8a5 {
0% {
opacity: 0;
-webkit-transform: translate(10px, 10px);
transform: translate(10px, 10px);
visibility: visible; }
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
visibility: visible; } }
@keyframes uf1cad8a5 {
0% {
opacity: 0;
-webkit-transform: translate(10px, 10px);
transform: translate(10px, 10px);
visibility: visible; }
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
visibility: visible; } }
.Snackbox.showSnackbox .item.large:nth-child(1) {
visibility: visible; }
.Snackbox.showSnackbox .item.large:nth-child(2) {
-webkit-animation: ub63f37cd 0.25s forwards;
animation: ub63f37cd 0.25s forwards;
-webkit-animation-timing-function: ease;
animation-timing-function: ease; }
@-webkit-keyframes ub63f37cd {
0% {
opacity: 0;
-webkit-transform: translate(10px, -10px);
transform: translate(10px, -10px);
visibility: visible; }
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
visibility: visible; } }
@keyframes ub63f37cd {
0% {
opacity: 0;
-webkit-transform: translate(10px, -10px);
transform: translate(10px, -10px);
visibility: visible; }
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
visibility: visible; } }
.Snackbox.showSnackbox .item.large:nth-child(3) {
-webkit-animation: u5eb7ae19 0.25s forwards;
animation: u5eb7ae19 0.25s forwards;
-webkit-animation-timing-function: ease;
animation-timing-function: ease; }
@-webkit-keyframes u5eb7ae19 {
0% {
opacity: 0;
-webkit-transform: translate(10px, 0);
transform: translate(10px, 0);
visibility: visible; }
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
visibility: visible; } }
@keyframes u5eb7ae19 {
0% {
opacity: 0;
-webkit-transform: translate(10px, 0);
transform: translate(10px, 0);
visibility: visible; }
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
visibility: visible; } }
.Snackbox.showSnackbox .item.large:nth-child(4) {
-webkit-animation: uf3e7f3ab 0.25s forwards;
animation: uf3e7f3ab 0.25s forwards;
-webkit-animation-timing-function: ease;
animation-timing-function: ease; }
@-webkit-keyframes uf3e7f3ab {
0% {
opacity: 0;
-webkit-transform: translate(10px, 10px);
transform: translate(10px, 10px);
visibility: visible; }
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
visibility: visible; } }
@keyframes uf3e7f3ab {
0% {
opacity: 0;
-webkit-transform: translate(10px, 10px);
transform: translate(10px, 10px);
visibility: visible; }
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
visibility: visible; } }
.Snackbox.showSnackbox .item.small:nth-child(1) {
visibility: visible; }
.Snackbox.showSnackbox .item.small:nth-child(2) {
-webkit-animation: ub83a8bce 0.25s forwards;
animation: ub83a8bce 0.25s forwards;
-webkit-animation-timing-function: ease;
animation-timing-function: ease; }
@-webkit-keyframes ub83a8bce {
0% {
opacity: 0;
-webkit-transform: translate(-10px, 10px);
transform: translate(-10px, 10px);
visibility: visible; }
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
visibility: visible; } }
@keyframes ub83a8bce {
0% {
opacity: 0;
-webkit-transform: translate(-10px, 10px);
transform: translate(-10px, 10px);
visibility: visible; }
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
visibility: visible; } }
.Snackbox.showSnackbox .item.small:nth-child(3) {
-webkit-animation: u0a7e1702 0.25s forwards;
animation: u0a7e1702 0.25s forwards;
-webkit-animation-timing-function: ease;
animation-timing-function: ease; }
@-webkit-keyframes u0a7e1702 {
0% {
opacity: 0;
-webkit-transform: translate(10px, -10px);
transform: translate(10px, -10px);
visibility: visible; }
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
visibility: visible; } }
@keyframes u0a7e1702 {
0% {
opacity: 0;
-webkit-transform: translate(10px, -10px);
transform: translate(10px, -10px);
visibility: visible; }
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
visibility: visible; } }
.Snackbox.showSnackbox .item.small:nth-child(4) {
-webkit-animation: u2cf0e41c 0.25s forwards;
animation: u2cf0e41c 0.25s forwards;
-webkit-animation-timing-function: ease;
animation-timing-function: ease; }
@-webkit-keyframes u2cf0e41c {
0% {
opacity: 0;
-webkit-transform: translate(10px, 10px);
transform: translate(10px, 10px);
visibility: visible; }
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
visibility: visible; } }
@keyframes u2cf0e41c {
0% {
opacity: 0;
-webkit-transform: translate(10px, 10px);
transform: translate(10px, 10px);
visibility: visible; }
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
visibility: visible; } }
.Snackbox.showFirstPin {
position: static;
position: initial;
visibility: visible; }
.Snackbox.showFirstPin .item:nth-child(1) {
visibility: visible; }
/* stylelint-disable-next-line at-rule-no-unknown */
.SnackboxResults {
background-color: #fff;
padding-left: 24px;
position: relative; }
.SnackboxResults .snackboxTitle {
width: 2198px;
/* stylelint-disable-next-line at-rule-no-unknown */
background-color: #fff;
color: #555;
font-size: 28px;
font-weight: bold;
left: 0;
letter-spacing: -.8px;
margin: 0 auto;
padding: 54px 16px 32px;
position: absolute;
right: 0;
z-index: 670; }
@media (min-width: 250px) and (max-width: 499px) {
.SnackboxResults .snackboxTitle {
width: 216px; } }
@media (min-width: 500px) and (max-width: 749px) {
.SnackboxResults .snackboxTitle {
width: 476px; } }
@media (min-width: 0) and (max-width: 999px) {
.SnackboxResults .snackboxTitle {
width: 736px; } }
@media (min-width: 1000px) and (max-width: 1249px) {
.SnackboxResults .snackboxTitle {
width: 996px; } }
@media (min-width: 1250px) and (max-width: 1499px) {
.SnackboxResults .snackboxTitle {
width: 1256px; } }
@media (min-width: 1500px) and (max-width: 1749px) {
.SnackboxResults .snackboxTitle {
width: 1516px; } }
@media (min-width: 1750px) and (max-width: 1999px) {
.SnackboxResults .snackboxTitle {
width: 1776px; } }
@media (min-width: 2000px) and (max-width: 2249px) {
.SnackboxResults .snackboxTitle {
width: 2036px; } }
@media (min-width: 2250px) and (max-width: 2499px) {
.SnackboxResults .snackboxTitle {
width: 2296px; } }
@media (min-width: 2500px) and (max-width: 2749px) {
.SnackboxResults .snackboxTitle {
width: 2556px; } }
@media (min-width: 2750px) and (max-width: 2999px) {
.SnackboxResults .snackboxTitle {
width: 2816px; } }
.SnackboxResults .contentContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-top: 90px; }
.SnackboxResults .contentContainer .snackboxImage {
height: calc(100vh - 138px);
margin-top: 40px;
padding-right: 10px;
width: 236px; }
.SnackboxResults .contentContainer .snackboxResults {
width: 2000px;
/* stylelint-disable-next-line at-rule-no-unknown */
height: calc(100vh - 108px);
padding-top: 10px; }
@media (min-width: 250px) and (max-width: 499px) {
.SnackboxResults .contentContainer .snackboxResults {
width: 20px; } }
@media (min-width: 500px) and (max-width: 749px) {
.SnackboxResults .contentContainer .snackboxResults {
width: 280px; } }
@media (min-width: 0) and (max-width: 999px) {
.SnackboxResults .contentContainer .snackboxResults {
width: 540px; } }
@media (min-width: 1000px) and (max-width: 1249px) {
.SnackboxResults .contentContainer .snackboxResults {
width: 800px; } }
@media (min-width: 1250px) and (max-width: 1499px) {
.SnackboxResults .contentContainer .snackboxResults {
width: 1060px; } }
@media (min-width: 1500px) and (max-width: 1749px) {
.SnackboxResults .contentContainer .snackboxResults {
width: 1320px; } }
@media (min-width: 1750px) and (max-width: 1999px) {
.SnackboxResults .contentContainer .snackboxResults {
width: 1580px; } }
@media (min-width: 2000px) and (max-width: 2249px) {
.SnackboxResults .contentContainer .snackboxResults {
width: 1840px; } }
@media (min-width: 2250px) and (max-width: 2499px) {
.SnackboxResults .contentContainer .snackboxResults {
width: 2100px; } }
@media (min-width: 2500px) and (max-width: 2749px) {
.SnackboxResults .contentContainer .snackboxResults {
width: 2360px; } }
@media (min-width: 2750px) and (max-width: 2999px) {
.SnackboxResults .contentContainer .snackboxResults {
width: 2620px; } }
.SnackboxResults .contentContainer .snackboxResults .centeredWithinWrapper {
width: 2000px;
/* stylelint-disable-next-line at-rule-no-unknown */ }
@media (min-width: 250px) and (max-width: 499px) {
.SnackboxResults .contentContainer .snackboxResults .centeredWithinWrapper {
width: 20px; } }
@media (min-width: 500px) and (max-width: 749px) {
.SnackboxResults .contentContainer .snackboxResults .centeredWithinWrapper {
width: 280px; } }
@media (min-width: 0) and (max-width: 999px) {
.SnackboxResults .contentContainer .snackboxResults .centeredWithinWrapper {
width: 540px; } }
@media (min-width: 1000px) and (max-width: 1249px) {
.SnackboxResults .contentContainer .snackboxResults .centeredWithinWrapper {
width: 800px; } }
@media (min-width: 1250px) and (max-width: 1499px) {
.SnackboxResults .contentContainer .snackboxResults .centeredWithinWrapper {
width: 1060px; } }
@media (min-width: 1500px) and (max-width: 1749px) {
.SnackboxResults .contentContainer .snackboxResults .centeredWithinWrapper {
width: 1320px; } }
@media (min-width: 1750px) and (max-width: 1999px) {
.SnackboxResults .contentContainer .snackboxResults .centeredWithinWrapper {
width: 1580px; } }
@media (min-width: 2000px) and (max-width: 2249px) {
.SnackboxResults .contentContainer .snackboxResults .centeredWithinWrapper {
width: 1840px; } }
@media (min-width: 2250px) and (max-width: 2499px) {
.SnackboxResults .contentContainer .snackboxResults .centeredWithinWrapper {
width: 2100px; } }
@media (min-width: 2500px) and (max-width: 2749px) {
.SnackboxResults .contentContainer .snackboxResults .centeredWithinWrapper {
width: 2360px; } }
@media (min-width: 2750px) and (max-width: 2999px) {
.SnackboxResults .contentContainer .snackboxResults .centeredWithinWrapper {
width: 2620px; } }
.TopicStoryWrapper {
display: block;
min-height: 236px;
position: relative; }
.SuggestedBoardsDropdown {
max-width: 300px;
padding: 10px 0; }
.SuggestedBoardsDropdown .Board .dismiss {
display: none; }
.SuggestedBoardsDropdown .Board .followBoardItem {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.SuggestedBoardsDropdown .Board .followConfirmation {
padding: 14px; }
.SuggestedBoardsDropdown h3 {
color: #5f5f5f;
margin: 0 14px 5px;
margin-bottom: 5px; }
.SuggestedUsersDropdown {
max-width: 300px;
padding: 10px 0; }
.SuggestedUsersDropdown .User .dismiss {
display: none; }
.SuggestedUsersDropdown .User .contactUser {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.SuggestedUsersDropdown .User .contactConfirmation {
padding: 14px; }
.SuggestedUsersDropdown h3 {
color: #5f5f5f;
margin: 0 14px 5px;
margin-bottom: 5px; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.AggregatedCloseupCard .hr {
margin-top: 16px; }
.AggregatedCloseupCard .pinActivityContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 14px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
.AggregatedCloseupCard .pinActivityContainer .pinActivity {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.AggregatedCloseupCard .pinActivityContainer .pinActivity .userActivity {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
font-size: 15px; }
.AggregatedCloseupCard .pinActivityContainer .pinActivity .userActivity a {
color: #444; }
.AggregatedCloseupCard .pinActivityContainer .pinActivity .userActivity a.blue {
color: #004b91;
font-weight: normal; }
.AggregatedCloseupCard .pinActivityContainer .pinActivity .userActivity .userNote {
line-height: normal;
line-height: initial;
margin: 0;
word-break: break-word;
word-wrap: break-word; }
.AggregatedCloseupCard .pinActivityContainer .pinActivity .userActivity.native {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.AggregatedCloseupCard .pinActivityContainer .activityTimeSince {
color: #b9b9b9; }
.AggregatedCloseupCard .pinActivityContainer.center .userActivity,
.AggregatedCloseupCard .pinActivityContainer.center .activityTimeSince {
padding-top: 8px; }
.AggregatedCloseupCard .previewContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 16px 8px; }
.AggregatedCloseupCard .repinsLikesActivityIcon {
margin-right: 8px; }
.AggregatedCloseupCard .repinsLikesActivityIcon em {
width: 42px;
height: 24px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -119px -234px no-repeat;
cursor: pointer;
display: block; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AggregatedCloseupCard .repinsLikesActivityIcon em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -117px -231px;
background-size: 399px 382px; } }
.AggregatedCloseupCard .savedByHeader {
cursor: pointer;
padding-left: 8px; }
.AggregatedCloseupCard .savedByHeader .feedPreview {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.AggregatedCloseupCard .userProfile {
margin-right: 16px;
position: relative; }
.AggregatedCloseupCard .boardCountHeader {
color: #444;
font-size: 18px;
font-weight: normal;
padding-bottom: 8px; }
.AggregatedCloseupCard .boardCountHeader .count {
font-weight: bold; }
/* desktop.scss */
.AggregatedCloseupCard {
padding: 16px 32px 32px; }
.AggregatedCloseupCard .pinActivityContainer {
padding: 0 8px; }
.DidItActionDropdown li {
padding: 2px 0; }
.DidItActionDropdown li .didItActionDropdownButton {
background: #fff;
border: 0;
border-radius: 2px;
color: #5f5f5f;
font-size: 14px;
font-weight: bold;
outline: 0;
padding: 8px 16px;
text-align: left;
width: 100%; }
.DidItActionDropdown li .didItActionDropdownButton:hover {
background: #f1f1f1; }
.DidItActivitySummary .previewContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 16px 40px; }
.DidItActivitySummary .activityRepContainer {
padding-bottom: 8px;
position: relative; }
.DidItActivitySummary .savedByContainer {
padding-left: 16px;
width: 364px; }
.DidItActivitySummary .savedByHeader {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
.DidItActivitySummary .activitySummary {
color: #444;
font-size: 15px;
font-weight: normal;
line-height: 40px;
padding-right: 16px; }
.DidItActivitySummary .activitySummary .count {
font-weight: bold; }
.DidItActivitySummary .feedPreview {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 16px 0 12px; }
.DidItUserFeed {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 14px 0; }
.DidItUserFeed .activityItem {
background: #fff;
border-radius: 8px;
margin-bottom: 8px;
padding: 32px; }
.DidItUserFeed .feedLoading {
background: url(https://s.pinimg.com/webapp/style/images/spinner-medium-1x-dbb1334f.gif) no-repeat;
background-size: contain;
height: 32px;
width: 32px;
display: inline-block;
opacity: .5;
display: none;
margin: 32px auto; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.DidItUserFeed .feedLoading {
background-image: url(https://s.pinimg.com/webapp/style/images/spinner-medium-2x-3ffcb44b.gif); } }
.DidItUserFeed .feedLoading.displayed {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.FlagDidIt .modalDescription {
color: #999;
display: table;
font-size: 13px;
height: 360px;
width: 600px; }
.FlagDidIt .modalDescription > div {
display: table-cell;
padding: 0 85px;
text-align: center;
vertical-align: middle; }
.FlagDidIt .modalDescription .fileButton {
display: inline-block;
margin: 20px auto 0; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
/* stylelint-disable-next-line at-rule-blacklist */
/* jquery.Jcrop.css v0.9.12 - MIT License */
/*
The outer-most container in a typical Jcrop instance
If you are having difficulty with formatting related to styles
on a parent element, place any fixes here or in a like selector
You can also style this element if you want to add a border, etc
A better method for styling can be seen below with .jcrop-light
(Add a class to the holder and style elements for that extended class)
*/
.jcrop-holder {
position: absolute;
top: 0;
direction: ltr;
text-align: left;
/* IE10 touch compatibility */
-ms-touch-action: none; }
/* Selection Border */
.jcrop-vline,
.jcrop-hline {
font-size: 0;
position: absolute; }
.jcrop-vline {
height: 100%;
width: 1px !important; }
.jcrop-vline.right {
right: 0; }
.jcrop-hline {
height: 1px !important;
width: 100%; }
.jcrop-hline.bottom {
bottom: 0; }
/* Invisible click targets */
.jcrop-tracker {
height: 100%;
width: 100%;
/* "turn off" link highlight */
-webkit-tap-highlight-color: transparent;
/* disable callout, image save panel */
-webkit-touch-callout: none;
/* disable cut copy paste */
-webkit-user-select: none; }
/* Selection Handles */
.jcrop-handle {
background-color: #333333;
border: 1px #eeeeee solid;
width: 7px;
height: 7px;
font-size: 1px; }
.jcrop-handle.ord-n {
left: 50%;
margin-left: -4px;
margin-top: -4px;
top: 0; }
.jcrop-handle.ord-s {
bottom: 0;
left: 50%;
margin-bottom: -4px;
margin-left: -4px; }
.jcrop-handle.ord-e {
margin-right: -4px;
margin-top: -4px;
right: 0;
top: 50%; }
.jcrop-handle.ord-w {
left: 0;
margin-left: -4px;
margin-top: -4px;
top: 50%; }
.jcrop-handle.ord-nw {
left: 0;
margin-left: -4px;
margin-top: -4px;
top: 0; }
.jcrop-handle.ord-ne {
margin-right: -4px;
margin-top: -4px;
right: 0;
top: 0; }
.jcrop-handle.ord-se {
bottom: 0;
margin-bottom: -4px;
margin-right: -4px;
right: 0; }
.jcrop-handle.ord-sw {
bottom: 0;
left: 0;
margin-bottom: -4px;
margin-left: -4px; }
/* Dragbars */
.jcrop-dragbar.ord-n,
.jcrop-dragbar.ord-s {
height: 7px;
width: 100%; }
.jcrop-dragbar.ord-e,
.jcrop-dragbar.ord-w {
height: 100%;
width: 7px; }
.jcrop-dragbar.ord-n {
margin-top: -4px; }
.jcrop-dragbar.ord-s {
bottom: 0;
margin-bottom: -4px; }
.jcrop-dragbar.ord-e {
margin-right: -4px;
right: 0; }
.jcrop-dragbar.ord-w {
margin-left: -4px; }
/* The "jcrop-light" class/extension */
.jcrop-light .jcrop-vline,
.jcrop-light .jcrop-hline {
background: #ffffff;
filter: alpha(opacity=70) !important;
opacity: 0.7 !important; }
.jcrop-light .jcrop-handle {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #000000;
border-color: #ffffff;
border-radius: 3px; }
/* The "jcrop-dark" class/extension */
.jcrop-dark .jcrop-vline,
.jcrop-dark .jcrop-hline {
background: #000000;
filter: alpha(opacity=70) !important;
opacity: 0.7 !important; }
.jcrop-dark .jcrop-handle {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #ffffff;
border-color: #000000;
border-radius: 3px; }
/* Simple macro to turn off the antlines */
.solid-line .jcrop-vline,
.solid-line .jcrop-hline {
background: #ffffff; }
/* Fix for twitter bootstrap et al. */
.jcrop-holder img,
img.jcrop-preview {
max-width: none; }
.Closeup {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.Closeup .sticky {
border-radius: 8px;
position: -webkit-sticky;
position: sticky;
top: 65px;
will-change: transform;
z-index: 101; }
@media (min-width: 800px) {
.Closeup .sticky {
top: 65px; } }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.Closeup .sticky {
position: relative;
top: 0; } }
.Closeup .showInModal .sticky {
top: 0; }
.Closeup .showInModal .flashlightSticky {
top: 84px; }
.Closeup .PinFeedbackConfirmation.show {
width: 100%;
z-index: 101; }
.Closeup .flashlightSticky {
display: block;
float: right;
position: relative;
position: -webkit-sticky;
position: sticky;
top: 149px;
z-index: 99; }
@media (min-width: 800px) {
.Closeup .flashlightSticky {
top: 149px; } }
.Closeup .transitionImage {
background: #fff;
border-radius: 0 0 8px 8px;
margin: 0 auto;
padding-bottom: 72px;
position: absolute;
text-align: center;
width: 628px; }
.Closeup .transitionImage + .CloseupContent .CloseupTitleCard {
display: none; }
.Closeup .transitionImage.isEmbeddedVideo {
padding-top: 0 !important;
/* hacky because the image is rendered with inline CSS */ }
.Closeup .transitionImage.isEmbeddedVideo .videoTransition {
background: #000 !important;
/* hacky because the image is rendered with inline CSS */
margin: 0 32px; }
.Closeup .transitionImage.isEmbeddedVideo.isVine .videoTransition {
height: 564px; }
.Closeup .transitionImage .pinImg {
border-radius: 8px; }
.Closeup .closeupActionBarContainer {
margin: 0 auto;
position: relative;
width: 628px;
z-index: 101; }
.Closeup .closeupActionBarContainer.relatedPinsByCloseup {
float: left;
left: 54%;
margin-left: -628px;
position: relative;
top: 30px; }
.Closeup .closeupActionBarContainer.relatedPinsByCloseup.noTop {
top: 0; }
.Closeup .close {
-webkit-transform: translateZ(0);
background: none;
box-shadow: none;
margin-right: 24px;
margin-top: 24px;
position: fixed;
z-index: 652; }
.Closeup .close em {
width: 17px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -358px -342px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Closeup .close em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -88px -375px;
background-size: 428px 427px; } }
.Closeup .close:hover em,
.Closeup .close:active em,
.Closeup .close:focus em {
width: 17px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -339px -342px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Closeup .close:hover em,
.Closeup .close:active em,
.Closeup .close:focus em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -70px -375px;
background-size: 428px 427px; } }
.Closeup .close:hover {
background: none;
box-shadow: none; }
.Closeup .closeupContainer {
margin: 32px auto;
max-width: 628px;
width: 100%; }
.Closeup .closeupContainer::after {
clear: both;
content: "";
display: table; }
.Closeup .closeupContainer:focus {
outline: 0; }
.Closeup .closeupContainer.relatedPinsByCloseup {
float: left;
left: 54%;
margin-left: -628px;
position: relative; }
.Closeup .closeupBottom .denzelRelatedPins {
margin: 0 auto; }
.Closeup .closeupBottom.relatedPinsByCloseup {
float: right;
margin-right: -528px;
position: relative;
right: 46%;
top: 30px; }
.Closeup .pinCarousel {
background-color: #fff;
border-bottom: 1px solid #ccc;
height: 200px;
margin-bottom: 15px;
padding: 15px 0 15px 15px; }
.Closeup .pinsCarouselBoardTitle {
color: #5c554b;
font-size: 16px;
font-weight: bold;
margin-bottom: 5px; }
.Closeup.canClose {
background-color: rgba(239, 239, 239, 0.96);
cursor: zoom-out;
overflow-x: hidden; }
.Closeup.canClose .closeupContainer,
.Closeup.canClose .closeupBottom {
cursor: auto; }
.Closeup.canClose .closeupBottom {
-webkit-transform: translateZ(0); }
.Closeup.canClose .sticky.relatedPinsByCloseup {
left: 54%;
margin-left: -636px; }
@media (max-width: 1285px) {
.Closeup.canClose .sticky.relatedPinsByCloseup {
left: 0;
margin-left: 58px; } }
@media (min-width: 0) and (max-width: 999px) {
.Closeup .closeupBottom {
width: 628px; }
.Closeup .arrow-nav {
display: none; } }
.Closeup.relatedPinsByCloseup {
min-width: 1285px; }
.Closeup.relatedPinsByCloseup .closeupBottom.relatedPinsByCloseup {
width: 514px; }
.Closeup .sticky.relatedPinsByCloseup {
left: 54%;
margin-left: -628px; }
@media (max-width: 1285px) {
.Closeup .sticky.relatedPinsByCloseup {
left: 0;
margin-left: 66px; } }
@media only screen and (max-device-width: 600px) {
.Closeup .closeupContainer {
margin: 10px auto; }
.Closeup .sticky {
top: 0; } }
/* desktop.scss */
.Closeup .closeupBottom .denzelRelatedPins {
max-width: 1050px; }
.CloseupBottom .relatedPinsWrapper {
visibility: hidden; }
.CloseupBottom .sectionTitle {
color: #444;
font-size: 18px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
.CloseupBottom .gridContainer {
clear: both; }
.CloseupBottom .CloseupRelatedPins {
margin-top: 20px; }
.CloseupBottom .spinner {
background: url(https://s.pinimg.com/webapp/style/images/spinner-a8ae820b.gif) no-repeat center;
display: block;
height: 30px;
left: 0;
position: absolute;
right: 0;
top: 300px; }
.CloseupContent .arrow-nav > div {
background: transparent;
border-radius: 0;
height: 100px;
position: fixed;
top: 350px;
width: 100px; }
.CloseupContent .arrow-nav > div::before, .CloseupContent .arrow-nav > div::after {
border-bottom: solid 10px transparent;
border-radius: 5px;
border-top: solid 10px transparent;
content: "";
display: block;
left: 50%;
position: absolute;
top: 50%; }
.CloseupContent .arrow-nav > div.left-arrow {
left: 0; }
.CloseupContent .arrow-nav > div.left-arrow::before {
border-right: solid 10px #a0a0a0;
margin: -10px 0 0 -8px; }
.CloseupContent .arrow-nav > div.left-arrow::after {
border-right: solid 10px rgba(239, 239, 239, 0.96);
margin: -10px 0 0 -3px; }
.CloseupContent .arrow-nav > div.right-arrow {
right: 0; }
.CloseupContent .arrow-nav > div.right-arrow::before {
border-left: solid 10px #a0a0a0;
margin: -10px 0 0 -3px; }
.CloseupContent .arrow-nav > div.right-arrow::after {
border-left: solid 10px rgba(239, 239, 239, 0.96);
margin: -10px 0 0 -8px; }
.CloseupContent .arrow-nav > div:hover {
cursor: pointer; }
.CloseupContent .arrow-nav > div:hover.left-arrow::before {
border-right: solid 10px #555; }
.CloseupContent .arrow-nav > div:hover.right-arrow::before {
border-left: solid 10px #555; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.CloseupFollowModule {
background-color: #efefef;
border-radius: 8px;
padding: 16px; }
.CloseupFollowModule .followContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
.CloseupFollowModule .followArrow {
margin: -24px 0 0 5px;
position: absolute; }
.CloseupFollowModule .followArrow em {
width: 14px;
height: 8px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -46px -393px no-repeat;
display: block; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.CloseupFollowModule .followArrow em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -151px -98px;
background-size: 399px 382px; } }
.CloseupFollowModule .followText {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font-size: 18px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 454px; }
/* desktop.scss */
.CloseupFollowModule {
margin: 0 32px 16px; }
.CloseupLinkModule {
padding: 16px 40px; }
.CloseupLinkModule .User a.profileSource {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.CloseupRelatedPins.fullWidthRelatedPins .relatedPinsAnnotationTitleWrapper {
margin: 32px auto;
max-width: 628px;
width: 100%; }
.CloseupRelatedPins.fullWidthRelatedPins .relatedPinsAnnotationTitleWrapper .sectionTitle {
font-size: 24px; }
.CloseupRelatedPins .relatedPinsAnnotationTitleWrapper {
margin: 0 7px; }
.CloseupRelatedPins .annotations,
.CloseupRelatedPins .annotationHeader {
font-size: 14px;
font-weight: bold; }
.CloseupRelatedPins .active {
color: #878787; }
.CloseupRelatedPins .annotations {
float: right; }
.CloseupRelatedPins .annotations .annotationHeader {
color: #333;
float: left;
margin-right: 4px;
position: relative;
top: 2px; }
.CloseupRelatedPins .annotationList {
list-style: none;
padding-top: 2px;
text-align: right; }
.CloseupRelatedPins .annotationList li {
display: inline;
margin-right: 1px; }
.CloseupRelatedPins .sectionTitle {
float: left;
margin-top: 0;
visibility: visible; }
.CloseupRelatedPins.slides {
margin: 15px 7px; }
.CloseupRelatedPins.slides .relatedPinsTop {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
height: 33px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 10px; }
.CloseupRelatedPins.slides .relatedPinsText {
color: #666;
font-size: 16px;
font-weight: bold; }
.CloseupRelatedPins.slides .relatedPinSet {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
.CloseupRelatedPins.slides .relatedPinSet.hidden {
display: none; }
.CloseupRelatedPins.slides .moreRelatedPins {
background-color: #fff;
border-radius: 6px;
color: #666;
cursor: pointer;
font-size: 14px;
font-weight: bold;
padding: 8px 20px; }
.CloseupRelatedPins.slides .relatedPinsBottom {
height: 292px;
overflow: hidden;
z-index: 10; }
.CloseupRelatedPins.slides .relatedPinItem {
background-color: #fff;
border-radius: 6px;
cursor: zoom-in;
display: inline-block;
height: 292px;
opacity: 1;
overflow: hidden;
position: relative;
-webkit-transition: opacity 1s ease;
transition: opacity 1s ease;
width: 236px; }
.CloseupRelatedPins.slides .relatedPinItem.invisible {
opacity: 0; }
.CloseupRelatedPins.slides .hoverMask {
background-color: #fff;
height: 100%;
opacity: 0;
position: absolute;
width: 100%;
z-index: 20; }
.CloseupRelatedPins.slides .hoverMask:hover {
opacity: .1; }
.CloseupRelatedPins.slides .relatedPinBottom {
background-color: #fff;
bottom: 0;
padding: 10px;
position: absolute;
width: 216px; }
.CloseupRelatedPins.slides .relatedPinProfileImage {
border-radius: 50%;
display: inline-block;
float: left;
margin-right: 5px;
overflow: hidden;
vertical-align: middle; }
.CloseupRelatedPins.slides .relatedPinPinner {
color: #999; }
.CloseupRelatedPins.slides .relatedPinBoard {
color: #717171; }
.CloseupRelatedPins.slides .relatedPinPinner, .CloseupRelatedPins.slides .relatedPinBoard {
display: block;
font-size: 11px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.CloseupRelatedPins.slides .profilePicture {
height: 30px;
width: 30px; }
.CloseupRelatedPins.relatedPinsGrid {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
display: block;
padding: 10px;
background: #fff;
margin-bottom: 14px;
max-height: 552px;
max-width: 236px; }
.CloseupRelatedPins.relatedPinsGrid .pinGridWrapper {
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
max-height: 459px;
position: relative;
top: -2px; }
.CloseupRelatedPins.relatedPinsGrid .pinGridWrapper .Grid {
margin: 0;
width: 216px; }
.CloseupRelatedPins.relatedPinsGrid .pinGridWrapper .Grid.loading {
height: 459px; }
.CloseupRelatedPins.relatedPinsGrid .pinGridWrapper .item {
margin: 0 3px 3px 0;
opacity: 0.5; }
.CloseupRelatedPins.relatedPinsGrid .pinGridWrapper .item:hover, .CloseupRelatedPins.relatedPinsGrid .pinGridWrapper .item.activeItem {
opacity: 1; }
.CloseupRelatedPins.relatedPinsGrid .pinGridWrapper .item:hover .hoverMask, .CloseupRelatedPins.relatedPinsGrid .pinGridWrapper .item.activeItem .hoverMask {
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s; }
.CloseupRelatedPins.relatedPinsGrid.short .pinGridWrapper {
max-height: 229.5px; }
.CloseupRelatedPins.relatedPinsGrid.short .pinGridWrapper .Grid.loading {
height: 229.5px; }
.CloseupRelatedPins.relatedPinsGrid .pinGridWrapper {
background: url(https://s.pinimg.com/webapp/style/images/boardPinsGridShadowBottom-a1fc902f.png) repeat-x left bottom; }
.CloseupRelatedPins.relatedPinsGrid .relatedPinsButton {
margin-top: 4px;
width: 100%; }
.CloseupRelatedPins.relatedPinsGrid .titleContainer {
margin-bottom: 11px;
overflow: hidden; }
.CloseupRelatedPins.relatedPinsGrid .titleContainer h3.title {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #333;
font-size: 15px;
line-height: 38px; }
.CloseupRelatedPins.relatedPinsGrid .titleContainer .thumbImageWrapper {
border-radius: 3px;
float: left;
height: 38px;
margin-right: 9px;
overflow: hidden;
width: 38px; }
.CloseupRelatedPins.sentPin .titleContainer {
margin: 0 18px; }
.CloseupRelatedPins.sentPin .titleContainer h3.title {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: HelveticaNeue-Bold, 'Helvetica', arial;
color: #333;
font-size: 23px;
letter-spacing: -1px;
line-height: 1.2em;
width: 310px; }
/* desktop.scss */
.CloseupRelatedPins .relatedPinsAnnotationTitleWrapper .sectionTitle {
margin-left: 16px; }
.CloseupSidebar {
float: right;
position: relative;
width: 236px;
z-index: 102; }
.CloseupSidebar .Domain,
.CloseupSidebar .VisuallySimilar {
margin-bottom: 14px; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.PinActionBar {
-webkit-transform: translateZ(0);
background-color: rgba(255, 255, 255, 0.9);
border-radius: 8px 8px 0 0;
box-sizing: border-box;
cursor: default;
font-size: 14px;
margin: 0;
padding: 16px 32px;
position: absolute;
top: 0;
-webkit-transition: 0.2s padding ease;
transition: 0.2s padding ease;
width: 628px; }
.PinActionBar::after {
clear: both;
content: "";
display: table; }
.PinActionBar.canClose {
margin-top: 0;
top: 32px; }
.PinActionBar.canClose.showAOPrompts {
top: 216px; }
.promptsMultilineEducation .PinActionBar.canClose.showAOPrompts:not(.sticky) {
top: 272px; }
.PinActionBar.showAOPrompts {
top: 184px; }
.promptsMultilineEducation .PinActionBar.showAOPrompts {
top: 240px; }
.PinActionBar.sticky {
-webkit-transform: translateZ(0);
background-color: #fff;
padding: 10px 32px;
position: fixed;
top: 54px; }
.PinActionBar.sticky.showAOPrompts, .PinActionBar.sticky.hasUnauthOpenHeader {
top: 64px; }
.hasKLPBar .PinActionBar.sticky {
top: 98px; }
.hasColorfulKLPBar .PinActionBar.sticky {
top: 134px; }
.PinActionBar.sticky.canClose {
top: 0; }
.PinActionBar.absolute {
box-shadow: none; }
.PinActionBar.absolute.below {
border-radius: 0 0 8px 8px;
margin-top: -68px; }
.PinActionBar .repinLike {
float: left; }
.PinActionBar .shareGear {
float: left; }
.PinActionBar .likeButtonWrapper {
display: inline-block;
float: left; }
.PinActionBar .repinsAndLikes {
color: #b9b9b9;
float: right;
padding-right: 10px; }
.PinActionBar .repinsAndLikes a {
color: #b9b9b9; }
.PinActionBar .repinsAndLikes .repinCountContainer {
float: left; }
.PinActionBar .repinsAndLikes .repinCountContainer em {
width: 13px;
height: 14px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -32px -375px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.PinActionBar .repinsAndLikes .repinCountContainer em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -15px -368px;
background-size: 399px 382px; } }
.PinActionBar .repinsAndLikes .repinCountContainer:hover em,
.PinActionBar .repinsAndLikes .repinCountContainer:active em,
.PinActionBar .repinsAndLikes .repinCountContainer:focus em {
width: 13px;
height: 14px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -47px -375px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.PinActionBar .repinsAndLikes .repinCountContainer:hover em,
.PinActionBar .repinsAndLikes .repinCountContainer:active em,
.PinActionBar .repinsAndLikes .repinCountContainer:focus em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -29px -368px;
background-size: 399px 382px; } }
.PinActionBar .repinsAndLikes .repinCountContainer em {
float: left;
margin-top: 8px; }
.PinActionBar .repinsAndLikes .repinCount,
.PinActionBar .repinsAndLikes .likeCount {
display: inline-block;
font-weight: bold;
margin: 6px 0 0 2px; }
.PinActionBar .repinsAndLikes .repinCount:hover,
.PinActionBar .repinsAndLikes .likeCount:hover {
color: #afafaf; }
.PinActionBar .repinsAndLikes .noStats {
display: none; }
.PinActionBar .repinsAndLikes .noHover a {
cursor: default; }
.PinActionBar .DidItCloseup.float-fix {
display: inline-block;
float: left;
margin-right: 6px; }
/* desktop.scss */
.PinActionBar.sticky {
top: 65px; }
@media (min-width: 800px) {
.PinActionBar.sticky {
top: 65px; } }
.PinActionBar .primary {
float: right; }
.PinActionBar .repinLike {
width: 100%; }
.UnauthCloseup .moreFromBoard {
font-size: 18px;
font-weight: bold;
margin: 35px 0 0 7px; }
.ActiveProductsOnlyButton {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 31px; }
.ActiveProductsOnlyButton:not(.primary):not(.toggled):not(.disabled) .buttonText {
color: #bd081c; }
.BuyableSearchUpsell {
border-radius: 6px;
overflow: hidden;
position: relative; }
.BuyableSearchUpsell .shopTitle {
display: -webkit-box;
max-height: 56px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
color: #fff;
font-size: 28px;
line-height: 28px;
margin-bottom: 12px; }
.BuyableSearchUpsell .labels {
bottom: 0;
left: 0;
padding: 18px;
position: absolute; }
.CloseupBuyablePriceInfo.grayCTA .buyButton {
background: #ebebeb;
border: 1px solid #ebebeb;
color: #555; }
.CloseupBuyablePriceInfo.fadedBlueCTA .buyButton {
background: #5b9dba;
border: 1px solid #5b9dba; }
.CloseupBuyablePriceInfo .productInfo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 16px 40px; }
.CloseupBuyablePriceInfo .priceContainer {
margin-right: 10px; }
.CloseupBuyablePriceInfo .priceInfo {
font-size: 22px;
font-weight: bold;
line-height: 22px;
text-align: left; }
.CloseupBuyablePriceInfo .activePrice {
color: #555; }
.CloseupBuyablePriceInfo .activePrice.isAvailable {
color: #0084ff; }
.CloseupBuyablePriceInfo .originalPrice {
color: #b5b5b5;
margin-left: 5px;
opacity: .5; }
.CloseupBuyablePriceInfo .strikeout {
position: relative; }
.CloseupBuyablePriceInfo .strikeout::after {
border-bottom: 2px solid #555;
content: "";
left: 0;
position: absolute;
right: 0;
top: 50%; }
.CloseupBuyablePriceInfo .additionalInformation {
color: #555;
font-size: 14px; }
.CloseupBuyablePriceInfo .merchantLink {
padding: 0 0 16px 40px; }
.CloseupBuyableProductCarousel .pinLink {
display: block;
width: 628px; }
.CloseupBuyableProductCarousel .FlashlightEnabledImage {
margin: auto; }
.CloseupBuyableProductCarousel .galleryContainer {
position: absolute;
right: -117px;
top: 0; }
.CloseupBuyableProductInfo {
overflow: hidden; }
.CloseupBuyableProductInfo.grayCTA .links {
color: #555; }
.CloseupBuyableProductInfo.grayCTA .links a {
color: #555; }
.CloseupBuyableProductInfo.fadedBlueCTA .links {
color: #5b9dba; }
.CloseupBuyableProductInfo.fadedBlueCTA .links a {
color: #5b9dba; }
.CloseupBuyableProductInfo .hidden {
display: none; }
.CloseupBuyableProductInfo .productDescription {
color: #555;
font-size: 18px;
line-height: 22px;
padding: 16px 40px;
width: 459px;
word-wrap: break-word; }
.CloseupBuyableProductInfo .productDescription .ellipsis {
display: -webkit-box;
max-height: 44px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; }
.CloseupBuyableProductInfo .productDescription p {
margin: 0; }
.CloseupBuyableProductInfo .showMore {
color: #b5b5b5;
cursor: pointer;
font-size: 14px;
margin-top: -11px;
padding: 0 0 16px 40px; }
.CloseupBuyableProductInfo .links {
color: #0084ff;
font-size: 14px;
max-width: 455px;
overflow: hidden;
padding: 0 0 16px 40px;
text-overflow: ellipsis;
white-space: nowrap; }
.CloseupBuyableProductInfo .links a {
color: #0084ff; }
.CloseupBuyableProductInfo .links .slash {
color: #b5b5b5; }
.ItemAddedSuccessToast {
background-image: -webkit-linear-gradient(rgba(10, 14, 19, 0.85), #0a0e13);
background-image: linear-gradient(rgba(10, 14, 19, 0.85), #0a0e13);
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.4) 0 0 20px 0;
color: #fff;
margin-top: 10px;
padding: 10px;
-webkit-transition: opacity .1s ease-in-out;
transition: opacity .1s ease-in-out;
visibility: hidden;
width: 410px; }
.ItemAddedSuccessToast.visible {
visibility: visible; }
.ItemAddedSuccessToast .toastWrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative; }
.ItemAddedSuccessToast img {
background: #333;
border-radius: 4px;
height: 40px;
margin-right: 10px;
overflow: hidden;
width: 40px; }
.ItemAddedSuccessToast .message {
color: #fff;
font-size: 13px;
line-height: 40px; }
.ItemAddedSuccessToast .icon {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #bd081c;
border-radius: 4px;
color: #fff;
cursor: pointer;
height: 16px;
padding: 7px;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.MerchantPageHeader {
background: #fff;
color: #333;
margin-top: 8px; }
.MerchantPageHeader::after {
clear: both;
content: "";
display: table; }
.MerchantPageHeader .fixedHeader {
background: #fff;
height: 70px;
left: 0;
margin-bottom: -70px;
overflow: hidden;
right: 0;
top: 64px;
z-index: 103; }
@media (max-width: 764px) {
.MerchantPageHeader .fixedHeader {
width: 764px; } }
.MerchantPageHeader .fixedHeader.fixed {
position: fixed; }
.MerchantPageHeader .fixedHeader.shadow {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); }
.MerchantPageHeader .profileImage {
margin: 0 auto -87px;
padding-top: 18px;
position: relative;
width: 60px;
z-index: 104; }
.MerchantPageHeader .profileImage img {
border-radius: 100%;
box-shadow: inset 0 0 0 -2px rgba(255, 255, 255, 0.48), 0 0 0 1px rgba(0, 0, 0, 0.14), 0 0 0 8px white;
height: 60px;
width: 60px; }
.MerchantPageHeader .titleBar {
height: 32px;
margin: 18px auto;
position: relative; }
.MerchantPageHeader .fixedHeaderNameAndImage {
-webkit-backface-visibility: hidden;
position: absolute;
top: -52px; }
.MerchantPageHeader .fixedHeaderNameAndImage.showName {
-webkit-transform: translate(0, 52px);
transform: translate(0, 52px);
-webkit-transition-duration: .2s;
transition-duration: .2s; }
.MerchantPageHeader .fixedHeaderNameAndImage.hideName {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition-duration: .2s;
transition-duration: .2s; }
.MerchantPageHeader .fixedHeaderNameAndImage .fixedHeaderImage {
display: inline; }
.MerchantPageHeader .fixedHeaderNameAndImage .fixedHeaderImage img {
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: 100%;
height: 32px;
width: 32px; }
.MerchantPageHeader .fixedHeaderNameAndImage .fixedHeaderName {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
display: inline-block;
font-size: 21px;
font-weight: bold;
padding-left: 7px;
vertical-align: middle;
width: 528px; }
.MerchantPageHeader .merchantInfo {
/* stylelint-disable-next-line at-rule-no-unknown */
color: #333;
margin: 100px auto 0;
overflow: hidden;
text-align: center; }
@media (min-width: 0) and (max-width: 999px) {
.MerchantPageHeader .merchantInfo {
/* stylelint-disable-next-line at-rule-no-unknown */
width: 420px; } }
@media (min-width: 1000px) and (max-width: 1249px) {
.MerchantPageHeader .merchantInfo {
/* stylelint-disable-next-line at-rule-no-unknown */
width: 505px; } }
@media (min-width: 1250px) and (max-width: 1499px) {
.MerchantPageHeader .merchantInfo {
/* stylelint-disable-next-line at-rule-no-unknown */
width: 620px; } }
@media (min-width: 1500px) and (max-width: 1749px) {
.MerchantPageHeader .merchantInfo {
/* stylelint-disable-next-line at-rule-no-unknown */
width: 620px; } }
@media (min-width: 1750px) and (max-width: 1999px) {
.MerchantPageHeader .merchantInfo {
/* stylelint-disable-next-line at-rule-no-unknown */
width: 620px; } }
@media (min-width: 2000px) and (max-width: 2249px) {
.MerchantPageHeader .merchantInfo {
/* stylelint-disable-next-line at-rule-no-unknown */
width: 620px; } }
@media (min-width: 2250px) and (max-width: 2499px) {
.MerchantPageHeader .merchantInfo {
/* stylelint-disable-next-line at-rule-no-unknown */
width: 620px; } }
@media (min-width: 2500px) and (max-width: 2749px) {
.MerchantPageHeader .merchantInfo {
/* stylelint-disable-next-line at-rule-no-unknown */
width: 620px; } }
@media (min-width: 2750px) and (max-width: 2999px) {
.MerchantPageHeader .merchantInfo {
/* stylelint-disable-next-line at-rule-no-unknown */
width: 620px; } }
.MerchantPageHeader .merchantInfo .name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* stylelint-disable-next-line at-rule-no-unknown */
font-size: 33px;
margin: 4px auto 12px;
max-width: 520px; }
@media (min-width: 0) and (max-width: 999px) {
.MerchantPageHeader .merchantInfo .name {
/* stylelint-disable-next-line at-rule-no-unknown */
max-width: 290px; } }
@media (min-width: 1000px) and (max-width: 1249px) {
.MerchantPageHeader .merchantInfo .name {
/* stylelint-disable-next-line at-rule-no-unknown */
max-width: 470px; } }
@media (min-width: 1250px) and (max-width: 1499px) {
.MerchantPageHeader .merchantInfo .name {
/* stylelint-disable-next-line at-rule-no-unknown */
max-width: 490px; } }
@media (min-width: 1500px) and (max-width: 1749px) {
.MerchantPageHeader .merchantInfo .name {
/* stylelint-disable-next-line at-rule-no-unknown */
max-width: 490px; } }
@media (min-width: 1750px) and (max-width: 1999px) {
.MerchantPageHeader .merchantInfo .name {
/* stylelint-disable-next-line at-rule-no-unknown */
max-width: 490px; } }
@media (min-width: 2000px) and (max-width: 2249px) {
.MerchantPageHeader .merchantInfo .name {
/* stylelint-disable-next-line at-rule-no-unknown */
max-width: 490px; } }
@media (min-width: 2250px) and (max-width: 2499px) {
.MerchantPageHeader .merchantInfo .name {
/* stylelint-disable-next-line at-rule-no-unknown */
max-width: 490px; } }
@media (min-width: 2500px) and (max-width: 2749px) {
.MerchantPageHeader .merchantInfo .name {
/* stylelint-disable-next-line at-rule-no-unknown */
max-width: 490px; } }
@media (min-width: 2750px) and (max-width: 2999px) {
.MerchantPageHeader .merchantInfo .name {
/* stylelint-disable-next-line at-rule-no-unknown */
max-width: 490px; } }
.MerchantPageHeader .merchantInfo .description {
font-size: 14px;
margin-bottom: 30px; }
.MerchantPageHeader .merchantInfo .description .merchantDescription {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 19px;
margin-bottom: 34px;
overflow: hidden; }
.MerchantPageHeader .merchantInfo .description .seeProfile {
color: #5f5f5f;
font-weight: normal; }
.MultiVariantPickers {
margin: 0 57px; }
.MultiVariantPickers .title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", sans-serif;
font-weight: bold;
color: #555;
font-size: 14px;
font-weight: bold;
margin: 10px 0; }
.MultiVariantPickers .title .selectedValue {
color: #555;
font-weight: 100;
margin-left: 10px; }
.MultiVariantPickers .swatchVariant {
border-radius: 50%;
box-shadow: 0 0 1px #ccc;
cursor: pointer;
display: inline-block;
height: 40px;
margin-bottom: 5px;
margin-right: 7px;
overflow: hidden;
position: relative;
width: 40px; }
.MultiVariantPickers .swatchVariant.unavailable .frame, .MultiVariantPickers .swatchVariant.selected .frame {
border: 2px solid #fff;
border-radius: 50%;
height: 32px;
left: 0;
position: absolute;
top: 0;
width: 32px;
z-index: 1; }
.MultiVariantPickers .swatchVariant.unavailable {
background-color: #fff;
border: 2px solid #b5b5b5;
height: 36px;
position: relative;
width: 36px; }
.MultiVariantPickers .swatchVariant.unavailable::after {
border-bottom: 2px solid #b5b5b5;
content: "";
left: 0;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
z-index: 2; }
.MultiVariantPickers .swatchVariant.selected {
background-color: #fff;
border: 2px solid #0084ff;
height: 36px;
width: 36px; }
.MultiVariantPickers .swatchVariant img {
border-radius: 50%;
box-sizing: border-box;
height: 40px;
left: 0;
position: absolute;
top: 0;
width: 40px; }
.MultiVariantPickers .labelVariant {
color: #b5b5b5;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: bold;
line-height: 25px;
margin-right: 15px;
white-space: nowrap; }
.MultiVariantPickers .labelVariant.unavailable {
color: #f1f1f1;
position: relative; }
.MultiVariantPickers .labelVariant.unavailable::after {
border-bottom: 1px solid #f1f1f1;
content: "";
left: 0;
position: absolute;
right: 0;
top: 50%; }
.MultiVariantPickers .labelVariant.selected {
border-bottom: 3px solid #0084ff;
color: #555;
margin-bottom: -3px; }
.OrderHistory {
background-color: #fff;
color: #555;
overflow: hidden; }
.OrderHistory .verticalCenter {
display: inline-block;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.OrderHistory .orderHistoryTitle {
font-size: 33px;
font-weight: bold;
margin: 75px auto 40px;
text-align: center;
width: 628px; }
.PriceFilter.search .priceFilterContainer {
position: absolute; }
.PriceFilter .priceFilterContainer {
position: fixed;
right: 32px;
top: 70px;
z-index: 104; }
.PriceFilter .priceFilterContainer .priceFilterButton {
background-color: #0084ff;
border-radius: 16px;
clear: both;
color: #fff;
cursor: pointer;
display: block;
float: right;
font-size: 14px;
padding: 8px 12px; }
.PriceFilter .priceFilterContainer .priceFilter {
background-color: rgba(0, 132, 255, 0.8);
border-radius: 8px;
height: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
-webkit-transition: width .2s ease-in-out, height .2s ease-in-out;
transition: width .2s ease-in-out, height .2s ease-in-out;
width: 0;
z-index: 104; }
.PriceFilter .priceFilterContainer .priceFilter.active {
display: block;
height: 400px;
width: 300px; }
.PriceFilter .priceFilterContainer .priceFilter.active .filterPriceSlider {
-webkit-animation: bounce .3s;
animation: bounce .3s;
-webkit-animation-delay: .6s;
animation-delay: .6s; }
.PriceFilter .priceFilterContainer .priceFilter .filterPriceContent {
height: 100%;
position: relative;
text-align: left;
width: 100%; }
.PriceFilter .priceFilterContainer .priceFilter .filterPriceSlider {
color: #fff;
cursor: pointer;
padding: 5px 20px;
position: absolute;
top: 293px; }
.PriceFilter .priceFilterContainer .priceFilter .filterPriceSlider label {
display: block;
font-size: 20px;
font-weight: 100;
width: 130px; }
.PriceFilter .priceFilterContainer .priceFilter .filterPriceSlider .filterValueIcon {
width: 260px; }
.PriceFilter .priceFilterContainer .priceFilter .filterPriceSlider .filterPriceValue {
font-size: 40px;
font-weight: 600; }
.PriceFilter .priceFilterContainer .priceFilter .filterPriceSlider.active .filterPriceIcon span:first-child {
top: -15px; }
.PriceFilter .priceFilterContainer .priceFilter .filterPriceSlider.active .filterPriceIcon span:last-child {
bottom: -15px; }
.PriceFilter .priceFilterContainer .priceFilter .filterPriceIcon {
border: 2px solid #fff;
border-radius: 100%;
float: right;
height: 35px;
position: relative;
width: 35px; }
.PriceFilter .priceFilterContainer .priceFilter .filterPriceIcon span {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
height: 0;
left: 13px;
position: absolute;
width: 0; }
.PriceFilter .priceFilterContainer .priceFilter .filterPriceIcon span:first-child {
border-bottom: 7px solid #fff;
top: 7px;
-webkit-transition: top .1s ease-in-out;
transition: top .1s ease-in-out; }
.PriceFilter .priceFilterContainer .priceFilter .filterPriceIcon span:last-child {
border-top: 7px solid #fff;
bottom: 7px;
-webkit-transition: bottom .1s ease-in-out;
transition: bottom .1s ease-in-out; }
@-webkit-keyframes bounce {
0% {
-webkit-transform: translateY(0);
transform: translateY(0); }
60% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px); }
100% {
-webkit-transform: translateY(0);
transform: translateY(0); } }
@keyframes bounce {
0% {
-webkit-transform: translateY(0);
transform: translateY(0); }
60% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px); }
100% {
-webkit-transform: translateY(0);
transform: translateY(0); } }
.Product {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
height: 320px;
padding: 10px;
position: relative;
width: 216px; }
.Product .hoverMask {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background 0.04s linear;
transition: background 0.04s linear;
border-radius: 3px;
box-shadow: none;
z-index: 100; }
.Product .imageWrapper:hover .hoverMask {
background: rgba(255, 255, 255, 0.08); }
.Product .imageWrapper:active .hoverMask {
background: rgba(255, 255, 255, 0.08); }
.Product .name {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #555;
display: block;
font-size: 14px;
font-weight: bold;
height: 18px;
line-height: 18px;
margin: 0 3px 6px;
position: relative; }
.Product .imageWrapper {
position: relative; }
.Product .imageWrapper::after {
border-radius: 6px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 260px;
left: 0;
position: absolute;
top: 0;
width: 216px; }
.Product .imageWrapper .categoryImage {
border-radius: 6px;
height: 260px;
width: 216px; }
.Product .imageWrapper .categoryImage {
height: 260px;
overflow: hidden; }
.Product img {
vertical-align: middle; }
.Product .price {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #555;
display: block;
font-size: 14px;
font-weight: bold;
height: 18px;
line-height: 18px;
margin: 0 3px 6px;
position: relative;
text-align: center; }
.ProductDetailsPage {
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif; }
.ProductDetailsPage .productImages {
float: left;
width: 440px; }
.ProductDetailsPage .productImages .mainImage {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
border-radius: 6px;
margin: 10px; }
.ProductDetailsPage .productImages .mainImage img {
display: block;
margin: auto;
max-width: 400px;
padding: 10px; }
.ProductDetailsPage .productImages .otherImages img {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
margin-bottom: 10px;
margin-left: 10px;
max-width: 182.5px;
padding: 10px; }
.ProductDetailsPage .productDetails {
margin-left: 430px; }
.ProductDetailsPage .productDetailsContainer {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
margin: 10px; }
.ProductDetailsPage .productTitle {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #555;
display: block;
font-size: 14px;
font-weight: bold;
height: 18px;
line-height: 18px;
margin: 0 3px 6px;
position: relative;
padding: 10px; }
.ProductDetailsPage .productGroupId {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #8e8e8e;
font-size: 12px;
margin-left: 3px; }
.ProductDetailsPage .productApprovalForm {
padding: 10px; }
.ProductDetailsPage .productApprovalForm input {
width: 40%; }
.ProductDetailsPage .productLink {
display: block;
padding: 10px; }
.ProductDetailsPage .productDescription {
padding: 10px; }
.ProductDetailsPage .productPrice {
padding: 10px; }
.ProductDetailsPage .productApprovalStatus, .ProductDetailsPage .productApprovalStatusRationale {
padding: 10px; }
.ProductDetailsPage h3 {
padding: 10px; }
.ProductDetailsPage table {
background-color: transparent; }
.ProductDetailsPage caption {
color: #777;
padding-bottom: 8px;
padding-top: 8px;
text-align: left; }
.ProductDetailsPage th {
text-align: left; }
.ProductDetailsPage .table {
margin-bottom: 20px;
max-width: 100%;
width: 100%; }
.ProductDetailsPage .table > thead > tr > th,
.ProductDetailsPage .table > tbody > tr > th,
.ProductDetailsPage .table > tfoot > tr > th,
.ProductDetailsPage .table > thead > tr > td,
.ProductDetailsPage .table > tbody > tr > td,
.ProductDetailsPage .table > tfoot > tr > td {
border-top: 1px solid #ddd;
line-height: 1.42857143;
padding: 8px;
vertical-align: top; }
.ProductDetailsPage .table > thead > tr > th {
border-bottom: 2px solid #ddd;
vertical-align: bottom; }
.ProductDetailsPage .table > tbody + tbody {
border-top: 2px solid #ddd; }
.ProductDetailsPage .table .table {
background-color: #fff; }
.ProductDetailsPage td, .ProductDetailsPage th {
padding: 0; }
.ProductGallery {
margin-top: -12px; }
.ProductGallery .container {
height: 380px;
overflow: hidden; }
.ProductGallery .catalogItem {
cursor: pointer;
height: 80px;
margin: 12px;
overflow: hidden;
position: relative;
width: 80px; }
.ProductGallery .catalogItem.selected {
background-color: #fff;
border: 2px solid #ccc;
border-radius: 4px;
height: 76px;
width: 76px; }
.ProductGallery .catalogItem.selected .frame {
border: 2px solid #fff;
height: 72px;
left: 0;
position: absolute;
top: 0;
width: 72px;
z-index: 10; }
.ProductGallery .catalogItem.selected img {
left: -2px;
min-height: 80px;
min-width: 80px;
top: -2px; }
.ProductGallery .catalogItem img {
border-radius: 4px;
left: 0;
position: absolute;
top: 0; }
.ProductGallery .controll {
background-color: rgba(0, 0, 0, 0.2);
border-radius: 4px;
height: 30px;
margin: 0 12px;
text-align: center;
width: 80px; }
.ProductGallery .controll .icons {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
height: 30px;
margin: auto; }
.ProductGallery .controll .scrollIcon {
-webkit-animation: fadeIn .2s ease-out;
animation: fadeIn .2s ease-out;
overflow: hidden;
padding: 8px; }
.ProductGallery .controll .scrollIcon.hide {
display: none; }
.ProductGallery .controll .scrollIcon em {
cursor: pointer;
display: inline-block;
vertical-align: middle; }
.ProductGallery .controll .scrollIcon em.up {
width: 12px;
height: 8px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -307px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ProductGallery .controll .scrollIcon em.up {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -132px -368px;
background-size: 399px 382px; } }
.ProductGallery .controll .scrollIcon em.down {
width: 12px;
height: 8px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -297px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ProductGallery .controll .scrollIcon em.down {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -145px -368px;
background-size: 399px 382px; } }
.ProductsPage .returnedCountsDisplay {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
margin: 10px;
padding: 10px; }
.ProductsPageHeader {
background-color: #fff;
padding-bottom: 24px;
padding-left: 25%;
padding-right: 25%;
position: relative;
text-align: center;
-webkit-transition: opacity 1s ease;
transition: opacity 1s ease;
width: auto;
z-index: 670; }
.ProductsPageHeader .search {
padding: 20px;
text-align: right; }
.ProductsPageHeader .searchBar {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.ProductsPageHeader .searchBar form {
width: 80%; }
.ProductsPageHeader .searchBar form .submitButton {
float: right; }
.ProductsPageHeader .searchBar form .field {
width: 85%; }
.ProductsPageHeader h1 {
color: #333;
color: rgba(21, 21, 21, 0.8);
font-size: 47px;
font-weight: bold;
line-height: 52px;
margin-left: auto;
margin-right: auto;
max-width: 736px;
text-align: center;
word-wrap: break-word;
margin: 34px auto 20px; }
.ja .ProductsPageHeader h1 {
font-size: 36px; }
.ProductsPageHeader .boardName {
color: #333;
color: rgba(21, 21, 21, 0.8);
font-size: 36px;
line-height: 32px;
margin-top: 0;
padding-top: 34px;
text-align: center; }
.ProductsPageHeader .description {
color: #444;
font-size: 15px;
line-height: 20px;
margin: 10px auto 5px;
text-align: center;
text-shadow: none;
width: 750px; }
.ProductsPageHeader .divider {
margin-top: 31px; }
.ProductsPageHeader .divider hr {
background: #eee;
border: 0;
height: 1px;
margin: 0;
width: 100%; }
.ShopBoardPage::after {
clear: both;
content: "";
display: table; }
.ShopBoardPage .boardCollectionView {
color: #333; }
.ShopBoardPage .boardCollectionView .header {
background-color: #fff; }
.ShopBoardPage .boardCollectionView .fixedHeader {
height: 64px;
left: 0;
margin-bottom: -64px;
overflow: hidden;
right: 0;
top: 64px;
z-index: 103; }
.ShopBoardPage .boardCollectionView .fixedHeader.canSeeFixedHeader {
position: fixed; }
.ShopBoardPage .boardCollectionView .fixedHeader.shadow {
background-color: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); }
.ShopBoardPage .boardCollectionView .titleBar {
margin: 20px auto;
position: relative; }
.ShopBoardPage .boardCollectionView .fixedHeaderNameAndImage {
-webkit-backface-visibility: hidden;
font-size: 21px;
font-weight: bold;
position: absolute;
top: -48px; }
.ShopBoardPage .boardCollectionView .fixedHeaderNameAndImage.showName {
-webkit-transform: translate(0, 48px);
transform: translate(0, 48px);
-webkit-transition-duration: .2s;
transition-duration: .2s; }
.ShopBoardPage .boardCollectionView .fixedHeaderNameAndImage.hideName {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition-duration: .2s;
transition-duration: .2s; }
.ShopBoardPage .boardCollectionView .boardInfo {
padding: 34px;
position: relative;
text-align: center; }
.ShopBoardPage .boardCollectionView .boardInfo .backToShop {
display: block;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.ShopBoardPage .boardCollectionView .boardInfo .backToShop .backToShopLink {
color: #b5b5b5;
cursor: pointer;
font-size: 14px;
font-weight: normal;
margin-left: 7px; }
.ShopBoardPage .boardCollectionView .boardInfo .backToShop em {
width: 10px;
height: 15px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -316px no-repeat;
cursor: pointer;
display: inline-block;
vertical-align: top; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ShopBoardPage .boardCollectionView .boardInfo .backToShop em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -418px 0;
background-size: 428px 427px; } }
.ShopBoardPage .boardCollectionView .boardInfo .name {
font-size: 33px; }
.ShopBoardPage .boardCollectionView .boardInfo .merchantDescription {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
margin-bottom: 0; }
.ShopCollectionHoverMask {
-webkit-animation: fadeIn .2s ease-out;
animation: fadeIn .2s ease-out;
display: none; }
.ShopCollectionHoverMask .mask.hover.link {
background-color: rgba(255, 255, 255, 0.9);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
left: 0;
top: 0; }
.ShopCollectionHoverMask .mask.hover.link.square {
height: 236px;
margin: 0;
position: absolute;
width: 236px; }
.ShopCollectionHoverMask .mask.hover.link.rectangle {
height: 236px;
margin: 0;
position: absolute;
width: 486px; }
.ShopCollectionHoverMask .images {
border-radius: 6px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 18px;
overflow: hidden;
width: 200px; }
.ShopCollectionHoverMask .thumbnailImage {
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
width: 99px; }
.ShopCollectionHoverMask .thumbnailImage.size0 {
height: 95px;
margin-bottom: 1px;
margin-right: 1px; }
.ShopCollectionHoverMask .thumbnailImage.size1 {
height: 103px;
margin-right: 1px;
margin-top: 1px; }
.ShopCollectionHoverMask .thumbnailImage.size1.appear {
-webkit-animation-delay: .05s;
animation-delay: .05s; }
.ShopCollectionHoverMask .thumbnailImage.size2 {
height: 110px;
margin-bottom: 1px;
margin-left: 1px; }
.ShopCollectionHoverMask .thumbnailImage.size2.appear {
-webkit-animation-delay: .03s;
animation-delay: .03s; }
.ShopCollectionHoverMask .thumbnailImage.size3 {
height: 88px;
margin-left: 1px;
margin-top: 1px; }
.ShopCollectionHoverMask .thumbnailImage.size3.appear {
-webkit-animation-delay: .1s;
animation-delay: .1s; }
.ShopCollectionHoverMask .thumbnailImage.appear {
-webkit-animation: appear .3s;
animation: appear .3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1; }
.ShopCollectionHoverMask .collectionInfo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 230px; }
.ShopCollectionHoverMask .collectionInfo .collectionTitle {
color: #555;
font-size: 14px;
font-weight: bold;
line-height: 30px; }
.ShopCollectionHoverMask .collectionInfo .collectionDescription {
color: #555;
font-size: 14px;
font-weight: 300;
line-height: 18px;
margin-bottom: 11px; }
.ShopCollectionHoverMask .collectionInfo .buyButton {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #0084ff;
border-radius: 4px;
color: #fff;
font-size: 14px;
margin-top: 11px;
padding: 8px 0;
text-align: center;
width: 97px; }
@-webkit-keyframes appear {
0% {
opacity: .1;
-webkit-transform: translateY(4px);
transform: translateY(4px); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
@keyframes appear {
0% {
opacity: .1;
-webkit-transform: translateY(4px);
transform: translateY(4px); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
.ShopCollectionsView {
background-color: #fff;
position: relative; }
.ShopCollectionsView .loadingMask {
height: 100vh;
width: 100%; }
.ShopCollectionsView .loadingSpinner {
background: url(https://s.pinimg.com/webapp/style/images/spinner-medium-1x-dbb1334f.gif) no-repeat;
background-size: contain;
height: 32px;
width: 32px;
display: inline-block;
opacity: .5;
display: block;
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ShopCollectionsView .loadingSpinner {
background-image: url(https://s.pinimg.com/webapp/style/images/spinner-medium-2x-3ffcb44b.gif); } }
.ShopCollectionsView .titleBox {
margin: 0 auto 43px;
padding-top: 43px;
text-align: center;
width: 485px; }
.ShopCollectionsView .titleBox .onPinterest {
color: #555;
font-size: 47px;
margin-bottom: 10px; }
.ShopCollectionsView .titleBox .subTitle {
color: #555;
font-size: 14px;
line-height: 20px; }
.ShopCollectionsView .shopGrid {
background-color: #fff;
margin: auto;
padding-bottom: 104px;
position: relative; }
.ShopCollectionsView .shopGrid.threeColumn {
width: 750px; }
.ShopCollectionsView .shopGrid.fourColumn {
width: 1000px; }
.ShopCollectionsView .shopGrid .topGrid {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.ShopCollectionsView .shopGrid .row {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.ShopCollectionsView .shopGrid .collection {
margin: 6px;
position: relative; }
.ShopCollectionsView .shopGrid .collection:hover label {
display: none; }
.ShopCollectionsView .shopGrid .collection .image {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 6px; }
.ShopCollectionsView .shopGrid .collection label {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
bottom: 12px;
color: #fff;
font-size: 24px;
left: 20px;
position: absolute;
width: 196px; }
.ShopCollectionsView .shopGrid .rectangle {
height: 236px;
width: 486px; }
.ShopCollectionsView .shopGrid .rectangle .image {
height: 236px;
width: 486px; }
.ShopCollectionsView .shopGrid .square {
height: 236px;
width: 236px; }
.ShopCollectionsView .shopGrid .square .image {
height: 236px;
width: 236px; }
.ShopCollectionsView .shopGrid .topShops {
border: 1px solid #efefef;
border-radius: 6px;
height: 482px;
margin: 6px;
width: 236px; }
.ShopCollectionsView .shopGrid .topShops h3 {
font-size: 14px;
margin: 12px 12px 15px; }
.ShopCollectionsView .shopGrid .topShops .topShop {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 38px;
margin: 10px 10px 0;
position: relative;
vertical-align: top; }
.ShopCollectionsView .shopGrid .topShops .topShop .shopTitle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font-size: 13px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 180px; }
.ShopCollectionsView .shopGrid .topShops .topShop .shopTitle:hover {
color: #bd081c; }
.ShopCollectionsView .shopGrid .topShops .topShop img {
border-radius: 100%;
margin-right: 10px;
width: 38px; }
.ShopGridItem {
background: #fff;
height: 316px;
overflow: hidden; }
@media (min-width: 360px) {
.ShopGridItem {
height: 316px; } }
@media (min-width: 800px) {
.ShopGridItem {
height: 326px; } }
@media (min-width: 1312px) {
.ShopGridItem {
height: 332px; } }
.ShopGridItem .productLinkWrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%; }
.ShopGridItem .productLinkWrapper:hover {
opacity: .9; }
.ShopGridItem .productName {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */ }
.ShopGridItem .productName .name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.ShopGridItem .productImagesWrapper {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1; }
.ShopGridItem .productCoverWrapper {
background-color: #fff;
border-radius: 8px 8px 0 0;
clear: both;
height: 111px;
overflow: hidden;
position: relative; }
.ShopGridItem .productCoverWrapper img {
position: absolute;
top: -50%;
width: 100%; }
.ShopGridItem .productThumbs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 111px;
margin-bottom: 0;
margin-top: 2px; }
.ShopGridItem .productThumbs li {
height: auto;
margin-left: 2px;
overflow: hidden;
width: auto; }
.ShopGridItem .productThumbs li .thumb {
height: auto;
width: auto; }
.ShopGridItem .productThumbs li:first-child {
border-bottom-left-radius: 8px;
margin-left: 0; }
.ShopGridItem .productThumbs li:nth-child(2) {
border-bottom-right-radius: 8px; }
.ShopGridItem .productThumbs li:nth-child(3) {
display: none; }
.ShopGridItem .productThumbs li::after {
display: none; }
.ShopGridItem .shopButton {
cursor: pointer;
text-align: center;
white-space: nowrap; }
.ShopSpace .comingSoon {
color: #555;
font-size: 30px;
margin: 30px auto;
width: 200px; }
.ShopSpace .morePins {
margin-top: 40px; }
.ShopSpace .relatedPinsAnnotationTitleWrapper {
height: 25px; }
.ShopSpace .relatedPinsAnnotationTitleWrapper .sectionTitle {
float: left;
font-size: 18px;
height: 25px;
margin: 0 8px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
visibility: visible; }
.VariantPicker .labelVariants {
display: -ms-inline-grid;
display: inline-grid;
padding: 16px 40px 0; }
.VariantPicker .swatchVariants {
padding: 16px 40px 0; }
.VariantPicker .swatchVariant {
border-radius: 50%;
box-shadow: 0 0 1px #ccc;
cursor: pointer;
display: inline-block;
height: 40px;
margin-bottom: 5px;
margin-right: 7px;
overflow: hidden;
position: relative;
width: 40px; }
.VariantPicker .swatchVariant.selected {
background-color: #fff;
border: 2px solid #0084ff;
height: 36px;
width: 36px; }
.VariantPicker .swatchVariant.selected .frame {
border: 2px solid #fff;
border-radius: 50%;
height: 32px;
left: 0;
position: absolute;
top: 0;
width: 32px;
z-index: 10; }
.VariantPicker .swatchVariant img {
border-radius: 50%;
box-sizing: border-box;
height: 40px;
left: 0;
position: absolute;
top: 0;
width: 40px; }
.VariantPicker .labelVariant {
color: #b5b5b5;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: bold;
line-height: 25px;
margin-right: 15px;
white-space: nowrap; }
.VariantPicker .labelVariant.selected {
border-bottom: 3px solid #0084ff;
color: #555;
margin-bottom: -3px; }
.VariantPickerModal {
width: 632px; }
.VariantPickerModal .product {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 49px auto 20px;
overflow: hidden;
width: 510px; }
.VariantPickerModal .price {
color: #0084ff;
font-size: 18px;
font-weight: bold;
line-height: 18px; }
.VariantPickerModal .productInfo {
padding-left: 25px;
width: 294px; }
.VariantPickerModal .productInfo .productTitle {
color: #5f5f5f;
font-size: 18px;
margin: 12px 0; }
.VariantPickerModal .productInfo .additionalInformation {
color: #5f5f5f;
font-size: 13px;
margin-top: 5px; }
.VariantPickerModal .productInfo .merchantLink {
padding: 0; }
.VariantPickerModal .productInfo .merchantLink .thumbImageWrapper {
height: 52px;
width: 52px; }
.VariantPickerModal .productInfo .merchantLink .thumbImageWrapper img {
height: 52px;
width: 52px; }
.VariantPickerModal .productInfo .merchantLink .thumbImageWrapper::after {
height: 52px;
width: 52px; }
.VariantPickerModal .productInfo .merchantLink .profileSourceAttributionContent {
margin-top: 7px;
width: 190px; }
.VariantPickerModal .productInfo .merchantLink .profileSourceAttributionContent .title {
font-size: 12px;
line-height: 20px; }
.VariantPickerModal .productInfo .merchantLink .profileSource {
outline: none; }
.VariantPickerModal .productImage img {
height: 236px;
max-width: 236px;
width: 236px; }
.VariantPickerModal .icon {
background-color: #555;
border-radius: 50%;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 20px;
height: 23px;
line-height: 20px;
margin: 5px;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
width: 23px; }
.VariantPickerModal .minusIcon {
margin-left: 0; }
.VariantPickerModal .quantity {
background-color: #efefef;
border: 1px solid #efefef;
border-radius: 4px;
font-size: 14px;
height: 30px;
text-align: center;
width: 45px; }
.VariantPickerModal .total {
margin: 0 57px 57px; }
.VariantPickerModal .total .quantityInput {
display: inline-block; }
.VariantPickerModal .total .price {
display: inline-block;
float: right;
padding: 8px; }
.VariantPickerModal .quantityTitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", sans-serif;
font-weight: bold;
color: #555;
font-size: 14px;
font-weight: bold;
margin: 10px 57px; }
.VariantPickerModal .buyButton {
display: inline-block;
float: right; }
.ConversationHead {
cursor: pointer;
-webkit-transition: opacity .3s ease, -webkit-filter .3s ease;
transition: opacity .3s ease, -webkit-filter .3s ease;
transition: filter .3s ease, opacity .3s ease;
transition: filter .3s ease, opacity .3s ease, -webkit-filter .3s ease;
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */ }
.ConversationHead.normal {
-webkit-transform: translateZ(0);
height: 59px;
width: 59px; }
.ConversationHead.normal .headWrapper {
overflow: hidden;
background: #fff;
border-radius: 50%;
display: inline-block;
height: 59px;
-webkit-mask-image: -webkit-radial-gradient(#fff, #000);
mask-image: radial-gradient(#fff, #000);
position: relative;
width: 59px; }
.ConversationHead.normal .headWrapper div.head {
font-size: 18px;
line-height: 59px; }
.ConversationHead.normal .headWrapper .noDrag {
bottom: 0;
left: 0;
right: 0;
top: 0;
position: absolute; }
.ConversationHead.normal .headWrapper.groupBoardWrapper {
border-radius: 4px; }
.ConversationHead.normal .halfWrapper {
position: absolute;
width: 59px; }
.ConversationHead.normal .halfWrapper .head {
font-size: 14.75px; }
.ConversationHead.normal .leftWrapper.halfWrapper {
clip: rect(0, 30px, 59px, 0);
left: -1px;
right: auto; }
.ConversationHead.normal .leftWrapper.halfWrapper div.head {
font-size: 24px;
line-height: 59px; }
.ConversationHead.normal .leftWrapper.halfWrapper img,
.ConversationHead.normal .leftWrapper.halfWrapper div.head {
font-size: 14.75px;
height: 59px;
left: -12px;
position: absolute;
top: 0;
width: 59px; }
.ConversationHead.normal .rightWrapper div.head {
font-size: 24px;
line-height: 59px; }
.ConversationHead.normal .rightWrapper.isWholeHalf {
clip: rect(0, 59px, 59px, 30px);
right: 0; }
.ConversationHead.normal .rightWrapper.isWholeHalf img,
.ConversationHead.normal .rightWrapper.isWholeHalf div.head {
font-size: 14.75px;
position: relative;
right: -12px; }
.ConversationHead.normal .rightWrapper.smallImage {
clip: rect(0, 30px, 30px, 0);
right: -1px;
width: 30px; }
.ConversationHead.normal .rightWrapper.smallImage div.head {
font-size: 9px;
line-height: 30px; }
.ConversationHead.normal .rightWrapper.smallImage.top {
top: -1px; }
.ConversationHead.normal .rightWrapper.smallImage.bottom {
bottom: -1px; }
.ConversationHead.normal .rightWrapper.smallImage.top div.head,
.ConversationHead.normal .rightWrapper.smallImage.bottom div.head {
font-size: 11.8px;
padding-left: 7px;
text-align: left; }
.ConversationHead.normal.opening .headWrapper {
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); }
.ConversationHead.small .headWrapper {
overflow: hidden;
background: #fff;
border-radius: 50%;
display: inline-block;
height: 33px;
-webkit-mask-image: -webkit-radial-gradient(#fff, #000);
mask-image: radial-gradient(#fff, #000);
position: relative;
width: 33px; }
.ConversationHead.small .headWrapper div.head {
font-size: 10px;
line-height: 33px; }
.ConversationHead.small .headWrapper .noDrag {
bottom: 0;
left: 0;
right: 0;
top: 0;
position: absolute; }
.ConversationHead.small .headWrapper.groupBoardWrapper {
border-radius: 4px; }
.ConversationHead.small .halfWrapper {
position: absolute;
width: 33px; }
.ConversationHead.small .halfWrapper .head {
font-size: 8.25px; }
.ConversationHead.small .leftWrapper.halfWrapper {
clip: rect(0, 17px, 33px, 0);
left: -1px;
right: auto; }
.ConversationHead.small .leftWrapper.halfWrapper div.head {
font-size: 13px;
line-height: 33px; }
.ConversationHead.small .leftWrapper.halfWrapper img,
.ConversationHead.small .leftWrapper.halfWrapper div.head {
font-size: 8.25px;
height: 33px;
left: -7px;
position: absolute;
top: 0;
width: 33px; }
.ConversationHead.small .rightWrapper div.head {
font-size: 13px;
line-height: 33px; }
.ConversationHead.small .rightWrapper.isWholeHalf {
clip: rect(0, 33px, 33px, 17px);
right: 0; }
.ConversationHead.small .rightWrapper.isWholeHalf img,
.ConversationHead.small .rightWrapper.isWholeHalf div.head {
font-size: 8.25px;
position: relative;
right: -7px; }
.ConversationHead.small .rightWrapper.smallImage {
clip: rect(0, 17px, 17px, 0);
right: -1px;
width: 17px; }
.ConversationHead.small .rightWrapper.smallImage div.head {
font-size: 5px;
line-height: 17px; }
.ConversationHead.small .rightWrapper.smallImage.top {
top: -1px; }
.ConversationHead.small .rightWrapper.smallImage.bottom {
bottom: -1px; }
.ConversationHead.small .rightWrapper.smallImage.top div.head,
.ConversationHead.small .rightWrapper.smallImage.bottom div.head {
font-size: 6.6px;
padding-left: 7px;
text-align: left; }
.ConversationHead.small .headWrapper div.head {
font-size: 11px; }
.ConversationHead.small .contentContainer {
height: 33px;
width: 33px; }
.ConversationHead.medium {
height: 50px;
width: 50px; }
.ConversationHead.medium .headWrapper {
overflow: hidden;
background: #fff;
border-radius: 50%;
display: inline-block;
height: 50px;
-webkit-mask-image: -webkit-radial-gradient(#fff, #000);
mask-image: radial-gradient(#fff, #000);
position: relative;
width: 50px; }
.ConversationHead.medium .headWrapper div.head {
font-size: 15px;
line-height: 50px; }
.ConversationHead.medium .headWrapper .noDrag {
bottom: 0;
left: 0;
right: 0;
top: 0;
position: absolute; }
.ConversationHead.medium .headWrapper.groupBoardWrapper {
border-radius: 4px; }
.ConversationHead.medium .halfWrapper {
position: absolute;
width: 50px; }
.ConversationHead.medium .halfWrapper .head {
font-size: 12.5px; }
.ConversationHead.medium .leftWrapper.halfWrapper {
clip: rect(0, 25px, 50px, 0);
left: -1px;
right: auto; }
.ConversationHead.medium .leftWrapper.halfWrapper div.head {
font-size: 20px;
line-height: 50px; }
.ConversationHead.medium .leftWrapper.halfWrapper img,
.ConversationHead.medium .leftWrapper.halfWrapper div.head {
font-size: 12.5px;
height: 50px;
left: -10px;
position: absolute;
top: 0;
width: 50px; }
.ConversationHead.medium .rightWrapper div.head {
font-size: 20px;
line-height: 50px; }
.ConversationHead.medium .rightWrapper.isWholeHalf {
clip: rect(0, 50px, 50px, 25px);
right: 0; }
.ConversationHead.medium .rightWrapper.isWholeHalf img,
.ConversationHead.medium .rightWrapper.isWholeHalf div.head {
font-size: 12.5px;
position: relative;
right: -10px; }
.ConversationHead.medium .rightWrapper.smallImage {
clip: rect(0, 25px, 25px, 0);
right: 0px;
width: 25px; }
.ConversationHead.medium .rightWrapper.smallImage div.head {
font-size: 8px;
line-height: 25px; }
.ConversationHead.medium .rightWrapper.smallImage.top {
top: -1px; }
.ConversationHead.medium .rightWrapper.smallImage.bottom {
bottom: 0px; }
.ConversationHead.medium .rightWrapper.smallImage.top div.head,
.ConversationHead.medium .rightWrapper.smallImage.bottom div.head {
font-size: 10px;
padding-left: 7px;
text-align: left; }
.ConversationHead.messageDraft {
height: 44px;
width: 44px; }
.ConversationHead.messageDraft .headWrapper {
overflow: hidden;
background: #fff;
border-radius: 50%;
display: inline-block;
height: 44px;
-webkit-mask-image: -webkit-radial-gradient(#fff, #000);
mask-image: radial-gradient(#fff, #000);
position: relative;
width: 44px; }
.ConversationHead.messageDraft .headWrapper div.head {
font-size: 13px;
line-height: 44px; }
.ConversationHead.messageDraft .headWrapper .noDrag {
bottom: 0;
left: 0;
right: 0;
top: 0;
position: absolute; }
.ConversationHead.messageDraft .headWrapper.groupBoardWrapper {
border-radius: 4px; }
.ConversationHead.messageDraft .halfWrapper {
position: absolute;
width: 44px; }
.ConversationHead.messageDraft .halfWrapper .head {
font-size: 11px; }
.ConversationHead.messageDraft .leftWrapper.halfWrapper {
clip: rect(0, 22px, 44px, 0);
left: -1px;
right: auto; }
.ConversationHead.messageDraft .leftWrapper.halfWrapper div.head {
font-size: 18px;
line-height: 44px; }
.ConversationHead.messageDraft .leftWrapper.halfWrapper img,
.ConversationHead.messageDraft .leftWrapper.halfWrapper div.head {
font-size: 11px;
height: 44px;
left: -9px;
position: absolute;
top: 0;
width: 44px; }
.ConversationHead.messageDraft .rightWrapper div.head {
font-size: 18px;
line-height: 44px; }
.ConversationHead.messageDraft .rightWrapper.isWholeHalf {
clip: rect(0, 44px, 44px, 22px);
right: 0; }
.ConversationHead.messageDraft .rightWrapper.isWholeHalf img,
.ConversationHead.messageDraft .rightWrapper.isWholeHalf div.head {
font-size: 11px;
position: relative;
right: -9px; }
.ConversationHead.messageDraft .rightWrapper.smallImage {
clip: rect(0, 22px, 22px, 0);
right: 0px;
width: 22px; }
.ConversationHead.messageDraft .rightWrapper.smallImage div.head {
font-size: 7px;
line-height: 22px; }
.ConversationHead.messageDraft .rightWrapper.smallImage.top {
top: -1px; }
.ConversationHead.messageDraft .rightWrapper.smallImage.bottom {
bottom: 0px; }
.ConversationHead.messageDraft .rightWrapper.smallImage.top div.head,
.ConversationHead.messageDraft .rightWrapper.smallImage.bottom div.head {
font-size: 8.8px;
padding-left: 7px;
text-align: left; }
.ConversationHead.messageDraft .headWrapper div.head {
font-size: 14.66667px; }
.ConversationHead:hover .conversationHeadClose {
visibility: visible; }
.ConversationHead.inactive {
filter: url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter: brightness(65%);
filter: brightness(65%);
opacity: .9; }
.ConversationHead.cloned {
position: absolute;
z-index: 999999999; }
.ConversationHead img {
width: 100%; }
.ConversationHead div.head {
background-color: #bd081c;
color: #fff;
display: inline-block;
height: 100%;
text-align: center;
width: 100%; }
.ConversationHead .head.email {
background-color: #999; }
.ConversationHead .contentContainer {
position: relative; }
.ConversationHead a {
padding: 0 !important; }
.ConversationHead .badge {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #bd081c;
border-radius: 20px;
color: #fff;
font-size: 10px;
font-weight: bold;
height: 16px;
line-height: 11px;
padding: 1px 5px 2px;
position: absolute;
right: -1px;
top: 0; }
.ConversationHead .badge span {
color: #fff; }
.ConversationHead .nameText {
color: #999;
margin-top: 3px;
text-align: center; }
.ConversationHead .conversationHeadClose {
left: -1px;
position: absolute;
top: -2px;
visibility: hidden;
z-index: 701; }
.ConversationHead.touch .conversationHeadClose {
visibility: visible; }
.ConversationListItem {
overflow: hidden;
color: #666;
cursor: pointer;
height: 35px;
padding: 10px;
position: relative; }
.ConversationListItem.hasTimestamp {
height: 50px; }
.ConversationListItem .left {
float: left;
margin-right: 10px; }
.ConversationListItem .left .ConversationHead {
-webkit-transform: translateZ(0);
margin-top: 1px; }
.ConversationListItem.animatingOut {
-webkit-animation: conversationListItemSlideOut .2s ease-in-out;
animation: conversationListItemSlideOut .2s ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out; }
.ConversationListItem.animatingOut.animatedOut {
border: 0;
height: 0;
padding: 0; }
.ConversationListItem.hideable:hover .hideableButton {
display: block;
position: absolute;
right: 8px;
top: 5px; }
.ConversationListItem.hideable:hover .hideableButton:hover .buttonText {
color: #666; }
.ConversationListItem.hideable:hover .unreadMark {
display: none; }
.ConversationListItem .hideableButton {
color: #999;
display: none;
float: right;
margin: 1px 0 0 3px;
position: relative;
top: -5px; }
.ConversationListItem .hideableButton .buttonText {
font-size: 18px;
font-weight: bold; }
.ConversationListItem .timeStamp {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #acacac;
font-size: 11px;
font-weight: bold;
margin: 2px 0 3px 3px; }
.ConversationListItem .title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #666;
margin-bottom: 2px; }
.ConversationListItem .title a {
display: inline;
line-height: 12px;
padding: 0; }
.ConversationListItem .title a:hover {
color: #bd081c; }
.ConversationListItem.showingLastMessageObjectPreview .title {
max-width: 180px; }
.ConversationListItem.showingLastMessageObjectPreview:hover .title {
max-width: 129px; }
.ConversationListItem.showingLastMessageObjectPreview .subtitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px; }
.ConversationListItem.hasSelectedStateAvailable .title {
max-width: 205px; }
.ConversationListItem .lastObjectSent {
position: relative;
overflow: hidden;
border-radius: 3px;
position: absolute;
right: 10px;
-webkit-transition: -webkit-transform .1s ease-in-out;
transition: -webkit-transform .1s ease-in-out;
transition: transform .1s ease-in-out;
transition: transform .1s ease-in-out, -webkit-transform .1s ease-in-out; }
.ConversationListItem .lastObjectSent::after {
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 51;
left: 0;
position: absolute;
top: 0;
width: 51; }
.ConversationListItem .lastObjectSent .lastMessageSentImage {
border-radius: 3px;
height: 51;
width: 51; }
.ConversationListItem.active .selectedState {
width: 34px;
height: 34px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -74px no-repeat;
border: 0;
border-radius: 0; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ConversationListItem.active .selectedState {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -342px -72px;
background-size: 428px 427px; } }
.ConversationListItem .titleSubtitleWrapper {
float: left;
margin-top: 1px; }
.ConversationListItem .selectedState {
background: #fff;
border: 1px solid #eee;
border-radius: 50px;
float: right;
height: 34px;
width: 34px; }
.ConversationListItem.hideSubtitle {
padding-bottom: 6px;
padding-top: 6px; }
.ConversationListItem.hideSubtitle .title {
margin-top: 7px; }
.ConversationListItem .subtitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #666;
line-height: 14px;
margin: 0 0 2px; }
.ConversationListItem .subtitle.sentObject {
font-style: italic; }
.ConversationListItem:hover {
background-color: #eeeeee; }
.ConversationListItem:hover .lastObjectSent {
-webkit-transform: translateX(-20px) translateZ(0);
transform: translateX(-20px) translateZ(0); }
.ConversationListItem.unread .title,
.ConversationListItem.unread .title a,
.ConversationListItem.unread .subtitle {
color: #333; }
.ConversationListItem .comma {
margin-left: -3px; }
.ConversationListItem.collabGroupBoardView {
background: #fff;
/* TODO: better specificity once exp gating taken out */ }
.ConversationListItem.collabGroupBoardView.unread {
background: #fff;
/* TODO: better specificity once exp gating taken out */ }
.ConversationListItem.collabGroupBoardView.unread .lastMessageContent .subtitle {
color: #555;
font-weight: bold; }
.ConversationListItem.collabGroupBoardView.unread .timeStamp {
color: #555;
font-weight: bold; }
.ConversationListItem.collabGroupBoardView .title a,
.ConversationListItem.collabGroupBoardView .title a:hover {
color: #555;
font-size: 14px; }
.ConversationListItem.collabGroupBoardView .lastMessageContent .subtitle {
color: #b5b5b5;
font-weight: normal; }
.ConversationListItem.collabGroupBoardView .timeStamp {
color: #b5b5b5;
font-weight: normal; }
.ConversationListItem.collabGroupBoardView:hover {
background: #f1f1f1; }
.ConversationListItem .unreadMark {
background: #bd081c;
border-radius: 50%;
height: 5px;
position: absolute;
right: 15px;
top: 15px;
width: 5px; }
.EmptyConversations {
background: #fff; }
.EmptyConversations .intro {
color: #999;
font-size: 13px;
margin: 20px auto 24px;
text-align: center;
width: 210px; }
.EmptyConversations .intro strong {
color: #666;
letter-spacing: .1px;
line-height: 20px; }
.EmptyConversations .icon {
background: url(https://s.pinimg.com/webapp/style/images/messages-blank-combined-1x-546e543f.png) no-repeat;
background-size: contain;
height: 238px;
width: 280px;
margin: 30px auto 0; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.EmptyConversations .icon {
background-image: url(https://s.pinimg.com/webapp/style/images/messages-blank-combined-2x-18885d27.png); } }
.EmptyConversations .headsContainer {
margin-left: auto;
margin-right: auto;
padding: 25px;
width: 225px; }
.EmptyConversations .headsContainer::after {
clear: both;
content: "";
display: table; }
.EmptyConversations .headsContainer .ConversationHead {
float: left;
margin-right: 24px; }
.EmptyConversations .headsContainer .ConversationHead:last-child {
margin-right: 0; }
.CardSourceAttribution {
padding: 0 8px 16px; }
.CardSourceAttribution .attributionLink {
display: inline-block; }
.CardSourceAttribution .attributionLink h4 {
color: #444;
font-size: 14px; }
.CardSourceAttribution .attributionLink h4.title {
font-weight: normal;
height: 18px; }
.CardSourceDescriptionText .descriptionSection {
margin: 0;
padding: 0 8px 16px;
width: 470px; }
.CloseupMakeCard {
margin-bottom: 40px;
min-height: 246px;
position: relative; }
.CloseupMakeCard .hero {
position: relative; }
.CloseupMakeCard .hero::after {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
background: rgba(0, 0, 0, 0.02);
content: "";
display: block; }
.CloseupMakeCard .hoverMask {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background 0.04s linear;
transition: background 0.04s linear;
border-radius: 8px;
box-shadow: none;
z-index: 100; }
.CloseupMakeCard .images:hover .hoverMask {
background: rgba(0, 0, 0, 0.6); }
.CloseupMakeCard .images:active .hoverMask {
background: rgba(0, 0, 0, 0.6); }
.CloseupMakeCard .hoverMask {
background: transparent; }
.CloseupMakeCard .hoverMask .moreText {
color: #fff;
display: none;
font-size: 18px;
font-weight: bold;
margin-top: 82px;
text-align: center; }
.CloseupMakeCard .hoverMask:hover {
background: rgba(0, 0, 0, 0.6);
cursor: pointer; }
.CloseupMakeCard .hoverMask:hover .moreText {
display: block; }
.CloseupMakeCard h1 {
font-size: 24px;
margin: 16px 8px; }
.CloseupMakeCard h1.mainHeader:not(.displayed) {
-webkit-animation: fadeOutAndHide 0.1s cubic-bezier(0.21, 0, 0.21, 1) forwards;
animation: fadeOutAndHide 0.1s cubic-bezier(0.21, 0, 0.21, 1) forwards;
display: none; }
.CloseupMakeCard h1.mainHeader .stats {
color: #b5b5b5;
display: inline-block;
float: right;
font-size: 12px;
font-weight: normal;
margin-top: 14px; }
.CloseupMakeCard.amplified {
min-height: 276px; }
.CloseupMakeCard .amplifiedExpandedHeader {
display: none; }
.CloseupMakeCard .amplifiedExpandedHeader.displayed {
-webkit-animation: fadeIn 0.4s cubic-bezier(0.31, 0, 0.31, 1) forwards;
animation: fadeIn 0.4s cubic-bezier(0.31, 0, 0.31, 1) forwards;
display: block; }
.CloseupMakeCard .amplifiedExpandedHeader .amplifiedHeaderText {
display: inline-block; }
.CloseupMakeCard .amplifiedExpandedHeader .amplifiedHeaderText h1 {
margin-bottom: 0;
max-width: 454px; }
.CloseupMakeCard .amplifiedExpandedHeader .amplifiedHeaderText .attribution {
margin-bottom: 24px;
margin-top: 8px; }
.CloseupMakeCard .amplifiedExpandedHeader .thumb {
float: right;
margin-top: 16px; }
.CloseupMakeCard .attribution {
font-size: 14px;
margin: 16px 8px; }
.CloseupMakeCard .attribution a {
color: #444;
font-weight: normal; }
.CloseupMakeCard .hero {
border-left: 2px solid #fff;
width: 100%; }
.CloseupMakeCard .hero img {
height: 200px;
-o-object-fit: cover;
object-fit: cover;
width: 100%; }
.CloseupMakeCard .collapsed {
position: absolute; }
.CloseupMakeCard .collapsed .images {
border-radius: 8px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow: hidden;
position: relative;
width: 100%; }
.CloseupMakeCard .collapsed:not(.displayed) {
-webkit-animation: fadeOutAndHide 0.1s cubic-bezier(0.21, 0, 0.21, 1) forwards;
animation: fadeOutAndHide 0.1s cubic-bezier(0.21, 0, 0.21, 1) forwards; }
.CloseupMakeCard .expanded {
clear: both;
display: none; }
.CloseupMakeCard .expanded.displayed {
-webkit-animation: fadeIn 0.4s cubic-bezier(0.31, 0, 0.31, 1) forwards;
animation: fadeIn 0.4s cubic-bezier(0.31, 0, 0.31, 1) forwards;
display: block; }
.CloseupMakeCard .expanded p, .CloseupMakeCard .expanded h2, .CloseupMakeCard .expanded h3, .CloseupMakeCard .expanded ul, .CloseupMakeCard .expanded .thumb {
margin: 0 8px; }
.CloseupMakeCard .expanded h2 {
font-size: 18px;
line-height: 24pt;
margin-top: 32px; }
.CloseupMakeCard .expanded h3 {
color: #b5b5b5;
font-size: 12px;
font-weight: normal;
line-height: 15pt; }
.CloseupMakeCard .expanded p {
font-size: 18px;
letter-spacing: -.23px;
max-width: 454px; }
.CloseupMakeCard .expanded .hero {
margin-top: 32px; }
.CloseupMakeCard .expanded .suppliesList {
border-spacing: 0 4px;
font-size: 16px;
line-height: 24px;
margin: 16px 8px 64px; }
.CloseupMakeCard .expanded .suppliesList .amount {
color: #555;
font-weight: bold; }
.CloseupMakeCard .expanded .suppliesList .amount .amountBlock {
display: inline-block;
padding-right: 16px;
width: 54px; }
.CloseupMakeCard .expanded .suppliesList td {
padding-bottom: 4px;
vertical-align: top; }
.CloseupMakeCard .expanded img {
border-radius: 8px;
width: 564px; }
.CloseupMakeCard .expanded .instructions .instruction {
display: inline-block; }
.CloseupMakeCard .expanded .instructions .instruction .overlayMask {
position: relative; }
.CloseupMakeCard .expanded .instructions .instruction .overlayMask::after {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
background: rgba(0, 0, 0, 0.02);
content: "";
display: block;
border-radius: 8px; }
.CloseupMakeCard .expanded .instructions .instruction h2 {
margin-top: 0; }
.CloseupMakeCard .expanded .instructions .instruction .stepNumber {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: rgba(0, 0, 0, 0.75);
border-radius: 50%;
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 18px;
font-weight: bold;
height: 40px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 40px;
margin: 16px 8px; }
.CloseupMakeCard .expanded .instructions .instruction .overlayMask {
margin-bottom: 16px; }
.CloseupMakeCard .expanded .instructions .instruction:not(:last-of-type) p {
margin: 0 8px 64px; }
.CloseupMakeCard .expanded .instructions .instruction:last-of-type p {
margin: 0 8px 16px; }
.CloseupSourceDescription {
color: #444;
padding: 0 32px; }
.CloseupSourceDescription .hr.cardDivider {
margin: 0; }
.CloseupSourceDescription .richPinInformation {
overflow: hidden;
/* need to consult with design on proper width */
/* this is also random */
clear: both;
font-size: 18px;
position: relative;
/* side padding because the map module should not have any side padding */
/* amplified layout */
/* recipe */
/* description sections, for any rich pin types */ }
.CloseupSourceDescription .richPinInformation .sourceAttribution {
padding: 16px 8px 0; }
.CloseupSourceDescription .richPinInformation .richPinArticleSummary,
.CloseupSourceDescription .richPinInformation .recipesIngredientsHeader,
.CloseupSourceDescription .richPinInformation .pinDescriptionListTotal,
.CloseupSourceDescription .richPinInformation .richPinPhotoAttribution {
padding: 0 8px 16px; }
.CloseupSourceDescription .richPinInformation .richPinArticleSummary {
font-size: 18px;
line-height: 20px;
width: 470px; }
.CloseupSourceDescription .richPinInformation .richPinArticleAttribution, .CloseupSourceDescription .richPinInformation .richPinPhotoAttribution {
font-size: 15px;
padding: 0 0 16px 8px; }
.CloseupSourceDescription .richPinInformation .richPinArticleAttribution {
float: left;
width: 192px; }
.CloseupSourceDescription .richPinInformation .richPinArticleAttribution .richPinArticleAuthor {
font-weight: bold; }
.inAOPromptsGroup .CloseupSourceDescription .richPinInformation .richPinArticleAttribution {
display: none; }
.CloseupSourceDescription .richPinInformation.noRichData .richPinPhotoAttribution {
padding-top: 0; }
.CloseupSourceDescription .richPinInformation .richPinPhotoAttribution {
clear: both;
float: none; }
.CloseupSourceDescription .richPinInformation .richPinPhotoAttribution.inArticle {
clear: right;
float: left;
width: 298px; }
.CloseupSourceDescription .richPinInformation .richPinPhotoAttribution a, .CloseupSourceDescription .richPinInformation .richPinPhotoAttribution a:hover {
color: inherit;
font-weight: bold; }
.CloseupSourceDescription .richPinInformation .recipeIngredientSection {
padding-bottom: 10px; }
.CloseupSourceDescription .richPinInformation .recipeIngredientSection:last-child {
padding-bottom: 0; }
.CloseupSourceDescription .richPinInformation .hr + .recipesIngredientsHeader,
.CloseupSourceDescription .richPinInformation .hr + .pinDescriptionListTotal {
padding-top: 16px; }
.CloseupSourceDescription .richPinInformation .recipesIngredientsHeader {
padding-bottom: 20px; }
.CloseupSourceDescription .richPinInformation .recipesIngredientsHeader .ingredientsTitle {
font-size: 21px; }
.CloseupSourceDescription .richPinInformation .recipesIngredientsHeader .recipeDiet {
color: #b5b5b5;
font-size: 14px;
margin: 5px 0; }
.CloseupSourceDescription .richPinInformation .pinDescriptionListTotal {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.CloseupSourceDescription .richPinInformation .pinDescriptionListTotal .pinDescriptionListSection {
padding-right: 30px;
width: 250px; }
.CloseupSourceDescription .richPinInformation .pinDescriptionListTotal .pinDescriptionListSection .pinDescriptionItemHeading, .CloseupSourceDescription .richPinInformation .pinDescriptionListTotal .pinDescriptionListSection .pinDescriptionItemName {
font-size: 16px;
padding-bottom: 5px; }
.CloseupSourceDescription .richPinInformation .pinDescriptionListTotal .pinDescriptionListSection .pinDescriptionItemName {
display: block;
-webkit-box-pack: inherit;
-ms-flex-pack: inherit;
justify-content: inherit; }
.CloseupTitleCard {
color: #444;
font-weight: bold; }
.CloseupTitleCard .richPinInformation {
padding: 0 40px 16px;
padding-top: 0;
width: 470px;
/* 80% of closeup width */ }
.CloseupTitleCard a {
color: #444; }
.CloseupTitleCard a:hover, .CloseupTitleCard a:active {
color: #444; }
.CloseupTitleCard .richPinSourceWrapper {
font-size: 14px;
padding-bottom: 4px; }
.CloseupTitleCard .richPinTitle,
.CloseupTitleCard .richPinSecondTitleWrapper {
font-size: 30px;
line-height: 30px; }
.CloseupTitleCard .outOfStock {
color: #b9b9b9;
font-size: 14px;
font-weight: normal;
margin-left: -3px; }
.MessageDraft {
padding: 20px; }
.MessageDraft .messageForm {
font-size: 18px;
font-weight: bold; }
.MessageDraft .selectedUser {
padding-bottom: 10px;
position: relative; }
.MessageDraft .headIcon {
float: left;
margin-right: 12px; }
.MessageDraft .userInfo {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
float: left; }
.MessageDraft .userInfo .displayName {
color: #555;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis; }
.MessageDraft .cancel {
cursor: pointer;
display: none;
margin-top: -17px;
position: absolute;
right: 0;
top: 50%; }
.MessageDraft .cancel em {
width: 17px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -358px -342px no-repeat;
float: left; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MessageDraft .cancel em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -88px -375px;
background-size: 428px 427px; } }
.MessageDraft .selectedUser:hover .cancel {
display: inline-block; }
.MessageDraft .messageField {
background: #eee;
border-bottom: 0;
border-radius: 3px;
height: 4.25em;
margin-bottom: 8px;
resize: none; }
.MessageDraft .messageField:focus {
outline: 1px solid #eee !important; }
.MessageDraft.sendShare .selectedUser {
height: 32px; }
.MessageDraft.sendShare .userInfo {
/* TODO(rshih): Look into how to avoid setting an explicit width here. */
width: 200px; }
.MessageDraft.sendShare .userInfo .displayName {
color: #666;
display: table-cell;
font-size: 13px;
height: 32px;
vertical-align: middle; }
.MessageDraft.sendShare .messageField {
width: 260px; }
.MessageDraft.sendShareBrio .selectedUser {
height: 44px; }
.MessageDraft.sendShareBrio .userInfo {
/* TODO(rshih): Look into how to avoid setting an explicit width here. */
width: 230px; }
.MessageDraft.sendShareBrio .userInfo .displayName {
color: #555;
display: table-cell;
font-size: 18px;
height: 44px;
vertical-align: middle; }
.MessageDraft.sendShareBrio .messageField {
width: 290px; }
.SendInvitationEmail .sendInvitationEmail {
cursor: pointer; }
.SendInvitationEmail .sendInvitationEmail a {
border-bottom: 1px solid #ccc;
display: block;
padding: 10px; }
.SendInvitationEmail .sendInvitationEmail a.unclickable {
cursor: default; }
.SendInvitationEmail .sendInvitationEmail a:hover {
background-color: #eeeeee; }
.SendInvitationEmail .sendInvitationEmail p {
margin: 0; }
.SendInvitationEmail .sendInvitationEmail .leftBlock {
float: left;
margin-right: 10px; }
.SendInvitationEmail .sendInvitationEmail .leftBlock .icon {
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif;
background-color: #999;
border-radius: 50%;
color: #fff;
font-size: 20px;
font-weight: bold;
height: 33px;
line-height: 33px;
margin-top: 1px;
text-align: center;
width: 33px; }
.SendInvitationEmail .sendInvitationEmail .leftBlock .icon.typingEmail em {
width: 33px;
height: 33px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -146px no-repeat;
display: block; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SendInvitationEmail .sendInvitationEmail .leftBlock .icon.typingEmail em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -342px -142px;
background-size: 428px 427px; } }
.SendInvitationEmail .sendInvitationEmail .title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
font-weight: bold;
margin: 1px 0; }
.SendInvitationEmail .sendInvitationEmail .subtitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #b7b7b7;
font-weight: normal;
margin: 2px 0 0; }
.SendObjectBase {
overflow-y: hidden;
background-color: #fff;
border-radius: 3px;
overflow: hidden;
position: relative;
width: 320px;
z-index: 1; }
.SendObjectBase.fullWidth {
width: 100%; }
.isEmpty .SendObjectBase .ConversationsList {
overflow: visible; }
.SendObjectBase .convosTitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
font-size: 16px;
font-weight: 500;
height: 1em;
margin-top: -.5em;
max-width: 285px;
padding-left: 4px;
position: absolute;
top: 50%; }
.SendObjectBase input {
background: #f8f8f8;
border: 0;
border-bottom: 1px solid #ddd;
border-radius: 0;
box-shadow: none;
display: block;
font-size: 13px;
margin-top: 0;
padding: 10px;
width: 100%; }
.SendObjectBase input:focus {
background: #fff;
box-shadow: none; }
.SendObjectBase .searchBox {
border-top-left-radius: 0;
border-top-right-radius: 0;
overflow-y: auto;
width: 100%; }
.SendObjectBase .searchBox input {
border-bottom: 1px solid #ddd; }
.SendObjectBase .spinner {
background: url(https://s.pinimg.com/webapp/style/images/spinner-small-1x-b897d25e.gif) no-repeat;
background-size: contain;
height: 16px;
width: 16px;
display: inline-block;
opacity: .5;
display: none;
right: 10px;
top: 64px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SendObjectBase .spinner {
background-image: url(https://s.pinimg.com/webapp/style/images/spinner-small-2x-dbb1334f.gif); } }
.SendObjectBase .spinner.visible {
display: block;
position: absolute; }
.SendObjectBase .Typeahead {
-webkit-animation: none;
animation: none;
box-shadow: none;
height: 288px; }
.SendObjectBase .ConversationsList {
background-color: #fff;
height: 288px;
overflow-y: auto; }
.SendObjectBase .title {
font-size: 13px;
font-weight: 700; }
.SendObjectBase.sendShare, .SendObjectBase.sendShareBrio {
/* TODO(kathy): short term first for now, but this breaks encapsulation */ }
.SendObjectBase.sendShare .sendShareSearchContacts.fixedHeight, .SendObjectBase.sendShareBrio .sendShareSearchContacts.fixedHeight {
height: 337px; }
.SendObjectBase.sendShare.compact .spinner, .SendObjectBase.sendShareBrio.compact .spinner {
top: 13px; }
.SendObjectBase.sendShare .spinner, .SendObjectBase.sendShareBrio .spinner {
position: absolute;
top: 23px; }
.SendObjectBase.sendShare.flex, .SendObjectBase.sendShareBrio.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.SendObjectBase.sendShare.flex .sendShareSearch, .SendObjectBase.sendShareBrio.flex .sendShareSearch {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.SendObjectBase.sendShare .ContactsList,
.SendObjectBase.sendShare .Typeahead, .SendObjectBase.sendShareBrio .ContactsList,
.SendObjectBase.sendShareBrio .Typeahead {
height: 275px;
overflow-x: hidden;
overflow-y: scroll; }
.SendObjectBase.sendShare .bottomFade, .SendObjectBase.sendShareBrio .bottomFade {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: white;
background-color: rgba(255, 255, 255, 0.5);
background: -webkit-linear-gradient(rgba(255, 255, 255, 0), white);
background: linear-gradient(rgba(255, 255, 255, 0), white);
bottom: 84px;
height: 30px;
position: absolute;
width: 100%; }
.SendObjectBase.sendShare .SocialTypeaheadField, .SendObjectBase.sendShareBrio .SocialTypeaheadField {
-ms-flex-negative: 1;
flex-shrink: 1; }
.SendObjectBase.sendShare .MessageDraft, .SendObjectBase.sendShareBrio .MessageDraft {
display: none; }
.SendObjectBase.sendShare .spinner {
right: 20px; }
.SendObjectBase.sendShareBrio {
width: 350px; }
.SendObjectBase.sendShareBrio .spinner {
right: 30px; }
.SendObjectBase.sendSocial {
width: 240px; }
.SendObjectBase .repinShareUpsellFixedHeight .ContactsList {
height: 205px; }
.SendObjectBase.flippedSharing {
box-shadow: 5px 5px 40px -10px; }
.SendObjectBase.flippedSharing .sendShare h4 {
font-size: 18px !important; }
.SendObjectBase.flippedSharing .sendShare .imageBlockContentBody {
display: none; }
.SendObjectBase.flippedSharing.sendShare .ContactsList,
.SendObjectBase.flippedSharing.sendShare .Typeahead, .SendObjectBase.flippedSharing.sendShareBrio .ContactsList,
.SendObjectBase.flippedSharing.sendShareBrio .Typeahead {
height: 275px; }
.SendObjectBase.flippedSharing.sendShare .sendShareSearchContacts.fixedHeight, .SendObjectBase.flippedSharing.sendShareBrio .sendShareSearchContacts.fixedHeight {
height: 384px; }
.SendObjectBase.flippedSharing.sendShare .sendShareSearchContacts .searchIconInputWrapper, .SendObjectBase.flippedSharing.sendShareBrio .sendShareSearchContacts .searchIconInputWrapper {
border-bottom: 0;
padding: 0 20px 10px; }
.SendObjectBase.flippedSharing.sendShare .sendShareSearchContacts .Typeahead.userCircleAvatar, .SendObjectBase.flippedSharing.sendShareBrio .sendShareSearchContacts .Typeahead.userCircleAvatar {
padding-left: 20px; }
.SendObjectBase.flippedSharing.sendShare .sendShareSearchContacts .Typeahead.userCircleSelect li, .SendObjectBase.flippedSharing.sendShareBrio .sendShareSearchContacts .Typeahead.userCircleSelect li {
border: 0; }
.SendObjectBase.flippedSharing.sendShare .sendShareSearchContacts .Typeahead.userCircleSelect li a, .SendObjectBase.flippedSharing.sendShareBrio .sendShareSearchContacts .Typeahead.userCircleSelect li a {
padding: 10px 20px; }
.SendPin .shareUpsell {
color: #5f5f5f;
-ms-flex-negative: 0;
flex-shrink: 0;
font-size: 18px;
padding: 15px 20px 5px; }
.SharePinBar {
background-color: #eee;
border-radius: 0 0 6px 6px;
padding: 15px 20px; }
.SharePinBar .sharePrompt {
color: #555;
font-size: 14px;
line-height: 16px;
padding-bottom: 8px; }
.SharePinBar .shareOptions .option {
float: left;
margin-right: 8px; }
.SharePinBar .shareOptions .facebook {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -284px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SharePinBar .shareOptions .facebook {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -33px -342px;
background-size: 428px 427px; } }
.SharePinBar .shareOptions .twitter {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -68px -384px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SharePinBar .shareOptions .twitter {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -342px -276px;
background-size: 428px 427px; } }
.SharePinBar .shareOptions .fbMessenger {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -318px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SharePinBar .shareOptions .fbMessenger {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -66px -342px;
background-size: 428px 427px; } }
.SharePinBar .shareOptions .link {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -216px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SharePinBar .shareOptions .link {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -342px -210px;
background-size: 428px 427px; } }
.SharePinBar .linkWrapper {
display: none; }
.SharePinBar .linkWrapper .link {
display: table;
height: 32px;
position: relative;
width: 100%; }
.SharePinBar .linkWrapper .link .icon {
width: 17px;
height: 17px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -301px -342px no-repeat;
left: 10px;
position: absolute;
top: 8px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SharePinBar .linkWrapper .link .icon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -52px -375px;
background-size: 428px 427px; } }
.SharePinBar .linkWrapper .link .linkField {
background: #fff;
border-radius: 3px;
display: table-cell;
height: 32px;
outline: none;
padding: 5px 10px 5px 35px; }
.SharePinBar .linkWrapper .link .cancelLink {
display: table-cell;
padding-left: 10px;
vertical-align: middle;
width: 17px; }
.SharePinBar .linkWrapper .link .cancelLink .cancelIcon {
width: 17px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -358px -342px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SharePinBar .linkWrapper .link .cancelLink .cancelIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -88px -375px;
background-size: 428px 427px; } }
.flippedSharing .SharePinBar {
background-color: transparent;
border-bottom: 1px solid #ddd;
border-radius: 0;
padding: 12px; }
.flippedSharing .SharePinBar .linkWrapper .link {
height: 44px; }
.flippedSharing .SharePinBar .linkWrapper .link .linkField {
background: #efefef; }
.flippedSharing .SharePinBar .linkWrapper .link .cancelLink {
vertical-align: inherit; }
.flippedSharing .SharePinBar .sharePrompt {
padding-bottom: 16px; }
.SocialConnectPanel {
border-radius: 3px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow-y: auto; }
.SocialConnectPanel .backNav {
cursor: pointer;
padding: 20px 20px 0; }
.SocialConnectPanel .backNav .icon {
width: 10px;
height: 15px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -316px no-repeat;
float: left; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SocialConnectPanel .backNav .icon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -418px 0;
background-size: 428px 427px; } }
.SocialConnectPanel .backNav .label {
color: #555;
font-size: 14px;
margin-left: 10px; }
.SocialConnectPanel .prompt {
color: #555;
font-size: 18px;
font-weight: bold;
padding: 20px; }
.SocialConnectPanel .socialConnectOptions {
overflow-y: auto; }
.SocialConnectPanel .socialConnectOptions .socialConnectWrapper .socialConnect .left {
float: left; }
.SocialConnectPanel .socialConnectOptions .socialConnectWrapper .socialConnect .left .icon em {
display: block; }
.SocialConnectPanel .socialConnectOptions li {
overflow: hidden;
color: #777;
display: block;
font-size: 12px;
position: relative; }
.SocialConnectPanel .socialConnectOptions li:first-child {
padding-top: 5px; }
.SocialConnectPanel .socialConnectOptions li:last-child {
padding-bottom: 5px; }
.SocialConnectPanel .socialConnectOptions li a {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", sans-serif;
font-weight: bold;
color: #777;
cursor: pointer;
display: block;
padding: 9px 14px; }
.SocialConnectPanel .socialConnectOptions li a:hover {
background: #f1f1f1;
color: #333; }
.SocialConnectPanel .socialConnectOptions li a:active {
background: #eaeaea; }
.SocialConnectPanel .socialConnectOptions li a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.SocialConnectPanel .socialConnectOptions li.highlighted a {
background-color: #eeeeee;
color: #333; }
.SocialConnectPanel .socialConnectOptions li:first-child {
padding-top: 0; }
.SocialConnectPanel .socialConnectOptions li:last-child {
border-bottom: 0;
padding-bottom: 0; }
.SocialConnectPanel .socialConnectOptions li:hover .remove {
display: inline; }
.SocialConnectPanel.sendShare.compact .prompt {
font-size: 15.5px; }
.SocialConnectPanel.sendShare.compact .socialConnectOptions > li > a {
padding: 4px 10px; }
.SocialConnectPanel.sendShare .socialConnectOptions {
border-top: 1px solid #eee; }
.SocialConnectPanel.sendShare .socialConnectOptions .socialConnectWrapper .socialConnect .left {
margin-right: 10px; }
.SocialConnectPanel.sendShare .socialConnectOptions .socialConnectWrapper .socialConnect .left .icon {
height: 32px;
width: 32px; }
.SocialConnectPanel.sendShare .socialConnectOptions .socialConnectWrapper .socialConnect .right {
display: table-cell;
float: none;
height: 32px;
vertical-align: middle; }
.SocialConnectPanel.sendShare .socialConnectOptions .socialConnectWrapper .socialConnect .right .title {
color: #666;
font-size: 13px; }
.SocialConnectPanel.sendShare .socialConnectOptions .socialConnectWrapper .socialConnect .right .subtitle {
color: #666;
font-size: 12px;
font-weight: normal; }
.SocialConnectPanel.sendShare .socialConnectOptions li {
border-bottom: 1px solid #eee; }
.SocialConnectPanel.sendShare .socialConnectOptions li a {
padding: 10px; }
.SocialConnectPanel.sendShare .socialConnectOptions li.socialConnectFacebook em {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -284px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SocialConnectPanel.sendShare .socialConnectOptions li.socialConnectFacebook em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -33px -342px;
background-size: 428px 427px; } }
.SocialConnectPanel.sendShare .socialConnectOptions li.socialConnectGplus em {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -102px -384px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SocialConnectPanel.sendShare .socialConnectOptions li.socialConnectGplus em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -252px -201px;
background-size: 428px 427px; } }
.SocialConnectPanel.sendShare .socialConnectOptions li.socialConnectTwitter em {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -68px -384px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SocialConnectPanel.sendShare .socialConnectOptions li.socialConnectTwitter em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -342px -276px;
background-size: 428px 427px; } }
.SocialConnectPanel.sendShare .socialConnectOptions li.socialConnectYahoo em {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -384px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SocialConnectPanel.sendShare .socialConnectOptions li.socialConnectYahoo em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -99px -342px;
background-size: 428px 427px; } }
.SocialConnectPanel.sendShareBrio {
padding-bottom: 16px; }
.SocialConnectPanel.sendShareBrio .socialConnectOptions .socialConnectWrapper .socialConnect .left {
margin-right: 12px; }
.SocialConnectPanel.sendShareBrio .socialConnectOptions .socialConnectWrapper .socialConnect .left .icon {
height: 44px;
width: 44px; }
.SocialConnectPanel.sendShareBrio .socialConnectOptions .socialConnectWrapper .socialConnect .right {
display: table-cell;
float: none;
height: 44px;
vertical-align: middle; }
.SocialConnectPanel.sendShareBrio .socialConnectOptions .socialConnectWrapper .socialConnect .right .title {
color: #555;
font-size: 18px;
line-height: 20px; }
.SocialConnectPanel.sendShareBrio .socialConnectOptions .socialConnectWrapper .socialConnect .right .subtitle {
color: #b5b5b5;
font-size: 12px;
font-weight: normal; }
.SocialConnectPanel.sendShareBrio .socialConnectOptions li {
border-bottom: 0; }
.SocialConnectPanel.sendShareBrio .socialConnectOptions li a {
padding: 4px 20px; }
.SocialConnectPanel.sendShareBrio .socialConnectOptions li.socialConnectFacebook em {
width: 44px;
height: 44px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -92px -296px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SocialConnectPanel.sendShareBrio .socialConnectOptions li.socialConnectFacebook em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -45px -258px;
background-size: 428px 427px; } }
.SocialConnectPanel.sendShareBrio .socialConnectOptions li.socialConnectGplus em {
width: 44px;
height: 44px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -46px -296px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SocialConnectPanel.sendShareBrio .socialConnectOptions li.socialConnectGplus em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -291px -139px;
background-size: 428px 427px; } }
.SocialConnectPanel.sendShareBrio .socialConnectOptions li.socialConnectTwitter em {
width: 44px;
height: 44px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -296px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SocialConnectPanel.sendShareBrio .socialConnectOptions li.socialConnectTwitter em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: 0 -258px;
background-size: 428px 427px; } }
.SocialConnectPanel.sendShareBrio .socialConnectOptions li.socialConnectYahoo em {
width: 45px;
height: 44px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -287px -248px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SocialConnectPanel.sendShareBrio .socialConnectOptions li.socialConnectYahoo em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -291px -94px;
background-size: 428px 427px; } }
.InternalExperimentsConfig div {
margin: 16px 32px; }
.InternalExperimentsConfig h1 {
margin-left: 32px; }
.InternalExperimentsConfig h2 {
margin-left: 32px;
margin-top: 20px; }
.InternalExperimentsConfig h3 {
margin-bottom: -10px; }
.InternalExperimentsConfig i {
margin-left: 5px; }
.InternalExperimentsConfig input[type=button] {
height: 25px;
width: 150px; }
.InternalExperimentsConfig .actionContainer {
overflow: auto; }
.InternalExperimentsConfig .left {
float: left; }
.InternalExperimentsConfig .right {
float: right; }
.InternalExperimentsConfig .saveButton {
bottom: 20px;
left: 45%;
position: fixed;
z-index: 999999999; }
.InternalExperimentsConfig .separator {
border-bottom: #dedede 1px solid;
margin: 20px auto;
width: 100%; }
.OAuthAuthorizationPage {
margin: auto; }
.OAuthAuthorizationPage .formHeader {
border-bottom: 1px solid #e7e7e7;
padding: 15px; }
.OAuthAuthorizationPage .logo {
width: 104px;
height: 26px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -253px -166px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
display: block;
margin: auto; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.OAuthAuthorizationPage .logo {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -111px -201px;
background-size: 428px 427px; } }
.OAuthAuthorizationPage .errorMessage {
background: #ffebe8;
border: 1px solid #bd081c;
font-size: 16px;
margin-top: 20px;
padding-top: 0; }
.OAuthDialog {
background: #fff;
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
margin: 100px auto 0;
position: relative;
max-width: 640px;
z-index: 682; }
.OAuthPage {
width: 670px; }
.OAuthPage .header {
background-color: #fff;
height: 34px;
padding: 10px; }
.OAuthPage .header .pinterestLogo {
width: 104px;
height: 26px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -253px -166px no-repeat;
display: block;
float: left;
margin-left: 20px;
margin-top: 8px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.OAuthPage .header .pinterestLogo {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -111px -201px;
background-size: 428px 427px; } }
.OAuthPage .header .joinButton {
float: right;
margin-right: 20px; }
.OAuthPage h2 {
padding: 20px 20px 10px; }
.OAuthPage .mainContent {
margin: 0 20px;
max-height: 315px;
min-height: 300px;
position: relative;
width: 630px; }
.OAuthPage .mainContent .authUserInfo {
text-align: center; }
.OAuthPage .mainContent .authUserInfo img {
margin: 20px 102.5px 10px; }
.OAuthPage .mainContent .userInfo {
border-right: 1px solid #ccc;
float: left;
height: 260px;
width: 345px; }
.OAuthPage .mainContent .userInfo .standardForm {
margin: 0;
width: 345px; }
.OAuthPage .mainContent .userInfo .loginError {
margin: 0 0 0 20px; }
.OAuthPage .mainContent .userInfo .authorize {
border-bottom-left-radius: 6px;
border-right: 1px solid #ccc;
bottom: 0;
max-height: 65px;
min-height: 30px;
padding: 20px;
position: absolute;
text-align: left;
width: 305px; }
.OAuthPage .mainContent .userInfo .authorize span {
float: left; }
.OAuthPage .mainContent .userInfo .authorize .authorizeApp {
float: right; }
.OAuthPage .mainContent .consumerScopes {
float: right;
height: 290px;
width: 284px; }
.OAuthPage .mainContent .consumerScopes .consumerScopesWrapper {
margin: 20px; }
.OAuthPage .mainContent .consumerScopes .consumerScopesWrapper .scopeHeading,
.OAuthPage .mainContent .consumerScopes .consumerScopesWrapper .facebookScopes {
margin-top: 10px; }
.OAuthPage .mainContent .consumerScopes .consumerScopesWrapper li {
margin-bottom: 10px; }
.OAuthPage .mainContent .consumerScopes .consumerScopesWrapper .websiteInfo {
height: 14px;
width: 14px; }
.OAuthPageBase {
color: #777;
font-size: 13px; }
.OAuthPageBase h1.authorizeHeading {
color: #000;
font-size: 24px;
padding: 20px; }
.OAuthPageBase h2.loginHeading {
color: #000;
font-size: 23px; }
.OAuthPageBase .mainContent {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px; }
.OAuthPageBase .mainContent .standardForm {
padding: 0; }
.OAuthPageBase .mainContent .standardForm ul {
padding: 0; }
.OAuthPageBase .mainContent .standardForm ul li {
padding: 5px 20px; }
.OAuthPageBase .mainContent .standardForm ul input.hasError {
background: transparent !important; }
.OAuthPageBase .mainContent .standardForm ul .formErrorMessage {
position: absolute;
right: 34px;
top: 16px; }
.OAuthPageBase .mainContent .loginError {
color: #bd081c;
display: none;
font-size: 12px; }
.OAuthPageBase .mainContent .authorize {
background-color: #f0f0f0; }
.OAuthPageBase .mainContent .authorize a {
font-weight: bold; }
.OAuthPageBase .mainContent .consumerScopes img {
margin-right: 5px; }
.OAuthPageBase .mainContent .consumerScopes .scopeHeading, .OAuthPageBase .mainContent .consumerScopes strong {
font-weight: bold; }
.OAuthPageBase .mainContent .consumerScopes .moreInfo {
margin-bottom: 10px; }
.OAuthPageBase .finePrint {
font-size: 12px;
line-height: 1.5em;
margin: 20px; }
.OAuthPageBase .finePrint a {
font-weight: bold; }
.OAuthPageBase .loading {
display: none; }
.OAuthPageBase .loading .spinner {
background: url(https://s.pinimg.com/webapp/style/images/spinning_pin-1x-de64e754.gif) no-repeat;
background-size: contain;
height: 48px;
width: 48px;
display: block;
margin: 40px auto 0;
opacity: .1; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.OAuthPageBase .loading .spinner {
background-image: url(https://s.pinimg.com/webapp/style/images/spinning_pin-2x-c17a7c3c.gif); } }
.OAuthPageBase .loading h2 {
text-align: center; }
.AppInstallButtons {
margin: 0 auto;
text-align: center;
top: 450px;
width: 100%;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.AppInstallButtons .left, .AppInstallButtons .right {
display: inline-block;
float: none;
text-align: center; }
.AppInstallButtons .left {
margin-left: -4px;
padding-left: 15px;
padding-right: 10px; }
.AppInstallButtons .right {
padding-left: 10px;
padding-right: 15px; }
.AppInstallButtons .buttonBorder {
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 5px; }
.AppInstallButtons .androidButton {
background: url(https://s.pinimg.com/webapp/style/images/EN-1x-193adbd5.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px;
display: inline-block;
outline: none; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton {
background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-ea0db06a.png); } }
.AppInstallButtons .iosButton {
background: url(https://s.pinimg.com/webapp/style/images/EN-1x-6f0f8e76.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px;
display: inline-block;
outline: none; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton {
background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-1bfaab3e.png); } }
.AppInstallButtons .androidButton.CS {
background: url(https://s.pinimg.com/webapp/style/images/CS-1x-aa88f4fd.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.CS {
background-image: url(https://s.pinimg.com/webapp/style/images/CS-2x-1f99325c.png); } }
.AppInstallButtons .iosButton.CS {
background: url(https://s.pinimg.com/webapp/style/images/CS-1x-57b27437.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.CS {
background-image: url(https://s.pinimg.com/webapp/style/images/CS-2x-387b6b84.png); } }
.AppInstallButtons .androidButton.DA {
background: url(https://s.pinimg.com/webapp/style/images/DA-1x-b3212f93.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.DA {
background-image: url(https://s.pinimg.com/webapp/style/images/DA-2x-881f535b.png); } }
.AppInstallButtons .iosButton.DA {
background: url(https://s.pinimg.com/webapp/style/images/DA-1x-73095d1e.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.DA {
background-image: url(https://s.pinimg.com/webapp/style/images/DA-2x-f75e4549.png); } }
.AppInstallButtons .androidButton.DE {
background: url(https://s.pinimg.com/webapp/style/images/DE-1x-195f2284.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.DE {
background-image: url(https://s.pinimg.com/webapp/style/images/DE-2x-73bba6d5.png); } }
.AppInstallButtons .iosButton.DE {
background: url(https://s.pinimg.com/webapp/style/images/DE-1x-9a33f8c5.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.DE {
background-image: url(https://s.pinimg.com/webapp/style/images/DE-2x-81d4e358.png); } }
.AppInstallButtons .androidButton.EL {
background: url(https://s.pinimg.com/webapp/style/images/EL-1x-d5e9cffb.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.EL {
background-image: url(https://s.pinimg.com/webapp/style/images/EL-2x-75dbffaf.png); } }
.AppInstallButtons .iosButton.EL {
background: url(https://s.pinimg.com/webapp/style/images/EL-1x-c47b5f4b.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.EL {
background-image: url(https://s.pinimg.com/webapp/style/images/EL-2x-f94ceee4.png); } }
.AppInstallButtons .androidButton.EN {
background: url(https://s.pinimg.com/webapp/style/images/EN-1x-193adbd5.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.EN {
background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-ea0db06a.png); } }
.AppInstallButtons .iosButton.EN {
background: url(https://s.pinimg.com/webapp/style/images/EN-1x-6f0f8e76.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.EN {
background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-1bfaab3e.png); } }
.AppInstallButtons .androidButton.ES {
background: url(https://s.pinimg.com/webapp/style/images/ES-1x-5d4df5f0.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.ES {
background-image: url(https://s.pinimg.com/webapp/style/images/ES-2x-4b31e0d2.png); } }
.AppInstallButtons .iosButton.ES {
background: url(https://s.pinimg.com/webapp/style/images/ES-1x-43d3ab96.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.ES {
background-image: url(https://s.pinimg.com/webapp/style/images/ES-2x-a31d918b.png); } }
.AppInstallButtons .androidButton.FI {
background: url(https://s.pinimg.com/webapp/style/images/FI-1x-df009e22.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.FI {
background-image: url(https://s.pinimg.com/webapp/style/images/FI-2x-93552fb9.png); } }
.AppInstallButtons .iosButton.FI {
background: url(https://s.pinimg.com/webapp/style/images/FI-1x-99cb37da.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.FI {
background-image: url(https://s.pinimg.com/webapp/style/images/FI-2x-6cd4e75f.png); } }
.AppInstallButtons .androidButton.FR {
background: url(https://s.pinimg.com/webapp/style/images/FR-1x-76258add.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.FR {
background-image: url(https://s.pinimg.com/webapp/style/images/FR-2x-892d382a.png); } }
.AppInstallButtons .iosButton.FR {
background: url(https://s.pinimg.com/webapp/style/images/FR-1x-a1b11f36.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.FR {
background-image: url(https://s.pinimg.com/webapp/style/images/FR-2x-60ddb3dc.png); } }
.AppInstallButtons .androidButton.HU {
background: url(https://s.pinimg.com/webapp/style/images/HU-1x-f5a33374.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.HU {
background-image: url(https://s.pinimg.com/webapp/style/images/HU-2x-3cf19ccb.png); } }
.AppInstallButtons .iosButton.HU {
background: url(https://s.pinimg.com/webapp/style/images/HU-1x-ecfb98ab.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.HU {
background-image: url(https://s.pinimg.com/webapp/style/images/HU-2x-801f2f76.png); } }
.AppInstallButtons .androidButton.ID {
background: url(https://s.pinimg.com/webapp/style/images/ID-1x-fc856302.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.ID {
background-image: url(https://s.pinimg.com/webapp/style/images/ID-2x-60763725.png); } }
.AppInstallButtons .iosButton.ID {
background: url(https://s.pinimg.com/webapp/style/images/ID-1x-7723e800.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.ID {
background-image: url(https://s.pinimg.com/webapp/style/images/ID-2x-511fb06d.png); } }
.AppInstallButtons .androidButton.IT {
background: url(https://s.pinimg.com/webapp/style/images/IT-1x-78215d79.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.IT {
background-image: url(https://s.pinimg.com/webapp/style/images/IT-2x-f06d21d3.png); } }
.AppInstallButtons .iosButton.IT {
background: url(https://s.pinimg.com/webapp/style/images/IT-1x-eb49e52c.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.IT {
background-image: url(https://s.pinimg.com/webapp/style/images/IT-2x-4e1ebffc.png); } }
.AppInstallButtons .androidButton.JA {
background: url(https://s.pinimg.com/webapp/style/images/JA-1x-e4d2e103.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.JA {
background-image: url(https://s.pinimg.com/webapp/style/images/JA-2x-613b7a1c.png); } }
.AppInstallButtons .iosButton.JA {
background: url(https://s.pinimg.com/webapp/style/images/JA-1x-e9625ac6.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.JA {
background-image: url(https://s.pinimg.com/webapp/style/images/JA-2x-e4949c87.png); } }
.AppInstallButtons .androidButton.KO {
background: url(https://s.pinimg.com/webapp/style/images/KO-1x-d08dd546.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.KO {
background-image: url(https://s.pinimg.com/webapp/style/images/KO-2x-82063d73.png); } }
.AppInstallButtons .iosButton.KO {
background: url(https://s.pinimg.com/webapp/style/images/KO-1x-3699e0ab.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.KO {
background-image: url(https://s.pinimg.com/webapp/style/images/KO-2x-ddc06527.png); } }
.AppInstallButtons .androidButton.ML {
background: url(https://s.pinimg.com/webapp/style/images/ML-1x-0069db8e.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.ML {
background-image: url(https://s.pinimg.com/webapp/style/images/ML-2x-85c22418.png); } }
.AppInstallButtons .iosButton.ML {
background: url(https://s.pinimg.com/webapp/style/images/ML-1x-cfe4f86a.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.ML {
background-image: url(https://s.pinimg.com/webapp/style/images/ML-2x-482d4428.png); } }
.AppInstallButtons .androidButton.NL {
background: url(https://s.pinimg.com/webapp/style/images/NL-1x-ff73753a.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.NL {
background-image: url(https://s.pinimg.com/webapp/style/images/NL-2x-8c8e0858.png); } }
.AppInstallButtons .iosButton.NL {
background: url(https://s.pinimg.com/webapp/style/images/NL-1x-3926d2dd.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.NL {
background-image: url(https://s.pinimg.com/webapp/style/images/NL-2x-ffcdfef9.png); } }
.AppInstallButtons .androidButton.NN {
background: url(https://s.pinimg.com/webapp/style/images/NN-1x-a9972684.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.NN {
background-image: url(https://s.pinimg.com/webapp/style/images/NN-2x-85d7db2a.png); } }
.AppInstallButtons .iosButton.NN {
background: url(https://s.pinimg.com/webapp/style/images/NN-1x-6e36a313.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.NN {
background-image: url(https://s.pinimg.com/webapp/style/images/NN-2x-fd2478e8.png); } }
.AppInstallButtons .androidButton.PL {
background: url(https://s.pinimg.com/webapp/style/images/PL-1x-dc76138d.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.PL {
background-image: url(https://s.pinimg.com/webapp/style/images/PL-2x-56d0226f.png); } }
.AppInstallButtons .iosButton.PL {
background: url(https://s.pinimg.com/webapp/style/images/PL-1x-3a5b9eb6.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.PL {
background-image: url(https://s.pinimg.com/webapp/style/images/PL-2x-3cc909a8.png); } }
.AppInstallButtons .androidButton.PT {
background: url(https://s.pinimg.com/webapp/style/images/PT-1x-61d44f78.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.PT {
background-image: url(https://s.pinimg.com/webapp/style/images/PT-2x-91f7acfc.png); } }
.AppInstallButtons .iosButton.PT {
background: url(https://s.pinimg.com/webapp/style/images/PT-1x-fc9e1aa2.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.PT {
background-image: url(https://s.pinimg.com/webapp/style/images/PT-2x-e272dbd6.png); } }
.AppInstallButtons .androidButton.RO {
background: url(https://s.pinimg.com/webapp/style/images/RO-1x-fda1c018.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.RO {
background-image: url(https://s.pinimg.com/webapp/style/images/RO-2x-d48881c4.png); } }
.AppInstallButtons .iosButton.RO {
background: url(https://s.pinimg.com/webapp/style/images/RO-1x-18736a64.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.RO {
background-image: url(https://s.pinimg.com/webapp/style/images/RO-2x-c762cab0.png); } }
.AppInstallButtons .androidButton.RU {
background: url(https://s.pinimg.com/webapp/style/images/RU-1x-65d3a95b.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.RU {
background-image: url(https://s.pinimg.com/webapp/style/images/RU-2x-0ce2c757.png); } }
.AppInstallButtons .iosButton.RU {
background: url(https://s.pinimg.com/webapp/style/images/RU-1x-ce1d81a3.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.RU {
background-image: url(https://s.pinimg.com/webapp/style/images/RU-2x-b89abd86.png); } }
.AppInstallButtons .androidButton.SK {
background: url(https://s.pinimg.com/webapp/style/images/SK-1x-66e29846.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.SK {
background-image: url(https://s.pinimg.com/webapp/style/images/SK-2x-16880fe3.png); } }
.AppInstallButtons .iosButton.SK {
background: url(https://s.pinimg.com/webapp/style/images/SK-1x-ac41a55d.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.SK {
background-image: url(https://s.pinimg.com/webapp/style/images/SK-2x-20b58101.png); } }
.AppInstallButtons .androidButton.SV {
background: url(https://s.pinimg.com/webapp/style/images/SV-1x-2bad06b4.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.SV {
background-image: url(https://s.pinimg.com/webapp/style/images/SV-2x-502a5a32.png); } }
.AppInstallButtons .iosButton.SV {
background: url(https://s.pinimg.com/webapp/style/images/SV-1x-b3f99f27.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.SV {
background-image: url(https://s.pinimg.com/webapp/style/images/SV-2x-b1271639.png); } }
.AppInstallButtons .androidButton.TH {
background: url(https://s.pinimg.com/webapp/style/images/TH-1x-66e29846.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.TH {
background-image: url(https://s.pinimg.com/webapp/style/images/TH-2x-16880fe3.png); } }
.AppInstallButtons .iosButton.TH {
background: url(https://s.pinimg.com/webapp/style/images/TH-1x-afac524b.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.TH {
background-image: url(https://s.pinimg.com/webapp/style/images/TH-2x-7ecf42ba.png); } }
.AppInstallButtons .androidButton.TL {
background: url(https://s.pinimg.com/webapp/style/images/TL-1x-a001709a.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.TL {
background-image: url(https://s.pinimg.com/webapp/style/images/TL-2x-58021b84.png); } }
.AppInstallButtons .iosButton.TL {
background: url(https://s.pinimg.com/webapp/style/images/TL-1x-31d0bc83.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.TL {
background-image: url(https://s.pinimg.com/webapp/style/images/TL-2x-3187e1aa.png); } }
.AppInstallButtons .androidButton.TR {
background: url(https://s.pinimg.com/webapp/style/images/TR-1x-f7dc0333.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.TR {
background-image: url(https://s.pinimg.com/webapp/style/images/TR-2x-4585987c.png); } }
.AppInstallButtons .iosButton.TR {
background: url(https://s.pinimg.com/webapp/style/images/TR-1x-6f0f8e76.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.TR {
background-image: url(https://s.pinimg.com/webapp/style/images/TR-2x-1bfaab3e.png); } }
.AppInstallButtons .androidButton.UK {
background: url(https://s.pinimg.com/webapp/style/images/UK-1x-9ecb075c.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.UK {
background-image: url(https://s.pinimg.com/webapp/style/images/UK-2x-25a04f9a.png); } }
.AppInstallButtons .iosButton.UK {
background: url(https://s.pinimg.com/webapp/style/images/UK-1x-6f0f8e76.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.UK {
background-image: url(https://s.pinimg.com/webapp/style/images/UK-2x-1bfaab3e.png); } }
.AppInstallButtons .androidButton.VI {
background: url(https://s.pinimg.com/webapp/style/images/VI-1x-aba34925.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .androidButton.VI {
background-image: url(https://s.pinimg.com/webapp/style/images/VI-2x-f245f353.png); } }
.AppInstallButtons .iosButton.VI {
background: url(https://s.pinimg.com/webapp/style/images/VI-1x-474f64a4.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallButtons .iosButton.VI {
background-image: url(https://s.pinimg.com/webapp/style/images/VI-2x-119d560d.png); } }
.AppInstallModal {
height: 420px;
overflow: hidden;
position: relative;
width: 560px; }
.AppInstallModal .appUpsell {
display: none; }
.AppInstallModal .appUpsell .instructions {
background: url(https://s.pinimg.com/webapp/style/images/app_install_modal_bg-4c5ea0e5.jpg) no-repeat;
background-size: contain;
height: 598px;
width: 1134px;
background-size: cover; }
.AppInstallModal .leftArrowPadding {
left: 5px; }
.AppInstallModal .leftArrowPadding .leftArrow {
background: url(https://s.pinimg.com/webapp/style/images/arrow-left-1x-eba0f7d2.png) no-repeat;
background-size: contain;
height: 13px;
width: 10px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallModal .leftArrowPadding .leftArrow {
background-image: url(https://s.pinimg.com/webapp/style/images/arrow-left-2x-24a50dd5.png); } }
.AppInstallModal .rightArrowPadding {
right: 5px; }
.AppInstallModal .rightArrowPadding .rightArrow {
background: url(https://s.pinimg.com/webapp/style/images/arrow-right-1x-c52743d2.png) no-repeat;
background-size: contain;
height: 13px;
width: 10px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallModal .rightArrowPadding .rightArrow {
background-image: url(https://s.pinimg.com/webapp/style/images/arrow-right-2x-8c2a867b.png); } }
.AppInstallModal .leftArrowPadding, .AppInstallModal .rightArrowPadding {
cursor: pointer;
padding: 20px;
position: absolute;
top: 43%;
z-index: 1; }
.AppInstallModal .container {
height: 420px;
width: 1680px; }
.AppInstallModal .container .left {
left: 0; }
.AppInstallModal .container .left .playStoreScreenshot {
background: url(https://s.pinimg.com/webapp/style/images/googleplay-1x-ba4f9f8f.png) no-repeat;
background-size: contain;
height: 200px;
width: 447px;
margin: 0 auto; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallModal .container .left .playStoreScreenshot {
background-image: url(https://s.pinimg.com/webapp/style/images/googleplay-2x-36863106.png); } }
.AppInstallModal .container .right {
right: 0; }
.AppInstallModal .container .right .appStoreScreenshot {
background: url(https://s.pinimg.com/webapp/style/images/itunes-1x-bae52a58.png) no-repeat;
background-size: contain;
height: 200px;
width: 446px;
margin: 0 auto; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallModal .container .right .appStoreScreenshot {
background-image: url(https://s.pinimg.com/webapp/style/images/itunes-2x-36c672cb.png); } }
.AppInstallModal .container .middle {
left: 560px; }
.AppInstallModal .container .middle .leftHalf {
float: left; }
.AppInstallModal .container .middle .leftHalf .android {
background: url(https://s.pinimg.com/webapp/style/images/android-1x-15bc6e21.png) no-repeat;
background-size: contain;
height: 260px;
width: 132px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallModal .container .middle .leftHalf .android {
background-image: url(https://s.pinimg.com/webapp/style/images/android-2x-59805d32.png); } }
.AppInstallModal .container .middle .rightHalf {
display: inline-block; }
.AppInstallModal .container .middle .rightHalf .iPhone {
background: url(https://s.pinimg.com/webapp/style/images/iphone-1x-3da1ed51.png) no-repeat;
background-size: contain;
height: 260px;
width: 130px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallModal .container .middle .rightHalf .iPhone {
background-image: url(https://s.pinimg.com/webapp/style/images/iphone-2x-5213c644.png); } }
.AppInstallModal .container .middle .leftHalf, .AppInstallModal .container .middle .rightHalf {
cursor: pointer;
height: 300px;
position: relative;
width: 50%; }
.AppInstallModal .container .middle .footer {
cursor: pointer; }
.AppInstallModal .container .middle .footer .leftFooter {
float: left; }
.AppInstallModal .container .middle .footer .rightFooter {
float: right; }
.AppInstallModal .container .middle .footer .leftFooter, .AppInstallModal .container .middle .footer .rightFooter {
height: 50px;
position: relative;
text-align: center;
vertical-align: middle;
width: 50%; }
.AppInstallModal .container .left, .AppInstallModal .container .right, .AppInstallModal .container .middle {
height: 420px;
position: absolute;
width: 560px; }
.AppInstallModal .header {
border-bottom: 1px solid #e0e0e0;
height: 66px;
text-align: center; }
.AppInstallModal .header .title {
font-size: 18px;
font-weight: bold;
padding-top: 22px; }
.AppInstallModal .instructions {
height: 302px; }
.AppInstallModal .instructions .text {
font-size: 18px;
padding: 29px 10px;
text-align: center; }
.AppInstallModal .footer {
background-color: #f0f0f0;
border-radius: 0 0 6px 6px;
border-top: 1px solid #e0e0e0;
font-size: 18px;
font-weight: bold;
height: 50px;
position: relative; }
.AppInstallModal .completedPanel {
background-color: #fff;
border-radius: 6px;
display: none;
position: absolute;
width: 560px;
z-index: 2; }
.AppInstallModal .completedPanel .bothDevices {
background: url(https://s.pinimg.com/webapp/style/images/iphone_android-1x-4946ffb9.png) no-repeat;
background-size: contain;
height: 200px;
width: 302px;
margin: 0 auto; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInstallModal .completedPanel .bothDevices {
background-image: url(https://s.pinimg.com/webapp/style/images/iphone_android-2x-64af62d6.png); } }
.AppInstallModal .center, .AppInstallModal .GplusConnectButton {
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
.AppInstallModal .dynamicButton {
font-size: 14px;
margin-right: 16px;
padding-left: 25px;
padding-right: 25px; }
.AppInstallModalStatic {
color: #555;
height: auto;
overflow: auto;
position: relative;
width: auto; }
.AppInstallModalStatic .appInstallDescription {
font-size: 36px;
font-weight: bold;
letter-spacing: -1.2px;
line-height: 1.2;
padding-left: 88px;
padding-right: 88px;
padding-top: 58px;
position: relative;
text-align: center;
width: 372px; }
.AppInstallModalStatic .appButtonsContainer {
padding-top: 50px; }
.AppInstallModalStatic .appInstallMobileBrowserText {
font-size: 16px;
padding-bottom: 48px;
padding-top: 25px;
text-align: center; }
.AppInstallModalStatic .pinItText {
color: #bd081c; }
.AppInterstitial {
font-size: 12px;
min-height: 300px;
min-width: 300px;
position: fixed; }
.AppInterstitial.pageHeader {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0; }
.AppInterstitial.pageHeader .buttonText {
font-size: 18px; }
@media screen and (orientation: portrait) and (min-height: 600px), screen and (orientation: landscape) and (min-width: 600px) {
.AppInterstitial {
font-size: 14px; } }
.AppInterstitial .halfPage {
border-radius: 10px 10px 0 0;
height: 50%;
left: 5%;
top: 15px;
width: 90%; }
.AppInterstitial .defaultBackground {
background-image: url(https://s.pinimg.com/webapp/style/images/bg_travel_grid-59b782c4.jpg);
background-size: cover;
height: 50%;
opacity: 1;
position: absolute;
width: 100%;
z-index: 0; }
.AppInterstitial .background {
filter: url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter: blur(18px);
filter: blur(18px);
height: 100%;
opacity: 0;
position: absolute;
-webkit-transition: opacity .5s;
transition: opacity .5s;
width: 100%;
z-index: -2; }
.AppInterstitial .background.loaded {
opacity: .3; }
.AppInterstitial .returnBackground {
background-size: cover;
min-height: 100%;
min-width: 100%;
-o-object-fit: cover;
object-fit: cover;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -2; }
.AppInterstitial .returnBackground.loaded {
opacity: .5; }
.AppInterstitial .returnBackgroundV2 {
background-size: cover;
min-height: 80%;
min-width: 100%;
-o-object-fit: cover;
object-fit: cover;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -2; }
.AppInterstitial .returnBackgroundV2.loaded {
opacity: .5; }
.AppInterstitial .pinImgContainer {
left: 20px;
position: absolute;
top: 20px;
width: 140px; }
.AppInterstitial .pinImg {
border-radius: 10px 10px 0 0;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
opacity: 0;
-webkit-transition: opacity .5s;
transition: opacity .5s;
width: 140px; }
.AppInterstitial .pinImg.loaded {
opacity: 1; }
.AppInterstitial .imgBottom {
background-color: #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
height: 150px; }
.AppInterstitial .pinDescription {
color: #333;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 150px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
left: 180px;
position: absolute;
vertical-align: middle; }
.AppInterstitial .pinDescriptionReturn {
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
left: 20px;
position: absolute;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
vertical-align: middle; }
.AppInterstitial .pinDescriptionReturnV2 {
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
left: 30px;
position: relative;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
top: 160px;
vertical-align: middle; }
.AppInterstitial .title {
font-size: 1.1em;
font-weight: bold; }
.AppInterstitial .overlay {
background-color: #fff;
bottom: 0;
box-shadow: 0 -10px 15px rgba(0, 0, 0, 0.2);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
left: 0;
padding-bottom: 50px;
position: absolute;
right: 0;
top: 150px; }
.AppInterstitial .overlay .pinDescription {
display: none; }
.AppInterstitial .overlayFull {
background-color: #fff;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
left: 0;
padding-bottom: 50px;
position: absolute;
right: 0;
top: 0; }
.AppInterstitial .overlayTransparent {
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
left: 0;
padding: 20px;
position: absolute;
right: 0;
top: 180px; }
.AppInterstitial .overlayBottom {
bottom: 0;
left: 0;
position: absolute;
right: 0; }
.AppInterstitial .overlayBottomWhite {
background-color: #fff;
bottom: 0;
left: 0;
padding: 20px 0;
position: absolute;
right: 0; }
.AppInterstitial .overlayTop {
background-color: #fff; }
.AppInterstitial .overlayTop, .AppInterstitial .buttonContainer {
padding: 20px; }
.AppInterstitial .overlayTitle {
color: #555;
font-size: 2em;
font-weight: bold;
padding-bottom: 15px; }
.AppInterstitial .overlayReturnTitle {
font-size: 2em;
font-weight: bold;
padding-top: 20px; }
.AppInterstitial .interestCarousel {
overflow-x: scroll;
overflow-y: hidden;
padding-left: 20px;
padding-right: 19px;
white-space: nowrap;
width: auto; }
.AppInterstitial .interestContainer {
border-radius: 6px;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.25);
display: inline-block;
height: 100%;
overflow: hidden;
padding-right: 1px;
position: relative; }
.AppInterstitial .interestImage {
background: #fff center;
background-size: cover;
border-radius: 6px;
display: block;
height: 90px;
overflow: hidden;
padding: 2px;
-webkit-transition: opacity .1s ease-in-out;
transition: opacity .1s ease-in-out;
width: 90px; }
.AppInterstitial .interestLabel {
-ms-flex-item-align: center;
align-self: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
width: 100%;
z-index: 4; }
.AppInterstitial .interestLabel h2 {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #fff;
font-size: 1.3em;
line-height: 1.1;
padding: 4px;
text-align: center;
text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.3);
white-space: normal; }
.AppInterstitial .appInfoText {
color: #555;
display: inline-block;
line-height: 17px;
margin: 5px;
vertical-align: top; }
.AppInterstitial .appInfoText .title {
font-weight: bold; }
.AppInterstitial .stars {
background: url(https://s.pinimg.com/webapp/style/images/stars-1x-9978bc13.png) no-repeat;
background-size: contain;
height: 10px;
width: 66px;
margin: 2px 0 3px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInterstitial .stars {
background-image: url(https://s.pinimg.com/webapp/style/images/stars-2x-86e578df.png); } }
.AppInterstitial .icon {
display: inline-block; }
.AppInterstitial .icon.iOS {
background: url(https://s.pinimg.com/webapp/style/images/ios-icon-1x-80955526.png) no-repeat;
background-size: contain;
height: 55px;
width: 55px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInterstitial .icon.iOS {
background-image: url(https://s.pinimg.com/webapp/style/images/ios-icon-2x-5fcc8369.png); } }
.AppInterstitial .icon.android {
background: url(https://s.pinimg.com/webapp/style/images/android-icon-1x-c02a3e12.png) no-repeat;
background-size: contain;
height: 55px;
width: 55px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInterstitial .icon.android {
background-image: url(https://s.pinimg.com/webapp/style/images/android-icon-2x-b9798906.png); } }
.AppInterstitial .icon.transparent {
background: url(https://s.pinimg.com/webapp/style/images/circlep-1x-1a174050.png) no-repeat;
background-size: contain;
height: 60px;
width: 61px; }
.AppInterstitial .buttonInnerContainer {
vertical-align: middle; }
.AppInterstitial .Button {
background: #bc232c;
border: 0;
border-radius: 4px !important;
box-shadow: none;
color: #fff;
height: 45px;
margin: 0 auto;
text-shadow: none;
-webkit-transition: -webkit-transform .1s ease-in-out;
transition: -webkit-transform .1s ease-in-out;
transition: transform .1s ease-in-out;
transition: transform .1s ease-in-out, -webkit-transform .1s ease-in-out;
width: 100%; }
.AppInterstitial .Button:active {
background: #bc232c !important;
-webkit-transform: scale(0.9);
transform: scale(0.9); }
.AppInterstitial .stayInBrowserLink, .AppInterstitial .interstitialHeaderLoginWithBrowserLink, .AppInterstitial .scrollDownText {
color: #999;
margin-top: 10px;
padding: 10px;
text-align: center; }
.AppInterstitial .loginBrowserLink {
color: #999;
margin-top: 20px;
text-align: center; }
.AppInterstitial .continueBrowserLink {
color: #999;
margin-top: 20px;
text-align: center; }
.AppInterstitial .popularInterestsText {
color: #999;
display: inline-block;
line-height: 17px;
margin: 5px 0;
padding-left: 20px;
vertical-align: top; }
.AppInterstitial .whiteText {
color: #fff; }
@media screen and (orientation: portrait) {
.AppInterstitial .overlayContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.AppInterstitial .buttonContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; } }
@media screen and (orientation: landscape) {
.AppInterstitial .pinDescription {
height: 80px; }
.AppInterstitial .pinDescriptionReturnV2 {
display: none; }
.AppInterstitial .overlay {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
top: 80px; }
.AppInterstitial .overlayBottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
.AppInterstitial .overlayBottomWhite {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 2px; }
.AppInterstitial .overlayTop, .AppInterstitial .buttonContainer {
width: 50%; }
.AppInterstitial .overlayTitle {
font-size: 1.8em; }
.AppInterstitial .overlayTransparent {
top: 30px; }
.AppInterstitial .buttonContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
.AppInterstitial .carousel {
display: none; } }
.AppInterstitial.iPad, .AppInterstitial.androidTablet {
font-size: 14px; }
.AppInterstitial.iPad img.background, .AppInterstitial.androidTablet img.background {
max-width: none; }
.AppInterstitial.iPad .defaultBackground, .AppInterstitial.androidTablet .defaultBackground {
background-image: url(https://s.pinimg.com/webapp/style/images/tablet_default_background-ec3da0cb.jpg);
height: 100%; }
.AppInterstitial.iPad .pinImgContainer, .AppInterstitial.androidTablet .pinImgContainer {
height: 300px;
left: 50px;
overflow: hidden;
padding: 2px;
top: 50px;
width: 225px; }
.AppInterstitial.iPad .pinImg, .AppInterstitial.androidTablet .pinImg {
width: 225px; }
.AppInterstitial.iPad .title, .AppInterstitial.androidTablet .title {
font-size: 1.2em; }
.AppInterstitial.iPad .pinDescription, .AppInterstitial.androidTablet .pinDescription {
height: 240px;
left: 300px; }
.AppInterstitial.iPad .overlayTop, .AppInterstitial.iPad .buttonContainer, .AppInterstitial.androidTablet .overlayTop, .AppInterstitial.androidTablet .buttonContainer {
padding: 45px; }
.AppInterstitial.iPad .overlayTitle, .AppInterstitial.androidTablet .overlayTitle {
font-size: 4em; }
.AppInterstitial.iPad .appInfoText, .AppInterstitial.androidTablet .appInfoText {
line-height: 20px; }
.AppInterstitial.iPad .appInfoText .title, .AppInterstitial.androidTablet .appInfoText .title {
font-size: 1.3em; }
.AppInterstitial.iPad .Button, .AppInterstitial.androidTablet .Button {
display: block;
font-size: 1.6em;
height: 60px;
margin: 0 auto;
max-width: 500px; }
.AppInterstitial.iPad .buttonContainer, .AppInterstitial.androidTablet .buttonContainer {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
.AppInterstitial.iPad .stayInBrowserLink, .AppInterstitial.iPad .interstitialHeaderLoginWithBrowserLink, .AppInterstitial.iPad .scrollDownText, .AppInterstitial.androidTablet .stayInBrowserLink, .AppInterstitial.androidTablet .interstitialHeaderLoginWithBrowserLink, .AppInterstitial.androidTablet .scrollDownText {
color: #333;
font-size: 1.2em;
font-weight: bold;
margin-top: 30px; }
.AppInterstitial.iPad .pinDescription {
height: 240px; }
.AppInterstitial.iPad .overlay {
background-color: transparent;
box-shadow: none;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
top: 240px; }
.AppInterstitial.iPad .overlayTop {
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.2); }
.AppInterstitial.iPad .overlayTop, .AppInterstitial.iPad .buttonContainer {
width: auto; }
@media screen and (orientation: portrait) {
.AppInterstitial.iPad .overlayTop {
padding: 100px 45px; } }
@media screen and (orientation: landscape) {
.AppInterstitial.iPad .appInfo {
display: none; } }
.AppInterstitial.androidTablet .pinDescription {
height: 190px; }
.AppInterstitial.androidTablet .overlay {
padding-bottom: 100px;
top: 190px; }
.AppInterstitial.androidTablet .overlayTitle {
font-size: 3em; }
@media screen and (orientation: portrait) and (max-device-height: 480px) {
.AppInterstitial .appInfo {
display: none; } }
.AppInterstitial.inlineInterstitial {
bottom: 0;
top: 50%;
width: 100%; }
.AppInterstitial.inlineInterstitial .appInfo {
text-align: center;
width: 100%; }
.AppInterstitial.inlineInterstitial .appInfoText {
text-align: left; }
.AppInterstitial.inlineInterstitial .buttonContainer {
-webkit-box-flex: inherit;
-ms-flex-positive: inherit;
flex-grow: inherit;
padding: 0 7% 30px;
width: inherit; }
.AppInterstitial.inlineInterstitial .Button.openInApp .buttonText {
font-size: 16px;
margin-bottom: 5px; }
.AppInterstitial.inlineInterstitial .icon {
background: url(https://s.pinimg.com/webapp/style/images/app-store-logo-1x-0056d508.png) no-repeat;
background-size: contain;
height: 48px;
width: 48px;
margin-top: 5px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInterstitial.inlineInterstitial .icon {
background-image: url(https://s.pinimg.com/webapp/style/images/app-store-logo-2x-a421f3ed.png); } }
.AppInterstitial.inlineInterstitial .overlay {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: distribute;
justify-content: space-around;
padding: 0;
top: 0%; }
.AppInterstitial.inlineInterstitial .overlayTitle {
font-size: 1.5em;
padding: 0 7%;
text-align: center; }
.AppInterstitial.inlineInterstitial .overlayTop {
padding: 30px 0 0;
width: 100%; }
.AppInterstitial.blackBanner .appInfoText, .AppInterstitial.blackBanner .overlayTitle, .AppInterstitial.blackBanner .title {
color: #fff; }
.AppInterstitial.blackBanner .overlay {
background: rgba(0, 0, 0, 0.75); }
.AppInterstitial.blackBanner .overlayTop {
background: transparent; }
.AppInterstitial.slideShow {
background-color: #000; }
.AppInterstitial.slideShow .overlay {
padding-bottom: 0;
top: 45%; }
.AppInterstitial.slideShow .overlay .pinDescription {
display: block; }
.AppInterstitial.slideShow .pinDescription {
color: #fff;
display: none;
left: 10%;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
top: -45px; }
.AppInterstitial.slideShow .background, .AppInterstitial.slideShow .pinImgContainer {
display: none; }
.AppInterstitial .mobileHomepageBackground {
background-image: url(https://s.pinimg.com/webapp/style/images/pin_grid-7106f39b.jpg);
height: 50%;
opacity: 1; }
.AppInterstitial .detail2 {
display: none; }
.AppInterstitial.defaultHeader .stayInBrowserLink, .AppInterstitial.defaultHeader .interstitialHeaderLoginWithBrowserLink, .AppInterstitial.defaultHeader .scrollDownText {
color: #fff;
font-size: 1.2em;
font-weight: bold;
margin-top: 30px; }
.AppInterstitial.previewInterstitial {
background-color: #fff;
padding: 10px 20px; }
.AppInterstitial.previewInterstitial.defaultBackground {
padding: 0; }
.AppInterstitial.previewInterstitial.explorePage .pageSubtitle {
display: none; }
.AppInterstitial.previewInterstitial.explorePage .miniGridContainer {
height: 33vh; }
.AppInterstitial.previewInterstitial .pinterestLogo {
background: url(https://s.pinimg.com/webapp/style/images/pinterest-logo-1x-7eae5bb2.png) no-repeat;
background-size: contain;
height: 44px;
width: 44px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AppInterstitial.previewInterstitial .pinterestLogo {
background-image: url(https://s.pinimg.com/webapp/style/images/pinterest-logo-2x-c59465af.png); } }
.AppInterstitial.previewInterstitial .pageTitle {
color: #686868;
font-size: 24px;
font-weight: bold;
line-height: 26px;
max-height: 52px;
min-height: 29px;
overflow: hidden; }
.AppInterstitial.previewInterstitial .pageSubtitle {
color: #b9b9b9;
font-weight: bold;
height: 17px; }
.AppInterstitial.previewInterstitial .miniGridContainer {
border-radius: 8px;
height: 30vh;
margin-top: 10px;
-webkit-mask-image: -webkit-radial-gradient(circle, #fff 100%, #000 100%);
mask-image: radial-gradient(circle, #fff 100%, #000 100%);
overflow: hidden; }
.AppInterstitial.previewInterstitial .overlay {
bottom: 0;
box-shadow: none;
height: 250px;
padding-bottom: 0;
top: auto; }
.AppInterstitial.previewInterstitial .overlayTop {
padding: 0 20px; }
.AppInterstitial.previewInterstitial .overlayTitle {
border-bottom: 1px solid #eee;
line-height: 1;
padding-bottom: 10px; }
.AppInterstitial.previewInterstitial .appInfo {
padding-top: 10px; }
.AppInterstitial.previewInterstitial .buttonContainer {
padding: 0 20px; }
@media screen and (orientation: landscape) {
.AppInterstitial.previewInterstitial .pinterestLogo {
display: none; }
.AppInterstitial.previewInterstitial .miniGridContainer {
display: inline-block;
height: 50vh;
vertical-align: top;
width: 50%; }
.AppInterstitial.previewInterstitial .overlay {
display: inline-block;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: auto;
left: auto;
padding-bottom: 0;
position: relative;
width: 49%; }
.AppInterstitial.previewInterstitial .overlayTop {
padding-top: 0;
width: 80%; }
.AppInterstitial.previewInterstitial .overlayTitle {
font-size: 1.5em;
margin-top: 10px; }
.AppInterstitial.previewInterstitial .buttonContainer {
width: 80%; } }
.denzelAppInterstitial {
background-color: #fff;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 900; }
.BlueAppBanner {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #4a97f1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-weight: bold;
height: 60px;
opacity: .95;
width: 100%;
z-index: 500; }
.BlueAppBanner .bannerRight {
-webkit-box-flex: 1;
-ms-flex: 1 0 50%;
flex: 1 0 50%;
margin-left: 25px; }
.BlueAppBanner .bannerText {
color: #fff; }
.BlueAppBanner .bannerText .bannerTitle {
font-size: 17px;
font-weight: bold; }
.BlueAppBanner .bannerText .bannerSubtitle {
font-size: 13px; }
.BlueAppBanner .installButton {
background-color: #fff;
border-radius: 5px;
-webkit-box-flex: 2;
-ms-flex: 2 0 0;
flex: 2 0 0;
margin: 0 25px;
padding: 12px 15px;
text-align: center; }
.BlueAppBanner .installText {
color: #4a97f1;
font-size: 13px;
font-weight: bold; }
.BlueAppBanner.bottom {
bottom: 0;
position: fixed; }
.LogoutAppUpsell .getPinterestVideo {
background-color: #000;
background-image: url(https://s.pinimg.com/webapp/style/images/get_pinterest_mobile-630d9b70.jpg);
background-size: cover;
bottom: 0;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0; }
.LogoutAppUpsell .getPinterestVideo video, .LogoutAppUpsell .getPinterestVideo img {
height: 100%;
left: 50%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: top 75%;
object-position: top 75%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: auto; }
@media screen and (min-aspect-ratio: 16 / 9) {
.LogoutAppUpsell .getPinterestVideo video, .LogoutAppUpsell .getPinterestVideo img {
height: auto;
width: 100% !important; } }
.LogoutAppUpsell .contents {
background: #fff;
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
margin: 100px auto 0;
position: relative;
max-width: 470px;
z-index: 682;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: none;
box-shadow: none;
color: #fff;
margin-top: 0;
min-width: 650px;
text-align: left;
white-space: nowrap; }
.LogoutAppUpsell .contents .logoContainer {
text-align: center;
width: 100%; }
.LogoutAppUpsell .contents .logo {
width: 251px;
height: 85px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -87px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
margin-bottom: 132px;
margin-top: 50px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.LogoutAppUpsell .contents .logo {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: 0 -86px;
background-size: 428px 427px; } }
.LogoutAppUpsell .contents .title {
font-size: 52px;
font-weight: bold;
margin-bottom: 35px; }
.LogoutAppUpsell .contents .subtitle, .LogoutAppUpsell .contents .dialogSuccess {
font-size: 22px;
font-weight: bold;
margin-bottom: 20px; }
.LogoutAppUpsell .contents .footer {
font-size: 14px;
margin-top: 20px; }
.LogoutAppUpsell .contents .footerLink {
color: #fff;
text-decoration: underline; }
.LogoutAppUpsell .contents .standardForm {
margin: 0; }
.LogoutAppUpsell .contents .getAppDialog {
-webkit-transition: all 1s;
transition: all 1s; }
.LogoutAppUpsell .contents .getAppDialog .dialogSuccess {
display: none; }
.LogoutAppUpsell .contents .emailOrPhoneNumber {
font-size: 21px;
padding-bottom: 11px;
padding-left: 10px;
padding-top: 11px;
width: 360px; }
.LogoutAppUpsell .contents .sendAppButton {
box-shadow: none;
font-size: 21px;
margin-left: 15px;
padding-bottom: 11px;
padding-top: 11px; }
.LogoutAppUpsell .contents .formErrorMessage {
color: #ffdfdf; }
.LogoutAppUpsell .header {
font-size: 15px;
font-weight: bold; }
.LogoutAppUpsell .message {
color: #555;
line-height: 15px;
margin-bottom: 20px;
margin-top: 5px; }
.App.full .LogoutAppUpsell .contents {
z-index: 1; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.MobileLandingPage {
background-color: #fff;
/* stylelint-disable-next-line property-blacklist */
font-family: sans-serif;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.MobileLandingPage .topBackground {
background-image: url(https://s.pinimg.com/webapp/style/images/background-2eee85f9.jpg);
background-size: cover; }
.MobileLandingPage .topBackground .topContainer {
color: #fff; }
.MobileLandingPage .topBackground .topContainer .logo {
background: url(https://s.pinimg.com/webapp/style/images/white-pinterest-logo-1x-b5e851a6.png) no-repeat;
background-size: contain;
height: 26px;
width: 99px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .topBackground .topContainer .logo {
background-image: url(https://s.pinimg.com/webapp/style/images/white-pinterest-logo-2x-4a56380e.png); } }
.MobileLandingPage .androidButton {
background: url(https://s.pinimg.com/webapp/style/images/EN-1x-193adbd5.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px;
display: inline-block; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton {
background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-ea0db06a.png); } }
.MobileLandingPage .iosButton {
background: url(https://s.pinimg.com/webapp/style/images/EN-1x-6f0f8e76.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px;
display: inline-block; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton {
background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-1bfaab3e.png); } }
.MobileLandingPage .androidButton.CS {
background: url(https://s.pinimg.com/webapp/style/images/CS-1x-aa88f4fd.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.CS {
background-image: url(https://s.pinimg.com/webapp/style/images/CS-2x-1f99325c.png); } }
.MobileLandingPage .iosButton.CS {
background: url(https://s.pinimg.com/webapp/style/images/CS-1x-57b27437.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.CS {
background-image: url(https://s.pinimg.com/webapp/style/images/CS-2x-387b6b84.png); } }
.MobileLandingPage .androidButton.DA {
background: url(https://s.pinimg.com/webapp/style/images/DA-1x-b3212f93.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.DA {
background-image: url(https://s.pinimg.com/webapp/style/images/DA-2x-881f535b.png); } }
.MobileLandingPage .iosButton.DA {
background: url(https://s.pinimg.com/webapp/style/images/DA-1x-73095d1e.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.DA {
background-image: url(https://s.pinimg.com/webapp/style/images/DA-2x-f75e4549.png); } }
.MobileLandingPage .androidButton.DE {
background: url(https://s.pinimg.com/webapp/style/images/DE-1x-195f2284.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.DE {
background-image: url(https://s.pinimg.com/webapp/style/images/DE-2x-73bba6d5.png); } }
.MobileLandingPage .iosButton.DE {
background: url(https://s.pinimg.com/webapp/style/images/DE-1x-9a33f8c5.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.DE {
background-image: url(https://s.pinimg.com/webapp/style/images/DE-2x-81d4e358.png); } }
.MobileLandingPage .androidButton.EL {
background: url(https://s.pinimg.com/webapp/style/images/EL-1x-d5e9cffb.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.EL {
background-image: url(https://s.pinimg.com/webapp/style/images/EL-2x-75dbffaf.png); } }
.MobileLandingPage .iosButton.EL {
background: url(https://s.pinimg.com/webapp/style/images/EL-1x-c47b5f4b.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.EL {
background-image: url(https://s.pinimg.com/webapp/style/images/EL-2x-f94ceee4.png); } }
.MobileLandingPage .androidButton.EN {
background: url(https://s.pinimg.com/webapp/style/images/EN-1x-193adbd5.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.EN {
background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-ea0db06a.png); } }
.MobileLandingPage .iosButton.EN {
background: url(https://s.pinimg.com/webapp/style/images/EN-1x-6f0f8e76.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.EN {
background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-1bfaab3e.png); } }
.MobileLandingPage .androidButton.ES {
background: url(https://s.pinimg.com/webapp/style/images/ES-1x-5d4df5f0.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.ES {
background-image: url(https://s.pinimg.com/webapp/style/images/ES-2x-4b31e0d2.png); } }
.MobileLandingPage .iosButton.ES {
background: url(https://s.pinimg.com/webapp/style/images/ES-1x-43d3ab96.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.ES {
background-image: url(https://s.pinimg.com/webapp/style/images/ES-2x-a31d918b.png); } }
.MobileLandingPage .androidButton.FI {
background: url(https://s.pinimg.com/webapp/style/images/FI-1x-df009e22.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.FI {
background-image: url(https://s.pinimg.com/webapp/style/images/FI-2x-93552fb9.png); } }
.MobileLandingPage .iosButton.FI {
background: url(https://s.pinimg.com/webapp/style/images/FI-1x-99cb37da.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.FI {
background-image: url(https://s.pinimg.com/webapp/style/images/FI-2x-6cd4e75f.png); } }
.MobileLandingPage .androidButton.FR {
background: url(https://s.pinimg.com/webapp/style/images/FR-1x-76258add.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.FR {
background-image: url(https://s.pinimg.com/webapp/style/images/FR-2x-892d382a.png); } }
.MobileLandingPage .iosButton.FR {
background: url(https://s.pinimg.com/webapp/style/images/FR-1x-a1b11f36.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.FR {
background-image: url(https://s.pinimg.com/webapp/style/images/FR-2x-60ddb3dc.png); } }
.MobileLandingPage .androidButton.HU {
background: url(https://s.pinimg.com/webapp/style/images/HU-1x-f5a33374.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.HU {
background-image: url(https://s.pinimg.com/webapp/style/images/HU-2x-3cf19ccb.png); } }
.MobileLandingPage .iosButton.HU {
background: url(https://s.pinimg.com/webapp/style/images/HU-1x-ecfb98ab.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.HU {
background-image: url(https://s.pinimg.com/webapp/style/images/HU-2x-801f2f76.png); } }
.MobileLandingPage .androidButton.ID {
background: url(https://s.pinimg.com/webapp/style/images/ID-1x-fc856302.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.ID {
background-image: url(https://s.pinimg.com/webapp/style/images/ID-2x-60763725.png); } }
.MobileLandingPage .iosButton.ID {
background: url(https://s.pinimg.com/webapp/style/images/ID-1x-7723e800.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.ID {
background-image: url(https://s.pinimg.com/webapp/style/images/ID-2x-511fb06d.png); } }
.MobileLandingPage .androidButton.IT {
background: url(https://s.pinimg.com/webapp/style/images/IT-1x-78215d79.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.IT {
background-image: url(https://s.pinimg.com/webapp/style/images/IT-2x-f06d21d3.png); } }
.MobileLandingPage .iosButton.IT {
background: url(https://s.pinimg.com/webapp/style/images/IT-1x-eb49e52c.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.IT {
background-image: url(https://s.pinimg.com/webapp/style/images/IT-2x-4e1ebffc.png); } }
.MobileLandingPage .androidButton.JA {
background: url(https://s.pinimg.com/webapp/style/images/JA-1x-e4d2e103.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.JA {
background-image: url(https://s.pinimg.com/webapp/style/images/JA-2x-613b7a1c.png); } }
.MobileLandingPage .iosButton.JA {
background: url(https://s.pinimg.com/webapp/style/images/JA-1x-e9625ac6.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.JA {
background-image: url(https://s.pinimg.com/webapp/style/images/JA-2x-e4949c87.png); } }
.MobileLandingPage .androidButton.KO {
background: url(https://s.pinimg.com/webapp/style/images/KO-1x-d08dd546.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.KO {
background-image: url(https://s.pinimg.com/webapp/style/images/KO-2x-82063d73.png); } }
.MobileLandingPage .iosButton.KO {
background: url(https://s.pinimg.com/webapp/style/images/KO-1x-3699e0ab.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.KO {
background-image: url(https://s.pinimg.com/webapp/style/images/KO-2x-ddc06527.png); } }
.MobileLandingPage .androidButton.ML {
background: url(https://s.pinimg.com/webapp/style/images/ML-1x-0069db8e.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.ML {
background-image: url(https://s.pinimg.com/webapp/style/images/ML-2x-85c22418.png); } }
.MobileLandingPage .iosButton.ML {
background: url(https://s.pinimg.com/webapp/style/images/ML-1x-cfe4f86a.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.ML {
background-image: url(https://s.pinimg.com/webapp/style/images/ML-2x-482d4428.png); } }
.MobileLandingPage .androidButton.NL {
background: url(https://s.pinimg.com/webapp/style/images/NL-1x-ff73753a.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.NL {
background-image: url(https://s.pinimg.com/webapp/style/images/NL-2x-8c8e0858.png); } }
.MobileLandingPage .iosButton.NL {
background: url(https://s.pinimg.com/webapp/style/images/NL-1x-3926d2dd.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.NL {
background-image: url(https://s.pinimg.com/webapp/style/images/NL-2x-ffcdfef9.png); } }
.MobileLandingPage .androidButton.NN {
background: url(https://s.pinimg.com/webapp/style/images/NN-1x-a9972684.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.NN {
background-image: url(https://s.pinimg.com/webapp/style/images/NN-2x-85d7db2a.png); } }
.MobileLandingPage .iosButton.NN {
background: url(https://s.pinimg.com/webapp/style/images/NN-1x-6e36a313.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.NN {
background-image: url(https://s.pinimg.com/webapp/style/images/NN-2x-fd2478e8.png); } }
.MobileLandingPage .androidButton.PL {
background: url(https://s.pinimg.com/webapp/style/images/PL-1x-dc76138d.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.PL {
background-image: url(https://s.pinimg.com/webapp/style/images/PL-2x-56d0226f.png); } }
.MobileLandingPage .iosButton.PL {
background: url(https://s.pinimg.com/webapp/style/images/PL-1x-3a5b9eb6.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.PL {
background-image: url(https://s.pinimg.com/webapp/style/images/PL-2x-3cc909a8.png); } }
.MobileLandingPage .androidButton.PT {
background: url(https://s.pinimg.com/webapp/style/images/PT-1x-61d44f78.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.PT {
background-image: url(https://s.pinimg.com/webapp/style/images/PT-2x-91f7acfc.png); } }
.MobileLandingPage .iosButton.PT {
background: url(https://s.pinimg.com/webapp/style/images/PT-1x-fc9e1aa2.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.PT {
background-image: url(https://s.pinimg.com/webapp/style/images/PT-2x-e272dbd6.png); } }
.MobileLandingPage .androidButton.RO {
background: url(https://s.pinimg.com/webapp/style/images/RO-1x-fda1c018.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.RO {
background-image: url(https://s.pinimg.com/webapp/style/images/RO-2x-d48881c4.png); } }
.MobileLandingPage .iosButton.RO {
background: url(https://s.pinimg.com/webapp/style/images/RO-1x-18736a64.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.RO {
background-image: url(https://s.pinimg.com/webapp/style/images/RO-2x-c762cab0.png); } }
.MobileLandingPage .androidButton.RU {
background: url(https://s.pinimg.com/webapp/style/images/RU-1x-65d3a95b.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.RU {
background-image: url(https://s.pinimg.com/webapp/style/images/RU-2x-0ce2c757.png); } }
.MobileLandingPage .iosButton.RU {
background: url(https://s.pinimg.com/webapp/style/images/RU-1x-ce1d81a3.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.RU {
background-image: url(https://s.pinimg.com/webapp/style/images/RU-2x-b89abd86.png); } }
.MobileLandingPage .androidButton.SK {
background: url(https://s.pinimg.com/webapp/style/images/SK-1x-66e29846.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.SK {
background-image: url(https://s.pinimg.com/webapp/style/images/SK-2x-16880fe3.png); } }
.MobileLandingPage .iosButton.SK {
background: url(https://s.pinimg.com/webapp/style/images/SK-1x-ac41a55d.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.SK {
background-image: url(https://s.pinimg.com/webapp/style/images/SK-2x-20b58101.png); } }
.MobileLandingPage .androidButton.SV {
background: url(https://s.pinimg.com/webapp/style/images/SV-1x-2bad06b4.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.SV {
background-image: url(https://s.pinimg.com/webapp/style/images/SV-2x-502a5a32.png); } }
.MobileLandingPage .iosButton.SV {
background: url(https://s.pinimg.com/webapp/style/images/SV-1x-b3f99f27.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.SV {
background-image: url(https://s.pinimg.com/webapp/style/images/SV-2x-b1271639.png); } }
.MobileLandingPage .androidButton.TH {
background: url(https://s.pinimg.com/webapp/style/images/TH-1x-66e29846.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.TH {
background-image: url(https://s.pinimg.com/webapp/style/images/TH-2x-16880fe3.png); } }
.MobileLandingPage .iosButton.TH {
background: url(https://s.pinimg.com/webapp/style/images/TH-1x-afac524b.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.TH {
background-image: url(https://s.pinimg.com/webapp/style/images/TH-2x-7ecf42ba.png); } }
.MobileLandingPage .androidButton.TL {
background: url(https://s.pinimg.com/webapp/style/images/TL-1x-a001709a.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.TL {
background-image: url(https://s.pinimg.com/webapp/style/images/TL-2x-58021b84.png); } }
.MobileLandingPage .iosButton.TL {
background: url(https://s.pinimg.com/webapp/style/images/TL-1x-31d0bc83.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.TL {
background-image: url(https://s.pinimg.com/webapp/style/images/TL-2x-3187e1aa.png); } }
.MobileLandingPage .androidButton.TR {
background: url(https://s.pinimg.com/webapp/style/images/TR-1x-f7dc0333.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.TR {
background-image: url(https://s.pinimg.com/webapp/style/images/TR-2x-4585987c.png); } }
.MobileLandingPage .iosButton.TR {
background: url(https://s.pinimg.com/webapp/style/images/TR-1x-6f0f8e76.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.TR {
background-image: url(https://s.pinimg.com/webapp/style/images/TR-2x-1bfaab3e.png); } }
.MobileLandingPage .androidButton.UK {
background: url(https://s.pinimg.com/webapp/style/images/UK-1x-9ecb075c.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.UK {
background-image: url(https://s.pinimg.com/webapp/style/images/UK-2x-25a04f9a.png); } }
.MobileLandingPage .iosButton.UK {
background: url(https://s.pinimg.com/webapp/style/images/UK-1x-6f0f8e76.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.UK {
background-image: url(https://s.pinimg.com/webapp/style/images/UK-2x-1bfaab3e.png); } }
.MobileLandingPage .androidButton.VI {
background: url(https://s.pinimg.com/webapp/style/images/VI-1x-aba34925.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .androidButton.VI {
background-image: url(https://s.pinimg.com/webapp/style/images/VI-2x-f245f353.png); } }
.MobileLandingPage .iosButton.VI {
background: url(https://s.pinimg.com/webapp/style/images/VI-1x-474f64a4.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .iosButton.VI {
background-image: url(https://s.pinimg.com/webapp/style/images/VI-2x-119d560d.png); } }
.MobileLandingPage .bottom .textSection {
color: #333; }
.MobileLandingPage .bottom .textSection .sectionTitle {
font-size: 24px;
line-height: 1.125; }
.MobileLandingPage .bottom .textSection .sectionContent {
font-size: 14px;
line-height: 1.5; }
.MobileLandingPage .bottomNav {
border-top: 1px solid #e3e3e3;
font-size: 14px; }
.MobileLandingPage .bottomNav .bottomLink a {
font-weight: normal; }
.MobileLandingPage .bottomNav .bottomLink .badge {
background: url(https://s.pinimg.com/webapp/style/images/badge-1x-4c987eec.png) no-repeat;
background-size: contain;
height: 21px;
width: 21px;
display: inline-block;
padding-bottom: 4px;
vertical-align: middle; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .bottomNav .bottomLink .badge {
background-image: url(https://s.pinimg.com/webapp/style/images/badge-2x-85ba0fac.png); } }
/* desktop.scss */
.MobileLandingPage {
bottom: 0;
position: absolute;
top: 0;
width: 100%; }
.MobileLandingPage .topBackground {
height: 450px; }
.MobileLandingPage .topBackground .topContainer {
margin: 0 auto;
padding: 95px 0 40px;
position: relative;
width: 950px; }
.MobileLandingPage .topBackground .topContainer .title {
font-size: 60px;
line-height: 65px;
margin-top: 10px;
width: 450px; }
.MobileLandingPage .topBackground .topContainer .subtitle {
font-size: 18px;
margin-top: 33px; }
.MobileLandingPage .topBackground .topContainer .buttons {
margin-top: 17px; }
.MobileLandingPage .topBackground .topContainer .buttons .appStoreButton {
margin-right: 15px; }
.MobileLandingPage .topBackground .topContainer .shortUrlText {
font-size: 14px;
margin: 15px 0 40px; }
.MobileLandingPage .topBackground .topContainer .shortUrlText a {
color: #fff;
text-decoration: underline; }
.MobileLandingPage .topBackground .topContainer .topImage {
position: absolute;
top: 35px; }
.MobileLandingPage .topBackground .topContainer .topImage.iOS {
background: url(https://s.pinimg.com/webapp/style/images/ios-1x-f2d643f4.png) no-repeat;
background-size: contain;
height: 468px;
width: 382px;
left: 520px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .topBackground .topContainer .topImage.iOS {
background-image: url(https://s.pinimg.com/webapp/style/images/ios-2x-93c02442.png); } }
.MobileLandingPage .topBackground .topContainer .topImage.android {
background: url(https://s.pinimg.com/webapp/style/images/android-1x-0a553f36.png) no-repeat;
background-size: contain;
height: 469px;
width: 306px;
left: 550px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .topBackground .topContainer .topImage.android {
background-image: url(https://s.pinimg.com/webapp/style/images/android-2x-64f466a6.png); } }
.MobileLandingPage .topBackground .topContainer .topImage.multi {
background: url(https://s.pinimg.com/webapp/style/images/multi-1x-afebd48e.png) no-repeat;
background-size: contain;
height: 464px;
width: 423px;
left: 500px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPage .topBackground .topContainer .topImage.multi {
background-image: url(https://s.pinimg.com/webapp/style/images/multi-2x-367ec694.png); } }
.MobileLandingPage .bottom {
margin: 0 auto;
overflow: hidden;
padding-top: 50px;
width: 950px; }
.MobileLandingPage .bottom .textSection {
float: left;
height: 100px;
width: 475px; }
.MobileLandingPage .bottom .textSection .sectionContent {
width: 360px; }
.MobileLandingPage .bottomNav {
background-color: #fff;
line-height: 50px;
margin: 20px auto 0;
width: 950px; }
.MobileLandingPage .bottomNav .bottomLink {
display: inline-block;
margin-right: 40px; }
.MobileLandingPage .bottomNav .bottomLink:first-child {
margin-right: 330px; }
.RelatedItemsCarousel {
background-color: #fff;
height: 100%;
-webkit-mask-image: -webkit-radial-gradient(#fff, #000);
mask-image: radial-gradient(#fff, #000);
overflow: hidden;
position: absolute;
width: 100%; }
.RelatedItemsCarousel .imageCarousel {
overflow-x: scroll;
overflow-y: hidden;
padding-left: 20px;
padding-right: 19px;
white-space: nowrap;
width: auto; }
.RelatedItemsCarousel .carouselImage {
background: #fff;
background-size: cover;
border-radius: 6px;
display: block;
height: auto;
min-height: 100%;
min-width: 100%;
overflow: hidden;
padding: 2px;
-webkit-transition: opacity .1s ease-in-out;
transition: opacity .1s ease-in-out;
width: auto; }
.RelatedItemsCarousel .imageContainer {
border-radius: 6px;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.25);
display: inline-block;
height: 200px;
overflow: hidden;
padding-right: 1px;
position: relative;
width: 200px; }
.BasicSignupModule {
background-color: #fff;
border-radius: 6px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
height: 460px;
margin: 14px 7px 0; }
.BasicSignupModule .contentContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
.BasicSignupModule .title {
font-size: 30px;
font-weight: bold;
margin: 0 auto 20px;
text-align: center;
width: 400px; }
.BoardFooter {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-top: 1px solid #efefef;
visibility: hidden;
width: 100%; }
.BoardFooter .tipLabel {
color: #555;
display: inline;
font-size: 24px;
font-weight: bold; }
.BoardFooter .tipLabel .tipRed {
color: #bd081c; }
.BoardFooter .tipWrapper {
margin: 24px 0; }
.BottomBanner .bannerContainer {
font-family: HelveticaNeue-Bold, 'Helvetica', arial;
background: #2ab6dd;
bottom: 0;
color: #fff;
font-size: 28px;
line-height: 35px;
max-height: 100vh;
opacity: .95;
padding-bottom: 15px;
padding-top: 15px;
position: fixed;
text-align: center;
width: 100%;
z-index: 101; }
.BottomBanner .bannerContainer .bannerClose {
width: 16px;
height: 17px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -236px no-repeat;
cursor: pointer;
position: absolute;
top: 20px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.BottomBanner .bannerContainer .bannerClose {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -370px -187px;
background-size: 399px 382px; } }
.BottomBanner .bannerContainer .bannerText {
display: inline-block;
padding-left: 100px;
padding-right: 100px; }
.BottomBanner .bannerContainer .bannerText.hidden {
display: none; }
.BottomBanner .bannerContainer .bannerText.fadeOut {
-webkit-animation: fadeOutUp .3s;
animation: fadeOutUp .3s; }
.BottomBanner .bannerContainer .bannerText a,
.BottomBanner .bannerContainer .bannerText a:hover,
.BottomBanner .bannerContainer .bannerText a:focus {
color: #fff; }
.BottomBanner .bannerContainer .transitionBannerContainer .transitionText {
display: inline-block;
padding-left: 40px;
padding-right: 40px; }
.BottomBanner .bannerContainer .transitionBannerContainer.hidden {
display: none; }
.BottomBanner .bannerContainer .transitionBannerContainer.fadeIn {
-webkit-animation: fadeInUp .3s;
animation: fadeInUp .3s; }
.BottomBanner .bannerContainer .buttonWrapper {
display: inline; }
.BottomBanner .bannerContainer .buttonWrapper .nextBannerButton {
background: #fff;
border: 1px solid #fff;
color: #5bd543;
font-size: 24px;
height: 38px;
margin-left: 20px;
padding: 2px 6px;
width: 130px; }
.BottomBanner .bannerContainer .buttonWrapper .transitionBannerButton {
background: #fff;
border: none;
border-radius: 4px;
height: 36px; }
.BottomBanner .bannerContainer .buttonWrapper .transitionBannerButton .buttonText {
color: #2ab6dd;
display: block;
font-size: 14px;
font-weight: bold;
letter-spacing: -.3px;
line-height: 1.1; }
.BottomBanner .bannerContainer.done {
background: #5bd543; }
.BottomBanner .heartIcon {
width: 23px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -22px -325px no-repeat;
display: inline-block; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.BottomBanner .heartIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -21px -320px;
background-size: 399px 382px; } }
.Breadcrumbs {
border-bottom: 1px solid #dadada;
position: relative; }
.Breadcrumbs .breadcrumbsWrapper {
font-size: 18px;
padding: 10px 0; }
.Breadcrumbs .breadcrumbsWrapper li {
color: #555;
font-weight: bold; }
.Breadcrumbs .breadcrumbsWrapper li .breadcrumbArrow {
display: inline;
margin: 0 15px 0 5px; }
.Breadcrumbs .breadcrumbsWrapper li .breadcrumbArrow em {
width: 7px;
height: 10px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -362px no-repeat;
pointer-events: auto;
position: absolute;
top: 50%;
-webkit-transform: translateY(-3px);
transform: translateY(-3px); }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Breadcrumbs .breadcrumbsWrapper li .breadcrumbArrow em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -389px -60px;
background-size: 399px 382px; } }
.Breadcrumbs .breadcrumbsWrapper ol {
list-style-type: none;
margin: 0;
padding: 0; }
.Breadcrumbs .breadcrumbsWrapper ol li {
display: inline; }
.Breadcrumbs .breadcrumbsWrapper ol li a {
color: #555;
font-size: 15px; }
.Breadcrumbs .breadcrumbsWrapper ol li a .last {
color: #999; }
.Breadcrumbs .breadcrumbsWrapper ol li a .showMoreTitleButton {
cursor: pointer;
font-size: 12px; }
.FacebookConnectLink {
cursor: pointer;
display: inline-block; }
.FacebookConnectLink .facebookIcon {
background: url(https://s.pinimg.com/webapp/style/images/fb-icon-1x-bf894c29.png) no-repeat;
background-size: contain;
height: 16px;
width: 16px;
display: inline-block;
vertical-align: bottom; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.FacebookConnectLink .facebookIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/fb-icon-2x-0484932b.png); } }
.FacebookConnectLink .facebookText {
color: #3b5998;
display: inline-block;
font-size: 15px;
font-weight: bold;
vertical-align: middle; }
.FacebookConnectLink .facebookText:hover {
color: #466bb7; }
.FacebookConnectLink.facebookSignup {
background: #3b5998;
border: 0;
border-radius: 3px;
display: inline-block;
padding: 10px 20px;
text-align: center;
text-shadow: none; }
.FacebookConnectLink.facebookSignup .facebookText {
color: #fff;
font-size: 14px;
font-weight: bold; }
.FacebookContact {
border-bottom: 1px solid #ccc;
cursor: pointer;
padding: 10px 10px 10px 15px;
position: relative; }
.FacebookContact .facebookWrapper {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
float: left;
height: 20px;
margin-left: 5px;
margin-top: 6px;
width: 306px; }
.FacebookContact .name {
font-size: 15px; }
.FacebookContact .image {
display: inline-block;
float: left;
margin-right: 5px;
position: relative;
vertical-align: middle;
width: 30px; }
.ContactsList li, .ContactsList > a {
border-top: 1px solid #eaeaea;
cursor: pointer;
padding: 12px; }
.ContactsList li:first-of-type, .ContactsList > a:first-of-type {
border-top: 0; }
.ContactsList a {
display: list-item;
list-style: none; }
.ContactsList .ContactsListItem, .ContactsList .socialConnectItem {
border-top: 1px solid #eaeaea;
padding: 12px; }
.ContactsList .ContactsListItemFirst {
border-top: 0; }
.ContactsList .userContact .imageBlockContentBody {
color: #999; }
.ContactsList .socialConnectFacebook .imageBlockContentTitle,
.ContactsList .socialConnectTwitter .imageBlockContentTitle,
.ContactsList .socialConnectGplus .imageBlockContentTitle,
.ContactsList .socialConnectYahoo .imageBlockContentTitle {
line-height: 32px; }
.ContactsList .socialConnectFacebook .imageBlockContentBody,
.ContactsList .socialConnectTwitter .imageBlockContentBody,
.ContactsList .socialConnectGplus .imageBlockContentBody,
.ContactsList .socialConnectYahoo .imageBlockContentBody {
display: none; }
.ContactsList .socialConnectFacebook .left em,
.ContactsList .socialConnectTwitter .left em,
.ContactsList .socialConnectGplus .left em,
.ContactsList .socialConnectYahoo .left em {
display: block; }
.ContactsList .socialConnectFacebook em {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -284px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ContactsList .socialConnectFacebook em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -33px -342px;
background-size: 428px 427px; } }
.ContactsList .socialConnect-facebook em {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -284px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ContactsList .socialConnect-facebook em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -33px -342px;
background-size: 428px 427px; } }
.ContactsList .socialConnectGplus em {
width: 33px;
height: 33px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -181px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ContactsList .socialConnectGplus em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -342px -176px;
background-size: 428px 427px; } }
.ContactsList .socialConnect-gplus em {
width: 33px;
height: 33px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -181px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ContactsList .socialConnect-gplus em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -342px -176px;
background-size: 428px 427px; } }
.ContactsList .socialConnectTwitter em {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -68px -384px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ContactsList .socialConnectTwitter em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -342px -276px;
background-size: 428px 427px; } }
.ContactsList .socialConnect-twitter em {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -68px -384px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ContactsList .socialConnect-twitter em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -342px -276px;
background-size: 428px 427px; } }
.ContactsList .socialConnectYahoo em {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -384px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ContactsList .socialConnectYahoo em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -99px -342px;
background-size: 428px 427px; } }
.ContactsList .socialConnect-yahoo em {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -384px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ContactsList .socialConnect-yahoo em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -99px -342px;
background-size: 428px 427px; } }
.ContactsList.compact li {
border-top: 0;
padding: 4px 8px; }
.ContactsList.sendShare li, .ContactsList.sendShare a {
overflow: hidden; }
.ContactsList.sendShare li:hover {
background: rgba(0, 0, 0, 0.08); }
.ContactsList.sendShare .socialConnectCta {
height: 32px; }
.ContactsList.sendShare .socialConnectCta .left em {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -34px -384px no-repeat;
display: block; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ContactsList.sendShare .socialConnectCta .left em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -342px -243px;
background-size: 428px 427px; } }
.ContactsList.sendShare .socialConnectCta .right {
height: 32px;
vertical-align: middle; }
.ContactsList.sendShare .socialConnectCta .right .imageBlockContentTitle {
color: #666;
font-size: 13px; }
.ContactsList.sendShare .socialConnectCta .right .imageBlockContentBody {
color: #666; }
.ContactsList.sendShareBrio {
overflow-y: scroll; }
.ContactsList.sendShareBrio li {
border-top: 0;
padding: 0 20px; }
.ContactsList.sendShareBrio li:hover {
background: rgba(0, 0, 0, 0.08); }
.ContactsList.sendShareBrio .socialConnectCta {
height: 44px;
padding: 4px 0; }
.ContactsList.sendShareBrio .socialConnectCta .left em {
width: 44px;
height: 44px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -184px -296px no-repeat;
display: block; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ContactsList.sendShareBrio .socialConnectCta .left em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -291px -184px;
background-size: 428px 427px; } }
.ContactsList.sendShareBrio .socialConnectCta .right {
height: 44px;
vertical-align: middle; }
.ContactsList.sendShareBrio .socialConnectCta .right .imageBlockContentTitle {
color: #555;
font-size: 18px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
width: 235px; }
.ContactsList.sendShareBrio .socialConnectCta .right .imageBlockContentBody {
color: #b5b5b5; }
.ContactsList .socialConnect:first-of-type {
border-top: 1px solid #eaeaea; }
.ContactsList .sendToEmail.unclickable a {
cursor: default; }
.ContactsList .sendToEmail .selectableEmailItem {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.ContactsList .sendToEmail .left {
margin-right: 12px; }
.ContactsList .sendToEmail .icon {
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif;
background-color: #999;
border-radius: 50%;
color: #fff;
font-size: 20px;
font-weight: bold;
height: 32px;
line-height: 32px;
text-align: center;
width: 32px; }
.ContactsList .sendToEmail .icon.typingEmail em {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -250px no-repeat;
display: block; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ContactsList .sendToEmail .icon.typingEmail em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: 0 -342px;
background-size: 428px 427px; } }
.ContactsList .sendToEmail .title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
font-weight: bold;
margin: 1px 0; }
.ContactsList .sendToEmail .subtitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #b7b7b7;
font-weight: normal;
margin: 2px 0 0; }
.ContactsList .socialConnect .left {
float: left;
padding-right: 10px; }
.ContactsList .socialConnect .icon {
height: 32px;
width: 32px; }
.ContactsList .socialConnect .icon em {
display: block; }
.ContactsList .socialConnect .title {
color: #211922;
font-weight: bold;
line-height: 32px; }
.DescriptiveH1Title .pinPageHeaderTitle,
.DescriptiveH1Title .pinPageHeaderTitleSmall {
color: #555;
font-size: 48px;
font-weight: bold;
padding-top: 20px; }
.DescriptiveH1Title .pinPageHeaderTitleSmall {
font-size: 36px; }
.EmailContact {
border-bottom: 1px solid #ccc;
cursor: pointer;
padding: 20px;
position: relative; }
.EmailContact .check {
position: absolute;
right: 20px;
top: 25px; }
.EmailContact .email {
color: #808080;
font-size: 12px;
margin-left: 5px; }
.EmailContact .emailWrapper {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 20px;
width: 380px; }
.EmailContact .name {
font-size: 15px; }
.EmailContact.disabled {
opacity: .4; }
.FirstBoardCreate .BoardLabel {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border: 0;
cursor: pointer; }
.FirstBoardCreate .BoardLabel .nameAndIcons .name {
font-size: 15px;
line-height: 30px; }
.FirstBoardCreate .BoardLabel .repinBtn {
display: none;
float: right;
margin-left: 7px;
margin-top: 1px;
position: relative;
z-index: 1; }
.FirstBoardCreate .BoardLabel .BoardIcons, .FirstBoardCreate .BoardLabel .icon {
display: none; }
.FirstBoardCreate .SelectList:focus {
outline: none; }
.FirstPinCreate {
border-radius: 6px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative; }
.FirstPinCreate::after {
clear: both;
content: "";
display: table; }
.FirstPinCreate .spacer {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
.FirstPinCreate .stackedContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.FirstPinCreate .pinCreateContainer {
margin: auto;
max-height: 100vh;
width: 660px; }
.FirstPinCreate .mainContainer {
background-color: #fff;
border-radius: 6px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
margin: 0 auto;
max-height: 535px;
min-height: 490px;
overflow: auto;
position: relative;
width: 660px; }
.FirstPinCreate .mainContainer .leftContainer {
border-right: 1px solid #efefef;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
.FirstPinCreate .mainContainer .rightContainer {
background-color: #fff;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
overflow-x: hidden;
overflow-y: scroll;
padding-bottom: 25px; }
.FirstPinCreate.pinning {
pointer-events: none; }
.FirstPinCreate .Pin {
margin-left: auto;
margin-right: auto;
overflow: hidden; }
.FirstPinCreate .Pin .pinImg {
opacity: 1; }
.FirstPinCreate .Pin.summary .pinMeta .pinDescription {
max-width: 165px; }
.FirstPinCreate .Pin.summary .pinMeta .TextField {
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */ }
.FirstPinCreate .pinContainer {
display: table;
height: 100%;
left: 0;
width: 330px; }
.FirstPinCreate .pinContainer .pinModuleHolder {
display: table-cell;
vertical-align: middle; }
.FirstPinCreate .pinContainer .pinWrapper .pinHolder .Image {
max-height: 320px;
overflow: hidden; }
.FirstPinCreate .pinContainer .pinWrapper .pinHolder .Image img {
height: auto; }
.FirstPinCreate .cancelButton.pinCreateClose {
margin: 20px;
position: absolute;
right: 0;
z-index: 2; }
.FirstPinCreate .seoNuxHeaderText {
font-family: HelveticaNeue-Bold, 'Helvetica', arial;
color: #fff;
font-size: 28px;
margin-bottom: 10px;
text-align: center;
z-index: 2; }
.FirstPinCreate .seoNuxBannerText {
font-family: HelveticaNeue-Bold, 'Helvetica', arial;
background: #2ab6dd;
bottom: 0;
color: #fff;
font-size: 28px;
opacity: .95;
padding: 15px 40px;
position: fixed;
text-align: center;
width: 100vw;
z-index: 2; }
.FirstPinCreate .seoNuxBannerText.success {
background: #42d321; }
.BoardSuggestionSummary {
color: #999;
font-size: 13px;
font-weight: normal;
margin: 0 14px;
text-align: center; }
.BoardSuggestionSummary .boardName {
font-weight: bolder;
height: 17px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.EmailInviteMerchandising .container {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
overflow: hidden;
position: relative; }
.EmailInviteMerchandising .content {
height: 232px;
padding: 14px; }
.EmailInviteMerchandising .empty {
padding: 14px; }
.EmailInviteMerchandising .empty h2 {
font-size: 14px; }
.EmailInviteMerchandising h2 {
color: #5f5f5f;
font-size: 16px;
font-weight: bolder; }
.EmailInviteMerchandising .arrow {
width: 9px;
height: 13px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -268px no-repeat;
float: right;
margin: 3px 0 0; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.EmailInviteMerchandising .arrow {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -389px -14px;
background-size: 399px 382px; } }
.EmailInviteMerchandising .upsell {
background: inherit;
height: 232px;
margin-left: 100%;
padding: 14px;
position: absolute;
top: 0;
-webkit-transition: all .5s ease-in;
transition: all .5s ease-in;
width: 208px; }
.EmailInviteMerchandising .upsell.slideIn {
margin-left: 0; }
.EmailInviteMerchandising .upsell.list {
overflow: scroll; }
.EmailInviteMerchandising .hidden {
visibility: hidden; }
.EmailInviteMerchandising .list {
height: 156px;
margin: 7px 0;
overflow: hidden;
width: 100%; }
.EmailInviteMerchandising .footer {
border-top: 1px solid #e0e0e0; }
.EmailInviteMerchandising .footer .seeAllFriends {
color: #5f5f5f;
cursor: pointer;
display: inline-block;
margin-top: 14px;
width: 100%; }
.EmailInviteMerchandising .footer.legal {
border: 0;
color: #999;
font-size: .85em;
margin-top: 7px; }
.EmailInviteMerchandising.loading > .loadingContent {
display: block; }
.EmailInviteMerchandising.loading > .Spinner .spinnerMedium {
margin-top: -28px; }
.EmailInviteMerchandising .loadingContent {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 659;
display: none;
margin-top: 14px; }
.EmailInviteMerchandising .loadingContent .caption {
box-sizing: border-box;
color: #999;
font-size: 14px;
font-weight: bold;
padding: 0 14px;
position: absolute;
text-align: center;
top: 50%;
width: 100%; }
.FindFriendsContent .connectNetwork {
color: #333;
text-align: center;
margin: 99px auto 0;
width: 550px; }
.FindFriendsContent .connectNetwork p {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 17px;
margin: 0 0 1em; }
.FindFriendsContent .connectNetwork .bold {
font-weight: bold; }
.FindFriendsContent.showInNuxModal {
width: 656px; }
.FindFriendsContent .facebookNotConnected,
.FindFriendsContent .twitterNotConnected {
margin: 0 auto 18px; }
.FindFriendsContent .facebookNotConnected {
background: url(https://s.pinimg.com/webapp/style/images/empty_find_friends_facebook_logo-1x-327d9a91.png) no-repeat;
background-size: contain;
height: 81px;
width: 81px; }
.FindFriendsContent .twitterNotConnected {
background: url(https://s.pinimg.com/webapp/style/images/empty_find_friends_twitter_logo-1x-a3ce64c5.png) no-repeat;
background-size: contain;
height: 81px;
width: 81px; }
.FindFriendsContent.showInBrioNuxModal .connectNetwork {
margin: 60px auto 0;
width: 800px; }
.FindFriendsContent.showInBrioNuxModal .connectNetwork .findFriendsFacebookConnect,
.FindFriendsContent.showInBrioNuxModal .connectNetwork .findFriendsTwitterConnect {
border: 0;
border-radius: 6px;
color: #fff;
font-size: 22px;
font-weight: bold;
height: 70px;
line-height: 27px;
margin-top: 30px;
min-width: 324px; }
.FindFriendsContent.showInBrioNuxModal .connectNetwork .findFriendsFacebookConnect {
background: #3b5998; }
.FindFriendsContent.showInBrioNuxModal .connectNetwork .findFriendsTwitterConnect {
background: #55acee; }
.FindFriendsContent.showInBrioNuxModal .connectNetwork .connectToNetworkText {
color: #555;
font-size: 26px;
font-weight: bold;
line-height: 32px;
margin: 0 auto;
width: 572.5px; }
.FriendBoardRecommendationTile .boardRepTitle {
padding: 0; }
.FriendBoardRecommendationTiles.cyclerTimed {
background-color: #fff;
border-radius: 6px;
height: 100%; }
.FriendCenterMerchandising {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
height: 100%;
overflow: hidden;
position: relative;
text-align: center;
width: 236px; }
.FriendCenterMerchandising h1, .FriendCenterMerchandising h2, .FriendCenterMerchandising .header {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
color: #555;
display: block;
font-weight: 700;
margin: auto;
padding: 10px 7px;
width: 222px; }
.FriendCenterMerchandising h1 a, .FriendCenterMerchandising h2 a, .FriendCenterMerchandising .header a {
color: inherit; }
.FriendCenterMerchandising h1:hover, .FriendCenterMerchandising h2:hover, .FriendCenterMerchandising .header:hover {
color: #555; }
.FriendCenterMerchandising h1 {
font-size: 18px; }
.FriendCenterMerchandising h2 {
font-size: 14px; }
.FriendCenterMerchandising .fallbackContent {
position: absolute;
text-align: left; }
.FriendCenterMerchandising .suggestionContent {
background-color: #fff;
border-radius: 6px;
cursor: pointer;
position: absolute;
text-align: left; }
.FriendCenterMerchandising .centered {
left: 50%;
margin: 0 7px;
right: 50%; }
.FriendCenterMerchandising .sampleImage {
background: url(https://s.pinimg.com/webapp/style/images/friend-center-merch-sample-1x-00f6789b.jpg) no-repeat;
background-size: contain;
height: 215px;
width: 213px;
margin-left: 5px;
margin-top: 20px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.FriendCenterMerchandising .sampleImage {
background-image: url(https://s.pinimg.com/webapp/style/images/friend-center-merch-sample-2x-3db3782e.jpg); } }
.FriendCenterMerchandising.fixedHeight {
height: 346px; }
.FriendCenterMerchandising.fixedHeight .buttonContainer {
padding: 0 14px; }
.FriendCenterMerchandising .promoteContainer {
height: 322px;
text-align: left; }
.FriendCenterMerchandising .promoteContainer .footer {
padding: 0; }
.FriendCenterMerchandising .networkConnectContainer {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
box-sizing: border-box;
height: 100%;
margin-left: 236px;
margin-top: -322px;
position: relative;
text-align: left;
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-property: margin-left;
transition-property: margin-left;
width: 100%; }
.FriendCenterMerchandising .networkConnectContainer .header {
font-size: 12px;
padding: 0 14px 14px; }
.FriendCenterMerchandising .networkConnectContainer .findFriendLink {
display: block; }
.FriendCenterMerchandising .networkConnectContainer ul {
padding: 0 14px; }
.FriendCenterMerchandising .networkConnectContainer.slideIn {
margin-left: 0; }
.FriendCenterMerchandising .footer {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
bottom: 10px;
box-sizing: border-box;
display: table-row;
padding: 0 14px;
position: absolute;
text-align: left;
width: 100%; }
.FriendCenterMerchandising .footer .btn.gridItem {
bottom: 0; }
.FriendCenterMerchandising .footer .seeAllFriends {
color: #5f5f5f;
cursor: pointer;
display: inline-block;
font-size: 12px;
margin-top: 14px;
width: 100%; }
.FriendCenterMerchandising .footer .seeAllFriends .arrow {
width: 9px;
height: 13px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -268px no-repeat;
float: right;
margin: 0 0 0; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.FriendCenterMerchandising .footer .seeAllFriends .arrow {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -389px -14px;
background-size: 399px 382px; } }
.FriendCenterMerchandising.loading > .loadingContent {
display: block; }
.FriendCenterMerchandising.loading > .Spinner .spinnerMedium {
margin-top: -28px; }
.FriendCenterMerchandising .loadingContent {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 659;
display: none;
margin-top: 14px; }
.FriendCenterMerchandising .loadingContent .caption {
box-sizing: border-box;
color: #999;
font-size: 14px;
font-weight: bold;
padding: 0 14px;
position: absolute;
text-align: center;
top: 50%;
width: 100%; }
.InviteContact {
cursor: pointer;
display: table;
margin-left: 0;
opacity: 1;
padding: 7px 0;
position: relative;
table-layout: fixed;
-webkit-transition: all .5s ease-out;
transition: all .5s ease-out;
width: 100%; }
.InviteContact.disabled {
margin-left: 100%;
opacity: 0; }
.InviteContact.invited .addIcon {
width: 38px;
height: 38px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -365px -169px no-repeat;
background-color: #58b216;
border-radius: 50%; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.InviteContact.invited .addIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -260px -258px;
background-size: 428px 427px; } }
.InviteContact.invited .info {
color: #58b216; }
.InviteContact .addIcon {
width: 37px;
height: 38px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -365px -249px no-repeat;
display: table-cell; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.InviteContact .addIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: 0 -303px;
background-size: 428px 427px; } }
.InviteContact .info {
color: #5f5f5f;
display: table-cell;
overflow: hidden;
padding: 0 10px;
vertical-align: middle;
width: 100%; }
.InviteContact .singleLineText {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.InviteContact .name {
font-size: 13px;
font-weight: bold; }
.InviteContact .email {
color: #717171;
font-size: 11px;
margin-top: 2px; }
.InviteContact .dismiss {
cursor: pointer;
display: none;
margin-top: -11px;
padding: 5px;
position: absolute;
right: 0;
top: 50%; }
.InviteContact .dismiss .closeIcon {
width: 12px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -107px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.InviteContact .dismiss .closeIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -321px -271px;
background-size: 399px 382px; } }
.InviteContact:hover:not(.invited) .addIcon {
width: 37px;
height: 38px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -365px -289px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.InviteContact:hover:not(.invited) .addIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -38px -303px;
background-size: 428px 427px; } }
.InviteContact:hover:not(.invited) .info {
color: #bd081c; }
.InviteContact:hover .dismiss {
display: block; }
.SharedInterests {
color: #999;
font-size: 13px;
font-weight: normal;
margin: 3px 15px 5px 15px;
text-align: center; }
.HeroBasic {
background-color: #d8d8d8;
position: relative; }
.HeroBasic.heroWithoutImage .heroImage {
display: none; }
.HeroBasic.heroWithoutImage .heroContainer {
width: 500px; }
.HeroBasic .hero {
padding: 14px 0; }
.HeroBasic .heroBackgroundImage {
height: 100%;
position: absolute;
width: 100%; }
.HeroBasic .heroContainer {
background-color: #fff;
border-radius: 6px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 736px; }
.HeroBasic .heroBody {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 14px;
width: 472px; }
.HeroBasic .heroDivider {
background-color: #e7e7e7;
height: 1px;
margin-bottom: 14px; }
.HeroBasic .heroContent {
color: #333;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
.HeroBasic .heroContent p {
font-size: 14px; }
.HeroBasic .heroImage {
height: 100%;
width: 236px; }
.HeroBasic .heroButtons {
text-align: right; }
.HeroBasic.upsellHero {
font-size: 24px;
font-weight: bold; }
.HeroBasic.upsellHero .bodyText {
color: #fff;
display: inline-block;
margin-bottom: 10px;
margin-left: 80px;
margin-top: 10px; }
.HeroBasic.upsellHero .heroContainer {
background-color: transparent;
width: auto; }
.HeroBasic.upsellHero .iosButton {
display: inline-block;
height: 45px;
outline: none;
width: 151px; }
.HeroBasic.upsellHero .androidButton {
display: inline-block;
height: 45px;
margin-right: 10px;
outline: none;
width: 137px; }
.HeroBasic.upsellHero .upsellTextButtons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 10px 0;
width: 100%; }
.HeroBasic.upsellHero .hero {
padding: 0; }
.HeroBasic.upsellHero .appButtons {
display: inline-block;
margin-right: 80px;
margin-top: 2px;
min-width: 300px; }
.HeroFixEmail .heroSubtitle {
color: #4a4747 !important;
font-size: 15px !important;
margin-top: 15px; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.HeroHelperBase {
-webkit-transition: scale 1s ease-in-out;
transition: scale 1s ease-in-out; }
.HeroHelperBase .heroContainer {
background-color: #d8d8d8;
box-shadow: 0 1px 3px 0 rgba(255, 255, 255, 0.66);
padding-bottom: 14px;
padding-top: 14px; }
.HeroHelperBase .heroContent {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 4px;
overflow: hidden;
box-shadow: 0 1px 3px #999;
margin: 0 auto;
min-height: 40px;
padding-bottom: 9px;
position: relative;
width: 500px; }
.HeroHelperBase .heroMessage {
padding: 23px; }
.HeroHelperBase .nagClose {
width: 8px;
height: 8px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -315px -47px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
cursor: pointer;
position: absolute;
right: 8px;
top: 8px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.HeroHelperBase .nagClose {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -222px -201px;
background-size: 249px 231px; } }
.HeroHelperBase.heroWithBackground .heroContainer {
height: 240px;
padding-bottom: 0;
padding-top: 0;
position: relative;
text-align: center; }
.HeroHelperBase.heroWithBackground .heroContainer::after {
content: "";
display: inline-block;
height: 240px;
vertical-align: middle; }
.HeroHelperBase.heroWithBackground .heroContent {
display: inline-block;
text-align: left;
vertical-align: middle; }
.HeroHelperBase.heroWithBackground .heroMessage {
padding-bottom: 9px; }
.HeroHelperBase.heroWithBackground .heroMessage .heroHeader {
color: #333;
font-size: 18px;
line-height: 1.2;
margin-bottom: 7px; }
.HeroHelperBase.heroWithBackground .heroSubtitle {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #333;
font-size: 14px;
font-weight: normal;
padding-bottom: 15px;
position: relative; }
.HeroHelperBase.heroWithBackground .heroSubtitle .heroSeperator {
background-color: #e7e7e7;
bottom: 0;
height: 1px;
left: -23px;
position: absolute;
width: 500px; }
.HeroHelperBase.heroWithBackground .heroButtonsContainer {
overflow: hidden;
padding-top: 15px; }
.HeroHelperBase.heroWithBackground .heroButtonsContainer .heroButtonsLeft {
float: left; }
.HeroHelperBase.heroWithBackground .heroButtonsContainer .heroButtonsRight {
float: right; }
.HeroHelperBase.heroWithBackground .heroButtonsContainer .heroButtonsRight button:last-child {
margin-left: 8px; }
/* desktop.scss */
.HeroHelperBase.heroPushDown {
padding-top: 66px; }
.HeroPinFromEmail {
display: none;
font-size: 0; }
.HeroPinFromEmail .heroButtonsContainer {
margin-top: 21px; }
.HeroPinFromEmail .heroButton {
margin-right: 7px; }
.HeroPinFromEmail .heroContent {
height: 176px;
padding-bottom: 0;
width: 776px; }
.HeroPinFromEmail .heroHeader {
font-size: 20px;
line-height: 1.2;
margin-bottom: 7px; }
.HeroPinFromEmail .heroImage {
background: url(https://s.pinimg.com/webapp/style/images/hero_pin_from_email-1x-8e3c6642.jpg) no-repeat;
background-size: contain;
height: 176px;
width: 297px;
border-radius: 6px 0 0 6px;
display: inline-block;
margin-right: 20px;
vertical-align: middle; }
.HeroPinFromEmail .heroMessage {
display: inline-block;
padding: 0;
vertical-align: middle;
width: 459px; }
.HeroPinFromEmail .heroSubtitle {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
font-weight: normal; }
.HeroPinFromEmail .heroSubtitleLink {
color: #0084ff;
font-weight: bold; }
.HeroPinItButton {
display: none;
font-size: 0; }
body[data-pinterest-extension-installed="true"] .HeroPinItButton {
display: none; }
.HeroPinItButton .heroButtonsContainer {
margin-top: 21px; }
.HeroPinItButton .heroButton {
margin-right: 7px; }
.HeroPinItButton .heroContent {
height: 160px;
padding-bottom: 0;
width: 736px; }
.HeroPinItButton .heroHeader {
font-size: 24px;
line-height: 1.2;
margin-bottom: 7px; }
.HeroPinItButton .heroImage {
background: url(https://s.pinimg.com/webapp/style/images/extension_graphic-1x-55a002fe.jpg) no-repeat;
background-size: contain;
height: 160px;
width: 253px;
border-radius: 6px 0 0 6px;
display: inline-block;
margin-right: 20px;
vertical-align: middle; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.HeroPinItButton .heroImage {
background-image: url(https://s.pinimg.com/webapp/style/images/extension_graphic-2x-40a234db.jpg); } }
.HeroPinItButton .heroMessage {
display: inline-block;
padding: 0;
vertical-align: middle;
width: 463px; }
.HeroPinItButton .heroSubtitle {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #777;
font-size: 16px;
font-weight: normal; }
.HeroVerifyWebsite .heroButton {
margin-top: 25px; }
.HeroVerifyWebsite .heroButtonsContainer {
float: left;
margin-bottom: 14px; }
.HeroVerifyWebsite .heroHeader {
color: #211922;
font-size: 24px;
line-height: 1.35;
margin-bottom: 4px; }
.HeroVerifyWebsite .heroSubtitle {
color: #211922;
font-size: 16px;
font-weight: normal;
margin-top: 10px; }
.EuCookieBar .cookieText {
color: #b9b9b9;
display: inline;
margin-right: 10px;
opacity: .85; }
.EuCookieBar .learnMore {
color: #fff;
display: inline;
margin-right: 5px; }
.EuCookieBar .learnMore:hover {
text-decoration: underline; }
.EuCookieBar .cookieButton {
border-radius: 3px;
color: #fff;
cursor: pointer;
display: inline;
margin-right: 10px;
padding: 5px 13px; }
.EuCookieBar .cookieButton:hover {
background-color: #999;
opacity: 1; }
.EuCookieBar.unAuthCookieBar .outerBar {
background-color: #1c232c;
height: 36px;
line-height: 36px;
text-align: center;
width: 100%; }
.EuCookieBar.unAuthCookieBar.homePage .outerBar {
background-color: transparent; }
.EuCookieBar.unAuthCookieBar.homePage .outerBar .cookieText {
color: #fff;
margin-right: 2px; }
.EuCookieBar.authCookieBar {
-webkit-animation: fadeIn .5s;
animation: fadeIn .5s; }
.EuCookieBar.authCookieBar .blackCookieBar {
font-family: HelveticaNeue-Bold, 'Helvetica', arial;
background-color: #1c232c;
bottom: 0;
color: #fff;
font-size: 12px;
font-weight: normal;
height: 36px;
line-height: 36px;
opacity: .8;
position: fixed;
width: 100%;
z-index: 1000; }
.EuCookieBar.authCookieBar .cookieBarText {
bottom: 0;
position: fixed;
z-index: 1001; }
.EuCookieBar.authCookieBar .cookieBarText .privacyPolicy {
color: #fff;
line-height: 36px;
margin-left: 20px;
text-shadow: 0 1px 4px #000;
vertical-align: middle; }
.EuCookieBar.authCookieBar .cookieBarText .privacyPolicy:hover {
text-decoration: underline; }
.EuCookieBar.authCookieBar .cookieBarText .rightAlign {
bottom: 0;
line-height: 36px;
position: fixed;
right: 0;
vertical-align: middle; }
.InternationalSubdomains h1 {
color: #333;
color: rgba(21, 21, 21, 0.8);
font-size: 47px;
font-weight: bold;
line-height: 52px;
margin-left: auto;
margin-right: auto;
max-width: 736px;
text-align: center;
word-wrap: break-word;
margin: 34px auto; }
.InternationalSubdomains a {
font-size: 12px;
line-height: 24px; }
.InternationalSubdomains .table {
display: table;
margin: 28px 7px;
width: 1200px; }
.InternationalSubdomains .table__row {
display: table-row; }
.InternationalSubdomains .table__cell {
display: table-cell;
width: 350px; }
.InternationalSubdomains .itemDirectory {
margin-top: 14px;
max-width: 1250px;
min-width: 750px; }
.InternationalSubdomains .GridFooter {
display: block; }
.LanguageDropdown li {
overflow: hidden;
color: #777;
display: block;
font-size: 12px; }
.LanguageDropdown li:first-child {
padding-top: 5px; }
.LanguageDropdown li:last-child {
padding-bottom: 5px; }
.LanguageDropdown li a {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", sans-serif;
font-weight: bold;
color: #777;
cursor: pointer;
display: block;
padding: 9px 14px; }
.LanguageDropdown li a:hover {
background: #f1f1f1;
color: #333; }
.LanguageDropdown li a:active {
background: #eaeaea; }
.InterstitialMiniGrid {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 4px;
-moz-column-gap: 4px;
column-gap: 4px;
margin-top: -10px; }
.InterstitialMiniGrid img {
margin-bottom: 4px; }
.ContactTile {
-ms-flex-line-pack: center;
align-content: center;
box-sizing: border-box;
display: inline-block;
padding: 14px;
position: relative;
vertical-align: top;
width: 100%; }
.ContactTile.noBottomPadding {
padding-bottom: 0; }
.ContactTile .center {
margin-left: auto;
margin-right: auto;
margin-top: 14px;
position: relative;
width: 46px; }
.ContactTile .profileImage {
background-color: #555;
border-radius: 50%;
color: #fff;
display: table-cell;
font-size: 14px;
font-weight: bold;
height: 46px;
overflow: hidden;
text-align: center;
vertical-align: middle;
width: 46px; }
.ContactTile .profileImage .placeholderIcon {
width: 14px;
height: 18px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -426px -384px no-repeat;
margin: auto; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ContactTile .profileImage .placeholderIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -402px -42px;
background-size: 428px 427px; } }
.ContactTile .cta {
width: 100%; }
.ContactTile p {
margin: 0;
text-align: center; }
.ContactTile .name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #5f5f5f;
font-size: 14px;
font-weight: bold;
height: 17px;
margin: 7px 0; }
.ContactTile .email {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #999;
font-weight: normal; }
.ContactTile .profileLink:hover,
.ContactTile .profileLink:active,
.ContactTile .profileLink:focus {
text-decoration: underline; }
.DiscoveryTile {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
-ms-flex-line-pack: center;
align-content: center;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box;
color: #5f5f5f;
float: left;
margin: 0;
overflow: hidden;
position: relative;
vertical-align: top;
width: 236px; }
.DiscoveryTile.noContainer {
box-shadow: none;
margin: 0; }
.DiscoveryTile.inviteTile {
height: 179px; }
.DiscoveryTile.double {
width: 504px; }
.DiscoveryTile.overflow {
overflow: visible; }
.DiscoveryTile .dismiss {
background: #fff;
border-radius: 50%;
cursor: pointer;
display: none;
margin: 7px;
padding: 7px;
position: absolute;
right: 0;
top: 0;
z-index: 10; }
.DiscoveryTile .dismiss .closeIcon {
width: 12px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -107px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.DiscoveryTile .dismiss .closeIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -321px -271px;
background-size: 399px 382px; } }
.DiscoveryTile:hover .dismiss {
display: block; }
.InviteButtonEmail .btn {
margin: 5px;
width: 226px; }
.InviteButtonEmail.inviteDisabled .btn {
color: #ccc; }
.InviteButtonEmail .buttonWrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
.InviteLanding .contents {
background: #fff;
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
margin: 100px auto 0;
position: relative;
max-width: 640px;
z-index: 682; }
.InviteListBase .inviteToolbar {
background-color: #f5f5f5;
border-bottom: 1px solid #ccc;
height: 50px; }
.InviteListBase .inviteToolbar input[type="text"] {
border: 1px solid #dadada;
border-radius: 4px;
font-size: 15px;
margin-bottom: 14px;
margin-top: 2px;
padding: 4px 6px;
width: 100%; }
.InviteListBase .inviteToolbar input[type="text"]:focus {
border-color: #ccc; }
.InviteListBase .inviteToolbar .searchWrapper {
float: left;
margin-left: 15px;
margin-top: 10px;
position: relative;
width: 200px; }
.InviteListBase .inviteToolbar .searchWrapper .searchIcon {
width: 16px;
height: 17px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -190px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
position: absolute;
right: -8px;
top: 7px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.InviteListBase .inviteToolbar .searchWrapper .searchIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -173px -201px;
background-size: 249px 231px; } }
.InviteListBase .inviteToolbar .inviteAll {
float: right;
margin-right: 20px;
margin-top: 15px; }
.InviteListBase .inviteToolbar .inviteAllLabel {
cursor: pointer;
font-size: 15px;
margin-right: 10px;
vertical-align: middle; }
.InviteListBase .inviteButton {
float: right; }
.InviteListBase .inviteContent {
clear: both;
height: 400px;
overflow: auto; }
.InviteListBase .inviteFooter {
background-color: #f5f5f5;
border-top: 1px solid #ccc;
overflow: auto;
padding: 10px; }
.InviteListBase .inviteLegalFooter {
color: #808080; }
.InviteListBase .emptyResultsFooterContainer {
display: none; }
.InviteListEmail .emptyResultsFooterContainer .emptyResults {
border-bottom: 1px solid #ccc;
cursor: default;
display: block;
padding: 20px; }
.InviteListFacebook .inviteToolbar .searchWrapper {
width: 400px; }
.InviteListFacebook .FacebookContact {
overflow: auto; }
.InviteListFacebook .FacebookContact .facebookWrapper {
width: auto; }
.InviteListFacebook .FacebookContact .inviteFacebookButton {
float: right;
margin-right: 5px; }
.InviteListFacebook .emptyResultsFooterContainer .emptyResults {
border-bottom: 1px solid #ccc;
cursor: default;
display: block;
padding: 20px; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.InviteModal {
max-width: 596px; }
.InviteModal .avatar img {
border: 1px solid #345d79;
border-radius: 50%;
height: 75px;
width: 75px; }
.InviteModal .inviterHeader {
background-color: #49a7d3;
background-image: url(https://s.pinimg.com/webapp/style/images/inviter_blue_bg-ceccb10f.png);
background-position: center;
background-size: cover;
margin-bottom: 55px;
padding: 10px 0 50px;
position: relative;
text-align: center;
z-index: 670; }
.InviteModal .mailIcon {
width: 127px;
height: 95px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) 0 0 no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
bottom: -40px;
left: 50%;
margin-left: -64px;
position: absolute; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.InviteModal .mailIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: 0 0;
background-size: 249px 231px; } }
.InviteModal .text {
color: #fff;
display: table;
font-size: 24px;
text-shadow: 0 1px 0 #000; }
.InviteModal .text span {
display: table-cell;
padding: 0 15px;
vertical-align: middle; }
.InviteModal .buttonsView {
padding-bottom: 30px;
text-align: center; }
/* desktop.scss */
.InviteModal .avatar {
padding-top: 30px; }
.InviteModal .text {
font-size: 30px;
margin: 20px 30px; }
.InvitePanelEmail {
border-top: 6px solid #d0021b;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
box-sizing: border-box;
height: 179px;
padding: 28px;
text-align: center; }
.InvitePanelEmail .addFriendIcon {
width: 42px;
height: 44px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -230px -296px no-repeat;
margin: auto auto 21px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.InvitePanelEmail .addFriendIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -135px -258px;
background-size: 428px 427px; } }
.InvitePanelEmail .SocialTypeaheadField {
position: relative;
top: 14px; }
.InvitePanelEmail .searchBox {
text-align: left;
width: 100%;
z-index: 1; }
.InvitePanelEmail h2 {
text-align: center; }
.SocialNetworkConnectButton {
border-top: 6px solid;
box-sizing: border-box;
cursor: pointer;
display: table-cell;
vertical-align: middle;
width: 236px; }
.SocialNetworkConnectButton.tile {
border-top: 6px solid;
height: 179px;
text-align: center; }
.SocialNetworkConnectButton.tile em.icon {
left: -6px;
margin: auto;
position: relative; }
.SocialNetworkConnectButton.tile .networkInfo {
display: none; }
.SocialNetworkConnectButton.listItem.default {
border-top: 1px solid #e0e0e0 !important;
height: 56px; }
.SocialNetworkConnectButton.listItem.default .networkInfo {
display: none; }
.SocialNetworkConnectButton.listItem.sendShare {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-top: 0;
box-sizing: content-box;
height: 32px;
width: 320px; }
.SocialNetworkConnectButton.listItem.sendShare a {
padding: 10px; }
.SocialNetworkConnectButton.listItem.sendShare.facebook em.icon {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -284px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SocialNetworkConnectButton.listItem.sendShare.facebook em.icon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -33px -342px;
background-size: 428px 427px; } }
.SocialNetworkConnectButton.listItem.sendShare.google em.icon {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -102px -384px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SocialNetworkConnectButton.listItem.sendShare.google em.icon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -252px -201px;
background-size: 428px 427px; } }
.SocialNetworkConnectButton.listItem.sendShare.gplus em.icon {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -102px -384px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SocialNetworkConnectButton.listItem.sendShare.gplus em.icon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -252px -201px;
background-size: 428px 427px; } }
.SocialNetworkConnectButton.listItem.sendShare.twitter em.icon {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -68px -384px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SocialNetworkConnectButton.listItem.sendShare.twitter em.icon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -342px -276px;
background-size: 428px 427px; } }
.SocialNetworkConnectButton.listItem.sendShare.yahoo em.icon {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -384px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SocialNetworkConnectButton.listItem.sendShare.yahoo em.icon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -99px -342px;
background-size: 428px 427px; } }
.SocialNetworkConnectButton.listItem.sendShare .icon {
float: left;
height: 32px;
margin-right: 10px;
width: 32px; }
.SocialNetworkConnectButton.listItem.sendShare .networkInfo {
display: table-cell;
height: 32px;
vertical-align: middle; }
.SocialNetworkConnectButton.listItem.sendShare .networkInfo .title {
color: #666;
font-size: 13px; }
.SocialNetworkConnectButton.listItem.sendShare .networkInfo .subtitle {
color: #666;
font-size: #666;
font-weight: normal; }
.SocialNetworkConnectButton.listItem.sendShare.brio {
height: 44px; }
.SocialNetworkConnectButton.listItem.sendShare.brio a {
padding: 4px 20px; }
.SocialNetworkConnectButton.listItem.sendShare.brio.facebook em.icon {
width: 44px;
height: 44px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -92px -296px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SocialNetworkConnectButton.listItem.sendShare.brio.facebook em.icon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -45px -258px;
background-size: 428px 427px; } }
.SocialNetworkConnectButton.listItem.sendShare.brio.google em.icon {
width: 44px;
height: 44px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -46px -296px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SocialNetworkConnectButton.listItem.sendShare.brio.google em.icon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -291px -139px;
background-size: 428px 427px; } }
.SocialNetworkConnectButton.listItem.sendShare.brio.twitter em.icon {
width: 44px;
height: 44px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -296px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SocialNetworkConnectButton.listItem.sendShare.brio.twitter em.icon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: 0 -258px;
background-size: 428px 427px; } }
.SocialNetworkConnectButton.listItem.sendShare.brio.yahoo em.icon {
width: 45px;
height: 44px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -287px -248px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SocialNetworkConnectButton.listItem.sendShare.brio.yahoo em.icon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -291px -94px;
background-size: 428px 427px; } }
.SocialNetworkConnectButton.listItem.sendShare.brio .icon {
height: 44px;
margin-right: 12px;
width: 44px; }
.SocialNetworkConnectButton.listItem.sendShare.brio .networkInfo {
height: 44px; }
.SocialNetworkConnectButton.listItem.sendShare.brio .networkInfo .title {
color: #555;
font-size: 18px;
line-height: 20px; }
.SocialNetworkConnectButton.listItem.sendShare.brio .networkInfo .subtitle {
color: #b5b5b5;
font-size: 12px; }
.SocialNetworkConnectButton em.icon {
display: block; }
.SocialNetworkConnectButton.facebook {
border-top-color: #3959a7; }
.SocialNetworkConnectButton.facebook em.icon {
width: 47px;
height: 29px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -42px -342px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SocialNetworkConnectButton.facebook em.icon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -76px -303px;
background-size: 428px 427px; } }
.SocialNetworkConnectButton.google {
border-top-color: #d4412c; }
.SocialNetworkConnectButton.google em.icon {
width: 110px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -253px 0 no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SocialNetworkConnectButton.google em.icon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: 0 -201px;
background-size: 428px 427px; } }
.SocialNetworkConnectButton.microsoft {
border-top-color: #0072c3; }
.SocialNetworkConnectButton.microsoft em.icon {
width: 166px;
height: 28px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -218px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SocialNetworkConnectButton.microsoft em.icon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: 0 -172px;
background-size: 428px 427px; } }
.SocialNetworkConnectButton.yahoo {
border-top-color: #270c81; }
.SocialNetworkConnectButton.yahoo em.icon {
width: 109px;
height: 23px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -253px -194px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SocialNetworkConnectButton.yahoo em.icon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: 0 -234px;
background-size: 428px 427px; } }
.SocialNetworkConnectButton.loading > .loadingContent {
display: block; }
.SocialNetworkConnectButton.loading > .Spinner .spinnerMedium {
margin-top: -28px; }
.SocialNetworkConnectButton .loadingContent {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 659;
display: none;
margin-top: 14px; }
.SocialNetworkConnectButton .loadingContent .caption {
box-sizing: border-box;
color: #999;
font-size: 14px;
font-weight: bold;
padding: 0 14px;
position: absolute;
text-align: center;
top: 50%;
width: 100%; }
.UserContact {
font-size: 11px;
line-height: 1.2em;
padding: 5px 14px;
position: relative; }
.UserContact::after {
clear: both;
content: "";
display: table; }
.UserContact.loading {
min-height: 0; }
.UserContact:hover {
background: #f3f3f3; }
.UserContact .thumbImageWrapper {
position: relative;
float: left;
height: 30px;
width: 30px; }
.UserContact .thumbImageWrapper::after {
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 30px;
left: 0;
position: absolute;
top: 0;
width: 30px; }
.UserContact .thumbImageWrapper img {
border-radius: 50%;
height: 30px;
width: 30px; }
.UserContact .thumbImageWrapper img {
border-radius: 50%;
height: 30px;
width: 30px; }
.UserContact .contactUser {
margin-left: 35px; }
.UserContact .contactUsername {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #717171;
font-weight: 700; }
.UserContact:hover .dismiss {
width: 9px;
height: 10px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -235px -206px no-repeat;
cursor: pointer;
margin-right: 14px;
position: absolute;
right: 0;
top: 40%; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserContact:hover .dismiss {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -418px -89px;
background-size: 428px 427px; } }
.UserContact .contactConfirmation {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: #ffa;
bottom: 0;
display: none;
left: 0;
padding: 10px;
position: absolute;
right: 0;
top: 0; }
.UserContact.contactConfirmed .contactConfirmation {
display: block; }
.UserContact .contactAction {
color: #bd081c; }
.UserContact .contactAction:hover {
text-decoration: underline; }
.UserContact .contactWrapper {
cursor: pointer;
height: 30px;
width: 90%; }
.KLPBar {
display: none; }
.KLPBar .klpBarContainer {
background-color: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(0, 0, 0, 0.1);
left: 0;
margin: auto;
overflow: hidden;
position: fixed;
right: 0;
text-align: left;
top: 54px;
z-index: 669;
height: 44px; }
.KLPBar .klpBarContainer .moreToExploreLabel {
display: inline-block;
font-size: 12px;
margin: 15px 7px; }
.KLPBar .klpBarContainer .interest {
color: #5f5f5f;
display: inline-block;
float: none;
margin-left: 5px;
padding: 4px 10px 5px;
position: relative; }
.KLPBar .klpBarContainer .interest h2 {
font-size: 12px; }
.KLPBar .klpBarContainer .interest:first-child {
margin-left: 0; }
.KLPBar .klpBarContainer .interest:hover {
color: #bd081c;
text-decoration: none; }
.KLPBar .klpBarContainer .interest.active,
.KLPBar .klpBarContainer .interest.active:hover {
color: #333; }
.KLPBar .klpBarContainer.lowerKLPBar {
top: 65px; }
.KLPBar .klpBarContainer.unfixedHeader {
position: absolute; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.Login.compact {
display: inline-block;
width: auto; }
.Login.compact .formFooter {
background: none;
border: 0;
padding: 0; }
.Login.compact .standardForm,
.Login.compact .socialLogin {
display: inline-block;
position: relative;
width: auto; }
.Login.compact .socialLogin {
padding: 0; }
.Login.compact .socialLogin .btn {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: block;
float: none;
margin-bottom: 9px;
text-align: left;
width: 100%; }
.Login.compact .socialLogin .facebookTooltip {
background: #fff;
border-radius: 6px;
bottom: 11px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.38), 0 1px 3px rgba(0, 0, 0, 0.32);
color: rgba(0, 0, 0, 0.7);
display: none;
font-weight: bolder;
left: 282px;
padding: 8px 14px;
position: absolute;
width: 215px; }
.Login.compact .socialLogin .facebookTooltip::after {
border-color: transparent #fff;
border-style: solid;
border-width: 8px 10px 8px 0;
content: "";
display: block;
margin: -8px -1px 0 0;
position: absolute;
right: 100%;
top: 17px;
width: 0;
z-index: 1; }
.Login.compact .standardForm {
padding: 0; }
.Login.compact .compactViewLogin {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #fff;
margin: 0;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); }
.Login.compact .compactViewLogin a {
color: #fff;
font-weight: bold;
margin-top: 0;
vertical-align: inherit; }
.Login.compact .compactViewLogin a:hover {
color: #fff;
text-decoration: underline; }
.Login.compact.lite .compactViewLogin, .Login.compact.darkText .compactViewLogin {
color: #000;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2); }
.Login.compact.lite .compactViewLogin a, .Login.compact.darkText .compactViewLogin a {
color: #000; }
.Login.compact.lite .compactViewLogin a:hover, .Login.compact.darkText .compactViewLogin a:hover {
color: #000; }
.Login.compact.darkText .standardForm {
box-shadow: none; }
.Login.compact.inlineButtons .socialLogin {
text-align: left; }
.Login.compact.inlineButtons .socialLogin .registerLoginButton {
box-shadow: none;
display: inline-block;
width: 48%; }
.Login.compact.inlineButtons .socialLogin .registerLoginButton .buttonText {
font-size: 14px;
margin-left: 33px; }
.Login.compact.inlineButtons .socialLogin .registerLoginButton em {
background-color: transparent !important; }
.Login.compact.inlineButtons .socialLogin .registerLoginButton:hover {
width: 48%; }
.Login.compact.inlineButtons .socialLogin .unAuthGplusConnect {
float: right; }
/* desktop.scss */
.Login.textCenter {
padding: 5px 0;
text-align: center; }
.Login .formFooter a {
display: inline-block;
margin-bottom: 11px; }
.Login .formFooter a.alreadyAPinner {
margin-top: 0; }
.Login .loginUsername {
padding-top: 10px; }
.Login .loginUsername .email {
padding-right: 25%; }
.Login .pinterestLogo {
border-bottom: 1px solid #dfdfdf;
padding: 20px 0;
text-align: center; }
.Login .pinterestLogo h1 {
width: 169px;
height: 42px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -174px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent; }
.Login.register .formFooter {
text-align: center; }
.Login .businessHint {
padding-left: 40px; }
.Login .businessSignupLink,
.Login .signupLink {
font-size: 14px;
font-weight: normal; }
.Login .passwordLink {
display: none;
font-size: 14px;
font-weight: normal; }
.Login .standardForm {
max-width: auto; }
.Login .unAuthemailSignup {
width: 100%; }
.LoginBase .socialLogin {
border-radius: 6px 6px 0 0;
padding: 15px 40px; }
.LoginBase .socialLogin::after {
clear: both;
content: "";
display: table; }
.LoginBase .standardForm {
margin-bottom: 0; }
.LoginBase .standardForm.popupStyle {
background-color: transparent;
box-shadow: none; }
.LoginBase .standardForm.popupStyle .socialLogin .unAuthFacebookConnect span,
.LoginBase .standardForm.popupStyle .socialLogin .unAuthFacebookConnect:hover span {
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.25); }
.LoginBase .standardForm.newDesign input[view_type="newInputField"] {
font-size: 16px;
font-weight: 500;
padding: 10px; }
.LoginBase .standardForm.newDesign .formFieldMessage {
top: 12px; }
.LoginBase .unAuthFacebookConnect,
.LoginBase .unAuthGplusConnect,
.LoginBase .unAuthTwitterConnect {
float: right;
margin-bottom: 10px;
margin-right: 0;
text-align: left;
width: 100%; }
.LoginBase hr {
border-color: #ccc;
margin: 0 40px;
width: 80%; }
.LoginBase .businessHint {
margin-bottom: 14px; }
.LoginBase .logInButton {
display: none;
padding: 0 40px 30px; }
.LoginBase .logInButton .primary {
width: 100%; }
.LoginBase .loginError {
background-color: #ffebe9;
border: 1px solid #bd081c;
color: #333;
display: none;
margin: 0 40px 14px;
padding: 5px; }
.LoginBase .loginPassword {
border: 0;
padding-top: 10px; }
.LoginBase .newLoginPassword {
border: 0;
display: none;
padding-top: 10px; }
.LoginBase .userLogin {
margin-bottom: 10px;
padding-top: 15px; }
.LoginBase .passwordlessBubble {
display: none; }
.LoginBase .passwordlessTooltip {
background: #fff;
border-radius: 6px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.38), 0 1px 3px rgba(0, 0, 0, 0.32);
color: #000;
cursor: pointer;
display: none;
font-style: normal;
font-weight: normal;
left: 95%;
line-height: 150%;
padding: 8px 14px;
position: absolute;
text-align: left;
top: 55%;
width: 215px;
z-index: 1000; }
.LoginBase .passwordlessTooltip::before,
.LoginBase .passwordlessTooltip::after {
border-style: solid;
content: "";
display: block;
margin-top: -8px;
position: absolute;
right: 100%;
top: 17px;
width: 0; }
.LoginBase .passwordlessTooltip::before {
border-color: transparent rgba(0, 0, 0, 0.48);
border-width: 8px 10px 8px 0;
z-index: 1; }
.LoginBase .passwordlessTooltip::after {
border-color: transparent #fff;
border-width: 8px 10px 8px 0;
margin-right: -1px;
z-index: 1; }
.LoginBase .passwordlessList {
display: none;
padding-bottom: 10px;
padding-top: 15px; }
.LoginBase .cantAccessButton,
.LoginBase .resendEmailButton,
.LoginBase .checkPasswordlessButton,
.LoginBase .continueButton {
margin: 0;
width: 100%; }
.LoginBase .continueLogin {
display: none; }
.LoginBase .cantAccessButton {
padding-bottom: 10px; }
.LoginBase .emailHint {
color: #777;
display: none;
font-size: 14px;
font-weight: bold;
padding-left: 40px; }
.LoginBase .passwordlessHeader {
display: none;
white-space: normal; }
.LoginPage {
overflow: hidden;
padding: 10px; }
.LoginPage .contents {
background: #fff;
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
margin: 100px auto 0;
position: relative;
max-width: 470px;
z-index: 682;
max-width: 390px; }
.App.full .LoginPage .contents {
z-index: 1; }
.NewBoardPreview {
bottom: 0;
position: absolute;
top: 0;
width: 50%; }
.NewBoardPreview .gridWrapper {
height: 232px;
left: 0;
margin: -115px auto 0;
position: absolute;
right: 0;
top: 50%;
width: 232px; }
.NewBoardPreview .gridImage {
background-color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
height: 115px;
overflow: hidden;
position: absolute;
width: 115px; }
.NewBoardPreview .topLeft {
border-top-left-radius: 14px;
left: 0;
top: 0; }
.NewBoardPreview .topRight {
border-top-right-radius: 14px;
right: 0;
top: 0; }
.NewBoardPreview .bottomLeft {
border-bottom-left-radius: 14px;
bottom: 0;
left: 0; }
.NewBoardPreview .bottomRight {
border-bottom-right-radius: 14px;
bottom: 0;
right: 0; }
.NotificationSettings .notificationHeadingDetails {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-bottom: 15px; }
.NotificationSettings .emailDisabled > li {
display: none; }
.NotificationSettings .emailDisabled .sectionTitle,
.NotificationSettings .emailDisabled .emailGlobalToggle {
display: block; }
.NotificationSettings label {
vertical-align: middle; }
.NotificationSettings ul.formSection > li.formItem > h3 {
float: none;
margin-bottom: 15px; }
.NotificationSettings ul.formSection > li.formItem.emailFrequency {
padding-bottom: 5px; }
.NotificationSettings ul.formSection > li.formItem.emailFrequency h3 {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #555;
display: inline;
font-size: 13px;
font-weight: normal;
margin-bottom: 0; }
.NotificationSettings ul.formSection > li.formItem.emailFrequency .fieldsetWrapper {
display: inline; }
.NotificationSettings ul.formSection > li.formItem.emailFrequency .formInlineCheckedSet {
display: inline;
padding-left: 15px;
padding-top: 0; }
.NotificationSettings ul.formSection > li.formItem.emailFrequency .formInlineCheckedSet label > span {
font-size: 13px;
font-weight: normal; }
.NotificationSettings ul.formSection > li.formItem.emailGlobalToggle > h3 {
float: left;
margin: 0; }
.NotificationSettings ul.formSection > li.formItem.headlessSection {
padding-top: 0; }
.NotificationSettings ul.formSection > li.formItem.headlessSection > h3 {
margin-top: 0; }
.NotificationSettings .formSection > li:first-child {
border-top: 1px solid #dfdfdf; }
.PushNotificationSettings.modal {
width: 480px; }
.PushNotificationSettings .pushNotifSettings h2 {
background: #fafafa;
border-bottom: 1px solid #dadada;
border-top: 1px solid #f0f0f0;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
font-size: 15px;
padding: 10px 20px; }
.PushNotificationSettings .pushNotifSettings ul {
padding: 5px 20px 15px; }
.PushNotificationSettings .pushNotifSettings .pushSetting {
padding: 8px 0; }
.PushNotificationSettings .pushNotifSettings .pushSetting label {
font-weight: bold; }
.PushNotificationSettings .pushNotifSettings .pushSetting input {
float: right;
margin-top: 8px; }
.PushNotificationSettings .pushNotifSettings .pushSetting .helpText {
color: #777;
font-size: 11px;
padding-top: 2px; }
.PushNotificationSettings .pushNotifSettings .pushSetting:last-of-type {
border: 0; }
.UserBoardInvites {
background: #fff; }
.UserBoardInvites:empty {
border-bottom: 0; }
.UserBoardInvites .PagedGrid .GridItems {
margin: 0;
padding-bottom: 0; }
.UserBoardInvites .PagedGrid .GridItems .item {
width: 100%; }
.UserBoardInvites .PagedGrid .moreItems {
background: #fff;
border-left: 0;
border-radius: 0;
border-right: 0;
border-top: 0;
margin-top: 0; }
.UserBoardInvites .PagedGrid .moreItems:hover, .UserBoardInvites .PagedGrid .moreItems:active {
background: #f8f8f8;
border-left: 0;
border-radius: 0;
border-right: 0;
color: #555; }
.UserNews {
width: 236px; }
.UserNews .promotion {
min-height: 285px; }
.UserNews .board_reminder {
min-height: 400px; }
.UserNewsReact {
width: 236px; }
.NuxProgressMweb {
background-color: #d8d8d8;
left: auto;
margin-top: -64px;
position: relative;
right: 0;
top: 0;
width: 100%;
z-index: auto; }
.NuxProgressMweb .nuxProgress {
display: none; }
.NuxProgressMweb .headerMain {
float: left;
position: relative;
width: 100%; }
.NuxProgressMweb .headerContent {
color: #333;
height: 130px;
margin: 0 auto;
position: relative;
width: 100%; }
.NuxProgressMweb .headerContent .headerTitle1,
.NuxProgressMweb .headerContent .headerTitle2 {
line-height: 1.4em;
text-align: center; }
.NuxProgressMweb .headerContent .headerTitle1 {
font-size: 20px;
padding: 44px 20px 0; }
.NuxProgressMweb .headerContent .headerTitle2 {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
font-weight: normal;
padding: 4px 20px 0; }
.NuxProgressMweb .progressFooterWrapper {
background-color: #fff;
bottom: 0;
display: none;
height: 69px;
position: fixed;
text-align: center;
width: 100%;
z-index: 150; }
.NuxProgressMweb .progressFooterWrapper .progressFooter {
display: inline-block;
width: 100%; }
.NuxProgressMweb .progressFooterWrapper .progressFooter .progress {
background-color: #f2f2f2;
border-left: 1px solid #dfdfdf;
border-right: 1px solid #dfdfdf;
height: 69px; }
.NuxProgressMweb .progressFooterWrapper .progressFooter .progress .footerButtons {
height: 25px; }
.NuxProgressMweb .progressFooterWrapper .progressFooter .progress .footerButtons .progressButton {
margin: 0 auto;
width: 100%; }
.NuxProgressMweb .interestFollowButton {
border-radius: 5px;
height: 35px;
margin-top: 15px;
width: 300px; }
.NuxProgressMweb .nextStep {
float: left; }
.NuxProgressMweb .Progress {
float: left;
margin: 12px 3px; }
@media screen and (min-width: 1300px) {
.NuxProgressMweb.fixedPosition {
left: 50%;
margin-left: 450px;
width: 280px; } }
.NuxTutorial .BuildingHomeFeedSpinner {
background-color: #e9e9e9;
bottom: 0;
left: 0;
padding-top: 60px;
position: fixed;
right: 0;
top: 161px; }
.NuxAppUpsell .nuxAppUpsell__iphone {
background: url(https://s.pinimg.com/webapp/style/images/iphone-1x-33b56513.png) no-repeat;
background-size: contain;
height: 615px;
width: 294px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .nuxAppUpsell__iphone {
background-image: url(https://s.pinimg.com/webapp/style/images/iphone-2x-e36af977.png); } }
.NuxAppUpsell .nuxAppUpsell__android {
background: url(https://s.pinimg.com/webapp/style/images/android-1x-d1a742e3.png) no-repeat;
background-size: contain;
height: 647px;
width: 314px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .nuxAppUpsell__android {
background-image: url(https://s.pinimg.com/webapp/style/images/android-2x-c1e837c2.png); } }
.NuxAppUpsell .nuxAppUpsell__feed, .NuxAppUpsell .homefeedAppUpsell__feed {
background: url(https://s.pinimg.com/webapp/style/images/gender-neutral-feed-1x-78b6a3d9.png) no-repeat;
background-size: contain;
height: 1213px;
width: 282px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .nuxAppUpsell__feed, .NuxAppUpsell .homefeedAppUpsell__feed {
background-image: url(https://s.pinimg.com/webapp/style/images/gender-neutral-feed-2x-5b624974.png); } }
.NuxAppUpsell .nuxAppUpsell__maleFeed, .NuxAppUpsell .homefeedAppUpsell__maleFeed {
background: url(https://s.pinimg.com/webapp/style/images/male-feed-1x-2fd2fdc5.png) no-repeat;
background-size: contain;
height: 1213px;
width: 282px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .nuxAppUpsell__maleFeed, .NuxAppUpsell .homefeedAppUpsell__maleFeed {
background-image: url(https://s.pinimg.com/webapp/style/images/male-feed-2x-f0e3019d.png); } }
.NuxAppUpsell .nuxAppUpsell__femaleFeed, .NuxAppUpsell .homefeedAppUpsell__femaleFeed {
background: url(https://s.pinimg.com/webapp/style/images/female-feed-1x-09c763a3.png) no-repeat;
background-size: contain;
height: 1240px;
width: 282px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .nuxAppUpsell__femaleFeed, .NuxAppUpsell .homefeedAppUpsell__femaleFeed {
background-image: url(https://s.pinimg.com/webapp/style/images/female-feed-2x-f57972d4.png); } }
.NuxAppUpsell .nuxAppUpsell__feed, .NuxAppUpsell .nuxAppUpsell__maleFeed, .NuxAppUpsell .nuxAppUpsell__femaleFeed, .NuxAppUpsell .nuxAppUpsell_personalizedFeed {
-webkit-animation: scrollFeed 25s linear 3s;
animation: scrollFeed 25s linear 3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both; }
.NuxAppUpsell .homefeedAppUpsell__feed, .NuxAppUpsell .homefeedAppUpsell__maleFeed, .NuxAppUpsell .homefeedAppUpsell__femaleFeed {
-webkit-animation: homefeedScrollFeed 25s linear 3s;
animation: homefeedScrollFeed 25s linear 3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both; }
.NuxAppUpsell .homefeedAppUpsell__personalizedFeed {
-webkit-animation: homefeedPersonalizedScrollFeed 25s linear 3s;
animation: homefeedPersonalizedScrollFeed 25s linear 3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both; }
@-webkit-keyframes scrollFeed {
0% {
-webkit-transform: translateY(0);
transform: translateY(0); }
100% {
-webkit-transform: translateY(-800px);
transform: translateY(-800px); } }
@keyframes scrollFeed {
0% {
-webkit-transform: translateY(0);
transform: translateY(0); }
100% {
-webkit-transform: translateY(-800px);
transform: translateY(-800px); } }
@-webkit-keyframes homefeedScrollFeed {
0% {
-webkit-transform: translateY(0);
transform: translateY(0); }
100% {
-webkit-transform: translateY(-250px);
transform: translateY(-250px); } }
@keyframes homefeedScrollFeed {
0% {
-webkit-transform: translateY(0);
transform: translateY(0); }
100% {
-webkit-transform: translateY(-250px);
transform: translateY(-250px); } }
@-webkit-keyframes homefeedPersonalizedScrollFeed {
0% {
-webkit-transform: translateY(0);
transform: translateY(0); }
100% {
-webkit-transform: translateY(-120px);
transform: translateY(-120px); } }
@keyframes homefeedPersonalizedScrollFeed {
0% {
-webkit-transform: translateY(0);
transform: translateY(0); }
100% {
-webkit-transform: translateY(-120px);
transform: translateY(-120px); } }
.NuxAppUpsell .appInstallButton {
margin: 0 auto;
text-align: center;
top: 450px;
width: 100%;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.NuxAppUpsell .appInstallButton .left,
.NuxAppUpsell .appInstallButton .right {
display: inline-block;
float: none;
text-align: center; }
.NuxAppUpsell .appInstallButton .left {
margin-left: -4px;
padding-left: 15px;
padding-right: 10px; }
.NuxAppUpsell .appInstallButton .right {
padding-left: 10px;
padding-right: 15px; }
.NuxAppUpsell .appInstallButton .buttonBorder {
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 5px; }
.NuxAppUpsell .appInstallButton .androidButton {
background: url(https://s.pinimg.com/webapp/style/images/EN-1x-193adbd5.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px;
display: inline-block;
outline: none; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton {
background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-ea0db06a.png); } }
.NuxAppUpsell .appInstallButton .iosButton {
background: url(https://s.pinimg.com/webapp/style/images/EN-1x-6f0f8e76.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px;
display: inline-block;
outline: none; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton {
background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-1bfaab3e.png); } }
.NuxAppUpsell .appInstallButton .androidButton.CS {
background: url(https://s.pinimg.com/webapp/style/images/CS-1x-aa88f4fd.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.CS {
background-image: url(https://s.pinimg.com/webapp/style/images/CS-2x-1f99325c.png); } }
.NuxAppUpsell .appInstallButton .iosButton.CS {
background: url(https://s.pinimg.com/webapp/style/images/CS-1x-57b27437.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.CS {
background-image: url(https://s.pinimg.com/webapp/style/images/CS-2x-387b6b84.png); } }
.NuxAppUpsell .appInstallButton .androidButton.DA {
background: url(https://s.pinimg.com/webapp/style/images/DA-1x-b3212f93.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.DA {
background-image: url(https://s.pinimg.com/webapp/style/images/DA-2x-881f535b.png); } }
.NuxAppUpsell .appInstallButton .iosButton.DA {
background: url(https://s.pinimg.com/webapp/style/images/DA-1x-73095d1e.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.DA {
background-image: url(https://s.pinimg.com/webapp/style/images/DA-2x-f75e4549.png); } }
.NuxAppUpsell .appInstallButton .androidButton.DE {
background: url(https://s.pinimg.com/webapp/style/images/DE-1x-195f2284.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.DE {
background-image: url(https://s.pinimg.com/webapp/style/images/DE-2x-73bba6d5.png); } }
.NuxAppUpsell .appInstallButton .iosButton.DE {
background: url(https://s.pinimg.com/webapp/style/images/DE-1x-9a33f8c5.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.DE {
background-image: url(https://s.pinimg.com/webapp/style/images/DE-2x-81d4e358.png); } }
.NuxAppUpsell .appInstallButton .androidButton.EL {
background: url(https://s.pinimg.com/webapp/style/images/EL-1x-d5e9cffb.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.EL {
background-image: url(https://s.pinimg.com/webapp/style/images/EL-2x-75dbffaf.png); } }
.NuxAppUpsell .appInstallButton .iosButton.EL {
background: url(https://s.pinimg.com/webapp/style/images/EL-1x-c47b5f4b.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.EL {
background-image: url(https://s.pinimg.com/webapp/style/images/EL-2x-f94ceee4.png); } }
.NuxAppUpsell .appInstallButton .androidButton.EN {
background: url(https://s.pinimg.com/webapp/style/images/EN-1x-193adbd5.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.EN {
background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-ea0db06a.png); } }
.NuxAppUpsell .appInstallButton .iosButton.EN {
background: url(https://s.pinimg.com/webapp/style/images/EN-1x-6f0f8e76.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.EN {
background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-1bfaab3e.png); } }
.NuxAppUpsell .appInstallButton .androidButton.ES {
background: url(https://s.pinimg.com/webapp/style/images/ES-1x-5d4df5f0.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.ES {
background-image: url(https://s.pinimg.com/webapp/style/images/ES-2x-4b31e0d2.png); } }
.NuxAppUpsell .appInstallButton .iosButton.ES {
background: url(https://s.pinimg.com/webapp/style/images/ES-1x-43d3ab96.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.ES {
background-image: url(https://s.pinimg.com/webapp/style/images/ES-2x-a31d918b.png); } }
.NuxAppUpsell .appInstallButton .androidButton.FI {
background: url(https://s.pinimg.com/webapp/style/images/FI-1x-df009e22.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.FI {
background-image: url(https://s.pinimg.com/webapp/style/images/FI-2x-93552fb9.png); } }
.NuxAppUpsell .appInstallButton .iosButton.FI {
background: url(https://s.pinimg.com/webapp/style/images/FI-1x-99cb37da.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.FI {
background-image: url(https://s.pinimg.com/webapp/style/images/FI-2x-6cd4e75f.png); } }
.NuxAppUpsell .appInstallButton .androidButton.FR {
background: url(https://s.pinimg.com/webapp/style/images/FR-1x-76258add.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.FR {
background-image: url(https://s.pinimg.com/webapp/style/images/FR-2x-892d382a.png); } }
.NuxAppUpsell .appInstallButton .iosButton.FR {
background: url(https://s.pinimg.com/webapp/style/images/FR-1x-a1b11f36.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.FR {
background-image: url(https://s.pinimg.com/webapp/style/images/FR-2x-60ddb3dc.png); } }
.NuxAppUpsell .appInstallButton .androidButton.HU {
background: url(https://s.pinimg.com/webapp/style/images/HU-1x-f5a33374.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.HU {
background-image: url(https://s.pinimg.com/webapp/style/images/HU-2x-3cf19ccb.png); } }
.NuxAppUpsell .appInstallButton .iosButton.HU {
background: url(https://s.pinimg.com/webapp/style/images/HU-1x-ecfb98ab.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.HU {
background-image: url(https://s.pinimg.com/webapp/style/images/HU-2x-801f2f76.png); } }
.NuxAppUpsell .appInstallButton .androidButton.ID {
background: url(https://s.pinimg.com/webapp/style/images/ID-1x-fc856302.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.ID {
background-image: url(https://s.pinimg.com/webapp/style/images/ID-2x-60763725.png); } }
.NuxAppUpsell .appInstallButton .iosButton.ID {
background: url(https://s.pinimg.com/webapp/style/images/ID-1x-7723e800.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.ID {
background-image: url(https://s.pinimg.com/webapp/style/images/ID-2x-511fb06d.png); } }
.NuxAppUpsell .appInstallButton .androidButton.IT {
background: url(https://s.pinimg.com/webapp/style/images/IT-1x-78215d79.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.IT {
background-image: url(https://s.pinimg.com/webapp/style/images/IT-2x-f06d21d3.png); } }
.NuxAppUpsell .appInstallButton .iosButton.IT {
background: url(https://s.pinimg.com/webapp/style/images/IT-1x-eb49e52c.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.IT {
background-image: url(https://s.pinimg.com/webapp/style/images/IT-2x-4e1ebffc.png); } }
.NuxAppUpsell .appInstallButton .androidButton.JA {
background: url(https://s.pinimg.com/webapp/style/images/JA-1x-e4d2e103.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.JA {
background-image: url(https://s.pinimg.com/webapp/style/images/JA-2x-613b7a1c.png); } }
.NuxAppUpsell .appInstallButton .iosButton.JA {
background: url(https://s.pinimg.com/webapp/style/images/JA-1x-e9625ac6.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.JA {
background-image: url(https://s.pinimg.com/webapp/style/images/JA-2x-e4949c87.png); } }
.NuxAppUpsell .appInstallButton .androidButton.KO {
background: url(https://s.pinimg.com/webapp/style/images/KO-1x-d08dd546.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.KO {
background-image: url(https://s.pinimg.com/webapp/style/images/KO-2x-82063d73.png); } }
.NuxAppUpsell .appInstallButton .iosButton.KO {
background: url(https://s.pinimg.com/webapp/style/images/KO-1x-3699e0ab.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.KO {
background-image: url(https://s.pinimg.com/webapp/style/images/KO-2x-ddc06527.png); } }
.NuxAppUpsell .appInstallButton .androidButton.ML {
background: url(https://s.pinimg.com/webapp/style/images/ML-1x-0069db8e.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.ML {
background-image: url(https://s.pinimg.com/webapp/style/images/ML-2x-85c22418.png); } }
.NuxAppUpsell .appInstallButton .iosButton.ML {
background: url(https://s.pinimg.com/webapp/style/images/ML-1x-cfe4f86a.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.ML {
background-image: url(https://s.pinimg.com/webapp/style/images/ML-2x-482d4428.png); } }
.NuxAppUpsell .appInstallButton .androidButton.NL {
background: url(https://s.pinimg.com/webapp/style/images/NL-1x-ff73753a.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.NL {
background-image: url(https://s.pinimg.com/webapp/style/images/NL-2x-8c8e0858.png); } }
.NuxAppUpsell .appInstallButton .iosButton.NL {
background: url(https://s.pinimg.com/webapp/style/images/NL-1x-3926d2dd.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.NL {
background-image: url(https://s.pinimg.com/webapp/style/images/NL-2x-ffcdfef9.png); } }
.NuxAppUpsell .appInstallButton .androidButton.NN {
background: url(https://s.pinimg.com/webapp/style/images/NN-1x-a9972684.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.NN {
background-image: url(https://s.pinimg.com/webapp/style/images/NN-2x-85d7db2a.png); } }
.NuxAppUpsell .appInstallButton .iosButton.NN {
background: url(https://s.pinimg.com/webapp/style/images/NN-1x-6e36a313.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.NN {
background-image: url(https://s.pinimg.com/webapp/style/images/NN-2x-fd2478e8.png); } }
.NuxAppUpsell .appInstallButton .androidButton.PL {
background: url(https://s.pinimg.com/webapp/style/images/PL-1x-dc76138d.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.PL {
background-image: url(https://s.pinimg.com/webapp/style/images/PL-2x-56d0226f.png); } }
.NuxAppUpsell .appInstallButton .iosButton.PL {
background: url(https://s.pinimg.com/webapp/style/images/PL-1x-3a5b9eb6.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.PL {
background-image: url(https://s.pinimg.com/webapp/style/images/PL-2x-3cc909a8.png); } }
.NuxAppUpsell .appInstallButton .androidButton.PT {
background: url(https://s.pinimg.com/webapp/style/images/PT-1x-61d44f78.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.PT {
background-image: url(https://s.pinimg.com/webapp/style/images/PT-2x-91f7acfc.png); } }
.NuxAppUpsell .appInstallButton .iosButton.PT {
background: url(https://s.pinimg.com/webapp/style/images/PT-1x-fc9e1aa2.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.PT {
background-image: url(https://s.pinimg.com/webapp/style/images/PT-2x-e272dbd6.png); } }
.NuxAppUpsell .appInstallButton .androidButton.RO {
background: url(https://s.pinimg.com/webapp/style/images/RO-1x-fda1c018.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.RO {
background-image: url(https://s.pinimg.com/webapp/style/images/RO-2x-d48881c4.png); } }
.NuxAppUpsell .appInstallButton .iosButton.RO {
background: url(https://s.pinimg.com/webapp/style/images/RO-1x-18736a64.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.RO {
background-image: url(https://s.pinimg.com/webapp/style/images/RO-2x-c762cab0.png); } }
.NuxAppUpsell .appInstallButton .androidButton.RU {
background: url(https://s.pinimg.com/webapp/style/images/RU-1x-65d3a95b.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.RU {
background-image: url(https://s.pinimg.com/webapp/style/images/RU-2x-0ce2c757.png); } }
.NuxAppUpsell .appInstallButton .iosButton.RU {
background: url(https://s.pinimg.com/webapp/style/images/RU-1x-ce1d81a3.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.RU {
background-image: url(https://s.pinimg.com/webapp/style/images/RU-2x-b89abd86.png); } }
.NuxAppUpsell .appInstallButton .androidButton.SK {
background: url(https://s.pinimg.com/webapp/style/images/SK-1x-66e29846.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.SK {
background-image: url(https://s.pinimg.com/webapp/style/images/SK-2x-16880fe3.png); } }
.NuxAppUpsell .appInstallButton .iosButton.SK {
background: url(https://s.pinimg.com/webapp/style/images/SK-1x-ac41a55d.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.SK {
background-image: url(https://s.pinimg.com/webapp/style/images/SK-2x-20b58101.png); } }
.NuxAppUpsell .appInstallButton .androidButton.SV {
background: url(https://s.pinimg.com/webapp/style/images/SV-1x-2bad06b4.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.SV {
background-image: url(https://s.pinimg.com/webapp/style/images/SV-2x-502a5a32.png); } }
.NuxAppUpsell .appInstallButton .iosButton.SV {
background: url(https://s.pinimg.com/webapp/style/images/SV-1x-b3f99f27.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.SV {
background-image: url(https://s.pinimg.com/webapp/style/images/SV-2x-b1271639.png); } }
.NuxAppUpsell .appInstallButton .androidButton.TH {
background: url(https://s.pinimg.com/webapp/style/images/TH-1x-66e29846.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.TH {
background-image: url(https://s.pinimg.com/webapp/style/images/TH-2x-16880fe3.png); } }
.NuxAppUpsell .appInstallButton .iosButton.TH {
background: url(https://s.pinimg.com/webapp/style/images/TH-1x-afac524b.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.TH {
background-image: url(https://s.pinimg.com/webapp/style/images/TH-2x-7ecf42ba.png); } }
.NuxAppUpsell .appInstallButton .androidButton.TL {
background: url(https://s.pinimg.com/webapp/style/images/TL-1x-a001709a.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.TL {
background-image: url(https://s.pinimg.com/webapp/style/images/TL-2x-58021b84.png); } }
.NuxAppUpsell .appInstallButton .iosButton.TL {
background: url(https://s.pinimg.com/webapp/style/images/TL-1x-31d0bc83.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.TL {
background-image: url(https://s.pinimg.com/webapp/style/images/TL-2x-3187e1aa.png); } }
.NuxAppUpsell .appInstallButton .androidButton.TR {
background: url(https://s.pinimg.com/webapp/style/images/TR-1x-f7dc0333.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.TR {
background-image: url(https://s.pinimg.com/webapp/style/images/TR-2x-4585987c.png); } }
.NuxAppUpsell .appInstallButton .iosButton.TR {
background: url(https://s.pinimg.com/webapp/style/images/TR-1x-6f0f8e76.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.TR {
background-image: url(https://s.pinimg.com/webapp/style/images/TR-2x-1bfaab3e.png); } }
.NuxAppUpsell .appInstallButton .androidButton.UK {
background: url(https://s.pinimg.com/webapp/style/images/UK-1x-9ecb075c.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.UK {
background-image: url(https://s.pinimg.com/webapp/style/images/UK-2x-25a04f9a.png); } }
.NuxAppUpsell .appInstallButton .iosButton.UK {
background: url(https://s.pinimg.com/webapp/style/images/UK-1x-6f0f8e76.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.UK {
background-image: url(https://s.pinimg.com/webapp/style/images/UK-2x-1bfaab3e.png); } }
.NuxAppUpsell .appInstallButton .androidButton.VI {
background: url(https://s.pinimg.com/webapp/style/images/VI-1x-aba34925.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .androidButton.VI {
background-image: url(https://s.pinimg.com/webapp/style/images/VI-2x-f245f353.png); } }
.NuxAppUpsell .appInstallButton .iosButton.VI {
background: url(https://s.pinimg.com/webapp/style/images/VI-1x-474f64a4.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxAppUpsell .appInstallButton .iosButton.VI {
background-image: url(https://s.pinimg.com/webapp/style/images/VI-2x-119d560d.png); } }
.OpenBoardUserRep {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
-ms-flex-line-pack: center;
align-content: center;
box-sizing: border-box;
color: #5f5f5f;
float: left;
margin: 7px;
overflow: hidden;
position: relative;
vertical-align: top;
width: 236px; }
.OpenBoardUserRep.noContainer {
box-shadow: none;
margin: 0; }
.OpenBoardUserRep.double {
width: 486px; }
.OpenBoardUserRep.overflow {
overflow: visible; }
.OpenBreadthSection .topicsFlexWrapper {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
height: 136px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
text-align: left;
width: 100%; }
.OpenBreadthSection .item {
padding-left: 7px;
padding-right: 7px; }
.OpenCTASection {
padding-bottom: 56px;
padding-top: 56px;
width: 100%; }
.OpenCTASection .openSectionTitle {
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif;
color: #555;
font-size: 28px;
font-weight: bold;
letter-spacing: -1px;
margin-left: auto;
margin-right: auto;
padding-bottom: 24px;
text-align: center;
width: 400px; }
.OpenCTASection .openSectionTitle.save, .OpenCTASection .openSectionTitle.plan {
width: 450px; }
.OpenCTASection .openSectionTitle.breadth {
width: 301px; }
.OpenCTASection .openSectionTitle.search {
width: 550px; }
.OpenCTASection .centerContainer {
margin: auto;
width: 100%; }
.OpenCTASection .buttonWrapper {
margin-left: auto;
margin-right: auto;
width: 250px; }
.OpenCTASection .continueButton {
font-size: 15px;
width: 250px; }
.OpenCTASection.grayBackground {
background-color: rgba(239, 239, 239, 0.5);
border-bottom: 1px solid #efefef;
border-top: 1px solid #efefef; }
.OpenGridWrapper .gridRow1 {
min-height: 800px; }
.OpenMultiVisitButton {
background-color: #fff;
border-radius: 20px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; }
.OpenMultiVisitButton .image {
background: url(https://s.pinimg.com/webapp/style/images/arrow_right-1x-9ebcbfed.png) no-repeat;
background-size: contain;
height: 14px;
width: 15px;
float: right;
height: 13.3px;
margin-bottom: 11.35px;
margin-right: 16.7px;
margin-top: 11.35px;
width: 14.3px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.OpenMultiVisitButton .image {
background-image: url(https://s.pinimg.com/webapp/style/images/arrow_right-2x-4e75f32b.png); } }
.OpenMultiVisitButton .recommendationsText {
color: #36494c;
font-weight: bold;
letter-spacing: -.2px;
line-height: 1.1;
overflow: hidden;
padding: 11px 12px 5px 16px; }
.OpenMultiVisitTray {
background-color: rgba(54, 73, 76, 0.98);
bottom: 0;
color: #fff;
cursor: pointer;
display: block;
height: auto;
max-height: 0;
min-width: 1000px;
position: fixed;
width: 100%;
z-index: 680; }
.OpenMultiVisitTray.showTray {
max-height: 120px;
-webkit-transition-delay: 2s;
transition-delay: 2s;
-webkit-transition-duration: 2s;
transition-duration: 2s;
-webkit-transition-property: max-height;
transition-property: max-height; }
.OpenMultiVisitTray.showTray.topicsView {
max-height: 143px; }
.OpenMultiVisitTray .centeredContent {
padding-left: 40px;
padding-right: 40px; }
.OpenMultiVisitTray .leftContent {
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
display: block;
float: left;
padding-bottom: 16px;
padding-top: 16px;
width: auto; }
.OpenMultiVisitTray .rightContent {
float: right;
padding-bottom: 42px;
padding-top: 42px; }
.OpenMultiVisitTray .pinTopicThumbnailBar {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
text-align: left;
width: auto; }
.OpenMultiVisitTray.topicsView .rightContent {
padding-bottom: 50px;
padding-top: 50px; }
.OpenMultiVisitTray.topicsView .OpenMultiVisitButton .image {
margin-bottom: 13.7px;
margin-right: 19.7px;
margin-top: 16px; }
.OpenMultiVisitTray.topicsView .recommendationsText {
font-size: 16px;
height: 18px;
padding: 13px 16px 12px 20px; }
.OpenMultiVisitTrayItem .thumbnail {
border-radius: 8px;
display: inline-block;
margin-left: 8px;
margin-right: 8px;
overflow: hidden;
position: relative;
vertical-align: middle; }
.OpenMultiVisitTrayItem .thumbnail .thumbnailImg {
background: #fff;
background-size: cover;
height: 88px;
width: 88px; }
.OpenMultiVisitTrayItem .topic .thumbnailImg {
background: #fff center;
background-size: cover;
height: 111px;
width: 111px; }
.OpenMultiVisitTrayItem .topic .topicThumbnailGradient {
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.25));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.25));
border-radius: 8px;
bottom: 0;
height: 100%;
position: absolute;
width: 100%; }
.OpenMultiVisitTrayItem .topic .topicText {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
bottom: 0;
color: #fff;
font-size: 13px;
font-weight: bold;
height: auto;
letter-spacing: -.1px;
line-height: 1;
overflow: hidden;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 16px;
position: absolute;
width: auto; }
.OpenNavbar {
float: left;
margin-left: 14px;
margin-top: 40px;
min-height: 100vh;
position: fixed;
width: 236px; }
@media (min-width: 0px) and (max-width: 999px) {
.OpenNavbar {
display: none; } }
.OpenNavbar li {
margin-bottom: 6px; }
.OpenNavbar li a {
font-family: HelveticaNeue-Bold, 'Helvetica', arial;
color: #555;
font-size: 18px;
letter-spacing: -.25px;
line-height: 20px;
margin-bottom: 4px;
opacity: .4; }
.OpenNavbar li a.selected {
opacity: 1; }
.OpenNavbar li a:hover {
opacity: .8; }
.OpenPersonalizedSection h3.openSectionTitle {
width: 340px; }
.OpenPersonalizedSection .pinsSection {
padding-bottom: 20px; }
.OpenPersonalizedSection .recommendationsButton {
font-size: 15px;
padding-left: 40px !important;
padding-right: 40px !important;
width: auto; }
.OpenPersonalizedSection .pinsFlexWrapper {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
text-align: left;
width: 100%; }
.OpenPersonalizedSection .item {
padding-left: 7px;
padding-right: 7px; }
.OpenPersonalizedSection .creditFooter {
border-top: 0 !important; }
.OpenPlanProjectsSection .boardsFlexWrapper {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
height: 345px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
text-align: left;
width: 100%; }
.OpenPlanProjectsSection .Board .boardName {
display: none; }
.OpenPlanProjectsSection .Board .boardDirectButton {
background: #ebebeb;
border: 0;
border-radius: 4px;
color: #444;
font-size: 14px;
line-height: 36px;
padding: 0;
text-align: center;
text-shadow: none; }
.OpenPlanProjectsSection .Board .boardDirectButton:hover, .OpenPlanProjectsSection .Board .boardDirectButton:focus {
background: #f5f3f3; }
.OpenPlanProjectsSection .boardRepTitle {
padding: 10px 10px 0; }
.OpenSaveSection .openSectionTitle .highlight {
color: #bd081c; }
.OpenSaveSection .boardsFlexWrapper {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
height: 345px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
text-align: left;
width: 100%; }
.OpenSaveSection .Board .boardName {
display: none; }
.OpenSaveSection .Board .boardDirectButton {
background: #ebebeb;
border: 0;
border-radius: 4px;
color: #444;
font-size: 14px;
line-height: 36px;
padding: 0;
text-align: center;
text-shadow: none; }
.OpenSaveSection .Board .boardDirectButton:hover, .OpenSaveSection .Board .boardDirectButton:focus {
background: #f5f3f3; }
.OpenSaveSection .boardRepTitle {
padding: 10px 10px 0; }
.OpenSignupSection {
background: white;
border-radius: 0 !important;
box-shadow: none !important;
padding-bottom: 20px;
padding-top: 20px;
width: 100%; }
.OpenSignupSection .tagline {
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif;
color: #555;
font-size: 28px;
font-weight: bold;
letter-spacing: -1px;
margin-left: auto;
margin-right: auto;
padding-bottom: 30px;
padding-top: 15px;
text-align: center;
width: 550px; }
.OpenSignupSection .tagline.breadth {
width: 600px; }
.OpenSignupSection .tagline.personalize {
width: 450px; }
.OpenSignupSection .signupWrapper {
text-align: center !important; }
.OpenSignupSection .signupWrapper .step2 {
width: 100%; }
.OpenSignupSection.grayBackground {
background-color: rgba(239, 239, 239, 0.5);
border-bottom: 1px solid #efefef;
border-top: 1px solid #efefef; }
.OpenValueSection {
padding-bottom: 40px;
padding-top: 32px;
width: 100%; }
.OpenValueSection.save {
min-height: 425px; }
.OpenValueSection.personalize {
min-height: 250px; }
.OpenValueSection .openSectionTitle {
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif;
color: #555;
font-size: 28px;
font-weight: bold;
letter-spacing: -1.2px;
margin-left: auto;
margin-right: auto;
padding-bottom: 32px;
padding-top: 15px;
text-align: center;
width: 600px; }
.OpenValueSection .openSectionTitle.search {
width: 420px; }
.OpenValueSection .centerContainer {
display: table;
margin: auto;
width: auto; }
.PromptPinEducation .pinEducation {
left: -150px;
padding-bottom: 54px;
padding-top: 40px;
position: relative;
width: 928px; }
.PromptPinEducation .pinEducation .pinEducationHeader {
color: #555;
font-size: 48px;
font-weight: 700;
letter-spacing: -1.8px;
line-height: 1.17;
margin-bottom: 10px;
overflow: hidden;
text-align: center;
text-overflow: ellipsis; }
.PromptPinEducation .pinEducation .pinEducationHeader .websiteLink {
font-style: normal;
text-overflow: ellipsis;
white-space: nowrap; }
.PromptPinEducation .pinEducation .pinEducationSubtitle {
color: #4a4a4a;
font-size: 20px;
font-weight: 400;
letter-spacing: -.3px;
line-height: 1.1;
text-align: center; }
.PinFeedbackPage .sticky {
border-radius: 8px;
position: -webkit-sticky;
position: sticky;
top: 65px;
will-change: transform;
z-index: 101; }
@-webkit-keyframes fadeoutandzoom {
0% {
opacity: 1;
-webkit-transform: scale(0.9);
transform: scale(0.9); }
15% {
opacity: 1;
-webkit-transform: scale(0.9);
transform: scale(0.9); }
100% {
opacity: 0;
-webkit-transform: scale(1.1);
transform: scale(1.1); } }
@keyframes fadeoutandzoom {
0% {
opacity: 1;
-webkit-transform: scale(0.9);
transform: scale(0.9); }
15% {
opacity: 1;
-webkit-transform: scale(0.9);
transform: scale(0.9); }
100% {
opacity: 0;
-webkit-transform: scale(1.1);
transform: scale(1.1); } }
.PinFeedbackPage .FeedbackAnimation .FeedbackAnimationIcon {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-name: fadeoutandzoom;
animation-name: fadeoutandzoom;
pointer-events: none; }
.PinFeedbackPage .FeedbackAnimation .FeedbackAnimationIcon svg {
-webkit-filter: drop-shadow(0 0 10vw rgba(0, 0, 0, 0.8));
filter: drop-shadow(0 0 10vw rgba(0, 0, 0, 0.8)); }
.PinNextToGridCloseup .centeredWithinWrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.PinNextToGridCloseup .mainPin {
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 14px 7px 0;
width: 486px; }
.PinNextToGridCloseup .mainPin .pinCanonicalDescription,
.PinNextToGridCloseup .mainPin .pinDesc,
.PinNextToGridCloseup .mainPin .descriptionSection {
width: auto !important; }
.PinNextToGridCloseup.pinOverlay .mainPin {
margin: 0 auto; }
.PinNextToGridCloseup.pinCloseupSmall .repinsAndLikes {
font-size: 12px;
padding-right: 0;
padding-top: 2px; }
.PinNextToGridCloseup.pinCloseupSmall .repinsAndLikes .countInfo {
margin-top: 7px; }
.PinNextToGridCloseup .rightSection {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
position: relative; }
.PinNextToGridCloseup .rightSection .relatedPinsTitle {
color: #555;
font-size: 24px;
font-weight: bold;
margin: 14px 0 0 7px; }
.PinNextToGridCloseup .pinTopBar {
position: absolute;
z-index: 10; }
.PinNextToGridCloseup .PaddedPin {
margin: 0 32px; }
.PinNextToGridCloseup .PaddedPin .pinDomain {
width: auto !important; }
.PinNextToGridCloseup .Pin {
border-radius: 6px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
overflow: hidden;
width: 486px; }
.PinNextToGridCloseup .Pin.detailed.PinNextToGridCloseup .pinImage {
border-radius: 6px; }
.PinNextToGridCloseup .Pin.detailed.PinNextToGridCloseup .pinActionBarStickyContainer {
padding-top: 60px; }
.PinNextToGridCloseup .CloseupTitleCard {
padding-left: 32px;
padding-right: 32px; }
.PinNextToGridCloseup .CloseupTitleCard .richPinInformation {
padding: 0;
width: auto; }
.PinNextToGridCloseup .CloseupTitleCard .richPinTitle {
padding-bottom: 8px; }
.PinNextToGridCloseup .CloseupSourceDescription .richPinArticleSummary {
width: auto; }
.PinNextToGridCloseup .commentDescriptionContent {
width: auto !important; }
.PinNextToGridCloseup .showMoreButton {
display: none; }
.PinNextToGridCloseup .topSection {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row; }
.PinNextToGridCloseup .PinActionBar {
width: 486px !important; }
.PinNextToGridCloseup .positionModuleElement.active {
min-height: 0;
min-width: 0; }
.PinNextToGridCloseup.gridLayout .pinPageHeader {
background-color: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
margin-bottom: 18px; }
.PinNextToGridCloseup.gridLayout .pinPageHeaderTitle {
color: #555;
font-size: 48px;
font-weight: bold;
padding-top: 20px; }
.PinNextToGridCloseup.gridLayout .RelatedInterestsSection {
margin: 32px 0; }
.PinNextToGridCloseup .closeupContainer {
margin-top: 0 !important;
width: 486px !important; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.PinPicksDetail p {
margin: 0; }
.PinPicksDetail .banner {
background-position: right;
background-size: cover;
padding: 71px 0;
position: relative; }
.PinPicksDetail .banner .title {
font-size: 61px;
font-weight: bold;
margin-bottom: 10px; }
.PinPicksDetail .banner .pinpicksTitle, .PinPicksDetail .banner .preTitle, .PinPicksDetail .banner .title {
color: #eee;
line-height: 110%;
margin-bottom: 10px;
text-align: center; }
.PinPicksDetail .pinpicksTitle {
font-size: 20px;
font-weight: normal;
margin-bottom: 5px; }
.PinPicksDetail .preTitle {
font-size: 24px;
padding-top: 10px; }
.PinPicksDetail .boardSet,
.PinPicksDetail .middleImageOverlay {
margin: auto;
max-width: 1000px; }
.PinPicksDetail .boardSet > .User,
.PinPicksDetail .boardSet > .Board,
.PinPicksDetail .middleImageOverlay > .User,
.PinPicksDetail .middleImageOverlay > .Board {
display: inline-block;
margin: 5px; }
.PinPicksDetail .pinnerGrid,
.PinPicksDetail .boardGrid {
margin: -7px; }
.PinPicksDetail .sectionText {
padding: 10px; }
.PinPicksDetail .header {
color: #333;
font-size: 20px;
font-weight: bold;
padding: 0 8px; }
.PinPicksDetail .details {
color: #777;
font-size: 16px;
line-height: 22px;
padding: 6px 8px; }
.PinPicksDetail .bodyWrapper {
padding: 20px 0 30px; }
.PinPicksDetail .featuredPinnerBackground {
background: #fff; }
.PinPicksDetail .divider {
background-color: #e9e9e9;
height: 1px;
margin: 14px 0; }
.PinPicksDetail .lightText .header,
.PinPicksDetail .lightText .details {
color: #eee; }
.PinPicksDetail .middleImage {
background-position: right;
background-size: cover; }
.PinPicksDetail .nextPinPick {
background-position: 50%;
margin-top: 20px; }
/* desktop.scss */
.PinPicksDetail .featuredPinnerText {
max-width: 472px;
overflow: hidden; }
.PinPicksDetail .featuredPinnerBoard {
float: left;
margin-right: 30px;
margin-top: -40px; }
.PinPicksDetail .featuredPinnerContainer {
margin: auto;
width: 944px; }
.PinPicksDetail .featuredPinnerContainer::after {
clear: both;
content: "";
display: table; }
.PinsCarousel {
overflow-x: scroll;
overflow-y: hidden;
padding: 15px 15px 5px 0;
white-space: nowrap;
width: auto; }
.PinsCarousel .carouselItemContainer {
display: inline-block;
vertical-align: top; }
.PinsCarousel .carouselItem {
height: 130px;
margin: 0 5px 8px 0;
overflow: hidden;
width: 130px; }
.PinsCarousel .itemText {
color: #000;
font-weight: normal;
white-space: normal;
width: 130px; }
.PasswordResetOneClick h1 {
font-size: 21px; }
.PasswordResetOneClick h3 {
font-size: 14px;
font-weight: normal;
line-height: 1.6em;
margin-top: 20px; }
.PasswordResetOneClick .successMessage {
display: none; }
.PasswordResetOneClick .wrapper {
background: #fff;
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
margin: 100px auto 0;
position: relative;
max-width: 380px;
z-index: 682;
min-height: auto !important; }
.PasswordResetOneClick .content {
color: #525252;
padding: 20px; }
.PasswordResetOneClick .messageContent {
border-top: 1px solid #dadada;
padding: 20px; }
.PasswordResetOneClick .messageContent h3 {
margin: 0; }
.PasswordResetOneClick .oneClickPasswordResetForm {
margin-bottom: 0; }
.PasswordResetOneClick .formFooter {
text-align: right; }
.UserChangePassword {
width: 530px; }
.UserChangePassword .forgotPassword {
color: #bd081c;
display: block;
font-size: 11px; }
.SeamlessOverlay {
background-color: rgba(85, 85, 85, 0.8);
bottom: 0;
color: #555;
display: none;
left: 0;
letter-spacing: -1.5px;
position: fixed;
right: 0;
top: 0;
z-index: 10000; }
.SeamlessOverlay .bottomOverlay {
background-color: #fff;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 35%;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 20px;
position: absolute;
text-align: left; }
.SeamlessOverlay .pinterestLogo {
background: url(https://s.pinimg.com/webapp/style/images/seamless_overlay_logo-1x-38b82376.png) no-repeat;
background-size: contain;
height: 80px;
width: 80px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SeamlessOverlay .pinterestLogo {
background-image: url(https://s.pinimg.com/webapp/style/images/seamless_overlay_logo-2x-123786fa.png); } }
.SeamlessOverlay .subtitle {
font-size: 18px; }
.SeamlessOverlay .mainText {
font-size: 36px;
font-weight: bold;
letter-spacing: -1.5px;
line-height: 36px;
width: 80%; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.SentPinSignup .signupTitle {
color: #555;
font-weight: bold;
letter-spacing: -1.5px;
text-align: left; }
.SentPinSignup .signupTitle .step1, .SentPinSignup .signupTitle .step2 {
-webkit-animation: fadeIn .5s ease-out;
animation: fadeIn .5s ease-out; }
.SentPinSignup .signupTitle .step2 {
display: none; }
.SentPinSignup .signupTitle.completeSignupStep .step1 {
display: none; }
.SentPinSignup .signupTitle.completeSignupStep .step2 {
display: block; }
/* desktop.scss */
.SentPinSignup.saveHeader .sentPinInfo, .SentPinSignup.discoverHeader .sentPinInfo {
height: 400px;
padding-top: 20px;
width: 690px; }
.SentPinSignup.saveModal .sentPinInfo {
height: 390px;
padding: 40px;
width: 680px; }
.SentPinSignup .sentPinInfo {
margin: 0 auto; }
.SentPinSignup .signupWrapper {
float: left;
margin-right: 90px;
text-align: left;
width: 310px; }
.SentPinSignup .signupTitle {
color: #555;
font-size: 48px;
font-weight: bold;
letter-spacing: -1.5px;
line-height: 48px;
padding-bottom: 20px; }
.SentPinSignup .continueSignupButton {
display: none; }
.SentPinSignup .SignupForm {
width: 310px; }
.SentPinSignup .SignupForm .registerButtons.styleLogin {
width: 310px; }
.SentPinSignup .SignupForm .termOfServiceWrapper .outerTermsOfServiceFooter {
font-size: 12px;
height: 32px;
line-height: 12px;
text-align: center;
width: 305px; }
.SentPinSignup .Login.compact .socialLogin .btn {
width: 100%; }
.SentPinSignup .Login.compact .socialLogin .btn .buttonText {
margin-left: 55px; }
.CloseupSignupModal {
height: 446px;
width: 688px;
/**
* csLeftContent holds the pin image or related pins slideshow
*/
/**
* csRightContent holds the csSignupWall, csSignupOptions and csSignupForm
*/ }
.CloseupSignupModal .homeUnauthNumbers {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #fff;
margin: 0 auto;
position: absolute;
text-align: center;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
top: 464px;
width: 100%;
z-index: -1; }
.CloseupSignupModal .homeUnauthNumbers .left, .CloseupSignupModal .homeUnauthNumbers .right {
display: inline-block;
float: none;
text-align: center; }
.CloseupSignupModal .homeUnauthNumbers .left {
border-right: 2px solid #fff;
margin-left: -4px;
padding-left: 15px;
padding-right: 20px; }
.CloseupSignupModal .homeUnauthNumbers .left .numbersWrapper {
text-align: right; }
.CloseupSignupModal .homeUnauthNumbers .right {
padding-left: 20px;
padding-right: 15px; }
.CloseupSignupModal .homeUnauthNumbers .right .numbersWrapper {
text-align: left; }
.CloseupSignupModal .homeUnauthNumbers .numbersTitle {
font-family: Helvetica;
font-size: 35px;
font-weight: bold;
display: inline-block; }
.CloseupSignupModal .homeUnauthNumbers .numbersSubtitle {
display: inline-block;
font-size: 12px;
font-weight: bold;
line-height: 120%;
padding-left: 4px;
padding-top: 3px;
text-align: left; }
.CloseupSignupModal.categoryPivotStyling {
box-shadow: none;
height: auto;
margin-left: 10px;
width: 839px; }
.CloseupSignupModal.categoryPivotStyling .csLeftContent {
width: 419.5px; }
.CloseupSignupModal.categoryPivotStyling .csRightContent {
padding: 0 40px; }
.CloseupSignupModal.categoryPivotStyling .csRightContent .csContent .csSignupWall {
width: 289.58333px; }
.CloseupSignupModal .inspiredLogo {
width: 24px;
height: 24px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -220px -218px no-repeat;
display: inline-block;
margin-bottom: -5px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.CloseupSignupModal .inspiredLogo {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -205px -303px;
background-size: 428px 427px; } }
.CloseupSignupModal .csLeftContent {
border-radius: 6px 0 0 6px;
float: left;
height: 446px;
-webkit-mask-image: -webkit-radial-gradient(#fff, #000);
mask-image: radial-gradient(#fff, #000);
width: 344px; }
.CloseupSignupModal .csLeftContent.right {
float: right;
height: auto;
margin-bottom: 5%;
margin-right: 20px;
margin-top: 7%; }
.CloseupSignupModal .csLeftContent.interestType .csContent, .CloseupSignupModal .csLeftContent.interestType .csItem, .CloseupSignupModal .csLeftContent.boardType .csContent, .CloseupSignupModal .csLeftContent.boardType .csItem, .CloseupSignupModal .csLeftContent.pinType .csContent, .CloseupSignupModal .csLeftContent.pinType .csItem, .CloseupSignupModal .csLeftContent.pinnableType .csContent, .CloseupSignupModal .csLeftContent.pinnableType .csItem {
height: inherit;
position: relative;
width: inherit; }
.CloseupSignupModal .csLeftContent.interestType .csContent.csContentExperiment, .CloseupSignupModal .csLeftContent.interestType .csItem.csContentExperiment, .CloseupSignupModal .csLeftContent.boardType .csContent.csContentExperiment, .CloseupSignupModal .csLeftContent.boardType .csItem.csContentExperiment, .CloseupSignupModal .csLeftContent.pinType .csContent.csContentExperiment, .CloseupSignupModal .csLeftContent.pinType .csItem.csContentExperiment, .CloseupSignupModal .csLeftContent.pinnableType .csContent.csContentExperiment, .CloseupSignupModal .csLeftContent.pinnableType .csItem.csContentExperiment {
border: 1px solid #b5b5b5;
border-radius: 6px;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.27);
height: 325px;
margin: 10% 0;
padding: 15px;
width: 355px; }
.CloseupSignupModal .csLeftContent.interestType .csItem, .CloseupSignupModal .csLeftContent.boardType .csItem, .CloseupSignupModal .csLeftContent.pinType .csItem, .CloseupSignupModal .csLeftContent.pinnableType .csItem {
margin: 0; }
.CloseupSignupModal .csRightContent {
background: #fff;
border-radius: 0 6px 6px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
float: right;
height: 446px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: visible;
padding: 0 29px;
position: relative;
width: auto; }
.CloseupSignupModal .csRightContent .csContent {
text-align: center; }
.CloseupSignupModal .csRightContent .csContent .csSignupWall {
margin: 0;
width: 284px; }
.CloseupSignupModal .csRightContent .csContent .csSignupWall > h3 {
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif;
font-size: 24px;
font-weight: bold;
line-height: 28px;
margin: 0 0 18px; }
.CloseupSignupModal .csRightContent .csContent .csSignupWall.leftMargin {
margin-left: 10px; }
.CloseupSignupModal .csRightContent .csContent .csSignupWall .leftAligned {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.CloseupSignupModal .csRightContent .csContent .csSignupWall .taglineExperiment {
color: #555;
font-size: 32px;
letter-spacing: -1.7px;
line-height: 1.2;
margin: 0 -20px 15px 0;
text-align: left; }
.CloseupSignupModal .csRightContent .csContent .csSignupWall .loginLine {
margin: 2px 0 8px; }
.CloseupSignupModal .csRightContent .csContent .csSignupWall .logo {
margin: 0 auto; }
.CloseupSignupModal .subtitle {
color: #555;
display: inline-block;
font-size: 14px;
font-weight: bold;
letter-spacing: -.2px;
line-height: 1.4;
margin-bottom: 26px; }
.CloseupSignupModal .separator {
border-bottom: #dedede 1px solid;
margin: 15px auto;
width: 180px; }
.CloseupSignupModal .left {
float: left;
height: auto;
margin: 50px 0; }
.ContinueAsABusinessButton {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
z-index: 1; }
.ContinueAsABusinessButton.borderless {
display: inline-block;
font-size: 16px;
font-weight: bold;
padding: 7px 13px;
white-space: nowrap; }
.ContinueAsABusinessButton.solid {
display: block;
font-size: 16px; }
.ContinueAsABusinessButton--dark {
color: #444; }
.ContinueAsABusinessButton--dark:hover, .ContinueAsABusinessButton--dark:focus {
color: #444; }
.ContinueAsABusinessButton--light {
color: #fff;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); }
.ContinueAsABusinessButton--light:hover, .ContinueAsABusinessButton--light:focus {
color: #fff; }
.FourPinSignupModal .modalLoginButton {
font-size: 15px;
height: 40px;
left: 610px;
margin: 10px 0;
padding: 0 30px;
top: 21px; }
.FourPinSignupModal .basicLightGray:hover {
background: #f8f8f8; }
.FourPinSignupModal .fourPinSignupContainer {
background-color: #fff;
border-radius: 8px;
height: 525px;
left: 50%;
position: fixed;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 775px; }
.FourPinSignupModal .modalContentContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 18px;
padding: 0 60px; }
.FourPinSignupModal .modalLeft, .FourPinSignupModal .modalRight {
-ms-flex-item-align: center;
align-self: center;
width: 50%; }
.FourPinSignupModal .modalRight {
margin-left: 40px; }
.FourPinSignupModal .modalTitle {
color: #555;
font-size: 32px;
font-weight: bold; }
.FourPinSignupModal .SignupForm {
margin: 30px 0 0; }
.FourPinSignupModal .SignupForm .confirmedEmail,
.FourPinSignupModal .SignupForm .genderFormItem,
.FourPinSignupModal .SignupForm .toggleStep,
.FourPinSignupModal .SignupForm .businessField {
text-align: center; }
.FourPinSignupModal .fourPin {
border-radius: 6px;
box-shadow: 0 0 5px #999;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 310px;
width: 310px; }
.FourPinSignupModal .pinsContainer {
-ms-flex-line-pack: justify;
align-content: space-between;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 15px;
width: 100%; }
.FourPinSignupModal .pinImage {
background-size: cover;
border-radius: 4px;
height: 135px;
width: 135px; }
.InlineSignup {
border-radius: 6px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); }
.InlineSignup .outerTermsOfServiceFooter {
font-size: 11px; }
.InlineSignup .loginLine .separator {
margin-bottom: 10px; }
.InlineSignup .outerTermsOfServiceFooter,
.InlineSignup .unAuthFacebookConnect {
-webkit-transition: opacity .2s linear;
transition: opacity .2s linear; }
.InlineSignup.secondStep .loginLine,
.InlineSignup.secondStep .loginButton,
.InlineSignup.secondStep .loginPrefix {
opacity: 0;
pointer-events: none; }
.PinItLandingSignup {
margin: auto;
text-align: center;
width: 340px; }
.PinItLandingSignup .savePinDialog {
background-color: #efefef;
border-radius: 6px;
position: absolute;
top: 5%;
width: 340px; }
.PinItLandingSignup .savePinDialog .homeUnauthLogoWrapper {
background-color: #fff;
border-radius: 6px;
display: block !important;
padding-top: 10px; }
.PinItLandingSignup .savePinDialog .homeUnauthLogoWrapper .homeUnauthLogo {
width: 251px;
height: 85px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 0 no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.PinItLandingSignup .savePinDialog .homeUnauthLogoWrapper .homeUnauthLogo {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: 0 0;
background-size: 428px 427px; } }
.PinItLandingSignup .savePinDialog .savePinWrapper {
background-color: #fdffe0;
border-top: #dedede 1px solid;
padding: 15px; }
.PinItLandingSignup .savePinDialog .savePinWrapper .savePin {
margin: auto; }
.PinItLandingSignup .savePinDialog .savePinWrapper .savePin .savePinImgWrapper {
border: #dedede 1px solid;
border-radius: 6px;
display: inline-block;
height: 65px;
margin-right: 15px;
overflow: hidden;
width: 65px; }
.PinItLandingSignup .savePinDialog .savePinWrapper .savePin .savePinText {
display: inline-block;
font-size: 13px;
line-height: 150%;
vertical-align: top;
width: 175px; }
.PinItLandingSignup .savePinDialog .savePinWrapper .savePin .savePinText.hasImage {
margin-top: 5px;
text-align: left; }
.PinItLandingSignup .savePinDialog .signupForm {
border-top: #dedede 1px solid;
padding-top: 15px; }
.PinItLandingSignup .savePinDialog .signupForm .loginLine {
margin: 15px auto; }
.PinItLandingSignup .savePinDialog .signupForm .outerTermsOfServiceFooter {
bottom: 0;
color: #333;
position: relative; }
.PinItLandingSignup .savePinDialog .signupForm .outerTermsOfServiceFooter a {
color: #717171; }
.PinItLandingSignup .loginLine .emailLogin {
padding: 9px 12px;
right: 6px;
top: 6px; }
.PinItLandingSignup .separator {
border-bottom: #dedede 1px solid;
margin: auto;
margin-bottom: 15px;
width: 180px; }
.PlainSignupModal {
background-color: #eee;
border-radius: 6px;
position: relative;
text-align: center !important;
width: 335px; }
.PlainSignupModal .homeUnauthNumbers {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #fff;
margin: 0 auto;
position: absolute;
text-align: center;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
top: 20px;
width: 100%;
z-index: -1; }
.PlainSignupModal .homeUnauthNumbers .left, .PlainSignupModal .homeUnauthNumbers .right {
display: inline-block;
float: none;
text-align: center; }
.PlainSignupModal .homeUnauthNumbers .left {
border-right: 2px solid #fff;
margin-left: -4px;
padding-left: 15px;
padding-right: 20px; }
.PlainSignupModal .homeUnauthNumbers .left .numbersWrapper {
text-align: right; }
.PlainSignupModal .homeUnauthNumbers .right {
padding-left: 20px;
padding-right: 15px; }
.PlainSignupModal .homeUnauthNumbers .right .numbersWrapper {
text-align: left; }
.PlainSignupModal .homeUnauthNumbers .numbersTitle {
font-family: Helvetica;
font-size: 35px;
font-weight: bold;
display: inline-block; }
.PlainSignupModal .homeUnauthNumbers .numbersSubtitle {
display: inline-block;
font-size: 12px;
font-weight: bold;
line-height: 120%;
padding-left: 4px;
padding-top: 3px;
text-align: left; }
.PlainSignupModal .logoWrapper {
background-color: #fff;
border-radius: 6px 6px 0 0; }
.PlainSignupModal .logoWrapper .logoSmall {
width: 87px;
height: 21px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -253px -219px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
margin: 20px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.PlainSignupModal .logoWrapper .logoSmall {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -110px -234px;
background-size: 428px 427px; } }
.PlainSignupModal .signupWrapper {
border-top: solid 1px #ccc;
min-height: 350px;
padding: 20px 10px; }
.PlainSignupModal .signupWrapper .title {
margin: 0 3px 25px; }
.PlainSignupModal .signupWrapper .title h3 {
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif;
font-size: 28px;
font-weight: bold;
letter-spacing: -1px; }
.PlainSignupModal .signupWrapper .title h4 {
font-size: 14px;
font-weight: normal;
margin-top: 10px; }
.PlainSignupModal .signupWrapper .Button.btn.requestInviteButton {
height: 40px;
width: 268px; }
.PlainSignupModal .signupWrapper .Button.btn.unauthHomeRegisterButton.unAuthFacebookConnect {
box-shadow: none; }
.PlainSignupModal .homeUnauthNumbers {
height: 0;
margin-left: -130px;
position: relative;
width: 600px; }
.PlainSignupModal .homeUnauthNumbers .left, .PlainSignupModal .homeUnauthNumbers .right {
width: 250px; }
.PlainSignupModal .closeModal {
width: 12px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -261px -242px no-repeat;
cursor: pointer;
position: absolute;
right: 15px;
top: 15px; }
.PlainSignupModal.secondStep .Login,
.PlainSignupModal.secondStep .caption,
.PlainSignupModal.secondStep .separator {
opacity: 0 !important; }
.RelatedItemsSlideshow {
background-color: #000;
height: 100%;
-webkit-mask-image: -webkit-radial-gradient(#fff, #000);
mask-image: radial-gradient(#fff, #000);
overflow: hidden;
position: absolute;
width: 100%; }
.RelatedItemsSlideshow .blackBackground {
opacity: .5; }
.RelatedItemsSlideshow .backgroundImage {
background-size: cover;
max-width: none;
min-height: 100%;
min-width: 100%;
-o-object-fit: cover;
object-fit: cover;
overflow: hidden;
position: absolute;
-webkit-transform: translateZ(0);
transform: translateZ(0); }
.RelatedItemsSlideshow .pinInfo {
color: #fff;
font-size: 11px;
margin: 10px 15px;
position: absolute;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
z-index: 5; }
.RelatedItemsSlideshow .pinInfo h4 {
font-size: 13px; }
.RelatedItemsSlideshow img {
border-radius: 0 !important;
left: 0;
min-height: 100%;
min-width: 100%;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
-webkit-transform: translateZ(0);
transform: translateZ(0); }
.RelatedItemsSlideshow.animate .slideshow img, .RelatedItemsSlideshow.animate .slideshow .pinInfo {
opacity: 0;
-webkit-transition: opacity 1s;
transition: opacity 1s; }
.RelatedItemsSlideshow.animate .slideshow img {
/* stylelint-disable-next-line at-rule-no-unknown */ }
.RelatedItemsSlideshow.animate .slideshow img:nth-of-type(1) {
/* stylelint-disable-next-line at-rule-no-unknown */
-webkit-animation: zoomInAndFade 20s 0.3s linear infinite;
animation: zoomInAndFade 20s 0.3s linear infinite; }
.RelatedItemsSlideshow.animate .slideshow img:nth-of-type(2) {
/* stylelint-disable-next-line at-rule-no-unknown */
-webkit-animation: zoomOutAndFade 20s 5.3s linear infinite;
animation: zoomOutAndFade 20s 5.3s linear infinite; }
.RelatedItemsSlideshow.animate .slideshow img:nth-of-type(3) {
/* stylelint-disable-next-line at-rule-no-unknown */
-webkit-animation: zoomInAndFade 20s 10.3s linear infinite;
animation: zoomInAndFade 20s 10.3s linear infinite; }
.RelatedItemsSlideshow.animate .slideshow img:nth-of-type(4) {
/* stylelint-disable-next-line at-rule-no-unknown */
-webkit-animation: zoomOutAndFade 20s 15.3s linear infinite;
animation: zoomOutAndFade 20s 15.3s linear infinite; }
.RelatedItemsSlideshow.animate .slideshow .pinInfo {
/* stylelint-disable-next-line at-rule-no-unknown */ }
.RelatedItemsSlideshow.animate .slideshow .pinInfo:nth-of-type(1) {
-webkit-animation: fadeInAndOut 20s 0.3s linear infinite;
animation: fadeInAndOut 20s 0.3s linear infinite; }
.RelatedItemsSlideshow.animate .slideshow .pinInfo:nth-of-type(2) {
-webkit-animation: fadeInAndOut 20s 5.3s linear infinite;
animation: fadeInAndOut 20s 5.3s linear infinite; }
.RelatedItemsSlideshow.animate .slideshow .pinInfo:nth-of-type(3) {
-webkit-animation: fadeInAndOut 20s 10.3s linear infinite;
animation: fadeInAndOut 20s 10.3s linear infinite; }
.RelatedItemsSlideshow.animate .slideshow .pinInfo:nth-of-type(4) {
-webkit-animation: fadeInAndOut 20s 15.3s linear infinite;
animation: fadeInAndOut 20s 15.3s linear infinite; }
.RelatedItemsSlideshow.animate .slideshow .pinInfo a, .RelatedItemsSlideshow.animate .slideshow .pinInfo a:hover {
color: #fff; }
.RelatedItemsSlideshow.static .slideshow img, .RelatedItemsSlideshow.static .slideshow .pinInfo {
/* stylelint-disable-next-line at-rule-no-unknown */ }
.RelatedItemsSlideshow.static .slideshow img:nth-of-type(1), .RelatedItemsSlideshow.static .slideshow .pinInfo:nth-of-type(1) {
-webkit-animation-play-state: paused;
animation-play-state: paused; }
.RelatedItemsSlideshow.static .slideshow img:nth-of-type(2), .RelatedItemsSlideshow.static .slideshow .pinInfo:nth-of-type(2) {
-webkit-animation-play-state: paused;
animation-play-state: paused; }
.RelatedItemsSlideshow.static .slideshow img:nth-of-type(3), .RelatedItemsSlideshow.static .slideshow .pinInfo:nth-of-type(3) {
-webkit-animation-play-state: paused;
animation-play-state: paused; }
.RelatedItemsSlideshow.static .slideshow img:nth-of-type(4), .RelatedItemsSlideshow.static .slideshow .pinInfo:nth-of-type(4) {
-webkit-animation-play-state: paused;
animation-play-state: paused; }
.RelatedPinModal .col {
background-size: cover;
border-radius: 4px;
float: left;
height: 156px;
margin: 1%;
width: 48%; }
.SignupButton {
text-align: center;
width: 120px; }
.SignupForm {
margin: 0 auto;
width: 268px; }
.SignupForm.secondStep .outerTermsOfServiceFooter,
.SignupForm.secondStep .unAuthFacebookConnect,
.SignupForm.secondStep .socialLogin {
opacity: 0;
pointer-events: none; }
.SignupForm.secondStep.loginForm .outerTermsOfServiceFooter,
.SignupForm.secondStep.loginForm .unAuthFacebookConnect,
.SignupForm.secondStep.loginForm .socialLogin {
opacity: 1;
pointer-events: all; }
.SignupForm.largeButtons .unAuthFacebookConnect, .SignupForm.largeButtons .continueButton {
height: 50px !important; }
.SignupForm.largeButtons .unAuthFacebookConnect em, .SignupForm.largeButtons .continueButton em {
margin-top: 5px !important; }
.SignupForm.largeButtons .textField, .SignupForm.largeButtons .continueButton, .SignupForm.largeButtons button.signup {
font-size: 16px;
height: 50px !important; }
.SignupForm.whiteWall {
width: 280px; }
.SignupForm.whiteWall p {
color: #aaa; }
.SignupForm.whiteSignupBanner {
width: 310px; }
.SignupForm.whiteSignupBanner p {
color: #aaa; }
.SignupForm.darkWall label span {
color: #fff !important; }
.SignupForm.darkWall .termOfServiceWrapper .outerTermsOfServiceFooter {
color: #fff; }
.SignupForm.darkWall .termOfServiceWrapper .outerTermsOfServiceFooter a {
color: #fff; }
.SignupForm.signupWall .mWebMultiStep {
margin-top: -15px; }
.SignupForm.signupWall .termOfServiceWrapper {
margin-top: -15px; }
.SignupForm.signupWall .standardForm {
margin-top: -5px; }
.SignupForm.signupWall .confirmedEmail {
color: #000; }
.SignupForm.signupWall .toggleStep {
color: #000;
text-shadow: none; }
.SignupForm.signupWall .userRegisterButton {
border-color: #fff; }
.SignupForm.signupWall .signupButton {
margin-top: -5px; }
.SignupForm.signupWall .groupSeparator p::before {
padding-right: 15px; }
.SignupForm.signupWall .groupSeparator p::after {
padding-left: 15px; }
.SignupForm .buttonWrapper .register,
.SignupForm .buttonWrapper .standardForm,
.SignupForm .buttonWrapper .socialLogin,
.SignupForm .buttonWrapper .multiStep {
width: 100%; }
.SignupForm .buttonWrapper .standardForm {
background: transparent; }
.SignupForm .buttonWrapper .standardForm .formInputWrapper {
width: 100%; }
.SignupForm .buttonWrapper .socialLogin {
padding-left: 0; }
.SignupForm .termOfServiceWrapper {
margin-top: 15px; }
.SignupForm .termOfServiceWrapper .outerTermsOfServiceFooter {
color: #aaa;
display: inline;
font-size: 11px;
font-weight: normal;
width: 224px; }
.SignupForm .termOfServiceWrapper .outerTermsOfServiceFooter a {
color: #aaa; }
.SignupForm .separator {
border-bottom: #dedede 1px solid;
margin: 10px auto;
width: 110px; }
.SignupForm .loginPrefix {
color: #5a5a5a;
font-weight: 500; }
.SignupForm .loginButton {
box-shadow: none;
margin-top: 10px;
width: 60%; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.UnauthBanner {
background: rgba(0, 0, 0, 0.85);
bottom: 0;
color: #fff;
left: 0;
position: fixed;
-webkit-transition: opacity .8s ease .8s;
transition: opacity .8s ease .8s;
width: 100%;
z-index: 684; }
/* desktop.scss */
.UnauthBanner {
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-position: 50% 0;
background-size: cover;
border-radius: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-weight: bold;
height: 0;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
left: 0; }
.UnauthBanner .closePlain {
background: none;
border-radius: none;
box-shadow: none;
margin-right: 24px;
margin-top: 24px;
position: absolute;
right: 0;
top: 0; }
.UnauthBanner .closePlain em {
background: url(https://s.pinimg.com/webapp/style/images/cta-cancel-1x-a986abb0.png) no-repeat;
background-size: contain;
height: 24px;
width: 24px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UnauthBanner .closePlain em {
background-image: url(https://s.pinimg.com/webapp/style/images/cta-cancel-2x-29e09f6e.png); } }
.UnauthBanner .inspiredBackground {
position: absolute;
width: 100%; }
.UnauthBanner .fullScreenSignup {
display: none; }
.UnauthBanner .fullScreenSignup .caption {
margin-bottom: 40px; }
.UnauthBanner .nextButton {
height: 50px; }
.UnauthBanner .textAndButtons {
display: none; }
.UnauthBanner.noBanner {
height: 0;
-webkit-transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93);
transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93); }
.UnauthBanner.noBanner .textAndButtons {
display: none !important; }
.UnauthBanner.quarterScreenBanner {
height: 250px;
-webkit-transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93);
transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93); }
.UnauthBanner.quarterScreenBannerShortVariant {
height: 200px;
-webkit-transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93);
transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93); }
.UnauthBanner.halfScreenBanner {
height: 60%;
-webkit-transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93);
transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93); }
.UnauthBanner.halfScreenBannerShortVariant {
height: 40%;
-webkit-transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93);
transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93); }
.UnauthBanner.fullScreenBanner {
height: 100%;
-webkit-transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93);
transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93); }
@media (min-width: 0) and (max-width: 999px) {
.showingCloseup .UnauthBanner .centeredWithinWrapper.gridWidth {
width: 750px; } }
.showingCloseup .UnauthBanner .centeredWithinWrapper.gridWidth {
width: 1000px; }
.UnauthBanner .caption {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
float: none;
margin-top: -5px;
width: auto; }
.UnauthBanner .caption .title {
font-size: 35px;
line-height: 35px; }
.UnauthBanner .caption .subtitle {
font-size: 18px;
line-height: 24px;
margin: 5px auto 0;
width: 500px; }
.UnauthBanner .centeredWithinWrapper.gridWidth {
margin: 0 auto;
padding-bottom: 20px;
text-align: center; }
.UnauthBanner .centeredWithinWrapper.gridWidth .textAndButtons {
margin: 0 auto; }
.UnauthBanner .centeredWithinWrapper.gridWidth .textAndButtons .registerButtons {
float: none;
margin: 0 auto;
padding-top: 12px;
width: 236px; }
.UnauthBanner .centeredWithinWrapper.gridWidth .textAndButtons .registerButtons .unauthNagButton {
box-shadow: none;
display: block;
margin: 10px auto 0;
width: 100%; }
.UnauthBanner .centeredWithinWrapper.gridWidth .textAndButtons .registerButtons .bannerOpenInApp {
height: 32px;
padding: 0;
width: 236px; }
.UnauthBanner .centeredWithinWrapper.gridWidth .textAndButtons .registerButtons .Login.compact .socialLogin .btn {
border-radius: 6px;
border-width: 1px;
box-shadow: none;
font-size: 12px;
width: 236px; }
.UnauthBanner .centeredWithinWrapper.gridWidth .textAndButtons .registerButtons .Login.compact .socialLogin .btn span {
font-size: 12px; }
.UnauthBanner .centeredWithinWrapper.gridWidth .textAndButtons .registerButtons .Login.compact .socialLogin .btn.intButton.unAuthFacebookConnect {
margin-right: 8px;
width: 114px; }
.UnauthBanner .centeredWithinWrapper.gridWidth .textAndButtons .registerButtons .Login.compact .formFooter {
margin-top: 5px; }
.UnauthBanner .centeredWithinWrapper.gridWidth .textAndButtons .registerButtons .Login.compact .formFooter .compactViewLogin {
color: #fff;
font-size: 12px;
font-weight: normal;
text-align: center;
text-shadow: none; }
.UnauthBanner .centeredWithinWrapper.gridWidth .textAndButtons .registerButtons .Login.compact .formFooter .compactViewLogin a {
color: #fff;
text-shadow: none; }
.UnauthBannerMini {
background: rgba(0, 0, 0, 0.85);
border-radius: 0;
bottom: 0;
height: 0;
position: fixed;
-webkit-transition: opacity .8s ease .8s;
transition: opacity .8s ease .8s;
width: 100%;
z-index: 684; }
.UnauthBannerMini.quarterScreenBanner {
height: 90px;
-webkit-transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93);
transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93); }
.UnauthBannerMini.fullScreenBanner {
height: 100%;
-webkit-transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93);
transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93); }
.UnauthBannerMini .saveText {
color: #fff;
display: inline-block;
font-size: 21px;
font-weight: bold;
margin-left: 20px;
vertical-align: middle; }
.UnauthBannerMini .saveText.noMargin {
margin-left: 0; }
.UnauthBannerMini .quarterBannerContainer {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
height: 90px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
.UnauthBannerMini .pinThumbnail {
background-size: cover;
border-radius: 8px;
display: inline-block;
height: 70px;
vertical-align: middle;
width: 70px; }
.UnauthBannerMini .continueLoginButton {
font-size: 14px;
margin: 0 10px;
padding: 0 30px;
width: 150px; }
.UnauthBannerMini .basicLightGray:hover {
background: #f8f8f8; }
.UnauthBannerMini .continueSignupButton {
font-size: 14px;
margin: 0;
width: 150px; }
.UnauthBannerMini .fullScreenSignup {
display: none; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.UnauthHomePage .homeUnauthNumbers,
.UnauthHomePage .subtitle,
.UnauthHomePage .emailLogin,
.UnauthHomePage .loginButton,
.UnauthHomePage .socialLogin {
-webkit-transition: opacity .2s linear;
transition: opacity .2s linear; }
.UnauthHomePage .absolutePosition {
position: absolute; }
.UnauthHomePage.secondStep .homeUnauthNumbers,
.UnauthHomePage.secondStep .subtitle,
.UnauthHomePage.secondStep .emailLogin,
.UnauthHomePage.secondStep .loginButton {
opacity: 0 !important;
pointer-events: none; }
/* desktop.scss */
.UnauthHomePage {
bottom: 0;
left: 0;
right: 0;
top: 0;
background: #fff;
min-width: 750px;
padding-bottom: 10px;
position: fixed;
z-index: 681; }
.UnauthHomePage .homeUnauthNumbers {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #fff;
margin: 0 auto;
position: absolute;
text-align: center;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
top: 450px;
width: 100%;
z-index: -1; }
.UnauthHomePage .homeUnauthNumbers .left, .UnauthHomePage .homeUnauthNumbers .right {
display: inline-block;
float: none;
text-align: center; }
.UnauthHomePage .homeUnauthNumbers .left {
border-right: 2px solid #fff;
margin-left: -4px;
padding-left: 15px;
padding-right: 20px; }
.UnauthHomePage .homeUnauthNumbers .left .numbersWrapper {
text-align: right; }
.UnauthHomePage .homeUnauthNumbers .right {
padding-left: 20px;
padding-right: 15px; }
.UnauthHomePage .homeUnauthNumbers .right .numbersWrapper {
text-align: left; }
.UnauthHomePage .homeUnauthNumbers .numbersTitle {
font-family: Helvetica;
font-size: 35px;
font-weight: bold;
display: inline-block; }
.UnauthHomePage .homeUnauthNumbers .numbersSubtitle {
display: inline-block;
font-size: 12px;
font-weight: bold;
line-height: 120%;
padding-left: 4px;
padding-top: 3px;
text-align: left; }
.UnauthHomePage .inspiredLogo {
width: 55px;
height: 55px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -62px -234px no-repeat;
border-radius: 100%;
height: 56px;
margin: -30px auto;
width: 56px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UnauthHomePage .inspiredLogo {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -61px -231px;
background-size: 399px 382px; } }
.UnauthHomePage .hidden {
display: none; }
.UnauthHomePage .homeSignupForm {
-webkit-transition: -webkit-transform .5s ease-in-out;
transition: -webkit-transform .5s ease-in-out;
transition: transform .5s ease-in-out;
transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out; }
.UnauthHomePage .homeSignupForm.login {
-webkit-transform: translateY(-85px);
transform: translateY(-85px); }
.UnauthHomePage .inspiredWallLogin {
-webkit-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out; }
.UnauthHomePage .invisible {
opacity: 0;
pointer-events: none; }
.UnauthHomePage .fbText {
left: 0;
position: absolute;
right: 0;
top: 210px; }
.UnauthHomePage .fbText .lockIcon {
background: url(https://s.pinimg.com/webapp/style/images/lock_small-1x-5dea8054.png) no-repeat;
background-size: contain;
height: 10px;
width: 8px;
display: inline-block;
margin-right: 5px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UnauthHomePage .fbText .lockIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/lock_small-2x-a21ec38c.png); } }
.UnauthHomePage .spacer {
height: 20px; }
.UnauthHomePage .inspiredSearchBackgroundContainer {
background-color: #e6e8e3;
height: 100%;
opacity: 0;
position: absolute;
-webkit-transition: all 1s;
transition: all 1s;
visibility: hidden;
width: 100%; }
.UnauthHomePage .inspiredSearchBackgroundContainer .background {
padding-bottom: 300px; }
.UnauthHomePage .inspiredSearchBackgroundContainer.active {
opacity: 1;
visibility: visible; }
.UnauthHomePage .inspiredSearchBackgroundContainer.animate_background .background {
-webkit-animation: scrollBgGridLinks 35s linear;
animation: scrollBgGridLinks 35s linear;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; }
.UnauthHomePage .inspiredSearchAboutTermsWrapper {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: scrollFooterWithBgGrid 35s linear;
animation: scrollFooterWithBgGrid 35s linear;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
bottom: 0;
left: 0;
position: absolute;
text-align: center;
width: 100%; }
.UnauthHomePage .inspiredSearchDialog {
min-height: 375px; }
.UnauthHomePage .inspiredSearchDialog .step2 .personalizeField {
color: #fff !important; }
.UnauthHomePage .inspiredSearchDialog .step2 .learnMore {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #fff !important; }
.UnauthHomePage .inspiredSearchContentWrapper {
border-radius: 6px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
left: 50%;
margin-left: -358px;
margin-top: -292px;
max-height: 420px;
min-height: 420px;
padding-bottom: 10px;
position: absolute;
top: 58%;
width: 716px;
z-index: 1; }
.UnauthHomePage .inspiredSearchContentWrapper .outerTermsOfServiceFooter {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: rgba(255, 255, 255, 0.9);
display: block;
font-size: 11px;
line-height: 150%;
margin: 10px auto;
text-align: center;
text-shadow: 0 1px rgba(0, 0, 0, 0.18);
width: 272px; }
.UnauthHomePage .inspiredSearchContentWrapper.loginInspiredWall {
background-color: #f2f2f0;
margin-left: -241px;
width: 480px; }
.UnauthHomePage .inspiredSearchContentWrapper.loginInspiredWall .inspiredSearchPinCaption {
color: #383838; }
.UnauthHomePage .inspiredSearchContentWrapper.loginInspiredWall .inspiredSearchPinCaption .title {
text-shadow: none; }
.UnauthHomePage .inspiredSearchContentWrapper.loginInspiredWall .termOfServiceWrapper {
color: #383838;
text-shadow: none; }
.UnauthHomePage .inspiredSearchContentWrapper.loginInspiredWall .termOfServiceWrapper a {
color: #383838; }
.UnauthHomePage .inspiredSearchContentContainer {
border-radius: 6px; }
.UnauthHomePage .inspiredSearchPinCaption {
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #fff;
margin-top: 55px;
text-align: center;
width: auto; }
.UnauthHomePage .inspiredSearchPinCaption .title {
font-size: 27px;
font-weight: bold;
letter-spacing: -1px;
margin-top: 50px;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.58); }
.UnauthHomePage .inspiredSearchPinCaption .subtitle {
font-size: 16px;
font-weight: 500;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.58); }
.UnauthHomePage .inspiredSearchRegistrationContainer {
margin-top: 30px;
text-align: center;
width: auto; }
.UnauthHomePage .emailLogin {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #fdfdfd;
background: -webkit-linear-gradient(#fff, #fafafa);
background: linear-gradient(#fff, #fafafa);
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.48), 0 1px 3px rgba(0, 0, 0, 0.18);
color: #5f5f5f;
font-size: 13px;
padding: 9px 15px;
position: absolute;
right: 11px;
top: 11px; }
.UnauthHomePage .emailLogin:hover {
box-shadow: 0 0 2px rgba(0, 0, 0, 0.48), 0 1px 3px rgba(0, 0, 0, 0.18); }
.UnauthHomePage .termOfServiceWrapper {
color: rgba(255, 255, 255, 0.9);
height: 40px;
line-height: 150%;
margin: -7px auto;
position: relative;
text-align: center;
text-shadow: 0 1px rgba(0, 0, 0, 0.18);
width: 272px; }
.UnauthHomePage .termOfServiceWrapper .signupFooter {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: block;
-webkit-transition: opacity .2s linear;
transition: opacity .2s linear; }
.UnauthHomePage .termOfServiceWrapper .signupFooter a {
color: rgba(255, 255, 255, 0.9);
font-weight: bold; }
.UnauthHomePage .pinitLanding {
min-height: 445px; }
.UnauthHomePage .register .outerTermsOfServiceFooter {
color: #bbb; }
.UnauthHomePage .register .outerTermsOfServiceFooter a {
color: #bbb;
font-weight: bold; }
.UnauthHomePage.lite .inspiredSearchDialog .step2 .gender {
color: #000 !important; }
.UnauthHomePage.lite .inspiredSearchContentWrapper {
box-shadow: none; }
.UnauthHomePage.lite .inspiredSearchPinCaption {
color: #000;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2); }
.UnauthHomePage.lite .inspiredSearchPinCaption .title {
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2); }
.UnauthHomePage.lite .inspiredSearchPinCaption .subtitle {
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2); }
.UnauthHomePage .interestsWrapper {
-webkit-animation: scrollFooterWithBgGrid 35s linear;
animation: scrollFooterWithBgGrid 35s linear;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
background-color: #fff;
bottom: -30px;
height: 30px;
left: 0;
position: absolute;
text-align: center;
width: 100%; }
.UnauthHomePage .interestsWrapper .gradient {
background-color: #cccccc;
background: -webkit-linear-gradient(#999, #fff);
background: linear-gradient(#999, #fff);
height: 8px; }
.UnauthHomePage .interestsWrapper span,
.UnauthHomePage .interestsWrapper a {
font-size: 10px;
font-weight: bold;
padding: 0 3px;
position: relative; }
.UnauthHomePage .interestsWrapper span {
color: #999; }
.UnauthHomePage .interestsWrapper a {
color: #333; }
.UnauthHomePage.pinitPopup .inspiredSearchBackgroundContainer.animate_background .background {
-webkit-animation-name: scrollBgGrid !important;
animation-name: scrollBgGrid !important; }
.UnauthHomePage.pinitPopup .inspiredSearchAboutTermsWrapper,
.UnauthHomePage.pinitPopup .interestsWrapper {
display: none; }
.UnauthHomePage.register .inspiredSearchContentWrapper {
background-color: #fff;
margin: -280px 0 0 -300px;
min-height: 410px;
width: 600px; }
.UnauthHomePage.register .inspiredSearchContentWrapper .homeUnauthNumbers {
color: #999; }
.UnauthHomePage.register .inspiredSearchContentWrapper .homeUnauthNumbers .left {
border-color: #999; }
.UnauthHomePage.register .inspiredSearchPinCaption {
margin: 5px 0 -5px; }
.UnauthHomePage.register .inspiredSearchPinCaption .title {
font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", sans-serif;
font-weight: bold;
font-size: 28px; }
.UnauthHomePage.register .inspiredSearchPinCaption .fbText {
top: 200px; }
.UnauthHomePage.inspired_banner {
background: none; }
.UnauthHomePage.inspired_banner .inspiredSearchBackgroundContainer,
.UnauthHomePage.inspired_banner .inspiredSearchAboutTermsWrapper {
display: none; }
.UnauthHomePage.whiteWall .inspiredSearchContentWrapper {
background-color: #fff; }
.UnauthHomePage.whiteWall .inspiredSearchContentWrapper .termOfServiceWrapper {
color: #aaa; }
.UnauthHomePage.whiteWall .inspiredSearchContentWrapper .termOfServiceWrapper a {
color: #aaa; }
.UnauthHomePage.whiteWall .inspiredSearchContentWrapper .outerTermsOfServiceFooter {
color: #000;
text-shadow: none; }
.UnauthHomePage.whiteWall .inspiredSearchContentWrapper .outerTermsOfServiceFooter a {
color: #000; }
.UnauthHomePage.whiteWall .inspiredSearchContentWrapper .background {
background-position-y: -50%; }
.UnauthHomePage.whiteWall .inspiredSearchContentContainer {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
height: 125px; }
.UnauthHomePage.whiteWall .inspiredSearchRegistrationContainer.focused {
background-color: #f5f5f5; }
.UnauthHomePage.whiteWall .inspiredSearchRegistrationContainer::after {
content: none; }
.UnauthHomePage.whiteWall .inspiredFormHeader {
color: #505050;
text-shadow: none; }
.UnauthHomePage.whiteWall .groupSeparator {
color: #a0a0a0 !important; }
.UnauthHomePage.whiteWall .step1.whiteWall .step1Bottom input {
background: #fff;
box-shadow: 0 0 3px #cdcdcd !important; }
.UnauthHomePage.whiteWall .step1.whiteWall .step1Bottom input:focus {
box-shadow: 0 0 3px #27b8f4 !important; }
.UnauthHomePage.tall .inspiredSearchContentWrapper {
max-height: 450px;
min-height: 450px;
top: 52%; }
.UnauthHomePage.tall .homeUnauthNumbers,
.UnauthHomePage.tall .appInstallButtons {
top: 480px; }
.UnauthHomePage .signupContinueAsABusinessBar {
background: #efefef;
border-radius: 0 0 6px 6px;
bottom: 0;
left: 0;
position: absolute;
right: 0; }
.UnauthHomePage .signupContinueAsABusinessBar .continueAsABusinessButton {
font-size: 12px;
line-height: 26px; }
.UnauthLoggedOutHomePage .inspiredLogo {
width: 55px;
height: 55px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -62px -234px no-repeat;
border-radius: 100%;
height: 56px;
margin: 20px auto;
width: 56px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UnauthLoggedOutHomePage .inspiredLogo {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -61px -231px;
background-size: 399px 382px; } }
.UnauthLoggedOutHomePage .design {
clear: both;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%; }
.UnauthLoggedOutHomePage .design .signupContentWrapper {
display: inline-block;
text-align: center;
vertical-align: middle; }
.UnauthLoggedOutHomePage .design hgroup {
bottom: 58%;
position: absolute;
right: 45%; }
@media (max-aspect-ratio: 4 / 3), (max-width: 900px) {
.UnauthLoggedOutHomePage .design .main {
display: inline-block;
vertical-align: middle; }
.UnauthLoggedOutHomePage .design hgroup {
margin-bottom: 40px;
position: static;
text-align: center; }
.UnauthLoggedOutHomePage .design .backgroundDesign {
background: url(https://s.pinimg.com/webapp/style/images/auth_logged_out_home_03-1x-199cebbb.jpg) no-repeat;
background-size: contain;
height: 799px;
width: 1355px;
background-position: 50% 50%;
background-size: cover !important;
height: 100%;
position: relative;
text-align: center;
width: calc(100% - 360px); } }
@media (max-aspect-ratio: 4 / 3) and (-webkit-min-device-pixel-ratio: 1.5), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 1.5), (max-aspect-ratio: 4 / 3) and (min-resolution: 144dpi), (max-width: 900px) and (min-resolution: 144dpi) {
.UnauthLoggedOutHomePage .design .backgroundDesign {
background-image: url(https://s.pinimg.com/webapp/style/images/auth_logged_out_home_03-2x-d8378127.jpg); } }
@media (max-aspect-ratio: 4 / 3), (max-width: 900px) {
.UnauthLoggedOutHomePage .design .backgroundDesign::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle; }
.UnauthLoggedOutHomePage .design .android {
background: url(https://s.pinimg.com/webapp/style/images/web-auth_logged_out_home-vert_shop-1x-40af0403.png) no-repeat;
background-size: contain;
height: 482px;
width: 266px;
margin: 0 auto; } }
@media (max-aspect-ratio: 4 / 3) and (-webkit-min-device-pixel-ratio: 1.5), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 1.5), (max-aspect-ratio: 4 / 3) and (min-resolution: 144dpi), (max-width: 900px) and (min-resolution: 144dpi) {
.UnauthLoggedOutHomePage .design .android {
background-image: url(https://s.pinimg.com/webapp/style/images/web-auth_logged_out_home-vert_shop-2x-7b9289ac.png); } }
.UnauthLoggedOutHomePage .backgroundDesign {
background: url(https://s.pinimg.com/webapp/style/images/web-auth_logged_out_home_shop-1x-f7182836.jpg) no-repeat;
background-size: contain;
height: 800px;
width: 1082px;
background-position: 100% 50%;
background-size: cover !important;
height: 100%;
min-width: 360px;
position: relative;
width: calc(100% - 360px); }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UnauthLoggedOutHomePage .backgroundDesign {
background-image: url(https://s.pinimg.com/webapp/style/images/web-auth_logged_out_home_shop-2x-33215d67.jpg); } }
.UnauthLoggedOutHomePage .sidePane {
background: #fff;
height: 100%;
position: fixed;
right: 0;
text-align: center;
top: 0;
width: 360px; }
.UnauthLoggedOutHomePage .sidePane::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle; }
.UnauthLoggedOutHomePage h1, .UnauthLoggedOutHomePage h2 {
color: #fff; }
.UnauthLoggedOutHomePage h1 {
font-size: 48px;
line-height: 48px;
margin-bottom: 10px; }
.UnauthLoggedOutHomePage h2 {
font-weight: normal; }
.UnauthLoggedOutHomePage .loggedOutHomePageLogin {
display: inline-block;
font-size: 15px;
margin-top: 20px;
padding: 10px 50px; }
.UnauthLoggedOutHomePage.secondStep .loggedOutHomePageLogin {
display: none; }
.UnauthLoggedOutHomePage .inlineEmailForm .step1 .firstStepTooltip.errorTooltip, .UnauthLoggedOutHomePage .inlineEmailForm .step1 .secondStepTooltip.errorTooltip, .UnauthLoggedOutHomePage .inlineEmailForm .step2 .firstStepTooltip.errorTooltip, .UnauthLoggedOutHomePage .inlineEmailForm .step2 .secondStepTooltip.errorTooltip {
left: auto;
right: 295px; }
.UnauthLoggedOutHomePage .inlineEmailForm .step1 .firstStepTooltip.errorTooltip::before, .UnauthLoggedOutHomePage .inlineEmailForm .step1 .firstStepTooltip.errorTooltip::after, .UnauthLoggedOutHomePage .inlineEmailForm .step1 .secondStepTooltip.errorTooltip::before, .UnauthLoggedOutHomePage .inlineEmailForm .step1 .secondStepTooltip.errorTooltip::after, .UnauthLoggedOutHomePage .inlineEmailForm .step2 .firstStepTooltip.errorTooltip::before, .UnauthLoggedOutHomePage .inlineEmailForm .step2 .firstStepTooltip.errorTooltip::after, .UnauthLoggedOutHomePage .inlineEmailForm .step2 .secondStepTooltip.errorTooltip::before, .UnauthLoggedOutHomePage .inlineEmailForm .step2 .secondStepTooltip.errorTooltip::after {
border-width: 8px 0 8px 10px;
right: -10px; }
.UnauthLoggedOutHomePage .inlineEmailForm .step1 .firstStepTooltip.errorTooltip::after, .UnauthLoggedOutHomePage .inlineEmailForm .step1 .secondStepTooltip.errorTooltip::after, .UnauthLoggedOutHomePage .inlineEmailForm .step2 .firstStepTooltip.errorTooltip::after, .UnauthLoggedOutHomePage .inlineEmailForm .step2 .secondStepTooltip.errorTooltip::after {
margin-right: 1px; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.UserRegister {
position: relative; }
.UserRegister .step2,
.UserRegister .step2Facebook {
opacity: 0;
position: relative; }
.UserRegister .genderHeading {
color: #000;
margin-bottom: 7px; }
.UserRegister .step1, .UserRegister .step2 {
position: absolute;
-webkit-transition: opacity .2s ease;
transition: opacity .2s ease; }
.UserRegister .step2 {
margin-top: -50px;
pointer-events: none; }
.UserRegister.secondStep .step1 {
opacity: 0;
pointer-events: none; }
.UserRegister.secondStep .step2 {
opacity: 1;
pointer-events: all; }
.UserRegister .infoButton {
width: 14px;
height: 14px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -263px no-repeat;
cursor: pointer;
display: inline-block;
filter: url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.3));
filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.3));
vertical-align: middle; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserRegister .infoButton {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -207px -201px;
background-size: 249px 231px; } }
.UserRegister .popupContainer {
display: inline;
position: relative; }
.UserRegister.inline {
display: block; }
.UserRegister.inline .hidden {
display: none; }
.UserRegister.inline .personalizeField {
float: left;
padding-top: 15px; }
.UserRegister.inline .pinitLanding {
display: inline-block; }
.UserRegister.inline .standardForm {
display: inline-block;
height: 160px;
margin: 0 auto;
max-width: 100%; }
.UserRegister.inline .standardForm.grayWall {
background-color: #eee !important;
margin: auto; }
.UserRegister.inline .inlineEmailForm {
color: #fff; }
.UserRegister.inline .step1 .groupSeparatorWrapper {
-webkit-transition: opacity .5s linear;
transition: opacity .5s linear; }
.UserRegister.inline .step1 .groupSeparatorWrapper .groupSeparator {
color: rgba(0, 0, 0, 0.9);
display: none;
font-weight: bold;
margin-top: -13px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.UserRegister.inline .step1 .groupSeparatorWrapper .groupSeparator p {
margin-bottom: 10px;
overflow: hidden;
text-align: center; }
.UserRegister.inline .step1 .groupSeparatorWrapper .groupSeparator p::before, .UserRegister.inline .step1 .groupSeparatorWrapper .groupSeparator p::after {
background: rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 38%; }
.UserRegister.inline .step1 .groupSeparatorWrapper .groupSeparator p::before {
margin-right: 10px; }
.UserRegister.inline .step1 .groupSeparatorWrapper .groupSeparator p::after {
margin-left: 10px; }
.UserRegister.inline .step1.multiStep .groupSeparator {
display: block; }
.UserRegister.inline .step1.multiStep .step1Bottom {
display: block;
position: relative; }
.UserRegister.inline .step1 .emailFieldRedesign {
margin-bottom: 7px; }
.UserRegister.inline .step1 .signupButton {
padding-top: 10px; }
.UserRegister.inline .step1 .signupButton button {
box-shadow: none; }
.UserRegister.inline .step1 .step1Bottom {
display: none; }
.UserRegister.inline .step1 .termsOfServiceFooter {
color: #333;
margin-top: 8px;
text-align: left; }
.UserRegister.inline .step2.grayWall .confirmedEmail,
.UserRegister.inline .step2.grayWall .toggleStep,
.UserRegister.inline .step2Facebook.grayWall .confirmedEmail,
.UserRegister.inline .step2Facebook.grayWall .toggleStep {
color: #000; }
.UserRegister.inline .step2.whiteWall .confirmedEmail,
.UserRegister.inline .step2.whiteWall .toggleStep, .UserRegister.inline .step2.flatWhiteWall .confirmedEmail,
.UserRegister.inline .step2.flatWhiteWall .toggleStep,
.UserRegister.inline .step2Facebook.whiteWall .confirmedEmail,
.UserRegister.inline .step2Facebook.whiteWall .toggleStep,
.UserRegister.inline .step2Facebook.flatWhiteWall .confirmedEmail,
.UserRegister.inline .step2Facebook.flatWhiteWall .toggleStep {
color: #000;
text-shadow: none; }
.UserRegister.inline .step2 .errorTooltip.nameError, .UserRegister.inline .step2 .errorTooltip.ageError,
.UserRegister.inline .step2Facebook .errorTooltip.nameError,
.UserRegister.inline .step2Facebook .errorTooltip.ageError {
top: 27px; }
.UserRegister.inline .step2 .confirmedEmail,
.UserRegister.inline .step2Facebook .confirmedEmail {
margin-bottom: 10px;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); }
.UserRegister.inline .step2 .toggleStep,
.UserRegister.inline .step2Facebook .toggleStep {
font-size: 14px;
font-weight: 600;
margin-top: 20px;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); }
.UserRegister.inline .step2 .toggleStep span:hover,
.UserRegister.inline .step2Facebook .toggleStep span:hover {
cursor: pointer; }
.UserRegister.inline .step2 .continueButton,
.UserRegister.inline .step2Facebook .continueButton {
box-shadow: none;
width: 100%; }
.UserRegister.inline .step2 .genderFormItem,
.UserRegister.inline .step2Facebook .genderFormItem {
display: block;
margin-left: 5px;
margin-right: 5px; }
.UserRegister.inline .step2 .genderFormItem .formInputWrapper,
.UserRegister.inline .step2Facebook .genderFormItem .formInputWrapper {
float: left;
padding-bottom: 10px; }
.UserRegister.inline .step2 .genderFormItem .formInputWrapper .fieldsetWrapper,
.UserRegister.inline .step2Facebook .genderFormItem .formInputWrapper .fieldsetWrapper {
display: inline-block; }
.UserRegister.inline .step2 .genderFormItem .formInlineCheckedSet,
.UserRegister.inline .step2Facebook .genderFormItem .formInlineCheckedSet {
padding-top: 11px; }
.UserRegister.inline .step2 .genderFormItem .formInlineCheckedSet li,
.UserRegister.inline .step2Facebook .genderFormItem .formInlineCheckedSet li {
margin-left: 0;
margin-right: 10px; }
.UserRegister.inline .step2 label span,
.UserRegister.inline .step2Facebook label span {
color: #000;
font-weight: bold;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); }
.UserRegister.inline .step2 .divider,
.UserRegister.inline .step2Facebook .divider {
margin-bottom: 6px;
margin-top: 18px; }
.UserRegister.inline .step2 .divider p,
.UserRegister.inline .step2Facebook .divider p {
bottom: 48px;
left: 0;
margin: 0 auto;
opacity: .4;
overflow: hidden;
position: absolute;
right: 0;
text-align: center;
width: 60%; }
.UserRegister.inline .step2 .divider p::before, .UserRegister.inline .step2 .divider p::after,
.UserRegister.inline .step2Facebook .divider p::before,
.UserRegister.inline .step2Facebook .divider p::after {
background: #000;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
content: "";
display: inline-block;
height: 1px;
opacity: .4;
position: relative;
vertical-align: middle;
width: 38%; }
.UserRegister.inline .step2 .businessField,
.UserRegister.inline .step2Facebook .businessField {
font-size: 16px;
font-weight: normal;
height: 30px;
margin-bottom: 5px;
width: 100%; }
.UserRegister.inline .step2 .businessField.linkGroup,
.UserRegister.inline .step2Facebook .businessField.linkGroup {
margin-top: 80px; }
.UserRegister.inline .step2 .businessField.linkGroup .businessFieldPrompt,
.UserRegister.inline .step2Facebook .businessField.linkGroup .businessFieldPrompt {
font-size: 14px;
margin: -45px 0 10px;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); }
.UserRegister.inline .step2 .businessField em,
.UserRegister.inline .step2Facebook .businessField em {
width: 23px;
height: 23px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -91px -342px no-repeat;
left: 227px;
margin-top: -1px;
position: absolute;
z-index: 100; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserRegister.inline .step2 .businessField em,
.UserRegister.inline .step2Facebook .businessField em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -378px -55px;
background-size: 428px 427px; } }
.UserRegister.inline .step2 .businessField em.checked,
.UserRegister.inline .step2Facebook .businessField em.checked {
width: 23px;
height: 23px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -116px -342px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserRegister.inline .step2 .businessField em.checked,
.UserRegister.inline .step2Facebook .businessField em.checked {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -378px -31px;
background-size: 428px 427px; } }
.UserRegister.inline .step2 .businessField .businessSignupMulti.checkboxGroup,
.UserRegister.inline .step2Facebook .businessField .businessSignupMulti.checkboxGroup {
float: left;
margin-left: 30px; }
.UserRegister.inline .step1 button,
.UserRegister.inline .step2 button,
.UserRegister.inline .step2Facebook button {
box-shadow: none;
width: 100%; }
.UserRegister.inline .step1 input:not([type="radio"]),
.UserRegister.inline .step2 input:not([type="radio"]),
.UserRegister.inline .step2Facebook input:not([type="radio"]) {
background: #fff;
font-weight: bold;
padding: 10px; }
.UserRegister.inline .step1 input:not([type="radio"]).hasError, .UserRegister.inline .step1 input:not([type="radio"]).hasWarning,
.UserRegister.inline .step2 input:not([type="radio"]).hasError,
.UserRegister.inline .step2 input:not([type="radio"]).hasWarning,
.UserRegister.inline .step2Facebook input:not([type="radio"]).hasError,
.UserRegister.inline .step2Facebook input:not([type="radio"]).hasWarning {
background: #fce8e8;
border-color: #bd081c;
box-shadow: 0 0 6px rgba(255, 0, 0, 0.35);
position: relative; }
.UserRegister.inline .step1 input[type="radio"],
.UserRegister.inline .step2 input[type="radio"],
.UserRegister.inline .step2Facebook input[type="radio"] {
padding: 10px; }
.UserRegister.inline .step1 .formErrorMessage,
.UserRegister.inline .step1 .formWarningMessage,
.UserRegister.inline .step2 .formErrorMessage,
.UserRegister.inline .step2 .formWarningMessage,
.UserRegister.inline .step2Facebook .formErrorMessage,
.UserRegister.inline .step2Facebook .formWarningMessage {
display: none; }
.UserRegister.inline .step1 .genderReadout,
.UserRegister.inline .step2 .genderReadout,
.UserRegister.inline .step2Facebook .genderReadout {
color: #000;
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
margin-top: 5px;
max-width: 268px;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); }
.UserRegister.inline .step1 .genderReadout em.removeCustomGender,
.UserRegister.inline .step2 .genderReadout em.removeCustomGender,
.UserRegister.inline .step2Facebook .genderReadout em.removeCustomGender {
width: 15px;
height: 15px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -221px -325px no-repeat;
float: right;
margin-left: -15px;
position: relative;
top: 3px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserRegister.inline .step1 .genderReadout em.removeCustomGender,
.UserRegister.inline .step2 .genderReadout em.removeCustomGender,
.UserRegister.inline .step2Facebook .genderReadout em.removeCustomGender {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -151px -150px;
background-size: 399px 382px; } }
.UserRegister.inline .step1 .genderReadout span,
.UserRegister.inline .step2 .genderReadout span,
.UserRegister.inline .step2Facebook .genderReadout span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
max-width: 210px; }
.UserRegister.inline .step1 .errorTooltip,
.UserRegister.inline .step2 .errorTooltip,
.UserRegister.inline .step2Facebook .errorTooltip {
background: #fff;
border-radius: 6px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.38), 0 1px 3px rgba(0, 0, 0, 0.32);
color: #000;
display: none;
font-style: normal;
font-weight: normal;
left: 282px;
line-height: 150%;
padding: 8px 14px;
position: absolute;
text-align: left;
top: 0;
width: 215px;
z-index: 1000; }
.UserRegister.inline .step1 .errorTooltip .leftToBox,
.UserRegister.inline .step2 .errorTooltip .leftToBox,
.UserRegister.inline .step2Facebook .errorTooltip .leftToBox {
right: 282px; }
.UserRegister.inline .step1 .errorTooltip .leftToBox::before,
.UserRegister.inline .step2 .errorTooltip .leftToBox::before,
.UserRegister.inline .step2Facebook .errorTooltip .leftToBox::before {
border-width: 8px 0 8px 10px; }
.UserRegister.inline .step1 .errorTooltip .leftToBox::after,
.UserRegister.inline .step2 .errorTooltip .leftToBox::after,
.UserRegister.inline .step2Facebook .errorTooltip .leftToBox::after {
border-width: 8px 0 8px 10px; }
.UserRegister.inline .step1 .errorTooltip.belowBox,
.UserRegister.inline .step2 .errorTooltip.belowBox,
.UserRegister.inline .step2Facebook .errorTooltip.belowBox {
left: -372px;
position: absolute;
top: 25px;
width: 375px;
z-index: 999999999; }
.UserRegister.inline .step1 .errorTooltip.belowBox .customGenderFields,
.UserRegister.inline .step2 .errorTooltip.belowBox .customGenderFields,
.UserRegister.inline .step2Facebook .errorTooltip.belowBox .customGenderFields {
margin-top: 5px;
text-align: center; }
.UserRegister.inline .step1 .errorTooltip.belowBox .customGenderFields .Button,
.UserRegister.inline .step2 .errorTooltip.belowBox .customGenderFields .Button,
.UserRegister.inline .step2Facebook .errorTooltip.belowBox .customGenderFields .Button {
display: inline-block;
height: auto;
width: auto; }
.UserRegister.inline .step1 .errorTooltip.belowBox .customGenderFields .customGender,
.UserRegister.inline .step2 .errorTooltip.belowBox .customGenderFields .customGender,
.UserRegister.inline .step2Facebook .errorTooltip.belowBox .customGenderFields .customGender {
display: inline-block;
width: 220px; }
.UserRegister.inline .step1 .errorTooltip.belowBox::before,
.UserRegister.inline .step2 .errorTooltip.belowBox::before,
.UserRegister.inline .step2Facebook .errorTooltip.belowBox::before {
border-color: rgba(0, 0, 0, 0.48) transparent;
border-width: 0 10px 8px 8px;
right: 15px;
top: 0; }
.UserRegister.inline .step1 .errorTooltip.belowBox::after,
.UserRegister.inline .step2 .errorTooltip.belowBox::after,
.UserRegister.inline .step2Facebook .errorTooltip.belowBox::after {
border-color: #fff transparent;
border-width: 0 10px 8px 8px;
right: 15px;
top: 0; }
.UserRegister.inline .step1 .errorTooltip.passwordError,
.UserRegister.inline .step2 .errorTooltip.passwordError,
.UserRegister.inline .step2Facebook .errorTooltip.passwordError {
top: 44px; }
.UserRegister.inline .step1 .errorTooltip::before, .UserRegister.inline .step1 .errorTooltip::after,
.UserRegister.inline .step2 .errorTooltip::before,
.UserRegister.inline .step2 .errorTooltip::after,
.UserRegister.inline .step2Facebook .errorTooltip::before,
.UserRegister.inline .step2Facebook .errorTooltip::after {
border-style: solid;
content: "";
display: block;
margin-top: -8px;
position: absolute;
right: 100%;
top: 17px;
width: 0; }
.UserRegister.inline .step1 .errorTooltip::before,
.UserRegister.inline .step2 .errorTooltip::before,
.UserRegister.inline .step2Facebook .errorTooltip::before {
border-color: transparent rgba(0, 0, 0, 0.48);
border-width: 8px 10px 8px 0;
z-index: 1; }
.UserRegister.inline .step1 .errorTooltip::after,
.UserRegister.inline .step2 .errorTooltip::after,
.UserRegister.inline .step2Facebook .errorTooltip::after {
border-color: transparent #fff;
border-width: 8px 10px 8px 0;
margin-right: -1px;
z-index: 1; }
.UserRegister.inline .step1 .signupButton .Button.large,
.UserRegister.inline .step1 .signup.large,
.UserRegister.inline .step2 .signupButton .Button.large,
.UserRegister.inline .step2 .signup.large,
.UserRegister.inline .step2Facebook .signupButton .Button.large,
.UserRegister.inline .step2Facebook .signup.large {
padding: 0 18px; }
.UserRegister.inline .step1 .formInlineCheckedSet label span,
.UserRegister.inline .step1 .formCheckedSet label span,
.UserRegister.inline .step2 .formInlineCheckedSet label span,
.UserRegister.inline .step2 .formCheckedSet label span,
.UserRegister.inline .step2Facebook .formInlineCheckedSet label span,
.UserRegister.inline .step2Facebook .formCheckedSet label span {
font-size: 16px; }
.UserRegister.inline .step1 .personalizeField,
.UserRegister.inline .step2 .personalizeField,
.UserRegister.inline .step2Facebook .personalizeField {
color: #000;
font-size: 14px;
text-shadow: none; }
.UserRegister.inline .step1 .learnMore,
.UserRegister.inline .step2 .learnMore,
.UserRegister.inline .step2Facebook .learnMore {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #000;
font-size: 14px;
margin: 0;
text-shadow: none; }
.UserRegister.inline .step1 .passwordFieldRedesign input,
.UserRegister.inline .step1 .ageFieldRedesign input,
.UserRegister.inline .step1 .emailFieldRedesign input,
.UserRegister.inline .step1 .nameFieldRedesign input,
.UserRegister.inline .step2 .passwordFieldRedesign input,
.UserRegister.inline .step2 .ageFieldRedesign input,
.UserRegister.inline .step2 .emailFieldRedesign input,
.UserRegister.inline .step2 .nameFieldRedesign input,
.UserRegister.inline .step2Facebook .passwordFieldRedesign input,
.UserRegister.inline .step2Facebook .ageFieldRedesign input,
.UserRegister.inline .step2Facebook .emailFieldRedesign input,
.UserRegister.inline .step2Facebook .nameFieldRedesign input {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border: 0;
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.38), 0 1px 3px rgba(0, 0, 0, 0.32);
font-weight: bold;
height: 38px; }
.UserRegister.inline .step1 .passwordFieldRedesign em,
.UserRegister.inline .step1 .ageFieldRedesign em,
.UserRegister.inline .step1 .emailFieldRedesign em,
.UserRegister.inline .step1 .nameFieldRedesign em,
.UserRegister.inline .step2 .passwordFieldRedesign em,
.UserRegister.inline .step2 .ageFieldRedesign em,
.UserRegister.inline .step2 .emailFieldRedesign em,
.UserRegister.inline .step2 .nameFieldRedesign em,
.UserRegister.inline .step2Facebook .passwordFieldRedesign em,
.UserRegister.inline .step2Facebook .ageFieldRedesign em,
.UserRegister.inline .step2Facebook .emailFieldRedesign em,
.UserRegister.inline .step2Facebook .nameFieldRedesign em {
width: 14px;
height: 14px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -40px no-repeat;
display: none;
position: absolute;
z-index: 100; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserRegister.inline .step1 .passwordFieldRedesign em,
.UserRegister.inline .step1 .ageFieldRedesign em,
.UserRegister.inline .step1 .emailFieldRedesign em,
.UserRegister.inline .step1 .nameFieldRedesign em,
.UserRegister.inline .step2 .passwordFieldRedesign em,
.UserRegister.inline .step2 .ageFieldRedesign em,
.UserRegister.inline .step2 .emailFieldRedesign em,
.UserRegister.inline .step2 .nameFieldRedesign em,
.UserRegister.inline .step2Facebook .passwordFieldRedesign em,
.UserRegister.inline .step2Facebook .ageFieldRedesign em,
.UserRegister.inline .step2Facebook .emailFieldRedesign em,
.UserRegister.inline .step2Facebook .nameFieldRedesign em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -402px -211px;
background-size: 428px 427px; } }
.UserRegister.inline .step1 .emailFieldRedesign em,
.UserRegister.inline .step2 .emailFieldRedesign em,
.UserRegister.inline .step2Facebook .emailFieldRedesign em {
right: 10px;
top: 12px; }
.UserRegister.inline .step1 .passwordFieldRedesign em,
.UserRegister.inline .step2 .passwordFieldRedesign em,
.UserRegister.inline .step2Facebook .passwordFieldRedesign em {
right: 10px;
top: 57px; }
.UserRegister.inline .step1 .nameFieldRedesign,
.UserRegister.inline .step2 .nameFieldRedesign,
.UserRegister.inline .step2Facebook .nameFieldRedesign {
float: left;
width: 202px; }
.UserRegister.inline .step1 .nameFieldRedesign em,
.UserRegister.inline .step2 .nameFieldRedesign em,
.UserRegister.inline .step2Facebook .nameFieldRedesign em {
right: 80px;
top: 36px; }
.UserRegister.inline .step1 .ageFieldRedesign,
.UserRegister.inline .step2 .ageFieldRedesign,
.UserRegister.inline .step2Facebook .ageFieldRedesign {
display: block;
margin-left: 210px; }
.UserRegister.inline .step1 .ageFieldRedesign em,
.UserRegister.inline .step2 .ageFieldRedesign em,
.UserRegister.inline .step2Facebook .ageFieldRedesign em {
right: 8px;
top: 36px; }
.UserRegister.inline .step1.grayWall,
.UserRegister.inline .step2.grayWall,
.UserRegister.inline .step2Facebook.grayWall {
background-color: #eee; }
.UserRegister.inline .step1.grayWall input:not([type="radio"]),
.UserRegister.inline .step2.grayWall input:not([type="radio"]),
.UserRegister.inline .step2Facebook.grayWall input:not([type="radio"]) {
background-color: #fff !important;
border: solid 1px #ccc;
box-shadow: none;
height: auto; }
.UserRegister.inline .step1.grayWall input:not([type="radio"]):active, .UserRegister.inline .step1.grayWall input:not([type="radio"]):focus,
.UserRegister.inline .step2.grayWall input:not([type="radio"]):active,
.UserRegister.inline .step2.grayWall input:not([type="radio"]):focus,
.UserRegister.inline .step2Facebook.grayWall input:not([type="radio"]):active,
.UserRegister.inline .step2Facebook.grayWall input:not([type="radio"]):focus {
background: #fff !important; }
.UserRegister.inline .step1.grayWall input[type="radio"],
.UserRegister.inline .step2.grayWall input[type="radio"],
.UserRegister.inline .step2Facebook.grayWall input[type="radio"] {
height: auto; }
.UserRegister.inline .step1.grayWall .emailFieldRedesign em,
.UserRegister.inline .step2.grayWall .emailFieldRedesign em,
.UserRegister.inline .step2Facebook.grayWall .emailFieldRedesign em {
right: 14px !important;
top: 14px !important; }
.UserRegister.inline .step1.grayWall .passwordFieldRedesign em,
.UserRegister.inline .step2.grayWall .passwordFieldRedesign em,
.UserRegister.inline .step2Facebook.grayWall .passwordFieldRedesign em {
right: 14px !important;
top: 21pxauto !important; }
.UserRegister.inline .step1.grayWall .businessField.linkGroup,
.UserRegister.inline .step2.grayWall .businessField.linkGroup,
.UserRegister.inline .step2Facebook.grayWall .businessField.linkGroup {
height: auto;
margin: 15px 0 0; }
.UserRegister.inline .step1.grayWall .businessField.linkGroup .businessSignupMulti,
.UserRegister.inline .step2.grayWall .businessField.linkGroup .businessSignupMulti,
.UserRegister.inline .step2Facebook.grayWall .businessField.linkGroup .businessSignupMulti {
color: #333; }
.UserRegister.inline .step1.grayWall .genderFormItem .formInputWrapper,
.UserRegister.inline .step2.grayWall .genderFormItem .formInputWrapper,
.UserRegister.inline .step2Facebook.grayWall .genderFormItem .formInputWrapper {
padding: 15px 0; }
.UserRegister.inline .step1.grayWall .genderFormItem .formInputWrapper .formInlineCheckedSet,
.UserRegister.inline .step2.grayWall .genderFormItem .formInputWrapper .formInlineCheckedSet,
.UserRegister.inline .step2Facebook.grayWall .genderFormItem .formInputWrapper .formInlineCheckedSet {
padding-top: 0; }
.UserRegister.inline .step1.grayWall .divider p,
.UserRegister.inline .step2.grayWall .divider p,
.UserRegister.inline .step2Facebook.grayWall .divider p {
bottom: 0;
position: relative;
width: auto; }
.UserRegister.inline .step1.grayWall .groupSeparator,
.UserRegister.inline .step2.grayWall .groupSeparator,
.UserRegister.inline .step2Facebook.grayWall .groupSeparator {
color: #000; }
.UserRegister.inline .step1.whiteWall input, .UserRegister.inline .step1.flatWhiteWall input,
.UserRegister.inline .step2.whiteWall input,
.UserRegister.inline .step2.flatWhiteWall input,
.UserRegister.inline .step2Facebook.whiteWall input,
.UserRegister.inline .step2Facebook.flatWhiteWall input {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset !important; }
.UserRegister.inline .step1.whiteWall input, .UserRegister.inline .step1.whiteWall input.hasError, .UserRegister.inline .step1.whiteWall input.hasWarning, .UserRegister.inline .step1.flatWhiteWall input, .UserRegister.inline .step1.flatWhiteWall input.hasError, .UserRegister.inline .step1.flatWhiteWall input.hasWarning,
.UserRegister.inline .step2.whiteWall input,
.UserRegister.inline .step2.whiteWall input.hasError,
.UserRegister.inline .step2.whiteWall input.hasWarning,
.UserRegister.inline .step2.flatWhiteWall input,
.UserRegister.inline .step2.flatWhiteWall input.hasError,
.UserRegister.inline .step2.flatWhiteWall input.hasWarning,
.UserRegister.inline .step2Facebook.whiteWall input,
.UserRegister.inline .step2Facebook.whiteWall input.hasError,
.UserRegister.inline .step2Facebook.whiteWall input.hasWarning,
.UserRegister.inline .step2Facebook.flatWhiteWall input,
.UserRegister.inline .step2Facebook.flatWhiteWall input.hasError,
.UserRegister.inline .step2Facebook.flatWhiteWall input.hasWarning {
background-color: #f3f3f3;
background: -webkit-linear-gradient(#f0f0f0, #f5f5f5);
background: linear-gradient(#f0f0f0, #f5f5f5); }
.UserRegister.inline .step1.whiteWall input:active, .UserRegister.inline .step1.whiteWall input:focus, .UserRegister.inline .step1.flatWhiteWall input:active, .UserRegister.inline .step1.flatWhiteWall input:focus,
.UserRegister.inline .step2.whiteWall input:active,
.UserRegister.inline .step2.whiteWall input:focus,
.UserRegister.inline .step2.flatWhiteWall input:active,
.UserRegister.inline .step2.flatWhiteWall input:focus,
.UserRegister.inline .step2Facebook.whiteWall input:active,
.UserRegister.inline .step2Facebook.whiteWall input:focus,
.UserRegister.inline .step2Facebook.flatWhiteWall input:active,
.UserRegister.inline .step2Facebook.flatWhiteWall input:focus {
background: #fff !important; }
.UserRegister.inline .step1.whiteWall .gender, .UserRegister.inline .step1.whiteWall .businessSignupMulti, .UserRegister.inline .step1.flatWhiteWall .gender, .UserRegister.inline .step1.flatWhiteWall .businessSignupMulti,
.UserRegister.inline .step2.whiteWall .gender,
.UserRegister.inline .step2.whiteWall .businessSignupMulti,
.UserRegister.inline .step2.flatWhiteWall .gender,
.UserRegister.inline .step2.flatWhiteWall .businessSignupMulti,
.UserRegister.inline .step2Facebook.whiteWall .gender,
.UserRegister.inline .step2Facebook.whiteWall .businessSignupMulti,
.UserRegister.inline .step2Facebook.flatWhiteWall .gender,
.UserRegister.inline .step2Facebook.flatWhiteWall .businessSignupMulti {
text-shadow: none; }
.UserRegister.inline .step1.whiteWall .businessField.linkGroup, .UserRegister.inline .step1.flatWhiteWall .businessField.linkGroup,
.UserRegister.inline .step2.whiteWall .businessField.linkGroup,
.UserRegister.inline .step2.flatWhiteWall .businessField.linkGroup,
.UserRegister.inline .step2Facebook.whiteWall .businessField.linkGroup,
.UserRegister.inline .step2Facebook.flatWhiteWall .businessField.linkGroup {
height: auto;
margin: 15px 0 0; }
.UserRegister.inline .step1.whiteWall .businessField.linkGroup .businessSignupMulti, .UserRegister.inline .step1.flatWhiteWall .businessField.linkGroup .businessSignupMulti,
.UserRegister.inline .step2.whiteWall .businessField.linkGroup .businessSignupMulti,
.UserRegister.inline .step2.flatWhiteWall .businessField.linkGroup .businessSignupMulti,
.UserRegister.inline .step2Facebook.whiteWall .businessField.linkGroup .businessSignupMulti,
.UserRegister.inline .step2Facebook.flatWhiteWall .businessField.linkGroup .businessSignupMulti {
color: #333; }
.UserRegister.inline .step1.whiteWall .divider, .UserRegister.inline .step1.flatWhiteWall .divider,
.UserRegister.inline .step2.whiteWall .divider,
.UserRegister.inline .step2.flatWhiteWall .divider,
.UserRegister.inline .step2Facebook.whiteWall .divider,
.UserRegister.inline .step2Facebook.flatWhiteWall .divider {
margin-top: 10px; }
.UserRegister.inline .step1.whiteWall .divider p, .UserRegister.inline .step1.flatWhiteWall .divider p,
.UserRegister.inline .step2.whiteWall .divider p,
.UserRegister.inline .step2.flatWhiteWall .divider p,
.UserRegister.inline .step2Facebook.whiteWall .divider p,
.UserRegister.inline .step2Facebook.flatWhiteWall .divider p {
position: relative;
top: 5px;
width: auto; }
.UserRegister.inline .step1.darkWall .groupSeparator,
.UserRegister.inline .step2.darkWall .groupSeparator,
.UserRegister.inline .step2Facebook.darkWall .groupSeparator {
color: #fff; }
.UserRegister.inline .step1.darkWall .gender,
.UserRegister.inline .step2.darkWall .gender,
.UserRegister.inline .step2Facebook.darkWall .gender {
color: #fff; }
.UserRegister.inline .step1.darkWall .genderReadout,
.UserRegister.inline .step2.darkWall .genderReadout,
.UserRegister.inline .step2Facebook.darkWall .genderReadout {
color: #fff; }
.UserRegister.inline .step1.darkWall .infoButton,
.UserRegister.inline .step2.darkWall .infoButton,
.UserRegister.inline .step2Facebook.darkWall .infoButton {
width: 14px;
height: 14px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -44px -280px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserRegister.inline .step1.darkWall .infoButton,
.UserRegister.inline .step2.darkWall .infoButton,
.UserRegister.inline .step2Facebook.darkWall .infoButton {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -234px -189px;
background-size: 249px 231px; } }
.UserRegister.inline .step1.flatWhiteWall .groupSeparatorWrapper .groupSeparator,
.UserRegister.inline .step2.flatWhiteWall .groupSeparatorWrapper .groupSeparator,
.UserRegister.inline .step2Facebook.flatWhiteWall .groupSeparatorWrapper .groupSeparator {
border: 1px solid #efefef;
margin: 13px 0; }
.UserRegister.inline .step1.flatWhiteWall .infoButton,
.UserRegister.inline .step2.flatWhiteWall .infoButton,
.UserRegister.inline .step2Facebook.flatWhiteWall .infoButton {
-webkit-filter: none;
filter: none; }
.UserRegister.loginForm .whiteWall .signupFirstStep .signupButton .continueButton, .UserRegister.loginForm .whiteWall .signupFirstStep .signupButton .continueButton:hover {
border: 1px solid rgba(150, 150, 150, 0.3);
box-shadow: none; }
/* desktop.scss */
.UserRegisterPage .InlineSignup {
margin: 50px auto; }
.UserRegisterRestricted {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
.UserRegisterRestricted .contents {
background: #fff;
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
margin: 100px auto 0;
position: relative;
max-width: 300px;
z-index: 682;
background: none;
box-shadow: none;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center; }
.UserRegisterRestricted .logo {
width: 169px;
height: 42px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) 0 -174px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
margin-bottom: 20px; }
.UserRegisterRestricted .header {
font-size: 15px;
font-weight: bold; }
.UserRegisterRestricted .message {
color: #555;
line-height: 15px;
margin-bottom: 20px;
margin-top: 5px; }
.App.full .UserRegisterRestricted .contents {
z-index: 1; }
.SimpleBoardCreate {
background-color: #fff;
width: 330px; }
.SimpleBoardCreate .repinSmall.btn.primary,
.SimpleBoardCreate .repinBtn.btn.primary {
height: 33px; }
.SimpleBoardCreate .repinSmall.btn.primary.loading, .SimpleBoardCreate .repinSmall.btn.primary.success,
.SimpleBoardCreate .repinBtn.btn.primary.loading,
.SimpleBoardCreate .repinBtn.btn.primary.success {
width: 62px; }
.SimpleBoardCreate .repinSmall.btn.primary.loading em, .SimpleBoardCreate .repinSmall.btn.primary.success em,
.SimpleBoardCreate .repinBtn.btn.primary.loading em,
.SimpleBoardCreate .repinBtn.btn.primary.success em {
-webkit-transform: translateZ(0);
left: 50%;
position: absolute;
top: 50%; }
.SimpleBoardCreate .repinSmall.btn.primary.loading em,
.SimpleBoardCreate .repinBtn.btn.primary.loading em {
width: 16px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -327px no-repeat;
-webkit-animation: rotateCircle 500ms infinite;
animation: rotateCircle 500ms infinite;
margin-left: -8px;
margin-top: -8px;
visibility: visible; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SimpleBoardCreate .repinSmall.btn.primary.loading em,
.SimpleBoardCreate .repinBtn.btn.primary.loading em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -370px -223px;
background-size: 399px 382px; } }
.SimpleBoardCreate .repinSmall.btn.primary.success em,
.SimpleBoardCreate .repinBtn.btn.primary.success em {
width: 17px;
height: 13px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -328px -325px no-repeat;
margin-left: -8.5px;
margin-top: -6.5px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SimpleBoardCreate .repinSmall.btn.primary.success em,
.SimpleBoardCreate .repinBtn.btn.primary.success em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -228px -320px;
background-size: 399px 382px; } }
.SimpleBoardCreate .BoardIcons {
height: auto; }
.SimpleBoardCreate .boardsWrapper {
-webkit-transform: translateZ(0);
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
overflow: hidden;
right: 0;
width: 330px; }
.SimpleBoardCreate .boardsWrapper .item {
border-radius: 0;
color: #d3d3d3;
padding: 3px 10px 3px 23px; }
.SimpleBoardCreate .boardsWrapper .item:hover {
background: transparent; }
.SimpleBoardCreate .boardsWrapper .item.activeItem, .SimpleBoardCreate .boardsWrapper .item.selected, .SimpleBoardCreate .boardsWrapper .item:hover {
background: #f5f5f5;
color: #000; }
.SimpleBoardCreate .boardsWrapper .item.activeItem .repinBtn, .SimpleBoardCreate .boardsWrapper .item.selected .repinBtn, .SimpleBoardCreate .boardsWrapper .item:hover .repinBtn {
display: block; }
.SimpleBoardCreate .boardsWrapper .top {
border-bottom: 1px solid #f3f3f3;
border-top: 1px solid #f3f3f3;
margin-bottom: 0;
padding: 15px 0; }
.SimpleBoardCreate .cancelButton {
float: left;
margin-left: 12px; }
.SimpleBoardCreate .submitButton {
float: right;
margin-right: 25px; }
.SimpleBoardCreate .submitButton .Button.btn:hover {
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.34); }
.SimpleBoardCreate .cancelCreateButtons {
border: 1px solid transparent; }
.SimpleBoardCreate .nameWrapper {
background: #fff;
padding-right: 0;
position: relative; }
.SimpleBoardCreate .nameWrapper .searchFilterInputIcon {
display: none; }
.SimpleBoardCreate input.name {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border: 1px solid #eaeaea;
border-radius: 4px;
box-shadow: none;
color: #555;
font-size: 15px;
font-weight: bold;
margin-left: 23px;
padding: 13px;
width: 284px; }
.SimpleBoardCreate input.name:focus {
outline: none; }
.SimpleBoardCreate input.name::-webkit-input-placeholder {
color: #d3d3d3; }
.SimpleBoardCreate input.name::-moz-placeholder {
color: #d3d3d3; }
.SimpleBoardCreate input.name:-ms-input-placeholder {
color: #d3d3d3; }
.SimpleBoardCreate input.name::placeholder {
color: #d3d3d3; }
.SimpleBoardCreate .pinCreateTitle {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #333;
font-size: 20px;
font-weight: bold;
margin: 0;
padding: 25px 25px 13px; }
.SimpleBoardCreate .nameAndIcons {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: bold;
letter-spacing: .01em; }
.SimpleBoardCreate .selected .BoardIcons {
display: none; }
.SimpleBoardCreate .sectionHeading {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #d3d3d3;
font-size: 11px;
font-weight: 400;
padding: 10px 23px;
text-transform: uppercase; }
.SimpleBoardCreate .titleContainer {
border-top-right-radius: 6px;
width: 330px;
z-index: 1; }
.SimpleBoardCreate .titleContainer .pinCreateTitle {
padding: 25px 25px 13px; }
.BuildingHomeFeedSpinner {
color: #444;
text-align: center; }
.BuildingHomeFeedSpinner .buildingFeedImg {
background: url(https://s.pinimg.com/webapp/style/images/building_homefeed-1x-da7dc75e.png) no-repeat;
background-size: contain;
height: 250px;
width: 324px;
display: inline-block; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.BuildingHomeFeedSpinner .buildingFeedImg {
background-image: url(https://s.pinimg.com/webapp/style/images/building_homefeed-2x-ba17edad.png); } }
.BuildingHomeFeedSpinner .buildingTitle {
font-size: 32px; }
.BuildingHomeFeedSpinner .buildingText {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 18px; }
.ModalStepBase.inModal {
color: #333;
width: 375px; }
.ModalStepBase.inModal .standardForm .formTitle {
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif;
font-size: 18px;
white-space: normal; }
.ModalStepBase.inModal .standardForm .formItem {
font-size: 14px;
line-height: 1.5; }
.ModalStepBase.inModal .standardForm .formFooter {
position: relative; }
.ModalStepBase.inModal .Progress {
margin-top: -4px;
position: absolute;
top: 50%; }
.ModalStepBase.inModal .tip {
font-style: italic; }
.NewUserInterestPicker {
background-color: #fff;
padding-bottom: 69px; }
.NewUserInterestPicker .padItems {
width: 600px; }
.NewUserInterestPicker .GridItems.padItems > .item {
width: 136px; }
.NewUserInterestPicker.threeColumns .padItems {
width: 450px; }
body.interestsNuxMwebTutorial.NewUserSetupSpinnerStep {
background-image: url(https://s.pinimg.com/webapp/style/images/prof-x-long-bg-ae84c427.png);
background-size: cover; }
body.interestsNuxMwebTutorial .Nags {
display: none; }
.NewUserSetupSpinner {
overflow-x: hidden; }
.NewUserSetupSpinner.ignition {
margin-top: 0 !important; }
.NewUserSetupSpinner .outer {
display: inline-block;
position: relative;
right: -50%; }
.NewUserSetupSpinner .finishImage {
background: url(https://s.pinimg.com/webapp/style/images/nux-finish-pins-1x-da7dc75e.png) no-repeat;
background-size: contain;
height: 250px;
width: 324px;
left: -50%;
margin-top: 5%;
position: relative; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NewUserSetupSpinner .finishImage {
background-image: url(https://s.pinimg.com/webapp/style/images/nux-finish-pins-2x-ba17edad.png); } }
.NewUserSetupSpinner .finishTitle {
color: #fff;
font: bold 18px "Helvetica Neue", Sans-Serif;
padding: 20px 0 10px;
text-align: center; }
.NewUserSetupSpinner .finishMessage {
color: #fff;
font-size: 14px;
margin: 0 auto;
padding: 10px 0 15px;
text-align: center;
width: 300px; }
.NewUserSetupSpinner .spinner {
background: url(https://s.pinimg.com/webapp/style/images/spinner-small-1x-b897d25e.gif) no-repeat;
background-size: contain;
height: 16px;
width: 16px;
display: inline-block;
opacity: .5;
display: block;
margin: 10px auto 20px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NewUserSetupSpinner .spinner {
background-image: url(https://s.pinimg.com/webapp/style/images/spinner-small-2x-dbb1334f.gif); } }
.NewUserStepBase.ignition {
margin-top: -44px;
position: relative; }
.NewUserStepBase.ignition .noHeader {
box-shadow: None;
margin-top: 0; }
.NewUserStepBase.ignition .newUserStepHeader {
background: none;
box-shadow: none; }
.NewUserStepBase.ignition h1.pinStoryText {
color: #333;
/* stylelint-disable-next-line property-blacklist */
font-family: serif;
font-size: 28px;
font-weight: normal;
margin-top: 32px;
text-align: center; }
.NewUserStepBase.ignition .tooltipCloserLook p {
color: #333; }
.NewUserStepBase .newUserStepHeader {
background-color: #f0f0f0;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(0, 0, 0, 0.1);
margin-bottom: 14px;
text-align: center; }
.NewUserStepBase .newUserStepHeader.hidden {
background: none;
box-shadow: none;
display: block;
height: 0; }
.NewUserStepBase .newUserStepHeader::before {
content: "";
display: inline-block;
height: 195px; }
.NewUserStepBase .newUserStepHeader h1 {
color: #333;
color: rgba(21, 21, 21, 0.8);
font-size: 47px;
font-weight: bold;
line-height: 52px;
margin-left: auto;
margin-right: auto;
max-width: 736px;
text-align: center;
word-wrap: break-word;
font-size: 20px;
line-height: 26px; }
.NewUserStepBase .newUserStepHeader .newUserStepHeaderInner {
display: inline-block;
margin: auto;
padding: 17px 0;
width: 750px; }
.NewUserStepBase .newUserStepHeader .newUserStepHeaderPeep {
position: fixed;
right: 14px;
top: 6px;
z-index: 680; }
.NewUserStepBase .newUserStepHeader .newUserStepHeaderPeep .nextStep {
float: left; }
.NewUserStepBase .newUserStepHeader .newUserStepHeaderPeep .Progress {
float: left;
margin: 12px 3px; }
@media screen and (min-width: 1300px) {
.NewUserStepBase .newUserStepHeader .newUserStepHeaderPeep.fixedPosition {
left: 50%;
margin-left: 450px;
width: 280px; } }
.NewUserStepBase .welcome {
color: #333;
font-size: 16px;
line-height: 1.6em;
margin-bottom: 7px; }
.NewUserStepBase .tooltipCloserLook {
background: #fff;
border: 1px solid #c9c9c9;
border-radius: 3px;
left: 50%;
margin-left: -190px;
margin-top: 220px;
opacity: 0;
position: fixed;
text-align: center;
top: 90px;
-webkit-transition: opacity .3s;
transition: opacity .3s;
width: 380px; }
.NewUserStepBase .tooltipCloserLook p {
color: #bd081c;
font-size: 16px;
margin: 16px 0; }
.NewUserStepBase .tooltipCloserLook.visible {
opacity: 1;
visibility: visible;
z-index: 680; }
body.interestsNuxMwebTutorial.NewUserWelcomeStep {
background-image: url(https://s.pinimg.com/webapp/style/images/prof-x-long-bg-ae84c427.png);
background-size: cover; }
body.interestsNuxMwebTutorial .Nags {
display: none; }
.NewUserWelcome {
overflow-x: hidden; }
.NewUserWelcome.ignition {
margin-top: 0; }
.NewUserWelcome .outer {
display: inline-block;
position: relative;
right: -50%; }
.NewUserWelcome .welcomeImage {
background: url(https://s.pinimg.com/webapp/style/images/nux-welcome-pins-1x-9eebf6f9.png) no-repeat;
background-size: contain;
height: 258px;
width: 391px;
left: -50%;
margin-top: 5%;
position: relative; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NewUserWelcome .welcomeImage {
background-image: url(https://s.pinimg.com/webapp/style/images/nux-welcome-pins-2x-9e263d10.png); } }
.NewUserWelcome .welcomeTitle {
color: #fff;
font: bold 18px "Helvetica Neue", Sans-Serif;
padding: 20px 0 10px;
text-align: center; }
.NewUserWelcome .welcomeMessage {
color: #fff;
font-size: 12px;
margin: 0 auto;
padding: 10px 0 15px;
text-align: center;
width: 300px; }
.NewUserWelcome .welcomeButton {
padding-bottom: 15px; }
.NewUserWelcome .welcomeButtonStyle {
background: #ab171e -webkit-linear-gradient(#e3262e, #ab171e);
background: #ab171e linear-gradient(#e3262e, #ab171e);
border: 3px solid #fff;
border-color: #af151b #9a1015 #820a0f #9a1015;
border-width: 1px;
display: block;
margin: 0 auto; }
.NewUserWelcome .Button.btn.primary {
padding: 5px 60px; }
.NewUserWelcome .spinner {
background: url(https://s.pinimg.com/webapp/style/images/spinner-small-1x-b897d25e.gif) no-repeat;
background-size: contain;
height: 16px;
width: 16px;
display: inline-block;
opacity: .5;
display: none;
margin: 0 auto 20px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NewUserWelcome .spinner {
background-image: url(https://s.pinimg.com/webapp/style/images/spinner-small-2x-dbb1334f.gif); } }
.Pulser {
height: 50px;
position: absolute;
visibility: hidden;
width: 50px;
z-index: 680; }
.Pulser.fixed {
position: fixed; }
.Pulser .pulserImage {
cursor: pointer;
left: -47px;
position: absolute;
top: -47px; }
.Pulser .pulserInner {
background: url(https://s.pinimg.com/webapp/style/images/PulserInner-1x-f7e70bcd.png) no-repeat;
background-size: contain;
height: 146px;
width: 146px; }
.Pulser .pulserOuter {
background: url(https://s.pinimg.com/webapp/style/images/PulserOuter-1x-5840dc0e.png) no-repeat;
background-size: contain;
height: 146px;
width: 146px; }
.TutorialTooltip {
background-color: #4dd3f5;
border-radius: 4px;
color: #fff;
padding: 11px 14px 10px;
width: 264px; }
.TutorialTooltip.noButtons {
width: 200px; }
.TutorialTooltip.noButtons .tooltipWrapper {
text-align: center; }
.TutorialTooltip.noButtons .tooltipWrapper .tooltipContent {
display: inline-block;
padding: 0;
text-align: left; }
.TutorialTooltip .tooltipTitle {
font-size: 18px; }
.TutorialTooltip .tooltipContent {
font-size: 16px;
margin: 0;
padding: 0 2px 14px 0; }
.TutorialTooltip .ring {
background-color: transparent;
border: 4px solid #efefef;
border-radius: 50%;
display: inline-block;
height: 8px;
margin-bottom: 2px;
-webkit-transition: all .2s;
transition: all .2s;
vertical-align: middle;
width: 8px; }
.TutorialTooltip .tooltipFooter {
height: 40px; }
.TutorialTooltip .toolTipActionButton {
float: right; }
.TutorialTooltip .toolTipCancelButton {
float: left; }
.TwoCirclesPulser {
cursor: pointer;
height: 100px;
position: absolute;
visibility: hidden;
width: 100px;
z-index: 680; }
.TwoCirclesPulser .pulser {
background-color: #4dd3f5;
border-radius: 50%;
height: 100%;
position: absolute;
width: 100%; }
.TwoCirclesPulser.inHeader {
z-index: 672; }
.TwoCirclesPulser.inDropdown {
z-index: 753; }
.UnauthPinInGridCloseup .centeredWithinWrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.UnauthPinInGridCloseup .mainPin {
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 14px 7px 0;
width: 486px; }
.UnauthPinInGridCloseup .mainPin .pinCanonicalDescription {
width: auto !important; }
.UnauthPinInGridCloseup.pinOverlay .mainPin {
margin: 0 auto; }
.UnauthPinInGridCloseup .rightSection {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
position: relative; }
.UnauthPinInGridCloseup .rightSection .relatedPinsTitle {
color: #555;
font-size: 24px;
font-weight: bold;
margin: 14px 0 0 7px; }
.UnauthPinInGridCloseup .pinTopBar {
position: absolute;
z-index: 10; }
.UnauthPinInGridCloseup .PaddedPin {
margin: 0 32px; }
.UnauthPinInGridCloseup .PaddedPin .pinDomain {
width: auto !important; }
.UnauthPinInGridCloseup .Pin {
border-radius: 6px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
overflow: hidden;
width: 486px; }
.UnauthPinInGridCloseup .Pin.detailed.unauthPinInGrid .pinImage {
border-radius: 6px; }
.UnauthPinInGridCloseup .Pin.detailed.unauthPinInGrid .pinActionBarStickyContainer {
padding-top: 60px; }
.UnauthPinInGridCloseup .CloseupTitleCard {
padding-left: 32px;
padding-right: 32px; }
.UnauthPinInGridCloseup .CloseupTitleCard .richPinInformation {
padding: 0;
width: auto; }
.UnauthPinInGridCloseup .CloseupTitleCard .richPinTitle {
padding-bottom: 8px; }
.UnauthPinInGridCloseup .CloseupSourceDescription .richPinArticleSummary {
width: auto; }
.UnauthPinInGridCloseup .commentDescriptionContent {
width: auto !important; }
.UnauthPinInGridCloseup .showMoreButton {
display: none; }
.UnauthPinInGridCloseup .topSection {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row; }
.UnauthPinInGridCloseup .PinActionBar {
padding: 16px 32px 0;
top: 0 !important;
width: 486px !important; }
.UnauthPinInGridCloseup .nonCanonicalDesc {
width: auto !important; }
.UnauthPinInGridCloseup.gridLayout .pinPageHeader {
background-color: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); }
.UnauthPinInGridCloseup.gridLayout .pinPageHeaderTitle {
color: #555;
font-size: 48px;
font-weight: bold;
padding-top: 20px; }
.UnauthPinInGridCloseup.gridLayout .RelatedInterestsSection {
margin: 32px 0; }
.UnauthPinInGridCloseup.gridLayout .RelatedInterestsSection.noInterests {
height: 0;
margin-bottom: 0; }
.UnauthPinInGridCloseup.gridLayout .gridContainer {
margin-top: 18px; }
.UnauthPinInGridCloseup.showOpenNav {
background-color: #fff; }
.UnauthPinInGridCloseup.showOpenNav .pinPageContent {
background-color: #fff;
margin-left: 246px; }
@media (min-width: 0px) and (max-width: 999px) {
.UnauthPinInGridCloseup.showOpenNav .pinPageContent {
margin-left: 0; } }
.UnauthPinInGridCloseup.showOpenNav .pinPageContent .centeredWithinWrapper {
width: inherit; }
.UnauthPinInGridCloseup.showOpenNav .pinPageHeader {
box-shadow: none;
margin-bottom: 0;
padding-bottom: 0; }
.UnauthPinInGridCloseup.showOpenNav .pinPageHeader .centeredWithinWrapper {
width: inherit; }
.UnauthPinInGridCloseup.showOpenNav .openNavSubtitle {
color: #555;
font-size: 14px;
padding-left: 8px; }
.UnauthPinInGridCloseup.showOpenNav .pinPageHeaderTitleSmall {
padding: 32px 5px; }
.UnauthPinInGridCloseup.showOpenNav .pinPageHeaderTitle {
padding-bottom: 32px;
padding-left: 5px; }
.UnauthPinInGridCloseup.showOpenNav .gridContainer {
margin-top: 4px; }
.UnauthPinInGridCloseup.showOpenNav .RelatedInterestsSection {
margin-bottom: 40px;
margin-top: 16px; }
.UserBoardFollow {
height: 100%;
overflow: hidden;
text-align: center; }
.UserBoardFollow .userBoardFakeHeader {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
height: 45px;
position: relative; }
.UserBoardFollow .userBoardFakeHeader .fakeHeaderLogo {
width: 104px;
height: 26px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -253px -166px no-repeat;
display: inline-block;
margin-top: 10px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserBoardFollow .userBoardFakeHeader .fakeHeaderLogo {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -111px -201px;
background-size: 428px 427px; } }
.UserBoardFollow .boardInfo {
background: #fff;
bottom: -1px;
box-shadow: 0 -20px 50px #eee;
padding: 0 0 40px;
position: absolute;
-webkit-transition: height 1s ease-in-out;
transition: height 1s ease-in-out;
width: 100%; }
.UserBoardFollow .boardInfo .about {
color: #aaa;
font-size: 15px;
line-height: 22px;
margin: 0 auto;
max-width: 800px;
padding: 0 10px; }
.UserBoardFollow .boardInfo .boardName {
color: #333;
color: rgba(21, 21, 21, 0.8);
font-size: 36px;
line-height: 32px;
padding-top: 30px;
text-align: center; }
.UserBoardFollow .boardInfo .description {
color: #444;
font-size: 15px;
line-height: 20px;
margin: 10px auto 5px;
max-width: 750px;
padding: 0 20px;
text-align: center;
text-shadow: none; }
.UserBoardFollow .boardInfo img.profileImage {
box-shadow: 0 0 10px #aaa;
height: 64px;
margin-top: -32px;
overflow: hidden;
width: 64px; }
.UserBoardFollow .boardInfo .postFollow .boardName {
font-size: 26px;
padding-top: 0; }
.UserBoardFollow .boardInfo .postUnFollow {
margin-bottom: 10px;
margin-top: 20px; }
.UserBoardFollow .boardInfo .stats {
color: #aaa;
font-size: 15px;
margin: 15px 0 10px; }
.UserBoardFollow .boardInfo .stats .pinCount::before {
content: "\2022"; }
.UserBoardFollow .boardInfo .userName {
color: #333;
font-size: 22px;
font-weight: 500;
padding-top: 8px; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
/* stylelint-disable-next-line at-rule-blacklist */
.BusinessAccountCreate .emailLoginButton {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 13px;
padding: 9px 15px;
position: absolute;
right: 12px;
top: 12px; }
.BusinessAccountCreate .standardForm {
margin-bottom: 0; }
.BusinessAccountCreate .standardForm svg {
z-index: 1; }
.BusinessAccountCreate .standardForm input[type="email"],
.BusinessAccountCreate .standardForm input[type="number"],
.BusinessAccountCreate .standardForm input[type="password"],
.BusinessAccountCreate .standardForm input[type="text"],
.BusinessAccountCreate .standardForm input[type="url"],
.BusinessAccountCreate .standardForm select {
padding: 11px; }
.BusinessAccountCreate .standardForm input[type="email"]::-webkit-input-placeholder,
.BusinessAccountCreate .standardForm input[type="number"]::-webkit-input-placeholder,
.BusinessAccountCreate .standardForm input[type="password"]::-webkit-input-placeholder,
.BusinessAccountCreate .standardForm input[type="text"]::-webkit-input-placeholder,
.BusinessAccountCreate .standardForm input[type="url"]::-webkit-input-placeholder,
.BusinessAccountCreate .standardForm select::-webkit-input-placeholder {
font-weight: bold; }
.BusinessAccountCreate .standardForm input[type="email"]::-moz-placeholder,
.BusinessAccountCreate .standardForm input[type="number"]::-moz-placeholder,
.BusinessAccountCreate .standardForm input[type="password"]::-moz-placeholder,
.BusinessAccountCreate .standardForm input[type="text"]::-moz-placeholder,
.BusinessAccountCreate .standardForm input[type="url"]::-moz-placeholder,
.BusinessAccountCreate .standardForm select::-moz-placeholder {
font-weight: bold; }
.BusinessAccountCreate .standardForm input[type="email"]:-ms-input-placeholder,
.BusinessAccountCreate .standardForm input[type="number"]:-ms-input-placeholder,
.BusinessAccountCreate .standardForm input[type="password"]:-ms-input-placeholder,
.BusinessAccountCreate .standardForm input[type="text"]:-ms-input-placeholder,
.BusinessAccountCreate .standardForm input[type="url"]:-ms-input-placeholder,
.BusinessAccountCreate .standardForm select:-ms-input-placeholder {
font-weight: bold; }
.BusinessAccountCreate .standardForm input[type="email"]::placeholder,
.BusinessAccountCreate .standardForm input[type="number"]::placeholder,
.BusinessAccountCreate .standardForm input[type="password"]::placeholder,
.BusinessAccountCreate .standardForm input[type="text"]::placeholder,
.BusinessAccountCreate .standardForm input[type="url"]::placeholder,
.BusinessAccountCreate .standardForm select::placeholder {
font-weight: bold; }
.BusinessAccountCreate .standardForm select {
height: 40px;
padding-right: 33px; }
.BusinessAccountCreate .fields > ul > li, .BusinessAccountCreate .fields div > li {
margin-bottom: 5px;
position: relative; }
.BusinessAccountCreate .fields > ul > li.emailAddress, .BusinessAccountCreate .fields div > li.emailAddress {
color: #b9b9b9;
font-size: 14px;
margin-bottom: 10px; }
.BusinessAccountCreate .fields input.readonly {
background: transparent;
box-shadow: none;
color: #444; }
.BusinessAccountCreate .fields input.readonly::-webkit-input-placeholder {
font-weight: normal; }
.BusinessAccountCreate .fields input.readonly::-moz-placeholder {
font-weight: normal; }
.BusinessAccountCreate .fields input.readonly:-ms-input-placeholder {
font-weight: normal; }
.BusinessAccountCreate .fields input.readonly::placeholder {
font-weight: normal; }
.BusinessAccountCreate .fields .formErrorMessage {
color: #bd081c;
font-size: 13px;
margin: 7px 0; }
.BusinessAccountCreate .optional {
color: #a9a9a9;
cursor: text;
line-height: 40px;
padding: 0 10px 0 0;
position: absolute;
right: 0;
top: 0; }
.BusinessAccountCreate input:focus + .optional {
display: none; }
.BusinessAccountCreate button[type=submit] {
display: block;
width: 100%; }
.BusinessAccountCreate .signupButtonContainer {
margin: 8px 0 10px; }
.BusinessAccountCreate .acceptTerms {
color: #b9b9b9;
font-size: 11px;
line-height: 1.5;
margin-bottom: 15px; }
.BusinessAccountCreate .acceptTerms a {
color: #b9b9b9; }
.BusinessAccountCreate .notABusiness {
color: #444;
display: inline-block;
font-weight: bold; }
.BusinessAccountCreate .homeUnauthNumbers {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
bottom: -50px;
color: #fff;
display: table;
margin: 0 auto;
position: absolute;
table-layout: fixed;
text-align: center;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
width: 100%;
z-index: 0; }
.BusinessAccountCreate .homeUnauthNumbers .timeToSignup {
display: inline-block;
float: none;
padding-left: 20px;
padding-right: 15px;
text-align: center; }
.BusinessAccountCreate .homeUnauthNumbers .timeToSignup .numbersWrapper {
text-align: left; }
.BusinessAccountCreate .homeUnauthNumbers .numbersTitle {
display: inline-block;
/* stylelint-disable-next-line property-blacklist */
font-family: Helvetica;
font-size: 35px;
font-weight: bold; }
.BusinessAccountCreate .homeUnauthNumbers .numbersSubtitle {
display: inline-block;
font-size: 12px;
font-weight: bold;
line-height: 120%;
padding-left: 4px;
padding-top: 3px;
text-align: left; }
/* desktop.scss */
.BusinessAccountCreate {
bottom: 0;
left: 0;
right: 0;
top: 0;
min-width: 750px;
position: fixed;
z-index: 681; }
.BusinessAccountCreate .pinterestLogo {
width: 55px;
height: 55px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -62px -234px no-repeat;
border-radius: 100%;
height: 56px;
margin: -30px auto;
width: 56px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.BusinessAccountCreate .pinterestLogo {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -61px -231px;
background-size: 399px 382px; } }
.BusinessAccountCreate .newSignupLogo {
margin-top: 20px; }
.BusinessAccountCreate .hidden {
display: none; }
.BusinessAccountCreate .invisible {
opacity: 0;
pointer-events: none; }
.BusinessAccountCreate .interestsWrapper {
-webkit-animation: scrollFooterWithBgGrid 35s linear;
animation: scrollFooterWithBgGrid 35s linear;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
background-color: #fff;
bottom: -30px;
height: 30px;
left: 0;
position: absolute;
text-align: center;
width: 100%; }
.BusinessAccountCreate .interestsWrapper .gradient {
background-color: #cccccc;
background: -webkit-linear-gradient(#999, #fff);
background: linear-gradient(#999, #fff);
height: 8px; }
.BusinessAccountCreate .interestsWrapper span,
.BusinessAccountCreate .interestsWrapper a {
font-size: 10px;
font-weight: bold;
padding: 0 3px;
position: relative; }
.BusinessAccountCreate .interestsWrapper span {
color: #999; }
.BusinessAccountCreate .interestsWrapper a {
color: #333; }
.BusinessAccountCreate .inspiredSearchBackgroundContainer {
background-color: #e6e8e3;
height: 100%;
opacity: 0;
position: absolute;
-webkit-transition: all 1s;
transition: all 1s;
visibility: hidden;
width: 100%; }
.BusinessAccountCreate .inspiredSearchBackgroundContainer .background {
padding-bottom: 300px; }
.BusinessAccountCreate .inspiredSearchBackgroundContainer.active {
opacity: 1;
visibility: visible; }
.BusinessAccountCreate .inspiredSearchBackgroundContainer.animate_background .background {
-webkit-animation: scrollBgGridLinks 35s linear;
animation: scrollBgGridLinks 35s linear;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; }
.BusinessAccountCreate .signupFormContainer {
background-color: #fff;
border-radius: 6px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
left: 50%;
margin-left: -358px;
min-height: 440px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 716px; }
.BusinessAccountCreate .signupFormContainer .backgroundImage {
background-position: 50%;
background-size: cover;
height: 100%;
position: absolute;
width: 50%; }
.BusinessAccountCreate .signupFormContainer .leftHalf {
border-radius: 8px 0 0 8px;
display: inline-block;
height: 100%;
overflow: hidden;
vertical-align: top;
width: 50%; }
.BusinessAccountCreate .signupFormContainer .rightHalf {
display: inline-block;
height: 100%;
vertical-align: top;
width: 50%; }
.BusinessAccountCreate .signupFormStep {
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-top: 55px;
text-align: center;
width: auto; }
.BusinessAccountCreate .signupFormStep .title {
color: #444;
font-size: 27px;
font-weight: bold;
letter-spacing: -1px;
margin-top: 50px; }
.BusinessAccountCreate .signupFormStep .subtitle {
color: #444;
font-size: 16px;
font-weight: 500; }
.BusinessAccountCreate .signupFormStep .newSignupSubtitle {
color: #b5b5b5;
font-size: 14px;
margin: 7px auto;
width: 80%; }
.BusinessAccountCreate .signupFormStep .fields {
margin: 30px auto 0;
width: 268px; }
.BusinessAccountCreate .signupFormStep .newSignUpField {
margin-top: 15px; }
.CampbellMenuList {
max-height: 590px;
overflow-y: auto;
padding: 10px 0; }
.CampbellMenuList li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.CampbellMenuList.withIcon .menuItem {
padding: 14px 24px; }
.CampbellMenuList.withoutIcon .menuItem {
padding: 14px 16px; }
.CampbellMenuList .divider {
border-bottom-width: 0;
border-style: solid;
color: #e9e9e9;
margin: 0;
padding: 0; }
.CampbellMenuList .menuItem {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #838383;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 16px;
font-weight: bold;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
outline: none; }
.CampbellMenuList .menuItem .icon {
margin-right: 18px; }
.CampbellMenuList .menuItem:hover {
color: #333; }
.CampbellMenuList .menuItem.alphaFeatureTag::after, .CampbellMenuList .menuItem.newFeatureTag::after, .CampbellMenuList .menuItem.betaFeatureTag::after, .CampbellMenuList .menuItem.earlyAccessFeatureTag::after {
border: 1px solid #0fa573;
border-radius: 4px;
color: #0fa573;
font-size: 12px;
margin: 1px 0 0 10px;
padding: 2px 4px; }
.CampbellMenuList .menuItem.orangeText::after {
border-color: #ffa500;
color: #ffa500; }
.CampbellMenuList .menuItem.alphaFeatureTag::after {
content: "Pre-release"; }
.CampbellMenuList .menuItem.newFeatureTag::after {
content: "Early Access"; }
.CampbellMenuList .menuItem.betaFeatureTag::after {
content: "Pre-release"; }
.CampbellMenuList .menuItem.earlyAccessFeatureTag::after {
content: "Early Access"; }
.CampbellMenuList .menuTitle {
color: #a8a8a8;
font-size: 14px;
font-weight: normal;
padding: 16px 16px 6px; }
.CampbellRightHeader {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: 5px; }
.CampbellRightHeader .navRightHeaderIcon {
margin-left: 16px;
padding: 0; }
.CampbellRightHeader .sterlingOnSteroids {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.CampbellRightHeader .sterlingOnSteroids .viewingInfo {
display: inline-block;
font-size: 16px;
font-weight: bold;
margin: 0 10px; }
.CampbellRightHeader .sterlingOnSteroids .NavigateButton {
margin-right: 10px; }
.CampbellUserMenu:hover {
cursor: pointer; }
.CampbellUserMenu .profileImage {
height: 28px;
width: 28px; }
.CampbellUserMenu .profileImage img {
border-radius: 100%; }
.Button.ContinueWithGoogleButton {
padding: 0; }
.Button.ContinueWithGoogleButton em {
background: url(https://s.pinimg.com/webapp/style/images/google_g_logo-3aac701c.svg) no-repeat 57% 50%;
background-size: 18px 18px;
border-right: 1px solid rgba(0, 0, 0, 0.06);
float: left;
height: 40px;
width: 38px; }
.Button.ContinueWithGoogleButton .buttonText {
color: #444;
float: left;
line-height: 40px;
padding: 0 18px 0 8px; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.MultiStepBusinessAccountCreate .emailLoginButton, .MultiStepBusinessAccountCreate .backButton {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 13px;
padding: 9px 15px;
position: absolute; }
.MultiStepBusinessAccountCreate .emailLoginButton {
right: 12px;
top: 12px; }
.MultiStepBusinessAccountCreate .backButton {
left: 12px;
top: 12px; }
.MultiStepBusinessAccountCreate .standardForm {
margin-bottom: 0; }
.MultiStepBusinessAccountCreate .standardForm input[type="email"],
.MultiStepBusinessAccountCreate .standardForm input[type="number"],
.MultiStepBusinessAccountCreate .standardForm input[type="password"],
.MultiStepBusinessAccountCreate .standardForm input[type="text"],
.MultiStepBusinessAccountCreate .standardForm input[type="url"] {
padding: 11px; }
.MultiStepBusinessAccountCreate .standardForm input[type="email"]::-webkit-input-placeholder,
.MultiStepBusinessAccountCreate .standardForm input[type="number"]::-webkit-input-placeholder,
.MultiStepBusinessAccountCreate .standardForm input[type="password"]::-webkit-input-placeholder,
.MultiStepBusinessAccountCreate .standardForm input[type="text"]::-webkit-input-placeholder,
.MultiStepBusinessAccountCreate .standardForm input[type="url"]::-webkit-input-placeholder {
font-weight: bold; }
.MultiStepBusinessAccountCreate .standardForm input[type="email"]::-moz-placeholder,
.MultiStepBusinessAccountCreate .standardForm input[type="number"]::-moz-placeholder,
.MultiStepBusinessAccountCreate .standardForm input[type="password"]::-moz-placeholder,
.MultiStepBusinessAccountCreate .standardForm input[type="text"]::-moz-placeholder,
.MultiStepBusinessAccountCreate .standardForm input[type="url"]::-moz-placeholder {
font-weight: bold; }
.MultiStepBusinessAccountCreate .standardForm input[type="email"]:-ms-input-placeholder,
.MultiStepBusinessAccountCreate .standardForm input[type="number"]:-ms-input-placeholder,
.MultiStepBusinessAccountCreate .standardForm input[type="password"]:-ms-input-placeholder,
.MultiStepBusinessAccountCreate .standardForm input[type="text"]:-ms-input-placeholder,
.MultiStepBusinessAccountCreate .standardForm input[type="url"]:-ms-input-placeholder {
font-weight: bold; }
.MultiStepBusinessAccountCreate .standardForm input[type="email"]::placeholder,
.MultiStepBusinessAccountCreate .standardForm input[type="number"]::placeholder,
.MultiStepBusinessAccountCreate .standardForm input[type="password"]::placeholder,
.MultiStepBusinessAccountCreate .standardForm input[type="text"]::placeholder,
.MultiStepBusinessAccountCreate .standardForm input[type="url"]::placeholder {
font-weight: bold; }
.MultiStepBusinessAccountCreate .fields > ul > li {
margin-bottom: 5px; }
.MultiStepBusinessAccountCreate .fields > ul > li.emailAddress {
color: #b9b9b9;
font-size: 14px;
margin-bottom: 10px; }
.MultiStepBusinessAccountCreate .fields input.readonly {
background: transparent;
box-shadow: none;
color: #444; }
.MultiStepBusinessAccountCreate .fields input.readonly::-webkit-input-placeholder {
font-weight: normal; }
.MultiStepBusinessAccountCreate .fields input.readonly::-moz-placeholder {
font-weight: normal; }
.MultiStepBusinessAccountCreate .fields input.readonly:-ms-input-placeholder {
font-weight: normal; }
.MultiStepBusinessAccountCreate .fields input.readonly::placeholder {
font-weight: normal; }
.MultiStepBusinessAccountCreate button[type=submit],
.MultiStepBusinessAccountCreate .continueWithGoogle {
display: block;
width: 100%; }
.MultiStepBusinessAccountCreate .signupButtonContainer {
margin: 8px 0 10px; }
.MultiStepBusinessAccountCreate .acceptTerms {
color: #b9b9b9;
font-size: 11px;
line-height: 1.5; }
.MultiStepBusinessAccountCreate .acceptTerms a {
color: #b9b9b9; }
.MultiStepBusinessAccountCreate .businessTypesList {
text-align: left; }
.MultiStepBusinessAccountCreate .businessTypesList .hasError {
position: relative; }
.MultiStepBusinessAccountCreate .businessTypesList .formFieldMessage {
position: absolute;
top: 10px; }
.MultiStepBusinessAccountCreate .progressBar {
margin: 17px 0 0;
text-align: right; }
.MultiStepBusinessAccountCreate .progressBar .right {
color: #555;
font-size: 12px;
font-weight: bold; }
.MultiStepBusinessAccountCreate .progressBar .dark.bar {
background: #efefef;
border-radius: 50px;
margin: 5px 0 12px; }
.MultiStepBusinessAccountCreate .progressBar .dark.bar li {
height: 8px;
width: 33.3%; }
.MultiStepBusinessAccountCreate .progressBar .dark.bar li.active {
background: #555; }
.MultiStepBusinessAccountCreate .progressBar .dark.bar li.currentStep {
border-radius: 0 50px 50px 0; }
.MultiStepBusinessAccountCreate .progressBar .dark.bar[max="2"] li {
width: 50%; }
.MultiStepBusinessAccountCreate .progressBar .dark.bar[max="3"] li {
width: 33.3%; }
.MultiStepBusinessAccountCreate .notABusiness {
color: #444;
display: inline-block;
font-weight: bold; }
/* desktop.scss */
.MultiStepBusinessAccountCreate {
bottom: 0;
left: 0;
right: 0;
top: 0;
min-width: 750px;
position: fixed;
z-index: 681; }
.MultiStepBusinessAccountCreate .pinterestLogo {
width: 55px;
height: 55px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -62px -234px no-repeat;
border-radius: 100%;
height: 56px;
margin: -30px auto;
width: 56px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MultiStepBusinessAccountCreate .pinterestLogo {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -61px -231px;
background-size: 399px 382px; } }
.MultiStepBusinessAccountCreate .hidden {
display: none; }
.MultiStepBusinessAccountCreate .invisible {
opacity: 0;
pointer-events: none; }
.MultiStepBusinessAccountCreate .interestsWrapper {
-webkit-animation: scrollFooterWithBgGrid 35s linear;
animation: scrollFooterWithBgGrid 35s linear;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
background-color: #fff;
bottom: -30px;
height: 30px;
left: 0;
position: absolute;
text-align: center;
width: 100%; }
.MultiStepBusinessAccountCreate .interestsWrapper .gradient {
background-color: #cccccc;
background: -webkit-linear-gradient(#999, #fff);
background: linear-gradient(#999, #fff);
height: 8px; }
.MultiStepBusinessAccountCreate .interestsWrapper span,
.MultiStepBusinessAccountCreate .interestsWrapper a {
font-size: 10px;
font-weight: bold;
padding: 0 3px;
position: relative; }
.MultiStepBusinessAccountCreate .interestsWrapper span {
color: #999; }
.MultiStepBusinessAccountCreate .interestsWrapper a {
color: #333; }
.MultiStepBusinessAccountCreate .inspiredSearchBackgroundContainer {
background-color: #e6e8e3;
height: 100%;
opacity: 0;
position: absolute;
-webkit-transition: all 1s;
transition: all 1s;
visibility: hidden;
width: 100%; }
.MultiStepBusinessAccountCreate .inspiredSearchBackgroundContainer .background {
padding-bottom: 300px; }
.MultiStepBusinessAccountCreate .inspiredSearchBackgroundContainer.active {
opacity: 1;
visibility: visible; }
.MultiStepBusinessAccountCreate .inspiredSearchBackgroundContainer.animate_background .background {
-webkit-animation: scrollBgGridLinks 35s linear;
animation: scrollBgGridLinks 35s linear;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; }
.MultiStepBusinessAccountCreate .continueWithGoogle {
margin-bottom: 33px; }
.MultiStepBusinessAccountCreate .signupFormContainer {
background-color: #fff;
border-radius: 6px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
left: 50%;
margin-left: -358px;
margin-top: -340px;
min-height: 440px;
padding-bottom: 10px;
position: absolute;
top: 58%;
width: 716px;
z-index: 1; }
.MultiStepBusinessAccountCreate .signupFormStep {
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-top: 55px;
text-align: center;
width: auto; }
.MultiStepBusinessAccountCreate .signupFormStep .title {
color: #444;
font-size: 27px;
font-weight: bold;
letter-spacing: -1px;
margin-top: 50px; }
.MultiStepBusinessAccountCreate .signupFormStep .subtitle {
color: #444;
font-size: 16px;
font-weight: 500; }
.MultiStepBusinessAccountCreate .signupFormStep .fields {
margin: 30px auto 0;
width: 268px; }
.MultiStepBusinessAccountCreate.threeSteps .businessTypesList {
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
margin: 0 -60px; }
.MultiStepBusinessAccountCreate.threeSteps .businessTypesList li:nth-child(5) {
margin-bottom: 0; }
.PartnerPerformanceHero .heroBasicContainer {
background-color: #515860; }
.PartnerPerformanceHero .heroContent.heroBasicContent {
padding-bottom: 0; }
.PartnerPerformanceHero .heroContent.heroBasicContent.threePinsWide {
width: 736px; }
.PartnerPerformanceHero .message {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
float: none; }
.PartnerPerformanceHeroPins {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
padding: 20px;
width: 50%; }
.PartnerPerformanceHeroPins h4 {
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif;
color: #333;
font-size: 14px;
font-weight: bold; }
.PartnerPerformanceHeroPins ul {
margin: 0;
padding: 5px 0 0; }
.PartnerPerformanceHeroPins ul li {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
margin: 0;
padding: 0; }
.PartnerPerformanceHeroPins ul li a, .PartnerPerformanceHeroPins ul li span {
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif;
display: block;
font-size: 14px;
font-weight: bold;
min-width: 42px; }
.PartnerPerformanceHeroPins ul li a.topPinThumb, .PartnerPerformanceHeroPins ul li span.topPinThumb {
height: 42px;
padding: 5px 0;
width: 42px; }
.PartnerPerformanceHeroPins ul li a.topPinThumb img, .PartnerPerformanceHeroPins ul li span.topPinThumb img {
border-radius: 3px;
height: 42px;
width: 42px; }
.PartnerPerformanceHeroPins ul li a.topPinInfo, .PartnerPerformanceHeroPins ul li span.topPinInfo {
color: #717171;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding-left: 10px; }
.PartnerPerformanceHeroPins ul li .topPinButton {
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px; }
.PartnerPerformanceHeroStats {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
width: 50%; }
.PartnerPerformanceHeroStats.noStatsAvailable {
width: 0; }
.PartnerPerformanceHeroStats div {
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif;
font-weight: bold;
padding: 20px; }
.PartnerPerformanceHeroStats .performanceStatsAnalytics {
color: #333;
font-size: 18px;
line-height: 30px;
padding-right: 40px; }
.PartnerPerformanceHeroStats .performanceStatsAnalytics a {
color: #333;
text-decoration: underline; }
.PartnerPerformanceHeroStats .performanceStatsAnalytics a:hover {
color: #717171; }
.PartnerPerformanceHeroStats .performanceStatsAnalytics a.performanceStatsHighlight {
color: #bd081c;
text-decoration: none; }
.PartnerPerformanceHeroStats .performanceStatsAnalytics a.performanceStatsHighlight:hover {
color: #bd081c;
text-decoration: underline; }
.PartnerPerformanceHeroStats .performanceStatsTrend {
color: #717171;
font-size: 12px;
line-height: 18px;
padding-top: 0; }
.PartnerPerformanceHeroStats .performanceStatsTrend a {
color: #717171; }
.PartnerPerformanceHeroStats .performanceStatsTrend a:hover {
text-decoration: underline; }
.PartnerPerformanceHeroStats .performanceDeltaIndicator {
font-size: 133%; }
.TopLevelNav {
background-color: #fff;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.12);
height: 64px;
position: fixed;
-webkit-transition: opacity 1s ease;
transition: opacity 1s ease;
width: 100%;
z-index: 671;
/* make the buttons full-height when cloned so tooltips can attach without appearing underneath */ }
.TopLevelNav .adminModeBackground {
background-color: #dcdcdc;
background-image: -webkit-repeating-linear-gradient(45deg, transparent, transparent 20px, #fff 20px, #fff 40px);
background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, #fff 20px, #fff 40px);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1; }
.TopLevelNav .adminModeBackground.writeMode {
background-color: #ec7a71; }
.TopLevelNav .headerContainer {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 11px;
position: static;
position: initial; }
.TopLevelNav .businessLink {
color: #818181;
font-size: 16px;
margin-left: 24px;
white-space: nowrap; }
.TopLevelNav .businessLink:hover {
color: #333; }
.TopLevelNav .siteLogo {
color: #333;
display: inline-block;
font-size: 16px;
line-height: 39px; }
.TopLevelNav .siteLogo em {
width: 28px;
height: 28px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-partners-1x-9f7312af.png) -60px 0 no-repeat;
display: inline-block;
height: 28px;
margin-left: 8px;
vertical-align: middle;
width: 28px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.TopLevelNav .siteLogo em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-partners-2x-19664238.png);
background-position: -58px 0;
background-size: 86px 72px; } }
.TopLevelNav .siteLogo:hover {
color: #666; }
.TopLevelNav .leftNavElement {
-ms-flex-preferred-size: auto;
flex-basis: auto;
-ms-flex-negative: 0;
flex-shrink: 0; }
.TopLevelNav .campbellHomefeedSearch {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-left: 48px;
margin-top: -4px;
width: 100%; }
.TopLevelNav .campbellHomefeedSearch .campbellSearchForm {
-webkit-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2; }
.TopLevelNav .campbellHomefeedSearch .DenzelReactBridge {
width: 100%; }
.TopLevelNav .campbellHomefeedSearch .DenzelReactBridge .SearchFormInReact {
height: 34px; }
.TopLevelNav .rightNav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-left: 16px; }
.TopLevelNav .rightNav .unauthButtons {
margin-right: 8px;
margin-top: 5px; }
.TopLevelNav .rightNav .unauthButtons .NavigateButton {
margin-left: 5px; }
.TopLevelNav .mainSiteNavMenu {
font-weight: bold;
margin-left: 24px; }
.TopLevelNav .leftNav {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2; }
.TopLevelNav .leftNav .logoButton {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.TopLevelNav.tutorialHighlight .headerContainer {
margin-top: 0; }
.TopLevelNav.tutorialHighlight .leftNav {
margin-top: 0; }
.TopLevelNav.tutorialHighlight .leftNav .Button.leftNavElement {
height: 54px; }
.TopLevelNav.tutorialHighlight .rightNav {
margin-top: 0; }
.TopLevelNav.tutorialHighlight .rightNav .CampbellRightHeader {
height: 54px; }
.TopLevelNav.tutorialHighlight .rightNav .CampbellRightHeader .navRightHeaderIcon {
-ms-flex-item-align: center;
align-self: center; }
.TopLevelNav.tutorialHighlight .rightNav .CampbellRightHeader .navRightHeaderIcon .campbellAddPin {
height: 54px; }
.PintreeEst .pintreeEstWrapper {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
cursor: pointer;
margin-bottom: 14px;
padding: 10px;
width: 216px; }
.PintreeEst .pintreeEstTitle {
font-size: 16px;
font-weight: bold;
text-align: center; }
.PintreeEst .pintreeEstContentWrapper {
padding: 10px; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.Board .hoverMask {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background 0.04s linear;
transition: background 0.04s linear;
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
z-index: 100; }
.Board .boardLinkWrapper:hover .hoverMask {
background: rgba(255, 255, 255, 0.08); }
.Board .boardLinkWrapper:active .hoverMask {
background: rgba(255, 255, 255, 0.08); }
.Board .boardName {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #555;
display: block;
font-size: 14px;
font-weight: bold;
height: 18px;
line-height: 18px;
margin: 0 3px 6px;
position: relative;
height: auto; }
.Board .boardName.hasBoardContext {
height: 40px;
margin-left: 0; }
.Board .boardName.hasBoardContext .authorName {
height: 16px; }
.Board .boardName .name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.Board .boardName .authorName {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
font-weight: normal; }
.Board.noBoardName .boardName {
display: none; }
.Board.boardCoverImage {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
background-color: transparent;
width: 236px; }
.Board.boardCoverImage .boardLinkWrapper {
padding: 10px 10px 0; }
.Board.boardCoverImage img {
border-radius: 2px; }
.Board.boardCoverImage .boardCoverWrapper {
position: relative;
height: 111px;
width: 216px; }
.Board.boardCoverImage .boardCoverWrapper::after {
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: auto;
left: 0;
position: absolute;
top: 0;
width: 216px; }
.Board.boardCoverImage .boardCoverWrapper .boardCover {
border-radius: 3px;
height: auto;
width: 216px; }
.Board.boardCoverImage .boardThumbs {
margin: 4px 0; }
.Board.boardCoverImage .boardThumbs::after {
clear: both;
content: "";
display: table; }
.Board.boardCoverImage .boardThumbs li {
position: relative;
display: inline;
float: left;
height: 69.33333px;
margin-left: 4px;
position: relative;
width: 69.33333px; }
.Board.boardCoverImage .boardThumbs li::after {
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 69.33333px;
left: 0;
position: absolute;
top: 0;
width: 69.33333px; }
.Board.boardCoverImage .boardThumbs li .thumb {
border-radius: 3px;
height: 69.33333px;
width: 69.33333px; }
.Board.boardCoverImage .boardThumbs li:first-child {
margin-left: 0; }
.Board.boardCoverImage .boardThumbs .followConfirmation {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: #ffa;
bottom: 0;
display: none;
left: 0;
padding: 10px;
position: absolute;
right: 0;
top: 0; }
.Board.boardCoverImage .boardThumbs.followConfirmed .followConfirmation {
display: block; }
.Board.boardCoverImage .Button {
margin: 0 10px 10px;
width: 216px; }
.Board.homefeedBuilderView {
margin: 0 8px 26px;
width: 172px; }
.Board.homefeedBuilderView .boardCover {
height: 116px;
width: 172px; }
.Board.homefeedBuilderView .boardCoverWrapper {
height: 116px;
width: 172px; }
.Board.homefeedBuilderView .boardThumbs {
margin: 2px 0; }
.Board.homefeedBuilderView .boardThumbs::after {
clear: both;
content: "";
display: table; }
.Board.homefeedBuilderView .boardThumbs li {
position: relative;
display: inline;
float: left;
height: 56px;
margin-left: 2px;
position: relative;
width: 56px; }
.Board.homefeedBuilderView .boardThumbs li::after {
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 56px;
left: 0;
position: absolute;
top: 0;
width: 56px; }
.Board.homefeedBuilderView .boardThumbs li .thumb {
border-radius: 3px;
height: 56px;
width: 56px; }
.Board.homefeedBuilderView .boardThumbs li:first-child {
margin-left: 0; }
.Board.homefeedBuilderView .boardThumbs .followConfirmation {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: #ffa;
bottom: 0;
display: none;
left: 0;
padding: 10px;
position: absolute;
right: 0;
top: 0; }
.Board.homefeedBuilderView .boardThumbs.followConfirmed .followConfirmation {
display: block; }
.Board.exploreTabView {
margin: 0 17px 34px;
width: 218px; }
.Board.exploreTabView .boardCover {
height: 146px;
width: 218px; }
.Board.exploreTabView .boardCoverWrapper {
height: 146px;
width: 218px; }
.Board.exploreTabView .boardThumbs {
margin: 3px 0; }
.Board.exploreTabView .boardThumbs::after {
clear: both;
content: "";
display: table; }
.Board.exploreTabView .boardThumbs li {
position: relative;
display: inline;
float: left;
height: 70px;
margin-left: 3px;
position: relative;
width: 70px; }
.Board.exploreTabView .boardThumbs li::after {
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 70px;
left: 0;
position: absolute;
top: 0;
width: 70px; }
.Board.exploreTabView .boardThumbs li .thumb {
border-radius: 3px;
height: 70px;
width: 70px; }
.Board.exploreTabView .boardThumbs li:first-child {
margin-left: 0; }
.Board.exploreTabView .boardThumbs .followConfirmation {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: #ffa;
bottom: 0;
display: none;
left: 0;
padding: 10px;
position: absolute;
right: 0;
top: 0; }
.Board.exploreTabView .boardThumbs.followConfirmed .followConfirmation {
display: block; }
.Board.homefeedBuilderView, .Board.exploreTabView {
box-shadow: none; }
.Board.homefeedBuilderView .followMask, .Board.exploreTabView .followMask {
background-color: rgba(0, 0, 0, 0.7);
border-radius: 4px;
height: 100%;
opacity: 0;
position: absolute;
-webkit-transition: visibility 0s .2s, opacity .2s linear;
transition: visibility 0s .2s, opacity .2s linear;
visibility: hidden;
width: 100%;
z-index: 1; }
.Board.homefeedBuilderView .followMask .followMaskIcon, .Board.exploreTabView .followMask .followMaskIcon {
width: 59px;
height: 42px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -215px 0 no-repeat;
display: inline-block;
margin-left: 57px;
margin-top: 65px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Board.homefeedBuilderView .followMask .followMaskIcon, .Board.exploreTabView .followMask .followMaskIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -128px -35px;
background-size: 249px 231px; } }
.Board.homefeedBuilderView .followMask.visible, .Board.exploreTabView .followMask.visible {
opacity: 1;
-webkit-transition: opacity .2s linear;
transition: opacity .2s linear;
visibility: visible; }
.Board.homefeedBuilderView img, .Board.exploreTabView img {
border-radius: 3px; }
.Board.homefeedBuilderView .boardImagesWrapper, .Board.exploreTabView .boardImagesWrapper {
position: relative; }
.Board.homefeedBuilderView .boardCover, .Board.exploreTabView .boardCover {
border-radius: 3px; }
.Board.homefeedBuilderView .boardCoverWrapper, .Board.exploreTabView .boardCoverWrapper {
border-radius: 3px;
position: relative; }
.Board.homefeedBuilderView .boardLinkWrapper:hover .hoverMask, .Board.exploreTabView .boardLinkWrapper:hover .hoverMask {
background: rgba(0, 0, 0, 0.15); }
.Board.homefeedBuilderView .boardLinkWrapper:active .hoverMask, .Board.exploreTabView .boardLinkWrapper:active .hoverMask {
background: rgba(0, 0, 0, 0.25); }
.Board.homefeedBuilderView .hoverMask, .Board.exploreTabView .hoverMask {
box-shadow: none; }
.Board.homefeedBuilderView a, .Board.exploreTabView a {
margin-bottom: 8px; }
.Board.boardCoverImage, .Board.homefeedBuilderView, .Board.exploreTabView {
position: relative; }
.Board.boardCoverImage .boardLinkWrapper, .Board.homefeedBuilderView .boardLinkWrapper, .Board.exploreTabView .boardLinkWrapper {
display: block; }
.Board.boardCoverImage a, .Board.homefeedBuilderView a, .Board.exploreTabView a {
color: #555;
display: block;
position: relative; }
.Board.boardCoverImage .BoardIcons, .Board.homefeedBuilderView .BoardIcons, .Board.exploreTabView .BoardIcons {
float: right; }
.Board.boardCoverImage .boardCoverWrapper, .Board.homefeedBuilderView .boardCoverWrapper, .Board.exploreTabView .boardCoverWrapper {
overflow: hidden;
background-color: #eee;
clear: both; }
.Board.boardCoverImage .boardPinCount, .Board.homefeedBuilderView .boardPinCount, .Board.exploreTabView .boardPinCount {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-radius: 2px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.3);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
background-color: #000;
background-color: rgba(68, 68, 68, 0.7);
bottom: 3px;
color: #fff;
padding: 3px 6px;
position: absolute;
left: 3px; }
.Board .thumbImageWrapper {
position: relative;
width: 50px; }
.Board .thumbImageWrapper::after {
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 50px;
left: 0;
position: absolute;
top: 0;
width: 50px; }
.Board .thumbImageWrapper img {
border-radius: 3px;
height: 50px;
width: 50px; }
.Board.selectable {
cursor: pointer; }
.Board.selectable:hover {
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3); }
.Board.selectable:active {
background-color: #f3f3f3;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.13); }
.Board.boardPinsGrid {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
background: #fff;
max-height: 552px;
max-width: 236px;
padding: 10px; }
.Board.boardPinsGrid .pinGridWrapper {
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
max-height: 459px;
position: relative;
top: -2px; }
.Board.boardPinsGrid .pinGridWrapper .Grid {
margin: 0;
width: 216px; }
.Board.boardPinsGrid .pinGridWrapper .Grid.loading {
height: 459px; }
.Board.boardPinsGrid .pinGridWrapper .item {
margin: 0 3px 3px 0;
opacity: 0.5; }
.Board.boardPinsGrid .pinGridWrapper .item:hover, .Board.boardPinsGrid .pinGridWrapper .item.activeItem {
opacity: 1; }
.Board.boardPinsGrid .pinGridWrapper .item:hover .hoverMask, .Board.boardPinsGrid .pinGridWrapper .item.activeItem .hoverMask {
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s; }
.Board.boardPinsGrid.short .pinGridWrapper {
max-height: 229.5px; }
.Board.boardPinsGrid.short .pinGridWrapper .Grid.loading {
height: 229.5px; }
.Board.boardPinsGrid .item {
width: 70px; }
.Board.boardPinsGrid .pinGridWrapper {
background: url(https://s.pinimg.com/webapp/style/images/boardPinsGridShadowBottom-a1fc902f.png) repeat-x left bottom; }
.Board.boardPinsGrid.error {
padding: 10px; }
.Board.boardPinsGrid.noShadow .boardHeader,
.Board.boardPinsGrid.noShadow .pinGridWrapper {
background: #fff; }
.Board.boardPinsGrid .boardHeader {
overflow: hidden;
background: url(https://s.pinimg.com/webapp/style/images/boardPinsGridShadowTop-048a8c89.png) repeat-x bottom left;
padding-bottom: 11px; }
.Board.boardPinsGrid .BoardIcons {
float: right;
padding: 4px 4px 0; }
.Board.follow_view {
font-size: 11px;
line-height: 1.2em;
padding: 5px 14px;
position: relative; }
.Board.follow_view::after {
clear: both;
content: "";
display: table; }
.Board.follow_view .boardFollowImg {
border-radius: 2px;
float: left;
height: 30px;
margin-right: 5px;
width: 30px; }
.Board.follow_view:hover {
background: #f3f3f3; }
.Board.follow_view:hover .dismiss {
width: 9px;
height: 10px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -235px -206px no-repeat;
cursor: pointer;
display: block;
margin-right: 14px;
position: absolute;
right: 0;
top: 40%; }
.SuggestedBoardsDropdown .Board.follow_view:hover .dismiss {
display: none; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Board.follow_view:hover .dismiss {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -418px -89px;
background-size: 428px 427px; } }
.Board.follow_view .BoardFollowButton {
color: #bd081c; }
.Board.follow_view .BoardFollowButton:hover {
text-decoration: underline; }
.Board.follow_view .BoardFollowButton.disabled {
color: #717171; }
.Board.follow_view .BoardFollowButton.disabled:hover {
cursor: default;
text-decoration: none; }
.Board.follow_view .followBoardName {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 75%; }
.Board.follow_view .followBoardName a {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #717171;
font-size: 11px;
font-weight: 700; }
.Board.follow_view .followConfirmation {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: #ffa;
bottom: 0;
display: none;
left: 0;
padding: 10px;
position: absolute;
right: 0;
top: 0; }
.Board.follow_view.followConfirmed .followConfirmation {
display: block; }
.Board.follow_view::before {
box-shadow: none; }
.Board .debugMacro {
padding: 2px; }
.Board.noButton {
padding-bottom: 6px; }
.Board.noContainer {
box-shadow: None; }
.Board.boardTileImages .tileImages {
border-radius: 6px;
height: 213px;
margin: 10px;
overflow: hidden; }
.Board.boardTileImages .tileImages img {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
display: inline-block;
height: 104px;
position: relative;
width: 104px; }
.Board.boardTileImages .tileImages img:nth-child(1) {
border-top-left-radius: 6px;
margin: 0 3px 5px 0; }
.Board.boardTileImages .tileImages img:nth-child(2) {
border-top-right-radius: 6px;
margin-bottom: 5px; }
.Board.boardTileImages .tileImages img:nth-child(3) {
border-bottom-left-radius: 6px;
margin-right: 3px; }
.Board.boardTileImages .tileImages img:nth-child(4) {
border-bottom-right-radius: 6px; }
.Board.brioView {
padding: 0 8px; }
.Board.brioView .tileImages {
height: 173px;
position: relative; }
.Board.brioView .tileImages:hover .hoverMask {
background: rgba(0, 0, 0, 0.15); }
.Board.brioView .tileImages:active .hoverMask {
background: rgba(0, 0, 0, 0.25); }
.Board.brioView .tileImages .hoverMask {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
border-radius: 8px; }
.Board.brioView img {
float: left;
height: 85px;
width: 85px; }
.Board.brioView img:nth-child(1) {
border-top-left-radius: 8px;
margin: 0 1px 1px 0; }
.Board.brioView img:nth-child(2) {
border-top-right-radius: 8px;
margin: 0 0 1px 1px; }
.Board.brioView img:nth-child(3) {
border-bottom-left-radius: 8px;
clear: left;
margin: 1px 1px 0 0; }
.Board.brioView img:nth-child(4) {
border-bottom-right-radius: 8px;
margin: 1px 0 0 1px; }
.Board.brioView .tileFooter {
margin-bottom: 8px; }
.Board.brioView .tileFollowButton {
margin-bottom: 32px; }
.Board.brioView .followMask {
background-color: rgba(0, 0, 0, 0.7);
border-radius: 8px;
display: none;
height: 100%;
position: absolute;
width: 100%; }
.Board.brioView .followMask .followMaskIcon {
width: 59px;
height: 42px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -215px 0 no-repeat;
display: inline-block;
margin-left: 57px;
margin-top: 65px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.Board.brioView .followMask .followMaskIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -128px -35px;
background-size: 249px 231px; } }
.Board.brioView .followMask.visible {
display: block; }
/* desktop.scss */
.item > .Board {
cursor: pointer;
margin: -10px;
padding: 10px; }
.item > .Board::before {
background: rgba(0, 0, 0, 0.05);
border-radius: 8px;
content: " " !important;
height: 100%;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
-webkit-transform: scale(0.96);
transform: scale(0.96);
width: 100%;
z-index: 3; }
.item > .Board:not(.boardWrapperDisableHover):hover::before {
-webkit-animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards;
animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; }
.Board.homefeedBuilderView {
margin-bottom: 16px;
margin-left: 0;
margin-right: 0;
padding-left: 7px;
padding-right: 7px; }
.Board.boardCoverImage,
.Board.exploreTabView {
border: none;
box-shadow: none;
width: 236px; }
.Board.exploreTabView {
width: 236px; }
.Board.exploreTabView .boardImagesWrapper {
margin: 0 auto; }
.Board.boardCoverImage .boardCoverWrapper,
.Board.exploreTabView .boardCoverWrapper {
background-color: #efefef;
border-radius: 8px 8px 0 0;
height: 111px;
width: auto; }
.Board.boardCoverImage .boardCoverWrapper::after,
.Board.exploreTabView .boardCoverWrapper::after {
background: rgba(0, 0, 0, 0.02);
border-radius: 8px 8px 0 0;
box-shadow: none;
height: 100%;
width: 100%; }
.Board.boardCoverImage .boardCoverWrapper .boardCover,
.Board.exploreTabView .boardCoverWrapper .boardCover {
border-radius: 8px 8px 0 0;
width: 236px; }
.Board.boardCoverImage .boardCoverWrapper .boardCover[src=""],
.Board.exploreTabView .boardCoverWrapper .boardCover[src=""] {
visibility: hidden; }
.Board.boardCoverImage .boardThumbs,
.Board.exploreTabView .boardThumbs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 111px;
margin-bottom: 0;
margin-top: 2px;
width: 236px; }
.Board.boardCoverImage .boardThumbs li,
.Board.exploreTabView .boardThumbs li {
background-color: #efefef;
height: 100%;
margin-left: 2px;
width: 100%; }
.Board.boardCoverImage .boardThumbs li::after,
.Board.exploreTabView .boardThumbs li::after {
background: rgba(0, 0, 0, 0.02);
box-shadow: none;
height: 100%;
width: 100%; }
.Board.boardCoverImage .boardThumbs li .thumb,
.Board.exploreTabView .boardThumbs li .thumb {
border-radius: 0;
height: 100%;
width: 100%; }
.Board.boardCoverImage .boardThumbs li:first-child,
.Board.exploreTabView .boardThumbs li:first-child,
.Board.boardCoverImage .boardThumbs li:first-child::after,
.Board.exploreTabView .boardThumbs li:first-child::after {
border-bottom-left-radius: 8px;
margin-left: 0; }
.Board.boardCoverImage .boardThumbs li:first-child .thumb,
.Board.exploreTabView .boardThumbs li:first-child .thumb {
border-bottom-left-radius: 8px; }
.Board.boardCoverImage .boardThumbs li:nth-child(2),
.Board.exploreTabView .boardThumbs li:nth-child(2),
.Board.boardCoverImage .boardThumbs li:nth-child(2)::after,
.Board.exploreTabView .boardThumbs li:nth-child(2)::after {
border-bottom-right-radius: 8px; }
.Board.boardCoverImage .boardThumbs li:nth-child(2) .thumb,
.Board.exploreTabView .boardThumbs li:nth-child(2) .thumb {
border-bottom-right-radius: 8px; }
.Board.boardCoverImage .boardThumbs li:nth-child(3),
.Board.exploreTabView .boardThumbs li:nth-child(3) {
display: none; }
.Board.boardCoverImage .boardThumbs li::after,
.Board.exploreTabView.boardThumbs li::after {
box-shadow: none; }
.Board.boardCoverImage .boardLinkWrapper,
.Board.exploreTabView .boardLinkWrapper {
/* Setting this to flex allows us to re-order the items */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: 0;
padding: 0; }
.Board.boardCoverImage .Button,
.Board.exploreTabView .Button {
margin: 0;
width: 236px; }
.Board .boardName {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999; }
.Board .boardName .name {
-ms-flex-preferred-size: 70%;
flex-basis: 70%;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */ }
.Board .boardName .boardPinCount {
background-color: transparent;
box-shadow: none;
color: #b5b5b5;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
font-weight: normal;
left: 0;
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999;
padding: 0;
position: relative;
text-shadow: none;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.Board .boardName .boardPinCount .PinCount {
/* stylelint-disable-next-line at-rule-no-unknown */ }
.Board .boardName .boardPinCount .PinCount .value {
font-weight: bold; }
.Board .boardName > .secretIcon {
-ms-flex-preferred-size: auto;
flex-basis: auto;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.Board .boardName .BoardIcons.pinCreate {
-ms-flex-preferred-size: auto;
flex-basis: auto;
margin-left: auto;
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3; }
.Board .boardName .BoardIcons.pinCreate .secretIcon {
display: none; }
.Board .boardName .User.boardRepTitle.hasText.thumb,
.Board .boardName .User.exploreTabTitle.hasText.thumb {
-ms-flex-preferred-size: 176px;
flex-basis: 176px;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.Board .hoverMask {
display: none; }
.Board .boardName.hasBoardContext {
overflow: visible;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.Board .boardName.hasBoardContext .User.boardRepTitle, .Board .boardName.hasBoardContext .User.exploreTabTitle {
overflow: visible; }
.Board .boardName.hasBoardContext .User.boardRepTitle .thumbImageWrapper, .Board .boardName.hasBoardContext .User.exploreTabTitle .thumbImageWrapper {
height: 60px;
left: 8px;
position: absolute;
width: 60px;
z-index: 3; }
.Board .boardName.hasBoardContext .User.boardRepTitle .thumbImageWrapper img, .Board .boardName.hasBoardContext .User.exploreTabTitle .thumbImageWrapper img {
border: 2px solid #fff;
height: 100%;
width: 100%; }
.Board .boardName.hasBoardContext .User.boardRepTitle .title, .Board .boardName.hasBoardContext .User.exploreTabTitle .title {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* stylelint-disable-next-line at-rule-no-unknown */
color: #555; }
.Board .boardName.hasBoardContext .User.boardRepTitle .fullname, .Board .boardName.hasBoardContext .User.exploreTabTitle .fullname {
color: #555;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.Board .boardName.hasBoardContext .User.boardRepTitle > *, .Board .boardName.hasBoardContext .User.exploreTabTitle > * {
max-width: 200px; }
.Board .boardName.hasBoardContext .boardPinCount, .Board .boardName.hasBoardContext .BoardIcons.pinCreate {
display: none; }
@media (min-width: 360px) {
.Board .boardName.hasBoardContext .User.boardRepTitle .thumbImageWrapper, .Board .boardName.hasBoardContext .User.exploreTabTitle .thumbImageWrapper {
bottom: 45px; } }
@media (min-width: 800px) {
.Board .boardName.hasBoardContext .User.boardRepTitle .thumbImageWrapper, .Board .boardName.hasBoardContext .User.exploreTabTitle .thumbImageWrapper {
bottom: 55px; } }
.BoardCoverEdit {
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.BoardCoverEdit .next, .BoardCoverEdit .previous {
border: 0;
display: block;
height: 46px;
position: absolute;
top: 120px;
width: 46px; }
.BoardCoverEdit .previous {
left: 100px; }
.BoardCoverEdit .next {
right: 100px; }
.BoardCoverEditPage {
width: 708px; }
.BoardCoverEditPage .boardCoverEditPageContainer {
width: 708px; }
.BoardCoverEditPage .standardForm h1 {
font-weight: normal; }
.BoardCreate {
width: 600px; }
.BoardCreate .createTitle {
font-weight: bold; }
.BoardCycler .boardName {
color: #333;
margin: 0 18px 6px; }
.BoardCycler:hover .navigation {
opacity: .5; }
.BoardEdit {
max-width: 600px;
width: 100%; }
.BoardEdit .BoardInvite .User {
overflow: hidden; }
.BoardEdit .BoardInvite .Button {
float: right;
margin-left: 10px;
margin-top: 3px; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.BoardEditBase .User {
padding: 4px 0;
width: auto; }
.BoardEditBase .boardEditCollaborators {
-webkit-overflow-scrolling: touch;
overflow-y: auto;
margin-right: -11px;
max-height: 160px; }
.BoardEditBase .boardEditCollaborators::-webkit-scrollbar {
height: auto;
width: 11px;
-webkit-appearance: none; }
.BoardEditBase .boardEditCollaborators::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5);
border: 2px solid #fff;
border-radius: 8px;
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); }
.BoardEditBase .boardEditCollaborators .subtitle {
white-space: normal !important; }
.BoardEditBase.multiSelect .boardEditCollaborators {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: 0;
max-height: 208px; }
.BoardEditBase .boardEditDescription {
min-height: 58px; }
.BoardEditBase .boardCollaboratorsWrapper {
overflow: visible; }
.BoardEditBase .learnAboutSecret {
float: right;
margin-top: 7px; }
.BoardEditBase .standardForm h1 {
font-weight: normal;
position: relative; }
.BoardEditBase .alert {
background-color: #ffa;
font-size: 120%;
margin: 7px 0;
padding: 15px; }
.BoardEditBase a.learnAboutBoardInvites {
display: block;
float: none;
margin: 3px 0; }
.BoardEditBase a.learnAboutBoardInvites:focus {
outline: none; }
.BoardEditBase .userSelect.Typeahead {
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
margin: 0 0 3px 2px; }
.BoardEditBase .userSelect.Typeahead li:first-child {
padding-top: 4px; }
.BoardEditBase .userSelect.Typeahead li:last-child {
padding-bottom: 4px; }
.BoardEditBase .userSelect.TypeaheadField input {
width: 100%; }
.BoardEditBase.simple .descriptionWrapper,
.BoardEditBase.simple .categoryWrapper,
.BoardEditBase.simple .mapToggleWrapper {
display: none; }
/* desktop.scss */
.BoardEditBase .standardForm h1 {
padding-right: 42px; }
.BoardEditBase .learnMore {
max-width: 331px; }
.BoardFollowers.inline {
display: inline-block;
vertical-align: top; }
.BoardFollowers.large {
width: 435px; }
.BoardFollowers.large .User {
margin: 4px 0;
padding: 4px 20px;
width: 395px; }
.BoardFollowers.large .PagedGrid {
-webkit-overflow-scrolling: touch;
overflow: auto;
max-height: 570px; }
@media (min-height: 1110px) {
.BoardFollowers.large .PagedGrid {
max-height: 720px; } }
.BoardFollowers.large .moreItems {
margin: 0 auto 13px auto;
width: 200px; }
.BoardFollowers.edit .remove {
float: right; }
.BoardFollowers.edit .User {
padding: 10px; }
.BoardFollowers .headerText {
color: #6e6e6e;
font-size: 12px;
font-weight: bold; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.BoardHeader {
background-color: #fff;
padding-bottom: 64px;
position: relative;
-webkit-transition: opacity 1s ease;
transition: opacity 1s ease;
width: auto; }
.BoardHeader h1 {
color: #333;
color: rgba(21, 21, 21, 0.8);
font-size: 47px;
font-weight: bold;
line-height: 52px;
margin-left: auto;
margin-right: auto;
max-width: 736px;
text-align: center;
word-wrap: break-word;
margin: 34px auto 0; }
.ja .BoardHeader h1 {
font-size: 36px; }
.BoardHeader .boardName {
margin-top: 0;
padding-top: 34px; }
.BoardHeader .divider {
margin-top: 31px; }
.BoardHeader .divider hr {
background: #eee;
border: 0;
height: 1px;
margin: 0;
width: 100%; }
.ja .BoardHeader .description {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.BoardHeader .pinsAndFollowerCount {
font-size: 0; }
.BoardHeader .pinsAndFollowerCount .dot {
color: #6e6e6e;
font-size: 12px;
font-weight: bold;
height: 100%;
margin: 0 7px;
vertical-align: bottom; }
.BoardHeader .pinsAndFollowerCount .followerCount {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #777;
font-weight: bold; }
.BoardHeader .pinsAndFollowerCount .followerCount:hover {
color: #444; }
.BoardHeader .pinsAndFollowerCount .pinCount {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #777;
display: inline-block;
font-size: 12px;
font-weight: bold;
vertical-align: bottom; }
.BoardHeader .pinsAndFollowerCount .buttonText {
font-size: 12px;
padding: 0; }
.BoardHeader .secret {
color: #999;
font-size: 11px;
font-weight: 700;
line-height: 19px;
margin: 16px 0 21px;
padding: 0;
position: relative;
text-align: center; }
.BoardHeader .secretIcon {
width: 9px;
height: 10px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -317px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
margin: -2px 2px 0 0;
position: static;
vertical-align: middle; }
.BoardHeader .annotations {
font-size: 14px;
line-height: 150%;
margin: 10px auto 20px;
text-align: center; }
.BoardHeader .annotations .annotationHeader {
display: inline;
font-weight: bold;
margin: 2px 5px; }
.BoardHeader .annotations .annotationText {
background-color: rgba(255, 255, 255, 0.68);
border-radius: 2px;
color: #777;
display: inline;
font-weight: normal;
margin: 2px 2px 20px;
padding: 3px 6px; }
.BoardHeader .annotations a {
font-weight: normal; }
.BoardHeader .collaboratorInfo {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.BoardHeader .boardHeaderWrapper {
position: relative; }
.BoardHeader .boardCollaboratorsContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.BoardHeader.invisible {
opacity: 0; }
.BoardHeader.unauthBrio {
margin-bottom: 16px;
padding-bottom: 32px;
text-align: left;
text-align: initial; }
.BoardHeader.unauthBrio .centeredWithinWrapper {
position: relative; }
.BoardHeader.unauthBrio .boardTitle, .BoardHeader.unauthBrio .boardStats, .BoardHeader.unauthBrio .boardDescription {
margin-left: 7px; }
.BoardHeader.unauthBrio .boardTitle {
color: #555;
font-size: 48px;
font-weight: bold;
line-height: 58px;
margin: 0;
padding-top: 20px;
text-align: left;
text-align: initial; }
.BoardHeader.unauthBrio .boardStats {
color: #555;
font-size: 14px;
margin-bottom: 20px;
margin-top: 9px; }
.BoardHeader.unauthBrio .boardStats .bold {
font-weight: bold; }
.BoardHeader.unauthBrio .boardDescription {
color: #555;
font-size: 18px;
font-weight: bold;
line-height: 16px;
margin-top: 11px;
max-width: 618px; }
.BoardHeader.unauthBrio .pinCount, .BoardHeader.unauthBrio .followerCount {
display: inline-block; }
.BoardHeader.unauthBrio .followerCount {
margin-left: 32px; }
.BoardHeader.unauthBrio .RelatedInterestsSection {
margin-top: 56px; }
.BoardHeader.unauthBrio .BoardFollowButton {
height: 36px;
margin-right: 7px;
position: absolute;
right: 0;
top: 102px; }
.BoardHeader.showOpenNav {
padding-bottom: 5px; }
.BoardHeader.showOpenNav .centeredWithinWrapper {
width: inherit; }
.BoardHeader.showOpenNav .openNavSubtitle {
color: #555;
font-size: 14px;
padding-left: 8px; }
.BoardHeader.showOpenNav .boardTitle {
padding: 32px 5px; }
.BoardHeader.showOpenNav .RelatedInterestsSection {
margin-top: 16px; }
/* desktop.scss */
.BoardHeader {
padding-bottom: 0;
text-align: left; }
.BoardHeader .boardHeaderWrapper {
box-sizing: border-box;
margin-top: 76px;
max-width: 744px;
width: auto;
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */ }
.BoardHeader .boardName {
color: #555;
margin-left: 0;
margin-right: 0;
max-width: auto;
padding-left: 0;
padding-right: 0;
padding-top: 0;
text-align: left;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */ }
.BoardHeader .description {
color: #555;
margin-bottom: 0;
text-align: left;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */ }
.BoardHeader .divider {
display: none; }
.BoardHeader .Button.followerCount .buttonText {
color: #555; }
.BoardHeader .Button.followerCount .buttonText .value,
.BoardHeader .bold-value .value {
font-weight: bold; }
.BoardHeader .secret {
display: none; }
.BoardHeader .secretIcon {
margin-right: auto;
padding: 0;
width: 60px;
height: 60px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) 0 -172px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.BoardHeader .secretIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: 0 -170px;
background-size: 399px 382px; } }
.BoardHeader .thumbImageWrapper,
.BoardHeader .thumbImageWrapper::after,
.BoardHeader .thumbImageWrapper img {
height: 60px !important;
width: 60px !important; }
.BoardHeader .belowBoardNameContainer {
overflow: hidden; }
.BoardHeader .belowBoardNameContainer .followerCount,
.BoardHeader .belowBoardNameContainer .pinCount {
color: #555;
margin-bottom: 0;
margin-top: 0;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.BoardHeader .belowBoardContainerSecret {
padding-left: 0;
padding-right: 0;
width: 66.66667%; }
.BoardHeader .belowBoardContainerLeft {
float: left;
padding-left: 0;
padding-right: 0;
width: 50%; }
.BoardHeader .bottomBoardRightContainer {
float: right;
width: 50%; }
.BoardHeader .bottomBoardRightContainer,
.BoardHeader .bottomBoardRightContainerSecret {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: right; }
.BoardIcons {
display: inline-block; }
.BoardIcons .secretIcon,
.BoardIcons .collaborativeIcon {
display: inline-block;
margin-right: 1px; }
.BoardIcons .secretIcon {
width: 9px;
height: 10px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -317px no-repeat;
margin-top: -1px; }
.BoardIcons .collaborativeIcon {
width: 18px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -347px -325px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.BoardIcons .collaborativeIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -264px -320px;
background-size: 399px 382px; } }
.BoardIcons.pinCreate {
height: 16px; }
.BoardIcons.pinCreate .secretIcon,
.BoardIcons.pinCreate .collaborativeIcon {
margin-right: 2px; }
.BoardIcons.pinCreate span:last-child {
margin-right: 0; }
.BoardIcons.pinCreate .secretIcon {
width: 16px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -282px -210px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.BoardIcons.pinCreate .secretIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -370px -342px;
background-size: 399px 382px; } }
.BoardIcons.pinCreate .collaborativeIcon {
width: 16px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -345px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.BoardIcons.pinCreate .collaborativeIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -370px -240px;
background-size: 399px 382px; } }
.BoardIcons.light .secretIcon {
width: 9px;
height: 10px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -329px no-repeat; }
.BoardIcons.light .collaborativeIcon {
width: 18px;
height: 10px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -363px no-repeat; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.BoardInfoBar {
background-color: #fff;
bottom: 0;
height: 64px;
overflow: hidden;
text-align: center;
width: 100%;
z-index: 103; }
.BoardInfoBar.boardHeaderBackground {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(0, 0, 0, 0.1); }
.BoardInfoBar .infoBarWrapper {
position: relative; }
.BoardInfoBar li {
border-left: 1px solid #cdcdcd;
float: left; }
.BoardInfoBar .boardDirectButton,
.BoardInfoBar .boardAddCollaboratorButton,
.BoardInfoBar .movePinsButton {
margin-right: 5px;
position: relative;
z-index: 1; }
.BoardInfoBar .collaborators {
color: #444;
float: left;
font-weight: normal; }
.BoardInfoBar .collaborators .User {
float: left;
margin-left: 3px;
margin-right: 2px;
margin-top: 1px; }
.BoardInfoBar .collaborators.showName .User {
display: block;
margin: 0 15px 0 0;
position: relative;
text-align: left; }
.BoardInfoBar .collaborators .BoardCollaborators {
padding: 0; }
.BoardInfoBar .collaboratorInfo {
float: left; }
.BoardInfoBar .boardButtons {
float: right;
line-height: 0;
margin: 16px 0 0;
margin-right: 16px; }
.BoardInfoBar .boardButtons > * {
height: 31px; }
.BoardInfoBar .boardButtons .facebookShare {
margin-left: 4px;
margin-right: 0; }
.BoardInfoBar .boardButtons .userProfileMenu {
border-radius: 3px;
height: 32px;
left: 4px;
position: relative; }
.BoardInfoBar .smallBoardName {
color: #333;
color: rgba(21, 21, 21, 0.8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 26px;
left: 50%;
margin-left: -175px;
opacity: 0;
position: absolute;
top: -50px;
width: 350px; }
@media (min-width: 0px) and (max-width: 999px) {
.BoardInfoBar .smallBoardName {
font-size: 22px;
margin-left: -150px;
margin-top: 2px;
width: 300px; } }
.BoardInfoBar .smallBoardName.transitionIn {
opacity: 1;
-webkit-transform: translate(0, 66px);
transform: translate(0, 66px);
-webkit-transition: 300ms ease-out;
transition: 300ms ease-out; }
.BoardInfoBar .smallBoardName.transitionOut {
opacity: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: 300ms ease-out;
transition: 300ms ease-out; }
.BoardInfoBar .pinsAndFollowerCount {
margin: 0 auto;
position: relative;
top: 16px;
width: 154px; }
.BoardInfoBar .pinsAndFollowerCount.withDoneFilter {
width: 231px; }
.BoardInfoBar .pinsAndFollowerCount.withDoneFilter .active .label,
.BoardInfoBar .pinsAndFollowerCount.withDoneFilter .active .value {
color: #bd081c; }
.BoardInfoBar .pinsAndFollowerCount.withDoneFilter.hideFollowCount {
width: 154px; }
.BoardInfoBar .pinsAndFollowerCount.hideFollowCount {
width: 77px; }
@media (min-width: 0px) and (max-width: 999px) {
.BoardInfoBar .pinsAndFollowerCount.hideFollowCount {
width: 65px; } }
.BoardInfoBar .pinsAndFollowerCount li {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #fff;
border: 0;
float: left;
line-height: 14px;
margin-right: -1px;
text-align: center;
width: 77px; }
@media (min-width: 0px) and (max-width: 999px) {
.BoardInfoBar .pinsAndFollowerCount li {
width: 65px; } }
.BoardInfoBar .pinsAndFollowerCount li span:last-child {
display: inline; }
.BoardInfoBar .pinsAndFollowerCount .value {
color: #aaa;
display: block;
font-size: 16px;
font-weight: bold;
padding-bottom: 3px; }
.BoardInfoBar .pinsAndFollowerCount .value:hover, .BoardInfoBar .pinsAndFollowerCount .value.active {
background: none;
box-shadow: 0; }
.BoardInfoBar .pinsAndFollowerCount .label {
color: #9a9a9a;
display: block;
font-size: 11px;
font-weight: normal; }
.BoardInfoBar .pinsAndFollowerCount .label:hover, .BoardInfoBar .pinsAndFollowerCount .label.active {
background: none;
box-shadow: 0; }
@media (min-width: 0px) and (max-width: 999px) {
.BoardInfoBar .pinsAndFollowerCount .label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 65px; } }
.BoardInfoBar.fixedHeader {
position: fixed;
top: 54px;
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 103; }
.hasKLPBar .BoardInfoBar.fixedHeader {
top: 98px; }
.hasColorfulKLPBar .BoardInfoBar.fixedHeader {
top: 134px; }
.BoardInfoBar.fixedHeader .boardAddCollaboratorsButton,
.BoardInfoBar.fixedHeader .boardSettingsButton,
.BoardInfoBar.fixedHeader .collaborators.showName .User {
z-index: 1; }
.BoardInfoBar .boardFollowButtonWrapper {
float: right; }
/* desktop.scss */
.BoardInfoBar {
background-color: rgba(255, 255, 255, 0.95);
bottom: auto;
height: auto;
position: fixed;
top: 58px; }
@media (min-width: 800px) {
.BoardInfoBar {
top: 64px; } }
.BoardInfoBar .BoardCollaborators {
float: left; }
.BoardInfoBar .boardButtons {
margin-top: 0; }
.BoardInfoBar .boardButtons > * {
height: auto;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.BoardInfoBar .boardButtons .facebookShare {
margin-left: 0; }
.BoardInfoBar .infoBarWrapper {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-align: left;
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */ }
.BoardInfoBar .infoBarWrapper .infoBarWrapperAuto {
/* Fix for Chrome 44 bug: https://code.google.com/p/chromium/issues/detail?id=506893 */
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-height: 0;
/* 1 */
min-width: 0;
/* 1 */ }
.BoardInfoBar .infoBarWrapper.centeredWithinWrapper.gridWidth {
max-width: 744px;
width: auto; }
.BoardInfoBar .pinsAndFollowerCount {
top: auto; }
.BoardInfoBar .pinsAndFollowerCount .value {
color: #555;
display: inline;
padding-bottom: 0;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.BoardInfoBar .pinsAndFollowerCount .value::after {
content: " "; }
.BoardInfoBar .pinsAndFollowerCount .label {
/* stylelint-disable-next-line at-rule-no-unknown */
color: #555; }
.BoardInfoBar .pinsAndFollowerCount .Button.followerCount {
display: none; }
.BoardInfoBar .pinsAndFollowerCount > ul > li {
margin-right: 0;
width: auto;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.BoardInfoBar .smallBoardName {
/* stylelint-disable-next-line at-rule-no-unknown */
margin-top: 8px;
text-align: center; }
.BoardInfoBar.boardHeaderBackground {
box-shadow: none; }
.BoardInfoBar.placeBoard {
border-radius: 0 0 6px 6px; }
.BoardInfoBar.placeBoard .boardButtons {
margin-right: 14px; }
.BoardInfoBar.placeBoard .collaborators {
margin-left: 14px; }
.BoardInfoBar.placeBoard.collapsed {
border-radius: 0;
visibility: visible; }
.BoardInfoBar.placeBoard.collapsed .boardButtons {
margin-right: 0; }
.BoardInfoBar.placeBoard.collapsed .collaborators {
margin-left: 0; }
.BoardLabel {
text-align: left;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.BoardLabel .nameAndIcons {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.BoardLabel .nameAndIcons .name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
max-width: 80%;
width: auto; }
.BoardLabel .BoardIcons {
float: right;
max-width: 20%; }
.BoardLabel .highlightMatchText {
border-bottom: 1px solid #333;
font-style: normal;
padding-bottom: 1px; }
.BoardLabel.normal {
font-size: 16px;
line-height: 36px; }
.BoardLabel.normal .boardImg {
border-radius: 3px;
float: left;
height: 36px;
margin-right: 10px;
vertical-align: middle;
width: 36px; }
.BoardLabel.normal .boardImg:not(.emptyBoardImg) {
background-position: 50% 50%;
background-size: cover; }
.BoardLabel.pinCreate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 16px;
line-height: 36px; }
.BoardLabel.pinCreate .boardImg {
border-radius: 3px;
float: left;
height: 36px;
margin-right: 10px;
vertical-align: middle;
width: 36px; }
.BoardLabel.pinCreate .boardImg:not(.emptyBoardImg) {
background-position: 50% 50%;
background-size: cover; }
.BoardLabel.pinCreate .repinBtn {
display: none;
float: right;
margin-left: 7px;
margin-top: 1px;
position: relative;
z-index: 1; }
.BoardLabel.pinCreate .repinBtn.isBrioFlat {
margin-top: 0; }
.BoardLabel.pinCreate .boardImg {
box-shadow: 0 0 1px rgba(0, 0, 0, 0.25) inset; }
.BoardLabel .emptyBoardImg {
width: 34px;
height: 34px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -155px -97px no-repeat;
box-shadow: none; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.BoardLabel .emptyBoardImg {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: 0 -139px;
background-size: 249px 231px; } }
.BoardLabel.compact {
font-size: 13px; }
.BoardLabel.compact .boardImg {
display: none; }
.BoardPage {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
z-index: 0; }
.BoardPage .boardNoContent {
color: #333;
text-align: center;
margin-top: 99px; }
.BoardPage .boardNoContent p {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 17px;
margin: 0 0 1em; }
.BoardPage .relatedBoardsContainerTitle {
font-size: 18px;
margin-top: 28px;
margin-left: 28px; }
.BoardPage .headerSizer {
max-width: 1236px; }
.BoardPage.showOpenNav {
background-color: #fff; }
.BoardPage.showOpenNav .boardPageContent {
background-color: #fff;
margin-left: 246px;
min-height: 100vh; }
@media (min-width: 0px) and (max-width: 999px) {
.BoardPage.showOpenNav .boardPageContent {
margin-left: 0; } }
.BoardPage.showOpenNav .boardPageContent .centeredWithinWrapper {
width: inherit; }
.BoardPage .boardPageContentWrapper {
-webkit-transition: width 0.3s ease-out;
transition: width 0.3s ease-out;
width: 100vw; }
.boardSearchPinDivider {
margin-bottom: 30px;
margin-top: 40px;
position: relative;
z-index: -2; }
hr {
border: solid rgba(0, 0, 0, 0.1);
border-width: 1px 0 0;
color: #eee;
display: inline-block;
width: 100%; }
.pinterestIconWrapper {
background-color: #e9e9e9;
display: inline-block;
left: 50%;
margin-left: -24.5px;
padding: 20px 10px;
position: absolute;
text-align: center;
top: -26.5px;
width: 29px; }
.pinterestIconWrapper .pinterestIcon {
width: 29px;
height: 31px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -339px -163px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.pinterestIconWrapper .pinterestIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -334px -160px;
background-size: 399px 382px; } }
.searchPinLabel {
color: #555;
font-size: x-large;
font-weight: bold;
margin-bottom: 10px; }
.BoardCollaboratorInviter .panelHeading {
border-bottom: 1px solid #dfdfdf;
padding: 18px; }
.BoardCollaboratorInviter .panelHeading .panelTitle {
margin: 0; }
.BoardCollaboratorInviter .leftPanel,
.BoardCollaboratorInviter .rightPanel {
height: 375px;
overflow: auto; }
.BoardCollaboratorInviter .leftPanel {
border-right: 1px solid #dfdfdf;
float: left;
overflow: hidden;
width: 300px; }
.BoardCollaboratorInviter .leftPanel .BoardInviteForm,
.BoardCollaboratorInviter .leftPanel .boardCollaboratorInviteWrapper {
position: relative; }
.BoardCollaboratorInviter .leftPanel .BoardInviteForm .inviteButton,
.BoardCollaboratorInviter .leftPanel .boardCollaboratorInviteWrapper .inviteButton {
border-radius: 0;
border-right: 0;
border-top: 0;
height: 47px;
position: absolute;
right: 0;
top: 0;
z-index: 106; }
.BoardCollaboratorInviter .leftPanel .BoardInviteForm .fillWidth,
.BoardCollaboratorInviter .leftPanel .boardCollaboratorInviteWrapper .fillWidth {
margin-right: 0; }
.BoardCollaboratorInviter .leftPanel .BoardInviteForm .TypeaheadField .Input,
.BoardCollaboratorInviter .leftPanel .boardCollaboratorInviteWrapper .TypeaheadField .Input {
background-color: #f8f8f8;
border-bottom: 1px solid #ccc;
border-left: 0;
border-radius: 0;
border-top: 0;
box-shadow: none;
padding: 15px 18px; }
.BoardCollaboratorInviter .leftPanel .BoardInviteForm .TypeaheadField .Typeahead,
.BoardCollaboratorInviter .leftPanel .boardCollaboratorInviteWrapper .TypeaheadField .Typeahead {
border-radius: 0;
box-shadow: none;
height: 328px;
overflow-y: auto; }
.BoardCollaboratorInviter .leftPanel .alert {
background-color: #ffa;
font-size: 120%;
margin: 7px 0;
padding: 15px; }
.BoardCollaboratorInviter .leftPanel .ContactsList {
height: 328px;
overflow: auto; }
.BoardCollaboratorInviter .rightPanel {
float: right;
margin: 0 0 0 16px;
width: 284px; }
.BoardCollaboratorInviter .rightPanel .subheading {
margin: 14px 0; }
.BoardCollaboratorInviter .rightPanel .boardEditCollaborators > .User {
overflow: hidden; }
.BoardCollaboratorInviter .rightPanel .boardEditCollaborators .BoardInvites .GridItems.fixedHeightLayout > .item {
float: none; }
.BoardCollaboratorInviter .rightPanel .boardEditCollaborators .Button {
float: right;
margin-right: 10px;
margin-top: 9px;
z-index: 3; }
.BoardCollaboratorInviter .rightPanel .boardEditCollaborators .User {
overflow: hidden;
margin: 7px 0; }
.BoardCollaboratorInviter .rightPanel .boardEditCollaborators .User .thumbImageWrapper {
height: 36px;
width: 36px; }
.BoardCollaboratorInviter .rightPanel .boardEditCollaborators .User .thumbImageWrapper img, .BoardCollaboratorInviter .rightPanel .boardEditCollaborators .User .thumbImageWrapper::after {
height: 36px;
width: 36px; }
.BoardCollaboratorInviter .rightPanel .boardEditCollaborators .User .fullname {
font-size: 14px;
line-height: 17px;
margin-top: 2px; }
.BoardCollaboratorInviter .rightPanel .boardEditCollaborators .User .subtitle {
font-size: 13px;
font-weight: normal;
margin: 0; }
.BoardCollaboratorInviter.inModal {
width: 601px; }
.BoardCollaboratorInviter.inModal .panelBody {
padding: 0; }
.BoardCollaboratorInviter .formFooterButtons {
float: right; }
.BoardCollaborators.inline {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important; }
.BoardCollaborators .BoardInviteForm {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.BoardCollaborators .TypeaheadField.userSelect {
position: relative;
width: 100%; }
.BoardCollaborators .TypeaheadField.userSelect input {
width: 100%; }
.BoardCollaborators .TypeaheadField.userSelect .Typeahead {
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
margin: 0 0 3px 2px;
padding-top: 0; }
.BoardCollaborators .TypeaheadField.userSelect .Typeahead li:first-child {
padding-top: 4px; }
.BoardCollaborators .TypeaheadField.userSelect .Typeahead li:last-child {
padding-bottom: 4px; }
.BoardCollaborators.inline {
display: inline-block;
vertical-align: top; }
.BoardCollaborators.large {
width: 435px; }
.BoardCollaborators.large .User {
margin: 4px 0;
padding: 4px 20px;
width: 395px; }
.BoardCollaborators.large .PagedGrid {
-webkit-overflow-scrolling: touch;
overflow: auto;
max-height: 400px; }
@media (min-height: 1110px) {
.BoardCollaborators.large .PagedGrid {
max-height: 720px; } }
.BoardCollaborators.large .moreItems {
margin: 0 auto 13px auto;
width: 200px; }
.BoardCollaborators.edit .remove {
float: right; }
.BoardCollaborators.edit .User {
padding: 10px; }
.BoardCollaborators.large .boardCollaboratorsList {
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
max-height: 400px; }
.BoardCollaborators.large .boardCollaboratorsList::-webkit-scrollbar {
height: auto;
width: 11px;
-webkit-appearance: none; }
.BoardCollaborators.large .boardCollaboratorsList::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5);
border: 2px solid #fff;
border-radius: 8px;
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); }
.BoardCollaborators.large .boardCollaboratorsList .PagedGrid {
overflow: visible; }
.BoardCollaborators.large .boardCollaboratorsList .User .subtitle {
margin-top: 0; }
.BoardCollaborators.tiny {
text-align: left; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.BoardContactRequest {
overflow: hidden;
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
margin-bottom: 8px;
position: relative; }
.BoardContactRequest .boardInviteContent img {
border-radius: 50%;
margin-right: 8px;
width: 30px; }
.BoardContactRequest .pending,
.BoardContactRequest .success {
color: #717171;
font-size: 15px;
padding: 1em; }
.BoardContactRequest .pending {
overflow: hidden;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
.BoardContactRequest .pending .left {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
.BoardContactRequest .success {
display: none; }
.BoardContactRequest.accepted {
-webkit-animation: fadeOutAndHide 3s ease-in-out forwards;
animation: fadeOutAndHide 3s ease-in-out forwards; }
.BoardContactRequest.accepted .pending {
display: none; }
.BoardContactRequest.accepted .success {
-webkit-animation: fadein .5s ease-in forwards;
animation: fadein .5s ease-in forwards;
display: block; }
/* desktop.scss */
.BoardContactRequest {
margin-top: 14px; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.BoardInvite {
overflow: hidden;
position: relative; }
.BoardInvite:hover {
background: #f1f1f1; }
.BoardInvite .secretIconInline {
width: 9px;
height: 10px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -315px -20px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
vertical-align: middle; }
.BoardInvite.boardCreate .User {
width: auto; }
.BoardInvite .pending,
.BoardInvite .success {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-right: calc(50% - 125px); }
.BoardInvite .pending .leftObjectWrapper,
.BoardInvite .success .leftObjectWrapper {
display: inline-block; }
.BoardInvite .pending .left,
.BoardInvite .success .left {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding: 10px 0; }
.BoardInvite.news {
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
padding-right: 1px;
padding-top: 10px; }
.BoardInvite.news .boardRepWrapper {
padding: 0 10px; }
.BoardInvite.news .inviterLine {
color: #b5b5b5; }
.BoardInvite.news .flagConvoWrapper {
display: none;
position: absolute;
right: 10px; }
.BoardInvite.news:hover .flagConvoWrapper {
display: block; }
.BoardInvite.news .User {
margin: 0 10px;
width: 50px; }
.BoardInvite.news .description {
overflow: hidden;
font-size: 12px;
line-height: 15px;
margin: 0 0 7px;
max-width: calc(50% + 55px); }
.BoardInvite.news .description a {
color: #000;
font-style: normal;
font-weight: bold; }
.BoardInvite.news .description a:hover {
color: #bd081c; }
.BoardInvite.news .actions {
margin-left: 70px; }
.BoardInvite.news .pending {
-webkit-box-align: start;
-ms-flex-align: start;
-ms-grid-row-align: flex-start;
align-items: flex-start;
color: #333;
font-size: 11px;
font-weight: normal; }
.BoardInvite.news .pending .left {
-webkit-box-align: start;
-ms-flex-align: start;
-ms-grid-row-align: flex-start;
align-items: flex-start; }
.BoardInvite.news .success {
display: none; }
.BoardInvite.news .displayed {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.BoardInvite.news .accept,
.BoardInvite.news .remove {
font-size: 12px; }
.BoardInvite.news .accept {
margin-left: 2px; }
.BoardInvite.boardDetail {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px; }
.BoardInvite.boardDetail .boardInviteContent img {
border-radius: 50%;
margin-right: 8px;
width: 30px; }
.BoardInvite.boardDetail .pending,
.BoardInvite.boardDetail .success {
color: #717171;
font-size: 15px;
padding: 1em; }
.BoardInvite.boardDetail .pending {
overflow: hidden; }
.BoardInvite.boardDetail .success {
display: none; }
/* desktop.scss */
.BoardInvite {
position: relative;
z-index: 2; }
.BoardInvite.boardDetail {
background: #88a5ab;
border-radius: 8px;
box-shadow: none;
margin: 16px 0;
margin-top: 14px;
width: inherit; }
.BoardInvite.boardDetail .pending {
margin-right: 0; }
.BoardInvite.boardDetail .boardInviteContent,
.BoardInvite.boardDetail a {
color: #fff; }
.BoardInvite.news {
border-bottom: 0; }
.BoardInvite.news .actions {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%; }
.BoardInvite.news .boardName {
/* stylelint-disable-next-line at-rule-no-unknown */
color: #555; }
.BoardInvite.news .boardName:hover, .BoardInvite.news .boardName:focus {
color: #555; }
.BoardInvite.news:hover {
background: #fff; }
.BoardInvite .invitee {
height: 30px;
line-height: 30px;
padding: 4px 0; }
.BoardInvite .invitee .thumbImageWrapper {
position: relative;
float: left;
height: 30px;
margin-right: 7px;
width: 30px; }
.BoardInvite .invitee .thumbImageWrapper::after {
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 30px;
left: 0;
position: absolute;
top: 0;
width: 30px; }
.BoardInvite .invitee .thumbImageWrapper emailIcon {
border-radius: 3px;
height: 30px;
width: 30px; }
.BoardInvite .invitee .thumbImageWrapper .inviteeIcon {
width: 30px;
height: 30px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -170px -384px no-repeat;
border-radius: 6px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.BoardInvite .invitee .thumbImageWrapper .inviteeIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -194px -342px;
background-size: 428px 427px; } }
.BoardInvite .invitee .thumbImageWrapper img {
border-radius: 3px;
height: 30px;
width: 30px; }
.BoardInvite .invitee .inviteeName {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
display: block;
font-size: 11px;
line-height: 17px; }
.BoardInvite .inviteTypeWrapper {
font-size: 11px;
line-height: 11px;
margin-top: 1px; }
.BoardInvite .inviteTypeWrapper .inviteTypeIcon {
display: inline-block;
margin-right: 2px;
vertical-align: middle; }
.BoardInvite .inviteTypeWrapper .inviteTypeIcon.isPinner {
width: 11px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -439px no-repeat;
margin-bottom: 2px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.BoardInvite .inviteTypeWrapper .inviteTypeIcon.isPinner {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -12px -416px;
background-size: 428px 427px; } }
.BoardInvite .inviteTypeWrapper .inviteTypeIcon.isEmail {
width: 11px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -107px -442px no-repeat;
margin-bottom: 2px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.BoardInvite .inviteTypeWrapper .inviteTypeIcon.isEmail {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: 0 -416px;
background-size: 428px 427px; } }
.BoardInvite .inviteTypeWrapper .inviteTypeIcon.isFacebook {
width: 10px;
height: 10px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -223px -206px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.BoardInvite .inviteTypeWrapper .inviteTypeIcon.isFacebook {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -418px -39px;
background-size: 428px 427px; } }
.BoardInvite .inviteTypeWrapper .inviteTypeIcon.isGplus {
width: 10px;
height: 10px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -452px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.BoardInvite .inviteTypeWrapper .inviteTypeIcon.isGplus {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -418px -28px;
background-size: 428px 427px; } }
.BoardInvite .inviteTypeWrapper .inviteTypeName {
font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", sans-serif;
color: #666;
display: inline-block;
font-weight: normal;
vertical-align: middle; }
.BoardInviteForm {
margin-bottom: 8px; }
.BoardInviteForm .TypeaheadField {
position: relative;
width: 100%;
z-index: 100; }
.BoardInviteForm .inviteWrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row; }
.BoardInviteForm .fillWidth {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin-right: 10px; }
.BoardInviteForm .collaboratorInvitesNoMargin {
margin-bottom: 0; }
.BoardInvites .GridItems.fixedHeightLayout {
overflow-x: hidden; }
.BoardInvites.hasMaxHeight {
overflow-x: hidden;
overflow-y: scroll; }
.BoardInviteToast .boardName {
font-weight: bold; }
.GroupBoardEmailSettings {
width: 380px; }
.GroupBoardEmailSettings h2 {
font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", sans-serif;
font-size: 16px;
margin: 0; }
.GroupBoardEmailSettings .helpText {
line-height: 32px; }
.GroupBoardEmailSettings .secretIconInline {
width: 9px;
height: 10px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -317px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
margin: 1px 0 0 8px; }
.GroupBoardEmailSettings .toggleAllWrapper {
overflow: hidden;
border-bottom: 1px solid #e7e7e7;
padding: 10px 20px 20px; }
.GroupBoardEmailSettings .toggleAllWrapper label {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
color: #555;
cursor: pointer; }
.GroupBoardEmailSettings .toggleAllWrapper label .fancyToggle {
float: left;
margin-right: 8px; }
.GroupBoardEmailSettings .toggleAllWrapper label > input {
margin-right: 3px; }
.GroupBoardEmailSettings .toggleAllWrapper label > span {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 13px;
font-weight: bold;
vertical-align: middle; }
.GroupBoardEmailSettings .collab_board_email,
.GroupBoardEmailSettings .collab_board_email_all {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
line-height: 26px;
max-width: 235px; }
.GroupBoardEmailSettings .fieldsetWrapper {
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
max-height: 300px; }
.GroupBoardEmailSettings .fieldsetWrapper fieldset {
padding: 20px;
width: 340px; }
.GroupBoardEmailSettings .fieldsetWrapper fieldset span {
line-height: 28px;
vertical-align: middle; }
.RemoveUserFromBoardDialog .ban {
font-weight: bold; }
.RemoveUserFromBoardDialog .banUserWrapper {
border-top: 1px solid #e7e7e7;
margin: 21px -21px 0;
padding: 21px 21px 0; }
.RemoveUserFromBoardDialog .helpText {
margin-left: 16px; }
.UndoToast.ToastBase .toastWrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.UndoToast.ToastBase .titleSubtitleWrapper {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
margin-top: 0; }
.BrowserButtonUpsell {
width: 500px; }
.BrowserButtonUpsell .browserWrapper {
margin-top: 5px; }
.BrowserButtonUpsell .promoHeader {
color: #333;
color: rgba(21, 21, 21, 0.8);
background-color: #f0f0f0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
font-size: 26px;
line-height: 33px;
padding: 25px;
text-align: center; }
.BrowserButtonUpsell .promoWrapper {
background: #fff;
border: 1px solid #aaa;
border-radius: 6px;
clear: both;
margin: 15px; }
.BrowserButtonUpsell .promoWrapper:hover {
cursor: pointer; }
.BrowserButtonUpsell .zoomImg {
background: url(https://s.pinimg.com/webapp/style/images/chrome-1x-5ff1b915.png) no-repeat;
background-size: contain;
height: 293px;
width: 439px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.BrowserButtonUpsell .zoomImg {
background-image: url(https://s.pinimg.com/webapp/style/images/chrome-2x-1167b788.png); } }
.BulkBoardPicker {
width: 481px; }
.BulkBoardPicker li {
overflow: visible; }
.BulkBoardPicker li.highlighted a {
background: #fafafa; }
.BulkBoardPicker .BoardPickerDropdownButton {
width: 275px; }
.BulkEditBar {
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 64px;
position: absolute;
text-align: center;
top: -64px;
width: 100%;
z-index: 103; }
.BulkEditBar .boardBulkEditBar {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 744px;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.BulkEditBar .notifications {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */
/* Fix for Chrome 44 bug: https://code.google.com/p/chromium/issues/detail?id=506893 */
color: #555;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-height: 0;
/* 1 */
min-width: 0;
/* 1 */
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999;
text-align: right; }
.BulkEditBar .notifications .value {
font-weight: bold; }
.BulkEditBar .bulkEditButtons {
float: right; }
.BulkEditBar .bulkEditButtons .bulkEditButton {
margin-right: 3px;
position: relative;
z-index: 1; }
.BulkEditBar .bulkEditButtons .bulkCancelButton,
.BulkEditBar .bulkEditButtons .bulkEditButton {
padding-left: 15px;
padding-right: 15px; }
.BulkEditBar .placeBoard .bulkEditButtons {
margin-right: 16px; }
.BulkEditBar .placeBoard .notifications {
margin-left: 16px; }
.CSRCreateSuccess {
background: #fff;
border-radius: 6px;
height: 525px;
width: 410px; }
.CSRCreateSuccess .csrSuccessText {
font-size: 16px;
padding: 20px 0 0 15px; }
.CSRCreateSuccess .Board {
height: 292px;
margin: 15px auto; }
.CSRCreateSuccess .successTextWrapper {
border-bottom: 1px solid #e7e7e7; }
.CSRCreateSuccess .boardWrapper {
background: #e9e9e9;
border: 1px solid #d4d4d4;
border-radius: 6px;
height: 325px;
margin: 15px;
padding: 10px; }
.CSRDomainSuggestions {
cursor: pointer; }
.CSRDomainSuggestions .csrDomainWrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
.CSRDomainSuggestions .csrDomainThumbnail {
border-radius: 5px;
margin: 10px 6px; }
.CSRDomainSuggestions p {
margin: 0 0 0 15px; }
.EmptyStateCard {
color: #333;
margin: 25px auto 0;
text-align: center;
width: 390px; }
.EmptyStateCard footer {
margin-bottom: 10px; }
.EmptyStateCard header {
font-weight: bold;
margin-bottom: 2px; }
.EmptyStateCard .icon {
margin: 0 auto 10px; }
.EmptyStateCard .text {
font-size: 18px;
line-height: 24px; }
.EmptyStateCardProfileFollowers .icon {
background: url(https://s.pinimg.com/webapp/style/images/empty_followers-1x-7539a34c.png) no-repeat;
background-size: contain;
height: 142px;
width: 124px; }
.EmptyStateCardProfileFollowing .icon {
background: url(https://s.pinimg.com/webapp/style/images/empty_following-1x-85abe03c.png) no-repeat;
background-size: contain;
height: 142px;
width: 124px; }
.EmptyStateCardProfilePins .searchNavigateLink a {
border-bottom: 1px solid #ccc;
color: #333; }
.EmptyStateCardProfilePins .searchNavigateLink a:hover {
border-bottom: 1px solid #999; }
.EmptyStateCardProfilePins .icon {
background: url(https://s.pinimg.com/webapp/style/images/empty_user_pins-1x-977b487f.png) no-repeat;
background-size: contain;
height: 166px;
width: 100px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.EmptyStateCardProfilePins .icon {
background-image: url(https://s.pinimg.com/webapp/style/images/empty_user_pins-2x-ec575230.png); } }
.BoardPicker {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
visibility: hidden; }
.BoardPicker .SelectList {
overflow: auto; }
.BoardPicker.inPopover {
padding: 8px;
visibility: visible; }
.BoardPicker.inPopover .SelectList {
max-height: 300px;
width: 300px; }
.BoardPicker.inPopover .SelectList .sectionHeading {
background: #f0f0f0;
border-radius: 3px;
font-weight: bold; }
.BoardPicker.lowBoardCountSimplified {
border-top: 1px solid #f3f3f3;
border-top-right-radius: 0;
visibility: visible; }
.BoardPicker.lowBoardCountSimplified .section.allBoards {
padding: 15px 0; }
.BoardPicker.lowBoardCountSimplified .section.createBoardButton {
padding-top: 10px; }
.BoardPicker .bottom {
padding: 7px 0;
width: 100%; }
.BoardPicker .bottom .createBoard {
padding: 7px 23px; }
.BoardPicker .bottom .hidden {
display: none; }
.ExtensionInstallToast {
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.74), #fff) !important;
background-image: linear-gradient(rgba(255, 255, 255, 0.74), #fff) !important; }
.ExtensionInstallToast:hover {
background-color: #fff; }
.ExtensionInstallToast .titleText,
.ExtensionInstallToast .subtitleText {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #0a0e13 !important;
max-width: 250px; }
.ExtensionInstallToast .pinItIcon {
float: left;
height: 40px;
margin-right: 10px;
width: 40px; }
.ExtensionInstallToast .pinItIcon em {
width: 23px;
height: 24px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -226px -260px no-repeat;
display: block;
margin: 8px auto 0; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ExtensionInstallToast .pinItIcon em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -196px -256px;
background-size: 399px 382px; } }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.PinCreate {
background: #d9d9d9;
border-radius: 6px;
position: relative; }
.PinCreate::after {
clear: both;
content: "";
display: table; }
.PinCreate.antiClickJack {
display: none; }
.PinCreate.csrPinCreate {
position: fixed; }
.PinCreate.pinning {
pointer-events: none; }
.PinCreate .Pin {
margin-left: auto;
margin-right: auto;
overflow: hidden; }
.PinCreate .Pin .pinImg {
opacity: 1; }
.PinCreate .repinSmall.btn.primary.loading, .PinCreate .repinSmall.btn.primary.success,
.PinCreate .repinBtn.btn.primary.loading,
.PinCreate .repinBtn.btn.primary.success {
width: 62px; }
.PinCreate .repinSmall.btn.primary.loading em, .PinCreate .repinSmall.btn.primary.success em,
.PinCreate .repinBtn.btn.primary.loading em,
.PinCreate .repinBtn.btn.primary.success em {
-webkit-transform: translateZ(0);
left: 50%;
position: absolute;
top: 50%; }
.PinCreate .repinSmall.btn.primary.loading em,
.PinCreate .repinBtn.btn.primary.loading em {
width: 16px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -327px no-repeat;
-webkit-animation: rotateCircle 500ms infinite;
animation: rotateCircle 500ms infinite;
margin-left: -8px;
margin-top: -8px;
visibility: visible; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.PinCreate .repinSmall.btn.primary.loading em,
.PinCreate .repinBtn.btn.primary.loading em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -370px -223px;
background-size: 399px 382px; } }
.PinCreate .repinSmall.btn.primary.success em,
.PinCreate .repinBtn.btn.primary.success em {
width: 17px;
height: 13px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -328px -325px no-repeat;
margin-left: -8.5px;
margin-top: -6.5px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.PinCreate .repinSmall.btn.primary.success em,
.PinCreate .repinBtn.btn.primary.success em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -228px -320px;
background-size: 399px 382px; } }
.PinCreate .repinSmall.btn.primary.success span,
.PinCreate .repinBtn.btn.primary.success span {
display: none; }
.PinCreate .createButton {
display: none; }
.PinCreate .BoardIcons {
height: auto; }
.PinCreate .nameWrapper {
position: relative; }
.PinCreate .searchFilterInputIcon {
width: 15px;
height: 15px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-1x-c20ceaff.png) -295px -246px no-repeat;
margin-top: -7px;
position: absolute;
top: 50%; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.PinCreate .searchFilterInputIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-main-2x-6d89d41e.png);
background-position: -234px -21px;
background-size: 249px 231px; } }
.PinCreate .Input.name {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #f6f6f6;
border: 1px solid #eaeaea;
border-radius: 4px;
box-shadow: none;
font-weight: bold;
padding: 13px; }
.PinCreate .Input.name:focus {
outline: none; }
.PinCreate .Input.name::-webkit-input-placeholder {
color: #a9a9a9; }
.PinCreate .Input.name::-moz-placeholder {
color: #a9a9a9; }
.PinCreate .Input.name:-ms-input-placeholder {
color: #a9a9a9; }
.PinCreate .Input.name::placeholder {
color: #a9a9a9; }
.PinCreate .BoardCreate {
background: #fff;
border-radius: 0 6px 6px 0;
bottom: 0;
position: absolute;
top: 0;
width: 100%; }
.PinCreate .BoardCreate .SocialTypeaheadField {
-ms-flex-negative: 0;
flex-shrink: 0; }
.PinCreate .BoardCreate form {
height: 100%;
position: relative; }
.PinCreate .BoardCreate h3 {
margin-bottom: 4px; }
.PinCreate .BoardCreate label {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #c2c2c2;
font-size: 11px;
font-weight: normal;
letter-spacing: .05em;
text-transform: uppercase; }
.PinCreate .BoardCreate input,
.PinCreate .BoardCreate .TypeaheadField.userSelect input,
.PinCreate .BoardCreate textarea {
border: 0;
box-shadow: none;
font-size: 14px;
outline: none;
width: 100%; }
.PinCreate .BoardCreate input:focus,
.PinCreate .BoardCreate .TypeaheadField.userSelect input:focus,
.PinCreate .BoardCreate textarea:focus {
outline: none; }
.PinCreate .BoardCreate input {
padding-bottom: 5px; }
.PinCreate .BoardCreate .Input {
border-radius: 0;
margin-left: 0; }
.PinCreate .BoardCreate .boardEditName {
color: #333;
font-size: 15px; }
.PinCreate .BoardCreate textarea {
resize: none; }
.PinCreate .BoardCreate form > ul > li {
border-top: 1px solid #efefef;
padding: 16px 25px 13px; }
.PinCreate .BoardCreate.multiSelect form > ul > li {
padding: 10px; }
.PinCreate .BoardCreate.multiSelect form > ul > li.boardCollaboratorsWrapper {
padding: 0; }
.PinCreate .BoardCreate.multiSelect form > ul > li.boardCollaboratorsWrapper h3 {
padding: 10px 10px 0; }
.PinCreate .BoardCreate .inviteButton {
display: none; }
.PinCreate .BoardCreate .formFooter {
background: transparent;
border-radius: 0 0 6px;
border-top: 1px solid #efefef;
bottom: 0;
left: 0;
padding: 25px;
position: absolute;
right: 0; }
.PinCreate .BoardCreate .formFooter .formFooterButtons {
float: none; }
.PinCreate .BoardCreate .formFooter .cancelButton {
float: left; }
.PinCreate .BoardCreate .formFooter .saveBoardButton {
float: right; }
.PinCreate .BoardCreate .formFooter .saveBoardButton.disabled {
background-color: #efefef !important; }
.PinCreate .BoardCreate .formFooter .btn {
margin-left: 0; }
.PinCreate .BoardCreate .formFooterButtons {
float: none; }
.PinCreate .BoardCreate .formFooterButtons .cancelButton {
float: left; }
.PinCreate .BoardCreate .formFooterButtons .saveBoardButton {
float: right; }
.PinCreate .Checkbox.fancyToggle {
background: #f8f8f8;
border: 1px solid #dfdfdf;
border-radius: 50px;
box-shadow: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 70px; }
.PinCreate .Checkbox.fancyToggle .slider {
background-image: none;
border-color: #dfdfdf;
border-radius: 50px;
bottom: -1px;
box-shadow: none;
height: auto;
left: -1px;
top: -1px;
width: 27px; }
.PinCreate .Checkbox.fancyToggle.on {
background: #bd081c;
box-shadow: none; }
.PinCreate .Checkbox.fancyToggle.on .slider {
left: auto;
right: -1px; }
.PinCreate .BoardCreate h1,
.PinCreate .pinCreateTitle {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
clear: both;
color: #555;
font-size: 20px;
font-weight: bold;
margin: 0;
padding: 25px 25px 13px; }
.PinCreate .SelectList {
border-bottom-right-radius: 6px; }
.PinCreate .SelectList:focus {
outline: none; }
.PinCreate .Picker .item,
.PinCreate .SelectList.normal .item {
border-radius: 0; }
.PinCreate .selected .PickerItemCreate {
color: #555;
font-weight: bold; }
.PinCreate .selected .BoardIcons {
display: none; }
.PinCreate .sectionHeading {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #555;
font-size: 14px;
letter-spacing: -.22px;
padding: 10px 23px; }
.PinCreate .allBoards {
background: #fff;
border-bottom: 1px solid #efefef; }
.PinCreate .SimpleBoardCreate {
bottom: 0;
left: 0;
right: 0;
top: 0;
position: absolute; }
.PinCreate .SimpleBoardCreate .cancelCreateButtons {
bottom: 0;
height: 80px;
left: 0;
position: absolute;
right: 0; }
.PinCreate .SimpleBoardCreate .cancelCreateButtons .cancelButton .Button,
.PinCreate .SimpleBoardCreate .cancelCreateButtons .submitButton .Button {
bottom: 0;
float: none;
margin: 25px;
position: absolute; }
.PinCreate .SimpleBoardCreate .cancelCreateButtons .cancelButton .Button {
left: 0; }
.PinCreate .SimpleBoardCreate .cancelCreateButtons .submitButton .Button {
right: 0; }
/* desktop.scss */
.PinCreate {
height: 535px;
width: 660px; }
.PinCreate.TwoPaneModal .left.pane {
background: #fff;
border-right: 1px solid #efefef; }
.PinCreate .BoardCreate {
border-left: 1px solid #efefef; }
.PinCreate .BoardCreate .searchIconInputWrapper {
border-bottom: 1px solid #efefef; }
.PinCreate .BoardPicker .BoardLabel {
width: 100%; }
.PinCreate .BoardPicker .BoardLabel .BoardIcons > .secretIcon, .PinCreate .BoardPicker .BoardLabel .BoardIcons .collaborativeIcon {
position: relative;
top: 4px; }
.PinCreate .pinCreateClose {
padding: 10px;
position: absolute;
right: 10px;
top: 10px;
z-index: 2; }
.PinCreate .titleContainer {
border-top-right-radius: 6px;
width: 330px; }
.PinCreate .titleContainer .pinCreateTitle {
padding: 25px 25px 13px; }
.PinCreate .Pin.summary .pinMeta .pinDescription {
max-width: 165px; }
.PinCreate .Pin.summary .pinMeta .TextField {
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */ }
.PinCreate .pinContainer {
bottom: 0;
display: table;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 330px; }
.PinCreate .pinContainer .pinModuleHolder {
display: table-cell;
vertical-align: middle; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.PinCreateBoardPicker {
bottom: 0;
left: 0;
right: 0;
top: 0;
position: absolute; }
.PinCreateBoardPicker .BoardPicker {
width: 100%; }
.PinCreateBoardPicker .boardsWrapper {
-webkit-transform: translateZ(0);
background: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow: hidden;
overflow-y: auto; }
.PinCreateBoardPicker .nameAndIcons {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #555;
font-weight: bold;
letter-spacing: -.25px; }
.PinCreateBoardPicker .Picker .top {
border-bottom: 1px solid #f3f3f3;
margin-bottom: 0;
overflow: inherit;
padding-bottom: 15px; }
.PinCreateBoardPicker .Picker .item {
padding: 7px 23px; }
.PinCreateBoardPicker .Picker .item.activeItem, .PinCreateBoardPicker .Picker .item.selected, .PinCreateBoardPicker .Picker .item:hover {
background: #f7f7f7;
color: #555; }
.PinCreateBoardPicker .Picker .item.activeItem .repinBtn, .PinCreateBoardPicker .Picker .item.selected .repinBtn, .PinCreateBoardPicker .Picker .item:hover .repinBtn {
display: block; }
.PinCreateBoardPicker .Picker .boardCreateSuggestions .item {
padding: 0; }
.PinCreateBoardPicker .PinDupWarning {
display: inline-block; }
/* desktop.scss */
.PinCreateBoardPicker .boardsWrapper {
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
bottom: 0;
position: relative;
right: 0;
top: 0;
width: 330px; }
.PinCreateBoardPicker .boardsWrapper .nameWrapper .searchFilterInputIcon {
left: 36px; }
.PinCreateBoardPicker .boardsWrapper .nameWrapper input.name {
margin-left: 23px;
padding-left: 44px;
width: 284px; }
.PinCreateImageGallery .pinGallery {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 25px; }
.PinCreateImageGallery .pinGallery > * {
padding: 10px; }
.PinCreateImageGallery .pinGallery > * img {
border-radius: 8px; }
.PinCreatePin {
bottom: 0;
left: 0;
right: 0;
top: 0;
position: absolute; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.PinCreateShare {
-webkit-transform: translateZ(0); }
.PinCreateShare .socialShareWrapper {
height: 18px; }
.PinCreateShare .buttonWrapper {
float: left;
margin-left: 10px; }
.PinCreateShare .buttonWrapper .pinCreateSocialLabel {
display: block;
height: 18px; }
.PinCreateShare .buttonWrapper .pinCreateSocialLabel .shareIcon {
width: 18px;
height: 18px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -40px no-repeat;
display: block;
float: left; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.PinCreateShare .buttonWrapper .pinCreateSocialLabel .shareIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -370px -57px;
background-size: 399px 382px; } }
.PinCreateShare .buttonWrapper .pinCreateSocialLabel:hover .shareIcon {
width: 18px;
height: 18px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -348px -353px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.PinCreateShare .buttonWrapper .pinCreateSocialLabel:hover .shareIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -332px -347px;
background-size: 399px 382px; } }
.PinCreateShare .buttonWrapper .pinCreateSocialLabel:hover .helperText {
color: #d9d9d9; }
.PinCreateShare .buttonWrapper .shareInput {
display: none; }
.PinCreateShare .buttonWrapper .shareInput:checked + .pinCreateSocialLabel .shareIcon {
width: 18px;
height: 18px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -60px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.PinCreateShare .buttonWrapper .shareInput:checked + .pinCreateSocialLabel .shareIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -370px -19px;
background-size: 399px 382px; } }
.PinCreateShare .buttonWrapper .shareInput:checked + .pinCreateSocialLabel .helperText {
color: #d9d9d9; }
.PinCreateShare .buttonWrapper .helperText {
color: #8c9198;
display: inline-block;
float: left;
font-size: 14px;
font-weight: bold;
margin-left: 7px; }
/* desktop.scss */
.PinCreateShare {
bottom: -32px;
left: 0;
position: absolute; }
.PinCreateShare .buttonWrapper .pinCreateSocialLabel .helperText {
color: #d9d9d9; }
.PinCreateShare .buttonWrapper .pinCreateSocialLabel .shareIcon {
width: 18px;
height: 18px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -348px -353px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.PinCreateShare .buttonWrapper .pinCreateSocialLabel .shareIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -332px -347px;
background-size: 399px 382px; } }
.PinCreateShare .buttonWrapper .pinCreateSocialLabel:hover .helperText {
color: #fff; }
.PinCreateShare .buttonWrapper .pinCreateSocialLabel:hover .shareIcon {
width: 18px;
height: 18px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px 0 no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.PinCreateShare .buttonWrapper .pinCreateSocialLabel:hover .shareIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -370px 0;
background-size: 399px 382px; } }
.PinCreateShare .buttonWrapper .shareInput:checked + .pinCreateSocialLabel:hover .helperText {
color: #fff; }
.PinCreateShare .buttonWrapper .shareInput:checked + .pinCreateSocialLabel:hover .shareIcon {
width: 18px;
height: 18px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -20px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.PinCreateShare .buttonWrapper .shareInput:checked + .pinCreateSocialLabel:hover .shareIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -370px -38px;
background-size: 399px 382px; } }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.PinCreateSuccess .standardForm {
max-width: 500px; }
.PinCreateSuccess .standardForm h1 {
font-weight: normal;
vertical-align: bottom; }
.PinCreateSuccess .standardForm h1 em {
font-style: normal;
font-weight: bold; }
.PinCreateSuccess .standardForm h1 a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
display: inline-block;
max-width: 250px;
vertical-align: bottom; }
.PinCreateSuccess .standardForm h1 a:hover {
color: #bd081c; }
.PinCreateSuccess.noBody .formFooter {
border-top: 0; }
.PinCreateSuccess.noBody .formFooter.promoteVisible {
background: #fff; }
/* desktop.scss */
.PinCreateSuccess {
width: 500px; }
.PinCreateSuccess.csrSuccess {
width: auto; }
.PinCreateSuccessBoard .boardWrapper {
background: #f4f4f4;
border: 1px solid #c7c7c7;
border-radius: 6px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
clear: both;
margin: 20px; }
.PinCreateSuccessBoard .alsoOn {
color: #9f9f9f;
font-size: 18px;
margin: 20px 0 14px;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.67); }
.PinCreateSuccessBoard .Board {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.44);
margin: 0 auto 20px; }
.PinCreateSuccessBoardEdit h1 span {
font-weight: normal; }
.PinCreateSuccessBoardEdit .standardForm .learnMore {
display: block;
float: none;
margin: 10px 0; }
.PinCreateSuccessBoardEdit .boardInvites {
margin-top: 20px; }
.PinCreateSuccessBoardEdit .boardInvites .BoardInvite.boardEdit {
width: 472px; }
.PinCreateSuccessBoardEdit .boardInvites .BoardInvite.boardEdit .User {
overflow: hidden; }
.PinCreateSuccessBoardEdit .boardInvites .BoardInvite.boardEdit .Button {
float: right;
margin-left: 10px;
margin-top: 3px; }
.PinCreateSuccessBulkAction .boardWrapper {
background: #f4f4f4;
border: 1px solid #c7c7c7;
border-radius: 6px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
clear: both;
margin: 20px;
padding-top: 20px; }
.PinCreateSuccessBulkAction .Board {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.44);
margin: 0 auto 20px; }
.PinCreateSuccessExtensionNag .nagWrapper {
background: #f4f4f4;
background-image: url(https://s.pinimg.com/webapp/style/images/pin_create_success_extension_nag_win_chrome-a9ddaca9.png);
background-position: 50% 100%;
background-repeat: no-repeat;
border: 1px solid #c7c7c7;
border-radius: 6px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
clear: both;
margin: 20px;
text-align: center; }
.PinCreateSuccessExtensionNag .nagWrapper .nagMessage {
color: #211922;
font-size: 21px;
font-weight: lighter;
margin: 0 auto;
padding: 20px 15px 245px;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.67);
width: 425px; }
.PinCreateSuccessExtensionNag .nagWrapper .nagMessage a {
color: #079dd6;
font-weight: normal; }
.PinCreateSuccessToast {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: #353535;
border-radius: 6px;
bottom: 5%;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
color: #a4a4a4;
font-size: 14px;
left: 5px;
line-height: 32px;
padding: 0 10px 0 5px;
position: fixed;
text-align: left;
z-index: 752; }
.PinCreateSuccessToast a {
color: #bebebe;
font-weight: bold; }
.RepinsLikesFeedPage h1 {
color: #333;
color: rgba(21, 21, 21, 0.8);
font-size: 47px;
font-weight: bold;
line-height: 52px;
margin-left: auto;
margin-right: auto;
max-width: 736px;
text-align: center;
word-wrap: break-word;
margin-bottom: 20px;
margin-top: 27px;
text-align: center; }
.ToastBase {
margin-top: 10px;
-webkit-transition: opacity .1s ease-in-out;
transition: opacity .1s ease-in-out;
visibility: hidden; }
.ToastBase.RepinSuccessToast, .ToastBase.legacy {
background-image: -webkit-linear-gradient(rgba(10, 14, 19, 0.85), #0a0e13);
background-image: linear-gradient(rgba(10, 14, 19, 0.85), #0a0e13);
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.4) 0 0 20px 0;
color: #fff; }
.ToastBase.RepinSuccessToast:hover, .ToastBase.legacy:hover {
background-color: #000;
opacity: 1 !important; }
.ToastBase.RepinSuccessToast.imageWrapper, .ToastBase.legacy.imageWrapper {
background: #333;
border-radius: 4px;
display: table-cell;
height: 40px;
margin-right: 10px;
overflow: hidden;
width: 40px; }
.ToastBase.RepinSuccessToast.imageWrapper img, .ToastBase.legacy.imageWrapper img {
height: 100%;
width: 100%; }
.ToastBase.visible {
visibility: visible; }
.ToastBase.isDidIt {
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.74), #fff);
background-image: linear-gradient(rgba(255, 255, 255, 0.74), #fff); }
.ToastBase.isDidIt:hover {
background-color: #fff; }
.ToastBase.isDidIt .imageWrapper {
background: #eee; }
.ToastBase.isDidIt .subtitleText,
.ToastBase.isDidIt .titleText {
color: #0a0e13;
max-width: 250px; }
.ToastBase.followModulePinnedTo .toastWrapper {
line-height: 40px; }
.ToastBase.suggestedUser .imageWrapper {
border-radius: 50%; }
.ToastBase.boldTitle .titleText {
font-weight: bold; }
.ToastBase.boldTitle .subtitleText {
font-weight: normal; }
.ToastBase .abstractImage {
display: table-cell; }
.ToastBase .buttons {
display: table-cell;
vertical-align: middle; }
.ToastBase .buttons .BoardFollowButton,
.ToastBase .buttons .UserFollowButton {
float: right; }
.ToastBase .imageWrapper {
height: 48px;
overflow: hidden;
width: 48px; }
.ToastBase .imageWrapper img {
height: 100%;
width: 100%; }
.ToastBase.downArrow .abstractImage {
width: 32px;
height: 32px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -136px -384px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ToastBase.downArrow .abstractImage {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -342px -309px;
background-size: 428px 427px; } }
.ToastBase.downArrow .subtitleText {
padding-left: 16px; }
.ToastBase.checkmarkIconEnabled .abstractImage {
width: 26px;
height: 26px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -293px -138px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ToastBase.checkmarkIconEnabled .abstractImage {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -153px -303px;
background-size: 428px 427px; } }
.ToastBase.yahoo .abstractImage {
width: 28px;
height: 28px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -442px -254px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ToastBase.yahoo .abstractImage {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -167px -172px;
background-size: 428px 427px; } }
.ToastBase.facebook .abstractImage {
width: 28px;
height: 28px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -442px -314px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ToastBase.facebook .abstractImage {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -196px -172px;
background-size: 428px 427px; } }
.ToastBase.google .abstractImage {
width: 28px;
height: 28px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -442px -224px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ToastBase.google .abstractImage {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -124px -303px;
background-size: 428px 427px; } }
.ToastBase.microsoft .abstractImage {
width: 28px;
height: 28px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -442px -284px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ToastBase.microsoft .abstractImage {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -291px -229px;
background-size: 428px 427px; } }
.ToastBase .toastWrapper {
display: table;
overflow: hidden;
padding: 10px;
width: 346px; }
.ToastBase .titleSubtitleWrapper {
display: table-cell;
margin-top: 4px;
padding: 0 10px;
vertical-align: middle; }
.ToastBase .titleText,
.ToastBase .subtitleText {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #fff;
font-size: 13px;
font-weight: normal;
margin: 0;
width: 286px; }
.ToastBase .subtitleText {
font-weight: bold; }
.ToastBase.react {
opacity: 0;
position: relative;
-webkit-transform: translateY(200px);
transform: translateY(200px);
width: 430px; }
.ToastBase.react .buttons {
position: absolute;
right: 10px;
top: 10px; }
.ToastBase.react .buttons > * {
width: auto; }
.ToastBase.react.visible {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: all 0.7s cubic-bezier(0.19, 1.15, 0.48, 1);
transition: all 0.7s cubic-bezier(0.19, 1.15, 0.48, 1); }
.ToastBase.react.visible.hiding {
opacity: 0;
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: opacity transform .2s;
transition: opacity transform .2s; }
.ToastBase.isBrio {
background: #88a5ab;
border-radius: 100px;
box-shadow: none;
padding: 16px; }
.ToastBase.isBrio:hover {
background: #88a5ab; }
.ToastBase.isBrio .titleText {
font-size: 18px;
font-weight: bold;
white-space: pre-wrap; }
.ToastBase.isBrio .subtitleText {
font-size: 18px;
font-weight: normal;
white-space: pre-wrap; }
.ToastBase.isBrio .buttons {
right: 26px;
top: 26px; }
.Toasts {
bottom: 14px;
left: 50%;
margin-left: -183px;
position: fixed;
z-index: 752; }
.PinBookmarklet {
box-sizing: border-box;
margin: 14px auto;
padding: 0 14px;
width: 750px; }
.PinBookmarklet .errorMessage {
padding-top: 20px; }
.PinBookmarklet .PinCreate .PinCreateSuccessBoardEdit {
background: #fff; }
.PinBookmarklet .pinningBG {
bottom: 0;
left: 0;
right: 0;
top: 0;
background: #1a1e23;
position: fixed; }
.PinBookmarklet .PinCreate {
border-radius: 6px;
margin-left: auto;
margin-right: auto; }
.PinBookmarklet .PinCreate .Pin.summary.cloned {
position: static; }
.PinBookmarklet .PinCreate .PinCreateSuccess {
margin: 0 auto; }
.PinBookmarklet .PinCreateSuccess {
width: 100%; }
.PinDupWarning .Spinner {
display: none; }
.PinDupWarning .pinnedToBoardWarning {
background-color: #fff5c1;
background: -webkit-linear-gradient(#fff7cb, #fff4b7);
background: linear-gradient(#fff7cb, #fff4b7);
border-bottom: 1px solid #e2e1d1;
font-size: 16px;
padding: 18px;
text-shadow: 0 1px 0 #fff; }
.PinDupWarning .pinnedToBoardWarning a {
color: #bd081c; }
.PinDupWarning.pinCreate {
-webkit-transform: translateZ(0); }
.PinDupWarning.pinCreate .pinnedToBoardWarning {
background-color: #ffe581;
background: -webkit-linear-gradient(#ffef9c, #ffda66);
background: linear-gradient(#ffef9c, #ffda66);
border: 0;
border-radius: 3px;
color: #7e4300;
font-size: 12px;
margin: 0 23px 12px;
padding: 10px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); }
.AddPinURL {
max-width: 460px; }
.AddPinURL .findPinsField {
overflow: hidden; }
.AddPinURL .findPins {
overflow: hidden;
background: #f0f0f0;
border-radius: 0 0 6px 6px;
padding: 19px; }
.AddPinURL .installBookmarklet {
background-color: #fff5c1;
background: -webkit-linear-gradient(#fff7cb, #fff4b7);
background: linear-gradient(#fff7cb, #fff4b7);
border-bottom: 1px solid #e7e7e7;
font-size: 14px;
font-weight: bold;
padding: 10px 18px; }
.AddPinURL .installBookmarklet a {
color: #bd081c; }
.AddPinURL .installBookmarklet p {
margin: 0; }
.AddPinURL .Button {
float: right;
margin-left: 10px; }
.PinComment {
position: relative;
word-wrap: break-word; }
.PinComment::after {
clear: both;
content: "";
display: table; }
.PinComment.summary {
margin-bottom: 5px; }
.PinComment.icon-container {
visibility: hidden; }
.PinComment.icon-container .icon-child {
visibility: hidden; }
.PinComment .time {
-webkit-transform: translateX(0);
transform: translateX(0); }
.PinComment.icon-container:hover .icon-child {
display: block;
visibility: visible; }
.PinComment.comment-item:hover .icon-container {
-webkit-animation: fadeIn 1s ease-out;
animation: fadeIn 1s ease-out;
display: block;
visibility: visible; }
.PinComment.comment-item:hover .icon-container .icon-child {
display: block;
visibility: visible; }
.PinComment.comment-item:hover .time {
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
-webkit-transition: -webkit-transform 350ms ease-out;
transition: -webkit-transform 350ms ease-out;
transition: transform 350ms ease-out;
transition: transform 350ms ease-out, -webkit-transform 350ms ease-out; }
.PinComment:hover .flagComment em,
.PinComment .hasTouch .flagComment em {
display: block;
visibility: visible; }
.PinComment:hover .deleteComment em,
.PinComment .hasTouch .deleteComment em {
display: block;
visibility: visible; }
.PinCommentList {
border-top: 1px solid #e3e3e3;
/* Subclass that applies to this module when rendered as part of Closeup */ }
.PinCommentList.empty .commentsContainer {
display: none; }
.PinCommentList .commentsContainer {
padding: 0 14px; }
.PinCommentList .commentsContainer:first-of-type {
padding-top: 15px; }
.PinCommentList.summary .commentsContainer:first-of-type {
padding-top: 10px; }
.summary .PinCommentList .List:last-child .PinComment:last-child {
padding-bottom: 0; }
.PinCommentList.detailed .commentsContainer {
background-color: #fff;
border: 0;
padding: 0; }
.hasRichPins .PinCommentList.detailed .commentsContainer {
background: transparent; }
.PinCommentsPage {
/* Subclass that applies to this module when rendered as part of Closeup */ }
.PinCommentsPage .commentDropdownIcon {
-webkit-transition: -webkit-transform 0.4s;
transition: -webkit-transform 0.4s;
transition: transform 0.4s;
transition: transform 0.4s, -webkit-transform 0.4s; }
.PinCommentsPage .commentDropdownIcon em {
width: 9px;
height: 6px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -363px -270px no-repeat;
cursor: pointer;
display: block; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.PinCommentsPage .commentDropdownIcon em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -389px -120px;
background-size: 399px 382px; } }
.PinCommentsPage .commentDropdownIcon em {
margin: 8px; }
.PinCommentsPage .commentDropdownIcon.collapsed {
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
.PinCommentsPage .showMore {
display: block;
margin: 0 0 9px;
padding: 0 15px; }
.summary .PinCommentsPage .showMore {
text-align: center; }
.PinCommentsPage .hidden {
display: none; }
.PinCommentsPage.summary .pinDescriptionCommentItem {
border-radius: 0 0 6px 6px;
padding: 0 14px 7px;
position: relative; }
.PinCommentsPage.summary .pinDescriptionCommentItem::after {
clear: both;
content: "";
display: table; }
.PinCommentsPage.detailed {
font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", sans-serif;
font-weight: bold;
border-top: none; }
.PinCommentsPage.detailed .commentsHeader {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
.PinCommentsPage.detailed .showMore {
color: #555;
font-size: 12px;
margin-bottom: 0;
padding: 16px 40px; }
.PinCommentsPage.detailed .TextField {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-radius: 6px;
color: #999;
font-size: 15px;
font-weight: normal;
margin-bottom: 3px; }
.PinCommentsPage.detailed .noComments p {
color: #b9b9b9;
font-size: 14px;
font-weight: normal;
margin: 0;
padding: 16px 40px; }
.PinCommentsPage.detailed .numComments {
color: #b5b5b5;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
float: none;
font-size: 14px;
font-weight: normal;
margin: 0;
padding: 0 40px 16px; }
.PinCommentsPage.detailed .numComments .commentsNumber {
font-weight: bold; }
.PinCommentsPage.detailed .pinUserCommentBox .commenterWrapper {
display: none; }
.PinCommentsPage.detailed .pinUserCommentBox .commenterWrapper.show {
display: block; }
.IframeEmbed {
border-radius: 8px;
-webkit-mask-image: -webkit-radial-gradient(#fff, #000);
mask-image: radial-gradient(#fff, #000);
overflow: hidden;
padding-bottom: 50%;
position: relative;
width: 100%;
/**
* Provider specific updates
*
* Pads the containing div of the iframe for soundcloud, youtube, and vimeo
* videos. This allows the iframe to fill the div and preserve specific
* aspect ratios. This padding is added via jinja for files from other sources
*/ }
.IframeEmbed iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%; }
.IframeEmbed.soundcould {
padding-bottom: 30%; }
.IframeEmbed.vevo, .IframeEmbed.youtube, .IframeEmbed.vimeo {
padding-bottom: 50%; }
.IframeEmbed.vine {
padding-bottom: 100%; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.ImagesFeedPage .noImages {
color: #444;
font-size: 20px;
margin: 60px 0;
text-align: center; }
/* desktop.scss */
.ImagesFeedPage .sectionTitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 18px;
margin-bottom: 10px;
text-align: center;
width: 600px; }
@-webkit-keyframes scaleDownAndFade {
0%, 50% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); }
66%, 83% {
opacity: 1;
-webkit-transform: scale(0.5);
transform: scale(0.5); }
100% {
opacity: 0;
-webkit-transform: scale(0.5);
transform: scale(0.5); } }
@keyframes scaleDownAndFade {
0%, 50% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); }
66%, 83% {
opacity: 1;
-webkit-transform: scale(0.5);
transform: scale(0.5); }
100% {
opacity: 0;
-webkit-transform: scale(0.5);
transform: scale(0.5); } }
.PaddedPin {
position: relative; }
.PaddedPin .paddedPinLink {
background: #fff;
display: block; }
.PaddedPin .paddedPinLink.hasIframeEmbed {
padding: 0 32px; }
.PaddedPin .pinImage {
border-radius: 8px;
display: block;
margin: 0 auto;
position: relative;
z-index: 5; }
.PaddedPin .Image {
margin: auto; }
.PaddedPin .FlashlightEnabledImage {
margin: auto; }
.PaddedPin .pinCloseupPlaceholderText {
color: #717171 !important;
margin-left: auto;
margin-right: auto; }
.PaddedPin .seeYourPinStory {
background-color: #000;
height: 62px;
position: relative;
width: 100%; }
.PaddedPin .seeYourPinStory .pinstoryButton {
box-shadow: none;
font-size: 15px;
height: 40px;
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 125px; }
.PaddedPin .pinCanonicalDescription {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
bottom: 0;
color: #f7f7f7;
font-size: 12px;
height: 56px;
left: 0;
line-height: 150%;
margin-top: -6px;
opacity: 0.5;
padding: 0 14px;
position: absolute;
right: 0;
text-align: center;
text-shadow: 0 -1px rgba(0, 0, 0, 0.17);
top: 45%;
white-space: normal;
word-wrap: break-word; }
.PaddedPin .pinDomain {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
bottom: 0;
color: #f7f7f7;
font-size: 12px;
left: 0;
margin-top: -6px;
opacity: 0.5;
padding: 0 14px;
position: absolute;
right: 0;
text-align: center;
text-shadow: 0 -1px rgba(0, 0, 0, 0.17);
top: 50%; }
.PaddedPin .visualSearchObjectTagClickTarget {
cursor: pointer;
height: 50px;
margin-left: -25px;
margin-top: -25px;
position: absolute;
/* positioned on visualSearchObjectOverlay by inline style */
width: 50px; }
.PaddedPin .visualSearchObjectTagClickTarget .visualSearchObjectTag {
-webkit-backface-visibility: hidden;
-webkit-animation: scaleDownAndFade 1.5s;
animation: scaleDownAndFade 1.5s;
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
transition: opacity 0.2s, -webkit-transform 0.2s;
transition: opacity 0.2s, transform 0.2s;
transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s;
opacity: 0;
background: #f22;
border: 6px solid #fff;
border-radius: 50%;
box-shadow: 0 0 10px #000;
height: 32px;
left: 50%;
margin-left: -22px;
margin-top: -22px;
position: absolute;
top: 50%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: center;
transform-origin: center;
width: 32px; }
.PaddedPin .visualSearchObjectTagClickTarget:hover .visualSearchObjectTag {
opacity: 1;
-webkit-transform: scale(0.65);
transform: scale(0.65); }
.PaddedPin .visualSearchObjectTagClickTarget:active .visualSearchObjectTag {
background: #b00; }
.PaddedPin:hover .visualSearchObjectTag {
opacity: 0.67; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.Pin {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: relative;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg); }
.Pin .pinBackgroundGradient {
background: -webkit-linear-gradient(rgba(80, 80, 80, 0), rgba(80, 80, 80, 0.2) 70%, rgba(80, 80, 80, 0.5));
background: linear-gradient(rgba(80, 80, 80, 0), rgba(80, 80, 80, 0.2) 70%, rgba(80, 80, 80, 0.5));
border-radius: 8px;
height: 100%;
position: absolute;
visibility: visible;
width: 100%;
z-index: 101; }
.Pin .navigateLinkWrapper {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
bottom: 0;
position: absolute;
width: 100%; }
.Pin .navigateLinkWrapper .domainNameLink {
position: relative;
z-index: 102; }
.Pin .fadeIn {
-webkit-animation: fadeIn 1.5s ease-out;
animation: fadeIn 1.5s ease-out;
display: block;
opacity: 1; }
.Pin.column.detailed {
margin: 0 7px; }
.Pin.column.detailed .pinWrapper {
width: 100%; }
.Pin .bulkEditPinWrapper {
display: none; }
.Pin.detailed .pinDescription {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-top: 1px solid #e3e3e3;
font-size: 17px;
line-height: 23px; }
.Pin.detailed .pinWrapper {
width: 100%; }
.Pin.summary .hoverMask {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background 0.04s linear;
transition: background 0.04s linear;
border-radius: 6px 6px 0 0;
box-shadow: none;
z-index: 100; }
.Pin.summary .pinHolder:hover .hoverMask {
background: rgba(255, 255, 255, 0.08); }
.Pin.summary .pinHolder:active .hoverMask {
background: rgba(255, 255, 255, 0.08); }
.Pin.summary .creditItem {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
border-radius: 0 0 6px 6px;
display: block;
line-height: 14px;
padding: 5px 14px;
z-index: 3; }
.Pin.summary .creditItem .creditImg {
position: relative;
border-radius: 2px;
float: left;
height: 30px;
margin-right: 5px;
width: 30px; }
.Pin.summary .creditItem .creditImg::after {
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 30px;
left: 0;
position: absolute;
top: 0;
width: 30px; }
.Pin.summary .creditItem .creditImg img {
border-radius: 3px;
height: 30px;
width: 30px; }
.Pin.summary .creditItem .creditImg.user {
position: relative;
border-radius: 50%; }
.Pin.summary .creditItem .creditImg.user::after {
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 30px;
left: 0;
position: absolute;
top: 0;
width: 30px; }
.Pin.summary .creditItem .creditImg.user img {
border-radius: 50%;
height: 30px;
width: 30px; }
.Pin.summary .creditItem .creditName {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #999;
display: block; }
.Pin.summary .creditItem .creditName h3 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 11px; }
.Pin.summary .creditItem .creditTitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #717171; }
.Pin.summary .creditItem:active .creditTitle {
color: #717171; }
.Pin.summary .creditItem:active .creditName {
color: #999; }
.Pin.summary .creditItem .span {
vertical-align: middle; }
.Pin.summary .pinCredits {
font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", sans-serif;
font-weight: bold;
border-top: 1px solid #e7e7e7;
color: #777; }
.Pin.summary .pinCredits.userBoardCondensed .creditName {
margin-top: 2px; }
.Pin.summary .pinCredits button {
z-index: 3; }
.Pin.summary .pinDomain {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
bottom: 0;
color: #f7f7f7;
font-size: 12px;
left: 0;
margin-top: -6px;
opacity: 0.5;
padding: 0 14px;
position: absolute;
right: 0;
text-align: center;
text-shadow: 0 -1px rgba(0, 0, 0, 0.17);
top: 50%; }
.Pin.summary .pinCanonicalDescription {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
bottom: 0;
color: #f7f7f7;
font-size: 12px;
height: 56px;
left: 0;
line-height: 150%;
margin-top: -6px;
opacity: 0.5;
padding: 0 14px;
position: absolute;
right: 0;
text-align: center;
text-shadow: 0 -1px rgba(0, 0, 0, 0.17);
top: 45%;
white-space: normal;
word-wrap: break-word; }
.Pin.summary .pinHolder {
position: relative;
z-index: 3; }
.Pin.summary .pinImageWrapper {
background: #eee;
border-radius: 6px 6px 0 0;
display: block;
padding: 0;
position: relative; }
.Pin.summary .pinImg {
display: block;
margin: 0 auto;
opacity: 0;
z-index: 5; }
.Pin.summary .pinImg.noFade {
opacity: 1; }
.Pin.summary .pinImg.loaded {
opacity: 1; }
.Pin.summary .pinImg.fade {
-webkit-transition: opacity .04s linear;
transition: opacity .04s linear; }
.Pin.summary .pinImg:hover {
cursor: pointer; }
.Pin.summary .pinImg.fullBleed {
border-radius: 6px 6px 0 0; }
.Pin.summary.bulkEditMode .pinWrapper .bulkEditPinWrapper {
bottom: 0;
cursor: pointer;
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 102; }
.Pin.summary.bulkEditMode .pinWrapper .bulkEditCheckboxWrapper {
display: block; }
.Pin.summary.bulkEditMode .pinWrapper .leftSideButtonsWrapper,
.Pin.summary.bulkEditMode .pinWrapper .rightSideButtonsWrapper {
display: none; }
.Pin.summary .productPrice {
color: #bd081c;
font-size: 13px;
font-weight: bold;
margin: 12px 12px 0; }
.Pin.summary .pinWrapper {
border-radius: 6px;
position: relative; }
.Pin.summary .creditItem {
line-height: 15px;
padding: 10px;
position: relative; }
.Pin.summary .creditItem .creditTitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow: hidden;
color: #555;
display: block;
font-weight: normal; }
.Pin.summary .creditItem .creditTitle h5 {
font-size: 11px; }
.Pin.summary .creditItem .creditName {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #555;
font-weight: bold; }
.Pin.summary .creditItem:hover {
background: #f1f1f1; }
.Pin.summary .creditItem:hover .creditName h3 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 11px; }
.Pin.summary .pinCreditWrapper {
border-radius: 0 0 6px 6px;
position: relative;
z-index: 103; }
.Pin.summary .pinCreditWrapper .creditTitle, .Pin.summary .pinCreditWrapper .creditName {
width: 151px; }
.Pin.summary .creditFooter {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #b0b0b0;
font-weight: normal;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.Pin.summary .pinImageWrapper {
cursor: zoom-in; }
.Pin.summary .pinImageWrapper::after {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
bottom: 0;
content: "";
height: 1px;
left: 0;
margin-top: -1px;
position: absolute;
right: 0;
z-index: 10; }
.Pin.summary .leftSideButtonsWrapper {
left: 8px; }
.Pin.summary .leftSideButtonsWrapper .repinSmall {
border: 1px solid;
border-color: #670f13;
float: left; }
.Pin.summary .rightSideButtonsWrapper,
.Pin.summary .bulkEditCheckboxWrapper {
right: 8px; }
.Pin.summary .rightSideButtonsWrapper .btn,
.Pin.summary .bulkEditCheckboxWrapper .btn {
margin-right: 4px; }
.Pin.summary .rightSideButtonsWrapper .btn:last-child,
.Pin.summary .bulkEditCheckboxWrapper .btn:last-child {
margin-right: 0; }
.Pin.summary .leftSideButtonsWrapper,
.Pin.summary .rightSideButtonsWrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
top: 8px;
z-index: 103; }
.Pin.summary .leftSideButtonsWrapper .btn,
.Pin.summary .rightSideButtonsWrapper .btn {
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
font-size: 13px; }
.Pin.summary .leftSideButtonsWrapper .btn:hover,
.Pin.summary .rightSideButtonsWrapper .btn:hover {
border: 1px solid rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
.Pin.summary .leftSideButtonsWrapper .btn:active,
.Pin.summary .rightSideButtonsWrapper .btn:active {
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1) inset; }
.Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat {
background-color: #efefef;
background-image: none;
border: 0;
border-radius: 4px;
box-shadow: none;
color: #555;
height: 36px;
text-shadow: none;
background-color: #fff;
font-size: 14px;
opacity: .97; }
.Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat:hover,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat:hover {
background-color: #e3e3e3;
border: 0; }
.Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat:active, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat:focus, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.active,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat:active,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat:focus,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.active {
background-color: #e3e3e3;
background-image: none;
border: 0;
box-shadow: none; }
.Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active {
background-color: #bd081c;
border: 0;
box-shadow: none;
color: #efefef;
text-shadow: none; }
.Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary.btn.primary:hover, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary.btn.primaryOnHover:hover:not(.noHoverActive):hover, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:focus, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary.active .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:not(.noHoverActive):active, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:not(.noHoverActive):focus, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active.btn.primary:hover, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active.btn.primaryOnHover:hover:not(.noHoverActive):hover, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active:focus, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active:active, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active.active .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:not(.noHoverActive):active, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active:not(.noHoverActive):focus,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary.btn.primary:hover,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary.btn.primaryOnHover:hover:not(.noHoverActive):hover,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:focus,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary.active .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:not(.noHoverActive):active,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:not(.noHoverActive):focus,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active.btn.primary:hover,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active.btn.primaryOnHover:hover:not(.noHoverActive):hover,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active:focus,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active:active,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active.active .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:not(.noHoverActive):active,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active:not(.noHoverActive):focus, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary.active .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active:not(.noHoverActive):active, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active.active .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active:not(.noHoverActive):active,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary.active .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active:not(.noHoverActive):active,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active.active .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active:not(.noHoverActive):active, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary.active
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:not(.noHoverActive):active, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active.active
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:not(.noHoverActive):active,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary.active
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:not(.noHoverActive):active,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active.active
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:not(.noHoverActive):active, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary.active
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active:not(.noHoverActive):active, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.primary:active.active
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active:not(.noHoverActive):active,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary.active
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active:not(.noHoverActive):active,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active.active
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.primary:active:not(.noHoverActive):active {
/* the above is for css specificity, will be better after the experiments are shipped to
all users */
background: #b7071b;
border: 0;
box-shadow: none;
text-shadow: none; }
.Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.white, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.white:active,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.white,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.white:active {
background-color: white; }
.Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat.white:hover,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat.white:hover {
background-color: #efefef; }
.Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat span,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat span {
margin-left: 4px; }
.Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat:hover, .Pin.summary .leftSideButtonsWrapper .btn.isBrioFlat:active,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat:hover,
.Pin.summary .rightSideButtonsWrapper .btn.isBrioFlat:active {
background-color: #efefef; }
.Pin.summary .pinHolder {
cursor: pointer; }
.Pin.summary .pinHolder:hover .pinImageWrapper::after {
border-bottom-color: rgba(0, 0, 0, 0.08); }
.Pin.summary .pinHolder:active .pinImageWrapper::after {
border-bottom-color: rgba(0, 0, 0, 0.12); }
.Pin.summary .pinImageDim {
bottom: 0;
left: 0;
right: 0;
top: 0;
overflow: hidden;
position: absolute; }
.Pin.summary .pinImageDim .dimOverlay {
bottom: 0;
left: 0;
right: 0;
top: 0;
background-color: #000;
border-radius: 6px 6px 0 0;
opacity: .1;
position: absolute; }
.Pin.summary .pinImageDim .dimOverlay.webResultOverlay {
border-radius: 0; }
.Pin.summary .pinImageDim .dimGradient {
background-color: black;
background-color: rgba(0, 0, 0, 0.15);
background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.3));
background: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
bottom: 0;
height: 100px;
left: 0;
position: absolute;
right: 0; }
.Pin.sterlingPin {
box-shadow: none; }
.Pin.sterlingPin .pinMask {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 102; }
/* desktop.scss */
/* stylelint-disable at-rule-no-unknown */
.Pin {
background-color: transparent;
box-shadow: none !important; }
.Pin.imageGrid {
border-radius: 8px;
padding: 8px; }
.Pin.imageGrid .pinImageWrapper img {
border-radius: 8px; }
.Pin.summary.imageOnlyWeb .pinMeta {
min-height: 13px; }
.Pin.summary .pinImageWrapper,
.Pin.summary .hoverMask {
border-radius: 8px; }
.Pin.summary .pinHolder::after {
background: rgba(0, 0, 0, 0.02);
border-radius: 8px;
bottom: 0;
content: " ";
left: 0;
position: absolute;
right: 0;
top: 0; }
.Pin.summary .pinDomain {
display: none; }
.Pin.summary .pinWrapper {
cursor: zoom-in;
margin: -8px;
padding: 8px;
position: relative; }
.Pin.summary .pinWrapper::before {
background: rgba(0, 0, 0, 0.05);
border-radius: 8px;
content: " " !important;
height: 100%;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
-webkit-transform: scale(0.96);
transform: scale(0.96);
width: 100%;
z-index: 3; }
.Pin.summary .pinWrapper:hover::before {
-webkit-animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards;
animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; }
.Pin.summary .pinWrapper.disableHover {
pointer-events: none; }
.Pin.summary .pinCredits > .pinCreditWrapper {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 4px;
padding-left: 4px;
padding-right: 4px;
position: relative; }
.Pin.summary .pinCredits > .pinCreditWrapper:hover {
background: transparent; }
.Pin.summary .pinCredits > .pinCreditWrapper:hover a {
text-decoration: underline; }
.Pin.summary .pinCredits > .pinCreditWrapper .creditItem {
/* Fix for Chrome 44 bug: https://code.google.com/p/chromium/issues/detail?id=506893 */
border-radius: 4px;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
max-width: 100%;
min-height: 0;
/* 1 */
min-width: 0;
/* 1 */
overflow: hidden;
padding: 0;
text-overflow: ellipsis;
white-space: nowrap; }
.Pin.summary .pinCredits > .pinCreditWrapper .creditItem:hover {
color: #555; }
.Pin.summary .pinCredits > .pinCreditWrapper .creditItem > a {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.Pin.summary .pinCredits > .pinCreditWrapper .creditItem .creditName,
.Pin.summary .pinCredits > .pinCreditWrapper .creditItem .creditTitle {
color: #555;
width: 125px; }
.Pin.summary .pinCredits > .pinCreditWrapper .creditItem .creditName {
font-weight: bold; }
.Pin.summary .pinCredits > .pinCreditWrapper .creditItem .creditTitle {
font-weight: normal; }
.Pin.summary .pinCredits > .pinCreditWrapper .creditItem .creditImg.user::after {
display: none; }
.Pin.summary .pinCredits > .pinCreditWrapper .creditItem .creditImg,
.Pin.summary .pinCredits > .pinCreditWrapper .creditItem .creditImg img {
height: 24px;
width: 24px; }
.Pin.summary .pinCredits > .pinCreditWrapper .creditItem .creditImg {
background-color: #efefef;
-webkit-box-flex: 0;
-ms-flex: none;
flex: none; }
.Pin.summary .pinCredits > .pinCreditWrapper .creditItem .creditImg.user .heightContainer {
position: relative; }
.Pin.summary .pinCredits > .pinCreditWrapper .creditItem .creditImg.user .heightContainer::after {
background: rgba(0, 0, 0, 0.02);
border-radius: 50%;
content: " ";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%; }
.Pin.summary .pinCredits > .creditItem {
border-radius: 4px;
max-width: 100%;
overflow: hidden;
padding: 0 4px;
text-overflow: ellipsis;
white-space: nowrap; }
.Pin.summary .pinCredits > .creditItem:hover {
background-color: #efefef; }
.Pin.summary .pinCredits > .creditItem > a {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.Pin.summary .pinCredits > .creditItem .creditName,
.Pin.summary .pinCredits > .creditItem .creditTitle {
color: #b5b5b5;
max-width: 160px; }
.Pin.summary .pinCredits > .creditItem .creditName {
font-weight: normal; }
.Pin.summary .pinCredits > .creditItem .creditTitle {
font-weight: bold; }
.Pin.summary.pinWithSocialCounts .pinMeta,
.Pin.summary.pinWithSocialCounts .richPinMeta {
max-width: 145px; }
.Pin.summary.pinWithSocialCounts .pinDpSocialCounts {
position: absolute;
right: 0;
top: 1px; }
.Pin.summary .fadeContainer img {
color: transparent; }
.Pin .pinCredits {
border-top: none !important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse; }
.Pin .pinImageWrapper::after {
display: none; }
.Pin .pinImageActionButtonWrapper .pinImageDim {
border-radius: 8px; }
.Pin .creditFooter {
border-top: none !important;
margin-bottom: 4px;
padding: 0 4px !important;
width: 100% !important; }
.PinCount .pinIcon {
width: 7px;
height: 9px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -363px -259px no-repeat;
display: inline-block;
margin-right: 3px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.PinCount .pinIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -389px -110px;
background-size: 399px 382px; } }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
/* stylelint-disable-next-line at-rule-no-unknown */
.PinDescriptionComment.detailed {
clear: both;
padding: 0 40px 16px; }
.PinDescriptionComment.detailed .userThumbContainer {
position: relative;
float: left;
margin-right: 15px;
width: 50px; }
.PinDescriptionComment.detailed .userThumbContainer::after {
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 50px;
left: 0;
position: absolute;
top: 0;
width: 50px; }
.PinDescriptionComment.detailed .userThumbContainer .userThumb {
border-radius: 50%;
height: 50px;
width: 50px; }
.PinDescriptionComment.detailed .userThumbContainer.detailed {
position: relative;
margin-right: 8px;
width: 40px; }
.PinDescriptionComment.detailed .userThumbContainer.detailed::after {
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 40px;
left: 0;
position: absolute;
top: 0;
width: 40px; }
.PinDescriptionComment.detailed .userThumbContainer.detailed .userThumb {
border-radius: 50%;
height: 40px;
width: 40px; }
.PinDescriptionComment.detailed .userThumb {
-webkit-transform: translateZ(0);
overflow: hidden; }
.PinDescriptionComment.detailed .commenterNameCommentText {
margin-left: 65px; }
.PinDescriptionComment.detailed .commenterNameCommentText.detailed {
margin-left: 48px;
margin-top: -10px; }
.PinDescriptionComment.detailed .commenterNameCommentText.detailed.isAddComment {
margin-top: 0; }
.PinDescriptionComment.detailed .commentDescriptionCreatorWrapper {
padding-top: 7px; }
.PinDescriptionComment.detailed .commentDescriptionContentWrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
.PinDescriptionComment.detailed .commentDescriptionContentWrapper .commentDescriptionTimeAgoWrapper {
margin-top: -10px;
position: relative; }
.PinDescriptionComment.detailed .pinDescriptionComment .commentDescriptionCreator,
.PinDescriptionComment.detailed .pinDescriptionComment .commentDescriptionContent {
color: #444; }
.PinDescriptionComment.detailed .pinDescriptionComment {
line-height: 26px;
margin-bottom: 0;
padding: 0;
/* css specificity override */ }
.PinDescriptionComment.detailed .pinDescriptionComment .commentDescriptionContent {
margin-top: -5px; }
.PinDescriptionComment.detailed .pinDescriptionComment .commentDescriptionContent a {
color: #444; }
.PinDescriptionComment.detailed .pinDescriptionComment .commentDescriptionCreator {
font-size: 15px; }
.PinDescriptionComment.detailed .pinDescriptionComment .commentDescriptionTimeAgoWrapper .commentDescriptionTimeAgo {
font-size: 14px; }
.PinDescriptionComment.detailed .commenterWrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
.PinDescriptionComment.detailed .addCommentForm {
margin-top: 10px; }
.PinDescriptionComment .content {
resize: vertical; }
.PinDescriptionComment .addComment {
display: none;
margin-top: 7px; }
.PinDescriptionComment .commentDescriptionCreatorWrapper,
.PinDescriptionComment .boardName {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.PinDescriptionComment .commentDescriptionCreatorWrapper,
.PinDescriptionComment .commentDescriptionTimeAgoWrapper {
display: inline-block;
vertical-align: middle; }
.PinDescriptionComment.summary .userThumbContainer {
position: relative;
float: left;
margin-right: 6px;
width: 30px; }
.PinDescriptionComment.summary .userThumbContainer::after {
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 30px;
left: 0;
position: absolute;
top: 0;
width: 30px; }
.PinDescriptionComment.summary .userThumbContainer .userThumb {
border-radius: 50%;
height: 30px;
width: 30px; }
.PinDescriptionComment.summary .userThumbContainer.detailed {
position: relative;
margin-right: 8px;
width: 40px; }
.PinDescriptionComment.summary .userThumbContainer.detailed::after {
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 40px;
left: 0;
position: absolute;
top: 0;
width: 40px; }
.PinDescriptionComment.summary .userThumbContainer.detailed .userThumb {
border-radius: 50%;
height: 40px;
width: 40px; }
.PinDescriptionComment.summary .userThumb {
-webkit-transform: translateZ(0);
overflow: hidden; }
.PinDescriptionComment.summary .commenterNameCommentText {
margin-left: 36px; }
.PinDescriptionComment.summary .commenterNameCommentText.detailed {
margin-left: 48px;
margin-top: -10px; }
.PinDescriptionComment.summary .commenterNameCommentText.detailed.isAddComment {
margin-top: 0; }
.PinDescriptionComment.summary .addCommentForm {
display: inline-block;
margin-bottom: 5px;
width: 172px; }
.PinDescriptionComment.summary .addCommentForm .content {
border-radius: 2px; }
.PinDescriptionComment.summary .commentDescriptionContent {
margin: 0;
margin-bottom: 5px; }
.PinDescriptionComment.summary .commenterNameCommentText {
font-size: 11px;
line-height: 15px;
width: 172px; }
.PinDescriptionComment.summary .commenterWrapper {
line-height: 11px; }
.PinDescriptionComment.summary .commenterWrapper .commentDescriptionCreator.delinked {
color: #717171;
font-weight: bold; }
.PinDescriptionComment.summary .commentDescriptionCreatorWrapper {
max-width: 172px; }
.PinDescriptionComment.detailed .pinUserCommentBox, .PinDescriptionComment.sentPin .pinUserCommentBox {
border-top: 1px solid #e3e3e3; }
.PinDescriptionComment.detailed .pinDescriptionComment, .PinDescriptionComment.sentPin .pinDescriptionComment {
overflow: hidden; }
.PinDescriptionComment.detailed .pinDescriptionComment .commentDescriptionCreatorWrapper, .PinDescriptionComment.sentPin .pinDescriptionComment .commentDescriptionCreatorWrapper {
max-width: 500px; }
.PinDescriptionComment.detailed .pinDescriptionComment .commentDescriptionCreator, .PinDescriptionComment.sentPin .pinDescriptionComment .commentDescriptionCreator {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #454545;
font-size: 16px; }
.PinDescriptionComment.detailed .pinDescriptionComment .commentDescriptionTimeAgo, .PinDescriptionComment.sentPin .pinDescriptionComment .commentDescriptionTimeAgo {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #999;
font-size: 13px;
font-weight: normal; }
.PinDescriptionComment.detailed .pinDescriptionComment .commentDescriptionContent, .PinDescriptionComment.sentPin .pinDescriptionComment .commentDescriptionContent {
color: #171717;
font-size: 15px;
font-weight: normal;
line-height: 17px;
margin-bottom: 0;
max-width: 600px; }
.PinDescriptionComment.detailed .pinDescriptionComment .commentDescriptionContent a, .PinDescriptionComment.sentPin .pinDescriptionComment .commentDescriptionContent a {
color: #171717; }
.PinDescriptionComment.detailed .pinDescriptionComment .content, .PinDescriptionComment.sentPin .pinDescriptionComment .content {
border-radius: 6px;
min-height: 40px; }
.PinDescriptionComment.sentPin .userThumbContainer {
position: relative;
float: left;
margin-right: 15px;
width: 54px; }
.PinDescriptionComment.sentPin .userThumbContainer::after {
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 54px;
left: 0;
position: absolute;
top: 0;
width: 54px; }
.PinDescriptionComment.sentPin .userThumbContainer .userThumb {
border-radius: 50%;
height: 54px;
width: 54px; }
.PinDescriptionComment.sentPin .userThumbContainer.detailed {
position: relative;
margin-right: 8px;
width: 40px; }
.PinDescriptionComment.sentPin .userThumbContainer.detailed::after {
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 40px;
left: 0;
position: absolute;
top: 0;
width: 40px; }
.PinDescriptionComment.sentPin .userThumbContainer.detailed .userThumb {
border-radius: 50%;
height: 40px;
width: 40px; }
.PinDescriptionComment.sentPin .userThumb {
-webkit-transform: translateZ(0);
overflow: hidden; }
.PinDescriptionComment.sentPin .commenterNameCommentText {
margin-left: 69px; }
.PinDescriptionComment.sentPin .commenterNameCommentText.detailed {
margin-left: 48px;
margin-top: -10px; }
.PinDescriptionComment.sentPin .commenterNameCommentText.detailed.isAddComment {
margin-top: 0; }
.PinDescriptionComment.sentPin .commentDescriptionContent,
.PinDescriptionComment.sentPin .addCommentForm {
margin-top: 5px; }
/* desktop.scss */
.PinDescriptionComment .detailed .commentDescriptionContent {
line-height: 18px;
width: 377px; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.PinEdit {
max-width: 675px; }
.PinEdit .placeWrapper {
overflow: visible; }
.PinEdit .placeWrapper::after {
clear: both;
content: "";
display: table; }
.PinEdit .PinForm .standardForm > ul {
overflow: visible; }
/* desktop.scss */
.PinEdit .PinForm .standardForm > ul {
margin-right: 170px; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.PinForm .BoardPickerDropdownButton {
width: 100%; }
.PinForm .ImageUploader {
float: left;
padding: 0; }
.PinForm .ImageUploader .Button.btn.large {
float: left;
padding-bottom: 8px;
padding-top: 7px; }
.PinForm .ImageUploader .uploaderProgress {
float: left;
height: 22px;
max-width: 294px;
padding: 1px 8px 10px; }
.PinForm .ImageUploader .uploaderProgress span {
margin-left: 0; }
.PinForm .PinPreview {
position: relative;
overflow: hidden;
background: #f7f7f7;
border: 1px solid #b1b1b1;
border-radius: 3px;
float: right;
height: 147px;
margin: 15px 15px 0 0;
position: relative;
width: 147px;
margin-right: 20px; }
.PinForm .PinPreview::after {
border-radius: 0;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 149px;
left: 0;
position: absolute;
top: 0;
width: 149px; }
.PinForm .PinPreview img {
bottom: 0;
display: block;
left: 0;
margin: auto;
max-height: 100%;
position: absolute;
right: 0;
top: 0;
width: auto; }
.PinForm .pinnerName {
margin-left: 2px; }
.PinForm .userWrapper .pinFormUser {
line-height: inherit; }
.PinForm .standardForm > ul {
overflow: hidden; }
.PinForm .socialShareWrapper {
display: inline-block;
margin-top: 9px; }
.PinForm .socialShareWrapper span {
font-weight: bold; }
.PinForm .socialShareWrapper input {
margin-right: 1px;
position: relative;
top: -1px; }
.PinForm .socialShareWrapper .facebookInput {
margin-right: 30px; }
/* desktop.scss */
.PinForm .standardForm > ul {
width: 500px; }
.Pinnable {
overflow: hidden; }
.Pinnable.add_to_map {
cursor: pointer; }
.Pinnable.add_to_map .pinImageWrapper {
overflow: hidden;
border-radius: 6px;
display: table-cell;
text-align: center;
vertical-align: middle; }
.Pinnable.add_to_map .pinHolder {
position: relative;
display: table;
height: 152px;
width: 152px; }
.Pinnable.add_to_map .pinHolder::after {
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 152px;
left: 0;
position: absolute;
top: 0;
width: 152px; }
.Pinnable.add_to_map .pinHolder img {
border-radius: 3px;
height: 152px;
width: 152px; }
.Pinnable.add_to_map .pinHolder img {
border-radius: 0;
height: 152px;
width: auto; }
.Pinnable.add_to_map .pinWrapper {
position: relative; }
.Pinnable.add_to_map .pinWrapper:active::before, .Pinnable.add_to_map .pinWrapper:hover::before {
bottom: 0;
left: 0;
right: 0;
top: 0;
background: rgba(0, 0, 0, 0.2);
content: " ";
position: absolute;
z-index: 10; }
.Pinnable.add_to_map .pinWrapper:hover .hoverSelectedStateIconWrapper {
visibility: visible; }
.Pinnable.summary .pinImageWrapper {
background: #fff;
text-align: center; }
.PinPromoteButton {
height: 33px;
padding-top: 7px; }
.PinPromoteButton em {
width: 24px;
height: 24px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -194px -218px no-repeat;
margin-top: -4px;
position: relative; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.PinPromoteButton em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -230px -303px;
background-size: 428px 427px; } }
.PinUploader {
outline: none;
width: 320px; }
.DomainVerify.inModal {
width: 580px; }
.DomainVerify .standardForm .motivation, .DomainVerify .standardForm .errorReason {
padding-top: 7px; }
.DomainVerify .standardForm .fieldHelpText {
font-size: 11px;
margin-left: 143px;
margin-top: 7px; }
.DomainVerify .standardForm .helpText {
display: table;
height: 30px;
width: 250px; }
.DomainVerify .standardForm .helpText .helpContainer {
display: table-cell;
vertical-align: middle; }
.DomainVerify .standardForm .helpText a {
cursor: pointer; }
.DomainVerify .standardForm .errorSection,
.DomainVerify .standardForm .filename {
display: none; }
.DomainVerify .contentWrapper {
padding: 15px; }
.DomainVerify .contentWrapper .descriptionBlurb, .DomainVerify .contentWrapper .metaTag, .DomainVerify .contentWrapper .instructions {
margin-bottom: 10px; }
.DomainVerify .contentWrapper .verifyThroughDownload .filename {
display: block;
margin-top: 10px; }
.DomainVerify .contentWrapper .downloadLink {
cursor: pointer; }
.FollowingSwitcher .navigateBar {
text-align: center; }
.FollowingSwitcher .navigateScope {
margin-bottom: 5px;
margin-top: 15px;
text-align: center; }
.FollowingSwitcher .navigateScope .navScopeBtn {
min-width: 115px; }
.UserFollowPinsPreview {
margin: 0 auto;
overflow: hidden;
position: relative;
width: 100%; }
.UserFollowPinsPreview .pinSlot {
-webkit-transform: translateZ(0);
position: absolute;
top: 400px;
width: 236px; }
.UserFollowPinsPreview .pinSlot img {
border-radius: 6px;
margin-bottom: 14px; }
.UserFollowPinsPreview .pinSlotWrapper {
height: 100%;
margin: 0 auto;
position: relative; }
.UserFollowPinsPreview.followed .pinSlot {
top: -150px !important;
-webkit-transition: top 7s linear;
transition: top 7s linear; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.UserInfoBar.infoBar {
border: 0 0 auto;
border-radius: 0; }
.UserInfoBar.infoBar.centeredWithinWrapper.gridWidth:not(.divider) {
width: auto; }
.UserInfoBar.infoBar .divider hr {
background: #eee;
border: 0;
height: 1px;
margin: 0;
width: 100%; }
.UserInfoBar.infoBar .tabs {
left: 0;
width: 100%; }
.UserInfoBar.infoBar .tabs ul {
display: table;
margin: auto;
table-layout: fixed; }
.UserInfoBar.infoBar .tabs li {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #fff;
display: table-cell;
float: none;
line-height: 14px;
margin-right: -1px;
padding: 14px 0;
position: relative; }
.UserInfoBar.infoBar .tabs li.hideGetStarted {
display: none; }
.UserInfoBar.infoBar .tabs .label {
display: block;
font-weight: normal; }
/* desktop.scss */
.UserInfoBar {
background-color: #ececec;
background: -webkit-linear-gradient(#f3f3f3, #e5e5e5);
background: linear-gradient(#f3f3f3, #e5e5e5);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
clear: both;
color: #333;
height: 44px;
line-height: 44px;
margin-bottom: 2px;
max-width: 10000px;
position: relative;
border-left: 1px solid #d4d4d4;
border-left: 1px solid rgba(0, 0, 0, 0.17);
border-radius: 6px;
box-shadow: none;
box-sizing: border-box;
min-width: auto;
width: auto;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.UserInfoBar .headerText {
color: #555;
font-size: 16px;
font-weight: normal;
padding: 0 26px 0 13px; }
.UserInfoBar.loading {
min-height: 5px; }
.UserInfoBar li:first-child a.active {
box-shadow: -1px 0 3px rgba(0, 0, 0, 0.05) inset; }
.UserInfoBar li:last-child a.active {
box-shadow: 1px 0 3px rgba(0, 0, 0, 0.05) inset; }
.UserInfoBar li a {
box-shadow: 0 0 1px rgba(255, 255, 255, 0.9) inset;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
color: #777;
display: block;
font-weight: bold;
padding: 1px 20px 0;
text-shadow: none; }
.UserInfoBar li a:not(.disabled):focus, .UserInfoBar li a:not(.disabled):hover, .UserInfoBar li a.active {
background-color: #fafafa;
background: -webkit-linear-gradient(#fff, #f4f4f4);
background: linear-gradient(#fff, #f4f4f4);
color: #333; }
.UserInfoBar li a:active {
background: url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowLeftSide-5cbf77e0.png) repeat-y left top, url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowRightSide-96a21610.png) repeat-y right top, -webkit-linear-gradient(#fff, #f4f4f4);
background: url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowLeftSide-5cbf77e0.png) repeat-y left top, url(https://s.pinimg.com/webapp/style/images/infoBarActiveShadowRightSide-96a21610.png) repeat-y right top, linear-gradient(#fff, #f4f4f4);
color: #000; }
.UserInfoBar li a:focus .label,
.UserInfoBar li a:focus .value, .UserInfoBar li a:hover .label,
.UserInfoBar li a:hover .value, .UserInfoBar li a.active .label,
.UserInfoBar li a.active .value {
color: #555; }
.UserInfoBar .divider {
display: none; }
.UserInfoBar .centeredWithinWrapper, .UserInfoBar.centeredWithinWrapper {
max-width: 744px !important; }
.UserInfoBar.infoBar {
background: none;
background-color: #fff;
border: 0;
height: auto; }
.UserInfoBar.infoBar li:first-child a.active, .UserInfoBar.infoBar li:last-child a.active {
box-shadow: none; }
.UserInfoBar.infoBar li a:focus, .UserInfoBar.infoBar li a:hover, .UserInfoBar.infoBar li a.active {
background: none; }
@media (min-width: 0) and (max-width: 999px) {
.UserInfoBar.infoBar.centeredWithinWrapper.gridWidth:not(.divider) {
min-width: 764px;
padding: 0; } }
.UserInfoBar.infoBar.headerSizer {
max-width: none; }
.UserInfoBar.infoBar .tabs {
bottom: 0;
position: relative;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.UserInfoBar.infoBar .tabs ul {
margin: 0;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.UserInfoBar.infoBar .tabs li {
text-align: left; }
.UserInfoBar.infoBar .tabs li a {
box-sizing: border-box;
display: block;
width: 124px;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.UserInfoBar.infoBar .tabs li a.active .value,
.UserInfoBar.infoBar .tabs li a.active .label {
color: #555; }
.UserInfoBar.infoBar .tabs li a:not(.active):focus .label, .UserInfoBar.infoBar .tabs li a:not(.active):focus .value, .UserInfoBar.infoBar .tabs li a:not(.active):hover .label, .UserInfoBar.infoBar .tabs li a:not(.active):hover .value {
color: #9c9c9c; }
.UserInfoBar.infoBar .tabs li a:not(.active):active .label, .UserInfoBar.infoBar .tabs li a:not(.active):active .value {
color: #858585; }
.UserInfoBar.infoBar .tabs .value {
color: #b5b5b5;
display: inline-block;
padding-bottom: 0 !important;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.UserInfoBar.infoBar .tabs .label {
/* stylelint-disable-next-line at-rule-no-unknown */
color: #b5b5b5; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.UserProfileContent .userBoards {
overflow-y: scroll; }
.UserProfileContent .userBoards .title {
color: #333;
display: inline-block;
margin-left: 0; }
.UserProfileContent .userBoards .text {
color: #777;
display: inline-block;
font-weight: normal; }
.UserProfileContent .userBoards.ownProfile .Grid {
margin-bottom: 38px; }
.UserProfileContent .userBoards .help {
display: inline-block;
margin-left: 7px; }
.UserProfileContent .userBoards .help:hover {
color: #444; }
/* desktop.scss */
.UserProfileContent {
position: relative; }
.UserProfileContent .userNoBoards,
.UserProfileContent .userNoPins,
.UserProfileContent .userNoLikes,
.UserProfileContent .userNoFollowers,
.UserProfileContent .userNoFollowing {
color: #333;
text-align: center;
margin-top: 129px; }
.UserProfileContent .userNoBoards p,
.UserProfileContent .userNoPins p,
.UserProfileContent .userNoLikes p,
.UserProfileContent .userNoFollowers p,
.UserProfileContent .userNoFollowing p {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 17px;
margin: 0 0 1em; }
.UserProfileContent .userNoBoards .emptyIcon,
.UserProfileContent .userNoPins .emptyIcon,
.UserProfileContent .userNoLikes .emptyIcon,
.UserProfileContent .userNoFollowers .emptyIcon,
.UserProfileContent .userNoFollowing .emptyIcon {
display: inline-block;
margin-bottom: 18px; }
.UserProfileContent .userNoBoards .emptyIcon {
background: url(https://s.pinimg.com/webapp/style/images/empty_user_boards-1x-45ed0082.png) no-repeat;
background-size: contain;
height: 136px;
width: 124px; }
.UserProfileContent .userNoPins .emptyIcon {
background: url(https://s.pinimg.com/webapp/style/images/empty_user_pins-1x-977b487f.png) no-repeat;
background-size: contain;
height: 166px;
width: 100px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserProfileContent .userNoPins .emptyIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/empty_user_pins-2x-ec575230.png); } }
.UserProfileContent .userNoLikes .emptyIcon {
background: url(https://s.pinimg.com/webapp/style/images/empty_user_likes-1x-293dc9be.png) no-repeat;
background-size: contain;
height: 132px;
width: 153px; }
.UserProfileContent .userNoFollowers .emptyIcon {
background: url(https://s.pinimg.com/webapp/style/images/empty_followers-1x-7539a34c.png) no-repeat;
background-size: contain;
height: 142px;
width: 124px; }
.UserProfileContent .userNoFollowing .emptyIcon {
background: url(https://s.pinimg.com/webapp/style/images/empty_following-1x-85abe03c.png) no-repeat;
background-size: contain;
height: 142px;
width: 124px; }
.UserProfileContent.loading > div {
display: none; }
.UserProfileContent.loading > .Spinner {
display: block;
margin-top: 100px; }
.UserProfileContent .userNoPins {
margin-top: 100px; }
.UserProfileContent .UserProfileFollowingGrid .userNoBoards,
.UserProfileContent .UserProfileFollowingGrid .userNoPins,
.UserProfileContent .UserProfileFollowingGrid .userNoLikes,
.UserProfileContent .UserProfileFollowingGrid .userNoFollowers,
.UserProfileContent .UserProfileFollowingGrid .userNoFollowing {
color: #333;
text-align: center;
margin-top: 69px; }
.UserProfileContent .UserProfileFollowingGrid .userNoBoards p,
.UserProfileContent .UserProfileFollowingGrid .userNoPins p,
.UserProfileContent .UserProfileFollowingGrid .userNoLikes p,
.UserProfileContent .UserProfileFollowingGrid .userNoFollowers p,
.UserProfileContent .UserProfileFollowingGrid .userNoFollowing p {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 17px;
margin: 0 0 1em; }
.UserProfileContent .UserProfileFollowingGrid .userNoBoards .emptyIcon,
.UserProfileContent .UserProfileFollowingGrid .userNoPins .emptyIcon,
.UserProfileContent .UserProfileFollowingGrid .userNoLikes .emptyIcon,
.UserProfileContent .UserProfileFollowingGrid .userNoFollowers .emptyIcon,
.UserProfileContent .UserProfileFollowingGrid .userNoFollowing .emptyIcon {
display: inline-block;
margin-bottom: 18px; }
.UserProfileContent .UserProfileFollowingGrid .userNoBoards .emptyIcon {
background: url(https://s.pinimg.com/webapp/style/images/empty_user_boards-1x-45ed0082.png) no-repeat;
background-size: contain;
height: 136px;
width: 124px; }
.UserProfileContent .UserProfileFollowingGrid .userNoPins .emptyIcon {
background: url(https://s.pinimg.com/webapp/style/images/empty_user_pins-1x-977b487f.png) no-repeat;
background-size: contain;
height: 166px;
width: 100px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserProfileContent .UserProfileFollowingGrid .userNoPins .emptyIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/empty_user_pins-2x-ec575230.png); } }
.UserProfileContent .UserProfileFollowingGrid .userNoLikes .emptyIcon {
background: url(https://s.pinimg.com/webapp/style/images/empty_user_likes-1x-293dc9be.png) no-repeat;
background-size: contain;
height: 132px;
width: 153px; }
.UserProfileContent .UserProfileFollowingGrid .userNoFollowers .emptyIcon {
background: url(https://s.pinimg.com/webapp/style/images/empty_followers-1x-7539a34c.png) no-repeat;
background-size: contain;
height: 142px;
width: 124px; }
.UserProfileContent .UserProfileFollowingGrid .userNoFollowing .emptyIcon {
background: url(https://s.pinimg.com/webapp/style/images/empty_following-1x-85abe03c.png) no-repeat;
background-size: contain;
height: 142px;
width: 124px; }
.UserProfileContent .UserProfileFollowingGrid .Interest {
height: 236px;
width: 236px; }
.UserProfileContent .UserProfileFollowingGrid .Interest:hover .InterestFollowButton {
display: block; }
.UserProfileContent .UserProfileFollowingGrid .Interest .interestWrapper {
height: 236px;
width: 236px; }
.UserProfileFollow {
height: 100%;
overflow: hidden;
text-align: center; }
.UserProfileFollow .userProfileFakeHeader {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
height: 45px;
position: relative; }
.UserProfileFollow .userProfileFakeHeader em {
width: 104px;
height: 26px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -253px -166px no-repeat;
display: inline-block;
margin-top: 10px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserProfileFollow .userProfileFakeHeader em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -111px -201px;
background-size: 428px 427px; } }
.UserProfileFollow .userProfileFollowInfo {
background: #fff;
bottom: -1px;
box-shadow: 0 -20px 50px #eee;
padding: 0 0 40px;
position: absolute;
-webkit-transition: height 1s ease-in-out;
transition: height 1s ease-in-out;
width: 100%; }
.UserProfileFollow .userProfileFollowInfo .about {
color: #aaa;
font-size: 15px;
line-height: 22px;
margin: 0 auto;
max-width: 800px;
padding: 0 10px; }
.UserProfileFollow .userProfileFollowInfo .userDescription {
color: #444;
font-size: 15px;
line-height: 20px;
margin: 8px auto 5px;
max-width: 750px;
text-align: center;
text-shadow: none; }
.UserProfileFollow .userProfileFollowInfo img.profileImage {
box-shadow: 0 0 10px #aaa;
height: 64px;
margin-top: -32px;
overflow: hidden;
width: 64px; }
.UserProfileFollow .userProfileFollowInfo .userName {
color: #333;
color: rgba(21, 21, 21, 0.8);
font-size: 36px;
line-height: 32px;
padding-top: 10px;
text-align: center; }
.UserProfileFollow .userProfileFollowInfo .postUnFollow {
margin-bottom: 10px;
margin-top: 20px; }
.UserProfileFollow .userProfileFollowInfo .stats {
color: #aaa;
font-size: 15px;
margin: 15px 0 10px; }
.UserProfileFollow .userProfileFollowInfo .stats .pinCount::before {
content: "\2022"; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.UserProfileHeader {
position: relative;
-webkit-transition: opacity 1s ease;
transition: opacity 1s ease;
z-index: 670; }
.UserProfileHeader .divider {
color: #eee;
font-size: 10px;
position: relative;
text-align: right; }
.UserProfileHeader .divider hr {
background: #eee;
border: 0;
height: 1px;
margin: 0;
width: 100%; }
.UserProfileHeader .iconsLinksEtc {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #9a9a9a;
display: inline-block;
font-size: 12px;
font-weight: 500;
line-height: 20px;
margin: 12px 0;
max-height: 40px; }
.UserProfileHeader .iconsLinksEtc .locationWrapper,
.UserProfileHeader .iconsLinksEtc .websiteWrapper {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px; }
.UserProfileHeader .iconsLinksEtc .location {
width: 11px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -243px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserProfileHeader .iconsLinksEtc .location {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -352px -320px;
background-size: 399px 382px; } }
.UserProfileHeader .iconsLinksEtc .verifiedDomain {
width: 11px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -204px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserProfileHeader .iconsLinksEtc .verifiedDomain {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -69px -368px;
background-size: 399px 382px; } }
.UserProfileHeader .iconsLinksEtc .website {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #9a9a9a;
font-weight: 500;
max-width: 200px; }
.UserProfileHeader .iconsLinksEtc .website:hover {
color: #cb2027; }
.UserProfileHeader .iconsLinksEtc .twitter {
width: 13px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -16px -393px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserProfileHeader .iconsLinksEtc .twitter {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -298px -320px;
background-size: 399px 382px; } }
.UserProfileHeader .iconsLinksEtc .twitter:hover {
width: 13px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -31px -393px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserProfileHeader .iconsLinksEtc .twitter:hover {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -312px -320px;
background-size: 399px 382px; } }
.UserProfileHeader .iconsLinksEtc .facebook {
width: 11px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -230px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserProfileHeader .iconsLinksEtc .facebook {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -93px -368px;
background-size: 399px 382px; } }
.UserProfileHeader .iconsLinksEtc .facebook:hover {
width: 11px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -217px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserProfileHeader .iconsLinksEtc .facebook:hover {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -81px -368px;
background-size: 399px 382px; } }
.UserProfileHeader .iconsLinksEtc .middot {
color: #ccc;
margin-left: 1px;
margin-right: 1px; }
.UserProfileHeader.invisible {
opacity: 0; }
.UserProfileHeader .verifiedIdentify {
width: 11px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -204px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserProfileHeader .verifiedIdentify {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -69px -368px;
background-size: 399px 382px; } }
.UserProfileHeader .userFollowButtonWrapper {
display: inline-block; }
/* desktop.scss */
.UserProfileHeader::after {
clear: both;
content: "";
display: table; }
.UserProfileHeader .centeredWithinWrapper {
box-sizing: border-box;
max-width: 744px;
min-width: auto; }
.UserProfileHeader.profileHeader {
margin: 0; }
.UserProfileHeader.profileHeader .headerSizer {
box-sizing: border-box;
max-width: 744px;
min-width: auto;
width: auto; }
@media (min-width: 0) and (max-width: 999px) {
.UserProfileHeader.profileHeader .headerSizer {
min-width: 764px; } }
.UserProfileHeader.profileHeader .header {
background: #fff;
color: #333;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 0;
padding-top: 0;
position: relative; }
.UserProfileHeader.profileHeader .header.fixed {
position: inherit; }
.UserProfileHeader.profileHeader .header.fixed .fixedHeader {
position: fixed; }
.UserProfileHeader.profileHeader .header[itemtype="https://schema.org/Organization"] .profileInfo {
min-height: 216px; }
.UserProfileHeader.profileHeader .header[itemtype="https://schema.org/Organization"] .profileImage {
margin-top: 0; }
.UserProfileHeader.profileHeader .profileImage {
height: 99px;
margin: 0 0 0 auto;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
padding-top: 0;
position: relative;
width: 99px;
z-index: 0;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.UserProfileHeader.profileHeader .profileImage img {
border-radius: 100%;
height: 99px;
width: 99px; }
.UserProfileHeader.profileHeader .profileImage .Button {
border-radius: 2px;
display: none;
margin: 0 auto;
z-index: 3; }
.UserProfileHeader.profileHeader .profileImage:hover .Button {
display: block; }
.UserProfileHeader.profileHeader .profileImage::after {
background-color: rgba(0, 0, 0, 0.02);
border-radius: 50%;
bottom: 0;
content: " ";
left: 0;
position: absolute;
right: 0;
top: 0;
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */ }
.UserProfileHeader.profileHeader .fixedHeaderNameAndImage {
-webkit-backface-visibility: hidden;
/* stylelint-disable-next-line at-rule-no-unknown */
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 38px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: -50px;
width: 100%; }
.UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderImage {
display: none; }
.UserProfileHeader.profileHeader .fixedHeaderNameAndImage .fixedHeaderName {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #555;
display: block;
font-weight: bold;
opacity: 0;
padding-left: 0;
text-align: center;
-webkit-transition: opacity 300ms ease-in-out;
transition: opacity 300ms ease-in-out;
vertical-align: middle;
width: 528px;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.UserProfileHeader.profileHeader .fixed .shadow .fixedHeaderNameAndImage > .fixedHeaderName {
opacity: 1; }
.UserProfileHeader.profileHeader .editButtonWrapper {
bottom: 20px;
height: 20px;
position: absolute;
width: 60px; }
.UserProfileHeader.profileHeader .fixedHeader {
background: rgba(255, 255, 255, 0.97);
left: 0;
margin-bottom: -70px;
position: fixed;
right: 0;
top: 56px;
z-index: 103; }
@media (max-width: 764px) {
.UserProfileHeader.profileHeader .fixedHeader {
width: 764px; } }
@media (min-width: 800px) {
.UserProfileHeader.profileHeader .fixedHeader {
top: 64px; } }
.UserProfileHeader.profileHeader .fixedHeader.shadow .divider {
width: 100%; }
.UserProfileHeader.profileHeader .profileInfo {
box-sizing: border-box;
max-width: 520px;
width: 58.33333%;
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */ }
.UserProfileHeader.profileHeader .titleBar {
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */
box-sizing: border-box;
height: auto;
margin: 0 auto;
position: relative; }
.UserProfileHeader.profileHeader .name {
color: #555;
height: auto;
margin-left: 0;
margin-right: 0;
margin-top: 0;
max-width: 100%;
text-align: left;
/* stylelint-disable-next-line at-rule-no-unknown */
/* stylelint-disable-next-line at-rule-no-unknown */ }
.UserProfileHeader.profileHeader .name .nameInner {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline;
max-width: 100%;
overflow: visible;
white-space: normal;
word-wrap: break-word; }
.UserProfileHeader.profileHeader .name .verifiedIdentify {
width: 26px;
height: 26px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -119px -260px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
position: relative;
top: auto; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserProfileHeader.profileHeader .name .verifiedIdentify {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -117px -256px;
background-size: 399px 382px; } }
@media (min-width: 1312px) {
.UserProfileHeader.profileHeader .name .verifiedIdentify {
top: -4px; } }
.UserProfileHeader.profileHeader .buttons {
float: none;
position: relative; }
.UserProfileHeader.profileHeader .buttons > *:not(:last-child) {
margin-right: 6px; }
.UserProfileHeader.profileHeader .buttons::after {
clear: both;
content: "";
display: table; }
.UserProfileHeader.profileHeader .buttons .Button {
height: auto !important; }
.UserProfileHeader.profileHeader .buttons .editProfile,
.UserProfileHeader.profileHeader .buttons .userProfileMenu:not(.UnblockButton) {
height: 38px !important;
margin-right: 13px;
width: 38px; }
.UserProfileHeader.profileHeader .buttons .editProfile.active::after, .UserProfileHeader.profileHeader .buttons .editProfile:hover::after, .UserProfileHeader.profileHeader .buttons .editProfile:focus::after,
.UserProfileHeader.profileHeader .buttons .userProfileMenu:not(.UnblockButton).active::after,
.UserProfileHeader.profileHeader .buttons .userProfileMenu:not(.UnblockButton):hover::after,
.UserProfileHeader.profileHeader .buttons .userProfileMenu:not(.UnblockButton):focus::after {
border-radius: 50% !important;
height: 48px !important;
left: -5px !important;
top: -3px !important;
width: 48px !important; }
.UserProfileHeader.profileHeader .buttons .userProfileMenu em {
width: 24px;
height: 6px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -62px -375px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserProfileHeader.profileHeader .buttons .userProfileMenu em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -334px -285px;
background-size: 399px 382px; } }
.UserProfileHeader.profileHeader .buttons .editProfile em {
width: 24px;
height: 24px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -219px -234px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
height: 24px;
top: -1px;
width: 24px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserProfileHeader.profileHeader .buttons .editProfile em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -214px -231px;
background-size: 399px 382px; } }
.UserProfileHeader.profileHeader .UserFollowButton {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 32px;
max-width: 175px; }
.UserProfileHeader.profileHeader .editProfile {
height: 32px; }
.UserProfileHeader.profileHeader .editProfile:hover {
border-color: #b8b8b8; }
.UserProfileHeader.profileHeader .userProfileMenu {
border-radius: 3px;
height: 32px;
padding-top: 6px;
position: relative;
right: 0;
top: 0; }
.UserProfileHeader.profileHeader .about {
color: #333;
margin: 0;
position: relative;
width: auto; }
@media (min-width: 1000px) and (max-width: 1249px) {
.UserProfileHeader.profileHeader .about {
width: 505px; } }
@media (min-width: 0) and (max-width: 999px) {
.UserProfileHeader.profileHeader .about {
width: 420px; } }
.UserProfileHeader.profileHeader .about .aboutText {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* stylelint-disable-next-line at-rule-no-unknown */
color: #555;
margin: 0;
margin-bottom: 10px;
overflow: hidden;
padding: 0; }
.UserProfileHeader.profileHeader .about .iconsLinksEtc {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #9a9a9a;
display: inline-block;
font-size: 12px;
font-weight: 500;
line-height: inherit;
margin: 0;
max-height: 40px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* Show a `/` instead of `·` */ }
.UserProfileHeader.profileHeader .about .iconsLinksEtc ul li:first-child {
padding-left: 0; }
.UserProfileHeader.profileHeader .about .iconsLinksEtc .locationWrapper,
.UserProfileHeader.profileHeader .about .iconsLinksEtc .websiteWrapper {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%; }
.UserProfileHeader.profileHeader .about .iconsLinksEtc .websiteWrapper a {
max-width: 100%; }
.UserProfileHeader.profileHeader .about .iconsLinksEtc .locationWrapper {
color: #555;
font-weight: bold;
margin-bottom: 0;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.UserProfileHeader.profileHeader .about .iconsLinksEtc .location {
display: none; }
.UserProfileHeader.profileHeader .about .iconsLinksEtc .verifiedDomain {
width: 11px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -204px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserProfileHeader.profileHeader .about .iconsLinksEtc .verifiedDomain {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -69px -368px;
background-size: 399px 382px; } }
.UserProfileHeader.profileHeader .about .iconsLinksEtc .website {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #555;
font-weight: bold;
margin-bottom: 0;
margin-top: 0;
max-width: 200px;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.UserProfileHeader.profileHeader .about .iconsLinksEtc .website:hover {
color: #cb2027; }
.UserProfileHeader.profileHeader .about .iconsLinksEtc .twitter {
margin-top: 3px;
width: 13px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -16px -393px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserProfileHeader.profileHeader .about .iconsLinksEtc .twitter {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -298px -320px;
background-size: 399px 382px; } }
.UserProfileHeader.profileHeader .about .iconsLinksEtc .twitter:hover {
width: 13px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -31px -393px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserProfileHeader.profileHeader .about .iconsLinksEtc .twitter:hover {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -312px -320px;
background-size: 399px 382px; } }
.UserProfileHeader.profileHeader .about .iconsLinksEtc .facebook {
margin-top: 3px;
width: 11px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -230px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserProfileHeader.profileHeader .about .iconsLinksEtc .facebook {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -93px -368px;
background-size: 399px 382px; } }
.UserProfileHeader.profileHeader .about .iconsLinksEtc .facebook:hover {
width: 11px;
height: 11px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -217px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserProfileHeader.profileHeader .about .iconsLinksEtc .facebook:hover {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -81px -368px;
background-size: 399px 382px; } }
.UserProfileHeader.profileHeader .about .iconsLinksEtc .middot {
color: #fff;
font-size: 1px;
margin-left: 1px;
margin-right: 1px;
position: relative; }
.UserProfileHeader.profileHeader .about .iconsLinksEtc .middot::after {
color: #555;
content: "/";
font-weight: normal;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.UserProfileHeader.profileHeader .about li {
float: left;
padding: 0 2px; }
.UserProfileHeader.profileHeader .about textarea {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: url(https://s.pinimg.com/webapp/style/images/icon_edit-1x-6304bf31.png) no-repeat 10px 13px;
border-color: #cacaca;
border-radius: 4px;
border-width: 1px;
color: #9a9a9a;
display: block;
font-size: 16px;
height: 64px;
margin-top: 7px;
padding-left: 25px;
padding-top: 10px;
width: 495px; }
.UserProfileHeader.profileHeader .about .saveButton {
float: left;
margin-top: 8px; }
.UserProfileHeader.profileHeader .emptyProfile .profileInfo {
padding-bottom: 0; }
.UserProfileHeader.profileHeader .emptyProfile .iconsLinksEtc {
margin-top: 4px; }
.UserProfileHeader.noFollowBar .fixedHeader {
display: none; }
.UserProfileHeader.disableHeader {
z-index: 0; }
/* 33 vertical boints */
@media (min-width: 360px) {
.UserProfileHeader.profileHeader .profileImage, .UserProfileHeader.profileHeader .profileImage img {
height: 132px;
width: 132px; } }
@media (min-width: 800px) {
.UserProfileHeader.profileHeader .profileImage, .UserProfileHeader.profileHeader .profileImage img {
height: 198px;
width: 198px; } }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.UserProfilePage {
position: relative; }
.UserProfilePage .headerSizer {
max-width: 1236px; }
.UserProfilePage .Board {
float: left; }
.UserProfilePage .Board .boardCover {
clear: both; }
/* desktop.scss */
.UserProfilePage {
/* Secret Boards */ }
.UserProfilePage .fixedHeader .divider {
display: none; }
.UserProfilePage .userBoards {
overflow-y: auto; }
.UserProfilePage .userBoards .BoardIcons .secretIcon,
.UserProfilePage .userBoards .boardName .secretIcon {
width: 20px;
height: 20px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) 0 -353px no-repeat;
margin-top: 0; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserProfilePage .userBoards .BoardIcons .secretIcon,
.UserProfilePage .userBoards .boardName .secretIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: 0 -347px;
background-size: 399px 382px; } }
.UserProfilePage .userBoards .GridItems.padItems > .item {
margin: 0;
padding: 24px 12px;
width: 236px; }
.UserProfilePage .UserProfileContent .User.gridItem {
box-shadow: none; }
.UserProfilePage .UserProfileContent .User .hoverMask {
display: none; }
.UserProfilePage .UserProfileContent .User .thumbContainer {
background-color: #efefef; }
.UserProfilePage .UserProfileContent .User .thumbContainer::after {
display: none; }
.TastemakerEmbed {
border-radius: 8px;
height: 600px;
-webkit-mask-image: -webkit-radial-gradient(#fff, #000);
mask-image: radial-gradient(#fff, #000);
overflow: hidden;
position: relative;
width: 500px; }
.TastemakerEmbed iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%; }
.ToggleButton {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 31px; }
.ToggleButton:not(.primary):not(.toggled):not(.disabled) .buttonText {
color: #bd081c; }
.BrowserExtensionUninstallPage .standardForm {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px; }
.BrowserExtensionUninstallPage .standardForm > h1 {
border-bottom: 1px solid #e7e7e7;
font-size: 20px;
padding: 17px 18px 13px; }
.BrowserExtensionUninstallPage .standardForm .formTitle {
border-bottom: 1px solid #e7e7e7;
font-size: 20px;
padding: 17px 18px 13px; }
.BrowserExtensionUninstallPage .standardForm ul {
padding: 19px 19px 7px; }
.BrowserExtensionUninstallPage .standardForm h2 {
font-weight: bold;
margin-bottom: 12px; }
.BrowserExtensionUninstallPage .standardForm li {
border: 0;
margin-bottom: 12px;
padding: 0; }
.BrowserExtensionUninstallPage .standardForm input[type="radio"] {
height: 16px;
margin-left: 20px;
width: 16px; }
.BrowserExtensionUninstallPage .standardForm label {
color: #333;
padding-left: 1px;
vertical-align: middle; }
.BrowserExtensionUninstallPage .standardForm .hiddenText {
background-color: #e3f8fe;
border-radius: 5px;
display: none;
margin-bottom: 12px;
margin-left: 43px;
padding: 10px; }
.BrowserExtensionUninstallPage .standardForm .linkText {
color: #f00; }
.DeactivateAccount {
width: 550px; }
.DeactivateAccount .body {
padding: 19px 19px 7px; }
.DeactivateAccount .listItem {
margin-bottom: 12px; }
.DeactivateAccount h2 {
font-size: 13px;
font-weight: bold;
margin-bottom: 12px; }
.DeactivateAccount p {
font-size: 13px;
font-weight: regular;
margin-bottom: 12px;
margin-top: 0; }
.DeactivateAccount input[type="radio"] {
height: 16px;
margin-left: 20px;
width: 16px; }
.DeactivateAccount label {
color: #333;
font-size: 12px;
padding-left: 1px;
vertical-align: middle; }
.DeactivateAccount textarea {
font-size: 12px;
height: 60px; }
.DeactivateAccount .deleteText {
float: left;
font-size: 12px;
margin-top: 8px; }
.DeactivateAccount .deleteText .buttonText {
font-weight: bold;
text-decoration: underline; }
.DeactivateAccount .headerText {
font-size: 13px;
font-weight: regular;
margin-bottom: 12px; }
.DeactivateAccount .hiddenText {
background-color: #e3f8fe;
border-radius: 5px;
display: none;
margin-bottom: 12px;
margin-left: 43px;
padding: 10px; }
.DeactivateAccount .hiddenTextArea {
display: none;
margin-bottom: 12px;
margin-left: 43px; }
.DeactivateAccount .linkText {
color: #f00; }
.NagBase .message a {
color: #fff;
text-decoration: underline; }
.NagNoScript.Module {
display: block; }
.NagSearch .message {
background-color: #fab904;
border-radius: 4px;
box-shadow: none;
color: #fff;
font-size: 15px;
margin-left: 7px;
margin-right: 7px;
margin-top: 15px;
padding: 8px 25px;
text-align: center;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.NagSearch .message p {
line-height: 25px;
margin: 0; }
.NagSearch .message a {
color: #fff; }
.PinfluencerOptOutConfirmationPage .standardForm {
font-size: 14px;
line-height: 21px;
margin: 20px auto 40px; }
.SignedEmailSettingsPage .standardForm {
margin: 20px auto 40px; }
.SignedEmailSettingsPage .standardForm .emailSettings h3 {
padding-top: 0; }
.SignedEmailSettingsPage .standardForm .emailSettings .headlessSection h3 {
padding-top: 6px; }
.UserEdit.modal {
width: 580px; }
.UserEdit.modal .name {
width: 195px; }
.UserEdit.full_page .name {
width: 49%; }
.UserEdit .domain {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
float: left;
font-size: 14px;
line-height: 32px;
margin-right: 5px;
padding-left: 2px;
width: 131px; }
.UserEdit input[type="text"].username {
width: 262px; }
.UserEdit .name.last {
float: right; }
.UserEdit .profileImageWrapper {
position: relative;
overflow: hidden;
border-radius: 50%;
display: inline-block;
height: 75px;
margin-right: 10px;
vertical-align: middle;
width: 75px; }
.UserEdit .profileImageWrapper::after {
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.33) inset;
content: " ";
height: 75px;
left: 0;
position: absolute;
top: 0;
width: 75px; }
.UserEdit .profileImageWrapper .profileImage {
border-radius: 3px;
height: 75px;
width: 75px; }
.UserEdit .profileImageWrapper img {
height: 75px !important;
max-width: none;
width: auto !important; }
.UserEdit .profileImageWrapper img.restrictWidth {
height: auto !important;
width: 75px !important; }
.UserEdit .businessName {
width: 100%; }
.UserEdit .helpText {
width: 280px; }
.UserEdit .settingLabel {
vertical-align: middle; }
.UserEdit .showcaseEditWrapper {
border-top: 1px solid #dfdfdf;
padding: 15px 21px 15px 18px; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.UserEditEmail p {
margin-bottom: 0;
padding: 0 18px; }
/* desktop.scss */
.UserEditEmail {
width: 530px; }
.UserSocialNetworkSettings .socialIconFacebook {
width: 30px;
height: 30px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -442px -32px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
vertical-align: middle; }
.UserSocialNetworkSettings .socialIconTwitter {
width: 30px;
height: 30px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -298px -384px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
vertical-align: middle; }
.UserSocialNetworkSettings .socialIconGplus {
width: 30px;
height: 30px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -394px -384px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
vertical-align: middle; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserSocialNetworkSettings .socialIconGplus {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -225px -342px;
background-size: 428px 427px; } }
.UserSocialNetworkSettings .socialIconGoogle {
width: 30px;
height: 30px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -442px 0 no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
vertical-align: middle; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserSocialNetworkSettings .socialIconGoogle {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -163px -342px;
background-size: 428px 427px; } }
.UserSocialNetworkSettings .socialIconYahoo {
width: 30px;
height: 30px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -266px -384px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
vertical-align: middle; }
.UserSocialNetworkSettings .socialIconMicrosoft {
width: 30px;
height: 30px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -362px -384px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
vertical-align: middle; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserSocialNetworkSettings .socialIconMicrosoft {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -256px -342px;
background-size: 428px 427px; } }
.AddressForm .standardForm li {
overflow: hidden; }
.AddressForm .standardForm .top {
margin-bottom: 8px; }
.AddressForm .standardForm .subheader {
float: left;
font-style: italic;
padding: 6px; }
.AddressForm .standardForm .sameInfoButton {
float: right; }
.AddressForm .standardForm .addressFieldLeft {
float: left;
width: 50%; }
.AddressForm .standardForm .addressFieldRight {
float: right;
width: 48%; }
.BlockAndUnfollowForm {
width: 600px; }
.BlockAndUnfollowForm input[type="checkbox"] {
display: none; }
.BlockAndUnfollowForm .uncheckedBox {
color: #a9a9a9;
display: inline-block;
font-size: 25px;
vertical-align: middle; }
.BlockAndUnfollowForm .checkedBox {
display: none; }
.BlockAndUnfollowForm input[type="checkbox"]:checked ~ .uncheckedBox {
display: none; }
.BlockAndUnfollowForm input[type="checkbox"]:checked ~ .checkedBox {
color: #a9a9a9;
display: inline-block;
font-size: 25px;
vertical-align: middle; }
.BlockAndUnfollowForm input[type="radio"] {
display: none; }
.BlockAndUnfollowForm .flagReasonRadioButtonOuter {
background-color: #fff;
border: 1px solid #a9a9a9;
border-radius: 8px;
display: inline-block;
height: 12px;
position: relative;
top: 1px;
vertical-align: middle;
width: 12px; }
.BlockAndUnfollowForm .flagReasonRadioButtonInner {
display: none; }
.BlockAndUnfollowForm input[type="radio"]:checked + .flagReasonRadioButtonOuter {
background-color: #a9a9a9;
border-color: #d3d3d3; }
.BlockAndUnfollowForm input[type="radio"]:checked + .flagReasonRadioButtonOuter > .flagReasonRadioButtonInner {
background-color: #fff;
border-radius: 50%;
display: block;
height: 4px;
left: 50%;
margin: -2px 0 0 -2px;
position: absolute;
top: 50%;
width: 4px; }
.BlockAndUnfollowForm .blockAndUnfollowFormContent {
height: 360px;
overflow: scroll; }
.BlockAndUnfollowForm .blockAndUnfollowFormContent > .blockAndUnfollowFormLabel {
border-bottom: 1px solid #e7e7e7;
color: #333;
cursor: pointer;
display: block;
font-size: 14px;
padding: 15px 0 15px 18px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.BlockAndUnfollowForm .blockAndUnfollowFormContent > .blockAndUnfollowFormLabel:hover {
background-color: #f4f4f4; }
.BlockAndUnfollowForm .blockAndUnfollowFormContent > .blockAndUnfollowFormLabel > .labelWrapper {
display: inline-block;
margin-left: 10px;
vertical-align: middle;
width: 500px; }
.BlockAndUnfollowForm .blockAndUnfollowFormContent > .blockAndUnfollowFormLabel > .labelWrapper > .labelDescription {
color: #999;
display: block;
font-size: 13px;
margin-top: 3px;
vertical-align: middle; }
.BlockAndUnfollowForm .blockAndUnfollowFormContent > .modalDescription {
border-bottom: 1px solid #e7e7e7;
color: #999;
font-size: 13px;
padding: 15px 18px; }
.BlockAndUnfollowForm .helpText {
font-size: 13px;
line-height: 28px;
width: 250px; }
.BlockAndUnfollowForm .formFooter > .formFooterButtons > .primary {
display: none; }
.BlockAndUnfollowForm .formFooter > .formFooterButtons > .primary span {
pointer-events: none; }
.BlockAndUnfollowForm .formFooter > .formFooterButtons > .primary.visible {
display: inline-block; }
.CsrfErrorPage {
text-align: center; }
.CsrfErrorPage .header {
background: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(0, 0, 0, 0.1);
height: 44px;
position: fixed;
text-align: center;
width: 100%; }
.CsrfErrorPage .header img {
position: relative;
top: 8px;
width: 104px; }
.CsrfErrorPage .errorHeader p {
color: #777;
font-size: 17px;
font-weight: normal; }
.CsrfErrorPage .errorMessage {
padding-top: 50px;
width: auto; }
.CsrfErrorPage .errorNumber {
border: 5px solid #bbb;
border-radius: 50%;
color: #aaa;
display: block;
font-size: 20px;
font-weight: bold;
line-height: 40px;
margin: 0 auto 20px;
text-align: center;
width: 40px; }
.CsrfErrorPage .diagnoseList {
margin: 30px 0;
padding: 0;
text-align: center; }
.CsrfErrorPage .diagnose,
.CsrfErrorPage .more {
color: #555; }
.CsrfErrorPage .diagnose {
display: inline-block;
list-style-type: none;
margin-bottom: 20px;
vertical-align: top;
width: 156px; }
.CsrfErrorPage .diagnose a {
color: #444;
font-weight: bold;
text-decoration: none; }
.CsrfErrorPage .diagnose a:hover {
color: #d62229; }
.FlagBase {
width: 600px; }
.FlagBase a:focus {
outline: 0; }
.FlagBase .flagContent input[type="radio"] {
opacity: 0;
position: absolute; }
.FlagBase .flagContent .flagReasonRadioButtonOuter {
background-color: #fff;
border: 1px solid #999;
border-radius: 8px;
bottom: 0;
display: inline-block;
height: 12px;
margin: auto;
position: absolute;
top: 0;
width: 12px; }
.FlagBase .flagContent .flagReasonRadioButtonInner {
display: none; }
.FlagBase .flagContent .flagReasonRadioButtonWrapper {
box-sizing: border-box;
float: left;
height: 100%;
min-height: 64px;
padding-left: 15px;
position: absolute;
width: 44px; }
.FlagBase .flagContent input[type="radio"]:checked + .flagReasonRadioButtonWrapper .flagReasonRadioButtonOuter {
background-color: #999;
border-color: #ccc; }
.FlagBase .flagContent input[type="radio"]:checked + .flagReasonRadioButtonWrapper .flagReasonRadioButtonOuter .flagReasonRadioButtonInner {
background-color: #fff;
border-radius: 50%;
display: block;
height: 4px;
left: 50%;
margin: -2px 0 0 -2px;
position: absolute;
top: 50%;
width: 4px; }
.FlagBase .flagContent label {
color: #333;
font-size: 14px; }
.FlagBase .flagContent .flagReasonWrapper {
display: inline-block;
float: right;
padding: 24px 0;
width: 556px; }
.FlagBase .flagContent .flagReasonLabel {
border-bottom: 1px solid #e7e7e7;
cursor: pointer;
display: block;
overflow: hidden;
position: relative; }
.FlagBase .flagContent .flagReasonLabel:hover {
background-color: #f4f4f4; }
.FlagBase .flagContent.withBadRichDataLabel {
height: 389px; }
.FlagBase .formFooter {
border-top: none; }
.FlagBase .helpText {
font-size: 13px;
line-height: 28px; }
.FlagBase .helpText li {
list-style-type: none; }
.FlagBase .helpText span {
display: none; }
.FlagBase .helpText > .visible {
display: block; }
.FlagComment .modalDescription {
color: #999;
display: table;
font-size: 13px;
height: 360px;
width: 600px; }
.FlagComment .modalDescription > div {
display: table-cell;
padding: 0 85px;
text-align: center;
vertical-align: middle; }
.FlagComment .modalDescription .fileButton {
display: inline-block;
margin: 20px auto 0; }
.FlagComment .helpText {
width: 281px; }
.FlagConversation .modalDescription {
color: #999;
display: table;
font-size: 13px;
height: 360px;
width: 600px; }
.FlagConversation .modalDescription > div {
display: table-cell;
padding: 0 85px;
text-align: center;
vertical-align: middle; }
.FlagConversation .modalDescription .fileButton {
display: inline-block;
margin: 20px auto 0; }
.FlagConversation .helpText {
width: 261px; }
.FlagConversation .formFooter > .formFooterButtons > .primary.reportConversation {
width: 176px; }
.FlagCsr .modalDescription {
color: #999;
display: table;
font-size: 13px;
height: 360px;
width: 600px; }
.FlagCsr .modalDescription > div {
display: table-cell;
padding: 0 85px;
text-align: center;
vertical-align: middle; }
.FlagCsr .modalDescription .fileButton {
display: inline-block;
margin: 20px auto 0; }
.FlagPin .modalDescription {
color: #999;
display: table;
font-size: 13px;
height: 360px;
width: 600px; }
.FlagPin .modalDescription > div {
display: table-cell;
padding: 0 85px;
text-align: center;
vertical-align: middle; }
.FlagPin .modalDescription .fileButton {
display: inline-block;
margin: 20px auto 0; }
.TrademarkForm .instructions {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px; }
.TrademarkForm .instructions > div {
overflow: hidden;
border-top: 1px solid #dfdfdf;
padding: 15px 21px 15px 27px; }
.TrademarkForm .instructions > div:first-child {
border: 0; }
.TrademarkForm .agentFields {
display: none; }
.TrademarkForm .transferField {
display: none; }
.TrademarkForm .infringingURLs > li {
margin-bottom: 10px; }
.TrademarkForm .formFooter {
border-radius: 6px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22); }
.UserBlock {
width: 380px; }
.UserBlock h1 {
font-weight: normal; }
.UserBlock p {
color: #333;
font-size: 14px;
line-height: 20px;
padding: 7px 21px 10px; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.addPinFlyout .contentPositioningTopEmployee {
top: -160px; }
.addPinFlyout .contentPositioningTopEmployee .positionModuleCaret {
top: 170px; }
.addPinFlyout .positionModuleCaret {
top: 130px; }
.browserButtonUpsellModal {
background: #fff;
border-radius: 6px;
padding: 24px; }
.AddPin .addPinForm {
width: 320px; }
.AddPin.isDropdown {
overflow: hidden;
border-radius: 6px;
max-width: 230px;
width: auto; }
.AddPin .addPinContent {
border-radius: 0 0 6px 6px;
overflow: hidden; }
.AddPin .addPinButton.borderless {
background: #f0f0f0;
border-top: 1px solid #c4c4c4;
float: left;
height: 210px;
width: 50%; }
.AddPin .addPinButton.borderless:hover {
background: #fafafa; }
.AddPin .addPinButton.borderless:active {
background: #e6e6e6; }
.AddPin .addPinButton.borderless.addPinUpload {
border-left: 1px solid #c4c4c4; }
.AddPin .pinmarkletPromotion {
background: #f1f1f1;
border-bottom: 1px solid #d8d8d8;
padding: 10px 14px; }
.AddPin .pinmarkletPromotion p {
overflow: hidden;
color: #999;
font-size: 12px;
line-height: 15px;
margin: 0; }
.AddPin .pinmarkletPromotion a:hover {
color: #bd081c; }
.AddPinURL {
max-width: 460px; }
.AddPinURL .findPinsField {
overflow: hidden; }
.AddPinURL .findPins {
overflow: hidden;
background: #f0f0f0;
border-radius: 0 0 6px 6px;
padding: 19px; }
.AddPinURL .installBookmarklet {
background-color: #fff5c1;
background: -webkit-linear-gradient(#fff7cb, #fff4b7);
background: linear-gradient(#fff7cb, #fff4b7);
border-bottom: 1px solid #e7e7e7;
font-size: 14px;
font-weight: bold;
padding: 10px 18px; }
.AddPinURL .installBookmarklet a {
color: #bd081c; }
.AddPinURL .installBookmarklet p {
margin: 0; }
.AddPinURL .Button {
float: right;
margin-left: 10px; }
.creditsImage {
border-radius: 100px;
height: 24px;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
width: 24px; }
.creditsCard {
font-weight: normal; }
.reactNewMessageTypeahead {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
.reactNewMessageTypeahead .inputContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: inherit; }
.reactNewMessageTypeahead .inputContainer input {
border: 0;
box-shadow: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 33px;
outline: none;
width: inherit; }
.reactNewMessageTypeahead .open {
height: 466px;
margin-left: -40px;
overflow-y: auto;
width: 360px; }
/* TODO: hacky, remove when css is rewritten */
.reactCollaboratorInviterTypeaheadCustom {
height: 47px; }
/* TODO: hacky, remove when css is rewritten */
.reactSocialTypeahead .typeaheadImg,
.reactSocialTypeahead .userContact {
border-radius: 50%;
overflow: hidden; }
.reactSocialTypeahead .typeaheadImg::after,
.reactSocialTypeahead .userContact::after {
box-shadow: none; }
.Carousel-OuterScrollContainer {
overflow: hidden; }
.Carousel-InnerScrollContainer {
margin-bottom: -17px;
-ms-overflow-style: none;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 17px; }
.Carousel-InnerScrollContainer::-webkit-scrollbar {
display: none; }
.Carousel-Arrow {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.Carousel-Arrow--Left {
left: -12px; }
.Carousel-Arrow--Right {
right: -12px; }
.closeupContainer {
cursor: auto;
max-width: 628px;
position: relative; }
@media (min-width: 1056px) {
.closeupContainer.showCloseupContentRight {
max-width: 912px; } }
.imageLink {
position: relative; }
.CloseupContent > .flex > div:last-child > hr {
display: none; }
.relatedPinTitle {
margin: 0 auto 32px;
max-width: 628px;
width: 100%; }
@media (min-width: 1056px) {
.relatedPinTitle.showCloseupContentRight {
max-width: 864px; } }
.relatedPin > div:nth-child(2) > div {
/* Since Mansory grid will always center grid within the container. Before we add new props
to the Mansory grid to make this optional, we need to make this hack here */
margin-left: 0 !important; }
.Closeup .containCloseup {
max-width: 1050px; }
@media (min-width: 1056px) {
.Closeup .containCloseup.showCloseupContentRight {
max-width: 912px; } }
@media (min-width: 1056px) {
.closeupContentImage.showCloseupContentRight {
border-radius: 8px;
margin-bottom: 24px;
margin-right: 24px;
max-width: 496px;
min-width: 344px;
text-align: center;
vertical-align: top; } }
@media (min-width: 1056px) {
.closeupContentRichData.showCloseupContentRight {
margin-bottom: 24px;
width: 344px; } }
.richDataTitle {
display: none; }
@media (min-width: 1056px) {
.richDataTitle.showCloseupContentRight {
display: block; } }
@media (min-width: 1056px) {
.topTitle.showCloseupContentRight {
display: none; } }
@media (min-width: 1056px) {
.closeupCenterImage.showCloseupContentRight {
display: none; } }
.closeupRightImage {
display: none; }
@media (min-width: 1056px) {
.closeupRightImage.showCloseupContentRight {
display: block; } }
.descriptionAction {
display: none; }
@media (min-width: 1056px) {
.descriptionAction.showCloseupContentRight {
display: block; } }
@media (min-width: 1056px) {
.ingredientsBuffer.showCloseupContentRight {
width: 16px; } }
@media (min-width: 1056px) {
.actionButton.showCloseupContentRight {
display: none; } }
.closeupPaddingContainer {
padding: 0 24px; }
@media (min-width: 1056px) {
.closeupPaddingContainer.showCloseupContentRight {
display: -webkit-box;
display: -ms-flexbox;
display: flex; } }
.rightImageMask {
border-radius: 8px;
overflow: hidden; }
.hoverMask {
border-radius: 8px; }
@media (min-width: 1056px) {
.embeddedVideo.showCloseupContentRight {
margin-bottom: 24px;
margin-right: 24px;
width: 496px; } }
.variantPickerModal {
background: #fff;
max-height: none;
outline: none; }
.CartItemRC {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
.CartItemRC .productInfo {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.CartItemRC .info {
max-width: 300px; }
.CartItemRC .variants div {
line-height: 20px; }
.BagItem {
margin: 36px 162px 60px 0;
width: 618px; }
.BagItem .quantity {
width: 67px; }
.BagItem .itemInfo {
width: 325px; }
.BagListRC {
margin: auto;
width: 1016px; }
.OrderConfirmation {
margin: 60px 0 -60px;
overflow: hidden;
-webkit-transition: height .4s ease-in-out;
transition: height .4s ease-in-out; }
.OrderConfirmation .orderInfo {
margin-bottom: 60px;
margin-left: 76px; }
.OrderDetail {
width: 618px; }
.OrderDetail .downArrow {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 8px solid #555;
height: 0;
margin-top: 5px;
width: 0; }
.OrderDetail .detailName {
width: 171px; }
.OrderDetail .selectedValue {
width: 325px; }
.OrderDetail .arrow {
width: 90px; }
.paymentFormModal {
max-height: none; }
.OrderDetails .detailName {
width: 171px; }
.OrderDetails .cartOptions {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .4s ease-in-out;
transition: max-height .4s ease-in-out; }
.OrderDetails .cartOptions .options {
width: 411px; }
.OrderDetails .cartOptions .disabled div {
color: #efefef; }
.OrderDetails .cartOptions .selectButton {
background-color: #efefef;
height: 20px;
width: 20px; }
.OrderDetails .cartOptions .selectButton .innerCircle {
height: 10px;
left: 5px;
top: 5px;
width: 10px; }
.OrderDetails .cartOptions .selectButton.selected .innerCircle {
background-color: #555; }
.ShoppingBag {
margin-top: 60px; }
.ShoppingBag .reviewOrder {
width: 236px; }
.ShoppingBag .flexInfo {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; }
.ShoppingBag .numOfItems {
font-weight: normal; }
.strikeout {
position: relative; }
.strikeout::after {
border-bottom: 2px solid #b5b5b5;
content: "";
left: 0;
position: absolute;
right: 0;
top: 50%; }
.closeupBuyableProductCarousel {
width: 800px; }
.closeupBuyableProductCarousel .pinLink {
display: inline-block;
width: 564px; }
.closeupBuyableProductCarousel .sticky {
background: transparent;
display: inline-block;
position: -webkit-sticky;
position: sticky;
top: 116px;
vertical-align: top;
width: auto;
z-index: 101; }
@media (min-width: 800px) {
.closeupBuyableProductCarousel .sticky {
top: 124px; } }
.closeupBuyableProductCarousel .buyableCloseupImage {
display: block;
margin: auto; }
.showInModal .closeupBuyableProductCarousel .sticky {
top: 60px; }
.commerceCloseupCarousel {
background-color: #fff;
margin: auto;
margin-bottom: 14px;
position: relative;
width: 564px; }
@media (min-width: 1056px) {
.commerceCloseupCarousel.showCloseupContentRight {
width: 496px; } }
.commerceCloseupCarousel .scrollIcon {
position: absolute; }
.commerceCloseupCarousel .scrollIcon em {
width: 10px;
height: 15px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -316px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.commerceCloseupCarousel .scrollIcon em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -418px 0;
background-size: 428px 427px; } }
.commerceCloseupCarousel .scrollIcon.hide {
display: none; }
.commerceCloseupCarousel .scrollIcon.arrowLeft {
left: -20px; }
.commerceCloseupCarousel .scrollIcon.arrowRight {
right: -20px; }
.commerceCloseupCarousel .scrollIcon.arrowRight em {
-webkit-transform: scaleX(-1);
transform: scaleX(-1); }
.commerceCloseupCarousel .productPins {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow: hidden; }
.commerceCloseupCarousel .productPins.marginRight {
margin-right: -10px; }
.commerceCloseupCarousel .productPins.marginLeft {
margin-left: -10px; }
.commerceCloseupCarousel .productPins .carousel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-transition: left .3s ease-in-out;
transition: left .3s ease-in-out; }
.howToWearItCarousel .scrollIcon, .nativeContentCarousel .scrollIcon {
top: 180px; }
.multiVariantPickers .variantTitle {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.multiVariantPickers .swatchVariant {
border-radius: 50%;
box-shadow: 0 0 1px #ccc;
cursor: pointer;
display: inline-block;
height: 60px;
margin-bottom: 5px;
margin-right: 10px;
overflow: hidden;
position: relative;
width: 60px; }
.multiVariantPickers .swatchVariant.unavailable .frame, .multiVariantPickers .swatchVariant.selected .frame {
border: 2px solid #fff;
border-radius: 50%;
height: 52px;
left: 0;
position: absolute;
top: 0;
width: 52px;
z-index: 1; }
.multiVariantPickers .swatchVariant.unavailable {
background-color: #fff;
border: 2px solid #b5b5b5;
position: relative; }
.multiVariantPickers .swatchVariant.unavailable::after {
border-bottom: 2px solid #b5b5b5;
content: "";
left: 0;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
z-index: 2; }
.multiVariantPickers .swatchVariant.selected {
background-color: #fff;
border: 2px solid #bd081c; }
.multiVariantPickers .swatchVariant img {
border-radius: 50%;
box-sizing: border-box;
height: 60px;
left: 0;
position: absolute;
top: 0;
width: 60px; }
.multiVariantPickers .labelVariant {
color: #b5b5b5;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: bold;
line-height: 25px;
margin-right: 18px;
white-space: nowrap; }
.multiVariantPickers .labelVariant.unavailable {
color: #f1f1f1;
position: relative; }
.multiVariantPickers .labelVariant.unavailable::after {
border-bottom: 1px solid #f1f1f1;
content: "";
left: 0;
position: absolute;
right: 0;
top: 50%; }
.multiVariantPickers .labelVariant.selected {
border-bottom: 3px solid #bd081c;
border-radius: 0;
color: #555;
margin-bottom: -3px; }
.OrderHistoryRC {
background-color: #fff;
bottom: 0;
color: #555;
left: 0;
overflow-y: scroll;
position: absolute;
right: 0;
top: 0; }
.OrderHistoryRC .orderHistoryTitle {
font-size: 33px;
font-weight: bold;
margin: 75px auto 40px;
text-align: center;
width: 628px; }
.OrderHistoryRC .order {
margin: 0 auto 16px;
padding: 42px;
width: 610px; }
.OrderHistoryDetailRC {
margin-bottom: 60px; }
.OrderHistoryDetailRC .info {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.OrderHistoryDetailRC .value {
width: 415px; }
.OrderHistoryDetailRC .title {
width: 195px; }
.orderHistoryModal {
position: static;
position: initial; }
.OrderHistorySummaryRC .orderHistoryHeader {
text-align: center; }
.OrderHistorySummaryRC .order {
cursor: zoom-in;
display: block;
margin: auto;
width: 626px; }
.OrderHistorySummaryRC .orderContent {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.OrderHistorySummaryRC .orderContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 57px 0 50px; }
.OrderHistorySummaryRC .orderInfo {
max-width: 300px; }
.OrderHistorySummaryRC .paymentDeclined {
border-radius: 100px;
display: inline-block;
float: left;
padding: 5px 12px; }
.OrderHistorySummaryRC .image0, .OrderHistorySummaryRC .image2 {
margin-right: 2px; }
.OrderHistorySummaryRC .image0, .OrderHistorySummaryRC .image1 {
margin-bottom: 2px; }
.OrderHistorySummaryRC .defaultImage {
background-color: #efefef;
display: inline-block;
height: 84.5px;
width: 84.5px; }
.productGallery {
margin: -12px 0 -12px 40px; }
.productGallery .container {
max-height: 484px;
overflow: hidden; }
.productGallery .container .productCatalog {
position: relative;
-webkit-transition: top .3s ease-out;
transition: top .3s ease-out; }
.productGallery .catalogItem {
cursor: pointer;
display: block;
height: 106px;
margin: 12px;
overflow: hidden;
position: relative;
width: 106px; }
.productGallery .catalogItem.selected {
background-color: #fff;
border: 2px solid #bd081c;
border-radius: 4px;
height: 106px;
width: 106px; }
.productGallery .catalogItem.selected .frame {
border: 2px solid #fff;
height: 98px;
left: 0;
position: absolute;
top: 0;
width: 98px;
z-index: 10; }
.productGallery .catalogItem.selected img {
left: -2px;
min-height: 106px;
min-width: 106px;
top: -2px; }
.productGallery .catalogItem img {
border-radius: 4px;
left: 0;
position: absolute;
top: 0; }
.productGallery .icons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
.productGallery .icons .scrollIcon {
background: #efefef;
border: none;
border-radius: 50%;
height: 40px;
margin: 0 4px;
width: 40px; }
.productGallery .icons .scrollIcon.arrowDown em {
width: 40px;
height: 40px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -111px -67px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.productGallery .icons .scrollIcon.arrowDown em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -110px -66px;
background-size: 399px 382px; } }
.productGallery .icons .scrollIcon.arrowUp em {
width: 40px;
height: 40px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -111px -67px no-repeat;
-webkit-transform: scaleY(-1);
transform: scaleY(-1); }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.productGallery .icons .scrollIcon.arrowUp em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -110px -66px;
background-size: 399px 382px; } }
.productGallery .icons .scrollIcon.arrowUp.hide em {
width: 40px;
height: 40px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -240px -186px no-repeat;
-webkit-transform: scaleX(1);
transform: scaleX(1); }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.productGallery .icons .scrollIcon.arrowUp.hide em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -237px -183px;
background-size: 399px 382px; } }
.productGallery .icons .scrollIcon.arrowDown.hide em {
width: 40px;
height: 40px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -240px -186px no-repeat;
-webkit-transform: scaleY(-1);
transform: scaleY(-1); }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.productGallery .icons .scrollIcon.arrowDown.hide em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -237px -183px;
background-size: 399px 382px; } }
.ShopBagButton {
position: relative; }
.ShopBagButton.empty {
display: block; }
.ShoppingBagMerchantInfoRC {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 23px; }
.ShoppingBagMerchantInfoRC .merchant {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 440px; }
.ShoppingBagMerchantInfoRC .flexInfo {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; }
.ShoppingBagMerchantInfoRC .merchantTitle {
max-width: 330px; }
.ShoppingBagMerchantInfoRC .numOfItems {
font-weight: normal; }
.productPinLink {
outline: none;
position: relative; }
.productPinLink.productPinModal .productPin {
width: 236px; }
.productPinLink.productPinModal .productImage {
height: 236px;
width: 236px; }
.productPinLink.productPinModal .productInfo {
font-size: 16px; }
.productPinLink .productPin {
cursor: zoom-in;
padding: 10px;
width: 160px; }
.productPinLink .productPin::before {
background: rgba(0, 0, 0, 0.05);
border-radius: 8px;
content: " " !important;
height: 100%;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
-webkit-transform: scale(0.96);
transform: scale(0.96);
width: 100%;
z-index: 3; }
.productPinLink .productPin:hover::before {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); }
.productPinLink .productInfo {
font-size: 14px;
font-weight: bold;
margin-top: 8px; }
.productPinLink .productImage {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 8px;
height: 160px;
width: 160px; }
.productPinLink .productTitle .ellipsis {
display: -webkit-box;
max-height: 44px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 18px; }
.productPinLink .merchantName {
color: #b5b5b5;
font-size: 12px;
line-height: 18px; }
.productPinLink .badge {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.75);
border-radius: 8px;
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 11px;
height: 18px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
left: 20px;
line-height: 12px;
position: absolute;
top: 0;
width: 76px; }
.variantPicker {
width: 564px; }
.variantPicker .swatchVariant {
border-radius: 50%;
box-shadow: 0 0 1px #ccc;
cursor: pointer;
display: inline-block;
height: 40px;
margin-bottom: 5px;
margin-right: 10px;
overflow: hidden;
position: relative;
width: 40px; }
.variantPicker .swatchVariant.selected {
background-color: #fff;
border: 2px solid #bd081c; }
.variantPicker .swatchVariant.selected .frame {
border: 2px solid #fff;
border-radius: 50%;
height: 32px;
left: 0;
position: absolute;
top: 0;
width: 32px;
z-index: 10; }
.variantPicker .swatchVariant img {
border-radius: 50%;
box-sizing: border-box;
height: 40px;
left: 0;
position: absolute;
top: 0;
width: 40px; }
.variantPicker .labelVariant {
color: #b5b5b5;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: bold;
line-height: 25px;
margin-right: 18px;
white-space: nowrap; }
.variantPicker .labelVariant.selected {
border-bottom: 3px solid #bd081c;
border-radius: 0;
color: #555;
margin-bottom: -3px; }
.variantPickerModal {
width: 544px; }
.variantPickerModal .cancel {
display: inline-block; }
.variantPickerModal .cancelIcon {
left: 32px;
position: absolute;
top: 40px; }
.variantPickerModal .cancelIcon em {
width: 16px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -309px no-repeat; }
.variantPickerModal .buttons {
float: right; }
.variantPickerModal .price {
position: absolute;
right: 32px;
top: 115px; }
.PinnerSurvey {
border: 0;
min-height: 810px;
padding-bottom: 4px;
width: 100%; }
.SurveyHidden {
display: none; }
.cropperWrapper {
cursor: crosshair;
height: 100%;
left: 0;
position: absolute;
visibility: visible;
width: 100%; }
.cropperWrapper .cropperAdditional {
z-index: 3; }
.cropperWrapper .cropperHandle {
height: 20px;
width: 20px; }
.cropperWrapper .cropSection {
border-radius: 4px;
cursor: move;
overflow: hidden;
z-index: 2; }
.cropperWrapper .ord-nw {
opacity: 100 !important;
border-top: 6px solid white;
border-left: 6px solid white;
margin: 0 !important;
cursor: nw-resize;
left: 0;
top: 0; }
.cropperWrapper .ord-ne {
opacity: 100 !important;
border-top: 6px solid white;
border-right: 6px solid white;
margin: 0 !important;
cursor: ne-resize;
right: 0;
top: 0; }
.cropperWrapper .ord-sw {
opacity: 100 !important;
border-bottom: 6px solid white;
border-left: 6px solid white;
margin: 0 !important;
bottom: 0;
cursor: sw-resize;
left: 0; }
.cropperWrapper .ord-se {
opacity: 100 !important;
border-bottom: 6px solid white;
border-right: 6px solid white;
margin: 0 !important;
bottom: 0;
cursor: se-resize;
right: 0; }
.cropperWrapper .shadowMask {
background-color: #000; }
.cropperWrapper .shadowOverlay {
height: 100%;
opacity: .4;
width: 100%;
z-index: 1; }
.cropperWrapper .shadowOverlayHide {
opacity: 0; }
.PinRep.flyoutShown {
z-index: 6; }
.PinRep img[alt] {
/*
Firefox fix to not show titles when loading
See https://jira.pinadmin.com/browse/BUG-73988
*/
color: transparent; }
.PinRep .pinImage {
color: transparent;
display: block;
position: relative; }
.PinRep .pinWrapper {
position: relative; }
.PinRep .navigateLink {
color: #fff;
display: block;
font-size: 11px;
font-weight: 500;
line-height: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.PinRep .navigateLink:hover {
color: #fff; }
.PinRep .commercePrice.fadedBluePrice {
color: #5b9dba !important;
/* override brio styles */ }
.PinRep .oneTapNavigateLink {
background: transparent;
bottom: 0;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
right: 0;
z-index: 100; }
.PinRep .debugInfo .productPrice {
color: #bd081c;
font-size: 13px;
font-weight: bold;
margin: 12px 0 0; }
.PinRep .SocialIconsCounts .PartnerMetrics a {
float: right;
padding: 0 6px; }
.PinRep .SocialIconsCounts .PartnerMetrics a svg {
float: left; }
.PinRep .SocialIconsCounts .PartnerMetrics a em {
padding: 2px 2px 0 6px; }
.PinRep .SocialIconsCounts .PartnerMetrics a.highlighted {
background: #555;
border-radius: 50px;
color: #fff; }
.PinRep .SocialIconsCounts .PartnerMetrics a.highlighted svg {
fill: #fff; }
.PinRep .SocialIconsCounts .PartnerMetrics a.highlighted em {
color: #fff; }
.PinRep .pinHashtag {
color: #004b91; }
.PinRep .pinHighlight {
margin: 0 -1px;
padding: 0 1px; }
.PinRep .pinHighlight-yellow {
background-color: #ffff8b; }
.PinRep .pinHighlight-gray {
background-color: #d8d8d8; }
.PinRep .pinHighlight-underlined {
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.3) 50%);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.3) 50%);
background-position: 0 1.07em;
background-repeat: repeat-x;
background-size: 2px .1em;
text-decoration: none; }
.PinRep .pinSelectionBorder {
border: 3px solid #efefef;
border-radius: 8px;
box-shadow: inset 0 0 0 3px #fff;
box-sizing: border-box;
height: 100%;
position: absolute;
top: 0;
width: 100%;
z-index: 3; }
.PinRep .pinSelectionBorder.selected {
border-color: #bd081c; }
@keyframes spin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
.CreatorsPage__leftMenu {
float: left; }
.CreatorsPage__rightMenu {
float: right; }
.PinCreator__uploadInput {
cursor: pointer;
height: 100%;
opacity: 0;
position: absolute;
width: 100%;
z-index: 1; }
.PinCreator__tip {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
text-align: center; }
.PinCreator__tip div {
margin: auto; }
.PinCreator__messageOne {
background-color: #ff9500;
border-radius: 50px 50px 5px;
height: 71px;
right: 100px;
top: -115px;
width: 227px; }
.PinCreator__messageTwo {
background-color: #2c90e9;
border-radius: 5px 50px 50px;
height: 71px;
left: 100px;
top: 122px;
width: 210px; }
.PinCreator__textArea {
border: none;
caret-color: #bd081c;
color: #555;
overflow: hidden;
resize: none;
width: 100%; }
.PinCreator__textArea::-webkit-input-placeholder {
color: #b5b5b5; }
.PinCreator__textArea::-moz-placeholder {
color: #b5b5b5; }
.PinCreator__textArea:-ms-input-placeholder {
color: #b5b5b5; }
.PinCreator__textArea::placeholder {
color: #b5b5b5; }
.PinCreator__textArea:focus {
outline: none; }
.PinCreator__title {
font-size: 36px;
font-weight: bold; }
.PinCreator__description {
font-size: 18px; }
.PinCreator__ellipsis {
background-color: #eaeef0;
border-radius: 50%;
height: 16px;
margin: 3px;
width: 16px; }
.PinCreator__isSelected {
background-color: #b5b5b5; }
.PinCreator__isLast {
background-color: transparent;
border: 1px solid #eaeef0; }
.PinCreator__sliders {
border: 1px solid #eaeef0;
border-radius: 50%;
cursor: pointer;
display: inline-block;
margin: 3px;
padding: 6px; }
.PinCreator__deleteAnchor {
left: 33px;
position: absolute;
top: 65px; }
.PinCreator__boardValidation {
height: 20px;
width: 140px; }
.PinCreator__urlValidationAnchor {
position: absolute;
right: 0;
top: 45%; }
.PinCreator__validationAnchor {
position: relative;
top: -15px; }
.PinCreator__boardContainer {
height: 600px;
overflow: scroll;
position: absolute;
top: 55px;
width: 460px; }
.CreationImageEditor__cropButton {
bottom: 15%;
left: 37%;
position: absolute; }
.CreationCarousel__slider {
height: 100%;
left: 0;
position: relative;
-webkit-transition: left .3s;
transition: left .3s; }
.CreationCarousel__deleteButton {
float: left;
margin: 12px;
position: absolute;
z-index: 3; }
.CreationCarousel__image {
height: 100%; }
.CreationCarousel__image div {
z-index: -1; }
.ImagePreview__image {
border-radius: 8px;
box-sizing: border-box;
margin-bottom: 30px;
margin-right: 30px;
overflow: hidden; }
.flashlightHeaderContainer.noDisplay {
display: none; }
.flashlightHeaderContainer .closeupFlashlightTitle {
color: #333;
float: left;
font-size: 28px;
font-weight: bold;
margin-left: 5px;
margin-top: 35px; }
.flashlightAnnotationList {
height: 48px;
overflow-y: hidden;
width: 100%; }
.flashlightAnnotationList .flashlightAnnotationListItem {
display: inline-block;
margin: 4px 2px; }
.flashlightAnnotationList .flashlightAnnotationListItem button {
border: 0;
border-radius: 4px;
box-sizing: border-box;
color: #efefef;
cursor: pointer;
font-size: 16px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-weight: bold;
letter-spacing: -.2px;
line-height: 18px;
outline: 0;
padding: 0;
word-spacing: 0; }
.flashlightAnnotationList .flashlightAnnotationListItem button span {
display: block;
padding: 10px 14px; }
.flashlightAnnotationList .flashlightAnnotationListItem button span:hover {
background-color: rgba(0, 0, 0, 0.06); }
.flashlightAnnotationList .flashlightAnnotationListItem button.selected {
background-color: #555; }
.flashlightAnnotationList .flashlightAnnotationListItem button.selected:hover {
background-color: #666; }
.flashlightResultsContainer.invisible {
opacity: 0;
-webkit-transition: visibility 0s 1s, opacity .1s linear;
transition: visibility 0s 1s, opacity .1s linear;
visibility: hidden; }
.spotlightButton {
background-color: transparent; }
.spotlightDot {
cursor: pointer; }
.SearchBoxInput {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: transparent;
border: 0;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box;
color: #555;
font-size: 16px;
font-weight: 600;
height: 100%;
line-height: 20px;
outline: none;
padding: 0 40px 0 52px;
width: 100%; }
.SearchBoxInput:focus {
box-shadow: 0 0 0 4px rgba(0, 132, 255, 0.5);
outline: 0; }
.SearchBoxInput--DarkPlaceholder::-webkit-input-placeholder {
color: #555; }
.SearchBoxInput--DarkPlaceholder::-moz-placeholder {
color: #555; }
.SearchBoxInput--DarkPlaceholder:-ms-input-placeholder {
color: #555; }
.SearchBoxInput--DarkPlaceholder::placeholder {
color: #555; }
.SearchBoxInput--LightPlaceholder::-webkit-input-placeholder {
color: #b5b5b5; }
.SearchBoxInput--LightPlaceholder::-moz-placeholder {
color: #b5b5b5; }
.SearchBoxInput--LightPlaceholder:-ms-input-placeholder {
color: #b5b5b5; }
.SearchBoxInput--LightPlaceholder::placeholder {
color: #b5b5b5; }
.SearchBoxInput--Overlay {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
left: 0;
overflow: hidden;
pointer-events: none;
position: absolute;
top: 0;
white-space: nowrap; }
.SearchBoxInput--Overlay > span {
overflow: hidden;
text-overflow: ellipsis; }
.searchNagContainer a, .searchAutocorrectLink {
/*
explicitly set the color for anchor links because
these HTML elements are sent from the server, no
way to wrap the contents inside with color
*/
color: #555;
/* dark-gray */ }
.searchNagContainer a:hover, .searchAutocorrectLink:hover {
text-decoration: underline; }
.foodFilterButton {
background: #b5b5b5; }
.foodFilterButton.active {
background-color: #555; }
.filterOption {
background-color: #efefef;
border-radius: 4px; }
.filterOption.active {
background-color: #555; }
.filterCheckBox {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
cursor: pointer;
height: 24px;
opacity: 0;
outline: 0;
width: 24px; }
.filterDropdownButton {
background-color: transparent;
max-width: 200px;
padding: 0;
white-space: nowrap; }
.SearchImprovementsBar-OuterScrollContainer {
overflow: hidden; }
.SearchImprovementsBar-InnerScrollContainer {
margin-bottom: -17px;
-ms-overflow-style: none;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 17px; }
.SearchImprovementsBar-InnerScrollContainer::-webkit-scrollbar {
display: none; }
.SearchImprovementsBar-ArrowButton {
background-color: transparent;
border: 0;
height: 100%;
outline: none;
padding: 0; }
.SearchPage .sticky {
position: -webkit-sticky;
position: sticky;
top: 65px;
z-index: 3; }
.SearchPage .searchLEQChunk {
margin: -10px;
padding: 10px;
position: relative; }
.SearchPage .searchLEQChunk::before {
background: rgba(0, 0, 0, 0.05);
border-radius: 8px;
content: " " !important;
height: 100%;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
-webkit-transform: scale(0.96);
transform: scale(0.96);
width: 100%;
z-index: 3; }
.SearchPage .searchLEQChunk:hover::before {
-webkit-animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards;
animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; }
.SearchPage .leqChunksList {
padding-bottom: 36px; }
.mainContainer.showHeaderMessage .SearchPage .sticky {
top: 88px; }
.searchRelatedQueries .relatedQueriesStoryLabel {
margin-bottom: 18px; }
.searchRelatedQueries .relatedQueriesStoryLabel > svg {
position: fixed; }
.searchRelatedQueries .relatedQueriesStoryLabel > span {
padding-left: 24px; }
.searchRelatedQueries .relatedQueryWrapper {
margin-bottom: 12px; }
.searchRelatedQueries .relatedQueryWrapper .relatedQuery {
border-radius: 4px;
display: inline-block; }
.searchRelatedQueries .relatedQueryWrapper .relatedQuery .relatedQueryContent {
display: inherit;
padding: 9px 16px 11px; }
.searchRelatedQueries .relatedQueryWrapper:last-child {
margin-bottom: 0; }
.fadeInComments .responseComments {
max-height: 0;
opacity: 0;
overflow: hidden;
-webkit-transition: all .25s;
transition: all .25s; }
.fadeInComments .responseComments.revealed {
max-height: 100%;
opacity: 1; }
.DidItActivityFeedSummary {
background-color: inherit;
padding: 8px 0;
position: -webkit-sticky;
position: sticky;
top: 64px;
z-index: 669; }
.photoFirstLikeButton {
background: none;
border: none;
border-radius: 50%;
padding: 0; }
.photoFirstLikeButton:focus {
box-shadow: 0 0 0 4px rgba(0, 132, 255, 0.5);
outline: 0; }
.photoFirstDetailsText {
white-space: pre-wrap; }
/* stylelint-disable-next-line at-rule-no-unknown */
.PhotoFirstTitle {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
overflow: hidden;
overflow-wrap: break-word; }
@media (min-width: 360px) {
.PhotoFirstTitle {
line-height: 20px;
/* max-height = line-height * lines max number (2) */
max-height: 40px; } }
@media (min-width: 800px) {
.PhotoFirstTitle {
line-height: 22px;
/* max-height = line-height * lines max number (2) */
max-height: 44px; } }
@media (min-width: 1312px) {
.PhotoFirstTitle {
line-height: 24px;
/* max-height = line-height * lines max number (2) */
max-height: 48px; } }
.inlineCloseupActionDetails {
color: #555;
font-size: 21px;
font-weight: 400;
text-align: left;
text-indent: -6px; }
.inlineCloseupActionDetails::before {
content: open-quote; }
.inlineCloseupActionDetails::after {
content: close-quote; }
.textAreaCommentCompact textarea {
height: 2.5em; }
.DidItPinInfoBar {
background-image: -webkit-linear-gradient(top, rgba(181, 181, 181, 0), rgba(0, 0, 0, 0.2) 33%, rgba(0, 0, 0, 0.5) 66%, rgba(0, 0, 0, 0.7));
background-image: linear-gradient(to bottom, rgba(181, 181, 181, 0), rgba(0, 0, 0, 0.2) 33%, rgba(0, 0, 0, 0.5) 66%, rgba(0, 0, 0, 0.7));
border-radius: 8px; }
.didItPhotoBox {
padding-bottom: 40px;
padding-top: 40px;
-webkit-transition: padding-top .2s ease;
transition: padding-top .2s ease; }
.didItPhotoBox.transitionUp {
padding-bottom: 0;
padding-top: 0; }
.didItTextBox {
height: 0;
opacity: 0;
-webkit-transition: opacity .2s ease;
transition: opacity .2s ease;
-webkit-transition-delay: .2s;
transition-delay: .2s;
visibility: hidden; }
.didItTextBox.transitionIn {
height: auto;
opacity: 1;
visibility: visible; }
.uploadProgressBar {
background-color: #bd081c;
border-radius: 8px;
height: 16px;
opacity: 1;
position: absolute;
-webkit-transition: opacity 85ms ease-in, width 85ms ease-in;
transition: opacity 85ms ease-in, width 85ms ease-in;
z-index: 1000; }
.uploadProgressBar.transition {
opacity: 0;
-webkit-transition: opacity 85ms ease-in, width 85ms ease-in;
transition: opacity 85ms ease-in, width 85ms ease-in; }
.experienceSystemPushOverlay {
background: #000;
bottom: 0;
display: block;
left: 0;
opacity: .5;
position: absolute;
right: 0;
top: 0;
z-index: 750; }
/*
This file duplicates some functionality from
https://github.com/pinterest/gestalt/blob/master/src/IconButton/IconButton.css
It's only intended for experimental icons that are not yet part of gestalt (and may never be)
*/
.iconButtonExperiment:hover, .iconButtonExperiment:focus {
background-color: #dedede; }
.iconButtonExperiment:active path {
fill: #555; }
.iconButtonExperiment svg {
vertical-align: middle; }
.msg_bubble_arrow_box {
position: relative; }
.msg_bubble_arrow_box::after {
border: solid transparent;
border-color: rgba(239, 239, 239, 0);
border-right-color: #efefef;
border-width: 10px;
content: " ";
height: 0;
margin-top: -10px;
pointer-events: none;
position: absolute;
right: 100%;
top: 17%;
width: 0; }
.exploreArticle .headerWrapper {
margin: 0 auto;
max-width: 768px;
padding: 0 18px; }
.exploreArticle .coverImage {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 780px; }
.exploreArticle .coverImageWrapper {
border-radius: 8px;
height: 300px;
overflow: hidden; }
.exploreArticle .promotedCurator {
font-weight: normal;
padding-left: 4px; }
.exploreArticle .BoardIcons {
display: none; }
.exploreArticle .userCard {
width: 236px; }
@keyframes tapAnimation {
0% {
opacity: 1;
-webkit-transform: scale(0.96);
transform: scale(0.96); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
.articleRepWrapper {
height: 330px;
width: 477px; }
.articleRepWrapper .articleImageWrapper {
border-radius: 12px;
height: 239px;
width: 477px; }
.articleRepWrapper .articleRepWash {
background-color: #000;
border-radius: 12px;
height: 100%;
opacity: .03;
position: absolute;
width: 100%;
z-index: 2; }
.articleRepWrapper::before {
background: rgba(0, 0, 0, 0.05);
border-radius: 12px;
content: " ";
height: 100%;
left: 0;
margin: -10px;
opacity: 0;
padding: 10px;
pointer-events: none;
position: absolute;
top: 0;
-webkit-transform: scale(0.96);
transform: scale(0.96);
width: 100%;
z-index: -1; }
.articleRepWrapper:hover::before {
-webkit-animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards;
animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; }
.articleRepWrapper .cover {
max-height: none;
min-width: 477px;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.articleRepWrapper .profileImage {
border: 3px solid #fff;
border-radius: 50%; }
.articleRepWrapper .profileImageWrapper {
bottom: -8px;
height: 50px;
left: 16px;
position: absolute;
width: 50px;
z-index: 3; }
.articleRepWrapper .promotedCurator {
padding-left: 4px; }
.articleRepWrapper .title {
max-height: 50px;
width: 477px; }
@keyframes tapAnimation {
0% {
opacity: 1;
-webkit-transform: scale(0.96);
transform: scale(0.96); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
.exploreBoardContainer {
height: 330px; }
.exploreBoardContainer div[class^="Mask-rounded"] {
border-radius: 12px; }
.exploreBoardContainer .imageWash {
background: rgba(0, 0, 0, 0.05);
height: 100%;
width: 100%;
z-index: 1; }
.exploreBoardContainer::before {
background: rgba(0, 0, 0, 0.05);
border-radius: 12px;
content: " ";
height: 100%;
left: 0;
margin: -10px;
opacity: 0;
padding: 10px;
pointer-events: none;
position: absolute;
top: 0;
-webkit-transform: scale(0.96);
transform: scale(0.96);
width: 100%;
z-index: -1; }
.exploreBoardContainer:hover::before {
-webkit-animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards;
animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; }
.exploreBoardContainer .profileImage {
border: 3px solid #fff;
border-radius: 50%; }
.exploreBoardContainer .profileImageWrapper {
bottom: -8px;
height: 50px;
left: 16px;
position: absolute;
width: 50px;
z-index: 1; }
.collageWrapper .moreItem {
z-index: 1; }
.collageWrapper .menuItem {
cursor: pointer;
position: relative; }
.collageWrapper .menuItem:focus, .collageWrapper .menuItem:hover {
border: 0; }
.collageWrapper .menuItem:focus .caption, .collageWrapper .menuItem:hover .caption {
color: rgba(0, 0, 0, 0.7); }
.collageWrapper .menuItem:focus svg, .collageWrapper .menuItem:hover svg {
fill: rgba(0, 0, 0, 0.7); }
.collageWrapper .grid {
display: none;
width: 100%; }
.collageWrapper .collage, .collageWrapper .feedHeader {
max-width: 992px;
width: 100%; }
.collageWrapper .feedHeader {
box-sizing: border-box;
padding: 36px 8px; }
.collageWrapper .article {
height: 240px; }
@media (max-width: 800px) {
.collageWrapper .grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.collageWrapper .collage, .collageWrapper .expand {
display: none; } }
.explorePage .exploreSections {
width: 230px; }
.explorePage .exploreSectionsWrapper {
width: 230px; }
.explorePage .exploreGridContainer {
width: 527px; }
.explorePage .exploreHeading, .explorePage .exploreCategoryHeading {
padding-left: 25px; }
@media (min-width: 800px) {
.explorePage {
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; } }
@media (min-width: 1280px) {
.explorePage .exploreSections {
width: 180px; }
.explorePage .exploreGridContainer {
width: 1054px; } }
@media (min-width: 1400px) {
.explorePage .exploreSections {
width: 220px; }
.explorePage .exploreGridContainer {
width: 1054px; } }
@media (min-width: 2000px) {
.explorePage .exploreSections {
width: 280px; }
.explorePage .exploreGridContainer {
width: 1581px; }
.explorePage .exploreCategoryHeading {
padding-left: 35px; } }
.ExploreLink a:hover {
text-decoration: underline; }
.searchRepWrapper {
height: 236px;
position: relative;
width: 236px; }
.searchRepWrapper::before {
background: rgba(0, 0, 0, 0.05);
border-radius: 8px;
content: " ";
height: 100%;
left: 0;
margin: -10px;
opacity: 0;
padding: 10px;
pointer-events: none;
position: absolute;
top: 0;
-webkit-transform: scale(0.96);
transform: scale(0.96);
width: 100%;
z-index: -1; }
.searchRepWrapper:hover::before {
-webkit-animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards;
animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; }
.searchRepWrapper .searchTerm {
bottom: 10px;
left: 10px;
max-height: 100%;
padding: 5px;
position: absolute; }
.searchRepWrapper .searchCoverWrapper {
background-size: cover;
border-radius: 8px;
height: 236px;
overflow: hidden; }
.searchRepWrapper .searchCoverWrapper::after {
height: 100%;
width: 100%;
background: #000;
border-radius: 8px;
content: "";
opacity: .2;
position: absolute; }
.exploreSectionList {
min-width: 180px;
padding-bottom: 15px; }
.exploreSectionList.fixedTop {
top: 80px; }
@media (min-width: 800px) {
.exploreSectionList.fixedTop {
position: fixed; } }
.exploreSectionList.fixedBottom {
bottom: 0;
position: fixed; }
.exploreSectionList.absolute {
position: absolute; }
.exploreSectionList .lastPicked {
padding-bottom: 15px; }
.exploreSectionList .firstNonPicked {
border-top: 1px solid #efefef;
padding-top: 15px;
width: 120px; }
.exploreSectionList .exploreSection {
display: inline-block;
padding: 2px; }
.WelcomePin {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.WelcomePin .welcomeMessage {
color: #fff;
display: block;
font-size: 30px;
font-weight: 700;
letter-spacing: -1.25px;
line-height: 42px;
width: 204px;
word-break: break-all; }
.AuthLandingPage .sticky {
position: -webkit-sticky;
position: sticky;
top: 64px;
z-index: 3; }
.AuthLandingPage .SearchGuidesBar {
background-color: #fff;
width: 100%; }
.AuthLandingPage .SearchGuidesBar .improvementsWrapper {
overflow: hidden; }
@-webkit-keyframes animateUpsellIn {
0% {
opacity: 0;
-webkit-transform: translateY(100vh);
transform: translateY(100vh); }
20% {
opacity: 1; }
100% {
-webkit-transform: translateY(0);
transform: translateY(0); } }
@keyframes animateUpsellIn {
0% {
opacity: 0;
-webkit-transform: translateY(100vh);
transform: translateY(100vh); }
20% {
opacity: 1; }
100% {
-webkit-transform: translateY(0);
transform: translateY(0); } }
@-webkit-keyframes animateUpsellHeight {
from {
height: 320px; }
to {
height: 140px; } }
@keyframes animateUpsellHeight {
from {
height: 320px; }
to {
height: 140px; } }
@-webkit-keyframes animateDismissConfirmation {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2); } }
@keyframes animateDismissConfirmation {
from {
opacity: 1; }
to {
opacity: 0;
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2); } }
.CloseupInterestUpsell.contentContainer {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
height: 320px;
pointer-events: auto;
width: 240px; }
.CloseupInterestUpsell.contentContainer.animateIn {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
-webkit-animation-duration: 0.7s;
animation-duration: 0.7s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-name: animateUpsellIn;
animation-name: animateUpsellIn;
-webkit-animation-timing-function: cubic-bezier(0.19, 1.15, 0.48, 1);
animation-timing-function: cubic-bezier(0.19, 1.15, 0.48, 1);
-webkit-transform: translateY(100vh);
transform: translateY(100vh); }
.CloseupInterestUpsell.contentContainer.animateToConfirmation {
-webkit-animation-delay: 0s, 2.3s;
animation-delay: 0s, 2.3s;
-webkit-animation-duration: 0.7s, 0.2s;
animation-duration: 0.7s, 0.2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-name: animateUpsellHeight, animateDismissConfirmation;
animation-name: animateUpsellHeight, animateDismissConfirmation; }
.CloseupInterestUpsell.followContainer {
background-color: #fff;
border-radius: 8px;
box-sizing: border-box;
height: 320px;
padding: 24px 28px;
position: absolute;
width: 100%; }
.CloseupInterestUpsell.followContainer.fadeOut {
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-name: fadeOut;
animation-name: fadeOut; }
.CloseupInterestUpsell.confirmationContainer {
background-color: #fff;
border-radius: 8px;
box-sizing: border-box;
height: 140px;
opacity: 0;
padding: 24px 28px;
position: absolute;
width: 100%; }
.CloseupInterestUpsell.confirmationContainer.fadeIn {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-name: fadeIn;
animation-name: fadeIn; }
.CloseupInterestUpsell.imageWash {
background-color: #000;
border-radius: 8px;
height: 100%;
opacity: .2;
position: absolute;
top: 0;
width: 100%; }
.emptyBoardWrapper {
width: 100%; }
.emptyBoard {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 280px;
padding-bottom: 40px;
/* Hiding the component while server side styles are still being applied */ }
.emptyBoard .static {
visibility: hidden; }
.emptyBoard .emptyPinWrapper {
/* This is a temporary color, not part of the spec */
background-color: #f7f7f7;
border-radius: 8px;
float: left;
margin: 12px;
text-align: center;
width: 236px; }
.emptyBoard .emptyPinWrapper .emptyPinTip {
color: #b5b5b5;
font-size: 16px;
font-weight: bold;
letter-spacing: -.2px;
line-height: 18px;
padding: 98px 36px 0;
word-spacing: 0; }
.emptyBoard .addPinWrapper {
float: left;
margin: 12px;
width: 236px; }
.emptyBoard .pinHeightTall {
height: 280px; }
.emptyBoard .pinHeightShort {
height: 236px; }
.EmptyBoardFooter {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 24px 0; }
.EmptyBoardFooter .tipLabel {
color: #555;
display: inline;
font-size: 24px;
font-weight: bold;
padding-left: 20px; }
.EmptyBoardFooter .tipLabel .tipRed {
color: #bd081c; }
.EmptyBoardFooter .tipWrapper {
margin: 24px 0; }
.FirstPinAppUpsell {
background-color: #555;
border-radius: 8px 100px 8px 8px;
font-size: 21px;
font-weight: bold; }
.FirstPinAppUpsell .text {
color: #fff;
margin-bottom: 12px; }
.FirstPinAppUpsell .headerText {
margin-bottom: 10px;
max-width: 170px; }
.FirstPinAppUpsell .bodyText {
font-size: 16px; }
.FirstPinAppUpsell .upsellTextButtons {
padding: 20px 0 18px; }
.FirstPinAppUpsell .heroContainer {
padding-left: 20px; }
.FirstPinAppUpsell .iosButton {
background-color: #000;
background-position: 0 2px;
border-radius: 4px;
display: inline-block;
height: 50px;
outline: none;
width: 150px; }
.FirstPinAppUpsell .androidButton {
border-radius: 4px;
display: inline-block;
height: 50px;
margin-bottom: 5px;
margin-right: 10px;
outline: none;
width: 150px; }
.FirstPinAppUpsell .upsellImage {
background: url(https://s.pinimg.com/webapp/style/images/first-pin-upsell-1x-bd7e1cc3.png) no-repeat;
background-size: contain;
height: 269px;
width: 195px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.FirstPinAppUpsell .upsellImage {
background-image: url(https://s.pinimg.com/webapp/style/images/first-pin-upsell-2x-cd89517f.png); } }
.FirstPinCreate__Container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
width: 100%; }
.FirstPinCreate__Container .FirstPinCreate {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
/* stylelint-disable-next-line property-blacklist */
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif;
height: 528px;
margin: auto;
position: relative;
width: 660px; }
.FirstPinCreate__Container .FirstPinCreate__mainContent {
background: #fff;
border-radius: 8px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: inherit;
overflow: hidden;
position: relative;
width: 660px; }
.FirstPinCreate__Container .FirstPinCreate__firstPinHeader {
color: #fff;
font-size: 28px;
font-weight: bold;
margin-bottom: 10px;
text-align: center; }
.FirstPinCreate__Container .FirstPinCreate__Spacer {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
.FirstPinCreate__Header {
color: #fff;
font-size: 28px;
font-weight: bold;
margin-left: 170px;
position: fixed;
top: 100px; }
.FirstPinCreate__firstPinBanner {
background: #2ab6dd;
bottom: 0;
box-sizing: border-box;
color: #fff;
font-size: 28px;
font-weight: bold;
left: 0;
opacity: .95;
padding: 15px 40px;
position: fixed;
text-align: center;
width: 100%; }
.FirstPinCreate__firstSuccessBanner {
background: #42d321;
bottom: 0;
box-sizing: border-box;
color: #fff;
font-size: 28px;
font-weight: bold;
left: 0;
opacity: .95;
padding: 15px 40px;
position: fixed;
text-align: center;
width: 100%; }
.GridBoardRep .GridBoardRep__boardName {
display: inline-block;
margin: 8px 0 24px;
max-width: 236px;
padding-left: 4px; }
.GridBoardRep .GridBoardRep__imageWrapper {
height: 236px;
overflow: hidden;
position: relative;
width: 236px; }
.GridBoardRep .GridBoardRep__linkWrapper :hover {
cursor: pointer; }
.GridBoardRep .GridBoardRep__item {
background-color: #efefef;
height: 117px;
position: absolute;
vertical-align: top;
width: 117px; }
.GridBoardRep .GridBoardRep__bottomLeftRep {
border-bottom-left-radius: 8px;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
bottom: 0;
left: 0; }
.GridBoardRep .GridBoardRep__bottomRightRep {
border-bottom-right-radius: 8px;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
bottom: 0;
right: 0; }
.GridBoardRep .GridBoardRep__emptyThumb {
background-color: #efefef;
display: inline-block; }
.GridBoardRep .GridBoardRep__topLeftRep {
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
border-top-left-radius: 8px;
left: 0;
top: 0; }
.GridBoardRep .GridBoardRep__topRightRep {
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
border-top-right-radius: 8px;
right: 0;
top: 0; }
.NuxModalStepBase {
border-radius: 6px;
height: 640px;
max-height: calc(100vh - 40px);
overflow: hidden;
width: 800px; }
.NuxModalStepBase.denseGridModal {
height: 670px; }
.NuxModalStepBase .stepInfoContent {
color: #d3d3d3;
font-size: 16px;
font-weight: bold;
height: 20px;
line-height: 19px;
position: absolute;
right: 16px;
text-align: right;
top: 16px; }
.NuxModalStepBase .stepInfoContent .stepInfo {
display: inline-block; }
.NuxExtensionUpsell__optionalSkip {
background: none;
border: none;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: bold;
height: 20px;
line-height: 19px;
outline: none;
outline-offset: 0;
padding: 0;
text-decoration: underline; }
.NuxExtensionUpsell__optionalSkip::-moz-focus-inner {
border: none;
padding: 0; }
@-webkit-keyframes websiteSlideUp {
from {
opacity: 0;
-webkit-transform: translate(0, 200px);
transform: translate(0, 200px); }
99% {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0); }
to {
opacity: .5;
-webkit-transform: translate(0, 0);
transform: translate(0, 0); } }
@keyframes websiteSlideUp {
from {
opacity: 0;
-webkit-transform: translate(0, 200px);
transform: translate(0, 200px); }
99% {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0); }
to {
opacity: .5;
-webkit-transform: translate(0, 0);
transform: translate(0, 0); } }
@-webkit-keyframes pinitButtonAppear {
from {
-webkit-transform: scale(0, 0) translate(0, 0);
transform: scale(0, 0) translate(0, 0); }
70% {
-webkit-transform: scale(1.25, 1.25) translate(-17px, 0);
transform: scale(1.25, 1.25) translate(-17px, 0); }
to {
-webkit-transform: scale(1, 1) translate(-17px, 0);
transform: scale(1, 1) translate(-17px, 0); } }
@keyframes pinitButtonAppear {
from {
-webkit-transform: scale(0, 0) translate(0, 0);
transform: scale(0, 0) translate(0, 0); }
70% {
-webkit-transform: scale(1.25, 1.25) translate(-17px, 0);
transform: scale(1.25, 1.25) translate(-17px, 0); }
to {
-webkit-transform: scale(1, 1) translate(-17px, 0);
transform: scale(1, 1) translate(-17px, 0); } }
@-webkit-keyframes arrowSlide {
from {
opacity: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0); }
50% {
opacity: .5;
-webkit-transform: translate(100px, 0);
transform: translate(100px, 0); }
to {
opacity: 1;
-webkit-transform: translate(100px, 0);
transform: translate(100px, 0); } }
@keyframes arrowSlide {
from {
opacity: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0); }
50% {
opacity: .5;
-webkit-transform: translate(100px, 0);
transform: translate(100px, 0); }
to {
opacity: 1;
-webkit-transform: translate(100px, 0);
transform: translate(100px, 0); } }
@-webkit-keyframes websiteSlideRightAndDiminish {
from {
opacity: 1;
-webkit-transform: translate(0, 0) scale(1, 1);
transform: translate(0, 0) scale(1, 1); }
to {
opacity: 0;
-webkit-transform: translate(300px, 0) scale(0.12, 0.12);
transform: translate(300px, 0) scale(0.12, 0.12); } }
@keyframes websiteSlideRightAndDiminish {
from {
opacity: 1;
-webkit-transform: translate(0, 0) scale(1, 1);
transform: translate(0, 0) scale(1, 1); }
to {
opacity: 0;
-webkit-transform: translate(300px, 0) scale(0.12, 0.12);
transform: translate(300px, 0) scale(0.12, 0.12); } }
@-webkit-keyframes websiteSlideRightAndDiminishFullScreen {
from {
opacity: 1;
-webkit-transform: translate(0, 0) scale(1, 1);
transform: translate(0, 0) scale(1, 1); }
to {
opacity: 0;
-webkit-transform: translate(450px, 0) scale(0.12, 0.12);
transform: translate(450px, 0) scale(0.12, 0.12); } }
@keyframes websiteSlideRightAndDiminishFullScreen {
from {
opacity: 1;
-webkit-transform: translate(0, 0) scale(1, 1);
transform: translate(0, 0) scale(1, 1); }
to {
opacity: 0;
-webkit-transform: translate(450px, 0) scale(0.12, 0.12);
transform: translate(450px, 0) scale(0.12, 0.12); } }
@-webkit-keyframes pinAppear {
from {
opacity: 0; }
to {
opacity: 1; } }
@keyframes pinAppear {
from {
opacity: 0; }
to {
opacity: 1; } }
@-webkit-keyframes elementVisible {
from {
visibility: hidden; }
to {
visibility: visible; } }
@keyframes elementVisible {
from {
visibility: hidden; }
to {
visibility: visible; } }
.NuxModalInstallExtension {
height: 100%; }
.NuxModalInstallExtension .headerContent {
margin: 32px auto 24px;
width: 736px; }
.NuxModalInstallExtension .extensionUpsellWrapper {
height: 100%;
position: relative;
width: 100%; }
.NuxModalInstallExtension .extensionUpsellWebsiteImage {
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-name: websiteSlideUp;
animation-name: websiteSlideUp;
left: 134px;
opacity: 0;
position: absolute;
top: 87px;
-webkit-transform: translate(0, 300px);
transform: translate(0, 300px); }
.NuxModalInstallExtension .extensionUpsellEmptySpace {
background-color: #fff;
height: 225px;
left: 134px;
opacity: 1;
position: absolute;
top: 87px;
width: 314px; }
.NuxModalInstallExtension .extensionUpsellWebsiteImage,
.NuxModalInstallExtension .extensionUpsellWebsiteImage2 {
background: url(https://s.pinimg.com/webapp/style/images/default-browser-save-website-1x-64b0d84e.png) no-repeat;
background-size: contain;
height: 225px;
width: 315px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxModalInstallExtension .extensionUpsellWebsiteImage,
.NuxModalInstallExtension .extensionUpsellWebsiteImage2 {
background-image: url(https://s.pinimg.com/webapp/style/images/default-browser-save-website-2x-28fc34b6.png); } }
.NuxModalInstallExtension .extensionUpsellWebsiteImage.BR,
.NuxModalInstallExtension .extensionUpsellWebsiteImage2.BR {
background: url(https://s.pinimg.com/webapp/style/images/BR-browser-save-website-1x-5e90f195.png) no-repeat;
background-size: contain;
height: 224px;
width: 314px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxModalInstallExtension .extensionUpsellWebsiteImage.BR,
.NuxModalInstallExtension .extensionUpsellWebsiteImage2.BR {
background-image: url(https://s.pinimg.com/webapp/style/images/BR-browser-save-website-2x-d846f321.png); } }
.NuxModalInstallExtension .extensionUpsellWebsiteImage.DE,
.NuxModalInstallExtension .extensionUpsellWebsiteImage2.DE {
background: url(https://s.pinimg.com/webapp/style/images/DE-browser-save-website-1x-86090736.png) no-repeat;
background-size: contain;
height: 224px;
width: 314px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxModalInstallExtension .extensionUpsellWebsiteImage.DE,
.NuxModalInstallExtension .extensionUpsellWebsiteImage2.DE {
background-image: url(https://s.pinimg.com/webapp/style/images/DE-browser-save-website-2x-d7746d89.png); } }
.NuxModalInstallExtension .extensionUpsellWebsiteImage.FR,
.NuxModalInstallExtension .extensionUpsellWebsiteImage2.FR {
background: url(https://s.pinimg.com/webapp/style/images/FR-browser-save-website-1x-e1bed247.png) no-repeat;
background-size: contain;
height: 224px;
width: 314px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxModalInstallExtension .extensionUpsellWebsiteImage.FR,
.NuxModalInstallExtension .extensionUpsellWebsiteImage2.FR {
background-image: url(https://s.pinimg.com/webapp/style/images/FR-browser-save-website-2x-5bfff355.png); } }
.NuxModalInstallExtension .extensionUpsellWebsiteImage.GB,
.NuxModalInstallExtension .extensionUpsellWebsiteImage2.GB {
background: url(https://s.pinimg.com/webapp/style/images/GB-browser-save-website-1x-61623b74.png) no-repeat;
background-size: contain;
height: 224px;
width: 314px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxModalInstallExtension .extensionUpsellWebsiteImage.GB,
.NuxModalInstallExtension .extensionUpsellWebsiteImage2.GB {
background-image: url(https://s.pinimg.com/webapp/style/images/GB-browser-save-website-2x-8f689938.png); } }
.NuxModalInstallExtension .extensionUpsellWebsiteImage.JP,
.NuxModalInstallExtension .extensionUpsellWebsiteImage2.JP {
background: url(https://s.pinimg.com/webapp/style/images/JP-browser-save-website-1x-f84158ff.png) no-repeat;
background-size: contain;
height: 224px;
width: 314px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxModalInstallExtension .extensionUpsellWebsiteImage.JP,
.NuxModalInstallExtension .extensionUpsellWebsiteImage2.JP {
background-image: url(https://s.pinimg.com/webapp/style/images/JP-browser-save-website-2x-1b32e58b.png); } }
.NuxModalInstallExtension .extensionUpsellWebsiteImage.US,
.NuxModalInstallExtension .extensionUpsellWebsiteImage2.US {
background: url(https://s.pinimg.com/webapp/style/images/US-browser-save-website-1x-da25e403.png) no-repeat;
background-size: contain;
height: 224px;
width: 314px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxModalInstallExtension .extensionUpsellWebsiteImage.US,
.NuxModalInstallExtension .extensionUpsellWebsiteImage2.US {
background-image: url(https://s.pinimg.com/webapp/style/images/US-browser-save-website-2x-61f15c6e.png); } }
.NuxModalInstallExtension .extensionUpsellWebsiteImage2 {
-webkit-animation: websiteSlideRightAndDiminish 1.5s 2s forwards, elementVisible 0s 1.5s forwards;
animation: websiteSlideRightAndDiminish 1.5s 2s forwards, elementVisible 0s 1.5s forwards;
background-size: cover;
left: 134px;
position: absolute;
top: 87px;
visibility: hidden; }
.NuxModalInstallExtension .extensionUpsellPinImage {
background: url(https://s.pinimg.com/webapp/style/images/default-browser-save-pin-1x-ea21ab28.png) no-repeat;
background-size: contain;
height: 295px;
width: 157px;
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
-webkit-animation-duration: 0.25s;
animation-duration: 0.25s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-name: pinAppear;
animation-name: pinAppear;
border-color: #d3d3d3;
border-radius: 6px;
border-width: 1px;
height: 294px;
left: 510px;
opacity: 0;
position: absolute;
top: 52px;
width: 154px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxModalInstallExtension .extensionUpsellPinImage {
background-image: url(https://s.pinimg.com/webapp/style/images/default-browser-save-pin-2x-ff3150b9.png); } }
.NuxModalInstallExtension .extensionUpsellPinImage.BR {
background: url(https://s.pinimg.com/webapp/style/images/BR-browser-save-pin-1x-c959f8c4.png) no-repeat;
background-size: contain;
height: 281px;
width: 157px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxModalInstallExtension .extensionUpsellPinImage.BR {
background-image: url(https://s.pinimg.com/webapp/style/images/BR-browser-save-pin-2x-ce9a42c4.png); } }
.NuxModalInstallExtension .extensionUpsellPinImage.DE {
background: url(https://s.pinimg.com/webapp/style/images/DE-browser-save-pin-1x-fa3343f2.png) no-repeat;
background-size: contain;
height: 295px;
width: 157px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxModalInstallExtension .extensionUpsellPinImage.DE {
background-image: url(https://s.pinimg.com/webapp/style/images/DE-browser-save-pin-2x-908755e7.png); } }
.NuxModalInstallExtension .extensionUpsellPinImage.FR {
background: url(https://s.pinimg.com/webapp/style/images/FR-browser-save-pin-1x-b2c9b48e.png) no-repeat;
background-size: contain;
height: 295px;
width: 157px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxModalInstallExtension .extensionUpsellPinImage.FR {
background-image: url(https://s.pinimg.com/webapp/style/images/FR-browser-save-pin-2x-8cf5c26c.png); } }
.NuxModalInstallExtension .extensionUpsellPinImage.GB {
background: url(https://s.pinimg.com/webapp/style/images/GB-browser-save-pin-1x-4fd314c1.png) no-repeat;
background-size: contain;
height: 281px;
width: 157px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxModalInstallExtension .extensionUpsellPinImage.GB {
background-image: url(https://s.pinimg.com/webapp/style/images/GB-browser-save-pin-2x-2ff4b4bd.png); } }
.NuxModalInstallExtension .extensionUpsellPinImage.JP {
background: url(https://s.pinimg.com/webapp/style/images/JP-browser-save-pin-1x-75b87a4a.png) no-repeat;
background-size: contain;
height: 304px;
width: 157px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxModalInstallExtension .extensionUpsellPinImage.JP {
background-image: url(https://s.pinimg.com/webapp/style/images/JP-browser-save-pin-2x-989e3765.png); } }
.NuxModalInstallExtension .extensionUpsellPinImage.US {
background: url(https://s.pinimg.com/webapp/style/images/US-browser-save-pin-1x-0dba3a57.png) no-repeat;
background-size: contain;
height: 281px;
width: 157px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxModalInstallExtension .extensionUpsellPinImage.US {
background-image: url(https://s.pinimg.com/webapp/style/images/US-browser-save-pin-2x-f36a90c9.png); } }
.NuxModalInstallExtension .extensionUpsellArrowImage {
background: url(https://s.pinimg.com/webapp/style/images/browser-save-arrow-1x-1d71efe5.png) no-repeat;
background-size: contain;
height: 79px;
width: 150px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-name: arrowSlide;
animation-name: arrowSlide;
left: 254px;
opacity: 0;
position: absolute;
top: 161px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxModalInstallExtension .extensionUpsellArrowImage {
background-image: url(https://s.pinimg.com/webapp/style/images/browser-save-arrow-2x-79536253.png); } }
.NuxModalInstallExtension .extensionUpsellPinitButtonImage {
background: url(https://s.pinimg.com/webapp/style/images/browser-save-pinit-button-1x-a49b9ec1.png) no-repeat;
background-size: contain;
height: 86px;
width: 87px;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-name: pinitButtonAppear;
animation-name: pinitButtonAppear;
left: 371px;
position: absolute;
top: 57px;
-webkit-transform: scale(0, 0);
transform: scale(0, 0); }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.NuxModalInstallExtension .extensionUpsellPinitButtonImage {
background-image: url(https://s.pinimg.com/webapp/style/images/browser-save-pinit-button-2x-4161fb89.png); } }
.NuxModalInstallExtension .footer {
border-radius: 8px;
bottom: 0;
display: block;
height: 110px;
position: absolute;
text-align: center;
width: 100%;
z-index: 2; }
.NuxModalInstallExtension .footer .btn {
border: 0 !important;
border-radius: 6px;
box-shadow: none !important;
font-size: 24px;
font-weight: bold;
height: 60px;
line-height: 29px;
margin: 20px 20px 5px;
width: 760px; }
.NuxModalInstallExtension .footer .btn:enabled {
background: #bd081c;
color: #fff; }
.NuxModalInstallExtension .footer .optionalSkip {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #999;
display: inline-block;
font-size: 16px;
font-weight: bold;
height: 20px;
line-height: 19px;
margin-bottom: 5px;
text-decoration: underline; }
.NuxModalInstallExtension .footer .optionalSkip:hover {
cursor: pointer; }
.NuxGenderStep {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%; }
.NuxGenderStep .NuxGenderStep__genderOption,
.NuxGenderStep .NuxGenderStep__genderOptionLast,
.NuxGenderStep .NuxGenderStep__genderOptionNoHover,
.NuxGenderStep .NuxGenderStep__genderOptionSelected {
border-top: 1px solid #efefef;
cursor: pointer;
display: block;
font-size: 36px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: bold;
height: 40px;
padding: 24px 0 24px 32px;
position: relative;
vertical-align: middle; }
.NuxGenderStep .NuxGenderStep__genderOptionLast {
border-bottom: 1px solid #efefef; }
.NuxGenderStep .NuxGenderStep__genderOption:hover,
.NuxGenderStep .NuxGenderStep__genderOptionSelected,
.NuxGenderStep .NuxGenderStep__genderOptionLast:hover {
background-color: #efefef; }
.NuxGenderStep .NuxGenderStep__genderOptionText,
.NuxGenderStep .NuxGenderStep__genderOptionTextNoHover {
color: #555;
padding-left: 40px;
position: absolute;
text-align: center;
vertical-align: middle; }
.NuxGenderStep .NuxGenderStep__genderOptionText {
top: 20px; }
.NuxGenderStep .NuxGenderStep__genderOptionTextNoHover {
top: 23px; }
.NuxGenderStep .NuxGenderStep__headerContent {
margin: 32px 32px 16px;
width: 736px; }
.NuxGenderStep .NuxGenderStep__nameHeaderContent {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
height: 40px;
margin: 28px 32px 0;
width: 620px; }
.NuxGenderStep .NuxGenderStep__genderSelector input[type=text] {
background: transparent;
border: none;
color: #555;
font-size: 24px;
font-weight: bold;
margin-right: 20px;
width: 590px; }
.NuxGenderStep input[type=text].slimInput {
width: 340px; }
.NuxGenderStep .NuxGenderStep__radioButtonWrapper {
padding-top: 10px; }
.NuxGenderStep .NuxGenderStep__genderOptionContent {
margin: 0 auto;
max-width: 1276px;
position: relative; }
@media (max-width: 1299px) {
.NuxGenderStep .NuxGenderStep__genderOptionContent {
max-width: 1016px; } }
@media (max-width: 1039px) {
.NuxGenderStep .NuxGenderStep__genderOptionContent {
max-width: 756px; } }
.NuxGenderStep .NuxGenderStep__nextButton {
margin: 80px 32px 0; }
.NuxGenderStep .NuxGenderStep__nameInputWrapper {
margin: 0 4px; }
.NuxGenderStep .NuxGenderStep__slimHeaderContent {
margin: 32px 32px 16px;
width: 480px; }
.NuxGenderStep .NuxGenderStep__hideRadioButton {
display: none; }
.NuxGenderStep .NuxGenderStep__buttonGenderSelector {
background: transparent;
border: none;
color: #555;
font-size: 24px;
font-weight: bold;
margin-right: 30px;
text-align: center;
width: 590px; }
.NuxGenderStep .NuxGenderStep__buttonGenderOption {
background-color: #efefef;
border-radius: 8px;
color: #555;
display: block;
font-size: 24px;
height: 70px;
margin: 12px auto;
vertical-align: middle;
width: 480px; }
.NuxGenderStep .NuxGenderStep__buttonGenderOption:hover {
background-color: #e0e0e0; }
.NuxGenderStep .NuxGenderStep__buttonGenderOption:active {
background-color: #c9c9c9; }
.NuxGenderStep .NuxGenderStep__customSelectedOption {
background-color: #555;
border-radius: 8px;
color: #fff;
display: block;
font-size: 24px;
height: 70px;
margin: 12px auto;
vertical-align: middle;
width: 480px; }
.NuxGenderStep .NuxGenderStep__buttonGenderOptionText {
color: #555;
font-weight: bold;
line-height: 70px;
padding-left: 30px;
text-align: center;
vertical-align: middle; }
.NuxGenderStep .NuxGenderStep__customSelectedOptionText {
color: #fff;
line-height: 70px;
padding-left: 30px;
text-align: center;
vertical-align: middle; }
.NuxGenderStep .NuxGenderStep__buttonCustomGenderInput {
border: 1px solid #b5b5b5;
border-radius: 8px;
box-sizing: border-box;
color: #555;
display: block;
font-size: 24px;
font-weight: bold;
height: 70px;
margin: 12px auto;
padding: 0 30px;
vertical-align: middle;
width: 480px; }
.NuxGenderStep .NuxGenderStep__buttonCustomGenderInput::-webkit-input-placeholder {
color: #b5b5b5; }
.NuxGenderStep .NuxGenderStep__buttonCustomGenderInput::-moz-placeholder {
color: #b5b5b5; }
.NuxGenderStep .NuxGenderStep__buttonCustomGenderInput:-ms-input-placeholder {
color: #b5b5b5; }
.NuxGenderStep .NuxGenderStep__buttonCustomGenderInput::placeholder {
color: #b5b5b5; }
.NuxInterest {
background-color: transparent;
border: none;
height: 136px;
padding: 0;
position: relative;
width: 136px; }
.NuxInterest.TextOnly {
height: 80px;
width: 235px; }
.NuxInterest.TextOnly:hover {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 8px; }
.NuxInterest.notSelectable {
cursor: default; }
.NuxInterest .interestCardWrapper {
height: 100%;
position: absolute;
width: 100%;
z-index: 1; }
.NuxInterest .interestCardWrapper .selectedOverlay {
background-color: #000;
border-radius: 6px;
height: 100%;
opacity: .7;
position: absolute;
top: 0;
width: 100%;
z-index: -1; }
.NuxInterest .darkBottomHalf {
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)); }
.NuxInterest .darkBottomHalf:hover {
background: transparent; }
.NuxInterest .overflowMask {
background-color: #bd081c;
border-radius: 6px;
color: #fff;
font-size: 24px;
font-weight: bold;
height: 100%;
line-height: 128px;
text-align: center;
width: 100%; }
.NuxInterest .defaultImageWash {
background-color: #000;
border-radius: 6px;
height: 100%;
opacity: .1;
position: absolute;
top: 0;
width: 100%; }
.NuxInterest .checkmarkCircle {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #fff;
border-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 24px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 24px; }
.NuxInterest .interestCardWrapper:hover .hoverMask {
background-color: rgba(0, 0, 0, 0.6);
border-radius: 8px;
height: 100%;
pointer-events: none;
position: absolute;
top: 0;
width: 100%; }
.NuxInterest .hoverText {
display: none; }
.NuxInterest .interestCardWrapper:hover .hoverText {
bottom: 0;
display: block;
padding: 8px;
position: absolute;
-webkit-transition: -webkit-transform .1s ease-in-out;
transition: -webkit-transform .1s ease-in-out;
transition: transform .1s ease-in-out;
transition: transform .1s ease-in-out, -webkit-transform .1s ease-in-out;
z-index: 1; }
.NuxInterest .selectedWrapper {
height: 100%;
position: absolute;
width: 100%; }
.nuxLoader .NuxLoader__overflowMask {
background-color: #bd081c;
border-radius: 6px;
color: #fff;
font-size: 24px;
font-weight: bold;
height: 100%;
line-height: 128px;
text-align: center;
width: 100%; }
.nuxLoader .spinner {
height: 40px;
position: absolute;
right: 40px;
top: 40px;
width: 40px; }
.nuxLoader .spinner:focus {
outline: none; }
.nuxLoader .listsWrapper {
left: 30px;
position: absolute;
top: 344px; }
.nuxLoader .listsWrapper .interestList {
overflow: hidden; }
.nuxLoader .listsWrapper .pin {
display: inline-block;
/* bottom margin to push the 2nd row's box shadow out of the visible area */
margin: 4px;
width: 180px; }
.nuxLoader .stepInfoContent {
display: none; }
.nuxLoader .loadingInterests {
margin-top: 75px; }
@-webkit-keyframes fadein {
0% {
opacity: 1; }
20% {
opacity: 1; }
40% {
opacity: 0; }
80% {
opacity: 0; }
100% {
opacity: 1; } }
@keyframes fadein {
0% {
opacity: 1; }
20% {
opacity: 1; }
40% {
opacity: 0; }
80% {
opacity: 0; }
100% {
opacity: 1; } }
.nuxLoader .loadingInterests .fadingInterest {
-webkit-animation: 4s linear infinite fadein;
animation: 4s linear infinite fadein;
border-radius: 8px;
display: inline; }
.nuxLoader .loadingInterests .fadingInterest:nth-child(1) {
-webkit-animation-delay: .5s;
animation-delay: .5s; }
.nuxLoader .loadingInterests .fadingInterest:nth-child(2) {
-webkit-animation-delay: 1s;
animation-delay: 1s; }
.nuxLoader .loadingInterests .fadingInterest:nth-child(3) {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s; }
.nuxLoader .loadingInterests .fadingInterest:nth-child(4) {
-webkit-animation-delay: 2s;
animation-delay: 2s; }
.nuxLoader .loadingInterests .fadingInterest:nth-child(5) {
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s; }
.nuxLoader .loadingInterests .fadingInterest:nth-child(6) {
-webkit-animation-delay: 3s;
animation-delay: 3s; }
.nuxLoader .ProgressBar {
bottom: 0;
position: absolute; }
.NuxContainer {
background: #fff;
height: 640px;
max-height: calc(100vh - 40px);
width: 800px; }
.NuxContainer:focus {
outline: none; }
.NuxContainer.slimWidth {
width: 544px; }
.NuxContainer.changeWidth {
-webkit-animation: widthShift .5s;
animation: widthShift .5s; }
@-webkit-keyframes widthShift {
from {
width: 544px; }
to {
width: 800px; } }
@keyframes widthShift {
from {
width: 544px; }
to {
width: 800px; } }
.NuxContainer.fullScreen {
background: rgba(255, 255, 255, 0);
bottom: 0;
height: 100%;
max-height: calc(100vh - 65px);
position: absolute;
-webkit-transition: background .3s;
transition: background .3s;
width: 100%;
will-change: background; }
.NuxContainer.fullScreen.fullScreenFadeIn {
background: white; }
.NuxContainer .NuxContainer__NuxStepContainer {
height: 100%; }
.NuxContainer .NuxContainer__NuxStepContainer.fullScreen {
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 1s;
transition: -webkit-transform 1s;
transition: transform 1s;
transition: transform 1s, -webkit-transform 1s;
will-change: transform; }
.NuxContainer .NuxContainer__NuxStepContainer.fullScreen.fullScreenMoveIn {
-webkit-transform: translateY(0);
transform: translateY(0); }
.NuxPicker__contentWrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%; }
.NuxPicker__contentWrapper .NuxPickerHeader__headerBackground {
background: rgba(255, 255, 255, 0.98);
padding: 24px 0 48px;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1; }
.NuxPicker__contentWrapper .NuxPickerHeader {
margin: 32px auto;
position: relative;
width: 736px; }
.NuxPicker__contentWrapper .NuxPickerFooter {
background: #fff;
border-radius: 8px;
display: block;
height: 100px;
position: relative;
text-align: center;
width: 100%;
z-index: 104; }
.NuxPicker__contentWrapper .NuxPickerFooter.collapsedFooter {
height: 16px; }
.NuxPicker__contentWrapper .NuxPickerFooter .NuxPickerFooter__buttonWrapper {
-webkit-font-smoothing: antialiased; }
.NuxPicker__contentWrapper .NuxPickerFooter .NuxPickerFooter__footerWash {
background: -webkit-linear-gradient(rgba(255, 255, 255, 0), white);
background: linear-gradient(rgba(255, 255, 255, 0), white);
border-radius: 6px;
bottom: 0;
height: 73px;
margin-top: -73px;
pointer-events: none;
position: absolute;
width: 100%; }
.NuxPicker__contentWrapper .NuxPickerFooter .NuxPickerFooter__footerWash.bottomSpace {
bottom: 73px; }
.NuxPicker__contentWrapper .NuxPickerInterestsGrid {
height: 368px;
overflow-y: scroll;
padding-bottom: 73px; }
.NuxPicker__contentWrapper .NuxPickerInterestsGrid.fullHeight {
height: 100%; }
.NuxPicker__contentWrapper .spinner {
position: absolute;
right: 5px;
top: 5px; }
.NuxPicker__contentWrapper .NuxPicker__Pin--checkmark {
position: relative;
top: 48px; }
.NuxPicker__contentWrapper .InterestCardWrapper__selectedWrapper {
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform .1s ease-in-out;
transition: -webkit-transform .1s ease-in-out;
transition: transform .1s ease-in-out;
transition: transform .1s ease-in-out, -webkit-transform .1s ease-in-out;
width: 100%;
z-index: 1; }
.NuxPicker__contentWrapper .InterestCardWrapper__selectedWrapper:active {
-webkit-transform: scale(0.95);
transform: scale(0.95); }
.NuxPicker__contentWrapper .InterestCardWrapper__selectedOverlay {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 6px;
height: 100%;
position: absolute;
top: 0;
width: 100%;
z-index: -1; }
.NuxPicker__contentWrapper .InterestCardWrapper__selectedOverlay.smallCheckmark {
background-color: rgba(0, 0, 0, 0.6); }
.NuxPicker__contentWrapper .InterestCardWrapper__selectedOverlayText {
bottom: 0;
padding: 8px;
position: absolute; }
.SearchSuggestions {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-left: 5px;
min-height: 50px; }
.searchSuggestionsLoadingSpinner {
padding-top: 24px;
position: relative; }
.SearchSuggestionToken .tokenContainer {
border-radius: 4px;
color: #fff;
float: left;
font-size: 16px;
font-weight: 600;
height: 40px;
letter-spacing: -.01em;
margin: 4px; }
.SearchSuggestionToken .tokenContainer a {
color: inherit; }
.SearchSuggestionToken .tokenContainer span {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-radius: 4px;
float: left;
padding: 9px 12px 11px; }
.SearchSuggestionToken .tokenContainer span:hover {
background: rgba(0, 0, 0, 0.05); }
.SearchSuggestionToken .tokenContainer span em {
width: 12px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -51px no-repeat;
float: left;
margin: 3px 8px 5px 0; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.SearchSuggestionToken .tokenContainer span em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -43px -368px;
background-size: 399px 382px; } }
.StickyAppUpsell {
background-color: #555;
border-radius: 0;
font-size: 21px;
font-weight: bold;
max-height: 0;
opacity: 0;
overflow: hidden;
position: fixed;
width: 100%;
z-index: 1; }
.StickyAppUpsell.show {
max-height: 500px;
opacity: 1;
-webkit-transition: max-height 1s ease-in;
transition: max-height 1s ease-in; }
.StickyAppUpsell .iosButton {
display: inline-block;
height: 45px;
outline: none;
width: 151px; }
.StickyAppUpsell .androidButton {
display: inline-block;
height: 45px;
margin-right: 10px;
outline: none;
width: 151px; }
.StickyAppUpsell .upsellTextButtons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 10px 0;
width: 100%; }
.StickyAppUpsell .headerText {
display: inline-block;
margin-left: 100px;
margin-top: 15px; }
.StickyAppUpsell .appButtons {
display: inline-block;
margin-right: 125px;
margin-top: 3px;
min-width: 315px; }
.StickyAppUpsell .text {
color: #fff;
margin-bottom: 10px; }
.StickyAppUpsell .closeButton, .StickyAppUpsell .closeButton:active {
background: url(https://s.pinimg.com/webapp/style/images/close-white-1x-83883ea4.png) no-repeat;
background-size: contain;
height: 10px;
width: 10px;
border: none;
margin-right: 10px;
margin-top: 20px;
position: absolute;
right: 0; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.StickyAppUpsell .closeButton, .StickyAppUpsell .closeButton:active {
background-image: url(https://s.pinimg.com/webapp/style/images/close-white-2x-e88bd7b9.png); } }
.StickyBannerFooter {
bottom: 0%;
height: 0;
min-width: 800px;
position: fixed;
-webkit-transition: height .85s;
transition: height .85s;
-webkit-transition-timing-function: cubic-bezier(0.19, 1.32, 0.48, 1);
transition-timing-function: cubic-bezier(0.19, 1.32, 0.48, 1);
width: 100%; }
.StickyBannerFooter .colorSubHeaderCTAText {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #d698ff;
font-size: 16px;
font-weight: 700px;
letter-spacing: -.2;
line-height: 18px;
word-spacing: 0; }
.StickyBannerFooter .headerCTAText {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #ff9f72;
font-size: 16px;
font-weight: 700px;
letter-spacing: -.2;
line-height: 18px;
word-spacing: 0; }
.StickyBannerFooter .dismissButton {
background-color: inherit;
border: none; }
.UpsellTip {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
top: 0; }
.UpsellTip .upsellTip {
color: #555;
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
font-size: 24px;
font-weight: bold;
letter-spacing: -1px;
padding: 0 30px 70px; }
.UpsellTip .upsellTip .tipTitle {
color: #bd081c; }
.UpsellTip .footerButtons {
bottom: 0;
left: 0;
padding: 24px;
position: absolute;
right: 0; }
.UpsellTip .footerButtons .submitButton {
position: absolute;
right: 24px; }
.UpsellTip .footerButtons .cancelButton,
.UpsellTip .footerButtons .submitButton {
/* stylelint-disable-next-line at-rule-no-unknown */
height: 40px;
padding: 10px 14px 12px; }
.UpsellTip .footerButtons .Button.btn.isBrioFlat.hasText.hasIcon.submitButton span {
margin-left: 8px; }
.conversationPanel {
height: 440px;
overflow: auto; }
.EmptyConversations {
background: #fff; }
.EmptyConversations .intro {
color: #999;
font-size: 13px;
margin: 20px auto 24px;
text-align: center;
width: 210px; }
.EmptyConversations .intro strong {
color: #666;
letter-spacing: .1px;
line-height: 20px; }
.EmptyConversations .icon {
background: url(https://s.pinimg.com/webapp/style/images/messages-blank-combined-1x-546e543f.png) no-repeat;
background-size: contain;
height: 238px;
width: 280px;
margin: 30px auto 0; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.EmptyConversations .icon {
background-image: url(https://s.pinimg.com/webapp/style/images/messages-blank-combined-2x-18885d27.png); } }
.EmptyConversations .headsContainer {
margin-left: auto;
margin-right: auto;
padding: 25px;
width: 225px; }
.EmptyConversations .headsContainer::after {
clear: both;
content: "";
display: table; }
.EmptyConversations .headsContainer .ConversationHead {
float: left;
margin-right: 24px; }
.EmptyConversations .headsContainer .ConversationHead:last-child {
margin-right: 0; }
.NewsConversationsDropdown {
max-height: 500px;
min-width: 375px; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.newsConversationsTabs {
overflow: hidden;
padding: 2px; }
.newsConversationsTabs .newsConversationsTabButton {
background-color: #efefef;
color: #b5b5b5;
display: inline-block;
font-size: 16px;
font-weight: 500;
height: 36px;
width: 100%; }
.newsConversationsTabs .newsConversationsTabButton.activeSegment {
background: #fff; }
.newsConversationsTabs .newsConversationsTabButton.activeSegment, .newsConversationsTabs .newsConversationsTabButton:focus, .newsConversationsTabs .newsConversationsTabButton:hover {
color: #555; }
.newsConversationsTabs .newsConversationsTabButton.badged .buttonBadge {
width: 5px;
height: 5px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -467px -372px no-repeat;
font-size: 0;
left: -7px;
padding: 0;
position: relative; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.newsConversationsTabs .newsConversationsTabButton.badged .buttonBadge {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -418px -100px;
background-size: 428px 427px; } }
.newsConversationsTabs ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.newsConversationsTabs ul li {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 100%; }
/* desktop.scss */
.newsConversationsTabs {
background: #efefef;
border-radius: 6px;
margin: 10px; }
.previewRowItem {
display: inline-block;
margin-right: 4px; }
.previewRowFullWidthItem {
background: #efefef;
border-left: 2px solid #fff;
border-radius: 0;
box-sizing: border-box;
margin: 0;
overflow: hidden;
width: 25%;
/* handles empty card and last image item */ }
.previewRowFullWidthItem:first-child,
.previewRowFullWidthItem:first-child span {
border-radius: 4px 0 0 4px; }
.previewRowFullWidthItem:last-child,
.previewRowFullWidthItem:last-child span {
border-radius: 0 4px 4px 0; }
/* TODO: proper fix through box instead of repeat divergent styles; handles empty card and last image item */
.hasBrioCorners {
/* handles empty card and last image item */ }
.hasBrioCorners:first-child,
.hasBrioCorners:first-child img {
border-radius: 8px 0 0 8px; }
.hasBrioCorners:first-child,
.hasBrioCorners:first-child span {
border-radius: 8px 0 0 8px; }
.hasBrioCorners:last-child,
.hasBrioCorners:last-child span {
border-radius: 0 8px 8px 0; }
.hasBrioCorners:last-child,
.hasBrioCorners:last-child img {
border-radius: 0 8px 8px 0; }
.hasBrioCorners:last-child,
.hasBrioCorners:last-child div {
border-radius: 0 8px 8px 0; }
.clickthroughHeader {
margin: auto;
max-width: 740px;
padding: 30px 0 6px 24px; }
.clickthroughHeader .headerImage {
height: 48px;
margin-right: 12px;
width: 48px; }
.clickthroughHeader .headerMessage {
height: 48px; }
.educationPill {
background-color: #88a5ab;
border: none;
border-radius: 100px;
margin: 20px;
width: 344px; }
.educationPill.slideIn {
-webkit-animation: menu-slide-in-up .3s;
animation: menu-slide-in-up .3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; }
.educationPill.fadeOut {
-webkit-animation: fadeOut .3s;
animation: fadeOut .3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
pointer-events: none; }
.educationPill .message {
color: #fff;
font-size: 18px;
font-weight: 500;
margin: 0 auto;
padding: 16px 0;
text-align: left;
width: 80%; }
.educationStep {
position: absolute;
z-index: 752; }
.educationStep.bottom {
bottom: 0; }
.fourPixelMask {
border-radius: 4px;
overflow: hidden; }
.librofile {
display: inline-block;
position: relative; }
.librofile .pinImage {
background: #efefef center top;
background-size: cover;
display: inline-block; }
.librofile .pinImage:not(:last-child) {
margin-right: 2px; }
.librofile .pinImages {
overflow: hidden; }
.librofile .profileImage {
border: 2px solid #fff;
bottom: -10px;
left: 8px;
position: absolute; }
.newsHubItem {
border-bottom: 1px solid #efefef;
display: block;
padding: 28px 0 28px 16px; }
.newsHubItem:hover, .newsHubItem:focus {
background-color: #f1f1f1; }
.newsHubItem:hover .whiteBorderOnHover, .newsHubItem:focus .whiteBorderOnHover {
border-radius: 8px;
box-shadow: 0 0 0 2px #fff; }
.newsHubItem:hover .whiteOnHover, .newsHubItem:focus .whiteOnHover {
background-color: #fff !important; }
.newsHubPreview .newsHubItem {
padding-top: 16px; }
.miniPinGridItem {
background: #efefef center top;
background-size: cover;
display: inline-block; }
.miniPinGridItem:not(:last-child) {
margin-right: 2px; }
.attributionWrapper {
bottom: -10px;
left: 8px;
position: absolute; }
.attributionUserBorder {
border: 2px solid #fff;
border-radius: 100px; }
.attributionSearchBorder {
border: 2px solid #fff;
border-radius: 999px; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.newsHubPanel .newsHubItemDate {
padding: 32px 0 8px 16px; }
.newsHubPanel .newsHubItemDate + .newsHubItem {
padding-top: 16px; }
.newsHubPanel .newsHubItemWrapper:first-child .newsHubItemDate {
padding-top: 20px; }
/* desktop.scss */
.newsHubPanel {
height: 440px; }
.listContainer {
overflow: auto; }
.loadingItem {
height: 20%;
padding: 5%;
position: relative; }
.PartnerHeader .adminModeBackground {
background-color: #dcdcdc;
background-image: -webkit-repeating-linear-gradient(45deg, transparent, transparent 20px, #fff 20px, #fff 40px);
background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, #fff 20px, #fff 40px); }
.PartnerHeader .adminModeBackground.writeMode {
background-color: #ec7a71; }
.PartnerHeader .ReactDropdown__control--advertiserDropdown {
background: transparent; }
.HeaderContent {
position: relative;
position: -webkit-sticky;
position: sticky;
top: 0;
width: 100%; }
.ConversationListItemReact {
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 50px;
left: 0;
/* animation */
padding: 16px 14px;
position: relative; }
.ConversationListItemReact:hover {
background: #f1f1f1; }
.ConversationListItemReact:hover .conversationCloseButton {
display: block; }
.ConversationListItemReact:hover .conversationUnreadMark {
display: none; }
.ConversationListItemReact.conversationHidden {
-webkit-animation: slideOutLeft 0.5s forwards ease-out;
animation: slideOutLeft 0.5s forwards ease-out; }
@-webkit-keyframes slideOutLeft {
100% {
height: 0;
padding: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%); } }
@keyframes slideOutLeft {
100% {
height: 0;
padding: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%); } }
.ConversationListItemReact .conversationRepContainer {
margin-right: 16px 14px; }
.ConversationListItemReact .conversationContentContainer {
font-size: 12px; }
.ConversationListItemReact .conversationTitleContainer,
.ConversationListItemReact .conversationTitleContainer a {
color: #555;
font-size: 12px; }
.ConversationListItemReact .lastMessageContent {
color: #b5b5b5;
font-size: 11px;
font-weight: normal;
margin-bottom: 3px;
margin-top: 1px; }
.ConversationListItemReact .lastMessageTimestamp {
color: #b5b5b5;
font-size: 11px;
font-weight: normal; }
.ConversationListItemReact .membersTitleNames {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.ConversationListItemReact .conversationUnreadMark {
background-color: #bd081c;
border-radius: 50%;
bottom: 37px;
display: block;
height: 6px;
position: absolute;
right: 8px;
width: 6px; }
.ConversationListItemReact .conversationCloseButton {
display: none;
margin: 24px 8px;
position: absolute;
right: -1px;
top: 2px; }
.ConversationListItemReact .conversationCloseButton span {
color: #999;
font-size: 18px;
font-weight: bold; }
.reactConversationsContainer {
bottom: 20px;
left: 20px;
position: fixed;
z-index: 700; }
.reactConversationsContainer .conversationBubbleContainer {
margin-bottom: 10px; }
.reactConversationsContainer .reactConversationContainer:hover .conversationHeadClose {
display: block;
z-index: 701; }
.reactConversationsContainer .reactConversationsContent {
position: relative; }
.reactConversationsContainer .reactChatCaret {
bottom: 0;
left: -17px !important;
position: absolute;
right: inherit !important; }
.reactConversationsContainer .activeConversationDropdown {
border-radius: 8px; }
.reactConversationsContainer .conversationHeadClose {
display: none;
left: 0;
position: absolute;
top: 0; }
.reactConversationsContainer .unreadMark {
background: #bd081c;
border-radius: 50%;
color: #fff;
padding: 2px 6px;
position: absolute;
right: 0;
top: 0; }
.reactConversationsContainer.relocateChatheads {
left: auto;
right: 20px; }
.reactConversationsContainer.relocateChatheads .reactConversationContainer {
float: right;
margin-left: 20px; }
.ConversationEventMessage {
margin: 16px 0; }
.ConversationEventMessage .eventMessageTitle {
color: #999;
font-size: 11px;
text-align: center; }
.ConversationEventMessage .eventMessageTitle .eventLine {
margin: 0; }
.ConversationHeader {
position: relative; }
.ConversationHeader a {
color: #333; }
.ConversationHeader a:hover {
text-decoration: underline; }
.ConversationHeader .convosHeader {
overflow: hidden;
background: #fff;
border-radius: 8px 8px 0 0;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
line-height: 16px;
padding: 10px;
position: relative;
text-align: center; }
.ConversationHeader .convosHeader:hover .reportMsgButton em, .ConversationHeader .convosHeader:active .reportMsgButton em {
opacity: 1; }
.ConversationHeader .left {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
.ConversationHeader .convosTitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
font-size: 13px;
font-weight: 700;
max-width: 275px; }
.ConversationHeader .convosMembersSubtitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #999;
font-size: 11px;
font-weight: normal;
margin: 0;
max-width: 275px; }
.ConversationHeader .convosMembersSubtitle .convosNameInfo {
color: #999;
font-weight: normal; }
.ConversationHeader .allMembersContainer {
bottom: 55px;
display: none;
margin: 0 auto;
position: absolute;
width: 100%; }
.ConversationHeader .allMembersContainer em {
width: 14px;
height: 8px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -62px -393px no-repeat;
display: block;
margin: auto; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ConversationHeader .allMembersContainer em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -370px -359px;
background-size: 399px 382px; } }
.ConversationHeader .allMembersContent {
background: #555;
border-radius: 4px;
margin: 0 auto;
padding: 12px 16px;
width: 150px; }
.ConversationHeader .allMembersContent .convosNameInfo {
color: #fff;
display: block;
font-weight: 400; }
.ConversationHeader .hoverButtonContainer {
background: #fff;
padding: 0 0 10px 10px;
position: absolute;
right: 25px; }
.ConversationHeader:hover .allMembersContainer {
display: block; }
.ConversationHeader.displayReportFlagButton .left {
display: inline-block;
float: none;
margin: 0 auto; }
.ConversationHeader.displayReportFlagButton .reportMsgButton em {
display: inline-block; }
.ConversationHeader.displayReportFlagButton .cancelButton em {
display: none; }
.ConversationHeader.contactRequestHeader .convosHeader > .leftIcon {
float: left;
padding-right: 10px; }
.ConversationHeader.contactRequestHeader .convosHeader > .leftIcon em {
width: 10px;
height: 15px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -316px no-repeat;
display: block; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ConversationHeader.contactRequestHeader .convosHeader > .leftIcon em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -418px 0;
background-size: 428px 427px; } }
.ConversationHeader .convosMembersSectionReact {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.ConversationHeader .convosMembersSubtitleReact {
display: inline; }
.reactConversationWindow {
background: #eee;
border: 1px solid #eee;
border-radius: 8px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 436px;
width: 100%; }
.reactConversationWindow .messagesContainer {
-webkit-box-flex: 1;
-ms-flex: 1 1;
flex: 1 1;
overflow: auto; }
.reactConversationWindow .itemContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.reactConversationWindow .messageObjectContainer {
background: #fff;
border-radius: 8px 8px 8px 0;
margin-left: 16px;
margin-right: 16px;
margin-top: 8px;
padding: 10px; }
.reactConversationWindow .userMessageContainer {
max-width: 236px; }
.reactConversationWindow .messageSenderIcon {
-ms-flex-item-align: end;
align-self: flex-end;
border-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 33px;
margin: 8px 0 0 8px;
min-width: 33px; }
.reactConversationWindow .senderName {
margin: 8px 0 0 16px; }
.reactConversationWindow .messageTextContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 8px;
padding-left: 0;
padding-right: 40px;
position: relative; }
.reactConversationWindow .messageTextContent {
background: #fff;
border-radius: 6px;
color: #555;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
margin-left: 16px;
max-width: 200px;
overflow-wrap: break-word;
padding: 10px; }
.reactConversationWindow .messageTextContent a {
text-decoration: underline; }
.reactConversationWindow .messageTextCaret {
width: 8px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -10px -464px no-repeat;
bottom: 8px;
left: 8px;
position: absolute; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.reactConversationWindow .messageTextCaret {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -418px -50px;
background-size: 428px 427px; } }
.reactConversationWindow .messageFromViewer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse; }
.reactConversationWindow .messageFromViewer .messageTextContainer {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
padding-left: 40px;
padding-right: 0; }
.reactConversationWindow .messageFromViewer .messageTextContent {
background: #444;
color: #fff;
margin: 0 16px; }
.reactConversationWindow .messageFromViewer .messageTextContent a {
color: #fff; }
.reactConversationWindow .messageFromViewer .messageTextCaret {
width: 8px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -20px -464px no-repeat;
left: auto;
left: initial;
right: 8px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.reactConversationWindow .messageFromViewer .messageTextCaret {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -418px -76px;
background-size: 428px 427px; } }
.reactConversationWindow .messageFromViewer .messageSenderIcon {
margin: 8px 8px 0 0; }
.reactConversationWindow .messageFromViewer .messageObjectContainer {
border-radius: 8px 8px 0 8px;
margin-left: auto; }
.reactConversationWindow .reactNewMessageInput::-webkit-input-placeholder {
color: #ccc; }
.reactConversationWindow .reactNewMessageInput::-moz-placeholder {
color: #ccc; }
.reactConversationWindow .reactNewMessageInput:-ms-input-placeholder {
color: #ccc; }
.reactConversationWindow .reactNewMessageInput::placeholder {
color: #ccc; }
.reactSenderWithInitials {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: #bd081c;
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 33px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 33px; }
.ConversationBoardCard,
.ConversationUserCard {
position: relative; }
.ConversationBoardCard::before,
.ConversationUserCard::before {
background: rgba(0, 0, 0, 0.05);
border-radius: 8px;
content: " " !important;
height: 100%;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
-webkit-transform: scale(0.96);
transform: scale(0.96);
width: 100%;
z-index: 3; }
.ConversationBoardCard:hover::before,
.ConversationUserCard:hover::before {
-webkit-animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards;
animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; }
.ConversationUserCard {
position: relative; }
.ConversationUserCard::before {
background: rgba(0, 0, 0, 0.05);
border-radius: 8px;
content: " " !important;
height: 100%;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
-webkit-transform: scale(0.96);
transform: scale(0.96);
width: 100%;
z-index: 3; }
.ConversationUserCard:hover::before {
-webkit-animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards;
animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; }
.conversationContactContainer {
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 10px; }
.conversationContactContainer .contactDescription {
color: #b5b5b5; }
.conversationContactContainer .contactName {
font-weight: bold; }
.conversationContactContainer .contactTextInfo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-left: 10px; }
.conversationContactContainer .conversationContactContainer:hover {
background: #f1f1f1; }
.conversationContactContainer .contactWrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.conversationContactContainer .selectionIndicator {
border-radius: 50%;
height: 30px; }
.conversationContactContainer .selectionIndicator em {
width: 34px;
height: 34px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -405px -74px no-repeat;
display: block; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.conversationContactContainer .selectionIndicator em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -342px -72px;
background-size: 428px 427px; } }
.reactTokenizedInputContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.reactTokenizedInputContainer .tokenRemove {
display: none;
left: 0;
position: absolute;
top: 0; }
.reactTokenizedInputContainer .textFieldContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
.reactTokenizedInputContainer .textFieldContainer input {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 40px; }
.reactTokenizedInputContainer .tokenItem {
padding-right: 5px; }
.reactTokenizedInputContainer .tokenItem:hover .tokenRemove {
display: block;
z-index: 1001; }
.reactTokenizedInputContainer .tokenItem:last-child {
padding-right: 0; }
.reactTokenizedInputContainer .tokenContainer {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.MobileLandingPageUpsell {
background-color: #fff;
/* stylelint-disable-next-line property-blacklist */
font-family: sans-serif;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.MobileLandingPageUpsell .topBackground {
background-image: url(https://s.pinimg.com/webapp/style/images/background-2eee85f9.jpg);
background-size: cover; }
.MobileLandingPageUpsell .topBackground .topContainer {
color: #fff; }
.MobileLandingPageUpsell .topBackground .topContainer .logo {
background: url(https://s.pinimg.com/webapp/style/images/white-pinterest-logo-1x-b5e851a6.png) no-repeat;
background-size: contain;
height: 26px;
width: 99px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .topBackground .topContainer .logo {
background-image: url(https://s.pinimg.com/webapp/style/images/white-pinterest-logo-2x-4a56380e.png); } }
.MobileLandingPageUpsell .androidButton {
background: url(https://s.pinimg.com/webapp/style/images/EN-1x-193adbd5.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px;
display: inline-block; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton {
background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-ea0db06a.png); } }
.MobileLandingPageUpsell .iosButton {
background: url(https://s.pinimg.com/webapp/style/images/EN-1x-6f0f8e76.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px;
display: inline-block; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton {
background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-1bfaab3e.png); } }
.MobileLandingPageUpsell .androidButton.CS {
background: url(https://s.pinimg.com/webapp/style/images/CS-1x-aa88f4fd.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.CS {
background-image: url(https://s.pinimg.com/webapp/style/images/CS-2x-1f99325c.png); } }
.MobileLandingPageUpsell .iosButton.CS {
background: url(https://s.pinimg.com/webapp/style/images/CS-1x-57b27437.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.CS {
background-image: url(https://s.pinimg.com/webapp/style/images/CS-2x-387b6b84.png); } }
.MobileLandingPageUpsell .androidButton.DA {
background: url(https://s.pinimg.com/webapp/style/images/DA-1x-b3212f93.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.DA {
background-image: url(https://s.pinimg.com/webapp/style/images/DA-2x-881f535b.png); } }
.MobileLandingPageUpsell .iosButton.DA {
background: url(https://s.pinimg.com/webapp/style/images/DA-1x-73095d1e.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.DA {
background-image: url(https://s.pinimg.com/webapp/style/images/DA-2x-f75e4549.png); } }
.MobileLandingPageUpsell .androidButton.DE {
background: url(https://s.pinimg.com/webapp/style/images/DE-1x-195f2284.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.DE {
background-image: url(https://s.pinimg.com/webapp/style/images/DE-2x-73bba6d5.png); } }
.MobileLandingPageUpsell .iosButton.DE {
background: url(https://s.pinimg.com/webapp/style/images/DE-1x-9a33f8c5.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.DE {
background-image: url(https://s.pinimg.com/webapp/style/images/DE-2x-81d4e358.png); } }
.MobileLandingPageUpsell .androidButton.EL {
background: url(https://s.pinimg.com/webapp/style/images/EL-1x-d5e9cffb.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.EL {
background-image: url(https://s.pinimg.com/webapp/style/images/EL-2x-75dbffaf.png); } }
.MobileLandingPageUpsell .iosButton.EL {
background: url(https://s.pinimg.com/webapp/style/images/EL-1x-c47b5f4b.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.EL {
background-image: url(https://s.pinimg.com/webapp/style/images/EL-2x-f94ceee4.png); } }
.MobileLandingPageUpsell .androidButton.EN {
background: url(https://s.pinimg.com/webapp/style/images/EN-1x-193adbd5.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.EN {
background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-ea0db06a.png); } }
.MobileLandingPageUpsell .iosButton.EN {
background: url(https://s.pinimg.com/webapp/style/images/EN-1x-6f0f8e76.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.EN {
background-image: url(https://s.pinimg.com/webapp/style/images/EN-2x-1bfaab3e.png); } }
.MobileLandingPageUpsell .androidButton.ES {
background: url(https://s.pinimg.com/webapp/style/images/ES-1x-5d4df5f0.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.ES {
background-image: url(https://s.pinimg.com/webapp/style/images/ES-2x-4b31e0d2.png); } }
.MobileLandingPageUpsell .iosButton.ES {
background: url(https://s.pinimg.com/webapp/style/images/ES-1x-43d3ab96.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.ES {
background-image: url(https://s.pinimg.com/webapp/style/images/ES-2x-a31d918b.png); } }
.MobileLandingPageUpsell .androidButton.FI {
background: url(https://s.pinimg.com/webapp/style/images/FI-1x-df009e22.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.FI {
background-image: url(https://s.pinimg.com/webapp/style/images/FI-2x-93552fb9.png); } }
.MobileLandingPageUpsell .iosButton.FI {
background: url(https://s.pinimg.com/webapp/style/images/FI-1x-99cb37da.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.FI {
background-image: url(https://s.pinimg.com/webapp/style/images/FI-2x-6cd4e75f.png); } }
.MobileLandingPageUpsell .androidButton.FR {
background: url(https://s.pinimg.com/webapp/style/images/FR-1x-76258add.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.FR {
background-image: url(https://s.pinimg.com/webapp/style/images/FR-2x-892d382a.png); } }
.MobileLandingPageUpsell .iosButton.FR {
background: url(https://s.pinimg.com/webapp/style/images/FR-1x-a1b11f36.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.FR {
background-image: url(https://s.pinimg.com/webapp/style/images/FR-2x-60ddb3dc.png); } }
.MobileLandingPageUpsell .androidButton.HU {
background: url(https://s.pinimg.com/webapp/style/images/HU-1x-f5a33374.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.HU {
background-image: url(https://s.pinimg.com/webapp/style/images/HU-2x-3cf19ccb.png); } }
.MobileLandingPageUpsell .iosButton.HU {
background: url(https://s.pinimg.com/webapp/style/images/HU-1x-ecfb98ab.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.HU {
background-image: url(https://s.pinimg.com/webapp/style/images/HU-2x-801f2f76.png); } }
.MobileLandingPageUpsell .androidButton.ID {
background: url(https://s.pinimg.com/webapp/style/images/ID-1x-fc856302.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.ID {
background-image: url(https://s.pinimg.com/webapp/style/images/ID-2x-60763725.png); } }
.MobileLandingPageUpsell .iosButton.ID {
background: url(https://s.pinimg.com/webapp/style/images/ID-1x-7723e800.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.ID {
background-image: url(https://s.pinimg.com/webapp/style/images/ID-2x-511fb06d.png); } }
.MobileLandingPageUpsell .androidButton.IT {
background: url(https://s.pinimg.com/webapp/style/images/IT-1x-78215d79.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.IT {
background-image: url(https://s.pinimg.com/webapp/style/images/IT-2x-f06d21d3.png); } }
.MobileLandingPageUpsell .iosButton.IT {
background: url(https://s.pinimg.com/webapp/style/images/IT-1x-eb49e52c.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.IT {
background-image: url(https://s.pinimg.com/webapp/style/images/IT-2x-4e1ebffc.png); } }
.MobileLandingPageUpsell .androidButton.JA {
background: url(https://s.pinimg.com/webapp/style/images/JA-1x-e4d2e103.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.JA {
background-image: url(https://s.pinimg.com/webapp/style/images/JA-2x-613b7a1c.png); } }
.MobileLandingPageUpsell .iosButton.JA {
background: url(https://s.pinimg.com/webapp/style/images/JA-1x-e9625ac6.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.JA {
background-image: url(https://s.pinimg.com/webapp/style/images/JA-2x-e4949c87.png); } }
.MobileLandingPageUpsell .androidButton.KO {
background: url(https://s.pinimg.com/webapp/style/images/KO-1x-d08dd546.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.KO {
background-image: url(https://s.pinimg.com/webapp/style/images/KO-2x-82063d73.png); } }
.MobileLandingPageUpsell .iosButton.KO {
background: url(https://s.pinimg.com/webapp/style/images/KO-1x-3699e0ab.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.KO {
background-image: url(https://s.pinimg.com/webapp/style/images/KO-2x-ddc06527.png); } }
.MobileLandingPageUpsell .androidButton.ML {
background: url(https://s.pinimg.com/webapp/style/images/ML-1x-0069db8e.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.ML {
background-image: url(https://s.pinimg.com/webapp/style/images/ML-2x-85c22418.png); } }
.MobileLandingPageUpsell .iosButton.ML {
background: url(https://s.pinimg.com/webapp/style/images/ML-1x-cfe4f86a.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.ML {
background-image: url(https://s.pinimg.com/webapp/style/images/ML-2x-482d4428.png); } }
.MobileLandingPageUpsell .androidButton.NL {
background: url(https://s.pinimg.com/webapp/style/images/NL-1x-ff73753a.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.NL {
background-image: url(https://s.pinimg.com/webapp/style/images/NL-2x-8c8e0858.png); } }
.MobileLandingPageUpsell .iosButton.NL {
background: url(https://s.pinimg.com/webapp/style/images/NL-1x-3926d2dd.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.NL {
background-image: url(https://s.pinimg.com/webapp/style/images/NL-2x-ffcdfef9.png); } }
.MobileLandingPageUpsell .androidButton.NN {
background: url(https://s.pinimg.com/webapp/style/images/NN-1x-a9972684.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.NN {
background-image: url(https://s.pinimg.com/webapp/style/images/NN-2x-85d7db2a.png); } }
.MobileLandingPageUpsell .iosButton.NN {
background: url(https://s.pinimg.com/webapp/style/images/NN-1x-6e36a313.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.NN {
background-image: url(https://s.pinimg.com/webapp/style/images/NN-2x-fd2478e8.png); } }
.MobileLandingPageUpsell .androidButton.PL {
background: url(https://s.pinimg.com/webapp/style/images/PL-1x-dc76138d.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.PL {
background-image: url(https://s.pinimg.com/webapp/style/images/PL-2x-56d0226f.png); } }
.MobileLandingPageUpsell .iosButton.PL {
background: url(https://s.pinimg.com/webapp/style/images/PL-1x-3a5b9eb6.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.PL {
background-image: url(https://s.pinimg.com/webapp/style/images/PL-2x-3cc909a8.png); } }
.MobileLandingPageUpsell .androidButton.PT {
background: url(https://s.pinimg.com/webapp/style/images/PT-1x-61d44f78.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.PT {
background-image: url(https://s.pinimg.com/webapp/style/images/PT-2x-91f7acfc.png); } }
.MobileLandingPageUpsell .iosButton.PT {
background: url(https://s.pinimg.com/webapp/style/images/PT-1x-fc9e1aa2.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.PT {
background-image: url(https://s.pinimg.com/webapp/style/images/PT-2x-e272dbd6.png); } }
.MobileLandingPageUpsell .androidButton.RO {
background: url(https://s.pinimg.com/webapp/style/images/RO-1x-fda1c018.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.RO {
background-image: url(https://s.pinimg.com/webapp/style/images/RO-2x-d48881c4.png); } }
.MobileLandingPageUpsell .iosButton.RO {
background: url(https://s.pinimg.com/webapp/style/images/RO-1x-18736a64.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.RO {
background-image: url(https://s.pinimg.com/webapp/style/images/RO-2x-c762cab0.png); } }
.MobileLandingPageUpsell .androidButton.RU {
background: url(https://s.pinimg.com/webapp/style/images/RU-1x-65d3a95b.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.RU {
background-image: url(https://s.pinimg.com/webapp/style/images/RU-2x-0ce2c757.png); } }
.MobileLandingPageUpsell .iosButton.RU {
background: url(https://s.pinimg.com/webapp/style/images/RU-1x-ce1d81a3.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.RU {
background-image: url(https://s.pinimg.com/webapp/style/images/RU-2x-b89abd86.png); } }
.MobileLandingPageUpsell .androidButton.SK {
background: url(https://s.pinimg.com/webapp/style/images/SK-1x-66e29846.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.SK {
background-image: url(https://s.pinimg.com/webapp/style/images/SK-2x-16880fe3.png); } }
.MobileLandingPageUpsell .iosButton.SK {
background: url(https://s.pinimg.com/webapp/style/images/SK-1x-ac41a55d.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.SK {
background-image: url(https://s.pinimg.com/webapp/style/images/SK-2x-20b58101.png); } }
.MobileLandingPageUpsell .androidButton.SV {
background: url(https://s.pinimg.com/webapp/style/images/SV-1x-2bad06b4.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.SV {
background-image: url(https://s.pinimg.com/webapp/style/images/SV-2x-502a5a32.png); } }
.MobileLandingPageUpsell .iosButton.SV {
background: url(https://s.pinimg.com/webapp/style/images/SV-1x-b3f99f27.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.SV {
background-image: url(https://s.pinimg.com/webapp/style/images/SV-2x-b1271639.png); } }
.MobileLandingPageUpsell .androidButton.TH {
background: url(https://s.pinimg.com/webapp/style/images/TH-1x-66e29846.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.TH {
background-image: url(https://s.pinimg.com/webapp/style/images/TH-2x-16880fe3.png); } }
.MobileLandingPageUpsell .iosButton.TH {
background: url(https://s.pinimg.com/webapp/style/images/TH-1x-afac524b.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.TH {
background-image: url(https://s.pinimg.com/webapp/style/images/TH-2x-7ecf42ba.png); } }
.MobileLandingPageUpsell .androidButton.TL {
background: url(https://s.pinimg.com/webapp/style/images/TL-1x-a001709a.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.TL {
background-image: url(https://s.pinimg.com/webapp/style/images/TL-2x-58021b84.png); } }
.MobileLandingPageUpsell .iosButton.TL {
background: url(https://s.pinimg.com/webapp/style/images/TL-1x-31d0bc83.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.TL {
background-image: url(https://s.pinimg.com/webapp/style/images/TL-2x-3187e1aa.png); } }
.MobileLandingPageUpsell .androidButton.TR {
background: url(https://s.pinimg.com/webapp/style/images/TR-1x-f7dc0333.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.TR {
background-image: url(https://s.pinimg.com/webapp/style/images/TR-2x-4585987c.png); } }
.MobileLandingPageUpsell .iosButton.TR {
background: url(https://s.pinimg.com/webapp/style/images/TR-1x-6f0f8e76.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.TR {
background-image: url(https://s.pinimg.com/webapp/style/images/TR-2x-1bfaab3e.png); } }
.MobileLandingPageUpsell .androidButton.UK {
background: url(https://s.pinimg.com/webapp/style/images/UK-1x-9ecb075c.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.UK {
background-image: url(https://s.pinimg.com/webapp/style/images/UK-2x-25a04f9a.png); } }
.MobileLandingPageUpsell .iosButton.UK {
background: url(https://s.pinimg.com/webapp/style/images/UK-1x-6f0f8e76.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.UK {
background-image: url(https://s.pinimg.com/webapp/style/images/UK-2x-1bfaab3e.png); } }
.MobileLandingPageUpsell .androidButton.VI {
background: url(https://s.pinimg.com/webapp/style/images/VI-1x-aba34925.png) no-repeat;
background-size: contain;
height: 50px;
width: 152px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .androidButton.VI {
background-image: url(https://s.pinimg.com/webapp/style/images/VI-2x-f245f353.png); } }
.MobileLandingPageUpsell .iosButton.VI {
background: url(https://s.pinimg.com/webapp/style/images/VI-1x-474f64a4.png) no-repeat;
background-size: contain;
height: 50px;
width: 167px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .iosButton.VI {
background-image: url(https://s.pinimg.com/webapp/style/images/VI-2x-119d560d.png); } }
.MobileLandingPageUpsell .bottom .textSection {
color: #333; }
.MobileLandingPageUpsell .bottom .textSection .sectionTitle {
font-size: 24px;
line-height: 1.125; }
.MobileLandingPageUpsell .bottom .textSection .sectionContent {
font-size: 14px;
line-height: 1.5; }
.MobileLandingPageUpsell .bottomNav {
border-top: 1px solid #e3e3e3;
font-size: 14px; }
.MobileLandingPageUpsell .bottomNav .bottomLink a {
font-weight: normal; }
.MobileLandingPageUpsell .bottomNav .bottomLink .badge {
background: url(https://s.pinimg.com/webapp/style/images/badge-1x-4c987eec.png) no-repeat;
background-size: contain;
height: 21px;
width: 21px;
display: inline-block;
padding-bottom: 4px;
vertical-align: middle; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .bottomNav .bottomLink .badge {
background-image: url(https://s.pinimg.com/webapp/style/images/badge-2x-85ba0fac.png); } }
/* desktop.scss */
.MobileLandingPageUpsell {
width: 100%; }
.MobileLandingPageUpsell .topBackground {
height: 450px; }
.MobileLandingPageUpsell .topBackground .topContainer {
margin: 0 auto;
padding: 95px 0 40px;
position: relative;
width: 950px; }
.MobileLandingPageUpsell .topBackground .topContainer .title {
font-size: 60px;
line-height: 65px;
margin-top: 10px;
width: 450px; }
.MobileLandingPageUpsell .topBackground .topContainer .subtitle {
font-size: 18px;
margin-top: 33px; }
.MobileLandingPageUpsell .topBackground .topContainer .buttons {
margin-top: 17px; }
.MobileLandingPageUpsell .topBackground .topContainer .buttons .appStoreButton {
margin-right: 15px; }
.MobileLandingPageUpsell .topBackground .topContainer .shortUrlText {
font-size: 14px;
margin: 15px 0 40px; }
.MobileLandingPageUpsell .topBackground .topContainer .shortUrlText a {
color: #fff;
text-decoration: underline; }
.MobileLandingPageUpsell .topBackground .topContainer .topImage {
position: absolute;
top: 35px; }
.MobileLandingPageUpsell .topBackground .topContainer .topImage.iOS {
background: url(https://s.pinimg.com/webapp/style/images/ios-1x-f2d643f4.png) no-repeat;
background-size: contain;
height: 468px;
width: 382px;
left: 520px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .topBackground .topContainer .topImage.iOS {
background-image: url(https://s.pinimg.com/webapp/style/images/ios-2x-93c02442.png); } }
.MobileLandingPageUpsell .topBackground .topContainer .topImage.android {
background: url(https://s.pinimg.com/webapp/style/images/android-1x-0a553f36.png) no-repeat;
background-size: contain;
height: 469px;
width: 306px;
left: 550px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .topBackground .topContainer .topImage.android {
background-image: url(https://s.pinimg.com/webapp/style/images/android-2x-64f466a6.png); } }
.MobileLandingPageUpsell .topBackground .topContainer .topImage.multi {
background: url(https://s.pinimg.com/webapp/style/images/multi-1x-afebd48e.png) no-repeat;
background-size: contain;
height: 464px;
width: 423px;
left: 500px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.MobileLandingPageUpsell .topBackground .topContainer .topImage.multi {
background-image: url(https://s.pinimg.com/webapp/style/images/multi-2x-367ec694.png); } }
.MobileLandingPageUpsell .bottom {
margin: 0 auto;
overflow: hidden;
padding-top: 50px;
width: 950px; }
.MobileLandingPageUpsell .bottom .textSection {
float: left;
height: 100px;
width: 475px; }
.MobileLandingPageUpsell .bottom .textSection .sectionContent {
width: 360px; }
.MobileLandingPageUpsell .bottomNav {
background-color: #fff;
line-height: 50px;
margin: 20px auto 0;
width: 950px; }
.MobileLandingPageUpsell .bottomNav .bottomLink {
display: inline-block;
margin-right: 40px; }
.MobileLandingPageUpsell .bottomNav .bottomLink:first-child {
margin-right: 330px; }
.MobileWebLoginRedirect {
font-family: "Helvetica Neue", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", arial, sans-serif; }
.MobileWebLoginRedirect .overlay {
background: #555;
height: 1000px;
opacity: .9;
width: 100%; }
.MobileWebLoginRedirect .modal {
background: #fff;
bottom: 0;
color: #555;
position: fixed;
width: 100%; }
.MobileWebLoginRedirect .modal .inner_model {
padding: 38px 16px 16px; }
.MobileWebLoginRedirect .modal .inner_model .text {
padding-left: 4px; }
.MobileWebLoginRedirect .modal .inner_model .text .title {
font-size: 24px; }
@media screen and (min-width: 375px) and (min-height: 375px) {
.MobileWebLoginRedirect .modal .inner_model .text .title {
font-size: 36px; } }
.MobileWebLoginRedirect .modal .inner_model .text .titleSmall {
font-size: 24px; }
.MobileWebLoginRedirect .modal .inner_model .text .subtext {
font-size: 16px;
padding-bottom: 12px;
padding-top: 12px; }
.MobileWebLoginRedirect .modal .inner_model .invisible {
visibility: hidden; }
.MobileWebLoginRedirect .modal .inner_model .reactButton {
background: #efefef;
border: none;
border-radius: 4px;
display: block;
font-size: 16px;
height: 40px;
margin: 8px 0;
width: 100%; }
.MobileWebLoginRedirect .modal .inner_model .closeButton {
margin: 10px;
position: absolute;
right: 0;
top: 0; }
.MobileWebLoginRedirect .modal .inner_model .closeButton2 {
color: #b5b5b5;
font-size: 40px;
line-height: 70%;
position: absolute;
right: 10px;
top: 7px; }
.MobileWebLoginRedirect .modal .inner_model .highlightButton {
background: #bd081c;
color: #fff; }
.ExperienceNag {
background-color: #fff6c8;
box-shadow: 0 1px 2px rgba(51, 51, 51, 0.15);
box-sizing: border-box;
position: relative;
text-align: center;
z-index: 104; }
.ExperienceNag .centeredWithinWrapper {
position: relative; }
.ExperienceNag .message {
color: #717171;
display: inline-block;
font-size: 15px;
max-width: 850px;
padding: 16px 0; }
@media (min-width: 0px) and (max-width: 999px) {
.ExperienceNag .message {
font-size: 12px;
max-width: 576px; } }
.ExperienceNag .message a {
text-decoration: underline; }
.ExperienceNag.updateBrowser {
text-align: center; }
.ExperienceNag .nagClose {
width: 16px;
height: 16px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -376px -309px no-repeat;
bottom: 0;
cursor: pointer;
margin: auto;
padding: 6px;
position: absolute;
right: 7px;
top: 0;
z-index: 105; }
.ExperienceNag .notificationPaneNag .message {
box-shadow: none;
font-size: 12px;
margin: 0;
padding-right: 40px; }
/* stylelint-disable-next-line at-rule-blacklist */
.ReactBoardListRow {
cursor: pointer;
display: block;
padding: 0 23px;
position: relative; }
.ReactBoardListRow__pinit {
display: none;
position: absolute;
right: 20px;
top: 5px; }
.ReactBoardListRow .ReactBoardListRow__pinit {
display: none; }
.ReactBoardListRow:hover {
background-color: #f5f5f5; }
.ReactBoardListRow:hover p {
max-width: 178px; }
.ReactBoardListRow:hover--group, .ReactBoardListRow:hover--private {
display: none; }
.ReactBoardListRow:hover .ReactBoardListRow__pinit {
display: block; }
.ReactBoardListRow:hover .saveButton {
display: block;
margin-top: 0; }
.ReactBoardListRow .ReactBoardListRow__noImage {
background-color: #efefef;
border-radius: 3px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
display: inline-block;
height: 34px;
margin-right: 10px;
vertical-align: middle;
width: 34px; }
.ReactBoardListRow img {
border-radius: 3px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
height: 34px;
margin-right: 10px;
vertical-align: middle;
width: 34px; }
.ReactBoardListRow p {
color: #333;
display: inline-block;
font-size: 14px;
font-weight: bold;
letter-spacing: .01em;
line-height: 34px;
margin: 7px 0;
max-width: 193px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap; }
.ReactBoardListRow--group, .ReactBoardListRow--private {
background-size: cover;
display: inline-block;
float: right;
margin-left: 5px; }
.ReactBoardListRow--group {
background-image: url(https://s.pinimg.com/webapp/style/images/collaborators-icon-cdd43947.svg);
height: 25px;
margin-top: 11px;
width: 22px; }
.ReactBoardListRow--private {
background-image: url(https://s.pinimg.com/webapp/style/images/lock-icon-c92e5974.svg);
height: 17px;
margin-top: 15px;
width: 15px; }
/* stylelint-disable-next-line at-rule-blacklist */
.ReactBoardPicker {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #fff;
border-radius: 6px;
height: 500px;
margin: 0 auto;
overflow: hidden; }
.ReactBoardPicker__spinner {
position: relative;
top: 44%; }
.ReactBoardPicker__close {
cursor: pointer;
position: absolute;
right: 20px;
top: 20px; }
.ReactBoardPicker__block {
display: inline-block;
height: 100%;
position: relative;
vertical-align: top;
width: 50%; }
.ReactBoardPicker__block:first-child {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #d9d9d9;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
.ReactBoardPicker__block header {
color: #333;
font-size: 20px;
font-weight: bold;
margin-left: 23px;
margin-top: 25px;
padding-bottom: 12px; }
.ReactBoardPicker__leftContent {
background-color: #f5f5f5;
border-radius: 6px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
overflow: hidden;
width: 236px; }
.ReactBoardPicker__leftContent__pinPreview {
display: block;
height: inherit;
margin: 0 auto;
width: inherit; }
.ReactBoardPicker__leftContent textarea {
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
display: inherit;
font-size: 13px;
font-weight: 500;
letter-spacing: -.5px;
line-height: 17px;
outline: none;
padding: 10px 5%;
resize: none;
width: 90%; }
.ReactBoardPicker__descriptionWrapper {
background-color: #fff; }
.ReactBoardPicker__imageWrapper {
position: relative; }
.ReactBoardPicker__videoUrl {
color: #a8a8a8;
font-size: 12px;
font-weight: normal;
padding: 10px; }
.ReactBoardPicker__playIcon {
bottom: 0;
height: 40px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 40px; }
.ReactBoardPicker__search {
margin-top: 20px;
padding: 0 23px; }
.ReactBoardPicker__boards {
border-top: 1px solid #f5f5f5;
margin-top: 15px;
max-height: 357px;
overflow-y: scroll;
padding-top: 10px; }
.ReactBoardPicker__boards header {
color: #a8a8a8;
font-size: 13px;
font-weight: 400;
margin-top: 5px;
padding-bottom: 5px; }
.ReactBoardPicker__boards__list {
list-style: none;
margin: 0;
padding: 0; }
/* stylelint-disable-next-line at-rule-blacklist */
.ReactButton {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #e0e0e0;
border: 0;
border-radius: 4px;
cursor: pointer;
font-weight: bold; }
.ReactButton--primary {
background-color: #bd081c;
color: #fff; }
.ReactButton--primary:hover {
background-color: #bd081c; }
.ReactButton--medium {
font-size: 16px; }
/* stylelint-disable-next-line at-rule-blacklist */
.ReactDropdown {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ï¼ï¼³ Pゴシック", sans-serif;
font-weight: bold;
display: inline-block;
font-size: 16px;
font-weight: bold;
letter-spacing: -.5px;
line-height: 22px;
position: relative; }
.ReactDropdown--open__control__arrow {
border-color: transparent transparent #555;
border-width: 0 6px 7px; }
.ReactDropdown--noresults {
color: #b5b5b5;
cursor: default;
display: block;
padding: 9px 14px; }
.ReactDropdown__placeholder {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.ReactDropdown__control {
background-color: #efefef;
border-radius: 4px;
color: #555;
cursor: default;
outline: none;
overflow: hidden;
padding: 7px 12px;
position: relative;
-webkit-transition: all 200ms ease;
transition: all 200ms ease; }
.ReactDropdown__control .caret {
padding-left: 10px; }
.ReactDropdown__control--advertiserDropdown {
background-color: transparent;
border-radius: 0;
line-height: normal;
padding-left: 0; }
.ReactDropdown__menu {
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
-webkit-overflow-scrolling: touch;
-webkit-animation: menu-slide-in-up .3s;
animation: menu-slide-in-up .3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
background-color: #fff;
border-radius: 6px;
box-sizing: border-box;
margin-top: 8px;
max-height: 200px;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 100%;
width: 210px;
z-index: 668; }
.ReactDropdown__menu .group > .title {
color: #b5b5b5;
padding: 9px 14px;
text-transform: capitalize; }
.ReactDropdown__option {
box-sizing: border-box;
color: #777;
cursor: pointer;
display: block;
padding: 9px 14px;
text-overflow: ellipsis;
white-space: nowrap; }
.ReactDropdown__option:hover {
background: #f1f1f1;
color: #333; }
.ReactDropdown__option:active {
background: #eaeaea; }
.ReactDropdown__option:last-child {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; }
.ReactDropdown__option--selected {
background-color: #f5f5f5;
color: #555; }
/* stylelint-disable-next-line at-rule-blacklist */
.ReactSearchInput {
position: relative; }
.ReactSearchInput em {
background-image: url(https://s.pinimg.com/webapp/style/images/search-icon-6046fd86.svg);
background-size: cover;
height: 20px;
left: 10px;
position: absolute;
top: 12px;
width: 18px; }
.ReactSearchInput input {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #f5f5f5;
border: 1px solid #efefef;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box;
color: #333;
font-size: 14px;
font-weight: bold;
overflow: hidden;
padding: 13px 13px 13px 44px;
width: 100%; }
.ReactSearchInput input:focus {
outline: 0; }
.FirstPinYourPinsSearch__image {
background: #ccc url(https://s.pinimg.com/webapp/style/images/partner-seasonal-pins-4acae3bf.jpg) center center/cover no-repeat;
color: #fff;
font-size: 28px;
font-weight: bold;
height: 196px; }
.FirstPinYourPinsSearch__image:hover {
color: #fff; }
.PartnerHelperTooltip {
float: right;
position: relative; }
.PartnerHelperTooltip__trigger {
background-color: #b5b5b5;
border-radius: 50px;
color: #fff;
cursor: help;
display: inline-block;
font-size: 8px;
line-height: 14px;
text-align: center;
width: 14px; }
.PartnerHelperTooltip:hover .PartnerHelperTooltip__content {
-webkit-animation: .3s .5s menu-slide-in-up;
animation: .3s .5s menu-slide-in-up;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
pointer-events: auto; }
.PartnerHelperTooltip__content {
background-color: #555;
border-radius: 4px;
color: #fff;
font-size: 12px;
margin: 15px 0 0;
opacity: 0;
padding: 10px 20px;
pointer-events: none;
position: absolute;
right: -20px;
width: 200px;
z-index: 100; }
.PartnerHelperTooltip__content::before {
bottom: -20px;
content: " ";
display: block;
left: 0;
position: absolute; }
.PartnerHelperTooltip__content::after {
border-bottom: solid #555 10px;
border-left: solid transparent 10px;
border-right: solid transparent 10px;
content: " ";
height: 0;
margin-left: -13px;
position: absolute;
right: 18px;
top: -10px;
width: 0; }
.QuickPromoteKeywordTagList {
position: relative;
z-index: 3; }
.QuickPromoteKeywordTagList__suggestions {
background: #fff;
border-radius: 4px;
box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.06);
color: #555;
width: 271px; }
.QuickPromoteKeywordTagList__suggestions li {
font-size: 14px;
padding: 12px; }
.QuickPromoteKeywordTagList__suggestions li.active {
background-color: #efefef; }
.QuickPromoteKeywordTagList__suggestions li mark {
background-color: #efefef; }
.QuickPromoteKeywordTagList__tag {
background-color: #efefef;
border-radius: 4px;
color: #555;
display: inline-block;
font-size: 14px;
line-height: 24px;
margin: 6px 8px 0 0;
padding: 0 0 0 8px; }
.QuickPromoteKeywordTagList__tag__remove {
color: #555;
cursor: pointer;
display: inline-block;
font-size: 20px;
font-weight: normal;
line-height: 24px;
margin-left: 8px;
text-align: center;
width: 22px; }
.QuickPromoteKeywordTagList__tagInput {
margin-top: 8px; }
.QuickPromoteKeywordTagList__tagInput input {
background-color: #fff;
border-color: #b5b5b5;
border-radius: 4px;
border-style: solid;
border-width: 1px;
box-sizing: border-box;
color: #555;
font-size: 16px;
letter-spacing: -.2px;
line-height: 18px;
padding: 10px 14px;
width: 100%; }
.QuickPromoteKeywordTagList__tagInput input::-webkit-input-placeholder {
color: #b5b5b5; }
.QuickPromoteKeywordTagList__tagInput input::-moz-placeholder {
color: #b5b5b5; }
.QuickPromoteKeywordTagList__tagInput input:-ms-input-placeholder {
color: #b5b5b5; }
.QuickPromoteKeywordTagList__tagInput input::placeholder {
color: #b5b5b5; }
.RadioButton--default > .RadioButton__input {
display: none; }
.RadioButton--default > .RadioButton__label {
background: transparent url(https://s.pinimg.com/webapp/style/images/radiobutton-unchecked-8e3d6290.svg);
background-position: 0 50%;
background-repeat: no-repeat;
display: inline-block;
line-height: 32px;
padding-left: 35px; }
.RadioButton--default > .RadioButton__input:checked + .RadioButton__label {
background-image: url(https://s.pinimg.com/webapp/style/images/radiobutton-checked-e7b1aa8e.svg); }
.RadioButton--button > .RadioButton__input {
display: none; }
.RadioButton--button > .RadioButton__label {
border: 1px solid #999;
border-radius: 4px;
display: inline-block;
margin-right: 5px;
padding: 0 15px; }
.RadioButton--button > .RadioButton__input:checked + .RadioButton__label {
background-color: #efefef;
border-color: #efefef; }
.RadioButtonGroup__item {
display: block; }
.SearchAddPin {
min-height: 280px;
width: 236px; }
.SearchAddPin::before {
background: rgba(0, 0, 0, 0.05);
border-radius: 8px;
content: " " !important;
height: 100%;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
-webkit-transform: scale(0.96);
transform: scale(0.96);
width: 100%;
z-index: 3;
margin: -10px;
padding: 10px; }
.SearchAddPin:hover::before {
-webkit-animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards;
animation: tapAnimation 0.25s cubic-bezier(0.31, 1, 0.34, 1) forwards; }
/* stylelint-disable-next-line at-rule-blacklist */
.ReactAddVideo__buttonVersion {
float: right;
margin: 20px 45px 25px; }
.ReactAddVideo__iconVersion {
background-color: #fff;
border: dashed 2px #b5b5b5;
border-radius: 8px;
display: inline-block;
height: 286px;
margin: 39px;
width: 52%; }
.ReactAddVideo__iconVersion input {
cursor: pointer;
display: block;
height: 288px;
position: absolute;
top: -116px;
width: 100%;
z-index: 1000; }
.ReactAddVideo__iconVersion svg {
margin: 0 auto; }
.ReactAddVideo__iconVersion.videoDragOver {
border: dashed 2px #bd081c; }
.ReactAddVideo__title {
color: #555;
font-size: 32px;
text-align: center; }
.ReactAddVideo__text {
color: #b5b5b5;
font-size: 14px;
font-weight: 600;
margin: 0 auto;
position: relative;
top: 10px; }
.ReactAddVideo__input {
opacity: 0; }
.ReactAddVideo__error {
color: #bd081c;
font-size: 14px;
margin-top: 11px; }
.ReactAddVideo__addVideoWrapper {
position: relative;
text-align: center;
top: 40%; }
.ReactAddVideo__uploadButtonContainer div:focus {
box-shadow: none; }
/* stylelint-disable-next-line at-rule-blacklist */
.ReactExistingVideoList {
height: 300px;
overflow-y: scroll;
padding-top: 10px; }
.ReactExistingVideoList__text {
color: #555;
font-size: 20px; }
.ReactExistingVideoListItem {
cursor: pointer;
display: inline-block;
height: 37%;
margin: 10px 1.7%;
position: relative;
width: 31%; }
.ReactExistingVideoListItem:nth-child(3n+2) {
margin-left: 0; }
.ReactExistingVideoListItem:nth-child(3n+4) {
margin-right: 0; }
.ReactExistingVideoListItem__wrapper {
background: #000;
border-radius: 4px;
height: 100%;
overflow: hidden;
position: relative; }
.ReactExistingVideoListItem__wrapper::after {
background-color: #000;
border-radius: inherit;
content: "";
height: 100%;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%; }
.ReactExistingVideoListItem__wrapper:hover > h4 {
visibility: visible; }
.ReactExistingVideoListItem__wrapper:hover::after {
opacity: .3; }
.ReactExistingVideoListItem__playIcon {
height: 50px;
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 50px; }
.ReactExistingVideoListItem__title {
bottom: 17px;
color: #fff;
font-size: 14px;
left: 17px;
position: absolute;
visibility: hidden;
z-index: 1; }
.ReactExistingVideoListItem--vertical img {
display: block;
height: inherit;
margin: 0 auto; }
.ReactUploadVideoModal {
padding: 18px 30px; }
.ReactUploadVideoModal__videoSpace {
float: left;
min-height: 368px;
text-align: center;
width: 71%; }
.ReactUploadVideoModal__noPadding {
padding: 0; }
.ReactUploadVideoModal__recommendedVideoSpecs {
display: inline-block;
margin-top: -20px;
position: relative;
top: 60px;
width: 20%; }
.ReactUploadVideoModal hr {
background: #efefef;
border: 0;
height: 1px; }
.ReactUploadVideoModal__errorMessage {
text-align: center; }
.ReactUploadVideoModal__errorMessage ._vc {
left: 141px !important;
top: 265px !important; }
.ReactUploadVideoModal__errorMessage ._vg {
color: #e2780d; }
.ReactUploadVideoModal__errorMessage ._ve {
background: #e2780d;
border: 1px solid #e2780d; }
.ReactUploadVideoModal__errorText {
color: #fff;
font-size: 18px;
font-weight: bold;
margin: 10px; }
.ReactUploadVideoModal__spinner {
position: absolute;
top: 38%; }
/* stylelint-disable-next-line at-rule-blacklist */
.ReactUploadVideoSuccess {
margin: 35px; }
.ReactUploadVideoSuccess__headline {
color: #555;
font-size: 24px; }
.ReactUploadVideoSuccess__subheadline {
color: #b5b5b5;
font-size: 18px;
font-weight: normal; }
.ThumbnailGenerator {
color: #555;
font-size: 14px;
font-weight: 600;
margin: 20px; }
.ThumbnailGenerator header {
font-size: 30px; }
.ThumbnailGenerator input {
background: none;
border: 0;
color: #555;
font-size: 14px;
margin-left: 10px;
width: 95%; }
.ThumbnailGenerator input:focus {
outline: none; }
.ThumbnailGenerator label {
display: block; }
.ThumbnailGenerator video {
display: inline-block;
margin: 0 auto;
max-height: 365px;
width: 100%; }
.ThumbnailGenerator__body {
margin-top: 10px; }
.ThumbnailGenerator__progress {
font-size: 20px;
margin: 20px 0; }
.ThumbnailGenerator__progress > div {
margin-top: 8px; }
.ThumbnailGenerator__vidwrapper {
display: inline-block;
margin: 15px 0 10px;
position: relative;
width: 100%; }
.ThumbnailGenerator__vidwrapper button {
background-color: rgba(85, 85, 85, 0.9);
border: 0;
border-radius: 4px;
color: #fff;
cursor: pointer;
font-size: 14px;
padding: 8px 10px;
position: absolute;
right: 13px;
top: 13px; }
.ThumbnailGenerator__vidwrapper button:focus {
outline: 0; }
.ThumbnailGenerator__buttons {
text-align: right; }
.ThumbnailGenerator__buttons button {
margin: 20px 10px; }
.ThumbnailGenerator__button {
border-radius: 4px;
font-size: 16px;
height: 40px;
margin: 20px 10px;
padding: 0 35px; }
.ThumbnailGenerator__cancel {
background-color: #fff;
border: 1px solid #555; }
.ThumbnailGenerator__next {
background-color: #bd081c;
border: 1px solid #bd081c;
color: #fff;
margin-right: 0; }
.ThumbnailGenerator__next:disabled {
cursor: auto;
opacity: .3; }
.ThumbnailGenerator__buttonText {
margin-left: 5px;
vertical-align: middle; }
.ThumbnailGenerator__sliderWrapper {
display: inline-block;
vertical-align: top;
width: 100%; }
.ThumbnailGenerator__sliderWrapper span {
font-size: 16px;
margin-bottom: 5px; }
.ThumbnailGenerator__slider {
margin: 5px 0 10px -2px;
overflow-x: hidden;
position: relative;
white-space: nowrap;
width: 100%; }
.ThumbnailGenerator__slider::after {
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 98%);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 98%);
content: "";
display: block;
height: 100%;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
width: 70px; }
.ThumbnailGenerator__frames {
min-height: 115px;
-webkit-transition: -webkit-transform .3s ease-out;
transition: -webkit-transform .3s ease-out;
transition: transform .3s ease-out;
transition: transform .3s ease-out, -webkit-transform .3s ease-out; }
.ThumbnailGenerator__arrow {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 97%;
position: absolute;
right: 0;
top: 0;
width: 16px;
z-index: 1; }
.ThumbnailGenerator__arrow em {
width: 10px;
height: 15px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-1x-28441dec.png) -474px -316px no-repeat;
background-size: cover;
cursor: pointer;
display: block;
height: 16px;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
width: 16px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ThumbnailGenerator__arrow em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-desktop-2x-0d02cd03.png);
background-position: -418px 0;
background-size: 428px 427px; } }
.ThumbnailGenerator__arrow.left {
left: 0; }
.ThumbnailGenerator__arrow.left em {
-webkit-transform: none;
transform: none; }
.ThumbnailGenerator__frame {
background-color: #efefef;
border-radius: 4px;
cursor: pointer;
display: inline-block;
margin: 2px 4% 0 .5%;
overflow: hidden;
position: relative;
width: 29%; }
.ThumbnailGenerator__frame.active {
box-shadow: 0 0 0 2px #bd081c; }
.ThumbnailGenerator__frame.active img {
opacity: .6; }
.ThumbnailGenerator__frame img {
display: block;
margin: 0 auto;
max-height: 110px; }
.ThumbnailGenerator__description {
height: 34px; }
.ThumbnailGenerator__tags-selected {
overflow-x: scroll; }
.ThumbnailGenerator__tags-input {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
min-width: 260px; }
.ThumbnailGenerator__tags-tag {
background: #fff;
border-radius: 3px;
font-size: 12px;
margin-left: 5px;
padding: 0 0 4px 7px; }
.ThumbnailGenerator__tags-remove {
border-left: 1px solid #efefef;
cursor: pointer;
font-size: 16px;
margin-left: 7px;
padding: 0 4px 4px; }
.ThumbnailGenerator__tags-remove:hover {
background: #f5f5f5; }
.ThumbnailGenerator__inputWrapper {
font-weight: normal !important;
margin-bottom: 20px; }
.ThumbnailGenerator__inputWrapper label {
font-size: 16px;
margin-bottom: 5px; }
.ThumbnailGenerator__inputWrapper p {
color: #e3780c;
font-size: 12px;
text-align: right; }
.ThumbnailGenerator__error {
bottom: -20px;
left: 10px;
position: absolute; }
.ThumbnailGenerator--vertical .ThumbnailGenerator__progress {
margin-bottom: 0; }
.ThumbnailGenerator--vertical .ThumbnailGenerator__vidwrapper {
margin-top: 25px;
width: 44%; }
.ThumbnailGenerator--vertical .ThumbnailGenerator__vidwrapper video {
max-height: none; }
.ThumbnailGenerator--vertical .ThumbnailGenerator__sliderWrapper {
margin-left: 4%;
width: 50%; }
.ThumbnailGenerator--vertical .ThumbnailGenerator__frame {
margin: 2px 20px 20px 2px;
width: 42%; }
.ThumbnailGenerator--vertical .ThumbnailGenerator__frame img {
max-height: none; }
.ThumbnailGenerator__maxCharacterExceeded {
border: 1px solid #e3780c; }
.UserNavigateButton .advertiserPartner em {
display: none; }
.UserNavigateButton .advertiserPartner .usernameLink > .Image.profileImage {
border-radius: 50%;
display: block;
float: none;
height: 25px;
margin: 0;
width: 25px; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.PasswordReset {
background: #fff;
color: #555;
font-size: 16px;
-webkit-transform: translateZ(0);
transform: translateZ(0); }
.PasswordReset p a, .PasswordReset .link {
color: #d32430;
cursor: pointer;
font-weight: normal; }
.PasswordReset h2 {
color: #444;
font-size: 28px; }
.PasswordReset .hint {
color: #bd081c; }
.PasswordReset .userNameEmail {
display: inline-block;
font-weight: bold;
position: relative; }
.PasswordReset .userNameEmail .userName {
overflow: hidden;
padding-bottom: 1px;
text-overflow: ellipsis;
white-space: nowrap; }
.PasswordReset .userSearchResults {
overflow-y: scroll;
padding: 15px; }
.PasswordReset .resultHint {
color: "#a9a9a9"; }
.PasswordReset .passwordResetForm button {
float: right;
font-size: 12px; }
.PasswordReset .passwordResetForm .searchIcon {
width: 15px;
height: 15px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -238px -325px no-repeat;
left: 11px;
position: absolute;
top: 10px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.PasswordReset .passwordResetForm .searchIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -217px -145px;
background-size: 399px 382px; } }
.PasswordReset .passwordResetForm .passwordResetSearch {
background: #e7e7e7;
box-shadow: none;
box-sizing: border-box;
height: 36px;
padding: 0 38px;
width: 100%; }
.PasswordReset .passwordResetForm .inputWrapper {
overflow: hidden;
padding-right: 15px;
position: relative; }
.PasswordWithStrengthMeter {
position: relative; }
.PasswordWithStrengthMeter .PasswordStrength.guage {
border-radius: 4px;
height: 14px;
position: absolute;
right: 5%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.PasswordWithStrengthMeter .PasswordStrength.guage .register {
border-radius: 4px;
height: 100%;
-webkit-transition: width .4s;
transition: width .4s; }
/* desktop.scss */
.PasswordReset {
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
margin: 100px auto 0;
overflow: hidden;
position: relative;
width: 500px; }
.PasswordReset .hint {
font-size: 12px;
font-weight: 500; }
.PasswordReset .sendBar {
background: #f0f0f0;
border-top: 1px solid #e7e7e7;
padding: 15px; }
.PasswordReset .xback {
width: 12px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -149px no-repeat;
position: absolute;
right: 10px;
top: 10px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.PasswordReset .xback {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -357px -240px;
background-size: 399px 382px; } }
.PasswordReset .userNameEmail {
font-size: 12px;
left: 10px;
top: 13px; }
.PasswordReset .userNameEmail .userName {
max-width: 325px; }
.PasswordReset .userSearchResults {
border-top: 1px solid #dfdfdf;
max-height: 330px; }
.PasswordReset .passwordResetForm {
padding: 15px; }
.PasswordReset .passwordResetForm .passwordResetSearch {
border: solid 1px #cecece;
border-radius: 3px;
font-weight: bold; }
.PinAnalyticsLine {
background-color: #d8d8d8;
border-radius: 3px;
height: 50px;
margin-left: 35px;
width: 2px; }
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0); }
100% {
opacity: 1;
-webkit-transform: translate(0, 50px);
transform: translate(0, 50px); } }
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0); }
100% {
opacity: 1;
-webkit-transform: translate(0, 50px);
transform: translate(0, 50px); } }
@keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translate(0, 50px);
transform: translate(0, 50px); }
100% {
opacity: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0); } }
.TiltedPinsSourceModal {
position: relative;
z-index: 671; }
.TiltedPinsSourcePicker {
position: absolute;
right: 16px;
top: 16px; }
.TiltedPinsContainer {
height: 300px;
overflow: hidden;
position: relative; }
.TiltedPinsContainer .TiltedPinSourceLink {
background-color: #fff;
border-radius: 20px;
bottom: 16px;
display: none;
height: 40px;
padding: 0 0 0 12px;
position: absolute;
right: 16px; }
.TiltedPinsContainer:hover .TiltedPinSourceLink {
display: block; }
.TiltedPinsContainer:hover .TiltedPinSourceLink:hover {
background-color: #efefef; }
.TiltedPinsTransformer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);
width: 100%; }
.ShadowedAvatarWrapper {
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 0 5px #fff;
position: relative; }
.CreatorHeaderContainer {
margin-top: -50px; }
.CreatorHeaderFixed > div, .CreatorHeaderSticky > div {
margin-top: 0; }
.CreatorHeaderSticky {
background-color: #fff;
margin-left: -10px;
padding: 10px 10px 10px 0;
position: -webkit-sticky;
position: sticky;
top: 65px;
-webkit-transition: all .2s;
transition: all .2s;
z-index: 499; }
.CreatorHeaderSticky.scrollStep1, .CreatorHeaderSticky.scrollStep2, .CreatorHeaderSticky.scrollStep3 {
opacity: .97;
-webkit-transition: opacity .2s;
transition: opacity .2s;
z-index: 669; }
.AvatarScroller.scrollStep1 {
height: 40px;
left: 24px;
opacity: 0;
position: fixed;
top: 83px;
width: 40px; }
.AvatarScroller.scrollStep2 {
height: 40px;
left: 24px;
opacity: 0;
position: fixed;
top: 83px;
-webkit-transition: opacity .2s;
transition: opacity .2s;
width: 40px; }
.AvatarScroller.scrollStep3 {
height: 40px;
left: 24px;
opacity: 1;
position: fixed;
top: 83px;
-webkit-transition: opacity .2s;
transition: opacity .2s;
width: 40px;
z-index: 670; }
.CreatorFollowButton.scrollStep1 {
opacity: 0;
position: fixed;
right: 24px;
top: 83px;
z-index: 670; }
.CreatorFollowButton.scrollStep2 {
opacity: 0;
position: fixed;
right: 24px;
top: 83px;
-webkit-transition: opacity .2s;
transition: opacity .2s;
z-index: 670; }
.CreatorFollowButton.scrollStep3 {
opacity: 1;
position: fixed;
right: 24px;
top: 83px;
z-index: 670; }
.BusinessProfileTabBar {
margin: 16px 0 0;
padding: 0 160px; }
.BusinessProfileTabMoreItem:hover {
text-decoration: underline; }
.BusinessProfileTabMoreItem:hover > div > div > div {
color: #555; }
.BusinessProfileTabLinkItem {
width: 100%; }
.BusinessProfileTabLinkItem.Selected {
background-color: #eaeaea; }
.BusinessProfileTabLinkItem:hover {
text-decoration: underline; }
.BusinessProfileTabLinkItem:hover > div > div > div {
color: #555; }
.BusinessProfileTabItem {
border-radius: 999px; }
.BusinessProfileTabItem.Selected {
background-color: #eaeaea; }
.BusinessProfileTabItem:hover {
text-decoration: underline; }
.BusinessProfileTabItem:hover > div > div > div {
color: #555; }
.BrioProfileHeaderWrapper .boardName {
min-width: 0;
opacity: 0;
position: relative;
top: -50px; }
.BrioProfileHeaderWrapper .boardName.transitionIn {
-webkit-animation: fadeInDown 200ms forwards ease-in;
animation: fadeInDown 200ms forwards ease-in; }
.BrioProfileHeaderWrapper .boardName.transitionOut {
-webkit-animation: fadeOutUp 200ms forwards ease-in;
animation: fadeOutUp 200ms forwards ease-in; }
.BrioProfileHeaderWrapper .fixedHeader {
background: rgba(255, 255, 255, 0.97);
top: 64px;
width: 100%;
z-index: 670; }
.BrioProfileHeaderWrapper .imageWash {
background: rgba(0, 0, 0, 0.05);
height: 100%;
width: 100%; }
@keyframes spin {
from {
opacity: 1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
to {
opacity: 1;
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
.boardBlockingActionToastWhiteSpinner {
-webkit-animation-delay: .3s;
animation-delay: .3s;
-webkit-animation-duration: 1.2s;
animation-duration: 1.2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: spin;
animation-name: spin;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
display: block;
opacity: 0; }
.ReactBoardHeader .followerCount {
cursor: pointer; }
.ReactBoardHeader .followerCount .value,
.ReactBoardHeader .pinCount .value {
padding-right: 2px; }
.ReactBoardInfoBar {
background-color: rgba(255, 255, 255, 0.95);
height: 64px;
width: 100%; }
.ReactBoardInfoBar.boardOrganizationShow .boardOrganizationBar {
-webkit-animation: slideDownFadeIn 300ms cubic-bezier(0.31, 0, 0.31, 1) forwards;
animation: slideDownFadeIn 300ms cubic-bezier(0.31, 0, 0.31, 1) forwards; }
.ReactBoardInfoBar.sectionOrganizationBarShow .sectionOrganizationBar {
-webkit-animation: slideDownFadeIn 300ms cubic-bezier(0.31, 0, 0.31, 1) forwards;
animation: slideDownFadeIn 300ms cubic-bezier(0.31, 0, 0.31, 1) forwards; }
.ReactBoardInfoBar.boardOrganizationHide .boardOrganizationBar {
-webkit-animation: slideUpFadeOut 300ms cubic-bezier(0.31, 0, 0.31, 1) forwards;
animation: slideUpFadeOut 300ms cubic-bezier(0.31, 0, 0.31, 1) forwards;
-webkit-transition: visibility 300ms linear 0.5s;
transition: visibility 300ms linear 0.5s;
visibility: hidden; }
.ReactBoardInfoBar.sectionOrganizationBarHide .sectionOrganizationBar {
-webkit-animation: slideUpFadeOut 300ms cubic-bezier(0.31, 0, 0.31, 1) forwards;
animation: slideUpFadeOut 300ms cubic-bezier(0.31, 0, 0.31, 1) forwards;
-webkit-transition: visibility 300ms linear 0.5s;
transition: visibility 300ms linear 0.5s;
visibility: hidden; }
.ReactBoardInfoBar.boardOrganizationHide .infoBar, .ReactBoardInfoBar.sectionOrganizationBarHide .infoBar {
-webkit-animation: slideUpFadeIn 300ms cubic-bezier(0.31, 0, 0.31, 1) forwards;
animation: slideUpFadeIn 300ms cubic-bezier(0.31, 0, 0.31, 1) forwards; }
.ReactBoardInfoBar.boardOrganizationShow .infoBar, .ReactBoardInfoBar.sectionOrganizationBarShow .infoBar {
-webkit-animation: slideDownFadeOut 300ms cubic-bezier(0.31, 0, 0.31, 1) forwards;
animation: slideDownFadeOut 300ms cubic-bezier(0.31, 0, 0.31, 1) forwards;
-webkit-transition: visibility 300ms linear 0.5s;
transition: visibility 300ms linear 0.5s;
visibility: hidden; }
.ReactBoardInfoBar .boardName {
margin: auto;
max-width: 300px;
opacity: 0;
padding: 8px 0;
position: relative;
top: -66px;
/* stylelint-disable-next-line at-rule-no-unknown */ }
.ReactBoardInfoBar .boardName.transitionIn {
opacity: 1;
-webkit-transform: translate(0, 66px);
transform: translate(0, 66px);
-webkit-transition: 300ms ease-out;
transition: 300ms ease-out; }
.ReactBoardInfoBar .boardName.transitionOut {
opacity: 0;
pointer-events: none;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: 300ms ease-out;
transition: 300ms ease-out; }
.ReactBoardInfoBar .organizeButton {
opacity: 0;
position: relative;
top: -66px; }
.ReactBoardInfoBar .organizeButton.transitionIn {
opacity: 1;
-webkit-transform: translate(0, 66px);
transform: translate(0, 66px);
-webkit-transition: 300ms ease-out;
transition: 300ms ease-out; }
.ReactBoardInfoBar .organizeButton.transitionOut {
opacity: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: 300ms ease-out;
transition: 300ms ease-out; }
.ReactBoardInfoBar .boardNameWrapper {
width: 100%; }
.ReactBoardInfoBar .boardOrganizationBar {
height: 36px;
max-width: 768px;
padding: 14px 0;
position: absolute;
top: -64px;
width: 100%;
z-index: 103; }
.ReactBoardInfoBar .bulkEditButton {
margin-right: 3px; }
.ReactBoardInfoBar .bulkEditButtons {
padding: 14px 0; }
.ReactBoardInfoBar.fixedHeader {
left: 0;
position: fixed;
right: 0;
top: 64px;
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 103; }
.ReactBoardInfoBar .infoBar {
height: 48px;
padding: 12px;
position: relative; }
.ReactBoardInfoBar .infoBarWrapper {
margin: auto;
max-width: 768px;
overflow: visible;
z-index: 103; }
.ReactBoardInfoBar .notifications {
padding: 10px 0; }
.ReactBoardInfoBar .sectionOrganizationBar {
max-width: 768px;
position: absolute;
top: -64px;
width: 100%; }
@-webkit-keyframes slideDownFadeIn {
0% {
opacity: 0;
-webkit-transform: translateY(0);
transform: translateY(0); }
100% {
opacity: 1;
-webkit-transform: translateY(64px);
transform: translateY(64px); } }
@keyframes slideDownFadeIn {
0% {
opacity: 0;
-webkit-transform: translateY(0);
transform: translateY(0); }
100% {
opacity: 1;
-webkit-transform: translateY(64px);
transform: translateY(64px); } }
@-webkit-keyframes slideDownFadeOut {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); }
100% {
opacity: 0;
-webkit-transform: translateY(64px);
transform: translateY(64px); } }
@keyframes slideDownFadeOut {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); }
100% {
opacity: 0;
-webkit-transform: translateY(64px);
transform: translateY(64px); } }
@-webkit-keyframes slideUpFadeIn {
0% {
opacity: 0;
-webkit-transform: translateY(64px);
transform: translateY(64px); }
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0); } }
@keyframes slideUpFadeIn {
0% {
opacity: 0;
-webkit-transform: translateY(64px);
transform: translateY(64px); }
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0); } }
@-webkit-keyframes slideUpFadeOut {
0% {
opacity: 1;
-webkit-transform: translateY(64px);
transform: translateY(64px); }
100% {
opacity: 0;
-webkit-transform: translateX(0);
transform: translateX(0); } }
@keyframes slideUpFadeOut {
0% {
opacity: 1;
-webkit-transform: translateY(64px);
transform: translateY(64px); }
100% {
opacity: 0;
-webkit-transform: translateX(0);
transform: translateX(0); } }
.reactBoardCollaboratorInviterForm {
/* TODO: hacky, remove when css is rewritten */ }
.reactBoardCollaboratorInviterForm .ContactsList {
margin-top: -8px; }
.BoardCollaborators-footer {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.BoardCollaborators-moreItemsWrapper {
text-align: center; }
.BoardCollaborators-typeahead {
width: 100%; }
.BoardFollowersList-content {
max-height: 570px;
overflow: auto; }
.BoardFollowersList-followersItems {
overflow-x: hidden; }
.BoardFollowersList-followersWrapper {
margin: 0;
position: relative; }
.BoardFollowersList-header {
padding-left: 6px; }
.BoardFollowersList-moreItemsWrapper {
text-align: center; }
.SendBoardModal {
background-color: #fff;
border-radius: 8px; }
.BoardPinGrid.bulkEditMode .bulkEditPinWrapper {
bottom: 0;
cursor: pointer;
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 102; }
.BoardPinGrid.bulkEditMode .leftSideButtonsWrapper,
.BoardPinGrid.bulkEditMode .rightSideButtonsWrapper,
.BoardPinGrid.bulkEditMode .navLink {
display: none; }
.BoardPinGrid .bulkEditPinWrapper {
display: none; }
.BoardPinsRecommendationBar {
background: #fff;
bottom: 0;
box-shadow: 0 2px 4px #000;
left: 0;
position: fixed;
right: 0;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out; }
.BoardPinsRecommendationBar--hidden {
-webkit-transform: translateY(100%);
transform: translateY(100%); }
.BoardPinsRecommendationBar__overlay {
background: rgba(0, 0, 0, 0.064);
bottom: 0;
height: 100%;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
width: 100%; }
.BoardPinsRecommendationBar__overlay.hover {
opacity: 1; }
/* NOTE(yansun): these styles are entirely copied from gestalt */
.sectionHoverSurface {
background: rgba(0, 0, 0, 0.064);
border-radius: 8px;
bottom: 0;
height: 100%;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
width: 100%; }
.sectionHoverSurface.hover {
-webkit-animation: animateInSectionHover 0.2s cubic-bezier(0.31, 1, 0.34, 1) forwards;
animation: animateInSectionHover 0.2s cubic-bezier(0.31, 1, 0.34, 1) forwards; }
.sectionHoverSurface.sectionHoverSurface--mergeTarget {
-webkit-animation: animateInSectionHover 0.1s cubic-bezier(0.31, 1, 0.34, 1) forwards;
animation: animateInSectionHover 0.1s cubic-bezier(0.31, 1, 0.34, 1) forwards; }
@-webkit-keyframes animateInSectionHover {
to {
opacity: 1;
padding: 8px;
-webkit-transform: translateY(-8px) translateX(-8px);
transform: translateY(-8px) translateX(-8px); } }
@keyframes animateInSectionHover {
to {
opacity: 1;
padding: 8px;
-webkit-transform: translateY(-8px) translateX(-8px);
transform: translateY(-8px) translateX(-8px); } }
.BrowserButtonUpsell {
width: 500px; }
.BrowserButtonUpsell__browserWrapper {
margin-top: 5px; }
.BrowserButtonUpsell__promoHeader {
color: #333;
color: rgba(21, 21, 21, 0.8);
background-color: #f0f0f0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
font-size: 26px;
line-height: 33px;
padding: 25px;
text-align: center; }
.BrowserButtonUpsell__promoWrapper {
background: #fff;
border: 1px solid #aaa;
border-radius: 6px;
clear: both;
margin: 15px; }
.BrowserButtonUpsell__promoWrapper:hover {
cursor: pointer; }
.BrowserButtonUpsell__zoomImg {
background: url(https://s.pinimg.com/webapp/style/images/chrome-1x-5ff1b915.png) no-repeat;
background-size: contain;
height: 293px;
width: 439px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.BrowserButtonUpsell__zoomImg {
background-image: url(https://s.pinimg.com/webapp/style/images/chrome-2x-1167b788.png); } }
.EditPinModal {
max-width: 670px;
width: 100%; }
.EditPinModal .placeSelection {
background: none;
border: none;
cursor: pointer; }
.EditPinModal label {
font-size: 16px;
font-weight: bold;
line-height: 2; }
.boardCreateInput {
border: 0;
box-shadow: none;
color: #333;
font-size: 15px;
margin-bottom: 5px;
outline: none;
padding: 6px;
width: 95%; }
.boardCreateInput.error {
background: #e6abad;
border: 1px solid #bd081c;
border-radius: 3px;
color: #bd081c; }
.boardCreateInput.error::-webkit-input-placeholder {
color: #fff; }
.boardCreateInput.error::-moz-placeholder {
color: #fff; }
.boardCreateInput.error:-ms-input-placeholder {
color: #fff; }
.boardCreateInput.error::placeholder {
color: #fff; }
.HashtagFlyout .HashtagRecommendations {
width: 100%;
z-index: 3; }
.HashtagFlyout .HashtagRecommendations .HashtagItem:hover {
background-color: #efefef;
cursor: pointer; }
.SaveButton {
background: transparent;
border-radius: 4px;
cursor: pointer; }
.SaveButton:focus {
box-shadow: 0 0 0 4px rgba(0, 132, 255, 0.5);
outline: 0; }
.SaveButtonBackground {
background-color: #bd081c;
border-radius: 4px; }
.SaveButtonBackground:hover {
background-color: #ad081b; }
.SaveButtonBackgroundSaved {
background-color: #efefef;
border-radius: 4px; }
.SaveButtonBackgroundSaved:hover {
background-color: #e2e2e2; }
.FirstBoardCreate__education {
color: #fff;
font-size: 28px;
font-weight: bold;
margin-left: 170px;
position: absolute;
top: -60px; }
.FirstBoardCreate__education.multiline {
margin-left: 30px;
position: absolute;
top: -80px; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.UserSettingsPage {
position: relative; }
.UserSettingsPage .formCheckedSet span {
line-height: 28px; }
.UserSettingsPage .standardForm > ul {
background: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 6px;
margin-bottom: 14px; }
.UserSettingsPage .standardForm label {
word-wrap: break-word; }
.UserSettingsPage .formFooter {
background-color: #fff;
border: none;
bottom: 0;
box-shadow: none;
box-sizing: border-box;
max-width: 734px;
width: 100%; }
.UserSettingsPage .formItem.headlessSection {
border-top: 0;
padding-top: 0; }
.UserSettingsPage .scopeDescriptions li {
list-style-type: disc;
margin-left: 25px; }
/* desktop.scss */
.UserSettingsPage {
/* Table of Contents */ }
.UserSettingsPage .mainForm {
margin: 50px 0 0 256px;
padding-bottom: 53px; }
@media (min-width: 0) and (max-width: 999px) {
.UserSettingsPage .mainForm {
margin-left: 0; } }
@media (max-width: 999px) {
.UserSettingsPage .toc {
display: none; } }
.UserSettingsPage .tocAndFormWrapper {
margin: 0 auto;
max-width: 990px; }
@media (min-width: 0) and (max-width: 999px) {
.UserSettingsPage .tocAndFormWrapper {
margin: auto;
max-width: 734px; } }
.UserSettingsPage .sectionTitle {
margin-top: 50px; }
.UserSettingsPage .sectionTitle h2 {
/* stylelint-disable-next-line at-rule-no-unknown */ }
.UserSettingsPage .formInlineCheckedSet {
padding-top: 0; }
.UserSettingsPage .formInlineCheckedSet label > input {
/* stylelint-disable-next-line at-rule-no-unknown */ }
.UserSettingsPage .noApps {
text-align: left; }
.stlPageModal {
width: 100%; }
.stlPageModal .Button.closeModal {
position: fixed;
right: 24px;
top: 32px;
z-index: 652; }
.skipToContentContainer .skipToContentButton:active, .skipToContentContainer .skipToContentButton:focus {
background: #bd081c;
color: #fff;
font-size: 16px;
height: 54px;
position: fixed;
text-shadow: none;
width: 100%;
z-index: 681; }
.AdvertiserCreateForm {
color: #555;
min-height: 105px;
padding: 24px 40px 4px; }
.AdvertiserCreateForm h1 {
font-size: 36px; }
.AdvertiserCreateForm label {
display: block;
font-size: 12px;
margin-bottom: 8px; }
.AdvertiserCreateForm input[type="text"] {
background-color: #efefef;
border: none;
border-radius: 4px;
box-sizing: border-box;
font-size: 14px;
font-weight: bold;
height: 40px;
padding: 0 12px;
width: 100%; }
.AdvertiserCreateForm .clientError {
color: #c11400;
font-size: 12px;
font-weight: bold;
margin-left: 2px;
margin-top: 6px; }
.AdvertiserCreateForm .serverError {
color: #c11400;
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;
margin-top: 32px;
text-align: center; }
.AdvertiserCreateForm .inputSection {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
margin-top: 36px;
min-width: 208px; }
.AdvertiserCreateForm .inputSection:not(.dropdownSection) {
margin-right: 20px; }
.AdvertiserCreateForm .dropdownSection .ReactDropdown__control {
height: 26px; }
.AdvertiserCreateForm .footer {
margin-top: 40px;
text-align: right; }
.AdvertiserCreateForm .footer button:first-child {
margin-right: 12px; }
.AdvertiserCreateForm .formFooter {
padding-right: 0; }
.advertiserSwitcher .ReactDropdown__control--advertiserDropdown {
padding-left: 12px; }
/* stylelint-disable-next-line at-rule-blacklist */
.AsyncDownloadFooter {
background: #fafafa;
border-top: 1px solid #c7c7c7;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 10px 20px; }
.AsyncDownloadFooter .downloadStatusText {
color: #555;
display: inline-block;
font-size: 16px;
font-weight: bold;
margin-right: 8px;
max-width: 440px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle; }
.AsyncDownloadFooter .spinner {
background: url(https://s.pinimg.com/webapp/style/images/spinner-small-1x-b897d25e.gif) no-repeat;
background-size: contain;
height: 16px;
width: 16px;
display: inline-block;
opacity: .5;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
margin-right: 4px;
position: relative;
top: 4px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AsyncDownloadFooter .spinner {
background-image: url(https://s.pinimg.com/webapp/style/images/spinner-small-2x-dbb1334f.gif); } }
.AsyncDownloadFooter .spinner.hidden {
display: none; }
.AudienceForm.actalikeAudienceForm .existingAudienceTable {
padding-bottom: 8px; }
.AudienceForm.actalikeAudienceForm .countryPicker,
.AudienceForm.actalikeAudienceForm .reachSelector {
display: inline-block;
margin-top: 20px;
vertical-align: top; }
.AudienceForm.actalikeAudienceForm .countryPicker {
margin-right: 80px; }
.AudienceForm.actalikeAudienceForm .countryPicker .selectButton {
max-width: 200px;
word-break: break-word; }
.AudienceForm.actalikeAudienceForm .countryPicker .selectButton button {
border: none;
white-space: normal; }
.AudienceForm.actalikeAudienceForm .countryPicker .selectButton ul {
max-height: 200px;
overflow-y: auto; }
/* stylelint-disable-next-line at-rule-blacklist */
/* stylelint-disable-next-line at-rule-blacklist */
/* stylelint-disable-next-line at-rule-blacklist */
.AudienceForm {
width: 1000px; }
.AudienceForm .header,
.AudienceForm .basicInfo,
.AudienceForm .filters,
.AudienceForm .actalikeData,
.AudienceForm .userListData {
margin-left: 33px; }
.AudienceForm .header {
color: #555;
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
margin-top: 22px; }
.AudienceForm .basicInfo {
margin-bottom: 20px; }
.AudienceForm .fieldLabel {
color: #555;
font-size: 12px;
font-weight: 500;
margin-bottom: 12px; }
.AudienceForm .actalikeData {
margin-bottom: 32px;
margin-top: 40px; }
.AudienceForm .actalikeData,
.AudienceForm .basicInfo {
margin-right: 67px; }
.AudienceForm .descriptionField {
margin-bottom: 19px;
margin-top: 23px; }
.AudienceForm .retentionDaysWrapper,
.AudienceForm .filters,
.AudienceForm .addFilterWrapper {
color: #555;
font-size: 16px;
font-weight: bold; }
.AudienceForm .error {
display: none; }
.AudienceForm .error.server {
color: #c11400;
font-size: 16px;
font-weight: bold;
line-height: 15px;
margin-bottom: 20px;
margin-top: 32px;
text-align: center; }
.AudienceForm .error.client {
color: #c11400;
font-size: 12px;
font-weight: bold;
line-height: 15px; }
.AudienceForm .error.hasError {
display: block; }
.AudienceForm .retentionDays {
background-color: #efefef;
border: none;
border-radius: 4px;
color: #b5b5b5;
font-size: 14px;
font-weight: bold;
height: 28px;
margin-left: 10px;
margin-right: 10px;
text-align: center;
width: 59px; }
.AudienceForm .retentionDays:focus {
outline: none; }
.AudienceForm .retentionDaysWrapper {
margin-right: 61px; }
.AudienceForm .filters {
border-top: solid 1px #efefef;
margin-right: 33px;
padding-bottom: 9px;
padding-top: 15px;
white-space: nowrap; }
.AudienceForm .filterHeader {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 22px;
margin-top: 10px; }
.AudienceForm .removeFilter {
color: #b5b5b5;
font-size: 12px;
font-weight: bold;
margin-top: 12px; }
.AudienceForm .filterContent {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 20px; }
.AudienceForm .radioButtons {
color: #555;
font-size: 16px;
font-weight: bold;
margin-right: 32px;
padding-left: 4px;
padding-right: 44px;
vertical-align: top; }
.AudienceForm .rightBorder {
border-right: solid 1px #efefef; }
.AudienceForm .radioButtons input {
margin-right: 9px; }
.AudienceForm .radioButtons li {
display: block;
margin-bottom: 4px; }
.AudienceForm .humanReadableText {
color: #b5b5b5;
font-size: 14px;
margin-bottom: 6px;
white-space: normal; }
.AudienceForm .addFilterWrapper {
border-top: solid 1px #efefef;
margin-bottom: 24px;
margin-left: 17px;
margin-right: 33px;
padding-top: 18px; }
.AudienceForm .addFilterButton {
background-color: #fff;
border: none; }
.AudienceForm .addFilterButton .addFilterText {
font-weight: bold;
margin-left: 4px;
position: relative;
top: 2px; }
.AudienceForm .footer {
text-align: right; }
.AudienceForm .footer button {
margin-bottom: 8px;
margin-right: 12px;
margin-top: 8px; }
.AudienceForm .engagementMultiValueInputWrapper,
.AudienceForm .visitorMultiValueInput {
display: inline-block;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
.AudienceForm .visitorMultiValueInput,
.AudienceForm .engagementMultiValueInput {
border: solid 1px #efefef;
margin-right: 16px;
min-height: 100px;
vertical-align: top;
white-space: normal; }
.AudienceForm .typeaheadInput__suggestions,
.AudienceForm .visitorMultiValueInput__suggestions,
.AudienceForm .engagementMultiValueInput__suggestions {
background: #fff;
border-radius: 4px;
box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.06);
color: #555;
max-height: 200px;
overflow: auto;
position: relative;
width: 271px;
z-index: 100; }
.AudienceForm .typeaheadInput__suggestions li,
.AudienceForm .visitorMultiValueInput__suggestions li,
.AudienceForm .engagementMultiValueInput__suggestions li {
font-size: 14px;
padding: 12px; }
.AudienceForm .typeaheadInput__suggestions li.active,
.AudienceForm .visitorMultiValueInput__suggestions li.active,
.AudienceForm .engagementMultiValueInput__suggestions li.active {
background-color: #efefef; }
.AudienceForm .typeaheadInput__suggestions li mark,
.AudienceForm .visitorMultiValueInput__suggestions li mark,
.AudienceForm .engagementMultiValueInput__suggestions li mark {
background-color: #efefef; }
.AudienceForm .typeaheadInput__tag,
.AudienceForm .visitorMultiValueInput__tag,
.AudienceForm .engagementMultiValueInput__tag {
background-color: #efefef;
border-radius: 4px;
color: #555;
display: inline-block;
font-size: 14px;
line-height: 24px;
margin: 6px 0 0 8px;
padding: 0 0 0 8px; }
.AudienceForm .typeaheadInput__tag__remove,
.AudienceForm .visitorMultiValueInput__tag__remove,
.AudienceForm .engagementMultiValueInput__tag__remove {
color: #555;
cursor: pointer;
display: inline-block;
font-size: 20px;
font-weight: normal;
line-height: 24px;
margin-left: 8px;
text-align: center;
width: 22px; }
.AudienceForm .typeaheadInput__tagInput input,
.AudienceForm .visitorMultiValueInput__tagInput input,
.AudienceForm .engagementMultiValueInput__tagInput input {
background: transparent;
border: none;
color: #555;
display: block;
font-size: 16px;
font-weight: bold;
line-height: 34px;
padding: 0 8px;
width: 100%; }
.AudienceForm .typeaheadInput__tagInput input::-webkit-input-placeholder,
.AudienceForm .visitorMultiValueInput__tagInput input::-webkit-input-placeholder,
.AudienceForm .engagementMultiValueInput__tagInput input::-webkit-input-placeholder {
color: #b5b5b5;
font-size: 14px;
font-weight: 500; }
.AudienceForm .typeaheadInput__tagInput input::-moz-placeholder,
.AudienceForm .visitorMultiValueInput__tagInput input::-moz-placeholder,
.AudienceForm .engagementMultiValueInput__tagInput input::-moz-placeholder {
color: #b5b5b5;
font-size: 14px;
font-weight: 500; }
.AudienceForm .typeaheadInput__tagInput input:-ms-input-placeholder,
.AudienceForm .visitorMultiValueInput__tagInput input:-ms-input-placeholder,
.AudienceForm .engagementMultiValueInput__tagInput input:-ms-input-placeholder {
color: #b5b5b5;
font-size: 14px;
font-weight: 500; }
.AudienceForm .typeaheadInput__tagInput input::placeholder,
.AudienceForm .visitorMultiValueInput__tagInput input::placeholder,
.AudienceForm .engagementMultiValueInput__tagInput input::placeholder {
color: #b5b5b5;
font-size: 14px;
font-weight: 500; }
.AudienceForm .typeaheadInput__tagInput input:focus,
.AudienceForm .visitorMultiValueInput__tagInput input:focus,
.AudienceForm .engagementMultiValueInput__tagInput input:focus {
outline: none; }
.AudienceForm .brio-form__field {
border-bottom: 1px solid #efefef;
margin: 0 0 5px;
overflow: hidden; }
.AudienceForm .brio-form__field__label {
color: #555;
cursor: default;
display: block;
font-size: 12px;
font-weight: 500;
letter-spacing: -.02px;
line-height: 1;
overflow: hidden;
padding: 10px 0 5px; }
.AudienceForm .brio-form__field__label--disabled {
color: #b5b5b5; }
.AudienceForm .brio-form__field__input {
background: transparent;
border: none;
color: #555;
display: block;
font-size: 16px;
font-weight: bold;
line-height: 34px;
padding: 0;
width: 100%; }
.AudienceForm .brio-form__field__input::-webkit-input-placeholder {
color: #b5b5b5; }
.AudienceForm .brio-form__field__input::-moz-placeholder {
color: #b5b5b5; }
.AudienceForm .brio-form__field__input:-ms-input-placeholder {
color: #b5b5b5; }
.AudienceForm .brio-form__field__input::placeholder {
color: #b5b5b5; }
.AudienceForm .brio-form__field__input:focus, .AudienceForm .brio-form__field__input:active {
outline: none; }
.AudienceForm .brio-form__field__input:disabled {
color: #b5b5b5; }
.AudienceForm .brio-form__field--error .brio-form__field__input {
color: #c11400; }
.AudienceForm .brio-error {
color: #c11400;
font-size: 12px;
font-weight: bold;
line-height: 15px;
margin: 0 0 8px; }
.AudienceFormTooltip {
float: right;
margin-top: 6px;
position: relative; }
.AudienceFormTooltip__trigger {
background-color: #b5b5b5;
border-radius: 50px;
color: #fff;
cursor: help;
display: inline-block;
font-size: 8px;
font-weight: 500;
line-height: 14px;
text-align: center;
width: 14px; }
.AudienceFormTooltip:hover .AudienceFormTooltip__content {
-webkit-animation: .3s .5s menu-slide-in-up;
animation: .3s .5s menu-slide-in-up;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
pointer-events: auto; }
.AudienceFormTooltip__content {
background-color: #555;
border-radius: 4px;
color: #fff;
font-size: 12px;
font-weight: 500;
margin: 15px 0 0;
opacity: 0;
padding: 10px 20px;
pointer-events: none;
position: absolute;
right: -20px;
white-space: normal;
width: 200px;
word-wrap: break-word;
z-index: 100; }
.AudienceFormTooltip__content::before {
bottom: -20px;
content: " ";
display: block;
left: 0;
position: absolute; }
.AudienceFormTooltip__content::after {
border-bottom: solid #555 10px;
border-left: solid transparent 10px;
border-right: solid transparent 10px;
content: " ";
height: 0;
margin-left: -13px;
position: absolute;
right: 18px;
top: -10px;
width: 0; }
.AudienceForm.engagementAudienceForm .verifiedDomains {
display: inline-block;
margin-right: 47px; }
.AudienceForm.engagementAudienceForm .verifiedDomainsButtonWrapper.basicInfoItem .selectButton,
.AudienceForm.engagementAudienceForm .verifiedDomainsButtonWrapper ~ .basicInfoItem {
position: relative;
top: 6px; }
.AudienceForm.engagementAudienceForm .verifiedDomainsButton em {
width: 26px;
height: 26px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -119px -260px no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
margin-right: 7px;
zoom: .77; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AudienceForm.engagementAudienceForm .verifiedDomainsButton em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -117px -256px;
background-size: 399px 382px; } }
.AudienceForm.engagementAudienceForm .domain {
color: #555;
font-size: 16px;
font-weight: bold; }
.AudienceForm.engagementAudienceForm .domainImageWrapper {
margin-right: 7px;
vertical-align: middle; }
.AudienceForm.engagementAudienceForm .inputGrid {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
overflow: hidden; }
.AudienceForm.engagementAudienceForm .AudienceFormTooltip {
margin-top: -4px; }
.AudienceForm.engagementAudienceForm .inputError {
margin-top: 8px; }
/* stylelint-disable-next-line at-rule-blacklist */
/* stylelint-disable-next-line at-rule-blacklist */
.AudienceForm {
width: 1000px; }
.AudienceForm .header,
.AudienceForm .basicInfo,
.AudienceForm .filters,
.AudienceForm .actalikeData,
.AudienceForm .userListData {
margin-left: 33px; }
.AudienceForm .header {
color: #555;
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
margin-top: 22px; }
.AudienceForm .basicInfo {
margin-bottom: 20px; }
.AudienceForm .fieldLabel {
color: #555;
font-size: 12px;
font-weight: 500;
margin-bottom: 12px; }
.AudienceForm .actalikeData {
margin-bottom: 32px;
margin-top: 40px; }
.AudienceForm .actalikeData,
.AudienceForm .basicInfo {
margin-right: 67px; }
.AudienceForm .descriptionField {
margin-bottom: 19px;
margin-top: 23px; }
.AudienceForm .retentionDaysWrapper,
.AudienceForm .filters,
.AudienceForm .addFilterWrapper {
color: #555;
font-size: 16px;
font-weight: bold; }
.AudienceForm .error {
display: none; }
.AudienceForm .error.server {
color: #c11400;
font-size: 16px;
font-weight: bold;
line-height: 15px;
margin-bottom: 20px;
margin-top: 32px;
text-align: center; }
.AudienceForm .error.client {
color: #c11400;
font-size: 12px;
font-weight: bold;
line-height: 15px; }
.AudienceForm .error.hasError {
display: block; }
.AudienceForm .retentionDays {
background-color: #efefef;
border: none;
border-radius: 4px;
color: #b5b5b5;
font-size: 14px;
font-weight: bold;
height: 28px;
margin-left: 10px;
margin-right: 10px;
text-align: center;
width: 59px; }
.AudienceForm .retentionDays:focus {
outline: none; }
.AudienceForm .retentionDaysWrapper {
margin-right: 61px; }
.AudienceForm .filters {
border-top: solid 1px #efefef;
margin-right: 33px;
padding-bottom: 9px;
padding-top: 15px;
white-space: nowrap; }
.AudienceForm .filterHeader {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 22px;
margin-top: 10px; }
.AudienceForm .removeFilter {
color: #b5b5b5;
font-size: 12px;
font-weight: bold;
margin-top: 12px; }
.AudienceForm .filterContent {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 20px; }
.AudienceForm .radioButtons {
color: #555;
font-size: 16px;
font-weight: bold;
margin-right: 32px;
padding-left: 4px;
padding-right: 44px;
vertical-align: top; }
.AudienceForm .rightBorder {
border-right: solid 1px #efefef; }
.AudienceForm .radioButtons input {
margin-right: 9px; }
.AudienceForm .radioButtons li {
display: block;
margin-bottom: 4px; }
.AudienceForm .humanReadableText {
color: #b5b5b5;
font-size: 14px;
margin-bottom: 6px;
white-space: normal; }
.AudienceForm .addFilterWrapper {
border-top: solid 1px #efefef;
margin-bottom: 24px;
margin-left: 17px;
margin-right: 33px;
padding-top: 18px; }
.AudienceForm .addFilterButton {
background-color: #fff;
border: none; }
.AudienceForm .addFilterButton .addFilterText {
font-weight: bold;
margin-left: 4px;
position: relative;
top: 2px; }
.AudienceForm .footer {
text-align: right; }
.AudienceForm .footer button {
margin-bottom: 8px;
margin-right: 12px;
margin-top: 8px; }
.AudienceForm .engagementMultiValueInputWrapper,
.AudienceForm .visitorMultiValueInput {
display: inline-block;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
.AudienceForm .visitorMultiValueInput,
.AudienceForm .engagementMultiValueInput {
border: solid 1px #efefef;
margin-right: 16px;
min-height: 100px;
vertical-align: top;
white-space: normal; }
.AudienceForm .typeaheadInput__suggestions,
.AudienceForm .visitorMultiValueInput__suggestions,
.AudienceForm .engagementMultiValueInput__suggestions {
background: #fff;
border-radius: 4px;
box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.06);
color: #555;
max-height: 200px;
overflow: auto;
position: relative;
width: 271px;
z-index: 100; }
.AudienceForm .typeaheadInput__suggestions li,
.AudienceForm .visitorMultiValueInput__suggestions li,
.AudienceForm .engagementMultiValueInput__suggestions li {
font-size: 14px;
padding: 12px; }
.AudienceForm .typeaheadInput__suggestions li.active,
.AudienceForm .visitorMultiValueInput__suggestions li.active,
.AudienceForm .engagementMultiValueInput__suggestions li.active {
background-color: #efefef; }
.AudienceForm .typeaheadInput__suggestions li mark,
.AudienceForm .visitorMultiValueInput__suggestions li mark,
.AudienceForm .engagementMultiValueInput__suggestions li mark {
background-color: #efefef; }
.AudienceForm .typeaheadInput__tag,
.AudienceForm .visitorMultiValueInput__tag,
.AudienceForm .engagementMultiValueInput__tag {
background-color: #efefef;
border-radius: 4px;
color: #555;
display: inline-block;
font-size: 14px;
line-height: 24px;
margin: 6px 0 0 8px;
padding: 0 0 0 8px; }
.AudienceForm .typeaheadInput__tag__remove,
.AudienceForm .visitorMultiValueInput__tag__remove,
.AudienceForm .engagementMultiValueInput__tag__remove {
color: #555;
cursor: pointer;
display: inline-block;
font-size: 20px;
font-weight: normal;
line-height: 24px;
margin-left: 8px;
text-align: center;
width: 22px; }
.AudienceForm .typeaheadInput__tagInput input,
.AudienceForm .visitorMultiValueInput__tagInput input,
.AudienceForm .engagementMultiValueInput__tagInput input {
background: transparent;
border: none;
color: #555;
display: block;
font-size: 16px;
font-weight: bold;
line-height: 34px;
padding: 0 8px;
width: 100%; }
.AudienceForm .typeaheadInput__tagInput input::-webkit-input-placeholder,
.AudienceForm .visitorMultiValueInput__tagInput input::-webkit-input-placeholder,
.AudienceForm .engagementMultiValueInput__tagInput input::-webkit-input-placeholder {
color: #b5b5b5;
font-size: 14px;
font-weight: 500; }
.AudienceForm .typeaheadInput__tagInput input::-moz-placeholder,
.AudienceForm .visitorMultiValueInput__tagInput input::-moz-placeholder,
.AudienceForm .engagementMultiValueInput__tagInput input::-moz-placeholder {
color: #b5b5b5;
font-size: 14px;
font-weight: 500; }
.AudienceForm .typeaheadInput__tagInput input:-ms-input-placeholder,
.AudienceForm .visitorMultiValueInput__tagInput input:-ms-input-placeholder,
.AudienceForm .engagementMultiValueInput__tagInput input:-ms-input-placeholder {
color: #b5b5b5;
font-size: 14px;
font-weight: 500; }
.AudienceForm .typeaheadInput__tagInput input::placeholder,
.AudienceForm .visitorMultiValueInput__tagInput input::placeholder,
.AudienceForm .engagementMultiValueInput__tagInput input::placeholder {
color: #b5b5b5;
font-size: 14px;
font-weight: 500; }
.AudienceForm .typeaheadInput__tagInput input:focus,
.AudienceForm .visitorMultiValueInput__tagInput input:focus,
.AudienceForm .engagementMultiValueInput__tagInput input:focus {
outline: none; }
.AudienceForm .brio-form__field {
border-bottom: 1px solid #efefef;
margin: 0 0 5px;
overflow: hidden; }
.AudienceForm .brio-form__field__label {
color: #555;
cursor: default;
display: block;
font-size: 12px;
font-weight: 500;
letter-spacing: -.02px;
line-height: 1;
overflow: hidden;
padding: 10px 0 5px; }
.AudienceForm .brio-form__field__label--disabled {
color: #b5b5b5; }
.AudienceForm .brio-form__field__input {
background: transparent;
border: none;
color: #555;
display: block;
font-size: 16px;
font-weight: bold;
line-height: 34px;
padding: 0;
width: 100%; }
.AudienceForm .brio-form__field__input::-webkit-input-placeholder {
color: #b5b5b5; }
.AudienceForm .brio-form__field__input::-moz-placeholder {
color: #b5b5b5; }
.AudienceForm .brio-form__field__input:-ms-input-placeholder {
color: #b5b5b5; }
.AudienceForm .brio-form__field__input::placeholder {
color: #b5b5b5; }
.AudienceForm .brio-form__field__input:focus, .AudienceForm .brio-form__field__input:active {
outline: none; }
.AudienceForm .brio-form__field__input:disabled {
color: #b5b5b5; }
.AudienceForm .brio-form__field--error .brio-form__field__input {
color: #c11400; }
.AudienceForm .brio-error {
color: #c11400;
font-size: 12px;
font-weight: bold;
line-height: 15px;
margin: 0 0 8px; }
.AudienceForm.userListAudienceForm .userListData {
margin-bottom: 32px;
margin-top: 28px; }
.AudienceForm.userListAudienceForm .addRemoveButtonWrapper {
color: #555;
font-size: 14px;
font-weight: bold;
margin-bottom: 12px; }
.AudienceForm.userListAudienceForm .addRemoveRadioButtons {
display: inline-block;
margin-right: 40px; }
.AudienceForm.userListAudienceForm .chooseFileButtonLabel {
margin-bottom: 12px; }
.AudienceForm.userListAudienceForm .chooseFileButton {
position: relative;
top: -4px; }
.AudienceForm.userListAudienceForm .selectedFileWrapper {
margin-bottom: 12px; }
.AudienceForm.userListAudienceForm .selectedFileWrapper button {
position: relative;
top: -4px; }
.AudienceForm.userListAudienceForm .selectedFile {
color: #999;
display: inline;
font-size: 14px;
font-weight: bold;
margin-right: 6px; }
.AudienceForm.userListAudienceForm .fileInput {
opacity: 0;
position: absolute; }
.AudienceForm.userListAudienceForm .progressBar {
margin-top: 8px;
padding-bottom: 16px;
width: 280px; }
/* stylelint-disable-next-line at-rule-blacklist */
.AudienceForm.visitorAudienceForm .tagSelection {
margin-bottom: 19px;
margin-top: 33px; }
.AudienceForm.visitorAudienceForm .tagSelection .tagSelectButton {
color: #b5b5b5;
font-size: 14px;
font-weight: 500;
margin-bottom: 5px; }
.AudienceForm.visitorAudienceForm .tagSelection .tagSelectButton.selectedButton {
color: #555;
font-weight: bold; }
.AudienceForm.visitorAudienceForm .tagSelection .conversionTagSearchTable {
font-weight: bold;
margin-top: 11px; }
.AudienceForm.visitorAudienceForm .retentionDaysAndPrefill {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.AudienceForm.visitorAudienceForm .error.server {
margin: 0 66px 48px 32px; }
.AudienceForm.visitorAudienceForm .noTagsError {
margin-bottom: 20px;
margin-left: 33px; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .eventFilterContent {
margin-bottom: 5px; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .eventFilterOperator {
display: inline-block;
font-size: 16px;
font-weight: bold;
margin-bottom: 12px;
margin-left: 25px;
margin-top: 8px;
vertical-align: top; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .historyWarning {
color: #e3780c;
font-size: 14px;
margin-bottom: 6px;
white-space: normal; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .operatorSelection {
display: inline-block;
vertical-align: top;
width: 100px; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .filterValue {
display: inline-block;
margin-left: 24px;
vertical-align: top;
width: 254px; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput {
position: relative; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput__suggestions {
position: absolute; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput__suggestions li {
font-size: 16px;
font-weight: bold; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput__tag {
position: absolute;
z-index: 101; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput__tagInput {
position: relative; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput__tagInput input {
background: transparent;
border: none;
border-bottom: 1px solid #efefef;
color: #555;
display: block;
font-size: 16px;
font-weight: bold;
line-height: 34px;
margin: 0 0 5px;
overflow: hidden;
padding: 0;
width: 100%; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput__tagInput input::-webkit-input-placeholder {
color: #b5b5b5; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput__tagInput input::-moz-placeholder {
color: #b5b5b5; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput__tagInput input:-ms-input-placeholder {
color: #b5b5b5; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput__tagInput input::placeholder {
color: #b5b5b5; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput__tagInput input:focus, .AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput__tagInput input:active {
outline: none; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .typeaheadInput__tagInput input:disabled {
color: #b5b5b5; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .subrules {
margin: 18px 66px 24px 30px; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .subruleContent {
margin-bottom: 24px;
margin-top: 60px; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .subruleKey {
display: inline-block;
vertical-align: top;
width: 254px; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .subruleOperatorSelection {
display: inline-block;
margin-left: 16px;
vertical-align: top;
width: 168px; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .subruleValue {
margin-bottom: 15px;
margin-top: 15px;
vertical-align: top; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .subrules .subruleContent .visitorMultiValueInput {
width: 100%; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .subrules .historyWarning {
margin-top: 18px; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .removeSubrule {
color: #b5b5b5;
display: inline-block;
float: right;
font-size: 12px;
font-weight: bold;
margin-top: 12px; }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .addSubruleWrapper em {
width: 28px;
height: 28px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-partners-1x-9f7312af.png) -30px 0 no-repeat;
display: inline-block;
font: 0 / 0 serif;
text-shadow: none;
color: transparent;
margin-right: 6px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.AudienceForm.visitorAudienceForm .visitorAudienceFields .addSubruleWrapper em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-partners-2x-19664238.png);
background-position: -29px 0;
background-size: 86px 72px; } }
.AudienceForm.visitorAudienceForm .visitorAudienceFields .addSubrule {
color: #555;
font-size: 14px;
font-weight: bold;
margin-right: 33px;
padding-top: 18px; }
/* stylelint-disable-next-line at-rule-blacklist */
.BrioCheckbox {
color: #555;
font-size: 16px;
font-weight: bold; }
.BrioCheckbox input[type="checkbox"] {
border: 0;
clip: rect(0 0 0 0);
display: none;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.BrioCheckbox .checkbox {
border: 1px solid #555;
border-radius: 4px;
display: inline-block;
height: 16px;
margin-right: 12px;
position: relative;
top: 2px;
-webkit-transition: .5s ease all;
transition: .5s ease all;
width: 16px; }
.BrioCheckbox .checkbox::before {
border: solid #fff;
content: " ";
display: none;
left: 5px;
position: absolute;
width: 3px; }
.BrioCheckbox input[type="checkbox"]:focus + .checkbox,
.BrioCheckbox input[type="checkbox"]:active:not(:checked) + .checkbox {
box-shadow: 0 0 0 1px #666; }
.BrioCheckbox input[type="checkbox"]:checked + .checkbox {
background: #666; }
.BrioCheckbox input[type="checkbox"]:checked + .checkbox::before, .BrioCheckbox input[type="checkbox"]:indeterminate + .checkbox::before {
display: block; }
.BrioCheckbox input[type="checkbox"]:checked + .checkbox::before {
border-width: 0 2px 2px 0;
height: 8px;
top: 2px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.BrioCheckbox input[type="checkbox"]:indeterminate + .checkbox::before {
border-color: #666;
border-width: 0 2px 0 0;
height: 7px;
top: 3px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg); }
.BrioCheckboxGroup.grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 1px; }
.BrioCheckboxGroup.grid li {
display: inline-block;
margin-bottom: 20px;
vertical-align: top;
white-space: normal;
word-wrap: break-word; }
.BrioCheckboxGroup.grid li.lastRow {
margin-bottom: 0; }
.BrioRadioButtonGroup {
color: #555;
font-size: 16px; }
.BrioRadioButtonGroup input[type="radio"] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.BrioRadioButtonGroup input[type="radio"] + .radioButton {
border: 1px solid #555;
border-radius: 16px;
display: inline-block;
height: 16px;
margin-right: 12px;
position: relative;
top: 4px;
width: 16px; }
.BrioRadioButtonGroup input[type="radio"] + .radioButton::before {
border-radius: 12px;
content: " ";
display: none;
height: 12px;
margin: auto;
position: relative;
top: 2px;
-webkit-transition: .5s ease all;
transition: .5s ease all;
width: 12px; }
.BrioRadioButtonGroup input[type="radio"]:active:not(:checked) + .radioButton,
.BrioRadioButtonGroup input[type="radio"]:focus + .radioButton {
box-shadow: 0 0 0 1px #666; }
.BrioRadioButtonGroup input[type="radio"]:checked + .radioButton::before {
background-color: #666;
display: block; }
.BrioRadioButtonGroup.grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 2px; }
.BrioRadioButtonGroup.grid li {
display: inline-block;
margin-bottom: 20px;
vertical-align: top;
white-space: normal;
word-wrap: break-word; }
.BrioRadioButtonGroup.grid li.lastRow {
margin-bottom: 0; }
.searchField {
display: inline-block;
position: relative; }
.searchField .Input.flat {
background: transparent;
padding-left: 33px; }
.searchField .searchIcon {
width: 15px;
height: 15px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -238px -325px no-repeat;
left: 10px;
position: absolute;
top: 9px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.searchField .searchIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -217px -145px;
background-size: 399px 382px; } }
.searchField .clearIcon {
width: 12px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -149px no-repeat;
cursor: pointer;
position: absolute;
right: 9px;
top: 10px;
-webkit-transition: opacity .5s, right .5s, visibility .5s;
transition: opacity .5s, right .5s, visibility .5s; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.searchField .clearIcon {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -357px -240px;
background-size: 399px 382px; } }
.searchField .clearIcon:hover {
width: 12px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -79px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.searchField .clearIcon:hover {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -163px -109px;
background-size: 399px 382px; } }
.searchField .clearIcon:active {
width: 12px;
height: 12px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -396px -93px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.searchField .clearIcon:active {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -321px -258px;
background-size: 399px 382px; } }
.inputField {
overflow: hidden;
border-top: 1px solid #dfdfdf;
padding: 15px 21px 15px 27px;
background-color: #f3f3f3;
background: -webkit-linear-gradient(#f0f0f0, #f5f5f5);
background: linear-gradient(#f0f0f0, #f5f5f5);
box-sizing: border-box;
width: 100%;
border: 1px solid #d6d3ce;
border-radius: 3px;
color: #333;
font-size: 14px;
padding: 7px; }
.inputField:first-child {
border: 0; }
.inputField:focus {
background: #fff; }
.inputField.hasError, .inputField.hasWarning {
background: #e6abad;
border-color: #bd081c; }
.inputField.disabled {
background-color: #f8f8f8;
background: -webkit-linear-gradient(#f5f5f5, #fafafa);
background: linear-gradient(#f5f5f5, #fafafa);
border-color: #dcdcdc;
color: #999;
cursor: default; }
.safari .inputField.disabled {
background-color: #f8f8f8; }
.inputField.flat {
background: #fff;
border: 1px solid #c7c7c7;
border-radius: 4px;
box-shadow: none;
color: #333;
font-size: 14px;
padding: 7px; }
.inputField.flat:focus {
border-color: #12afe3;
outline: none; }
.inputField.flat:disabled {
background-color: #f5f5f5;
color: #b9b9b9; }
.withCurrencySymbol .inputField {
border-bottom-left-radius: 0;
border-top-left-radius: 0; }
.inputField.searchInput {
padding-right: 30px; }
.inputField.bottomBorder {
border: 0;
border-bottom: 1px solid #e3e3e3;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.inputField.bottomBorder:focus {
border-color: #e3e3e3; }
.inputField.noBorder {
border: 0; }
.inputField.searchInputRight {
padding-left: 30px; }
.inputField.targetingValueList {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
height: 40px; }
.SearchableInputList .searchField {
display: block; }
.SearchableInputList .groupWrapper {
background-color: #fff;
border-bottom: 1px solid #c7c7c7;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-left: 1px solid #c7c7c7;
border-right: 1px solid #c7c7c7;
margin: 0;
max-height: 225px;
overflow-y: auto;
padding: 0;
word-wrap: break-word; }
.SearchableInputList .inputWrapper {
border-bottom: 1px solid #e7e7e7;
display: block;
padding: 16px 20px; }
/* stylelint-disable-next-line at-rule-blacklist */
.selectButton {
display: inline-block;
position: relative;
vertical-align: baseline;
z-index: 1000; }
.selectButton .dropdownContainer {
display: none; }
.selectButton.open .dropdownContainer {
border: 1px solid #ccc;
border-radius: 6px;
display: block;
margin: 6px 0 20px;
position: absolute; }
.selectButton.open ul {
background: #fff;
border-radius: 6px;
min-width: 120px; }
.selectButton.open li {
border-top: 1px solid #eee;
font-size: 14px;
font-weight: bold;
position: relative; }
.selectButton.open li button {
background: transparent;
border: none;
padding: 15px 10px;
text-align: left;
width: 100%; }
.selectButton.open li:first-child {
border-radius: 6px 6px 0 0;
border-top: 0; }
.selectButton.open li:last-child {
border-radius: 0 0 6px 6px; }
.selectButton button.flat::after {
border: 4px solid transparent;
border-right-color: #111;
border-top-color: #111;
content: "";
display: inline-block;
height: 0;
margin-left: 8px;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
vertical-align: top;
width: 0; }
.selectButton.open button::after {
margin-top: 2px;
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
vertical-align: middle; }
.selectButton.open .dropdownContainer::before {
background: #fff;
border: 1px solid #ccc;
border-bottom-color: transparent;
border-right-color: transparent;
content: "";
display: block;
height: 12px;
left: 12px;
position: absolute;
top: -8px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 12px; }
.selectButton.open ul li:hover {
background-color: #efefef;
cursor: pointer; }
.WordSelector li {
display: inline-block;
margin-right: 16px; }
.WordSelector button {
background-color: #fff;
border: none;
color: #555;
font-size: 14px;
font-weight: bold;
line-height: 36px;
min-height: 44px;
text-align: center;
vertical-align: middle;
white-space: normal;
width: 44px;
word-break: break-word; }
.WordSelector button:focus:not(.selected) {
border: 1px solid #c7c7c7;
border-radius: 50%;
outline: none; }
.WordSelector button.selected {
background-color: #555;
border: 1px solid #555;
border-radius: 50%;
color: #fff;
outline: none;
-webkit-transition: .5s ease all;
transition: .5s ease all;
-webkit-transition-property: color, background-color;
transition-property: color, background-color; }
.InterestCard {
/* TODO(dalvarez): #TechDebt this is a temporary solution to NuxInterest not rendering correctly */ }
.InterestCard.compact, .InterestCard.default {
height: 100%;
width: 100%; }
.InterestCard.default h2 {
font-size: 16px; }
.InterestCard.default h3 {
font-size: 12px;
font-weight: normal; }
.InterestCard.default .followButton {
margin-top: 8px; }
.InterestCard.compact h2 {
font-size: 13px; }
.InterestCard.compact h3 {
font-size: 11px;
font-weight: normal; }
.InterestCard.compact .followButton {
display: none;
padding: 8px;
position: absolute;
right: 0;
top: 0; }
.InterestCard.compact:hover .followButton {
display: block; }
.InterestCard .link {
cursor: pointer; }
.InterestCard .interestContainer:active {
-webkit-transform: scale(0.95);
transform: scale(0.95); }
.InterestCard .interestContainer {
border-radius: 6px;
box-sizing: border-box;
display: block;
height: 100%;
min-width: 130px;
padding-bottom: 100%;
position: relative;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
width: 100%; }
.InterestCard .mobileInterestContainer {
min-width: 106px; }
.InterestCard .mobileNuxInterest {
min-width: 0; }
.InterestCard .interestImage {
background: #fff;
background-size: cover;
border-radius: 6px;
display: block;
height: 100%;
position: absolute;
-webkit-transform: none;
transform: none;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
width: 100%; }
.InterestCard .noImageInterest {
border-radius: 3px; }
.InterestCard .interestImage::after {
background: #000;
border-radius: 6px;
bottom: 0;
content: "";
left: 0;
opacity: .2;
position: absolute;
right: 0;
top: 0; }
.InterestCard .interestImage:hover {
opacity: 1; }
.InterestCard .textContainer {
bottom: 0;
display: block;
left: 0;
padding: 8px;
position: absolute;
right: 0;
z-index: 1; }
.InterestCard .centerText {
bottom: 50%;
-webkit-transform: translateY(50%);
transform: translateY(50%); }
.InterestCard .textContainer div {
overflow: hidden;
text-overflow: ellipsis; }
.InterestCard .text {
color: #fff;
display: block;
-webkit-font-smoothing: antialiased;
font-weight: bold;
text-align: left;
text-overflow: ellipsis;
width: 100%; }
.InterestCard .left {
composes: text;
text-align: left; }
.InterestCard .center {
composes: text;
text-align: center; }
.InterestCard .right {
composes: text;
text-align: right; }
.InterestCard .value {
font-weight: bold; }
.StoryRenuxCard .buttonWrapper {
background-color: transparent;
border: none;
height: 300px;
padding: 0;
position: relative;
width: 100%; }
.StoryRenuxCard .buttonWrapper:focus {
outline: none; }
.StoryRenuxCard .buttonWrapper:hover .renuxButton {
background-color: #e0e0e0; }
.StoryRenuxCard .petalWrapper {
border-radius: 8px;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%; }
@-webkit-keyframes textAnimation {
0% {
opacity: 0;
-webkit-transform: translateY(30%);
transform: translateY(30%); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
@keyframes textAnimation {
0% {
opacity: 0;
-webkit-transform: translateY(30%);
transform: translateY(30%); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
.StoryRenuxCard .petalText {
-webkit-animation: 0.42s cubic-bezier(0.31, 1, 0.34, 1) 2.3s 1 textAnimation forwards;
animation: 0.42s cubic-bezier(0.31, 1, 0.34, 1) 2.3s 1 textAnimation forwards;
border: 1px solid transparent;
bottom: 64px;
left: 0;
opacity: 0;
padding: 12px;
position: absolute;
width: 165px; }
@-webkit-keyframes petalAnimation {
from {
-webkit-transform: scale(0) rotate(-45deg) translateX(-100%);
transform: scale(0) rotate(-45deg) translateX(-100%); }
to {
-webkit-transform: scale(1) rotate(0deg) translateX(0);
transform: scale(1) rotate(0deg) translateX(0); } }
@keyframes petalAnimation {
from {
-webkit-transform: scale(0) rotate(-45deg) translateX(-100%);
transform: scale(0) rotate(-45deg) translateX(-100%); }
to {
-webkit-transform: scale(1) rotate(0deg) translateX(0);
transform: scale(1) rotate(0deg) translateX(0); } }
.StoryRenuxCard .petal {
-webkit-animation: 0.8s cubic-bezier(0.31, 1, 0.34, 1) 1.6s petalAnimation forwards;
animation: 0.8s cubic-bezier(0.31, 1, 0.34, 1) 1.6s petalAnimation forwards;
background-color: #f23434;
border-radius: 50% 50% 50% 8px;
margin-bottom: 18px;
padding-top: 100%;
-webkit-transform: scale(0) rotate(-45deg) translateX(-100%);
transform: scale(0) rotate(-45deg) translateX(-100%);
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
width: 100%; }
@-webkit-keyframes buttonAnimation {
0% {
height: 300px; }
50% {
height: 300px; }
100% {
height: 45px; } }
@keyframes buttonAnimation {
0% {
height: 300px; }
50% {
height: 300px; }
100% {
height: 45px; } }
.StoryRenuxCard .renuxButton {
-webkit-animation: 1.2s cubic-bezier(0.31, 1, 0.34, 1) 0.5s buttonAnimation forwards;
animation: 1.2s cubic-bezier(0.31, 1, 0.34, 1) 0.5s buttonAnimation forwards;
background-color: #efefef;
border-radius: 8px;
bottom: 0;
display: table;
height: 300px;
position: absolute;
width: 100%; }
.StoryRenuxCard .renuxButtonText {
-webkit-animation: 0.42s cubic-bezier(0.31, 1, 0.34, 1) 1.5s 1 textAnimation forwards;
animation: 0.42s cubic-bezier(0.31, 1, 0.34, 1) 1.5s 1 textAnimation forwards;
display: table-cell;
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
vertical-align: middle;
width: 100%; }
@-webkit-keyframes fadeInOut {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@keyframes fadeInOut {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-webkit-keyframes selectedFadeInOut {
0% {
opacity: 0; }
50% {
opacity: 1; }
100% {
opacity: 0; } }
@keyframes selectedFadeInOut {
0% {
opacity: 0; }
50% {
opacity: 1; }
100% {
opacity: 0; } }
.StoryGamePin.animation {
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-name: fadeInOut;
animation-name: fadeInOut;
border-radius: 6px;
opacity: 0; }
.StoryGamePin.selectedAnimation {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
-webkit-animation-name: selectedFadeInOut;
animation-name: selectedFadeInOut;
border-radius: 6px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
opacity: 0;
position: absolute;
width: 100%;
z-index: -1; }
.StoryGamePin.hoverable {
background-color: #000;
border-radius: 6px;
height: 100%;
opacity: 0;
position: absolute;
width: 100%;
z-index: 1; }
.StoryGamePin.hoverable:hover {
opacity: .2; }
.StoryTopicCard .wrapper {
cursor: pointer;
display: block;
position: relative; }
.StoryTopicCard .card {
background: #efefef;
bottom: 0;
cursor: pointer;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
z-index: -1; }
.StoryTopicCard .card.circle {
border-radius: 50%; }
.StoryTopicCard .card.rounded {
border-radius: 8px; }
.StoryTopicCard .hover {
-webkit-animation: animateIn 0.2s cubic-bezier(0.31, 1, 0.34, 1) forwards;
animation: animateIn 0.2s cubic-bezier(0.31, 1, 0.34, 1) forwards; }
@-webkit-keyframes animateIn {
to {
opacity: 1;
-webkit-transform: scale(1.09, 1.09);
transform: scale(1.09, 1.09); } }
@keyframes animateIn {
to {
opacity: 1;
-webkit-transform: scale(1.09, 1.09);
transform: scale(1.09, 1.09); } }
.StoryTopicCard .wash {
background: #000;
bottom: 0;
left: 0;
opacity: .45;
pointer-events: none;
position: absolute;
right: 0;
top: 0; }
/* stylelint-disable no-duplicate-selectors */
/* common.scss */
.UserNavigateButton.merged {
border-bottom-right-radius: 0 0;
border-top-right-radius: 0 0;
margin-right: -1px; }
.UserNavigateButton .usernameLink {
width: 100%; }
.UserNavigateButton .profileImage {
background-size: 22px 22px;
border-radius: 11px;
height: 22px;
margin-left: 8px;
margin-top: 5px;
overflow: hidden;
width: 22px; }
.UserNavigateButton:active {
background: #e9e9e9;
border-color: #cfcfcf;
box-shadow: none; }
.PinnerProfileMenuButton a:hover {
text-decoration: underline; }
.PinnerProfileMenuButton hr {
display: block; }
/* desktop.scss */
.UserNavigateButton {
background: transparent;
border: none;
height: auto;
margin-right: 0;
width: auto; }
.UserNavigateButton .px2, .UserNavigateButton .SearchForm.guided, .UserNavigateButton .BoardHeader .boardHeaderWrapper, .BoardHeader .UserNavigateButton .boardHeaderWrapper, .UserNavigateButton .BoardInfoBar .infoBarWrapper, .BoardInfoBar .UserNavigateButton .infoBarWrapper, .UserNavigateButton .BulkEditBar .boardBulkEditBar, .BulkEditBar .UserNavigateButton .boardBulkEditBar, .UserNavigateButton .UserProfileHeader.profileHeader .profileImage, .UserProfileHeader.profileHeader .UserNavigateButton .profileImage, .UserNavigateButton .UserProfileHeader.profileHeader .profileInfo, .UserProfileHeader.profileHeader .UserNavigateButton .profileInfo, .UserNavigateButton .UserProfileHeader.profileHeader .titleBar, .UserProfileHeader.profileHeader .UserNavigateButton .titleBar {
padding-left: 6px;
padding-right: 6px; }
.UserNavigateButton .py1, .UserNavigateButton .UserInfoBar.infoBar .tabs ul, .UserInfoBar.infoBar .tabs .UserNavigateButton ul {
padding-bottom: 3px;
padding-top: 3px; }
.UserNavigateButton:focus, .UserNavigateButton:hover {
background: transparent;
box-shadow: none !important; }
.UserNavigateButton .profileName {
display: none; }
.UserNavigateButton em {
width: 20px;
height: 24px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -163px -296px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserNavigateButton em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -114px -292px;
background-size: 399px 382px; } }
.UserNavigateButton:hover em, .UserNavigateButton:focus em {
width: 20px;
height: 24px;
background: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-1x-5d23fe54.png) -119px -296px no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.UserNavigateButton:hover em, .UserNavigateButton:focus em {
background-image: url(https://s.pinimg.com/webapp/style/images/webapp-common-above_the_fold-2x-968902f1.png);
background-position: -177px -292px;
background-size: 399px 382px; } }
@-webkit-keyframes ReactTwoCirclePulserInnerAnim {
0% {
opacity: 0;
-webkit-transform: scale(0.6);
transform: scale(0.6); }
18% {
opacity: .7;
-webkit-transition-timing-function: linear;
transition-timing-function: linear; }
45% {
opacity: .7; }
50% {
-webkit-transform: scale(0.45);
transform: scale(0.45);
-webkit-transition-timing-function: cubic-bezier(0.1, 0.55, 0.95, 0.5);
transition-timing-function: cubic-bezier(0.1, 0.55, 0.95, 0.5); }
55% {
opacity: .7;
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transition-timing-function: linear;
transition-timing-function: linear; }
80% {
opacity: 0;
-webkit-transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
transition-timing-function: cubic-bezier(0.42, 0, 1, 1); }
100% {
opacity: 0;
-webkit-transform: scale(0.6);
transform: scale(0.6); } }
@keyframes ReactTwoCirclePulserInnerAnim {
0% {
opacity: 0;
-webkit-transform: scale(0.6);
transform: scale(0.6); }
18% {
opacity: .7;
-webkit-transition-timing-function: linear;
transition-timing-function: linear; }
45% {
opacity: .7; }
50% {
-webkit-transform: scale(0.45);
transform: scale(0.45);
-webkit-transition-timing-function: cubic-bezier(0.1, 0.55, 0.95, 0.5);
transition-timing-function: cubic-bezier(0.1, 0.55, 0.95, 0.5); }
55% {
opacity: .7;
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transition-timing-function: linear;
transition-timing-function: linear; }
80% {
opacity: 0;
-webkit-transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
transition-timing-function: cubic-bezier(0.42, 0, 1, 1); }
100% {
opacity: 0;
-webkit-transform: scale(0.6);
transform: scale(0.6); } }
@-webkit-keyframes ReactTwoCirclePulserOuterAnim {
0% {
opacity: 0;
-webkit-transform: scale(0.8);
transform: scale(0.8); }
48% {
opacity: 0;
-webkit-transform: scale(0.8);
transform: scale(0.8); }
53% {
opacity: .6;
-webkit-transition-timing-function: linear;
transition-timing-function: linear; }
80% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition-timing-function: linear;
transition-timing-function: linear; }
100% {
opacity: 0;
-webkit-transform: scale(0.8);
transform: scale(0.8); } }
@keyframes ReactTwoCirclePulserOuterAnim {
0% {
opacity: 0;
-webkit-transform: scale(0.8);
transform: scale(0.8); }
48% {
opacity: 0;
-webkit-transform: scale(0.8);
transform: scale(0.8); }
53% {
opacity: .6;
-webkit-transition-timing-function: linear;
transition-timing-function: linear; }
80% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition-timing-function: linear;
transition-timing-function: linear; }
100% {
opacity: 0;
-webkit-transform: scale(0.8);
transform: scale(0.8); } }