Created
November 2, 2012 14:16
-
-
Save rbmntjs/4001607 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @charset "UTF-8"; | |
| @import "http://cloud.webtype.com/css/2d8afe4f-a41c-42a1-b9c8-02a4f964fde7.css"; | |
| /* | |
| contraclassics ⬤ | |
| Authored April-September 2012 by Rob Mientjes and Magnus Holm | |
| JavaScript magic by Magnus Holm | |
| Ruby on Rails fun times by Magnus Holm and Runar Svendsen | |
| Design by Rob Mientjes under the art direction of Jonas Feiring and Arne Fismen | |
| -- | |
| Nordaaker AS, for ContraClassics | |
| Table of contents | |
| - Reset and web fonts | |
| - General styling | |
| - Layout logic | |
| - Form styling | |
| - Header | |
| - Footer | |
| - Front page (logged out) | |
| - Profile page | |
| - Gift page | |
| - Player | |
| - Playlist sidebar | |
| - Common main areas | |
| - Recordings area | |
| - Recordings list | |
| - Browser elements | |
| - Magazine (browser front page version) | |
| - Column browser | |
| - Inline bar and actionable elements | |
| - 'Static' pages | |
| - Error pages | |
| - Media queries | |
| - Fallbacks (all IE<9) | |
| */ | |
| .problem::before, select, .password-container .passwordcheck, .pitch #pitch-play.action, a.gifting::before, a.purchases::before, .account .purchases-icon::before, .available-downloads .action, .gift .hero p.intro, .gift-landing .hero h1::before, .tardis .action, #header-player .prev, | |
| #header-player .next, #header-player .action, .expanded-player, .track-list li.track-is-playing::before, .buy-toggle::before, .remove-lens, .recording-list .play, .recording-list .favorite, .lens-selector .lens.select.active a::after { | |
| background: transparent url(images/sitewide/sprite_common.svg?7384a040b9) no-repeat 0 0; } | |
| header h1 { | |
| background: transparent url(images/sitewide/sprite_logo.svg?2be0c37ace) no-repeat 0 0; } | |
| .pitch h2, .pitch #pitch-play.action.loading { | |
| background: transparent url(images/sitewide/buffer-sprite-large.svg?8eda7f2baa) no-repeat 0 0; } | |
| #header-player, #header-player .action.loading { | |
| background: transparent url(images/sitewide/buffer-sprite-small.svg?39f38bc2f2) no-repeat 0 0; } | |
| .select h2.icon { | |
| background: transparent url(images/browser/icon-sprite.svg?435deac353) no-repeat 0 0; } | |
| .select.feature { | |
| background: transparent url(images/browser/feature-illustrations-biddulph.svg?8f8b349658) no-repeat 0 0; } | |
| .select.feature.feature-picks { | |
| background: transparent url(images/browser/feature-illustrations-feature.svg?017d485934) no-repeat 0 0; } | |
| .select.feature.feature-popular { | |
| background: transparent url(images/browser/feature-illustrations-popular.svg?30bc9ff101) no-repeat 0 0; } | |
| p.no-faves { | |
| background: transparent url(images/one-off/no-faves.svg?df5ebd0f8f) no-repeat 0 0; } | |
| #expanded-player .limit-explain { | |
| background: transparent url(images/one-off/info.svg?e978b1fc15) no-repeat 0 0; } | |
| .error .hero h1 { | |
| background: transparent url(images/one-off/alert-big.svg?2de04d9421) no-repeat 0 0; } | |
| .magazine.cover .hero h1::before, .magazine.archive .hero h1::before, .magazine.topics .hero h1::before { | |
| background: transparent url(images/magazine/cover_logo-dot.svg?46a286f658) no-repeat 0 0; } | |
| .magazine.cover .hero h1 { | |
| background: transparent url(images/magazine/cover_headmast.svg?8b702a883a) no-repeat 0 0; } | |
| /* | |
| Reset and web fonts | |
| Web fonts by | |
| Jackson Cavanaugh; okaytype.com | |
| Kai Bernau; carvalho-bernau.com | |
| Supplied technically by | |
| webtype.com | |
| commercialtype.com | |
| */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| @font-face { | |
| /* | |
| Typeface by Kai Bernau, licensed from | |
| http://commercialtype.com/ | |
| */ | |
| font-family: "Lyon Text Web"; | |
| src: url("fonts/Lyon Text Web-Bold.eot"); | |
| src: url("fonts/Lyon Text Web-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/Lyon Text Web-Bold.woff") format("woff"); | |
| font-weight: 500; | |
| font-style: normal; | |
| font-stretch: normal; } | |
| @font-face { | |
| /* | |
| Silly utility typeface to show some simple inline icons | |
| */ | |
| font-family: "Contra"; | |
| src: url("fonts/contra.eot"); | |
| src: url("fonts/contra.eot?#iefix") format("embedded-opentype"), url("fonts/contra.woff") format("woff"); | |
| font-weight: 300; | |
| font-style: normal; | |
| font-stretch: normal; } | |
| /* | |
| General | |
| Default for many things, like type basics | |
| */ | |
| html { | |
| font: normal 16px/1.65 "Alright Sans", "Lucida Grande", "Lucida Sans", sans-serif; | |
| display: block !important; | |
| font-family: "Alright Sans", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; } | |
| body { | |
| background: #fff; | |
| color: #222222; | |
| font: normal 14px/1.65 "Alright Sans", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: 300; | |
| font-family: "Alright Sans", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| -moz-font-feature-settings: "onum" 1, "kern" 1, "liga" 1; | |
| -moz-font-feature-settings: "onum=1, kern=1, liga=1"; | |
| -ms-font-feature-settings: "onum" 1, "kern" 1, "liga" 1; | |
| -o-font-feature-settings: "onum" 1, "kern" 1, "liga" 1; | |
| -webkit-font-feature-settings: "onum" 1, "kern" 1, "liga" 1; | |
| font-feature-settings: "onum" 1, "kern" 1, "liga" 1; | |
| text-rendering: optimizeLegibility; } | |
| strong { | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; } | |
| em { | |
| font-family: "Alright Sans Light", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: italic; } | |
| a { | |
| color: inherit; | |
| outline: none; } | |
| h1 { | |
| font-size: 28px; | |
| font-family: "Lyon Text Web", "Georgia", "Times New Roman", serif; | |
| font-weight: 500; } | |
| h2 { | |
| margin: 14px 0 0; | |
| font-size: 23.9988px; | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; } | |
| h2.announce { | |
| font-family: "Lyon Text Web", "Georgia", "Times New Roman", serif; | |
| font-weight: 500; | |
| font-size: 28px; | |
| margin-bottom: 14px; } | |
| h3 { | |
| font-size: 16px; | |
| margin: .4em 0 .6em; | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; } | |
| h4 { | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; } | |
| h2 a, | |
| h3 a { | |
| text-decoration: none; } | |
| p, li, dt, dd { | |
| line-height: 1.65; } | |
| p { | |
| margin: 0 0 23.1px; } | |
| .main p { | |
| max-width: 38em; } | |
| blockquote { | |
| padding: 0 23.1px; | |
| color: #666666; } | |
| hr { | |
| border: 1px solid #eee; | |
| border-width: 0 0 1px; | |
| margin: .5em 0 .5em; } | |
| img, a img { | |
| -ms-interpolation-mode: bicubic; | |
| border: none; } | |
| q { | |
| font-family: "Alright Sans Light", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: italic; } | |
| q::before, | |
| q::after { | |
| content: " "; } | |
| ::-webkit-selection, | |
| ::-moz-selection, | |
| ::selection { | |
| background: rgba(0, 0, 0, 0.15); } | |
| small { | |
| color: #999; } | |
| .problem { | |
| padding-top: .3em; | |
| padding-bottom: .3em; | |
| position: relative; | |
| padding-left: 32px; } | |
| .problem::before { | |
| position: absolute; | |
| display: inline-block; | |
| left: 0; | |
| top: 50%; | |
| margin-top: -14px; | |
| width: 28px; | |
| height: 28px; | |
| content: " "; | |
| background: transparent url(images/sitewide/sprite_common.svg?7384a040b9) no-repeat -30px -567px; } | |
| .general-page-error { | |
| width: 80%; | |
| margin: 1em auto 1em 21.34409%; | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; } | |
| .spinner { | |
| text-indent: -99em; | |
| overflow: hidden; | |
| display: block; } | |
| ul { | |
| list-style: none; } | |
| nav { | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; } | |
| nav.inline ul { | |
| overflow: hidden; } | |
| nav.inline li { | |
| display: inline; | |
| list-style: none; | |
| margin: 0 1em 0 0; } | |
| nav.inline.bullets li::before { | |
| content: "·"; | |
| padding-right: 1em; } | |
| nav.inline.bullets li:first-child::before { | |
| content: " "; | |
| padding-right: 0; } | |
| nav li a { | |
| text-decoration: none; } | |
| nav li.active { | |
| color: #a8202d; } | |
| .whisper { | |
| opacity: .5; } | |
| /* | |
| Layout logic | |
| Column and position basics | |
| */ | |
| .main { | |
| width: 80%; | |
| padding-left: 1.34409%; | |
| padding-right: 1.34409%; | |
| float: left; | |
| margin-right: -100%; | |
| margin-left: 20%; } | |
| .sidebar { | |
| width: 20%; | |
| padding-left: 1.34409%; | |
| padding-right: 1.34409%; | |
| float: left; | |
| margin-right: -100%; | |
| margin-left: 0; } | |
| .container, | |
| #player, | |
| .player-view { | |
| max-width: 96em; | |
| margin: 0 auto; | |
| padding-left: 1.34409%; | |
| padding-right: 1.34409%; | |
| position: relative; } | |
| .container::after { | |
| display: table; | |
| clear: both; | |
| content: " "; } | |
| .front .container { | |
| max-width: 80em; } | |
| .lens-row { | |
| overflow: hidden; | |
| margin-bottom: 10px; } | |
| .split { | |
| float: left; | |
| margin: 0 1.3% 1em 0; } | |
| .split.half { | |
| width: 47%; } | |
| /* | |
| Form styling | |
| Default form setups | |
| */ | |
| form { | |
| position: relative; } | |
| fieldset { | |
| border: none; | |
| font-size: 1.142em; } | |
| fieldset p { | |
| margin: 0 0 .25em; } | |
| fieldset p::after { | |
| display: table; | |
| clear: both; | |
| content: " "; } | |
| input, | |
| textarea, | |
| select { | |
| border: 1px solid #bbb; | |
| background: #fff; | |
| padding: 5px 6px; | |
| font-size: inherit; | |
| font-family: inherit; | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| border-radius: 3px; | |
| position: relative; } | |
| textarea { | |
| height: 6em; } | |
| select { | |
| padding-right: 2em; | |
| background-position: 75% -770px; } | |
| input.error { | |
| border-color: #eb1a39; } | |
| .password-container { | |
| position: relative; | |
| display: block; } | |
| .password-container::after { | |
| display: table; | |
| clear: both; | |
| content: " "; } | |
| .password-container input { | |
| float: left; } | |
| .password-container .passwordcheck { | |
| position: relative; | |
| display: block; | |
| float: left; | |
| width: 1.7em; | |
| height: 1.7em; | |
| margin-top: 2px; | |
| margin-left: -1.85em; | |
| background: rgba(255, 255, 255, 0.75); | |
| border-left: 1px solid #eee; | |
| background-position: -124px -220px; } | |
| .password-container .passwordcheck.weak { | |
| background-position: -97px -220px; } | |
| .password-container .passwordcheck.average { | |
| background-position: -97px -255px; } | |
| .password-container .passwordcheck.strong { | |
| background-position: -97px -290px; } | |
| .password-container .passwordcheck.matching { | |
| background-position: -124px -220px; } | |
| .password-container .passwordcheck.matching.matches { | |
| background-position: -124px -255px; } | |
| form p { | |
| clear: left; } | |
| form .error { | |
| height: auto; | |
| width: auto; | |
| float: left; | |
| color: #eb1a39; | |
| padding: 2px 6px; | |
| margin: 0 .35em .35em 0; | |
| border: 1px solid #eee; | |
| border-radius: 3px; } | |
| button, | |
| .button { | |
| display: inline-block; | |
| border: none; | |
| padding: 8px 32px 5px; | |
| background: #eb1a39; | |
| color: #fff; | |
| font-size: inherit; | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| text-decoration: none; | |
| border-radius: 3px; } | |
| button.cancel, | |
| .button.cancel { | |
| background-color: #aaa; } | |
| button.big, | |
| .button.big { | |
| text-align: center; | |
| padding: 16px 32px 13px; | |
| font-size: 1.2em; } | |
| button.buy-now, | |
| .button.buy-now { | |
| margin-left: .75em; | |
| padding: 3px 8px 1px; | |
| height: auto; | |
| line-height: 1.3; | |
| font-family: "Alright Sans", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| background: #fff; | |
| border: 1px solid #eee; | |
| font-size: .9em; | |
| color: #666; | |
| border-radius: 50px; } | |
| button.buy-now .price, | |
| .button.buy-now .price { | |
| border-right: 1px solid #eee; | |
| padding-right: 8px; | |
| margin-right: 5px; | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; } | |
| p label { | |
| display: block; | |
| margin: 0 0 .25em; | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; } | |
| p input { | |
| margin: 0 0 1em; } | |
| [disabled] { | |
| opacity: .6; | |
| cursor: default; } | |
| /* | |
| Header | |
| Styling the sitewide header bar | |
| */ | |
| /* STAGING */ | |
| /* For internal use */ | |
| .staging::before { | |
| display: block; | |
| content: " "; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 3px; | |
| background: url(images/sitewide/staging.svg?6dc470a402) repeat-x 0 0; } | |
| /**/ | |
| header { | |
| padding-top: 5px; | |
| min-height: 44px; | |
| margin: 0 auto 3em; | |
| max-width: 96em; | |
| padding-left: 1.34409%; | |
| padding-right: 1.34409%; } | |
| header::after { | |
| display: table; | |
| clear: both; | |
| content: " "; } | |
| header .container { | |
| min-height: 46px; | |
| border-bottom: 1px solid #eee; | |
| padding: 0; } | |
| header h1 { | |
| position: absolute; | |
| width: 136px; | |
| float: left; | |
| margin-right: -100%; | |
| height: 44px; | |
| margin: 0; | |
| background-position: 0 50%; } | |
| header h1 a { | |
| text-indent: -999em; | |
| text-decoration: none; | |
| overflow: hidden; | |
| display: block; | |
| width: 136px; | |
| height: 44px; } | |
| header nav { | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; } | |
| header nav#site-nav { | |
| float: left; | |
| width: 40%; | |
| margin-right: -100%; | |
| margin-left: 20%; | |
| padding-left: 1.34409%; | |
| padding-right: 1.34409%; } | |
| header nav li { | |
| display: inline; | |
| font-size: 1em; } | |
| header nav#personal-nav { | |
| text-align: right; | |
| float: right; | |
| margin-right: 15px; | |
| width: 30%; } | |
| header nav#personal-nav p { | |
| margin-bottom: 0; } | |
| header nav a { | |
| color: #777; | |
| text-decoration: none; | |
| height: 2.178em; | |
| line-height: 45px; | |
| padding: 3px 0; | |
| display: inline; | |
| margin: 5px 10px 0 0; } | |
| header nav li.active a { | |
| color: #111; } | |
| header #signin { | |
| display: none; | |
| position: absolute; | |
| right: 1.34409%; | |
| top: 7px; | |
| background: #fff; } | |
| #signin form p { | |
| float: left; | |
| clear: none; | |
| width: 12em; | |
| margin-bottom: 0; | |
| text-align: left; } | |
| #signin form p.remind { | |
| width: 16em; } | |
| #signin p.submit { | |
| width: auto; } | |
| #signin p input { | |
| width: 94%; | |
| padding: 3px 4px; | |
| font-family: "Alright Sans", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| margin-bottom: 0; } | |
| #signin p button { | |
| margin-top: 1.9em; | |
| padding: 5px 16px 2px; | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; } | |
| #signin .error { | |
| display: block; | |
| width: 98%; | |
| position: absolute; | |
| bottom: -2.5em; | |
| text-align: left; | |
| padding: 3px 5px 2px; | |
| border: 1px solid #f3788a; | |
| border-radius: 3px; } | |
| #signin .error::after { | |
| display: table; | |
| clear: both; | |
| content: " "; } | |
| #signin .error p, #signin .error form, #signin .error fieldset, #signin .error button { | |
| display: inline; } | |
| #signin .error form, #signin .error fieldset { | |
| margin: 0; | |
| padding: 0; } | |
| #signin .error form button { | |
| margin: 0 0 0 .5em; | |
| padding: .3em 10px .1em; | |
| background-color: #bbb; } | |
| .short-message { | |
| padding: .7em 0 .4em; | |
| text-align: center; | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| border-bottom: 5px solid #eadb9c; | |
| background: #fff3c2; } | |
| /* | |
| Footer | |
| Styling the sitewide footer | |
| */ | |
| #site-footer { | |
| clear: both; | |
| padding: 8em 0 5em; | |
| color: #555; } | |
| #site-footer::after { | |
| display: table; | |
| clear: both; | |
| content: " "; } | |
| #site-footer a { | |
| text-decoration: none; } | |
| .one-column:first-child { | |
| margin-left: 20%; } | |
| .one-column { | |
| width: 20%; | |
| padding-left: 1.34409%; | |
| padding-right: 1.34409%; | |
| float: left; } | |
| .one-column li { | |
| list-style: none; | |
| line-height: 1.65; } | |
| .one-column h3 { | |
| font-size: 1em; | |
| margin: 0; } | |
| #site-footer p.legal { | |
| clear: both; | |
| margin-left: 20%; | |
| padding-left: 1.34409%; | |
| padding-right: 1.34409%; | |
| padding-top: 2em; | |
| color: #999; | |
| font-size: 1em; } | |
| #site-footer p.legal a { | |
| display: inline; | |
| margin-left: 1em; | |
| text-decoration: underline; } | |
| /* | |
| Front page | |
| Front page styling for logged-out users | |
| */ | |
| .hero h1 { | |
| margin: 1em auto; | |
| max-width: 9em; | |
| font-size: 4em; | |
| line-height: 1.25; | |
| font-family: "Lyon Text Web", "Georgia", "Times New Roman", serif; | |
| font-weight: 500; | |
| text-align: center; } | |
| .hero .intro { | |
| width: 50%; | |
| margin-left: 25%; | |
| font-size: 1.25rem; | |
| line-height: 2; | |
| text-align: center; | |
| margin-bottom: 0; } | |
| .hero .intro .button { | |
| line-height: 1.5; | |
| margin-top: 1em; } | |
| .hero .intro .intro + .intro { | |
| margin-bottom: 23.1px; } | |
| .working-on-it .hero h1 { | |
| margin-top: 2em; | |
| max-width: 12em; } | |
| .working-on-it .hero .intro { | |
| min-height: 130px; | |
| text-align: left; | |
| padding-left: 150px; | |
| background: url(images/one-off/working.svg?fcd6024ea8) no-repeat 0 50%; } | |
| .pitch { | |
| margin: 8em 0 4em; } | |
| .pitch h2 { | |
| font-size: 2rem; | |
| line-height: 1.25; | |
| text-align: center; | |
| background-position: -10em 10em; } | |
| .pitch #pitch-play.action { | |
| display: block; | |
| width: 100px; | |
| height: 100px; | |
| text-indent: -999em; | |
| overflow: hidden; | |
| margin: 3em auto; | |
| background-position: 0 -350px; } | |
| .pitch #pitch-play.action.loading { | |
| background-position: 0 0; } | |
| .pitch #pitch-play.action.playing { | |
| background-position: 0 -451px; } | |
| #pitch-work { | |
| margin: 0 auto; | |
| text-align: center; | |
| font-size: 1.7em; | |
| line-height: 1.65; } | |
| #pitch-work strong { | |
| display: block; } | |
| #pitch-work span { | |
| display: block; | |
| font-size: 14px; | |
| line-height: 1.8; | |
| max-width: 21em; | |
| margin: .5em auto 0; | |
| color: #888; } | |
| #signup { | |
| margin: 6em 0; | |
| height: 24em; } | |
| #signup .container { | |
| border-top: 1px solid #eb1a39; } | |
| #signup h2 { | |
| font-size: 2rem; | |
| margin: 2em 0 1.5em 20%; | |
| padding-left: 1.34409%; | |
| padding-right: 1.34409%; } | |
| #signup fieldset { | |
| width: 60%; | |
| float: left; | |
| margin-right: -100%; | |
| margin-left: 20%; | |
| padding-left: 1.34409%; | |
| padding-right: 1.34409%; } | |
| #signup input { | |
| width: 100%; | |
| max-width: 24em; } | |
| #signup fieldset.submitters { | |
| width: 80%; } | |
| #signup .submitters div { | |
| width: 37.5%; | |
| padding-top: 1.5em; | |
| float: left; | |
| margin-right: 5%; | |
| padding-left: 1.34409%; | |
| padding-right: 1.34409%; } | |
| .submitters div { | |
| margin: 1.5em 0 .5em; | |
| line-height: 1.5; | |
| display: block; | |
| position: relative; } | |
| .submitters p { | |
| margin: 0 10px 1.5em 0; } | |
| #signup .submitters .submit-free { | |
| width: 40%; | |
| padding-right: 3%; | |
| border-right: 1px solid #ccc; } | |
| .submitters .submit-free::after { | |
| content: "or"; | |
| position: absolute; | |
| right: -1em; | |
| top: 50%; | |
| margin-top: -1em; | |
| width: 2em; | |
| height: 2em; | |
| text-align: center; | |
| line-height: 2.1em; | |
| background: #fff; | |
| color: #999; } | |
| .submitters button { | |
| margin-top: .5em; } | |
| #payment-options { | |
| position: relative; | |
| background: #fff; | |
| width: 60%; | |
| margin-left: 20%; | |
| padding-left: 1.34409%; | |
| padding-right: 1.34409%; | |
| z-index: 50; | |
| display: none; } | |
| #payment-options fieldset { | |
| margin: 0; | |
| padding: 0; } | |
| #payment-options p { | |
| font-size: 1rem; | |
| margin-bottom: 1em; } | |
| #payment-options p span { | |
| display: block; | |
| margin-bottom: .5em; } | |
| #payment-options button { | |
| margin-top: 1em; } | |
| #payment-options p.button-free, | |
| #payment-options p.button-subscribe { | |
| display: none; } | |
| .container.free #signup-data, .container.subscribe #signup-data { | |
| display: none; } | |
| .container.free #payment-options, .container.free #payment-options p.button-free, | |
| .container.subscribe #payment-options, .container.subscribe #payment-options p.button-subscribe { | |
| display: block; } | |
| /* | |
| Profile page | |
| */ | |
| .account .main.accounting { | |
| clear: both; } | |
| .account .change-link { | |
| text-decoration: none; | |
| opacity: .6; } | |
| .account .avatar img { | |
| width: 65px; | |
| height: 65px; | |
| display: block; | |
| margin: .3em 0; | |
| float: right; | |
| border-radius: 2px; } | |
| .account .avatar .change-link { | |
| display: block; | |
| text-align: center; } | |
| .account .main { | |
| margin-bottom: 4em; } | |
| a.gifting { | |
| color: #eb1a39; | |
| text-decoration: none; | |
| position: relative; | |
| padding-left: 32px; } | |
| a.gifting::before { | |
| position: absolute; | |
| display: inline-block; | |
| left: 0; | |
| top: 50%; | |
| margin-top: -14px; | |
| width: 28px; | |
| height: 28px; | |
| content: " "; | |
| background: transparent url(images/sitewide/sprite_common.svg?7384a040b9) no-repeat 0 -633px; } | |
| a.purchases { | |
| text-decoration: underline; | |
| position: relative; | |
| padding-left: 32px; } | |
| a.purchases::before { | |
| position: absolute; | |
| display: inline-block; | |
| left: 0; | |
| top: 50%; | |
| margin-top: -14px; | |
| width: 28px; | |
| height: 28px; | |
| content: " "; | |
| background: transparent url(images/sitewide/sprite_common.svg?7384a040b9) no-repeat -56px -633px; } | |
| .accounting h2 { | |
| margin: .75em 0 .25em; } | |
| .accounting p { | |
| width: 60%; | |
| margin: 0 0 1em; } | |
| .account .purchases-icon { | |
| position: relative; | |
| padding-left: 32px; } | |
| .account .purchases-icon::before { | |
| position: absolute; | |
| display: inline-block; | |
| left: 0; | |
| top: 50%; | |
| margin-top: -14px; | |
| width: 28px; | |
| height: 28px; | |
| content: " "; | |
| background: transparent url(images/sitewide/sprite_common.svg?7384a040b9) no-repeat -30px -633px; } | |
| .available-downloads { | |
| list-style: none; | |
| line-height: 32px; } | |
| .available-downloads .action { | |
| display: inline-block; | |
| position: absolute; | |
| left: 0; | |
| top: 5px; | |
| width: 21px; | |
| height: 21px; | |
| vertical-align: top; | |
| cursor: pointer; | |
| background-position: -60px -223px; } | |
| .available-downloads li { | |
| cursor: pointer; | |
| padding-left: 32px; | |
| position: relative; | |
| line-height: 32px; } | |
| .download-select.active { | |
| cursor: default; | |
| margin-bottom: .5em; | |
| height: 24.5px; } | |
| .download-select a { | |
| text-decoration: none; | |
| margin-right: .5em; | |
| border: 1px solid #eee; | |
| color: #666; | |
| font-size: 1em; | |
| padding: 4px 7px 3px; | |
| border-radius: 3em; } | |
| /* | |
| Favourites | |
| */ | |
| p.no-faves { | |
| padding-top: 40px; | |
| padding-left: 120px; | |
| padding-bottom: 15px; | |
| min-height: 100px; | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| color: #999; | |
| background-position: 0 20px; | |
| margin-bottom: 2em; } | |
| p.no-faves .button { | |
| margin-top: 10px; } | |
| /* | |
| Gift page | |
| */ | |
| .gift .hero { | |
| padding-left: 1.34409%; | |
| padding-right: 1.34409%; } | |
| .gift .hero h1 { | |
| width: 60%; | |
| margin-left: 20%; | |
| margin-bottom: .25em; | |
| max-width: auto; | |
| text-align: left; } | |
| .gift .hero p.intro { | |
| width: 60%; | |
| margin-left: 20%; | |
| padding: .3em 0 .5em 140px; | |
| min-height: 70px; | |
| max-width: 24em; | |
| font-family: "Alright Sans", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| line-height: 1.4; | |
| text-align: left; | |
| background-position: 5% -670px; } | |
| .gift .main { | |
| width: 40%; | |
| margin-left: 20%; } | |
| .gift .main form { | |
| margin: 2em 0; | |
| font-size: 1rem; } | |
| .gift form span { | |
| clear: left; | |
| display: block; } | |
| .gift form input, | |
| .gift form textarea { | |
| width: 40%; | |
| max-width: 22em; | |
| margin: .25em 2% .75em 0; } | |
| .gift form textarea { | |
| width: 82%; | |
| max-width: 45em; } | |
| .gift form select { | |
| margin: .25em 0 .75em; } | |
| .gift form button { | |
| clear: left; } | |
| .gift form small { | |
| display: block; | |
| margin: .75em 0; } | |
| /* | |
| Gift landing | |
| */ | |
| .gift-landing .hero h1::before { | |
| display: block; | |
| width: 100px; | |
| height: 65px; | |
| margin: 0 auto .2em; | |
| content: " "; | |
| background-position: 0 -676px; } | |
| .gift-landing p.intro.message { | |
| margin-top: 1em; | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; } | |
| .gift-landing .main { | |
| margin-top: 2em; | |
| width: 60%; } | |
| .gift-landing .redeem-now { | |
| text-align: center; | |
| font-size: 1rem; } | |
| .gift-landing .not-yet { | |
| width: 24em; | |
| margin: 4em auto 0; | |
| text-align: center; | |
| border-top: 1px solid #ddd; | |
| padding-top: 2em; } | |
| .gift-landing .not-yet .button { | |
| margin-top: .5em; } | |
| .gift-landing .redeem-now .button { | |
| margin-top: 1em; } | |
| .gift-landing .login, | |
| .gift-landing .signup { | |
| width: 60%; | |
| margin-left: 20%; } | |
| .gift-landing .signup { | |
| margin-top: 4em; | |
| border-top: 1px solid #ddd; | |
| padding-top: 2em; } | |
| #gift-state .login, | |
| #gift-state .signup { | |
| display: none; } | |
| #gift-state.login-active .redeem-now, | |
| #gift-state.signup-active .not-yet { | |
| display: none; } | |
| #gift-state.login-active .login, | |
| #gift-state.signup-active .signup { | |
| display: block; } | |
| /* | |
| Payment landing pages | |
| */ | |
| .pay-landing .hero h1 { | |
| max-width: 8em; } | |
| .receipt { | |
| padding: 1em 0; | |
| margin: .5em 0 1.5em; | |
| max-width: 20em; | |
| border: 1px solid #eee; | |
| -webkit-box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.05); | |
| -moz-box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.05); | |
| box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.05); } | |
| .receipt h3, | |
| .receipt p.line { | |
| margin: 0; | |
| line-height: 32px; | |
| height: 32px; | |
| font-size: 1em; | |
| font-weight: 300; | |
| font-family: "Panic Sans", "Menlo", "Inconsolata", "Courier", "Courier New", monospace; | |
| padding: 0 1em; } | |
| .receipt .line .line-price { | |
| float: right; } | |
| .receipt h3 { | |
| border-bottom: 1px dotted #eee; } | |
| .pay-landing .button { | |
| margin: 1.5em 0; } | |
| /* | |
| Magazine | |
| */ | |
| .magazine h2 { | |
| max-width: 24em; | |
| font-size: 1.5em; | |
| margin-bottom: 1em; } | |
| .magazine.cover .hero h1, .magazine.archive .hero h1, .magazine.topics .hero h1 { | |
| margin: 0 0 0 21.344%; | |
| height: 85px; | |
| text-align: left; | |
| line-height: 85px; } | |
| .magazine.cover .hero h1::before, .magazine.archive .hero h1::before, .magazine.topics .hero h1::before { | |
| display: block; | |
| position: absolute; | |
| margin-left: -70px; | |
| margin-top: 12px; | |
| width: 58px; | |
| height: 58px; | |
| content: " "; } | |
| .magazine.cover .hero .intro, .magazine.archive .hero .intro, .magazine.topics .hero .intro { | |
| text-align: left; | |
| font-size: 1em; | |
| margin-left: 20%; | |
| padding-left: 1.34409%; | |
| padding-right: 1.34409%; } | |
| .magazine.cover .hero h1 { | |
| max-width: 557px; | |
| text-indent: -999em; | |
| background-size: 100% auto; } | |
| .magazine .main h3 { | |
| font-family: "Lyon Text Web", "Georgia", "Times New Roman", serif; | |
| font-weight: 500; | |
| font-size: 2em; | |
| margin-bottom: .25em; | |
| margin-top: 1em; | |
| width: 80%; } | |
| .magazine .main p, | |
| .magazine .main ul { | |
| width: 80%; | |
| max-width: 42em; } | |
| .magazine.article .main p:last-child::after { | |
| font-family: "Contra"; | |
| color: #eb1a39; | |
| content: " •"; | |
| position: relative; | |
| top: -0.1em; } | |
| .magazine div.topic { | |
| width: 33.33%; | |
| float: left; } | |
| .magazine div.topic:nth-child(3) { | |
| clear: left; } | |
| .main p.sidelined { | |
| float: left; | |
| clear: both; | |
| margin-left: -25%; | |
| width: 25%; | |
| max-width: 100%; | |
| margin-right: -100%; | |
| margin-top: .2em; | |
| font-size: .9em; | |
| line-height: 1.8333; | |
| padding: 0 2.5%; | |
| text-align: right; } | |
| p.byline { | |
| margin-bottom: 1em; } | |
| .item-category { | |
| text-transform: uppercase; | |
| font-size: .9em; | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| letter-spacing: 1px; } | |
| .sidelined span { | |
| display: block; } | |
| .article .hero .byline { | |
| width: auto; | |
| margin: 0 auto 1.65em; | |
| text-align: left; | |
| color: #666666; } | |
| .article .hero h1 { | |
| text-align: left; | |
| margin-left: 0%; | |
| font-size: 4rem; | |
| margin-bottom: .5em; | |
| margin-top: .25em; } | |
| .article .intro { | |
| width: 80%; | |
| margin-left: 0%; | |
| max-width: 100%; | |
| text-align: left; | |
| font-size: 1rem; | |
| padding-bottom: 1.65em; | |
| margin-bottom: 1.65em; | |
| border-bottom: 1px solid #eee; } | |
| .article .main { | |
| padding: 0; | |
| width: auto; | |
| margin: 0; } | |
| .article .main p { | |
| font-size: 1rem; | |
| line-height: 2; | |
| margin-left: 20%; | |
| max-width: 100%; | |
| width: 60%; } | |
| .article .hero h1 { | |
| width: 100%; | |
| max-width: 100%; } | |
| .article .hero.aligncenter h1, .article .hero.aligncenter .byline { | |
| text-align: center; } | |
| .article .hero.fourfifth h1, .article .hero.fourfifth .intro { | |
| width: 80%; } | |
| .article .hero.threefifth h1, .article .hero.threefifth .intro { | |
| width: 60%; } | |
| .article .hero.offset-1 h1, .article .hero.offset-1 .intro, .article .hero.offset-1.alignleft .byline { | |
| margin-left: 20%; } | |
| .article .hero.offset-2 h1, .article .hero.offset-2 .intro, .article .hero.offset-2.alignleft .byline { | |
| margin-left: 40%; } | |
| .image { | |
| margin: 0 0 1.65em; } | |
| .cover .image { | |
| max-width: 42em; } | |
| .image img { | |
| width: 100%; | |
| max-width: auto; | |
| display: block; } | |
| .image.regular { | |
| width: 60%; | |
| margin-left: 20%; } | |
| .image.float { | |
| width: 40%; } | |
| .float.left { | |
| float: left; | |
| margin-right: 1.344%; } | |
| .float.right { | |
| float: right; | |
| margin-left: 1.344%; } | |
| .image .caption { | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| font-size: 1em; | |
| color: #666666; | |
| padding: .5em 1em; } | |
| a.make-call { | |
| background: #eee; | |
| padding: .4em .3em .3em; | |
| text-decoration: none; | |
| border-radius: 3px; | |
| white-space: nowrap; } | |
| a.make-call::before { | |
| font-family: "Contra"; | |
| content: "텠 "; } | |
| a.make-call.active::before { | |
| color: #eb1a39; } | |
| .tardis { | |
| float: left; | |
| padding-right: 1.34409%; | |
| width: 20%; } | |
| .tardis p { | |
| margin: 0 !important; | |
| width: auto !important; } | |
| .tardis p strong { | |
| display: block; } | |
| .tardis .action { | |
| width: 30px; | |
| height: 30px; | |
| margin-right: 8px; | |
| float: left; | |
| cursor: pointer; | |
| background-position: -55px 0; } | |
| .tardis .recording-length { | |
| margin: 8px 0 0; | |
| line-height: 30px; | |
| height: 40px; } | |
| .float.left + .tardis { | |
| float: right; } | |
| /* Difficult problem, bad solution */ | |
| /* | |
| The Player | |
| Styling and some logic for the player | |
| Also the minibar | |
| */ | |
| #player { | |
| position: fixed; | |
| overflow: hidden; | |
| bottom: 0; | |
| z-index: 999; | |
| width: 98% !important; | |
| max-width: 93em; | |
| max-height: 100%; | |
| margin: 0 auto !important; | |
| padding: .75em 0 0; | |
| background: #fff; | |
| border-top: 1px solid #eee; } | |
| #header-player { | |
| overflow: hidden; | |
| padding: 1px 0 0; | |
| margin: 0 auto 1em; | |
| height: 46px; | |
| /* Dirty preloader */ | |
| background-position: -10em 0; | |
| /* Play/Pause button */ | |
| /* 'absolute' is in relation to .duration-bar */ | |
| /* The actual bar. We put this here (instead of .segment) because | |
| we can then add a border-right: 2px while having the widths of | |
| .segment add up to 100%. */ | |
| /* By having a .center tag inside the .end-marker, we can properly | |
| center the text around the breakpoint. */ } | |
| #header-player .player-actions { | |
| float: left; | |
| width: 150px; | |
| margin-right: -100%; | |
| margin-left: 0; | |
| padding-top: 2px; | |
| padding-bottom: 2px; | |
| padding: 2px 10px; | |
| position: relative; | |
| text-align: center; } | |
| #header-player .duration-container { | |
| margin-left: 150px; | |
| margin-right: 80px; | |
| padding-left: 1.34409%; | |
| padding-right: 1.34409%; } | |
| #header-player .prev, | |
| #header-player .next { | |
| /* float: left;*/ | |
| display: inline-block; | |
| width: 32px; | |
| height: 40px; | |
| vertical-align: middle; | |
| margin: 0 0 0; | |
| background-position: 0 -93px; | |
| cursor: pointer; } | |
| #header-player .prev.disabled, | |
| #header-player .next.disabled, | |
| #header-player .action.disabled, | |
| #header-player .inactive { | |
| opacity: .6; | |
| cursor: default; } | |
| #header-player .next { | |
| background-position: 6px -123px; } | |
| #header-player .action { | |
| display: inline-block; | |
| vertical-align: middle; | |
| /* float: left;*/ | |
| width: 40px; | |
| height: 40px; | |
| margin: 0 2px; | |
| background-position: 0 0; | |
| cursor: pointer; } | |
| #header-player .action.playing { | |
| background-position: 0 -49px; } | |
| #header-player .duration-container, | |
| #header-player .duration-bar { | |
| position: relative; } | |
| #header-player .elapsed-marker { | |
| position: absolute; | |
| left: 1.34409%; | |
| top: 20px; | |
| padding: 5px 0 0; | |
| text-align: left; | |
| color: #666; } | |
| #header-player .segment { | |
| display: block; | |
| float: left; | |
| position: relative; | |
| padding: 20px 0; | |
| width: 100%; } | |
| #header-player .segment.empty .bar { | |
| background: #eee; } | |
| #header-player .bar { | |
| height: 2px; | |
| border-right: 2px solid #fff; | |
| background: #666; } | |
| #header-player .current .bar { | |
| background: #eb1a39; } | |
| #header-player .head { | |
| height: 24px; | |
| width: 1px; | |
| position: absolute; | |
| top: 2px; | |
| /* 'left' is set by the JS */ | |
| background: #eb1a39; } | |
| #header-player .scrub { | |
| height: 24px; | |
| width: 1px; | |
| position: absolute; | |
| top: 2px; | |
| background: rgba(0, 0, 0, 0.4); } | |
| #header-player .end-marker { | |
| position: absolute; | |
| right: 0; | |
| text-align: right; | |
| padding: 3px 0 0; | |
| color: #666; } | |
| #header-player .shadow { | |
| height: 2px; | |
| position: absolute; | |
| right: 0; | |
| /* This is set by the JS */ | |
| width: 50%; | |
| background: #ffb3c0; | |
| background: rgba(255, 255, 255, 0.7); } | |
| #header-player .center { | |
| margin-left: 50%; } | |
| #header-player .segment:last-child .end-marker .center { | |
| margin: 0; } | |
| .expanded-player { | |
| width: 28px; | |
| height: 36px; | |
| margin: 0 auto 0; | |
| display: block; | |
| vertical-align: middle; | |
| text-indent: -99em; | |
| overflow: hidden; | |
| cursor: pointer; | |
| background-position: 0 -181px; } | |
| .expanded-player.active { | |
| background-position: 0 -151px; } | |
| .expanded-player.limited { | |
| background-position: -30px -181px; } | |
| #slow-loading { | |
| position: fixed; | |
| left: 50%; | |
| margin-left: -5.5em; | |
| width: 11em; | |
| border-radius: 0 0 3px 3px; | |
| background: #eb1a39; | |
| color: #fff; | |
| text-align: center; | |
| padding: .4em 0 .3em; | |
| z-index: 999; } | |
| #expanded-player { | |
| position: relative; | |
| clear: both; | |
| margin: 0 0 10px; | |
| padding: 0; | |
| width: 100%; | |
| max-height: 250px; } | |
| #expanded-player::after { | |
| display: table; | |
| clear: both; | |
| content: " "; } | |
| #expanded-player .recording-list * { | |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } | |
| #expanded-player .recording-list { | |
| overflow: auto; | |
| float: left; | |
| width: 80%; | |
| max-height: 250px; | |
| margin-right: -100%; | |
| margin-left: 20%; | |
| padding-left: 1.34409%; | |
| padding-right: 1.34409%; } | |
| #expanded-player .track-list { | |
| margin-left: 7px; } | |
| #expanded-player .action-container { | |
| display: block; } | |
| #expanded-player .favorite { | |
| display: inline-block; } | |
| #expanded-player .limit-explain { | |
| padding-left: 20%; | |
| margin-right: -100%; | |
| float: left; | |
| width: 50%; | |
| padding-top: 1em; | |
| padding-bottom: 2em; | |
| background-position: 20% 50%; | |
| background-size: auto 100px; } | |
| #expanded-player .limit-subscribe { | |
| margin-right: -100%; | |
| margin-left: 55%; | |
| width: 40%; | |
| float: left; | |
| padding-top: 1em; | |
| padding-bottom: 2em; } | |
| #expanded-player .limit-subscribe .button { | |
| margin-top: .75em; } | |
| /* | |
| Playlist sidebar | |
| */ | |
| /* | |
| Common main areas | |
| Areas like the playlist and browser view | |
| */ | |
| ol.playlist-container li { | |
| position: relative; | |
| line-height: 32px; | |
| padding-left: 5px; | |
| margin-bottom: 10px; } | |
| ol.playlist-container li li { | |
| margin-bottom: 0; } | |
| .playlist img.artwork { | |
| float: left; | |
| width: 46px; | |
| height: 46px; | |
| position: absolute; | |
| left: 10px; | |
| top: 10px; | |
| display: none; } | |
| .playlist ol.playlist-container > li:nth-child(2n+1) { | |
| background: #f6f6f6; } | |
| .playlist li h3 { | |
| padding-right: 50px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; } | |
| .track-list { | |
| margin: 0 0 0 24px; | |
| counter-reset: listCounter; } | |
| .track-list li { | |
| counter-increment: listCounter; | |
| position: relative; | |
| min-height: 32px; | |
| line-height: 32px; | |
| padding-left: 0; | |
| padding-right: 4em; | |
| text-indent: 34px; | |
| cursor: pointer; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; } | |
| .track-list { | |
| margin-left: 0; } | |
| .track-list li { | |
| padding-right: 50px; } | |
| .track-list nav { | |
| margin-right: -50px; } | |
| .track-list nav li { | |
| padding-right: 0; } | |
| .track-list li::before { | |
| content: counter(listCounter) " "; | |
| position: absolute; | |
| left: 0; | |
| width: 26px; | |
| text-align: right; | |
| margin: 0; | |
| color: #666; | |
| text-indent: 0; } | |
| .track-list li[data-index]::before { | |
| content: attr(data-index); | |
| letter-spacing: 1px; } | |
| .track-list li[data-index=""]::before { | |
| content: "•"; | |
| opacity: .6; } | |
| .track-list li li { | |
| text-indent: 0; } | |
| .track-list li.track-is-playing { | |
| background: #eb1a39; | |
| color: #fff; } | |
| .track-list li.track-is-playing::before { | |
| content: " " !important; | |
| background-position: -20px -249px; | |
| margin-left: 0; | |
| width: 30px; | |
| height: 30px; | |
| margin-top: 1px; | |
| opacity: 1; } | |
| .playlist h3 { | |
| margin: 0; | |
| padding: 0; | |
| height: 32px; | |
| line-height: 32px; } | |
| span.track-length { | |
| position: absolute; | |
| right: 5px; } | |
| /* | |
| Recordings area | |
| An area for results after browsing, containing: | |
| the recordings | |
| the lenses | |
| the reading mode | |
| */ | |
| .sidebar.lens-selector { | |
| margin-top: 2.3em; } | |
| .sidebar.lens-selector p.back-to-browser { | |
| border-bottom: 1px solid #eee; | |
| margin-bottom: 1em; | |
| font-size: .9em; | |
| font-weight: 500; } | |
| .sidebar.lens-selector p.back-to-browser a { | |
| padding: 1em 0; | |
| display: block; | |
| margin-bottom: 0; } | |
| .lens .picture { | |
| float: left; | |
| margin: -18px 10px 0.5em 0; } | |
| .lens .picture img { | |
| width: 75px; | |
| height: 75px; | |
| border-radius: 2px; } | |
| .lens.big h3 { | |
| font-size: 1em; | |
| font-family: "Alright Sans", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| margin: 0 0 0 85px; } | |
| .lens.big h3 a:link { | |
| margin-right: 10px; | |
| color: #666; | |
| text-decoration: underline; } | |
| .lens.big h3 a.active { | |
| text-decoration: none; } | |
| .lens h2 { | |
| margin-top: 0; | |
| padding: .1em 0 .5em; } | |
| .lens .lifetime { | |
| font-family: "Alright Sans", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; } | |
| .lens .inline-bar { | |
| margin-top: -0.8em; | |
| padding-left: 75px; } | |
| .lens .inline-bar a { | |
| font-family: "Alright Sans", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; } | |
| .lens nav { | |
| margin-left: 10px; } | |
| .lens input.inline { | |
| position: absolute; | |
| right: 20px; | |
| top: 1.8em; | |
| -webkit-transition: all 0.4s ease-in-out; | |
| -moz-transition: all 0.4s ease-in-out; | |
| -ms-transition: all 0.4s ease-in-out; | |
| -o-transition: all 0.4s ease-in-out; | |
| transition: all 0.4s ease-in-out; | |
| width: 8em; } | |
| .lens input.inline:focus { | |
| outline: none; | |
| width: 16em; } | |
| .main .lens { | |
| height: auto; | |
| margin: 0 0 10px; } | |
| .sidebar .lens h2 { | |
| margin: 0; | |
| padding: 0; } | |
| .sidebar.lens-selector .lens.select { | |
| margin-bottom: 12px; } | |
| .sidebar.lens-selector .lens.select a { | |
| margin-right: 0; } | |
| .sidebar.lens-selector .lens.disabled { | |
| opacity: .6; | |
| cursor: default; } | |
| .sidebar.lens-selector .lens.select.toggle { | |
| margin-bottom: 12px; } | |
| .sidebar.lens-selector .lens.select.toggle a { | |
| padding: 0; } | |
| /* | |
| Reading experience | |
| */ | |
| .lens .tabs-container .tab-content { | |
| padding-bottom: 2em; | |
| margin-bottom: 2em; | |
| border-bottom: 1px solid #eb1a39; } | |
| .tabs-container { | |
| position: relative; } | |
| .tabs-container a.close-tab { | |
| position: absolute; | |
| left: 85px; | |
| bottom: 2em; | |
| text-decoration: none; | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| color: #eb1a39; } | |
| .tabs-container, | |
| .composition-info { | |
| padding-left: 85px; } | |
| .tabs-container p, | |
| .tabs-container ul, | |
| .tabs-container table { | |
| max-width: 36em; | |
| margin: 0 0 1.65em; } | |
| .composition-info p { | |
| max-width: 30em; } | |
| .tabs-container h2, | |
| .tabs-container .tab-content h3 { | |
| margin: .75em 0 .5em; } | |
| .tabs-container h2 { | |
| font-size: 1.25em; | |
| margin: 1.5em 0 .25em; } | |
| .tabs-container .tab-content h3 { | |
| font-size: 1em; | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; } | |
| .tab-content span.caps { | |
| text-transform: uppercase; | |
| font-size: .9em; | |
| letter-spacing: 1px; } | |
| .tabs-container ul { | |
| list-style: square inside; } | |
| .tabs-container .compositions ul { | |
| font-size: 1em; | |
| max-width: 42em; } | |
| .tabs-container .compositions ul li { | |
| list-style: none; | |
| margin-bottom: .25em; } | |
| .tabs-container .compositions ul li:nth-child(2n+2) { | |
| background: #f6f6f6; } | |
| .tabs-container .compositions li a { | |
| display: block; | |
| text-decoration: none; | |
| padding: .2em .4em; } | |
| /* | |
| Recordings list | |
| Contains mostly: | |
| sorting | |
| listing | |
| metadata | |
| */ | |
| .recording-count { | |
| clear: both; | |
| margin: .25em 0; | |
| font-size: .875rem; | |
| font-size: 1.145rem; } | |
| .buy-toggle { | |
| display: inline-block; | |
| margin-left: 1em; | |
| font-size: .875rem; | |
| text-decoration: none; | |
| font-family: "Alright Sans", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| line-height: 28px; | |
| vertical-align: middle; | |
| color: #666; | |
| position: relative; | |
| padding-left: 32px; } | |
| .buy-toggle::before { | |
| position: absolute; | |
| display: inline-block; | |
| left: 0; | |
| top: 50%; | |
| margin-top: -14px; | |
| width: 28px; | |
| height: 28px; | |
| content: " "; | |
| background: transparent url(images/sitewide/sprite_common.svg?7384a040b9) no-repeat -57px -220px; } | |
| .buy-toggle.active::before { | |
| background-position: -57px -250px; } | |
| .button.buy-now { | |
| display: none; } | |
| ol.buy-active .button.buy-now { | |
| display: inline-block; | |
| text-decoration: none; | |
| min-width: 8.75em; } | |
| .filtered { | |
| margin-bottom: 5px; } | |
| .filtered h3 { | |
| margin: 0; | |
| display: inline-block; | |
| font-size: 1em; | |
| font-family: "Alright Sans", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| line-height: 24px; } | |
| .filtered ul, | |
| .filtered li { | |
| padding: 0; | |
| display: inline-block; | |
| list-style: none; | |
| line-height: 22px; | |
| height: 24px; | |
| vertical-align: middle; } | |
| .filtered li { | |
| margin: 0 0 0 10px; | |
| font-weight: 500; } | |
| .filtered li .picture { | |
| float: left; | |
| margin: 0 6px 0 0; | |
| width: 24px; | |
| height: 24px; } | |
| .filtered li .picture img { | |
| width: 24px; | |
| height: 24px; | |
| vertical-align: middle; | |
| border-radius: 2px; } | |
| .remove-lens { | |
| display: inline-block; | |
| text-decoration: none; | |
| text-indent: -99em; | |
| overflow: hidden; | |
| margin: 0 .1em 0 0; | |
| padding: 0; | |
| width: 28px; | |
| height: 24px; | |
| background-position: 3px -569px; | |
| vertical-align: middle; } | |
| .recording-list, | |
| .recordings-result, | |
| .playlist-container { | |
| clear: both; | |
| list-style: none; } | |
| .recording-list li { | |
| line-height: 32px; | |
| list-style: none; | |
| margin-bottom: 16px; } | |
| .recording-list li li, | |
| .track-list li { | |
| margin-bottom: 0; } | |
| .recording-list h3 { | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| font-size: 1.145em; | |
| text-decoration: none; | |
| margin: 0; | |
| color: #222222; | |
| cursor: default; } | |
| .recording-list h3 a { | |
| text-decoration: none; | |
| color: #888; | |
| padding-left: 8px; } | |
| h3 + .recording-list.interspersed { | |
| margin-top: 1.5em; } | |
| .recording-list.interspersed h3 { | |
| margin-top: .825em; } | |
| .recording-list p { | |
| margin-bottom: .825em; | |
| max-width: 42em; } | |
| .recording-list .recording-meta-text { | |
| padding-left: 30px; | |
| color: #888; | |
| margin-bottom: .4em; } | |
| .recording-list h3 .composer a { | |
| color: inherit; | |
| padding: 0; } | |
| .composer-lens .recording-list .composer { | |
| display: none; } | |
| .recording-list h4 { | |
| font-family: "Alright Sans", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| font-size: 1em; | |
| margin: .3em 0 .2em; | |
| cursor: default; } | |
| .recording-list .handle { | |
| position: relative; | |
| cursor: pointer; | |
| padding-left: 30px; | |
| padding-right: 4em; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; } | |
| .recording-list .handle.active { | |
| overflow: visible; | |
| text-overflow: none; | |
| white-space: normal; } | |
| .handle a { | |
| text-decoration: none; } | |
| .handle.active a { | |
| text-decoration: underline; } | |
| .recording-list .recording-length { | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| background: #fff; | |
| padding: 0 5px 0 5px; } | |
| .recording-list .play { | |
| display: block; | |
| position: absolute; | |
| left: 0; | |
| width: 29px; | |
| height: 30px; | |
| margin-top: 1px; | |
| color: #111; | |
| text-indent: -999em; | |
| background-position: 0 -220px; } | |
| .recording-list .is-playing .play, | |
| .free-user .recording-list .limited.is-playing .play { | |
| background-position: 0 -250px; } | |
| /* When a free user, and data is copyrighted, show different player icon */ | |
| .free-user .recording-list .limited .play { | |
| background-position: -30px -220px; } | |
| .recording-list .favorite { | |
| display: none; | |
| /* We show it when expanded or favorited */ | |
| margin: 0 0 0 6px; | |
| width: 32px; | |
| height: 32px; | |
| text-indent: -999em; | |
| background-position: 0 -276px; } | |
| .recording-list .favorite.pending.active { | |
| opacity: .5; } | |
| .recording-list .favorite.active { | |
| background-position: 0 -305px; | |
| display: inline-block; } | |
| .recording-list .active > .favorite { | |
| display: inline-block; } | |
| /* | |
| Browser elements | |
| Links and big buttons that set up the browser functionality | |
| */ | |
| p.side-summary { | |
| float: left; | |
| clear: both; | |
| margin-left: -28%; | |
| width: 24%; | |
| margin-right: -100%; | |
| font-size: .9em; | |
| line-height: 1.666667; | |
| padding: 0 2.5%; | |
| color: #666666; | |
| text-align: right; } | |
| .lens-selector.embed { | |
| border-top: 1px solid #eb1a39; | |
| margin-top: 10px; } | |
| .lens-selector .cancel { | |
| display: block; | |
| padding: 10px; } | |
| .lens-selector h2 { | |
| font-size: .9em; | |
| margin: 0 0 .25em; | |
| font-family: "Alright Sans", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; } | |
| .sidebar.lens-selector .lens.select { | |
| margin: 0; } | |
| .sidebar.lens-selector .lens.select + h2 { | |
| margin-top: 12px; } | |
| .lens-selector .lens h2.icon { | |
| padding: .7em 0 .35em; | |
| text-indent: 34px; | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; } | |
| .sidebar.lens-selector .lens a { | |
| padding: 5px 0; } | |
| .lens-selector .lens.select.disabled a { | |
| opacity: .6; | |
| cursor: default; } | |
| .lens-selector .lens.select.active a { | |
| background: #e6e6e6; | |
| color: #222222; | |
| padding-right: 1.9em; | |
| border-radius: 3px; | |
| position: relative; } | |
| .lens-selector .lens.select.active a h2 { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; } | |
| .lens-selector .lens.select.active a::after { | |
| position: absolute; | |
| right: 0; | |
| top: 50%; | |
| margin-top: -1em; | |
| display: block; | |
| content: " "; | |
| width: 2em; | |
| height: 2em; | |
| background-position: 0 -565px; } | |
| .lens-selector.js-lens-open .lens.select.active a::after { | |
| display: none; } | |
| .lens-select a h2 { | |
| font-size: 1em; | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; } | |
| .main .lens.select { | |
| width: 32%; | |
| float: left; | |
| margin: 0 1% 48px 0; } | |
| .lens.select a { | |
| text-decoration: none; | |
| color: inherit; | |
| display: block; | |
| font-family: "Alright Sans", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| line-height: 1.75; | |
| margin-right: 2em; | |
| padding: 0 0 12px; } | |
| .lens.select.toggle a { | |
| font-size: .9em; | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| text-indent: 10px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; } | |
| .main .lens.select h2 { | |
| line-height: 1.75; | |
| font-size: 1.25em; | |
| font-family: "Alright Sans", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| padding: .3em 0 .4em; | |
| text-indent: 38px; } | |
| .browser h1 { | |
| max-width: 26em; | |
| margin-bottom: 2em; } | |
| .browser.main h3 { | |
| clear: left; } | |
| .lens.select.active a { | |
| background: #eb1a39; | |
| color: #fff; } | |
| .lens.select.passive a { | |
| color: #666666; | |
| cursor: default; } | |
| section.browser .lens.select p { | |
| margin-left: 0; | |
| margin-top: -10px; } | |
| .lens-selector a.back-lens, | |
| .lens-selector a.back-selector { | |
| display: block; | |
| padding: 10px 5px; | |
| text-decoration: none; } | |
| .lens.big.select { | |
| width: auto; | |
| float: none; | |
| margin-right: 0; } | |
| .select h2.icon { | |
| text-indent: 42px; | |
| padding: 1px 0 12px; | |
| background-position: 0 -130px; } | |
| h2.big.icon-artists { | |
| background-position: 0 0; } | |
| h2.big.icon-instruments { | |
| background-position: 0 -255px; } | |
| h2.big.icon-debut { | |
| background-position: 0 -613px; } | |
| h2.big.icon-academy { | |
| background-position: 0 -373px; } | |
| h2.big.icon-concept { | |
| background-position: 0 -491px; } | |
| .select.feature { | |
| min-height: 7em; | |
| background-size: 13.9em auto; } | |
| .select.feature a { | |
| display: block; | |
| min-height: 7em; } | |
| .select.feature h2 { | |
| text-indent: -999em !important; } | |
| .pagination ul { | |
| text-align: center; | |
| overflow: hidden; | |
| margin: 0 0 2em; } | |
| .pagination li { | |
| display: inline-block; | |
| width: auto; } | |
| .pagination a { | |
| padding: 4px 8px; | |
| text-decoration: none; | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; } | |
| .pagination li.active a { | |
| color: #eb1a39; } | |
| .pagination li:first-child.disabled, | |
| .pagination li:last-child.disabled { | |
| /* visibility: hidden; | |
| /* Used to use this, but threw off centering | |
| more than it fixed it */ | |
| display: none; } | |
| .pagination .disabled a { | |
| color: #999; | |
| cursor: default; } | |
| .lens-back { | |
| text-decoration: none; | |
| margin-bottom: 6px; } | |
| .lens-back::before { | |
| content: "← "; } | |
| .lens-header h2 { | |
| font-size: 1.75em; | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| margin-bottom: .5em; } | |
| .lens-header p { | |
| max-width: 36em; } | |
| /* | |
| Column browser | |
| Logic for browsing vertically | |
| */ | |
| .columnbrowser .column { | |
| float: left; | |
| border-right: 4px solid #fff; } | |
| .column li { | |
| height: 32px; | |
| line-height: 32px; | |
| list-style: none; | |
| padding: 0 5px; } | |
| .column.big li { | |
| height: 64px; | |
| line-height: 64px; | |
| font-size: 1.7142em; | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; } | |
| .column li a { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; } | |
| .column.huge li { | |
| height: auto; | |
| line-height: 32px; | |
| font-size: 1em; | |
| padding: .4em 0 .2em; } | |
| .column.huge li a { | |
| overflow: visible; | |
| white-space: normal; } | |
| .column.huge h3 { | |
| margin-bottom: .5em; | |
| font-size: 1.7142em; | |
| line-height: 48px; } | |
| .column.huge p { | |
| padding: 0 0 1em; | |
| line-height: 20px; | |
| max-width: 38em; } | |
| .column li.active, | |
| .row li.active a { | |
| background: #eb1a39 !important; | |
| color: #fff; | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; } | |
| .column li a, | |
| .row li a { | |
| text-decoration: none; | |
| display: block; | |
| color: inherit; } | |
| .column li:nth-child(2n+1) { | |
| background: #eee; | |
| background: rgba(0, 0, 0, 0.07); } | |
| .column.singles li { | |
| background: inherit; } | |
| .column.singles h3::after { | |
| content: " →"; | |
| color: #999; | |
| padding-left: 4px; } | |
| .column.singles h3 { | |
| margin-top: 0; | |
| margin-bottom: 0; } | |
| .column .list-header { | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| padding: 0 5px; | |
| height: 32px; | |
| line-height: 32px; | |
| background: #fff !important; | |
| border-bottom: 1px solid #ccc; } | |
| .onethird-column { | |
| width: 33%; } | |
| .onehalf-column { | |
| width: 50%; } | |
| .columnbrowser div:last-child { | |
| border-right: none; } | |
| .letter-row { | |
| width: auto; | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; } | |
| .row li { | |
| float: left; | |
| list-style: none; | |
| width: auto; | |
| margin-bottom: 10px; } | |
| .row li a { | |
| display: block; | |
| height: 32px; | |
| line-height: 32px; | |
| padding: 0 10px; | |
| margin: 0 10px 0 0; | |
| background: #eee; } | |
| .fullwidth-column { | |
| width: 100%; } | |
| /* | |
| Inline bar and actionable elements | |
| */ | |
| .inline-bar li { | |
| display: inline-block; | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| margin: 0 10px 0 0; | |
| height: 32px; | |
| overflow: visible; | |
| position: relative; } | |
| .inline-bar a { | |
| text-decoration: none; } | |
| .inline-bar a.active { | |
| color: #c1112b; } | |
| .action-container { | |
| display: none; | |
| margin-left: -5px; } | |
| .recording-meta .action-container { | |
| margin-left: -17px; } | |
| /* | |
| Static pages | |
| - Terms and Conditions | |
| - About pages | |
| */ | |
| .terms .main h1 { | |
| margin: 1em 0 .25em; } | |
| .terms .main { | |
| counter-reset: terms; } | |
| .terms h2 { | |
| margin: 0 0 .25em; | |
| font-size: 1.2em; } | |
| .terms p { | |
| max-width: 42em; } | |
| .terms .main h2::before { | |
| counter-increment: terms; | |
| content: counter(terms) " "; | |
| display: inline-block; | |
| color: #666; | |
| width: 1.5em; } | |
| .terms .side-summary { | |
| margin: 0 0 0 -25%; } | |
| .about nav.inline { | |
| margin-top: 5em; | |
| font-size: 1rem; | |
| margin-left: 21.344%; } | |
| .about .hero h1 { | |
| text-align: left; | |
| max-width: 16em; | |
| margin: .75em auto .75em 0; } | |
| .about .main p { | |
| max-width: 32em; } | |
| .about input, | |
| .about textarea { | |
| width: 21em; } | |
| /* | |
| Error pages | |
| */ | |
| .error .hero h1 { | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| font-size: 3em; | |
| text-align: left; | |
| width: 60%; | |
| max-width: 16em; | |
| margin-left: 20%; | |
| min-height: 200px; | |
| padding: .5em 0 .5em 230px; | |
| background-position: 0 50%; } | |
| .error .hero p.intro { | |
| text-align: left; | |
| width: 50%; | |
| margin-left: 20%; | |
| padding-left: 1.34409%; | |
| padding-right: 1.34409%; } | |
| .old-browser .container { | |
| max-width: 80em; } | |
| .old-browser .main h1 { | |
| font-size: 36px; | |
| width: 80%; } | |
| .old-browser .main p.warning { | |
| margin: .75em 0; | |
| padding: .75em 0; | |
| width: 80%; | |
| font-size: 1.4em; | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| border: 5px solid #e4c436; | |
| border-width: 5px 0; } | |
| .old-browser h2 { | |
| font-size: 2.28em; | |
| margin: 1em 0 0; } | |
| .old-browser .main p { | |
| font-size: 1.14em; | |
| width: 80%; | |
| margin: .5em 0 1em; } | |
| .old-browser .split img { | |
| width: 75%; | |
| height: auto; | |
| margin: 1em 0 0; | |
| max-width: 14em; | |
| max-height: 14em; } | |
| .old-browser p.we-ll-do-it-live { | |
| clear: both; | |
| text-align: center; | |
| font-size: 1em; | |
| padding-top: 5em; | |
| color: #999; } | |
| .essentials-disabled { | |
| padding: .7em 0 .4em; | |
| text-align: center; | |
| font-family: "Alright Sans Medium", "Lucida Grande", "Lucida Sans", sans-serif; | |
| font-weight: normal; | |
| font-style: normal; | |
| border-bottom: 5px solid #e4c436; | |
| background: #ffdf51; } | |
| .essentials-disabled p { | |
| margin-bottom: 0; } | |
| /* | |
| Media queries | |
| 1. Smaller than ~700px | |
| */ | |
| @media (max-width: 44em) { | |
| html { | |
| font-size: 14px; } | |
| body { | |
| font-size: 12px; } | |
| .hero .intro { | |
| width: auto; | |
| margin-left: 0; } | |
| #signup h2 { | |
| margin-left: 0; } | |
| #signup form#signup-data { | |
| width: auto; } | |
| #signup fieldset.submitters { | |
| width: 100%; | |
| margin-left: 0; } | |
| #site-footer p.legal { | |
| margin-left: 0; } } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment