.pp-ssb-widget { width: 100%; margin: 0 auto; } .pp-ssb-widget-modern { font: Roboto; color: #707070; } .pp-ssb-widget-classic { font-family: Sans-serif; color: #FFFFFF; } /*Styling for round buttons*/ a.pp-ssb-btn { width: 100%; height: 48px; display: inline-block; text-decoration: none; vertical-align: middle; line-height: 48px; overflow: hidden; border-radius: 50px; } .pp-ssb-widget-include a.pp-ssb-btn { text-align: left; } .pp-ssb-widget-modern a.pp-ssb-btn { color: #707070; margin: 6px 0 6px 0; border: 1px solid #C4C4C4; font: 15px arial, sans-serif; padding-right: 20px; background-position: center; transition: background 0.8s; background-color: #fff; font-size: 80%; } .pp-ssb-widget-modern.pp-ssb-widget-include a.pp-ssb-btn { font-size: 80% !important; } .pp-ssb-widget-classic a.pp-ssb-btn { padding: 0; color: #FFFFFF; margin: 10px 0 10px 0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); font-size: 90%; font-weight: bold; } .pp-ssb-widget-classic.pp-ssb-widget-include a.pp-ssb-btn { font-size: 90% !important; font-weight: bold !important; } /*Styling for square buttons*/ .pp-ssb-btn-sq { width: 100%; height: 48px; display: inline-block; text-decoration: none; vertical-align: middle; line-height: 48px; overflow: hidden; } .pp-ssb-btn-include .pp-ssb-btn-sq { text-align: left; } body .pp-ssb-widget-modern a.pp-ssb-btn-sq { color: #707070; margin: 6px 0 6px 0; border: 1px solid #C4C4C4; font: 15px arial, sans-serif; background-position: center; transition: background 0.8s; background-color: #fff; font-size: 80%; } body .pp-ssb-widget-modern.pp-ssb-widget-include a.pp-ssb-btn-sq { font-size: 80% !important; } body .pp-ssb-widget-classic a.pp-ssb-btn-sq { padding: 0; color: #FFFFFF; margin: 10px 0 10px 0; border-radius: 1px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); font-size: 90%; font-weight: bold; } body .pp-ssb-widget-classic.pp-ssb-widget-include a.pp-ssb-btn-sq { font-size: 90% !important; font-weight: bold !important; } /*Responsive rules, so that buttons don't wrap and the Subscribe Page button is always displayed*/ @media (max-width: 663px) and (min-width: 611px) { a.pp-ssb-btn-sq.horizontal:nth-child(n + 11) { display: none; } } @media (max-width: 611px) and (min-width: 559px) { a.pp-ssb-btn-sq.horizontal:nth-child(n + 10) { display: none; } } @media (max-width: 559px) and (min-width: 507px) { a.pp-ssb-btn-sq.horizontal:nth-child(n + 9) { display: none; } } @media (max-width: 507px) and (min-width: 455px) { a.pp-ssb-btn-sq.horizontal:nth-child(n + 8) { display: none; } } @media (max-width: 455px) and (min-width: 403px) { a.pp-ssb-btn-sq.horizontal:nth-child(n + 7) { display: none; } } @media (max-width: 403px) and (min-width: 351px) { a.pp-ssb-btn-sq.horizontal:nth-child(n + 6) { display: none; } } @media (max-width: 351px) and (min-width: 299px) { a.pp-ssb-btn-sq.horizontal:nth-child(n + 5) { display: none; } } @media (max-width: 299px) and (min-width: 247px) { a.pp-ssb-btn-sq.horizontal:nth-child(n + 4) { display: none; } } @media (max-width: 247px) and (min-width: 195px) { a.pp-ssb-btn-sq.horizontal:nth-child(n + 3) { display: none; } } @media (max-width: 195px) { a.pp-ssb-btn-sq.horizontal:nth-child(n + 2) { display: none; } } /*Responsive rules for square buttons*/ @media (max-width: 992px) and (min-width: 721px) { a.pp-ssb-btn.horizontal:nth-child(n + 11) { display: none; } } @media (max-width: 721px) and (min-width: 659px) { a.pp-ssb-btn.horizontal:nth-child(n + 10) { display: none; } } @media (max-width: 659px) and (min-width: 597px) { a.pp-ssb-btn.horizontal:nth-child(n + 9) { display: none; } } @media (max-width: 597px) and (min-width: 535px) { a.pp-ssb-btn.horizontal:nth-child(n + 8) { display: none; } } @media (max-width: 535px) and (min-width: 473px) { a.pp-ssb-btn.horizontal:nth-child(n + 7) { display: none; } } @media (max-width: 473px) and (min-width: 411px) { a.pp-ssb-btn.horizontal:nth-child(n + 6) { display: none; } } @media (max-width: 411px) and (min-width: 349px) { a.pp-ssb-btn.horizontal:nth-child(n + 5) { display: none; } } @media (max-width: 349px) and (min-width: 287px) { a.pp-ssb-btn.horizontal:nth-child(n + 4) { display: none; } } @media (max-width: 287px) and (min-width: 225px) { a.pp-ssb-btn.horizontal:nth-child(n + 3) { display: none; } } @media (max-width: 225px) { a.pp-ssb-btn.horizontal:nth-child(n + 2) { display: none; } } a.pp-ssb-btn-sq.horizontal:last-child, a.pp-ssb-btn.horizontal:last-child { display:inline-block; } body .sidebar .widget .pp-ssb-widget-classic a:link, body .sidebar .widget .pp-ssb-widget-classic a:visited, body .sidebar .widget .pp-ssb-widget-classic a:active, body .sidebar .widget .pp-ssb-widget-classic a:hover, body .pp-ssb-widget-classic a.pp-ssb-btn:link, body .pp-ssb-widget-classic a.pp-ssb-btn:visited, body .pp-ssb-widget-classic a.pp-ssb-btn:active, body .pp-ssb-widget-classic a.pp-ssb-btn:hover { text-decoration: none; color: #FFFFFF; } body .sidebar .widget .pp-ssb-widget-classic.pp-ssb-widget-include a:link, body .sidebar .widget .pp-ssb-widget-classic.pp-ssb-widget-include a:visited, body .sidebar .widget .pp-ssb-widget-classic.pp-ssb-widget-include a:active, body .sidebar .widget .pp-ssb-widget-classic.pp-ssb-widget-include a:hover, body .pp-ssb-widget-classic.pp-ssb-widget-include a.pp-ssb-btn:link, body .pp-ssb-widget-classic.pp-ssb-widget-include a.pp-ssb-btn:visited, body .pp-ssb-widget-classic.pp-ssb-widget-include a.pp-ssb-btn:active, body .pp-ssb-widget-classic.pp-ssb-widget-include a.pp-ssb-btn:hover { text-decoration: none !important; color: #FFFFFF !important; } /*Background colors for classic buttons*/ .pp-ssb-widget-dark a, .pp-ssb-widget-classic a { background-color: #222222; } .pp-ssb-widget-classic a.pp-ssb-itunes { background-color: #732BBE; } .pp-ssb-widget-classic a.pp-ssb-email { background-color: #337EC9; } .pp-ssb-widget-classic a.pp-ssb-stitcher { background-color: #197195; } .pp-ssb-widget-classic a.pp-ssb-tunein { background-color: #2CB6A8; } .pp-ssb-widget-classic a.pp-ssb-gp { background-color: #db3236; } .pp-ssb-widget-classic a.pp-ssb-spotify { background-color: #1db954; } .pp-ssb-widget-classic a.pp-ssb-android { background-color: #6AB344; } .pp-ssb-widget-classic a.pp-ssb-iheartradio { background-color: #960d16; } .pp-ssb-widget-classic a.pp-ssb-deezer { background-color: #007feb; } .pp-ssb-widget-classic a.pp-ssb-pandora { background-color: #3668ff; } .pp-ssb-widget-classic a.pp-ssb-blubrry { background-color: #2278cf; } .pp-ssb-widget-classic a.pp-ssb-rss { background-color: #FF8800; } .pp-ssb-widget-modern a .pp-ssb-text { position: relative; top: 4px; } /*Ripple effect in modern buttons*/ .pp-ssb-widget-modern a.pp-ssb-btn:hover, .pp-ssb-widget-modern a.pp-ssb-btn-sq:hover { background: #ebebeb radial-gradient(circle, transparent 1%, #ebebeb 1%) center/15000%; color: #444444; } /*Background rules for modern buttons*/ .pp-ssb-widget-modern .pp-ssb-itunes.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-itunes.pp-ssb-btn-sq:active { background-color: #AB42DF; background-size: 100%; transition: background 0s; } .pp-ssb-widget-modern .pp-ssb-android.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-android.pp-ssb-btn-sq:active { background-color: #75BA26; background-size: 100%; transition: background 0s; } .pp-ssb-widget-modern .pp-ssb-email.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-email.pp-ssb-btn-sq:active { background-color: #018C8B; background-size: 100%; transition: background 0s; } .pp-ssb-widget-modern .pp-ssb-gp.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-gp.pp-ssb-btn-sq:active { background-color: #F9BA01; background-size: 100%; transition: background 0s; } .pp-ssb-widget-modern .pp-ssb-stitcher.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-stitcher.pp-ssb-btn-sq:active { background-color: #2B91C9; background-size: 100%; transition: background 0s; } .pp-ssb-widget-modern .pp-ssb-tunein.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-tunein.pp-ssb-btn-sq:active { background-color: #1C1F3D; background-size: 100%; transition: background 0s; } .pp-ssb-widget-modern .pp-ssb-spotify.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-spotify.pp-ssb-btn-sq:active { background-color: #3EB559; background-size: 100%; transition: background 0s; } .pp-ssb-widget-modern .pp-ssb-iheartradio.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-iheartradio.pp-ssb-btn-sq:active { background-color: #960d16; background-size: 100%; transition: background 0s; } .pp-ssb-widget-modern .pp-ssb-deezer.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-deezer.pp-ssb-btn-sq:active { background-color: #007feb; background-size: 100%; transition: background 0s; } .pp-ssb-widget-modern .pp-ssb-pandora.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-pandora.pp-ssb-btn-sq:active { background-color: #3668ff; background-size: 100%; transition: background 0s; } .pp-ssb-widget-modern .pp-ssb-blubrry.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-blubrry.pp-ssb-btn-sq:active { background-color: #2278cf; background-size: 100%; transition: background 0s; } .pp-ssb-widget-modern .pp-ssb-rss.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-rss.pp-ssb-btn-sq:active { background-color: #FF6600; background-size: 100%; transition: background 0s; } .pp-ssb-widget-modern .pp-ssb-more.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-more.pp-ssb-btn-sq:active { background-color: #333333; background-size: 100%; transition: background 0s; } .horizontal .pp-ssb-text { display: none; } a.pp-ssb-btn.horizontal, a.pp-ssb-btn-sq.horizontal { width: auto; } a.pp-ssb-btn.horizontal, a.pp-ssb-btn-sq.horizontal { padding-right: 0; } .pp-ssb-widget-include a.pp-ssb-btn.horizontal, .pp-ssb-widget-include a.pp-ssb-btn-sq.horizontal { padding-right: 0 !important; } a.pp-ssb-btn.horizontal { margin-right: 10px; } /*Settings for buttons, including which sprite to use for the icons*/ .pp-ssb-ic { display: inline-block; width: 50px; height: 38px; margin-top: 2px; border: 0; vertical-align: middle; padding-left: 15px; background-repeat: no-repeat; background-size: 50px; } .pp-ssb-widget-modern a .pp-ssb-ic { background-image: url('../images/modern_icon_sprite.svg'); } .pp-ssb-widget-classic a .pp-ssb-ic { margin-right: 2px; background-image: url('../images/white_logos.svg'); } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */ .pp-ssb-widget-modern a .pp-ssb-ic { background-image: url('../images/modern-icon-sprite.png'); } .pp-ssb-widget-classic a .pp-ssb-ic { background-image: url('../images/white_logos.png'); width: 50px; background-size: 50px; } } /*Sprite background positions for classic buttons*/ .pp-ssb-widget-classic .pp-ssb-itunes .pp-ssb-ic { background-position: 0 -10px; } .pp-ssb-widget-classic .pp-ssb-rss .pp-ssb-ic { background-position: 0 -360px; } .pp-ssb-widget-classic .pp-ssb-email .pp-ssb-ic { background-position: 0 -110px; } .pp-ssb-widget-classic .pp-ssb-android .pp-ssb-ic { background-position: 0 -60px; } .pp-ssb-widget-classic .pp-ssb-stitcher .pp-ssb-ic { background-position: 0 -210px; } .pp-ssb-widget-classic .pp-ssb-tunein .pp-ssb-ic { background-position: 0 -260px; } .pp-ssb-widget-classic .pp-ssb-spotify .pp-ssb-ic { background-position: 0 -310px; } .pp-ssb-widget-classic .pp-ssb-gp .pp-ssb-ic { background-position: 0 -160px; } .pp-ssb-widget-classic .pp-ssb-more .pp-ssb-ic { background-position: 0 -410px; } .pp-ssb-widget-classic .pp-ssb-iheartradio .pp-ssb-ic { background-position: 0 -460px; } .pp-ssb-widget-classic .pp-ssb-deezer .pp-ssb-ic { background-position: 0 -510px; } .pp-ssb-widget-classic .pp-ssb-pandora .pp-ssb-ic { background-position: 0 -560px; } .pp-ssb-widget-classic .pp-ssb-blubrry .pp-ssb-ic { background-position: 0 -610px; } /*Sprite background positions for modern buttons*/ .pp-ssb-widget-modern .pp-ssb-itunes.pp-ssb-btn-sq:not(.horizontal) { border-left: 3px solid #AB42DF; padding-right: 10px; } .pp-ssb-widget-modern .pp-ssb-itunes .pp-ssb-ic { background-position: 0 -5px; } .pp-ssb-widget-modern .pp-ssb-android.pp-ssb-btn-sq:not(.horizontal) { border-left: 3px solid #75BA26; padding-right: 10px; } .pp-ssb-widget-modern .pp-ssb-android .pp-ssb-ic { background-position: 0 -55px; } .pp-ssb-widget-modern .pp-ssb-email.pp-ssb-btn-sq:not(.horizontal) { border-left: 3px solid #018C8B; padding-right: 10px; } .pp-ssb-widget-modern .pp-ssb-email .pp-ssb-ic { background-position: 0 -106px; } .pp-ssb-widget-modern .pp-ssb-gp.pp-ssb-btn-sq:not(.horizontal) { border-left: 3px solid #F9BA01; padding-right: 10px; } .pp-ssb-widget-modern .pp-ssb-gp .pp-ssb-ic { background-position: 0 -155px; } .pp-ssb-widget-modern .pp-ssb-stitcher.pp-ssb-btn-sq:not(.horizontal) { border-left: 3px solid #2B91C9; padding-right: 10px; } .pp-ssb-widget-modern .pp-ssb-stitcher .pp-ssb-ic { background-position: 0 -205px; } .pp-ssb-widget-modern .pp-ssb-tunein.pp-ssb-btn-sq:not(.horizontal) { border-left: 3px solid #1C1F3D; padding-right: 10px; } .pp-ssb-widget-modern .pp-ssb-tunein .pp-ssb-ic { background-position: 0 -255px; } .pp-ssb-widget-modern .pp-ssb-spotify.pp-ssb-btn-sq:not(.horizontal) { border-left: 3px solid #3EB559; padding-right: 10px; } .pp-ssb-widget-modern .pp-ssb-spotify .pp-ssb-ic { background-position: 0 -307px; } .pp-ssb-widget-modern .pp-ssb-iheartradio.pp-ssb-btn-sq:not(.horizontal) { border-left: 3px solid #960d16; padding-right: 10px; } .pp-ssb-widget-modern .pp-ssb-iheartradio .pp-ssb-ic { background-position: 0 -456px; } .pp-ssb-widget-modern .pp-ssb-deezer.pp-ssb-btn-sq:not(.horizontal) { border-left: 3px solid #007feb; padding-right: 10px; } .pp-ssb-widget-modern .pp-ssb-deezer .pp-ssb-ic { background-position: 0 -507px; } .pp-ssb-widget-modern .pp-ssb-pandora.pp-ssb-btn-sq:not(.horizontal) { border-left: 3px solid #3668ff; padding-right: 10px; } .pp-ssb-widget-modern .pp-ssb-pandora .pp-ssb-ic { background-position: 0 -555px; } .pp-ssb-widget-modern .pp-ssb-blubrry.pp-ssb-btn-sq:not(.horizontal) { border-left: 3px solid #2278cf; padding-right: 10px; } .pp-ssb-widget-modern .pp-ssb-blubrry .pp-ssb-ic { background-position: 0 -603px; } .pp-ssb-widget-modern .pp-ssb-rss.pp-ssb-btn-sq:not(.horizontal) { border-left: 3px solid #FF6600; padding-right: 10px; } .pp-ssb-widget-modern .pp-ssb-rss .pp-ssb-ic { background-position: 0 -355px; } .pp-ssb-widget-modern .pp-ssb-more.pp-ssb-btn-sq:not(.horizontal) { border-left: 3px solid #333333; padding-right: 10px; } .pp-ssb-widget-modern .pp-ssb-more .pp-ssb-ic { background-position: 0 -405px; } .pp-ssb-widget-classic .pp-ssb-btn::after, .pp-ssb-widget-classic .pp-ssb-btn-sq::after { content: none; } .pp-ssb-widget-modern .pp-ssb-btn::after, .pp-ssb-widget-modern .pp-ssb-btn-sq::after { content: url("../images/arrow.svg");; width: 20px; display: inline-block; float: right; margin-top: 16px; } .horizontal.pp-ssb-btn::after, .horizontal.pp-ssb-btn-sq::after { content: none; } .pp-ssb-nm { line-height: 46px; padding-left: 10px; } .go img { height: 8px; width: 30px; float: right; margin-top: 20px; margin-right: 10px; } /* Retina-specific stuff here */ @media only screen and (-webkit-min-device-pixel-ratio: 2.0), only screen and (min--moz-device-pixel-ratio: 2.0), only screen and (-o-min-device-pixel-ratio: 200/100), only screen and (min-device-pixel-ratio: 2.0) { .pp-sub-ic { background-image: url('../images/spriteRetina2.png'); } }