Created
January 26, 2012 18:13
-
-
Save monde/1684126 to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, | |
| p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, | |
| img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, | |
| dl, dt, dd, ol, ul, li, fieldset, form, label, legend, | |
| table, caption, tbody, tfoot, thead, tr, th, td, | |
| article, aside, canvas, details, figure, figcaption, hgroup, | |
| menu, footer, header, nav, section, summary, time, mark, audio, video { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; } | |
| article, aside, canvas, figure, figure img, figcaption, hgroup, | |
| footer, header, nav, section, audio, video { | |
| display: block; } | |
| a { | |
| color: #044F7A; | |
| text-decoration: none; } | |
| a, img, iframe { | |
| border: 0; | |
| outline: 0; } | |
| li { | |
| list-style: none; } | |
| .left { | |
| float: left; } | |
| .right { | |
| float: right; } | |
| .clear { | |
| clear: both; } | |
| .hidden { | |
| display: none; } | |
| /* float clearing for everyone else */ | |
| .clearfix:after { | |
| clear: both; | |
| content: "."; | |
| display: block; | |
| height: 0; | |
| visibility: hidden; | |
| font-size: 0; } | |
| .gigantic { | |
| font-size: 110px; | |
| line-height: 120px; | |
| letter-spacing: -2px; } | |
| .huge { | |
| font-size: 68px; | |
| line-height: 72px; | |
| letter-spacing: -1px; } | |
| .larger { | |
| font-size: 55px; | |
| line-height: 60px; | |
| letter-spacing: -1px; } | |
| .large { | |
| font-size: 42px; | |
| line-height: 48px; } | |
| .bigger { | |
| font-size: 26px; | |
| line-height: 36px; } | |
| .big, h1 { | |
| font-size: 22px; | |
| line-height: 30px; } | |
| h1 { | |
| font-size: 18px; | |
| line-height: 27px; } | |
| h2 { | |
| font-size: 16px; | |
| line-height: 24px; } | |
| h3 { | |
| font-size: 14px; | |
| line-height: 21px; } | |
| body { | |
| font: 12px/14px Helvetica, Arial, sans-serif; | |
| height: 100%; } | |
| .small, small { | |
| font-size: 13px; | |
| line-height: 18px; } | |
| .ellipsis { | |
| overflow: hidden; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| -o-text-overflow: ellipsis; | |
| -ms-text-overflow: ellipsis; } | |
| .avatar { | |
| float: left; } | |
| .avatar.small { | |
| height: 30px; | |
| width: 30px; } | |
| .avatar.top { | |
| float: left; | |
| height: 25px; | |
| width: 25px; | |
| margin: 0 4px; } | |
| .avatar, | |
| .friend-avatar { | |
| z-index: 999; | |
| margin: 0 4px 4px 4px; | |
| -webkit-box-shadow: rgba(35, 44, 50, 0.5) 0px 0px 4px; | |
| -moz-box-shadow: rgba(35, 44, 50, 0.5) 0px 0px 4px; | |
| box-shadow: rgba(35, 44, 50, 0.5) 0px 0px 4px; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| -ms-border-radius: 4px; | |
| -o-border-radius: 4px; | |
| border-radius: 4px; } | |
| .avatar:hover, | |
| .friend-avatar:hover { | |
| -webkit-box-shadow: rgba(6, 66, 105, 0.9) 0px 0px 4px; | |
| -moz-box-shadow: rgba(6, 66, 105, 0.9) 0px 0px 4px; | |
| box-shadow: rgba(6, 66, 105, 0.9) 0px 0px 4px; } | |
| .fancy-image { | |
| display: block; | |
| background: transparent; | |
| border: 1px solid #949596; | |
| border: 1px solid rgba(0, 0, 0, 0.6); | |
| -webkit-box-shadow: rgba(35, 44, 50, 0.3) 0px 0px 4px; | |
| -moz-box-shadow: rgba(35, 44, 50, 0.3) 0px 0px 4px; | |
| box-shadow: rgba(35, 44, 50, 0.3) 0px 0px 4px; } | |
| pre, textarea { | |
| background: #ffffff; | |
| padding: 8px; | |
| border: 1px solid #aaaaaa; | |
| font: normal normal 10px/1.5 "Monaco", Courier, "Courier New", monospace; | |
| overflow: scroll; } | |
| label { | |
| display: block; | |
| font-weight: bold; | |
| margin: 16px 0 4px 0; } | |
| .directions, | |
| label span { | |
| color: #aaa; | |
| font-size: 12px; | |
| font-style: italic; } | |
| select { | |
| padding: 5px; } | |
| select.full { | |
| width: 98%; } | |
| input { | |
| padding: 5px; } | |
| input.text { | |
| background: #ffffff; | |
| color: #1A1A1A; | |
| font: normal normal 16px/22px Helvetica, Arial, sans-serif; | |
| border: 1px solid #C5C7BE; | |
| width: 96%; | |
| text-shadow: 0 0 1px rgba(0, 0, 0, 0.01); | |
| -webkit-border-radius: 3px; | |
| -moz-border-radius: 3px; | |
| -ms-border-radius: 3px; | |
| -o-border-radius: 3px; | |
| border-radius: 3px; } | |
| span.inline-text { | |
| color: #1A1A1A; | |
| font: normal normal 16px/22px Helvetica, Arial, sans-serif; | |
| text-shadow: 0 0 1px rgba(0, 0, 0, 0.01); | |
| width: 46%; } | |
| span.inline-text input.inline-text { | |
| width: 90%; } | |
| input.inline-text { | |
| background: #ffffff; | |
| color: #1A1A1A; | |
| font: normal normal 16px/22px Helvetica, Arial, sans-serif; | |
| text-shadow: 0 0 1px rgba(0, 0, 0, 0.01); | |
| border: 1px solid #C5C7BE; | |
| width: 46%; | |
| -webkit-border-radius: 3px; | |
| -moz-border-radius: 3px; | |
| -ms-border-radius: 3px; | |
| -o-border-radius: 3px; | |
| border-radius: 3px; } | |
| input.submit { | |
| margin: 8px 0 8px 0; | |
| background-color: #70ac2e; | |
| color: #fefefe; | |
| font: bold normal 16px/22px Helvetica, Arial, sans-serif; | |
| border: 1px solid transparent; | |
| width: 98%; | |
| text-shadow: 0 0 1px rgba(0, 0, 0, 0.1); | |
| -webkit-border-radius: 3px; | |
| -moz-border-radius: 3px; | |
| -ms-border-radius: 3px; | |
| -o-border-radius: 3px; | |
| border-radius: 3px; } | |
| .edit_clip input, .edit_clip textarea { | |
| font-size: 13px; } | |
| ::selection { | |
| color: #333333; | |
| background: #ffffbc; | |
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); } | |
| ::-moz-selection { | |
| color: #333333; | |
| background: #ffffbc; | |
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); } | |
| img::selection { | |
| background: transparent; } | |
| img::-moz-selection { | |
| background: transparent; } | |
| body { | |
| -webkit-tap-highlight-color: #ffffbc; } | |
| pre::-webkit-scrollbar, | |
| code::-webkit-scrollbar, | |
| textarea::-webkit-scrollbar { | |
| width: 10px; | |
| height: 10px; | |
| border-left: 1px solid #dce6f4; } | |
| pre::-webkit-scrollbar-button:vertical:increment, | |
| code::-webkit-scrollbar-button:vertical:increment, | |
| textarea::-webkit-scrollbar-button:vertical:increment { | |
| background-color: transparent; } | |
| pre::-webkit-scrollbar-track:enabled, | |
| code::-webkit-scrollbar-track:enabled, | |
| textarea::-webkit-scrollbar-track:enabled { | |
| background-color: rgba(6, 68, 107, 0.1); | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| -ms-border-radius: 5px; | |
| -o-border-radius: 5px; | |
| border-radius: 5px; } | |
| pre::-webkit-scrollbar-thumb:vertical, | |
| code::-webkit-scrollbar-thumb:vertical, | |
| textarea::-webkit-scrollbar-thumb:vertical { | |
| height: 50px; | |
| background-color: rgba(0, 0, 0, 0.2); | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| -ms-border-radius: 5px; | |
| -o-border-radius: 5px; | |
| border-radius: 5px; } | |
| pre::-webkit-scrollbar-thumb:horizontal, | |
| code::-webkit-scrollbar-thumb:horizontal, | |
| textarea::-webkit-scrollbar-thumb:horizontal { | |
| width: 50px; | |
| background-color: rgba(0, 0, 0, 0.2); | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| -ms-border-radius: 5px; | |
| -o-border-radius: 5px; | |
| border-radius: 5px; } | |
| pre::-webkit-scrollbar-button:start:decrement, | |
| pre::-webkit-scrollbar-button:end:increment, | |
| code::-webkit-scrollbar-button:start:decrement, | |
| code::-webkit-scrollbar-button:end:increment, | |
| textarea::-webkit-scrollbar-button:start:decrement, | |
| textarea::-webkit-scrollbar-button:end:increment { | |
| display: block; | |
| height: 5px; } | |
| .button { | |
| display: inline-block; | |
| margin: 0; | |
| overflow: hidden; | |
| padding: 1px; | |
| text-decoration: none; | |
| vertical-align: middle; | |
| cursor: pointer !important; | |
| font-weight: bold; | |
| -webkit-border-radius: 3px; | |
| -moz-border-radius: 3px; | |
| -ms-border-radius: 3px; | |
| -o-border-radius: 3px; | |
| border-radius: 3px; | |
| -webkit-box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 1px; | |
| -moz-box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 1px; | |
| box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 1px; } | |
| .button .inner { | |
| border-top: 1px solid rgba(255, 255, 255, 0.2); | |
| color: #fff; | |
| display: block; | |
| line-height: normal; | |
| margin: 0; | |
| padding: 6px 10px; | |
| position: relative; | |
| text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); | |
| text-transform: uppercase; | |
| background: transparent; | |
| border: 0; | |
| cursor: pointer !important; | |
| -webkit-border-radius: 3px; | |
| -moz-border-radius: 3px; | |
| -ms-border-radius: 3px; | |
| -o-border-radius: 3px; | |
| border-radius: 3px; } | |
| .button .inner a { | |
| color: #ffffff; } | |
| .button .inner .play { | |
| background: transparent url("http://hark.dev/assets/icons/tiny-play.png") 0 0 no-repeat; | |
| display: block; | |
| width: 12px; | |
| height: 12px; | |
| position: absolute; | |
| right: 4px; | |
| top: 4px; } | |
| .button.large { | |
| font: bold 16px 'Helvetica Neue','Helvetica', 'Arial', sans-serif !important; } | |
| .button.medium { | |
| font: bold 12px 'Helvetica Neue','Helvetica', 'Arial', sans-serif !important; } | |
| .button.medium .inner { | |
| padding: 6px 10px; | |
| font: bold 12px 'Helvetica Neue','Helvetica', 'Arial', sans-serif !important; } | |
| .button.small { | |
| font: bold 11px 'Helvetica Neue','Helvetica', 'Arial', sans-serif !important; } | |
| .button.small .inner { | |
| padding: 4px 8px; | |
| font: bold 11px 'Helvetica Neue','Helvetica', 'Arial', sans-serif !important; } | |
| .button.smaller { | |
| font: bold 10px 'Helvetica Neue','Helvetica', 'Arial', sans-serif !important; } | |
| .button.smaller .inner { | |
| padding: 4px 7px; | |
| font: bold 10px 'Helvetica Neue','Helvetica', 'Arial', sans-serif !important; } | |
| .button.icon .inner { | |
| padding-right: 22px; } | |
| .button:hover { | |
| background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.1))); | |
| background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)); | |
| background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)); | |
| background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)); | |
| background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)); | |
| background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)); | |
| cursor: pointer; | |
| text-decoration: none; } | |
| .button:active { | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; } | |
| .button.black { | |
| background-color: #2c3131; } | |
| .button.gray { | |
| background-color: #9d9d9d; } | |
| .button.light-green { | |
| background-color: #92c656; } | |
| .button.green { | |
| background-color: #70ac2e; } | |
| .button.blue { | |
| background-color: #2e69ac; } | |
| .button.light-blue { | |
| background-color: #73cbe9; } | |
| .button.red { | |
| background-color: #ac2e2e; } | |
| .button.orange { | |
| background-color: #e98851; } | |
| .button.yellow { | |
| background-color: #c0c28b; } | |
| .button.purple { | |
| background-color: #9a6aa6; } | |
| .button.white { | |
| background-color: #eeeeee; } | |
| .white .inner { | |
| color: #444444 !important; } | |
| .alert { | |
| border: solid 1px black; | |
| padding: 12px; | |
| margin: 0 auto 16px auto !important; | |
| width: auto; | |
| background: white url("http://hark.dev/assets/icons/error.gif") no-repeat 8px 8px; | |
| padding-left: 40px; | |
| line-height: 17px; | |
| font-size: 14px; | |
| font-weight: bold; | |
| color: #333; | |
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| -ms-border-radius: 4px; | |
| -o-border-radius: 4px; | |
| border-radius: 4px; } | |
| .notice, | |
| .confirmation { | |
| border-color: #339900; | |
| background-image: url("http://hark.dev/assets/icons/confirmation.gif"); | |
| background-color: #ccff99; | |
| text-shadow: #B5E088 1px 1px 2px; } | |
| .error { | |
| border-color: #cc3300; | |
| background-image: url("http://hark.dev/assets/icons/error.gif"); | |
| background-color: #ffcccc; | |
| text-shadow: #D7ACAD 1px 1px 2px; } | |
| .warning { | |
| border-color: #ff9900; | |
| background-image: url("http://hark.dev/assets/icons/notice.gif"); | |
| background-color: #ffff99; | |
| text-shadow: #E9E78D 1px 1px 2px; } | |
| #close-alert { | |
| float: right; | |
| clear: both; | |
| padding: 3px; } | |
| #colorbox, | |
| #cboxOverlay, | |
| #cboxWrapper { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| z-index: 9999; | |
| overflow: hidden; } | |
| #cboxOverlay { | |
| position: fixed; | |
| width: 100%; | |
| height: 100%; } | |
| #cboxMiddleLeft, | |
| #cboxBottomLeft { | |
| clear: left; } | |
| #cboxContent { | |
| position: relative; } | |
| #cboxLoadedContent { | |
| overflow: auto; } | |
| #cboxLoadedContent img { | |
| max-height: 600px; | |
| max-width: 1024px; } | |
| #cboxTitle { | |
| margin: 0; } | |
| #cboxLoadingOverlay, #cboxLoadingGraphic { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; } | |
| #cboxPrevious, | |
| #cboxNext, | |
| #cboxClose, | |
| #cboxSlideshow { | |
| cursor: pointer; } | |
| .cboxPhoto { | |
| float: left; | |
| margin: auto; | |
| border: 0; | |
| display: block; } | |
| .cboxIframe { | |
| width: 100%; | |
| height: 100%; | |
| display: block; | |
| border: 0; } | |
| /* ColorBox User Styles | |
| ------------------------------------------------------------------------------*/ | |
| #cboxOverlay { | |
| background: #000000; | |
| background: rgba(0, 0, 0, 0.8); } | |
| #cboxTopLeft { | |
| width: 14px; | |
| height: 14px; | |
| background: url("http://hark.dev/assets/colorbox/controls.png") no-repeat 0 0; } | |
| #cboxTopCenter { | |
| height: 14px; | |
| background: url("http://hark.dev/assets/colorbox/border.png") repeat-x top left; } | |
| #cboxTopRight { | |
| width: 14px; | |
| height: 14px; | |
| background: url("http://hark.dev/assets/colorbox/controls.png") no-repeat -36px 0; } | |
| #cboxBottomLeft { | |
| width: 14px; | |
| height: 43px; | |
| background: url("http://hark.dev/assets/colorbox/controls.png") no-repeat 0 -32px; } | |
| #cboxBottomCenter { | |
| height: 43px; | |
| background: url("http://hark.dev/assets/colorbox/border.png") repeat-x bottom left; } | |
| #cboxBottomRight { | |
| width: 14px; | |
| height: 43px; | |
| background: url("http://hark.dev/assets/colorbox/controls.png") no-repeat -36px -32px; } | |
| #cboxMiddleLeft { | |
| width: 14px; | |
| background: url("http://hark.dev/assets/colorbox/controls.png") repeat-y -175px 0; } | |
| #cboxMiddleRight { | |
| width: 14px; | |
| background: url("http://hark.dev/assets/colorbox/controls.png") repeat-y -211px 0; } | |
| #cboxContent { | |
| background: #fff; | |
| overflow: visible; } | |
| #cboxLoadedContent { | |
| margin-bottom: 5px; } | |
| #cboxLoadingOverlay { | |
| background: url("http://hark.dev/assets/colorbox/loading_background.png") no-repeat center center; } | |
| #cboxLoadingGraphic { | |
| background: url("http://hark.dev/assets/colorbox/loading.gif") no-repeat center center; } | |
| #cboxTitle { | |
| position: absolute; | |
| bottom: -25px; | |
| left: 0; | |
| text-align: center; | |
| width: 100%; | |
| font-weight: bold; | |
| color: #7C7C7C; } | |
| #cboxCurrent { | |
| position: absolute; | |
| bottom: -25px; | |
| left: 58px; | |
| font-weight: bold; | |
| color: #7C7C7C; } | |
| #cboxPrevious, | |
| #cboxNext, | |
| #cboxClose, | |
| #cboxSlideshow { | |
| position: absolute; | |
| bottom: -29px; | |
| background: url("http://hark.dev/assets/colorbox/controls.png") no-repeat 0px 0px; | |
| width: 23px; | |
| height: 23px; | |
| text-indent: -9999px; } | |
| #cboxPrevious { | |
| left: 0px; | |
| background-position: -51px -25px; } | |
| #cboxPrevious.hover { | |
| background-position: -51px 0px; } | |
| #cboxNext { | |
| left: 27px; | |
| background-position: -75px -25px; } | |
| #cboxNext.hover { | |
| background-position: -75px 0px; } | |
| #cboxClose { | |
| right: 0; | |
| background-position: -100px -25px; } | |
| #cboxClose.hover { | |
| background-position: -100px 0px; } | |
| .cboxSlideshow_on #cboxSlideshow { | |
| background-position: -125px 0px; | |
| right: 27px; } | |
| .cboxSlideshow_on #cboxSlideshow.hover { | |
| background-position: -150px 0px; } | |
| .cboxSlideshow_off #cboxSlideshow { | |
| background-position: -150px -25px; | |
| right: 27px; } | |
| .cboxSlideshow_off #cboxSlideshow.hover { | |
| background-position: -125px 0px; } | |
| #top-banners { | |
| position: fixed; | |
| _position: relative; | |
| top: 0; | |
| left: 0; | |
| z-index: 12; | |
| width: 100%; | |
| height: 50px; | |
| color: #ffffff; | |
| font-size: 13px; | |
| font-weight: bold; } | |
| #top-banners a { | |
| color: #efefef !important; } | |
| #top-banners .button { | |
| margin-right: 8px; } | |
| #banners { | |
| width: auto; } | |
| #banners form { | |
| display: inline; } | |
| .banner { | |
| margin: 0 auto; | |
| width: 1000px; | |
| min-width: 1000px; | |
| max-width: 1120px; } | |
| .banner-inside { | |
| width: 975px; | |
| min-width: 975px; | |
| max-width: 1040px; | |
| position: relative; | |
| text-align: left; | |
| margin: 0 40px; | |
| padding: 8px; } | |
| .banner-inside .top-nav-right { | |
| cursor: pointer; | |
| float: right; } | |
| .banner-outer { | |
| border-bottom: 1px solid #D6E3F9; | |
| background: #394851 none no-repeat 0 0; | |
| background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #525f67), color-stop(100%, #394851)); | |
| background-image: -webkit-linear-gradient(#525f67, #394851); | |
| background-image: -moz-linear-gradient(#525f67, #394851); | |
| background-image: -o-linear-gradient(#525f67, #394851); | |
| background-image: -ms-linear-gradient(#525f67, #394851); | |
| background-image: linear-gradient(#525f67, #394851); } | |
| #push-down { | |
| clear: both; } | |
| table { | |
| border-collapse: collapse; | |
| text-align: left; | |
| margin-bottom: 15px; | |
| width: 100%; } | |
| table tr.even td { | |
| background: #f0f0f0; } | |
| table tr td { | |
| background-color: #fff; } | |
| table thead th { | |
| background-color: #e0e0e0; } | |
| table tr td, | |
| table tr th, | |
| table thead th { | |
| border-bottom: 1px solid #ccc; | |
| padding: 10px; | |
| line-height: normal; | |
| text-align: left; } | |
| th { | |
| cursor: pointer; | |
| font-weight: bold; } | |
| td.tright { | |
| text-align: right; } | |
| #age-gate { | |
| color: #000; | |
| text-align: center; } | |
| #age-gate strong { | |
| font-size: 24px; } | |
| #age-gate select { | |
| width: 80px; | |
| margin: 0 4px; } | |
| .jp-gui, | |
| .jp-play, | |
| .jp-play:hover, | |
| .jp-pause, | |
| .jp-pause:hover, | |
| .jp-stop, | |
| .jp-stop:hover, | |
| .jp-previous, | |
| .jp-next, | |
| .jp-seek-bar, | |
| .jp-play-bar, | |
| .jp-mute, | |
| .jp-unmute, | |
| .jp-volume-bar, | |
| .jp-volume-bar-value { | |
| background: transparent url("http://hark.dev/assets/audio-skin/audio-sprite.png") no-repeat top left; } | |
| .jp-audio { | |
| color: #fff; | |
| text-shadow: 1px 1px 1px #000; | |
| font-family: Helvetica, Arial, sans-serif; | |
| font-size: 11px; | |
| font-style: normal; } | |
| .jp-audio { | |
| width: 437px; } | |
| .jp-gui { | |
| position: relative; | |
| background-repeat: repeat-x; | |
| background-position: 0 -68px; | |
| width: 437px; | |
| height: 28px; } | |
| .jp-audio .jp-type-single .jp-gui { | |
| height: 28px; } | |
| .jp-controls { | |
| list-style-type: none; | |
| padding: 0; | |
| margin: 0; } | |
| .jp-controls li { | |
| display: inline; } | |
| .jp-controls a { | |
| position: absolute; | |
| overflow: hidden; | |
| text-indent: -9999px; } | |
| .jp-play, | |
| .jp-pause { | |
| width: 15px; | |
| height: 17px; | |
| z-index: 1; } | |
| .jp-audio .jp-type-single .jp-play, | |
| .jp-audio .jp-type-single .jp-pause { | |
| top: 7px; | |
| left: 12px; } | |
| .jp-play { | |
| background-position: 0 -200px; | |
| width: 15px; | |
| height: 17px; } | |
| .jp-play:hover { | |
| background-position: 0 -175px; | |
| width: 15px; | |
| height: 17px; } | |
| .jp-pause { | |
| background-position: 0 -150px; | |
| width: 15px; | |
| height: 17px; | |
| display: none; } | |
| .jp-pause:hover { | |
| background-position: 0 -125px; | |
| width: 15px; | |
| height: 17px; } | |
| .jp-audio .jp-type-single .jp-stop { | |
| top: 7px; | |
| left: 12px; } | |
| .jp-stop { | |
| display: none; | |
| background-position: 0 -323px; | |
| width: 15px; | |
| height: 17px; | |
| z-index: 1; } | |
| .jp-stop:hover { | |
| background-position: 0 -298px; | |
| width: 15px; | |
| height: 17px; } | |
| .jp-previous { | |
| top: 9px; | |
| left: 9px; | |
| background-position: 0 -225px; | |
| width: 17px; | |
| height: 13px; } | |
| .jp-next { | |
| top: 9px; | |
| left: 527px; | |
| background-position: 0 -104px; | |
| width: 17px; | |
| height: 13px; } | |
| .jp-progress { | |
| position: absolute; | |
| overflow: hidden; } | |
| .jp-audio .jp-type-single .jp-progress { | |
| top: 9px; | |
| left: 38px; | |
| width: 220px; | |
| height: 10px; } | |
| .jp-seek-bar { | |
| background-position: 0 -18px; | |
| background-repeat: repeat-x; | |
| height: 10px; | |
| width: 0; | |
| cursor: pointer; } | |
| .jp-play-bar { | |
| background-repeat: repeat-x; | |
| background-position: 0 0; | |
| width: 248px; | |
| height: 10px; } | |
| .jp-seeking-bg { | |
| background: transparent url("http://hark.dev/assets/audio-skin/bar-loading.gif") center center no-repeat; } | |
| .jp-mute, | |
| .jp-unmute { | |
| width: 19px; | |
| height: 18px; } | |
| .jp-audio .jp-type-single .jp-mute, | |
| .jp-audio .jp-type-single .jp-unmute { | |
| top: 6px; | |
| left: 339px; } | |
| .jp-mute { | |
| background-position: 0 -272px; | |
| width: 19px; | |
| height: 18px; } | |
| .jp-unmute { | |
| background-position: 0 -246px; | |
| width: 19px; | |
| height: 18px; | |
| display: none; } | |
| .jp-volume-bar { | |
| position: absolute; | |
| overflow: hidden; | |
| background-repeat: repeat-x; | |
| background-position: 0 -36px; | |
| width: 62px; | |
| height: 8px; | |
| cursor: pointer; } | |
| .jp-audio .jp-type-single .jp-volume-bar { | |
| top: 10px; | |
| left: 366px; } | |
| .jp-volume-bar-value { | |
| background-repeat: repeat-x; | |
| background-position: 0 -52px; | |
| width: 0; | |
| height: 8px; } | |
| .jp-current-time, | |
| .jp-duration { | |
| position: absolute; } | |
| .jp-duration { | |
| text-align: right; } | |
| .jp-audio .jp-type-single .jp-current-time, | |
| .jp-audio .jp-type-single .jp-duration { | |
| top: 8px; | |
| left: 268px; | |
| width: 64px; } | |
| .jp-jplayer { | |
| width: 0; | |
| height: 0; } | |
| .jp-jplayer { | |
| background-color: #000; } | |
| @media only screen and (max-width: 767px) { | |
| .jp-audio { | |
| width: 276px; } | |
| .jp-gui { | |
| width: 276px; } | |
| .jp-audio .jp-type-single .jp-mute, | |
| .jp-audio .jp-type-single .jp-unmute { | |
| left: 184px; } | |
| .jp-audio .jp-type-single .jp-progress { | |
| width: 70px; } | |
| .jp-audio .jp-type-single .jp-volume-bar { | |
| left: 206px; } | |
| .jp-audio .jp-type-single .jp-current-time, | |
| .jp-audio .jp-type-single .jp-duration { | |
| left: 115px; } } | |
| @media only screen and (min-width: 480px) and (max-width: 767px) { | |
| .jp-audio { | |
| width: 436px; } | |
| .jp-gui { | |
| width: 436px; } | |
| .jp-audio .jp-type-single .jp-mute, | |
| .jp-audio .jp-type-single .jp-unmute { | |
| left: 339px; } | |
| .jp-audio .jp-type-single .jp-progress { | |
| width: 220px; } | |
| .jp-audio .jp-type-single .jp-volume-bar { | |
| left: 366px; } | |
| .jp-audio .jp-type-single .jp-current-time, | |
| .jp-audio .jp-type-single .jp-duration { | |
| left: 268px; } } | |
| .jslider .jslider-bg i, | |
| .jslider .jslider-pointer { | |
| background: url("http://hark.dev/assets/jslider.plastic.png") no-repeat 0 0; } | |
| .jslider { | |
| display: block; | |
| width: 100%; | |
| height: 1em; | |
| position: relative; | |
| top: 0.6em; | |
| font-family: Arial, sans-serif; | |
| margin-top: 12px; } | |
| .jslider table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| border: 0; } | |
| .jslider td, .jslider th { | |
| padding: 0; | |
| vertical-align: top; | |
| text-align: left; | |
| border: 0; } | |
| .jslider table, | |
| .jslider table tr, | |
| .jslider table tr td { | |
| width: 100%; | |
| vertical-align: top; } | |
| .jslider .jslider-bg { | |
| position: relative; } | |
| .jslider .jslider-bg i { | |
| height: 5px; | |
| position: absolute; | |
| font-size: 0; | |
| top: 0; } | |
| .jslider .jslider-bg .l { | |
| width: 50%; | |
| background-position: 0 0; | |
| left: 0; } | |
| .jslider .jslider-bg .r { | |
| width: 50%; | |
| left: 50%; | |
| background-position: right 0; } | |
| .jslider .jslider-bg .v { | |
| position: absolute; | |
| width: 60%; | |
| left: 20%; | |
| top: 0; | |
| height: 5px; | |
| background-position: 0 -20px; } | |
| .jslider .jslider-pointer { | |
| width: 13px; | |
| height: 15px; | |
| background-position: 0 -40px; | |
| position: absolute; | |
| left: 20%; | |
| top: -4px; | |
| margin-left: -6px; | |
| cursor: pointer; | |
| cursor: hand; } | |
| .jslider .jslider-pointer-hover { | |
| background-position: -20px -40px; } | |
| .jslider .jslider-pointer-to { | |
| left: 80%; } | |
| .jslider .jslider-label { | |
| font-size: 9px; | |
| line-height: 12px; | |
| color: black; | |
| opacity: 0.4; | |
| white-space: nowrap; | |
| padding: 0px 2px; | |
| position: absolute; | |
| top: -18px; | |
| left: 0px; } | |
| .jslider .jslider-label-to { | |
| left: auto; | |
| right: 0; } | |
| .jslider .jslider-value { | |
| font-size: 9px; | |
| white-space: nowrap; | |
| padding: 1px 2px 0; | |
| position: absolute; | |
| top: -19px; | |
| left: 20%; | |
| background: #fff; | |
| line-height: 12px; | |
| -webkit-border-radius: 2px; | |
| -moz-border-radius: 2px; | |
| -ms-border-radius: 2px; | |
| -o-border-radius: 2px; | |
| border-radius: 2px; } | |
| .jslider .jslider-value-to { | |
| left: 80%; } | |
| .jslider .jslider-label small, | |
| .jslider .jslider-value small { | |
| position: relative; | |
| top: -0.4em; } | |
| .jslider .jslider-scale { | |
| position: relative; | |
| top: 9px; } | |
| .jslider .jslider-scale span { | |
| position: absolute; | |
| height: 5px; | |
| border-left: 1px solid #999; | |
| font-size: 0; } | |
| .jslider .jslider-scale ins { | |
| font-size: 9px; | |
| text-decoration: none; | |
| position: absolute; | |
| left: 0px; | |
| top: 5px; | |
| color: #999; } | |
| .jslider-single .jslider-pointer-to, | |
| .jslider-single .jslider-value-to, | |
| .jslider-single .jslider-bg .v, | |
| .jslider-limitless .jslider-label { | |
| display: none; } | |
| /* Example tokeninput style #2: Facebook style */ | |
| ul.token-input-list-facebook { | |
| overflow: hidden; | |
| height: auto !important; | |
| height: 1%; | |
| width: 400px; | |
| border: 1px solid #8496ba; | |
| cursor: text; | |
| font-size: 12px; | |
| font-family: Verdana; | |
| min-height: 1px; | |
| z-index: 999; | |
| margin: 0; | |
| padding: 0; | |
| background-color: #fff; } | |
| ul.token-input-list-facebook { | |
| list-style-type: none; } | |
| ul.token-input-list-facebook li input { | |
| border: 0; | |
| width: 100px; | |
| padding: 3px 8px; | |
| background-color: white; | |
| margin: 2px 0; } | |
| li.token-input-token-facebook { | |
| /*overflow: hidden;*/ | |
| /* was causing IE to overlow outside the desired box, hiding text and the remove 'x' */ | |
| height: auto !important; | |
| height: 1%; | |
| margin: 3px; | |
| padding: 1px 3px; | |
| background-color: #eff2f7; | |
| color: #000; | |
| cursor: default; | |
| border: 1px solid #ccd5e4; | |
| font-size: 11px; | |
| border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| -webkit-border-radius: 5px; | |
| float: left; } | |
| li.token-input-token-facebook p { | |
| display: inline; | |
| padding: 0; | |
| margin: 0; } | |
| li.token-input-token-facebook span { | |
| color: #a6b3cf; | |
| margin-left: 5px; | |
| font-weight: bold; | |
| cursor: pointer; } | |
| li.token-input-selected-token-facebook { | |
| background-color: #5670a6; | |
| border: 1px solid #3b5998; | |
| color: #fff; } | |
| li.token-input-input-token-facebook { | |
| float: left; } | |
| div.token-input-dropdown-facebook { | |
| position: absolute; | |
| width: 400px; | |
| background-color: #fff; | |
| overflow: hidden; | |
| border-left: 1px solid #ccc; | |
| border-right: 1px solid #ccc; | |
| border-bottom: 1px solid #ccc; | |
| cursor: default; | |
| font-size: 11px; | |
| font-family: Verdana; | |
| z-index: 1; } | |
| div.token-input-dropdown-facebook p { | |
| margin: 0; | |
| padding: 5px; | |
| font-weight: bold; | |
| color: #777; } | |
| div.token-input-dropdown-facebook ul { | |
| margin: 0; | |
| padding: 0; } | |
| div.token-input-dropdown-facebook ul li { | |
| background-color: #fff; | |
| padding: 3px; } | |
| div.token-input-dropdown-facebook ul li.token-input-dropdown-item-facebook { | |
| background-color: #fff; } | |
| div.token-input-dropdown-facebook ul li.token-input-dropdown-item2-facebook { | |
| background-color: #fff; } | |
| div.token-input-dropdown-facebook ul li em { | |
| font-weight: bold; | |
| font-style: none; } | |
| div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook { | |
| background-color: #3b5998; | |
| color: #fff; } | |
| /* main upload page styles */ | |
| #upload_alternatives { | |
| width: 760px; | |
| margin: auto; | |
| padding-top: 10px; } | |
| #upload_container { | |
| clear: both; | |
| width: 750px; | |
| margin: auto; | |
| padding: 20px 15px 15px 15px; | |
| background-color: #f8f8f8; | |
| border: 1px solid #e8e8e8; } | |
| #upload_instructions { | |
| margin-bottom: 20px; } | |
| #instruction_message { | |
| width: 560px; | |
| margin: auto; | |
| text-align: center; | |
| color: #8E8E8E; | |
| font-weight: bold; | |
| font-size: 110%; } | |
| #edit-clip-metadata td { | |
| background: #F8F8F8; } | |
| #edit-clip-metadata input, | |
| #edit-clip-metadata textarea { | |
| width: 95%; } | |
| .qq-uploader { | |
| position: relative; | |
| width: 100%; } | |
| .qq-upload-button { | |
| display: block; | |
| margin: 0 auto; | |
| width: 350px; | |
| padding: 24px 0; | |
| text-align: center; | |
| margin-bottom: 48px; | |
| background: #880000; | |
| border-bottom: 1px solid #ddd; | |
| color: #fff; | |
| font-size: 24px; | |
| font-weight: bold; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| -ms-border-radius: 4px; | |
| -o-border-radius: 4px; | |
| border-radius: 4px; | |
| -webkit-box-shadow: rgba(35, 44, 50, 0.2) 0px 0px 4px; | |
| -moz-box-shadow: rgba(35, 44, 50, 0.2) 0px 0px 4px; | |
| box-shadow: rgba(35, 44, 50, 0.2) 0px 0px 4px; | |
| background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eaa308), color-stop(100%, #f6a100)); | |
| background-image: -webkit-linear-gradient(#eaa308, #f6a100); | |
| background-image: -moz-linear-gradient(#eaa308, #f6a100); | |
| background-image: -o-linear-gradient(#eaa308, #f6a100); | |
| background-image: -ms-linear-gradient(#eaa308, #f6a100); | |
| background-image: linear-gradient(#eaa308, #f6a100); } | |
| .qq-upload-button-hover { | |
| background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8ac08), color-stop(100%, #f7a300)); | |
| background-image: -webkit-linear-gradient(#f8ac08, #f7a300); | |
| background-image: -moz-linear-gradient(#f8ac08, #f7a300); | |
| background-image: -o-linear-gradient(#f8ac08, #f7a300); | |
| background-image: -ms-linear-gradient(#f8ac08, #f7a300); | |
| background-image: linear-gradient(#f8ac08, #f7a300); } | |
| .qq-upload-button-focus { | |
| outline: 1px dotted black; } | |
| .qq-upload-drop-area { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| min-height: 70px; | |
| z-index: 2; | |
| text-align: center; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| -ms-border-radius: 4px; | |
| -o-border-radius: 4px; | |
| border-radius: 4px; | |
| -webkit-box-shadow: rgba(35, 44, 50, 0.2) 0px 0px 4px; | |
| -moz-box-shadow: rgba(35, 44, 50, 0.2) 0px 0px 4px; | |
| box-shadow: rgba(35, 44, 50, 0.2) 0px 0px 4px; | |
| background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eaa308), color-stop(100%, #f6a100)); | |
| background-image: -webkit-linear-gradient(#eaa308, #f6a100); | |
| background-image: -moz-linear-gradient(#eaa308, #f6a100); | |
| background-image: -o-linear-gradient(#eaa308, #f6a100); | |
| background-image: -ms-linear-gradient(#eaa308, #f6a100); | |
| background-image: linear-gradient(#eaa308, #f6a100); } | |
| .qq-upload-drop-area span { | |
| display: block; | |
| position: absolute; | |
| top: 50%; | |
| width: 100%; | |
| margin-top: -8px; | |
| font-size: 20px; | |
| font-weight: bold; } | |
| .qq-upload-drop-area-active { | |
| background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8ac08), color-stop(100%, #f7a300)); | |
| background-image: -webkit-linear-gradient(#f8ac08, #f7a300); | |
| background-image: -moz-linear-gradient(#f8ac08, #f7a300); | |
| background-image: -o-linear-gradient(#f8ac08, #f7a300); | |
| background-image: -ms-linear-gradient(#f8ac08, #f7a300); | |
| background-image: linear-gradient(#f8ac08, #f7a300); } | |
| .qq-upload-list { | |
| margin: 8px 4px; | |
| padding: 0; | |
| list-style: disc; } | |
| .qq-upload-list li { | |
| border: 1px solid #ccc; | |
| margin: 0; | |
| padding: 6px 4px; | |
| margin-bottom: 2px; | |
| font-size: 14px; | |
| line-height: 20px; } | |
| .qq-upload-file, | |
| .qq-upload-spinner, | |
| .qq-upload-size, | |
| .qq-upload-cancel, | |
| .qq-upload-failed-text, | |
| .edit-clip { | |
| margin-right: 8px; } | |
| .qq-upload-file { | |
| display: inline-block; | |
| width: 550px; | |
| overflow: hidden; | |
| padding-left: 8px; } | |
| .qq-upload-size { | |
| display: inline-block; | |
| width: 40px; } | |
| .qq-upload-spinner { | |
| display: inline-block; | |
| background: transparent url("http://hark.dev/assets/audio-skin/bar-loading.gif") no-repeat 0 0; | |
| width: 16px; | |
| height: 16px; | |
| vertical-align: bottom; } | |
| .qq-upload-size, | |
| .qq-upload-cancel, | |
| .edit-clip { | |
| font-size: 12px; } | |
| .qq-upload-failed-text { | |
| display: none; } | |
| .qq-upload-fail .qq-upload-failed-text { | |
| display: inline; } | |
| .edit-clip { | |
| display: inline-block; | |
| font-weight: bold; | |
| cursor: pointer; } | |
| #metadata_prev, | |
| #metadata_next { | |
| cursor: pointer; } | |
| #hide { | |
| display: none; } | |
| #signin-container { | |
| z-index: 10000; | |
| display: block; } | |
| #signin-menu { | |
| padding: 12px; | |
| top: 36px; | |
| right: 0px; | |
| margin-top: 5px; | |
| margin-right: 0px; | |
| font-size: 11px; } | |
| #signin-menu #user_email, | |
| #signin-menu #user_password { | |
| display: block; | |
| border: 1px solid #ACE; | |
| font-size: 12px; | |
| margin: 0 0 8px; | |
| padding: 5px; | |
| width: 96%; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| -ms-border-radius: 4px; | |
| -o-border-radius: 4px; | |
| border-radius: 4px; } | |
| #signin-menu p { | |
| margin: 0; } | |
| #signin-menu p a { | |
| color: #495f82 !important; } | |
| #signin-menu a { | |
| color: #495f82 !important; } | |
| #signin-menu label { | |
| font-size: 14px; | |
| color: #333333; | |
| margin-top: 2px; } | |
| #signin-menu p.remember { | |
| padding: 10px 0; | |
| float: left; } | |
| #signin-menu p.new-user { | |
| float: right; } | |
| #signin-menu #facebook-login { | |
| margin-top: 4px; | |
| display: block; } | |
| #signin-menu .sign-in-submit { | |
| cursor: pointer; | |
| border: 1px solid #495f82; | |
| background: #495f82; | |
| color: #ffe; | |
| text-shadow: 0 -1px 0 #3399dd; | |
| padding: 4px 10px 5px; | |
| font-size: 11px; | |
| margin: 0 5px 0 0; | |
| font-weight: bold; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| -ms-border-radius: 4px; | |
| -o-border-radius: 4px; | |
| border-radius: 4px; | |
| background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #718ab6), color-stop(100%, #495f82)); | |
| background-image: -webkit-linear-gradient(#718ab6, #495f82); | |
| background-image: -moz-linear-gradient(#718ab6, #495f82); | |
| background-image: -o-linear-gradient(#718ab6, #495f82); | |
| background-image: -ms-linear-gradient(#718ab6, #495f82); | |
| background-image: linear-gradient(#718ab6, #495f82); } | |
| body { | |
| color: #333; | |
| background-color: #D9E4F2; | |
| background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bdd3e8), color-stop(100%, #e7f0f9)); | |
| background-image: -webkit-linear-gradient(#bdd3e8, #e7f0f9); | |
| background-image: -moz-linear-gradient(#bdd3e8, #e7f0f9); | |
| background-image: -o-linear-gradient(#bdd3e8, #e7f0f9); | |
| background-image: -ms-linear-gradient(#bdd3e8, #e7f0f9); | |
| background-image: linear-gradient(#bdd3e8, #e7f0f9); | |
| min-height: 600px; | |
| -webkit-text-size-adjust: 100%; } | |
| .container { | |
| width: 970px; | |
| margin: 0 auto; } | |
| #main-content { | |
| float: left; } | |
| .fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr { | |
| display: none !important; } | |
| /* General Content | |
| --------------------------------------------------*/ | |
| #content { | |
| position: relative; | |
| margin-bottom: 16px; } | |
| h1.title { | |
| font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| letter-spacing: -1px; | |
| font-size: 26px; | |
| font-weight: normal; | |
| margin: 16px 0 8px 0; } | |
| .title span { | |
| font-size: 16px; | |
| color: #aaaaaa; } | |
| input::-webkit-input-placeholder { | |
| color: #787979 !important; } | |
| input:-moz-placeholder { | |
| color: #787979 !important; } | |
| .section-head { | |
| margin: 0; | |
| color: #ffffff; | |
| padding: 12px; | |
| -moz-border-radius-topleft: 16px; | |
| -webkit-border-top-left-radius: 16px; | |
| -ms-border-top-left-radius: 16px; | |
| -o-border-top-left-radius: 16px; | |
| border-top-left-radius: 16px; | |
| -moz-border-radius-topright: 16px; | |
| -webkit-border-top-right-radius: 16px; | |
| -ms-border-top-right-radius: 16px; | |
| -o-border-top-right-radius: 16px; | |
| border-top-right-radius: 16px; } | |
| .section-head h1, .section-head h2, .section-head h3 { | |
| font-family: 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif; | |
| font-size: 20px; | |
| font-weight: bold; | |
| max-width: 352px; } | |
| .section-head h1.full-width, .section-head h2.full-width, .section-head h3.full-width { | |
| max-width: 600px !important; | |
| width: 600px !important; } | |
| .section-head a { | |
| color: #eeeeee; } | |
| .section-head .amazon { | |
| margin: 0 2px 8px 0; | |
| text-indent: -9999px; | |
| width: 151px; | |
| height: 40px; | |
| display: block; | |
| background: transparent url("http://hark.dev/assets/icons/button-amazon-short.png") no-repeat 0 0; | |
| float: left; } | |
| .section-head .netflix { | |
| margin: 0 2px 8px 0; | |
| text-indent: -9999px; | |
| width: 151px; | |
| height: 40px; | |
| display: block; | |
| background: transparent url("http://hark.dev/assets/icons/button-netflix-short.png") no-repeat 0 0; | |
| float: left; } | |
| .section-head .wbshop { | |
| margin: 0 2px 8px 0; | |
| text-indent: -9999px; | |
| width: 151px; | |
| height: 40px; | |
| display: block; | |
| background: transparent url("http://hark.dev/assets/icons/button-wbshop-short.png") no-repeat 0 0; | |
| float: left; } | |
| #control-panel { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| background: rgba(245, 245, 245, 0.8); | |
| font-size: 18px; | |
| font-weight: bold; | |
| padding: 12px; | |
| text-align: center; | |
| width: 100%; } | |
| /* Ads | |
| --------------------------------------------------*/ | |
| #top-leaderboard { | |
| white-space: nowrap; | |
| margin: 0 auto 28px auto; | |
| min-height: 60px; | |
| min-width: 728px; | |
| z-index: 1; } | |
| #middle-leaderboard { | |
| width: 728px; | |
| height: 104px; | |
| margin: 0 auto; | |
| z-index: 1; | |
| background-color: #06466b; | |
| -moz-border-radius-bottomleft: 14px; | |
| -webkit-border-bottom-left-radius: 14px; | |
| -ms-border-bottom-left-radius: 14px; | |
| -o-border-bottom-left-radius: 14px; | |
| border-bottom-left-radius: 14px; | |
| -moz-border-radius-bottomright: 14px; | |
| -webkit-border-bottom-right-radius: 14px; | |
| -ms-border-bottom-right-radius: 14px; | |
| -o-border-bottom-right-radius: 14px; | |
| border-bottom-right-radius: 14px; } | |
| #sponsor_content { | |
| position: relative; } | |
| #skyscraper-ad { | |
| width: 160px; | |
| position: absolute; | |
| left: 998px; | |
| top: 0px; } | |
| #bottom-ad { | |
| width: 728px; | |
| margin: 0 auto 8px auto; | |
| clear: both; } | |
| .sidebar-medium-rectangle { | |
| width: 300px; | |
| margin: 0 0 16px 0; | |
| padding-top: 16px; | |
| background-color: #06466b; | |
| -moz-border-radius-topleft: 14px; | |
| -webkit-border-top-left-radius: 14px; | |
| -ms-border-top-left-radius: 14px; | |
| -o-border-top-left-radius: 14px; | |
| border-top-left-radius: 14px; | |
| -moz-border-radius-topright: 14px; | |
| -webkit-border-top-right-radius: 14px; | |
| -ms-border-top-right-radius: 14px; | |
| -o-border-top-right-radius: 14px; | |
| border-top-right-radius: 14px; } | |
| .sidebar-skyscraper { | |
| width: 160px; | |
| margin: 0 auto; } | |
| .companion-ad { | |
| width: 300px; | |
| margin: 0 auto 16px auto; } | |
| #middle-leaderboard { | |
| clear: both; | |
| margin: 20px auto 40px auto; | |
| position: relative; | |
| top: 20px; } | |
| /* Header | |
| --------------------------------------------------*/ | |
| #header { | |
| padding: 12px 0 15px; | |
| position: relative; } | |
| #header #logo { | |
| text-indent: -9999em; | |
| background: transparent url("http://hark.dev/assets/inner-logo.png") no-repeat 0 0; | |
| margin-top: -36px; } | |
| #header #logo a { | |
| display: block; | |
| width: 110px; | |
| height: 80px; } | |
| #header.sponsored { | |
| text-shadow: 0px 0px 3px #dce6f2; } | |
| /* Site Navigation | |
| --------------------------------------------------*/ | |
| #top-nav { | |
| float: left; | |
| z-index: 100; | |
| border: 1px solid transparent; | |
| background: transparent; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| -ms-border-radius: 4px; | |
| -o-border-radius: 4px; | |
| border-radius: 4px; } | |
| #top-nav a { | |
| color: #044F7A; } | |
| #top-nav li { | |
| list-style: none; } | |
| #top-nav > li { | |
| float: left; | |
| position: relative; | |
| margin-right: 8px; } | |
| #top-nav > li > a { | |
| font-size: 16px; | |
| font-weight: bold; | |
| padding: 6px; | |
| padding-left: 0; | |
| display: block; | |
| text-decoration: none; | |
| position: relative; | |
| z-index: 4; | |
| border: 1px solid transparent; | |
| border-bottom: 0; } | |
| #top-nav > li > a:hover { | |
| color: #323232; } | |
| #search-terms { | |
| background-color: white; | |
| border: 1px solid #316292; | |
| border: 1px solid rgba(49, 98, 146, 0.9); | |
| padding: 6px 6px 6px 8px; | |
| font-size: 12px; | |
| width: 150px; | |
| margin: -1px 8px 0 0; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| -ms-border-radius: 4px; | |
| -o-border-radius: 4px; | |
| border-radius: 4px; | |
| -webkit-box-shadow: rgba(35, 44, 50, 0.4) 0px 0px 4px; | |
| -moz-box-shadow: rgba(35, 44, 50, 0.4) 0px 0px 4px; | |
| box-shadow: rgba(35, 44, 50, 0.4) 0px 0px 4px; } | |
| #search-button { | |
| margin: -2px 0 0 0; } | |
| .placeholder { | |
| color: #787979 !important; } | |
| /* User Nav | |
| --------------------------------------------------*/ | |
| #user-nav { | |
| float: right; } | |
| #user-nav li { | |
| font-size: 12px; | |
| font-weight: bold; | |
| float: left; | |
| margin: 8px 8px 0 0; } | |
| /* Clips | |
| --------------------------------------------------*/ | |
| #clip-head { | |
| background-color: #406a96; | |
| background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #406a96), color-stop(100%, #21374f)); | |
| background-image: -webkit-linear-gradient(#406a96, #21374f); | |
| background-image: -moz-linear-gradient(#406a96, #21374f); | |
| background-image: -o-linear-gradient(#406a96, #21374f); | |
| background-image: -ms-linear-gradient(#406a96, #21374f); | |
| background-image: linear-gradient(#406a96, #21374f); | |
| border: 1px solid #406a96; | |
| width: 634px; | |
| text-shadow: 0 1px 1px #406a96; } | |
| #clip-head h1, #clip-head h2, #clip-head h3 { | |
| font-size: 20px; | |
| font-weight: bold; | |
| max-width: 352px; } | |
| #clip-head .uploader { | |
| padding-top: 4px; | |
| font-size: 11px; } | |
| #clip-head .uploader a { | |
| font-weight: bold; } | |
| #clip-head .content-owner { | |
| float: left; | |
| margin-right: 8px; } | |
| #clip-head .title-image { | |
| max-width: 180px; | |
| height: 90px; | |
| overflow: hidden; | |
| float: right; } | |
| #feature, | |
| .feature-block { | |
| margin: 0 0 16px 0; | |
| width: 634px; | |
| float: left; | |
| background-color: #ffffff; | |
| padding: 12px; | |
| border: 1px solid #cdcdcf; | |
| border-top: 0; | |
| -moz-border-radius-bottomleft: 16px; | |
| -webkit-border-bottom-left-radius: 16px; | |
| -ms-border-bottom-left-radius: 16px; | |
| -o-border-bottom-left-radius: 16px; | |
| border-bottom-left-radius: 16px; | |
| -moz-border-radius-bottomright: 16px; | |
| -webkit-border-bottom-right-radius: 16px; | |
| -ms-border-bottom-right-radius: 16px; | |
| -o-border-bottom-right-radius: 16px; | |
| border-bottom-right-radius: 16px; } | |
| #feature #feature-left, | |
| .feature-block #feature-left { | |
| float: left; | |
| width: 210px; } | |
| #feature #feature-left #clip-navigation, | |
| .feature-block #feature-left #clip-navigation { | |
| padding-bottom: 48px; } | |
| #feature #feature-left #clip-navigation .clip-title, | |
| .feature-block #feature-left #clip-navigation .clip-title { | |
| color: #066e98; | |
| font-size: 14px; | |
| font-family: Georgia, serif; | |
| text-align: center; } | |
| #feature #feature-left #clip-navigation .clip-title img, | |
| .feature-block #feature-left #clip-navigation .clip-title img { | |
| display: inline; | |
| margin-top: 8px; | |
| width: 140px; } | |
| #feature #feature-left #clip-navigation .clip-nav, | |
| .feature-block #feature-left #clip-navigation .clip-nav { | |
| cursor: pointer; | |
| position: relative; | |
| padding: 24px 0; | |
| width: 180px; | |
| text-align: center; | |
| font-size: 16px; | |
| font-weight: bold; | |
| color: #ffffff; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -o-user-select: none; | |
| user-select: none; } | |
| #feature #feature-left #clip-next, | |
| .feature-block #feature-left #clip-next { | |
| background-color: #319ad4; | |
| margin: 16px 0 10px -12px; } | |
| #feature #feature-left #clip-next-arrow, | |
| .feature-block #feature-left #clip-next-arrow { | |
| border-color: transparent transparent transparent #309ad4; | |
| border-style: solid; | |
| border-width: 31px; | |
| height: 0; | |
| width: 0; | |
| position: absolute; | |
| bottom: 0px; | |
| right: -61px; } | |
| #feature #feature-left #clip-prev, | |
| .feature-block #feature-left #clip-prev { | |
| background-color: #878787; | |
| margin: 0 0 10px 30px; } | |
| #feature #feature-left #clip-prev-arrow, | |
| .feature-block #feature-left #clip-prev-arrow { | |
| border-color: transparent #878787 transparent transparent; | |
| border-style: solid; | |
| border-width: 31px; | |
| height: 0; | |
| width: 0; | |
| position: absolute; | |
| bottom: 0px; | |
| left: -61px; } | |
| #feature #feature-left #related-collections h3, | |
| .feature-block #feature-left #related-collections h3 { | |
| text-decoration: underline; | |
| margin: 0 0 4px; } | |
| #feature #feature-left #related-collections .related-collection, | |
| .feature-block #feature-left #related-collections .related-collection { | |
| float: left; | |
| margin: 0 4px 8px 0; | |
| text-align: center; | |
| width: 70px; | |
| height: 120px; } | |
| #feature #feature-left #related-collections .related-collection a.image-link, | |
| .feature-block #feature-left #related-collections .related-collection a.image-link { | |
| display: block; | |
| height: 120px; | |
| width: 120px; } | |
| #feature #feature-left #related-collections .related-collection img, | |
| .feature-block #feature-left #related-collections .related-collection img { | |
| text-align: center; | |
| display: inline; } | |
| #feature #feature-left #related-collections .related-collection strong, | |
| .feature-block #feature-left #related-collections .related-collection strong { | |
| display: block; | |
| margin: 8px 0 8px 0; } | |
| #feature #feature-right, | |
| .feature-block #feature-right { | |
| width: 420px; | |
| padding: 0 0 18px 0; | |
| float: left; } | |
| #feature #feature-right #player, | |
| .feature-block #feature-right #player { | |
| width: 424px; | |
| margin: 0 0 8px 0; | |
| position: relative; } | |
| #feature #feature-right #player object, | |
| .feature-block #feature-right #player object { | |
| display: block; | |
| margin: 0 auto; } | |
| #feature #feature-right .quote-title, | |
| #feature #feature-right .description-title, | |
| .feature-block #feature-right .quote-title, | |
| .feature-block #feature-right .description-title { | |
| clear: both; | |
| margin: 24px 0; | |
| width: 100%; | |
| font-size: 9px; | |
| color: #000; | |
| text-transform: uppercase; | |
| text-align: center; | |
| border-top: 1px solid #ededed; | |
| cursor: pointer; | |
| background-color: #e8e8e8; | |
| background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbfbfb), color-stop(100%, #e8e8e8)); | |
| background-image: -webkit-linear-gradient(#fbfbfb, #e8e8e8); | |
| background-image: -moz-linear-gradient(#fbfbfb, #e8e8e8); | |
| background-image: -o-linear-gradient(#fbfbfb, #e8e8e8); | |
| background-image: -ms-linear-gradient(#fbfbfb, #e8e8e8); | |
| background-image: linear-gradient(#fbfbfb, #e8e8e8); } | |
| #feature #feature-right #clip-quote, | |
| #feature #feature-right #clip-description, | |
| .feature-block #feature-right #clip-quote, | |
| .feature-block #feature-right #clip-description { | |
| padding: 0 8px; | |
| color: #979797; | |
| font-family: Georgia, serif; | |
| font-style: italic; | |
| font-size: 20px; | |
| line-height: 24px; } | |
| #clip-collection-head { | |
| float: left; | |
| background-color: #85674f; | |
| background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #85674f), color-stop(100%, #453529)); | |
| background-image: -webkit-linear-gradient(#85674f, #453529); | |
| background-image: -moz-linear-gradient(#85674f, #453529); | |
| background-image: -o-linear-gradient(#85674f, #453529); | |
| background-image: -ms-linear-gradient(#85674f, #453529); | |
| background-image: linear-gradient(#85674f, #453529); | |
| width: 634px; } | |
| #clip-collection-head h1, #clip-collection-head h2, #clip-collection-head h3 { | |
| font-size: 20px; | |
| font-weight: bold; } | |
| #clip-collection-head h1 a, #clip-collection-head h2 a, #clip-collection-head h3 a { | |
| color: #ffffff; } | |
| #clip-collection-head .title-image { | |
| max-width: 180px; | |
| height: 90px; | |
| overflow: hidden; } | |
| #clip-collection { | |
| margin: 0 0 16px 0; | |
| width: 634px; | |
| float: left; | |
| background-color: #ffffff; | |
| padding: 12px; | |
| border: 1px solid #cdcdcf; | |
| border-top: 0; | |
| -moz-border-radius-bottomleft: 16px; | |
| -webkit-border-bottom-left-radius: 16px; | |
| -ms-border-bottom-left-radius: 16px; | |
| -o-border-bottom-left-radius: 16px; | |
| border-bottom-left-radius: 16px; | |
| -moz-border-radius-bottomright: 16px; | |
| -webkit-border-bottom-right-radius: 16px; | |
| -ms-border-bottom-right-radius: 16px; | |
| -o-border-bottom-right-radius: 16px; | |
| border-bottom-right-radius: 16px; } | |
| #clip-search { | |
| float: left; | |
| width: 250px; } | |
| #clip-search .search-section { | |
| padding: 8px 0 8px 8px; } | |
| #clip-search .search-section h3 { | |
| text-decoration: underline; } | |
| #clip-search .search-section label { | |
| display: inline-block; | |
| width: 70px; } | |
| #clip-search .search-section a { | |
| color: #0f759e; } | |
| #clip-search .search-section li { | |
| font-size: 13px; | |
| line-height: 22px; } | |
| #clip-search #collection-share { | |
| margin-left: -12px; } | |
| #clip-search #collection-share li { | |
| width: 60px; | |
| max-height: 70px; | |
| float: left; | |
| overflow: hidden; } | |
| #clip-search #collection-share .tumblr-button { | |
| display: inline-block; | |
| text-indent: -9999px; | |
| height: 65px; | |
| width: 48px; | |
| overflow: hidden; | |
| background: url("http://hark.dev/assets/buttons/button-tumblr-48px.png") top left no-repeat transparent; } | |
| #clip-list { | |
| float: left; | |
| width: 380px; } | |
| .pagination { | |
| margin-top: 24px; | |
| overflow: hidden; } | |
| .pagination a, .pagination em, .pagination span { | |
| display: block; | |
| float: left; | |
| font-size: 11px; | |
| color: #099bca; | |
| background-color: #ececec; | |
| padding: 8px; | |
| margin-left: 5px; } | |
| .pagination a:hover, .pagination em:hover, .pagination span:hover { | |
| color: #a4e6fb; | |
| background-color: #868686; | |
| -webkit-transition-property: all; | |
| -moz-transition-property: all; | |
| -ms-transition-property: all; | |
| -o-transition-property: all; | |
| transition-property: all; | |
| -webkit-transition-duration: 0.8s; | |
| -moz-transition-duration: 0.8s; | |
| -ms-transition-duration: 0.8s; | |
| -o-transition-duration: 0.8s; | |
| transition-duration: 0.8s; | |
| -webkit-transition-timing-function: ease-out; | |
| -moz-transition-timing-function: ease-out; | |
| -ms-transition-timing-function: ease-out; | |
| -o-transition-timing-function: ease-out; | |
| transition-timing-function: ease-out; } | |
| .pagination .current, | |
| .pagination .current a, | |
| .pagination .current span { | |
| background-color: #333333; | |
| color: #6bfff9; } | |
| .pagination .disabled, | |
| .pagination .disabled a, | |
| .pagination .disabled span { | |
| color: #6d6d6d; } | |
| .view-all, | |
| .collection-link { | |
| float: left; | |
| font-size: 11px; | |
| background-color: #ececec; | |
| padding: 4px; | |
| margin-left: 5px; | |
| color: #099bca; } | |
| .collection-link { | |
| float: right; } | |
| .clip-row { | |
| line-height: 20px; | |
| font-family: Georgia, serif; | |
| padding: 12px 8px; | |
| border: 1px solid transparent; | |
| border-bottom: 1px dotted black; | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.1); | |
| overflow: hidden; | |
| background-color: transparent; | |
| z-index: 1; | |
| -webkit-transition-property: background; | |
| -moz-transition-property: background; | |
| -ms-transition-property: background; | |
| -o-transition-property: background; | |
| transition-property: background; | |
| -webkit-transition-duration: 0.8s; | |
| -moz-transition-duration: 0.8s; | |
| -ms-transition-duration: 0.8s; | |
| -o-transition-duration: 0.8s; | |
| transition-duration: 0.8s; | |
| -webkit-transition-timing-function: ease-out; | |
| -moz-transition-timing-function: ease-out; | |
| -ms-transition-timing-function: ease-out; | |
| -o-transition-timing-function: ease-out; | |
| transition-timing-function: ease-out; } | |
| .clip-row .clip-text { | |
| float: left; | |
| width: 312px; } | |
| .clip-row .clip-text .clip-quote { | |
| letter-spacing: -1px; | |
| font-size: 14px; | |
| color: #9f9f9f; | |
| font-style: italic; } | |
| .clip-row .clip-text .clip-title { | |
| padding: 8px 0 0 0; | |
| font-size: 18px; | |
| color: #07668d; } | |
| .clip-row .play-clip { | |
| float: right; | |
| bottom: 0; } | |
| .clip-row .collection-image { | |
| width: 120px; | |
| float: left; | |
| margin: 0 8px 0 0; } | |
| .clip-row .collection-image img { | |
| margin: 0 auto; } | |
| .clip-row:hover { | |
| background: #ffffc6; | |
| border: 1px solid #e4d1a5; | |
| z-index: 3; | |
| -webkit-box-shadow: rgba(35, 44, 50, 0.2) 0px 0px 4px; | |
| -moz-box-shadow: rgba(35, 44, 50, 0.2) 0px 0px 4px; | |
| box-shadow: rgba(35, 44, 50, 0.2) 0px 0px 4px; | |
| background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f2f2b0), color-stop(100%, #ffffc6)); | |
| background-image: -webkit-linear-gradient(#f2f2b0, #ffffc6); | |
| background-image: -moz-linear-gradient(#f2f2b0, #ffffc6); | |
| background-image: -o-linear-gradient(#f2f2b0, #ffffc6); | |
| background-image: -ms-linear-gradient(#f2f2b0, #ffffc6); | |
| background-image: linear-gradient(#f2f2b0, #ffffc6); } | |
| .clip-row.active { | |
| margin: 4px; | |
| border: 1px solid #77899d; | |
| padding: 10px 5px; | |
| background: #b3ceed; | |
| cursor: pointer; | |
| z-index: 2; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| -ms-border-radius: 4px; | |
| -o-border-radius: 4px; | |
| border-radius: 4px; | |
| -webkit-box-shadow: rgba(35, 44, 50, 0.5) 0px 0px 4px; | |
| -moz-box-shadow: rgba(35, 44, 50, 0.5) 0px 0px 4px; | |
| box-shadow: rgba(35, 44, 50, 0.5) 0px 0px 4px; | |
| background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a2bad6), color-stop(100%, #b3ceed)); | |
| background-image: -webkit-linear-gradient(#a2bad6, #b3ceed); | |
| background-image: -moz-linear-gradient(#a2bad6, #b3ceed); | |
| background-image: -o-linear-gradient(#a2bad6, #b3ceed); | |
| background-image: -ms-linear-gradient(#a2bad6, #b3ceed); | |
| background-image: linear-gradient(#a2bad6, #b3ceed); } | |
| /* More Clips | |
| --------------------------------------------------*/ | |
| #more-clips-head { | |
| background-color: #505a42; | |
| background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #505a42), color-stop(100%, #1c1f17)); | |
| background-image: -webkit-linear-gradient(#505a42, #1c1f17); | |
| background-image: -moz-linear-gradient(#505a42, #1c1f17); | |
| background-image: -o-linear-gradient(#505a42, #1c1f17); | |
| background-image: -ms-linear-gradient(#505a42, #1c1f17); | |
| background-image: linear-gradient(#505a42, #1c1f17); | |
| border: 1px solid #505a42; | |
| width: 634px; | |
| text-shadow: 0 1px 1px #406a96; } | |
| #more-clips-head h1, #more-clips-head h2, #more-clips-head h3 { | |
| font-size: 20px; | |
| font-weight: bold; | |
| max-width: 352px; } | |
| /* Curated Collections | |
| --------------------------------------------------*/ | |
| #clip-slide-container { | |
| width: 437px; | |
| min-height: 120px; | |
| background: #000000; | |
| margin: -12px 0 0 0; } | |
| #clip-slide-container .large-image { | |
| background: #000; | |
| width: 437px; | |
| min-height: 200px; | |
| margin: 0 auto; | |
| position: relative; | |
| overflow: hidden; } | |
| #clip-slide-container #current-quote { | |
| position: absolute; | |
| bottom: -1px; | |
| left: 0px; | |
| width: 397px; | |
| padding: 20px; | |
| background: #2b2c26; | |
| background: rgba(43, 44, 38, 0.6); | |
| color: #efefef; | |
| font-size: 12px; | |
| font-weight: bold; | |
| text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); | |
| opacity: 0.4; | |
| z-index: 10; | |
| -webkit-transition-property: opacity; | |
| -moz-transition-property: opacity; | |
| -ms-transition-property: opacity; | |
| -o-transition-property: opacity; | |
| transition-property: opacity; | |
| -webkit-transition-duration: 0.3s; | |
| -moz-transition-duration: 0.3s; | |
| -ms-transition-duration: 0.3s; | |
| -o-transition-duration: 0.3s; | |
| transition-duration: 0.3s; | |
| -webkit-transition-timing-function: ease-out; | |
| -moz-transition-timing-function: ease-out; | |
| -ms-transition-timing-function: ease-out; | |
| -o-transition-timing-function: ease-out; | |
| transition-timing-function: ease-out; } | |
| #clip-slide-container #current-quote:hover { | |
| opacity: 1.0; } | |
| #player-overlay { | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -o-user-select: none; | |
| user-select: none; } | |
| #player-overlay-button { | |
| cursor: pointer; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| margin-left: -64px; | |
| margin-top: -64px; | |
| z-index: 2; } | |
| #player-overlay-close { | |
| cursor: pointer; | |
| position: absolute; | |
| width: 30px; | |
| height: 30px; | |
| top: 5%; | |
| right: 3%; | |
| z-index: 2; } | |
| #player-overlay-text { | |
| font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| font-weight: 300; | |
| font-size: 16px; | |
| position: absolute; | |
| top: 25%; | |
| left: 66%; | |
| z-index: 2; | |
| color: #ffefff; | |
| width: 150px; } | |
| #player-overlay-countdown { | |
| font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| font-size: 100px; | |
| letter-spacing: -4px; | |
| position: absolute; | |
| top: 45%; | |
| left: 66%; | |
| color: #ffefff; | |
| z-index: 2; } | |
| #player-overlay-autoadvance { | |
| cursor: pointer; | |
| font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| font-weight: 300; | |
| font-size: 12px; | |
| position: absolute; | |
| top: 68%; | |
| left: 66%; | |
| z-index: 2; | |
| color: #ffefff; | |
| width: 150px; } | |
| #player-overlay-bg { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-color: #000; | |
| opacity: 0.4; | |
| z-index: 1; | |
| -webkit-border-radius: 8px; | |
| -moz-border-radius: 8px; | |
| -ms-border-radius: 8px; | |
| -o-border-radius: 8px; | |
| border-radius: 8px; | |
| -webkit-transition-property: opacity; | |
| -moz-transition-property: opacity; | |
| -ms-transition-property: opacity; | |
| -o-transition-property: opacity; | |
| transition-property: opacity; | |
| -webkit-transition-duration: 0.3s; | |
| -moz-transition-duration: 0.3s; | |
| -ms-transition-duration: 0.3s; | |
| -o-transition-duration: 0.3s; | |
| transition-duration: 0.3s; | |
| -webkit-transition-timing-function: ease-out; | |
| -moz-transition-timing-function: ease-out; | |
| -ms-transition-timing-function: ease-out; | |
| -o-transition-timing-function: ease-out; | |
| transition-timing-function: ease-out; } | |
| #audio-container { | |
| float: left; | |
| overflow: hidden; } | |
| #buttons { | |
| margin: 8px 0 16px 0; | |
| clear: both; } | |
| #buttons #clip-share li { | |
| width: 65px; | |
| height: 70px; | |
| float: left; | |
| overflow: hidden; } | |
| #buttons #clip-share .tumblr-button, | |
| #buttons #clip-share .facebook-share-button, | |
| #buttons #clip-share .email-button { | |
| display: inline-block; | |
| text-indent: -9999px; | |
| height: 65px; | |
| width: 48px; | |
| overflow: hidden; } | |
| #buttons #clip-share .tumblr-button { | |
| background: url("http://hark.dev/assets/buttons/button-tumblr-48px.png") top left no-repeat transparent; } | |
| #buttons #clip-share .facebook-share-button { | |
| background: url("http://hark.dev/assets/buttons/button-facebook-48px.png") top left no-repeat transparent; } | |
| #buttons #clip-share .email-button { | |
| background: url("http://hark.dev/assets/buttons/button-email-48px.png") top left no-repeat transparent; } | |
| #tools { | |
| font: bold 10px 'Helvetica Neue','Helvetica', 'Arial', sans-serif !important; | |
| line-height: normal; | |
| text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); | |
| text-transform: uppercase; | |
| margin: 4px 0; } | |
| #tools div { | |
| line-height: 9px; | |
| display: inline-block; | |
| overflow: hidden; | |
| text-decoration: none; | |
| vertical-align: middle; | |
| cursor: pointer; | |
| margin: 8px 0; | |
| padding: 0px 4px 2px 13px; | |
| background: url("http://hark.dev/assets/icons/10x10-sprite.png") no-repeat top left; } | |
| #tools .clip-email { | |
| background-position: 0 -18px; | |
| height: 10px; } | |
| #tools .clip-embed { | |
| background-position: 0 -18px; | |
| height: 10px; } | |
| #tools .clip-ringtone { | |
| background-position: 0 -54px; | |
| height: 10px; } | |
| #tools .clip-download { | |
| background-position: 0 0; | |
| height: 10px; } | |
| /* Curated Movies | |
| --------------------------------------------------*/ | |
| #feature.curated-movie { | |
| clear: both; | |
| margin-bottom: 16px; | |
| float: none; } | |
| #featured-clips { | |
| display: inline-block; | |
| padding-bottom: 10px; | |
| margin-bottom: 10px; | |
| border-bottom: 1px solid #ccc; } | |
| #featured-clip { | |
| position: relative; | |
| float: left; | |
| padding-right: 12px; | |
| width: 320px; } | |
| #featured-clip h2 { | |
| letter-spacing: -1px; } | |
| #featured-clip #featured-clip-image { | |
| display: block; } | |
| #featured-clip #featured-clip-player { | |
| margin-top: 2px; } | |
| #featured-clip .clip-actions { | |
| margin-bottom: 4px; } | |
| #featured-clip #featured-clip-quote { | |
| line-height: 18px; | |
| color: #979797; | |
| font-family: Georgia, serif; | |
| font-style: italic; | |
| font-size: 13px; } | |
| #more-featured-clips { | |
| float: left; | |
| width: 302px; } | |
| #more-featured-clips h2 { | |
| letter-spacing: -1px; } | |
| #more-featured-clips .feature-clip { | |
| position: relative; | |
| float: left; | |
| width: 94px; | |
| height: 108px; | |
| overflow: hidden; | |
| cursor: pointer; } | |
| #more-featured-clips .feature-clip .mini-clip-text { | |
| font-size: 12px; | |
| letter-spacing: -1px; | |
| font-weight: bold; | |
| visibility: visible !important; | |
| text-align: center; | |
| margin: 4px 0; } | |
| .overlay { | |
| position: absolute; | |
| display: none; | |
| z-index: 999; | |
| cursor: pointer; } | |
| .overlay-large { | |
| top: 25px; | |
| left: 130px; } | |
| .overlay-small { | |
| top: 40%; | |
| left: 50px; } | |
| .collection-navigation li { | |
| font-size: 14px; | |
| line-height: 18px; | |
| padding: 4px 0 4px 2px; | |
| margin: 2px 0; | |
| cursor: pointer; } | |
| .collection-navigation li:hover { | |
| font-weight: bold; | |
| padding: 4px 0 4px 8px; | |
| background-color: rgba(148, 132, 70, 0.1); | |
| border-radius: 4px; | |
| box-shadow: inset 1px 1px 1px 2px rgba(148, 132, 70, 0.2); | |
| width: 190px; | |
| -moz-transition-property: padding, background-color, border-radius, box-shadow; | |
| -webkit-transition-property: padding, background-color, border-radius, box-shadow; | |
| -o-transition-property: padding, background-color, border-radius, box-shadow; | |
| transition-property: padding, background-color, border-radius, box-shadow; | |
| -moz-transition-duration: 0.2s; | |
| -webkit-transition-duration: 0.2s; | |
| -o-transition-duration: 0.2s; | |
| transition-duration: 0.2s; | |
| -moz-transition-timing-function: ease; | |
| -webkit-transition-timing-function: ease; | |
| -o-transition-timing-function: ease; | |
| transition-timing-function: ease; } | |
| .collection-navigation li.selected { | |
| font-weight: bold; | |
| padding: 4px 0 4px 8px; | |
| background-color: rgba(6, 68, 107, 0.1); | |
| border-radius: 4px; | |
| box-shadow: inset 1px 1px 1px 2px rgba(6, 68, 107, 0.2); | |
| width: 190px; | |
| -moz-transition-property: padding, background-color, border-radius, box-shadow; | |
| -webkit-transition-property: padding, background-color, border-radius, box-shadow; | |
| -o-transition-property: padding, background-color, border-radius, box-shadow; | |
| transition-property: padding, background-color, border-radius, box-shadow; | |
| -moz-transition-duration: 0.4s; | |
| -webkit-transition-duration: 0.4s; | |
| -o-transition-duration: 0.4s; | |
| transition-duration: 0.4s; | |
| -moz-transition-timing-function: ease; | |
| -webkit-transition-timing-function: ease; | |
| -o-transition-timing-function: ease; | |
| transition-timing-function: ease; } | |
| #feature-right .clip { | |
| float: left; | |
| clear: both; | |
| border-bottom: 1px solid #ccc; | |
| width: 100%; | |
| padding-bottom: 10px; | |
| margin-bottom: 10px; } | |
| #feature-right .clip .clip-image { | |
| float: left; | |
| padding-right: 10px; | |
| width: 160px; | |
| min-height: 90px; } | |
| #feature-right .clip h2 { | |
| letter-spacing: -1px; } | |
| #feature-right .clip p { | |
| color: #979797; | |
| font-family: Georgia, serif; | |
| font-style: italic; | |
| font-size: 13px; } | |
| #feature-right .clip-player { | |
| clear: both; | |
| padding-top: 6px; } | |
| /* Lightbox Styles | |
| --------------------------------------------------*/ | |
| #lightbox-container { | |
| display: none; | |
| float: left; | |
| width: 632px; | |
| position: relative; | |
| padding: 16px; | |
| background: #ffffff; | |
| margin: 16px 0 0 0; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| -ms-border-radius: 5px; | |
| -o-border-radius: 5px; | |
| border-radius: 5px; | |
| -webkit-box-shadow: rgba(35, 44, 50, 0.3) 0px 0px 4px; | |
| -moz-box-shadow: rgba(35, 44, 50, 0.3) 0px 0px 4px; | |
| box-shadow: rgba(35, 44, 50, 0.3) 0px 0px 4px; } | |
| #lightbox-container textarea { | |
| margin: 8px 0 0 0; | |
| width: 95%; } | |
| #lightbox-container .instructions { | |
| font-size: 10px; } | |
| .lightbox-content { | |
| padding: 16px; } | |
| #embed-content label { | |
| margin: 8px 0 0 0; } | |
| #embed-content .directions { | |
| padding-bottom: 8px; } | |
| #embed-content .embed-tabs { | |
| margin: 0; | |
| padding: 0; } | |
| #embed-content .embed-tabs li { | |
| display: block; | |
| float: left; | |
| padding: 0 5px; } | |
| #embed-content .embed-tabs li a { | |
| display: block; | |
| float: left; | |
| padding: 5px 10px; | |
| font-size: 11px; | |
| background-color: #e0e0e0; | |
| color: #666; | |
| text-decoration: none; | |
| border: 1px solid #A3A3A3; | |
| border-bottom: 0; | |
| -moz-border-radius-topleft: 3px; | |
| -webkit-border-top-left-radius: 3px; | |
| -ms-border-top-left-radius: 3px; | |
| -o-border-top-left-radius: 3px; | |
| border-top-left-radius: 3px; | |
| -moz-border-radius-topright: 3px; | |
| -webkit-border-top-right-radius: 3px; | |
| -ms-border-top-right-radius: 3px; | |
| -o-border-top-right-radius: 3px; | |
| border-top-right-radius: 3px; } | |
| #embed-content .embed-tabs li a.selected { | |
| font-weight: bold; | |
| color: #191817; | |
| background-color: #ffffff; } | |
| #embed-content .tab-content { | |
| border-top: 1px solid #e0e0e0; | |
| clear: both; | |
| padding-top: 8px; } | |
| #embed-content .tab-content #player-list li { | |
| cursor: pointer; | |
| padding: 0 0 4px 0; } | |
| #embed-content .tab-content #embed-code { | |
| margin: 8px 0 0 0; | |
| width: 240px; } | |
| #embed-content .tab-content .embed-options, | |
| #embed-content .tab-content #embed-options { | |
| width: 548px; | |
| min-height: 460px; | |
| margin: 8px 0 0 16px; | |
| padding: 0 0 0 16px; | |
| border-left: 1px dashed #b8bdc0; | |
| float: left; } | |
| /* Static Pages | |
| --------------------------------------------------*/ | |
| #static-head { | |
| float: left; | |
| width: 634px; | |
| background-color: #85674f; | |
| background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #85674f), color-stop(100%, #453529)); | |
| background-image: -webkit-linear-gradient(#85674f, #453529); | |
| background-image: -moz-linear-gradient(#85674f, #453529); | |
| background-image: -o-linear-gradient(#85674f, #453529); | |
| background-image: -ms-linear-gradient(#85674f, #453529); | |
| background-image: linear-gradient(#85674f, #453529); } | |
| #static-head h1, #static-head h2, #static-head h3 { | |
| font-size: 20px; | |
| font-weight: bold; } | |
| #static-head h1 a, #static-head h2 a, #static-head h3 a { | |
| color: #ffffff; } | |
| #about-menu { | |
| padding: 8px 0; } | |
| #about-menu li { | |
| margin: 0 0 0 8px; | |
| border-bottom: 1px solid #d3d3d3; } | |
| #about-menu li.selected { | |
| background: #cccccc; } | |
| #about-menu li.last { | |
| border-bottom: 0; } | |
| #about-menu li a { | |
| font-size: 14px; | |
| line-height: 18px; | |
| font-weight: bold; | |
| text-transform: uppercase; | |
| display: block; | |
| text-decoration: none; | |
| padding: 8px; } | |
| #about-menu li .sub-menu li { | |
| border: 0; | |
| margin-left: 16px; } | |
| .about-content { | |
| width: 712px; | |
| margin: 0; | |
| float: left; } | |
| .about-content p { | |
| border: 0px; | |
| color: #303030; | |
| float: none; | |
| font-size: 14px; | |
| line-height: 18px; | |
| margin: 0px 0px 8px; | |
| padding: 0px; } | |
| .about-content li { | |
| list-style: disc; | |
| margin: 0 0 4px 16px; | |
| font-size: 14px; } | |
| .about-content hr { | |
| display: block; | |
| margin: 16px 0 16px 5px; | |
| border: 0; | |
| border-bottom: 1px solid #E3E3E3; | |
| width: 98%; } | |
| .employee { | |
| clear: both; | |
| padding: 24px 0 0 0; } | |
| .employee.first { | |
| padding: 0; } | |
| .employee h2 { | |
| display: inline; | |
| padding-right: 8px; | |
| font-size: 24px; | |
| font-weight: bold; } | |
| .employee .title { | |
| margin-bottom: 10px; } | |
| .employee .title .position { | |
| font-size: 14px; | |
| color: #686868; | |
| margin-left: 2px; } | |
| .employee .image-column { | |
| width: 90px; | |
| margin: 0 16px 0 0; | |
| float: left; } | |
| .employee .text-column { | |
| width: 634px; | |
| float: none; } | |
| .employee img { | |
| border: 1px solid #000000; | |
| border: 1px solid rgba(0, 0, 0, 0.4); | |
| -webkit-box-shadow: #cccccc 1px 1px 3px; | |
| -moz-box-shadow: #cccccc 1px 1px 3px; | |
| box-shadow: #cccccc 1px 1px 3px; } | |
| .employee .bio { | |
| font-size: 14px; | |
| line-height: 18px; } | |
| .employee .bio .favorite-clip { | |
| width: 620px; | |
| height: 38px; | |
| padding-top: 4px; } | |
| .employee .bio .favorite-clip h3 { | |
| font-weight: bold; | |
| font-size: 20px; | |
| display: inline; | |
| vertical-align: super; } | |
| .employee .bio .favorite-clip .player { | |
| margin-right: 10px; | |
| display: inline; | |
| width: 300px; } | |
| .story { | |
| padding: 16px 0 16px 0; | |
| border-top: 1px solid #d3d3d3; | |
| clear: both; } | |
| .story .story-image { | |
| float: left; | |
| width: 240px; | |
| margin: 36px 16px 0 0; } | |
| .story .story-text { | |
| margin: 0 0 16px 0; | |
| width: 378px; | |
| float: left; } | |
| .story .story-text h2 { | |
| font-size: 17px; | |
| font-weight: bold; } | |
| .story .story-text p { | |
| font-size: 14px; | |
| font-style: italic; | |
| padding: 0 0 16px 0; } | |
| #tips, | |
| #examples { | |
| margin-top: 10px; | |
| background: #dddddd; | |
| padding: 10px; | |
| border: 1px solid #c1c1c1; } | |
| #tips dt { | |
| margin-top: 0px; } | |
| dt { | |
| font-size: 1.4em; | |
| font-weight: bold; | |
| margin: 20px 0 10px; | |
| line-height: 18px; } | |
| dd, | |
| dd { | |
| margin-left: 0px; } | |
| #examples { | |
| margin: 20px 0px; } | |
| #examples ul { | |
| margin: 5px 0 0 0; } | |
| #examples li { | |
| list-style: none; | |
| margin: 5px 0px; } | |
| .carrier-list { | |
| float: left; | |
| width: 150px; | |
| margin: 0 15px 10px 10px; } | |
| .carrier-list li { | |
| list-style: none; | |
| font-weight: normal; | |
| margin: 5px 0px; } | |
| h2.terms-title { | |
| font-size: 16px; | |
| margin: 16px 0 4px 0; } | |
| /* Sign Up | |
| --------------------------------------------------*/ | |
| #feature.sign-up { | |
| width: 945px; } | |
| #feature.sign-up .intro { | |
| margin-bottom: 24px; } | |
| #feature.sign-up .sign-in-left { | |
| margin-right: 24px; | |
| width: 660px; } | |
| #feature.sign-up .sign-in-right { | |
| width: 250px; } | |
| #feature.sign-up .sign-in-left, | |
| #feature.sign-up .sign-in-right, | |
| #feature.sign-up .sign-in-wide { | |
| float: left; } | |
| #feature.sign-up .sign-in-left p, #feature.sign-up .sign-in-left span, | |
| #feature.sign-up .sign-in-right p, | |
| #feature.sign-up .sign-in-right span, | |
| #feature.sign-up .sign-in-wide p, | |
| #feature.sign-up .sign-in-wide span { | |
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); } | |
| /* User Pages | |
| --------------------------------------------------*/ | |
| #user-avatar { | |
| width: 120px; | |
| float: left; | |
| margin: 4px 24px 8px 0; } | |
| .user-info { | |
| width: 518px; | |
| float: left; | |
| margin: 0 4px 8px 0; } | |
| .user-info #user-edit-menu li { | |
| padding: 0 0 8px 0; } | |
| .user-info #user-edit-menu li a { | |
| font-weight: bold; } | |
| /* Search Page Content | |
| --------------------------------------------------*/ | |
| #search-head { | |
| background-color: #505a42; | |
| background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #383149), color-stop(100%, #09080c)); | |
| background-image: -webkit-linear-gradient(#383149, #09080c); | |
| background-image: -moz-linear-gradient(#383149, #09080c); | |
| background-image: -o-linear-gradient(#383149, #09080c); | |
| background-image: -ms-linear-gradient(#383149, #09080c); | |
| background-image: linear-gradient(#383149, #09080c); | |
| border: 1px solid #505a42; | |
| width: 634px; | |
| text-shadow: 0 1px 1px #406a96; } | |
| #search-head h1, #search-head h2, #search-head h3 { | |
| font-size: 20px; | |
| font-weight: bold; } | |
| /* Home Page Content | |
| --------------------------------------------------*/ | |
| #featured-collections-head { | |
| background-color: #406a96; | |
| background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #406a96), color-stop(100%, #21374f)); | |
| background-image: -webkit-linear-gradient(#406a96, #21374f); | |
| background-image: -moz-linear-gradient(#406a96, #21374f); | |
| background-image: -o-linear-gradient(#406a96, #21374f); | |
| background-image: -ms-linear-gradient(#406a96, #21374f); | |
| background-image: linear-gradient(#406a96, #21374f); | |
| border: 1px solid #406a96; | |
| width: 634px; | |
| text-shadow: 0 1px 1px #406a96; } | |
| #featured-collections-head h1, #featured-collections-head h2, #featured-collections-head h3 { | |
| font-size: 20px; | |
| font-weight: bold; | |
| max-width: 352px; } | |
| #featured-collections { | |
| margin: 0; | |
| width: 634px; | |
| float: left; | |
| background-color: #ffffff; | |
| padding: 12px; | |
| border: 1px solid #cdcdcf; | |
| border-top: 0; | |
| -moz-border-radius-bottomleft: 16px; | |
| -webkit-border-bottom-left-radius: 16px; | |
| -ms-border-bottom-left-radius: 16px; | |
| -o-border-bottom-left-radius: 16px; | |
| border-bottom-left-radius: 16px; | |
| -moz-border-radius-bottomright: 16px; | |
| -webkit-border-bottom-right-radius: 16px; | |
| -ms-border-bottom-right-radius: 16px; | |
| -o-border-bottom-right-radius: 16px; | |
| border-bottom-right-radius: 16px; } | |
| #featured-collections h2 { | |
| margin: 0 0 4px 0; } | |
| #featured-collections .feature { | |
| position: relative; | |
| float: left; | |
| width: 200px; | |
| margin: 0 15px 0 0; | |
| padding: 0 0 16px 0; | |
| font-size: 11px; } | |
| #featured-collections .feature.last { | |
| margin-right: 0; } | |
| #featured-collections .feature .image { | |
| position: relative; | |
| float: left; | |
| margin: 0 0 8px 0; } | |
| #featured-collections .feature .image strong { | |
| font-size: 12px; | |
| color: #76d9ff !important; } | |
| #featured-collections .feature .image .title { | |
| display: block; | |
| z-index: 2; | |
| width: 185px; | |
| padding: 4px 8px 4px 8px; | |
| color: #76d9ff; | |
| background: #2B2C26; | |
| background: rgba(43, 44, 38, 0.8); | |
| margin: -3px 0 0 0; } | |
| #featured-collections .feature .image:hover .title { | |
| background: #33A6D3; | |
| -webkit-transition-property: all; | |
| -moz-transition-property: all; | |
| -ms-transition-property: all; | |
| -o-transition-property: all; | |
| transition-property: all; | |
| -webkit-transition-duration: 0.2s; | |
| -moz-transition-duration: 0.2s; | |
| -ms-transition-duration: 0.2s; | |
| -o-transition-duration: 0.2s; | |
| transition-duration: 0.2s; | |
| -webkit-transition-timing-function: ease; | |
| -moz-transition-timing-function: ease; | |
| -ms-transition-timing-function: ease; | |
| -o-transition-timing-function: ease; | |
| transition-timing-function: ease; } | |
| #featured-collections .feature .image:hover strong { | |
| color: #ffffff !important; | |
| -webkit-transition-property: all; | |
| -moz-transition-property: all; | |
| -ms-transition-property: all; | |
| -o-transition-property: all; | |
| transition-property: all; | |
| -webkit-transition-duration: 0.2s; | |
| -moz-transition-duration: 0.2s; | |
| -ms-transition-duration: 0.2s; | |
| -o-transition-duration: 0.2s; | |
| transition-duration: 0.2s; | |
| -webkit-transition-timing-function: ease; | |
| -moz-transition-timing-function: ease; | |
| -ms-transition-timing-function: ease; | |
| -o-transition-timing-function: ease; | |
| transition-timing-function: ease; } | |
| #featured-collections .feature .frame { | |
| display: block; | |
| position: absolute; | |
| z-index: 1; | |
| top: 0; | |
| left: 0; | |
| width: 199px; | |
| height: 137px; | |
| overflow: hidden; | |
| border: 1px solid #000000; | |
| border: 1px solid rgba(0, 0, 0, 0.8); | |
| -webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 0 8px 4px inset; | |
| -moz-box-shadow: rgba(0, 0, 0, 0.6) 0 0 8px 4px inset; | |
| box-shadow: rgba(0, 0, 0, 0.6) 0 0 8px 4px inset; | |
| -webkit-transition-property: all; | |
| -moz-transition-property: all; | |
| -ms-transition-property: all; | |
| -o-transition-property: all; | |
| transition-property: all; | |
| -webkit-transition-duration: 0.2s; | |
| -moz-transition-duration: 0.2s; | |
| -ms-transition-duration: 0.2s; | |
| -o-transition-duration: 0.2s; | |
| transition-duration: 0.2s; | |
| -webkit-transition-timing-function: ease; | |
| -moz-transition-timing-function: ease; | |
| -ms-transition-timing-function: ease; | |
| -o-transition-timing-function: ease; | |
| transition-timing-function: ease; } | |
| #featured-collections .feature .frame:hover { | |
| border: 1px solid #32a6d3; | |
| border: 1px solid rgba(50, 166, 211, 0.8); | |
| -webkit-box-shadow: rgba(50, 166, 211, 0.6) 0 0 5px 5px inset; | |
| -moz-box-shadow: rgba(50, 166, 211, 0.6) 0 0 5px 5px inset; | |
| box-shadow: rgba(50, 166, 211, 0.6) 0 0 5px 5px inset; } | |
| #featured-collections .feature .social { | |
| height: 20px; | |
| float: left; | |
| overflow: hidden; } | |
| #featured-collections .feature .play { | |
| float: right; | |
| display: block; | |
| width: 20px; | |
| height: 20px; | |
| margin-top: 0; | |
| text-indent: -9999px; | |
| background: transparent url("http://hark.dev/assets/clips/play.png") no-repeat 0 0; } | |
| #featured-collections .feature p { | |
| float: left; | |
| width: 180px; | |
| margin: 0 0 7px 0; | |
| font-size: 0.9167em; | |
| line-height: 1.5em; } | |
| #featured-collections .feature .more { | |
| width: auto; | |
| margin: 4px 0 0 0; | |
| font-size: 10px; | |
| color: #9f9f9f; } | |
| #featured-collections .feature .more a { | |
| color: #46B3DA; } | |
| #featured-collections .full-spread { | |
| width: 634px; | |
| margin: 0 0 16px 0; } | |
| #featured-collections .full-spread .image { | |
| height: 340px; | |
| overflow: hidden; | |
| margin: 0 0 8px 0; | |
| border: 1px solid #000000; | |
| border: 1px solid rgba(0, 0, 0, 0.7); | |
| -webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 0 8px 0.1px; | |
| -moz-box-shadow: rgba(0, 0, 0, 0.6) 0 0 8px 0.1px; | |
| box-shadow: rgba(0, 0, 0, 0.6) 0 0 8px 0.1px; } | |
| #featured-collections .full-spread p { | |
| float: left; | |
| margin: 0 0 8px 0; | |
| font-size: 11px; | |
| line-height: 1.5; } | |
| #featured-collections .full-spread p .quote { | |
| color: #222; } | |
| #featured-collections .full-spread .facebook-share-button { | |
| margin: 0 0 4px 4px; | |
| display: block; | |
| float: right; } | |
| .clip-columns { | |
| float: left; } | |
| .clip-columns .column { | |
| float: left; | |
| width: 200px; | |
| margin: 0 8px 0 0; | |
| min-height: 290px; } | |
| .clip-columns .column h3 { | |
| margin: 0 0 4px 0; | |
| letter-spacing: -1px; } | |
| .clip-columns .column h3 a { | |
| font-size: 14px; | |
| color: #000; } | |
| .clip-columns .column ul { | |
| margin: 0 0 16px 0; } | |
| .clip-columns .column ul li { | |
| width: 100%; | |
| float: left; | |
| padding: 4px; | |
| margin: 0 0 2px 0; | |
| border: 1px solid #fff; | |
| -webkit-transition-property: all; | |
| -moz-transition-property: all; | |
| -ms-transition-property: all; | |
| -o-transition-property: all; | |
| transition-property: all; | |
| -webkit-transition-duration: 0.4s; | |
| -moz-transition-duration: 0.4s; | |
| -ms-transition-duration: 0.4s; | |
| -o-transition-duration: 0.4s; | |
| transition-duration: 0.4s; | |
| -webkit-transition-timing-function: ease; | |
| -moz-transition-timing-function: ease; | |
| -ms-transition-timing-function: ease; | |
| -o-transition-timing-function: ease; | |
| transition-timing-function: ease; } | |
| .clip-columns .column ul li:hover { | |
| border: 1px solid #32a6d3; | |
| border: 1px solid rgba(50, 166, 211, 0.8); | |
| -webkit-box-shadow: rgba(50, 166, 211, 0.6) 0 0 5px 5px inset; | |
| -moz-box-shadow: rgba(50, 166, 211, 0.6) 0 0 5px 5px inset; | |
| box-shadow: rgba(50, 166, 211, 0.6) 0 0 5px 5px inset; } | |
| .clip-columns .column ul li:hover img { | |
| -webkit-transform: scale(1.2, 1.2); | |
| -moz-transform: scale(1.2, 1.2); | |
| -ms-transform: scale(1.2, 1.2); | |
| -o-transform: scale(1.2, 1.2); | |
| transform: scale(1.2, 1.2); | |
| margin: 0 12px 0 0; } | |
| .clip-columns .column a { | |
| color: #0a85b2; | |
| font-weight: bold; } | |
| .clip-columns .column img { | |
| float: left; | |
| margin: 0 8px 0 0; | |
| padding: 1px; | |
| background: #797979; | |
| background: rgba(0, 0, 0, 0.4); | |
| -webkit-box-shadow: #cccccc 1px 1px 3px; | |
| -moz-box-shadow: #cccccc 1px 1px 3px; | |
| box-shadow: #cccccc 1px 1px 3px; | |
| -webkit-transition-property: all; | |
| -moz-transition-property: all; | |
| -ms-transition-property: all; | |
| -o-transition-property: all; | |
| transition-property: all; | |
| -webkit-transition-duration: 0.2s; | |
| -moz-transition-duration: 0.2s; | |
| -ms-transition-duration: 0.2s; | |
| -o-transition-duration: 0.2s; | |
| transition-duration: 0.2s; | |
| -webkit-transition-timing-function: ease; | |
| -moz-transition-timing-function: ease; | |
| -ms-transition-timing-function: ease; | |
| -o-transition-timing-function: ease; | |
| transition-timing-function: ease; } | |
| .clip-columns .column span { | |
| display: block; | |
| color: #3c3b3b; } | |
| #most-popular-clips { | |
| clear: both; | |
| margin: 0 0 8px 0; } | |
| #most-popular-clips .columns { | |
| float: left; } | |
| #most-popular-clips .columns .column { | |
| float: left; | |
| width: 308px; | |
| margin: 0 8px 0 0; | |
| min-height: 80px; } | |
| #most-popular-clips .columns .column ul { | |
| margin: 0 0 16px 0; } | |
| #most-popular-clips .columns .column ul li { | |
| width: 100%; | |
| float: left; | |
| padding: 4px; | |
| margin: 0 0 2px 0; | |
| font-size: 11px; } | |
| #most-popular-clips .columns .column ul li .title { | |
| font-weight: bold; } | |
| #most-popular-clips .columns .column ul li em { | |
| color: #333; } | |
| /* Collection Content | |
| --------------------------------------------------*/ | |
| #collection-head { | |
| background-color: #505a42; | |
| background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #505a42), color-stop(100%, #1c1f17)); | |
| background-image: -webkit-linear-gradient(#505a42, #1c1f17); | |
| background-image: -moz-linear-gradient(#505a42, #1c1f17); | |
| background-image: -o-linear-gradient(#505a42, #1c1f17); | |
| background-image: -ms-linear-gradient(#505a42, #1c1f17); | |
| background-image: linear-gradient(#505a42, #1c1f17); | |
| border: 1px solid #505a42; | |
| width: 634px; | |
| text-shadow: 0 1px 1px #406a96; } | |
| #collection-head h1, #collection-head h2, #collection-head h3 { | |
| font-size: 20px; | |
| font-weight: bold; | |
| max-width: 352px; } | |
| #collection-head .content-owner { | |
| float: left; | |
| margin-right: 8px; } | |
| #collection-head .title-image { | |
| max-width: 180px; | |
| height: 90px; | |
| overflow: hidden; | |
| float: right; } | |
| #feature.collection { | |
| margin-top: 0; } | |
| .old-affiliate { | |
| background: #4099d0; | |
| display: inline-block; | |
| margin: 0 4px 8px 0; | |
| padding: 8px 8px 0 8px; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| -ms-border-radius: 4px; | |
| -o-border-radius: 4px; | |
| border-radius: 4px; } | |
| #collection-details-full { | |
| padding: 16px; | |
| background: #ffffff; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| -ms-border-radius: 5px; | |
| -o-border-radius: 5px; | |
| border-radius: 5px; | |
| -webkit-box-shadow: rgba(35, 44, 50, 0.3) 0px 0px 4px; | |
| -moz-box-shadow: rgba(35, 44, 50, 0.3) 0px 0px 4px; | |
| box-shadow: rgba(35, 44, 50, 0.3) 0px 0px 4px; } | |
| .cast-header { | |
| padding: 8px 0 8px 8px; | |
| border-bottom: 1px solid #e6e6e6; | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.1); | |
| background: #ffffff; | |
| -moz-border-radius-topleft: 5px; | |
| -webkit-border-top-left-radius: 5px; | |
| -ms-border-top-left-radius: 5px; | |
| -o-border-top-left-radius: 5px; | |
| border-top-left-radius: 5px; | |
| -moz-border-radius-topright: 5px; | |
| -webkit-border-top-right-radius: 5px; | |
| -ms-border-top-right-radius: 5px; | |
| -o-border-top-right-radius: 5px; | |
| border-top-right-radius: 5px; } | |
| .cast-row { | |
| padding: 8px; | |
| border: 1px solid transparent; | |
| border-bottom: 1px dotted black; | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.1); | |
| overflow: hidden; | |
| background-color: #ffffff; | |
| z-index: 1; | |
| -webkit-transition-property: background; | |
| -moz-transition-property: background; | |
| -ms-transition-property: background; | |
| -o-transition-property: background; | |
| transition-property: background; | |
| -webkit-transition-duration: 0.8s; | |
| -moz-transition-duration: 0.8s; | |
| -ms-transition-duration: 0.8s; | |
| -o-transition-duration: 0.8s; | |
| transition-duration: 0.8s; | |
| -webkit-transition-timing-function: ease; | |
| -moz-transition-timing-function: ease; | |
| -ms-transition-timing-function: ease; | |
| -o-transition-timing-function: ease; | |
| transition-timing-function: ease; } | |
| .cast-row .actor-image { | |
| width: 48px; | |
| margin: 0 8px 0 0; | |
| float: left; } | |
| .cast-row .actor { | |
| padding: 12px 0 0 0; | |
| font-size: 14px; | |
| font-weight: bold; | |
| width: 260px; | |
| float: left; } | |
| .cast-row span { | |
| padding: 12px 0 0 0; | |
| margin: 0 24px 0 0; | |
| float: left; } | |
| .cast-row .character { | |
| padding: 12px 0 0 0; | |
| font-size: 14px; | |
| width: 260px; | |
| float: left; } | |
| .cast-row:hover { | |
| background: #ffffc6; | |
| border: 1px solid #e4d1a5; | |
| z-index: 3; | |
| -webkit-box-shadow: rgba(35, 44, 50, 0.2) 0px 0px 4px; | |
| -moz-box-shadow: rgba(35, 44, 50, 0.2) 0px 0px 4px; | |
| box-shadow: rgba(35, 44, 50, 0.2) 0px 0px 4px; | |
| background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f2f2b0), color-stop(100%, #ffffc6)); | |
| background-image: -webkit-linear-gradient(#f2f2b0, #ffffc6); | |
| background-image: -moz-linear-gradient(#f2f2b0, #ffffc6); | |
| background-image: -o-linear-gradient(#f2f2b0, #ffffc6); | |
| background-image: -ms-linear-gradient(#f2f2b0, #ffffc6); | |
| background-image: linear-gradient(#f2f2b0, #ffffc6); } | |
| /* Clips Content | |
| --------------------------------------------------*/ | |
| #social-vibe-embed { | |
| clear: both; | |
| margin: 8px auto 8px auto; } | |
| #player { | |
| float: left; } | |
| .warning { | |
| padding: 16px; | |
| color: #fff; | |
| text-shadow: 1px 1px 2px #000; | |
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); | |
| border: 1px solid #000000; | |
| border: 1px solid rgba(0, 0, 0, 0.4); | |
| background: #cd1d2a; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| -ms-border-radius: 5px; | |
| -o-border-radius: 5px; | |
| border-radius: 5px; | |
| background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cd1d2a), color-stop(100%, #a31721)); | |
| background-image: -webkit-linear-gradient(#cd1d2a, #a31721); | |
| background-image: -moz-linear-gradient(#cd1d2a, #a31721); | |
| background-image: -o-linear-gradient(#cd1d2a, #a31721); | |
| background-image: -ms-linear-gradient(#cd1d2a, #a31721); | |
| background-image: linear-gradient(#cd1d2a, #a31721); } | |
| .warning h3 { | |
| font-size: 16px; | |
| color: #ffffff; | |
| font-weight: bold; | |
| padding: 0 0 4px 0; | |
| text-shadow: 1px 1px 2px #000; | |
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); } | |
| .warning p { | |
| color: #ffffff; | |
| text-shadow: 1px 1px 2px #000; | |
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); | |
| font-size: 14px; } | |
| .warning p a { | |
| color: #fff; | |
| font-weight: bold; } | |
| .warning #download-error { | |
| display: none; } | |
| .warning #twitter-button-box, | |
| .warning #facebook-button-box { | |
| width: 64px; | |
| height: 64px; | |
| float: left; | |
| overflow: hidden; } | |
| #inner-tabs { | |
| padding: 0 8px; | |
| border-bottom: 1px solid #a3a3a3; | |
| border-bottom: 1px solid rgba(163, 163, 163, 0.1); | |
| height: 28px; } | |
| #inner-tabs ul { | |
| display: inline-block; } | |
| #inner-tabs ul a { | |
| text-decoration: none; } | |
| #inner-tabs ul li { | |
| vertical-align: middle; | |
| border: 1px solid #949596; | |
| border: 1px solid rgba(148, 149, 150, 0.4); | |
| background: #eeeeee; | |
| float: left; | |
| height: 20px; | |
| margin: 0 2px; | |
| padding: 6px 8px 0; | |
| text-align: center; | |
| min-width: 60px; | |
| cursor: hand; | |
| cursor: pointer; | |
| font-weight: normal; | |
| -moz-border-radius-topleft: 3px; | |
| -webkit-border-top-left-radius: 3px; | |
| -ms-border-top-left-radius: 3px; | |
| -o-border-top-left-radius: 3px; | |
| border-top-left-radius: 3px; | |
| -moz-border-radius-topright: 3px; | |
| -webkit-border-top-right-radius: 3px; | |
| -ms-border-top-right-radius: 3px; | |
| -o-border-top-right-radius: 3px; | |
| border-top-right-radius: 3px; | |
| background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e8e8e8), color-stop(100%, #cecece)); | |
| background-image: -webkit-linear-gradient(#e8e8e8, #cecece); | |
| background-image: -moz-linear-gradient(#e8e8e8, #cecece); | |
| background-image: -o-linear-gradient(#e8e8e8, #cecece); | |
| background-image: -ms-linear-gradient(#e8e8e8, #cecece); | |
| background-image: linear-gradient(#e8e8e8, #cecece); } | |
| #inner-tabs ul li.selected { | |
| color: #000000; | |
| border-color: #a3a3a3; | |
| border-style: solid solid none; | |
| background: #ffffff; | |
| border-width: 1px; | |
| margin-bottom: -1px; | |
| padding: 8px 8px 0; | |
| font-weight: bold; | |
| background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f6f6f6), color-stop(100%, #ffffff)); | |
| background-image: -webkit-linear-gradient(#f6f6f6, #ffffff); | |
| background-image: -moz-linear-gradient(#f6f6f6, #ffffff); | |
| background-image: -o-linear-gradient(#f6f6f6, #ffffff); | |
| background-image: -ms-linear-gradient(#f6f6f6, #ffffff); | |
| background-image: linear-gradient(#f6f6f6, #ffffff); | |
| -webkit-box-shadow: rgba(35, 44, 50, 0.3) 0px 0px 4px; | |
| -moz-box-shadow: rgba(35, 44, 50, 0.3) 0px 0px 4px; | |
| box-shadow: rgba(35, 44, 50, 0.3) 0px 0px 4px; } | |
| #inner-tabs ul li.selected a { | |
| color: #000000; } | |
| .collection_clips { | |
| width: 100%; | |
| display: none; | |
| float: left; | |
| position: relative; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| -ms-border-radius: 5px; | |
| -o-border-radius: 5px; | |
| border-radius: 5px; | |
| -webkit-box-shadow: rgba(35, 44, 50, 0.3) 0px 0px 4px; | |
| -moz-box-shadow: rgba(35, 44, 50, 0.3) 0px 0px 4px; | |
| box-shadow: rgba(35, 44, 50, 0.3) 0px 0px 4px; } | |
| /* Sidebar | |
| ---------------------------------------------------------*/ | |
| #sidebar { | |
| float: right; | |
| width: 300px; | |
| font-size: 12px; } | |
| #sidebar #social-head, | |
| #sidebar #static-head { | |
| background-color: #59898c; | |
| border: 1px solid #59898c; | |
| width: 274px; } | |
| #sidebar .fb-like-box { | |
| background-color: #ffffff; } | |
| #sidebar #social, | |
| #sidebar #static { | |
| background-color: #ffffff; | |
| border: 1px solid #cdcdcf; | |
| border-top: 0; | |
| -moz-border-radius-bottomleft: 16px; | |
| -webkit-border-bottom-left-radius: 16px; | |
| -ms-border-bottom-left-radius: 16px; | |
| -o-border-bottom-left-radius: 16px; | |
| border-bottom-left-radius: 16px; | |
| -moz-border-radius-bottomright: 16px; | |
| -webkit-border-bottom-right-radius: 16px; | |
| -ms-border-bottom-right-radius: 16px; | |
| -o-border-bottom-right-radius: 16px; | |
| border-bottom-right-radius: 16px; | |
| margin: 0 0 18px 0; } | |
| #sidebar .ad { | |
| z-index: 1; } | |
| #sidebar.static { | |
| margin-right: 10px; | |
| float: left; } | |
| #chartbeat-activity { | |
| width: 264px; | |
| overflow: hidden; | |
| min-height: 24px; | |
| margin: 0 auto; | |
| padding: 16px 0; } | |
| #activity-feed { | |
| height: 24px; | |
| overflow: hidden; } | |
| #activity-feed li { | |
| display: block; | |
| clear: both; | |
| height: 34px; | |
| overflow: hidden; | |
| padding-top: 5px; | |
| -webkit-transition-property: all; | |
| -moz-transition-property: all; | |
| -ms-transition-property: all; | |
| -o-transition-property: all; | |
| transition-property: all; | |
| -webkit-transition-duration: 0.4s; | |
| -moz-transition-duration: 0.4s; | |
| -ms-transition-duration: 0.4s; | |
| -o-transition-duration: 0.4s; | |
| transition-duration: 0.4s; | |
| -webkit-transition-timing-function: ease-out; | |
| -moz-transition-timing-function: ease-out; | |
| -ms-transition-timing-function: ease-out; | |
| -o-transition-timing-function: ease-out; | |
| transition-timing-function: ease-out; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| -ms-border-radius: 4px; | |
| -o-border-radius: 4px; | |
| border-radius: 4px; } | |
| #activity-feed li.odd { | |
| background-color: #f0f2f7; } | |
| #activity-feed li:hover { | |
| background-color: #cfd5e5; } | |
| #activity-feed li .avatar { | |
| margin: -2px 6px 4px 4px; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; } | |
| #activity-feed li .voice { | |
| font-size: 11px; | |
| color: #666666; | |
| line-height: 16px; | |
| overflow: hidden; } | |
| #activity-feed li .voice a { | |
| font-weight: bold; | |
| overflow: hidden; } | |
| #email-signup { | |
| padding: 0 18px 18px 18px; } | |
| #email-signup #email-signup-email { | |
| background-color: #ffffff; | |
| font-size: 12px; | |
| width: 160px; | |
| margin: -1px 8px 0 0; | |
| padding: 6px 6px 6px 8px; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| -ms-border-radius: 4px; | |
| -o-border-radius: 4px; | |
| border-radius: 4px; | |
| -webkit-box-shadow: rgba(35, 44, 50, 0.4) 0px 0px 4px; | |
| -moz-box-shadow: rgba(35, 44, 50, 0.4) 0px 0px 4px; | |
| box-shadow: rgba(35, 44, 50, 0.4) 0px 0px 4px; } | |
| #email-signup #email-signup-submit { | |
| margin: -2px 0 0 0; } | |
| /* Footer | |
| ---------------------------------------------------------*/ | |
| #footer { | |
| clear: both; | |
| position: relative; | |
| border-top: 1px solid #D6E3F9; | |
| background-color: #dce6f2; | |
| font-family: 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif; | |
| font-size: 11.5px; | |
| padding: 16px 0; | |
| overflow: hidden; | |
| -webkit-font-smoothing: antialiased; } | |
| #footer strong { | |
| color: #7c8186; | |
| font-family: 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif; | |
| font-size: 12px; | |
| text-shadow: 1px 1px 1px rgba(35, 44, 50, 0.1); } | |
| #footer .social { | |
| margin-bottom: -3px; } | |
| #footer .bottom { | |
| text-align: center; | |
| color: #ADADAD; } | |
| #footer .bottom a { | |
| line-height: 16px; | |
| color: #7c8186; | |
| text-shadow: 1px 1px 1px rgba(35, 44, 50, 0.1); | |
| height: auto; | |
| padding: 2px; | |
| text-decoration: none; } | |
| #footer .bottom a:hover { | |
| color: #333; | |
| text-decoration: underline; } | |
| #footer .link-group { | |
| display: block; | |
| float: left; | |
| margin: 0 8px 8px 0; | |
| width: 280px; } | |
| #footer .link-group a { | |
| display: block; | |
| line-height: 16px; | |
| color: #7c8186; | |
| text-shadow: 1px 1px 1px rgba(35, 44, 50, 0.1); | |
| height: auto; | |
| padding: 2px 0px 2px 0px; | |
| float: none; } | |
| #footer .link-group a:hover { | |
| text-decoration: underline; } | |
| #footer #copyright { | |
| letter-spacing: -0.1px; | |
| clear: both; | |
| color: #828b91; | |
| text-align: center; | |
| padding-top: 8px; | |
| margin: 0 auto; } | |
| #footer #copyright a { | |
| color: #adadad; } | |
| #footer #copyright .ad-tag { | |
| margin-bottom: -2px; } | |
| @media only screen and (min-width: 768px) and (max-width: 991px) { | |
| .container { | |
| width: 712px; } | |
| /* Top & Navigation | |
| --------------------------------------------------------------*/ | |
| .subnav { | |
| width: 500px; } | |
| .subnav-group { | |
| width: 115px; } | |
| .sub-callout li.wide { | |
| width: 166px; } | |
| #search_terms { | |
| width: 360px; | |
| margin: 2px 8px 0 0; } | |
| #user-links { | |
| margin: 3px 0 0 4px; | |
| width: 116px; } | |
| #top-leaderboard, | |
| #bottom-ad { | |
| overflow: hidden; } | |
| #skyscraper-ad { | |
| display: none; } | |
| /* General Content | |
| --------------------------------------------------*/ | |
| #clip-head, | |
| #collection-head, | |
| #clip-collection-head, | |
| #sidebar #social-head, | |
| #sidebar #static-head, | |
| #static-head, | |
| #search-head, | |
| .section-head, | |
| #more-clips-head { | |
| width: 686px; } | |
| #feature, | |
| #feature.sign-up, | |
| .feature-block, | |
| #clip-collection { | |
| width: 686px; } | |
| #feature #feature-right { | |
| width: 474px; } | |
| #feature #feature-right #player { | |
| width: 474px; } | |
| #clip-slide-container { | |
| margin-top: 0; } | |
| /* About Page | |
| --------------------------------------------------*/ | |
| #about-content { | |
| width: 436px; } | |
| .text-column { | |
| width: 436px; } | |
| .favorite-clip { | |
| width: 316px; } | |
| .favorite-label { | |
| display: block; | |
| padding: 0 0 4px 0; } | |
| .social-links { | |
| margin: 16px 0 0 0; } | |
| .story-text { | |
| width: 436px; } | |
| /* Search Page Content | |
| --------------------------------------------------*/ | |
| #clip-search { | |
| width: 240px; } | |
| #clip-list { | |
| width: 440px; } | |
| #clip-list .play-clip { | |
| display: none; } | |
| #clip-list .clip-text { | |
| width: 432px; } | |
| .collection-image { | |
| width: 100px; | |
| float: left; | |
| margin: 0 8px 0 0; } | |
| .collection-image img { | |
| max-width: 100px; } | |
| /* Home Page Content | |
| --------------------------------------------------*/ | |
| #featured-collections-head { | |
| width: 686px; } | |
| #featured-collections { | |
| width: 686px; | |
| margin-bottom: 12px; } | |
| #featured-collections .feature { | |
| margin: 0 42px 0 0; } | |
| #featured-collections .clip-columns .column { | |
| width: 220px; } | |
| /* Sidebar | |
| --------------------------------------------------*/ | |
| #sidebar { | |
| width: 712px; | |
| margin: 0 auto; | |
| float: none; | |
| clear: both; } | |
| #sidebar .sidebar-medium-rectangle { | |
| float: left; } | |
| #sidebar #social-head { | |
| display: none; } | |
| #sidebar #social-head.static { | |
| display: block; } | |
| #sidebar .fb-like-box { | |
| float: right; | |
| margin: 0 auto; | |
| width: 390px; | |
| text-align: center; | |
| background: transparent; } | |
| #sidebar .fb-like-box iframe { | |
| background: #fff; } | |
| #sidebar #social { | |
| float: right; | |
| width: 390px; | |
| margin: 8px 0 18px 0; | |
| -webkit-border-radius: 16px; | |
| -moz-border-radius: 16px; | |
| -ms-border-radius: 16px; | |
| -o-border-radius: 16px; | |
| border-radius: 16px; } | |
| #sidebar #social #chartbeat-activity { | |
| width: 354px; } | |
| /* Footer | |
| --------------------------------------------------*/ | |
| #footer .link-group.first { | |
| width: 92px; } | |
| #footer .link-group { | |
| width: 196px; } | |
| #footer .top-content { | |
| white-space: nowrap; | |
| overflow: hidden; } } | |
| @media only screen and (max-width: 767px) { | |
| body { | |
| overflow-x: hidden; } | |
| input.inline-text { | |
| font: normal normal 16px/22px Helvetica, Arial, Verdana, sans-serif; | |
| width: 44%; } | |
| .container { | |
| width: 252px; } | |
| /* Top & Navigation | |
| --------------------------------------------------*/ | |
| #top-leaderboard, | |
| #bottom-ad { | |
| display: none; | |
| overflow: hidden !important; | |
| min-width: 0; | |
| width: auto; } | |
| #header { | |
| padding: 0; | |
| margin-bottom: 12px; } | |
| #header #logo { | |
| margin-bottom: 8px; } | |
| #skyscraper-ad { | |
| display: none; } | |
| #bottom_content { | |
| display: none; } | |
| #page_skin_ad_content { | |
| display: none; } | |
| /* Top Navigation | |
| --------------------------------------------------*/ | |
| #top-nav { | |
| margin: 40px 0 2px 0px; | |
| padding: 0; | |
| width: 252px; } | |
| #search_terms { | |
| width: 236px; | |
| margin: 2px 8px 8px 0; } | |
| #user-nav { | |
| margin: 0 auto; | |
| width: 180px; | |
| float: none; } | |
| /* General Content | |
| --------------------------------------------------*/ | |
| #clip-head, | |
| #collection-head, | |
| #clip-collection-head, | |
| #sidebar #static-head, | |
| #static-head, | |
| #more-clips-head, | |
| .section-head { | |
| width: 252px !important; } | |
| #sidebar #social-head { | |
| width: 274px !important; } | |
| #feature, | |
| .feature-block, | |
| #feature.sign-up, | |
| #clip-collection { | |
| width: 252px; } | |
| #feature.sign-up .sign-in-left { | |
| width: 252px; } | |
| .section-head .amazon, | |
| .section-head .netflix { | |
| display: none; } | |
| .content-owner { | |
| display: none; } | |
| .title-image { | |
| display: none; } | |
| #feature .employee .text-column { | |
| width: auto; } | |
| #feature .story .story-text { | |
| width: auto; } | |
| #feature #feature-left { | |
| width: auto; } | |
| #feature #feature-left #buttons { | |
| display: none; } | |
| #feature #feature-left #clip-navigation { | |
| display: none; | |
| clear: both; | |
| padding-top: 16px; } | |
| #feature #feature-left #clip-navigation #clip-prev { | |
| margin: 0 0 10px 84px; } | |
| #feature #feature-left #related-collections { | |
| display: none; } | |
| #feature #feature-right { | |
| width: 276px; | |
| margin: 0 -12px 0 -12px; } | |
| #feature #feature-right #clip-slide-container { | |
| width: 276px; } | |
| #feature #feature-right #clip-slide-container .large-image { | |
| width: 276px; } | |
| #feature #feature-right #clip-slide-container .large-image img { | |
| width: 276px; } | |
| #feature #feature-right #clip-slide-container .large-image #current-quote { | |
| width: 236px; } | |
| #feature #feature-right #clip-slide-container .large-image #player-overlay { | |
| display: none; } | |
| #feature #feature-right #player { | |
| width: 276px; } | |
| #clip-list { | |
| width: 252px; } | |
| #clip-list .clip-text { | |
| width: 252px; } | |
| #clip-list .play-clip { | |
| display: none; } | |
| #clip-collection #clip-search #collection-share { | |
| margin-left: 0; } | |
| /* About Page | |
| --------------------------------------------------*/ | |
| #about-menu li a { | |
| font-size: 12px; | |
| line-height: 14px; } | |
| .favorite-clip { | |
| display: none; } | |
| /* Search Page Content | |
| --------------------------------------------------*/ | |
| .collection-image { | |
| display: none; } | |
| /* Home Page Content | |
| --------------------------------------------------*/ | |
| #featured-collections-head { | |
| width: 252px; } | |
| #featured-collections-head h1, #featured-collections-head h2, #featured-collections-head h3 { | |
| font-size: 18px; } | |
| #featured-collections { | |
| width: 252px; | |
| margin-bottom: 8px; } | |
| #featured-collections .feature { | |
| margin: 0 auto; | |
| float: none; } | |
| #featured-collections .feature .social { | |
| margin-bottom: 12px; } | |
| #featured-collections .feature.last { | |
| margin-right: auto; } | |
| .clip-columns { | |
| width: 252px; } | |
| .clip-columns .column { | |
| width: 118px; | |
| margin: 0 8px 8px 0; } | |
| .clip-columns .column h3 a { | |
| font-size: 12px; } | |
| .clip-columns .column ul { | |
| margin-bottom: 0; | |
| min-height: 242px; } | |
| .clip-columns .column ul li { | |
| padding: 2px; } | |
| .clip-columns .column ul li a, .clip-columns .column ul li span { | |
| font-size: 11px; } | |
| .clip-columns .column ul li:hover img { | |
| -webkit-transform: scale(1.2, 1.2); | |
| -moz-transform: scale(1.2, 1.2); | |
| -ms-transform: scale(1.2, 1.2); | |
| -o-transform: scale(1.2, 1.2); | |
| transform: scale(1.2, 1.2); | |
| margin: 0 auto 4px auto; } | |
| .clip-columns .column img { | |
| display: none; | |
| float: none; | |
| width: 59px; | |
| margin: 0 auto 4px auto; } | |
| /* Clips Page Content | |
| --------------------------------------------------*/ | |
| #clip-slide-container { | |
| width: 252px; | |
| min-height: 290px; } | |
| /* Sidebar | |
| --------------------------------------------------*/ | |
| #sidebar { | |
| display: block; | |
| margin: 0 -37px 0 0; } | |
| /* Footer | |
| --------------------------------------------------*/ | |
| #footer { | |
| overflow: hidden; } | |
| #footer strong { | |
| display: none; } } | |
| @media only screen and (min-width: 480px) and (max-width: 767px) { | |
| body { | |
| overflow-x: hidden; } | |
| .container { | |
| width: 436px; } | |
| /* Top & Navigation | |
| --------------------------------------------------*/ | |
| #top-nav { | |
| width: 436px; | |
| margin: 36px 0 0 36px; | |
| padding: 8px 0 5px 0; } | |
| #search_terms { | |
| width: 180px; | |
| margin: 2px 8px 0 0; } | |
| #user-nav { | |
| margin: 0 auto; | |
| width: 412px; | |
| float: none; } | |
| #skyscraper-ad { | |
| display: none; } | |
| #bottom-ad { | |
| display: none; } | |
| /* General Content | |
| --------------------------------------------------*/ | |
| #clip-head, | |
| #collection-head, | |
| #clip-collection-head, | |
| #sidebar #static-head, | |
| #static-head, | |
| #more-clips-head, | |
| .section-head { | |
| width: 412px !important; } | |
| .section-head .amazon, | |
| .section-head .netflix { | |
| display: none; } | |
| #feature, | |
| .feature-block, | |
| #feature.sign-up, | |
| #clip-collection { | |
| width: 412px; } | |
| #feature #feature-left #buttons { | |
| display: block; } | |
| #feature #feature-left #clip-navigation { | |
| width: 424px; } | |
| #feature #feature-left #clip-navigation .clip-nav { | |
| float: left; } | |
| #feature #feature-left #clip-navigation #next-clip-title { | |
| margin-bottom: 8px; } | |
| #feature #feature-left #clip-navigation #clip-next { | |
| margin: 0px 0 10px -12px; } | |
| #feature #feature-left #clip-navigation #clip-prev { | |
| margin: 0 0 8px 76px; } | |
| #feature #feature-right { | |
| width: 436px; | |
| margin: 0 -12px 0 -12px; } | |
| #feature #feature-right #clip-slide-container { | |
| width: 436px; } | |
| #feature #feature-right #clip-slide-container .large-image { | |
| width: 436px; } | |
| #feature #feature-right #clip-slide-container .large-image img { | |
| width: 436px; } | |
| #feature #feature-right #clip-slide-container .large-image #current-quote { | |
| width: 396px; } | |
| #feature #feature-right #clip-slide-container .large-image #player-overlay { | |
| display: none; } | |
| #feature #feature-right #player { | |
| width: 436px; } | |
| #clip-list { | |
| width: 412px; } | |
| #clip-list .clip-text { | |
| width: 396px; } | |
| /* Search Page Content | |
| --------------------------------------------------*/ | |
| .collection-image { | |
| display: block; | |
| width: 100px; | |
| float: left; | |
| margin: 0 8px 0 0; } | |
| .collection-image img { | |
| max-width: 100px; } | |
| /* Home Page Content | |
| --------------------------------------------------*/ | |
| #featured-collections { | |
| width: 412px; | |
| margin-bottom: 8px; } | |
| #featured-collections .feature { | |
| margin: 0 auto; | |
| float: none; } | |
| #featured-collections .feature .social { | |
| margin-bottom: 12px; } | |
| #featured-collections .feature.last { | |
| margin-right: auto; } | |
| .clip-columns { | |
| width: 436px; } | |
| .clip-columns .column { | |
| width: 132px; | |
| margin: 0 8px 8px 0; | |
| display: block; } | |
| /* Sidebar | |
| --------------------------------------------------*/ | |
| #sidebar { | |
| margin: 0 62px 0 0; } | |
| /* Footer | |
| --------------------------------------------------*/ | |
| #footer .link-group { | |
| width: 160px; } } | |
| @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { | |
| #header #logo { | |
| background: transparent url("http://hark.dev/assets/inner-logo-retina.png") no-repeat 0 0; | |
| -webkit-background-size: 110px 80px; | |
| -moz-background-size: 110px 80px; | |
| -o-background-size: 110px 80px; | |
| background-size: 110px 80px; } | |
| .section-head .amazon { | |
| background: transparent url("http://hark.dev/assets/icons/button-amazon-short-retina.png") no-repeat 0 0; | |
| -webkit-background-size: 151px 40px; | |
| -moz-background-size: 151px 40px; | |
| -o-background-size: 151px 40px; | |
| background-size: 151px 40px; } | |
| .section-head .netflix { | |
| background: transparent url("http://hark.dev/assets/icons/button-netflix-short-retina.png") no-repeat 0 0; | |
| -webkit-background-size: 151px 40px; | |
| -moz-background-size: 151px 40px; | |
| -o-background-size: 151px 40px; | |
| background-size: 151px 40px; } } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment