1691 строка
32 KiB
CSS
1691 строка
32 KiB
CSS
/* @Reset *********/
|
|
header, hgroup, nav, section, article, aside, footer { display: block; }
|
|
html, body, form, fieldset, legend, h1, h2, h3, h4, h5, h6, dt, dd { margin: 0; padding: 0; }
|
|
fieldset, a img { border: 0; }
|
|
address, caption, cite, code, dfn, th, var { font-style: inherit; font-weight: inherit; }
|
|
abbr, acronym, dfn { border-bottom: 1px dotted #666; font-variant: normal; cursor: help; }
|
|
input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; }
|
|
table { border-collapse: collapse; border-spacing: 0; margin: 0 0 1.286em; }
|
|
caption, th { text-align: left; }
|
|
p, pre, blockquote, dl, ul, ol { margin: 0 0 1.286em; padding: 0; }
|
|
li ul, li ol { margin-bottom: 0; }
|
|
ul, ol { list-style: none; }
|
|
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
font: 12px/1.33 "Lucida Grande", "Lucida Sans", Helvetica, Arial, sans-serif;
|
|
padding: 10px 10px 3em;
|
|
margin: 0 auto;
|
|
color: #373d48;
|
|
text-shadow: 0 1px 0 rgba(255,255,255,0.3);
|
|
max-width: 1150px;
|
|
min-width: 780px;
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
font-weight: normal;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
a:link, a:visited {
|
|
color: #144fae;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover, a:focus, a:active {
|
|
color: #083681;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.hidden {
|
|
position: absolute;
|
|
top: -100000px;
|
|
}
|
|
|
|
section > section {
|
|
background: rgba(255,255,255,0.35) no-repeat;
|
|
border: 1px solid #a8b8d1;
|
|
box-shadow: inset 0 1px 3px rgba(58,78,103,0.15), 0 1px 0 rgba(255,255,255,0.5);
|
|
}
|
|
|
|
#main {
|
|
width: 75%;
|
|
float: left;
|
|
}
|
|
|
|
.html-rtl #main {
|
|
float: right;
|
|
}
|
|
|
|
#main > section,
|
|
#sub > section {
|
|
padding: 10px;
|
|
margin: 0 0 10px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
#sub {
|
|
width: 24%;
|
|
float: right;
|
|
}
|
|
|
|
.html-rtl #sub {
|
|
float: left;
|
|
}
|
|
|
|
.pane header {
|
|
border: 1px solid #a8b8d1;
|
|
border-bottom-width: 0;
|
|
border-radius: 8px;
|
|
background: -moz-linear-gradient(top, #fff 0, #ecf1f7 100%);
|
|
box-shadow: inset 0 -3px 0 rgba(58,78,103,0.05), 0 3px 0 rgba(175,195,220,.3);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.pane #right-module {
|
|
display: none;
|
|
}
|
|
|
|
.detail header {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.recs header {
|
|
float: right;
|
|
margin-top: -1px;
|
|
width: 24%;
|
|
width: -moz-calc(24% - 2px);
|
|
}
|
|
|
|
.html-rtl.recs header {
|
|
float: left;
|
|
}
|
|
|
|
/* @Clear floats *********/
|
|
body:after,
|
|
header:after,
|
|
.addons:after,
|
|
#install:after,
|
|
.notice:after {
|
|
content: ".";
|
|
display: block;
|
|
clear: both;
|
|
height: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* @Introduction *********/
|
|
#intro {
|
|
position: relative;
|
|
width: 71%;
|
|
float: left;
|
|
padding: 10px 2.25%;
|
|
border-right: 1px inset rgba(0,0,0,0.25);
|
|
margin: 0;
|
|
}
|
|
|
|
.html-rtl #intro {
|
|
float: right;
|
|
border-right: 0;
|
|
border-left: 1px inset rgba(0,0,0,0.25);
|
|
}
|
|
|
|
.recs #intro {
|
|
display: none;
|
|
}
|
|
|
|
#intro h1 {
|
|
margin: .5em 0 .25em;
|
|
clear: right;
|
|
}
|
|
|
|
#intro h1 img {
|
|
float: left;
|
|
margin: 10px 20px;
|
|
}
|
|
|
|
.html-rtl #intro h1 img {
|
|
float: right;
|
|
}
|
|
|
|
#intro p {
|
|
position: relative;
|
|
padding-right: 140px;
|
|
}
|
|
|
|
.html-rtl #intro p {
|
|
padding: 0 0 0 120px;
|
|
}
|
|
|
|
#intro #learn-more {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
max-width: 100px;
|
|
}
|
|
|
|
.html-rtl #intro #learn-more {
|
|
right: auto;
|
|
left: 0;
|
|
}
|
|
|
|
/* @group Recommendations */
|
|
#main #recs {
|
|
display: none;
|
|
min-height: 200px;
|
|
padding: 0;
|
|
position: relative;
|
|
}
|
|
.recs #main #recs {
|
|
display: block;
|
|
}
|
|
|
|
#recs .gallery-wrap {
|
|
background-color: #d4edea;
|
|
border-radius: 0 0 8px 8px;
|
|
position: relative;
|
|
}
|
|
|
|
#recs .msg {
|
|
display: table;
|
|
height: 160px;
|
|
width: 100%;
|
|
}
|
|
#recs .msg p {
|
|
display: table-cell;
|
|
font-size: 15px;
|
|
line-height: 1.3;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
#recs .loading p {
|
|
margin-bottom: 0;
|
|
padding-top: 78px;
|
|
}
|
|
#recs .loading p > span {
|
|
background: url(../../img/zamboni/discovery_pane/loading.gif) no-repeat;
|
|
display: inline-block;
|
|
opacity: 0.25;
|
|
height: 48px;
|
|
position: absolute;
|
|
top: 73px;
|
|
left: 50%;
|
|
left: -moz-calc(50% - 24px);
|
|
width: 48px;
|
|
}
|
|
/* @end */
|
|
|
|
/* @Mission, @My-account *********/
|
|
#mission, #my-account {
|
|
margin: 0 0 0 -10px;
|
|
padding: 10px;
|
|
float: right;
|
|
width: 22%;
|
|
width: -moz-calc(24% - 22px);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.recs #mission,
|
|
.recs #my-account {
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.recs #mission {
|
|
background: -moz-linear-gradient(top, #fff 0, #ecf1f7 100%);
|
|
}
|
|
|
|
#my-account {
|
|
background:
|
|
url(../../img/zamboni/discovery_pane/bg-home.png) no-repeat 100% 100%,
|
|
-moz-linear-gradient(top, #fff 0, #ecf1f7 100%);
|
|
border-radius: 0 8px 8px 0;
|
|
}
|
|
.no-recs header.auth {
|
|
background:
|
|
url(../../img/zamboni/discovery_pane/bg-home.png) no-repeat 100% -moz-calc(100% - 3px),
|
|
-moz-linear-gradient(top, #fff 0, #ecf1f7 100%);
|
|
}
|
|
.no-recs #my-account {
|
|
background: none;
|
|
padding-bottom: 0;
|
|
}
|
|
.recs #mission,
|
|
.recs #my-account {
|
|
border-left-width: 0;
|
|
border-radius: 8px;
|
|
float: left;
|
|
margin-left: 0;
|
|
padding-left: 10px;
|
|
width: -moz-calc(100% - 20px);
|
|
}
|
|
|
|
.html-rtl #mission,
|
|
.html-rtl #my-account {
|
|
float: left;
|
|
margin-left: 0;
|
|
text-align: right;
|
|
}
|
|
|
|
.html-rtl.recs #mission,
|
|
.html-rtl.recs #my-account {
|
|
float: right;
|
|
}
|
|
|
|
#mission p,
|
|
#my-account p {
|
|
font-size: 15px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
#mission p,
|
|
#my-account p,
|
|
#my-account ul {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
#my-account ul {
|
|
color: #76787b;
|
|
line-height: 1.5;
|
|
list-style: disc inside;
|
|
}
|
|
|
|
#my-account p#logout {
|
|
font-size: 11px;
|
|
margin: 0 0 0 13px;
|
|
}
|
|
|
|
#mission a,
|
|
#mission strong,
|
|
#my-account strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
#mission #download-count {
|
|
font-size: 1em;
|
|
}
|
|
|
|
/* @Main @Feature *********/
|
|
#main #promos {
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 5px;
|
|
box-shadow: none;
|
|
padding: 0;
|
|
width: auto;
|
|
}
|
|
|
|
#promos .prev {
|
|
left: 0 !important;
|
|
}
|
|
#promos .next {
|
|
right: 0 !important;
|
|
}
|
|
|
|
.feature {
|
|
background: rgba(255,255,255,0.35) no-repeat;
|
|
border: 1px solid #a8b8d1;
|
|
box-shadow: inset 0 1px 3px rgba(58,78,103,0.15), 0 1px 0 rgba(255,255,255,0.5);
|
|
margin-bottom: 10px;
|
|
min-height: 240px;
|
|
padding: 10px 9%;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
#main #featured-addons {
|
|
margin-top: 283px;
|
|
}
|
|
#main #promos.js + #featured-addons {
|
|
margin-top: 0;
|
|
}
|
|
|
|
section#featured-addons {
|
|
padding: 20px 10% 0;
|
|
}
|
|
|
|
#promos ul.addons {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#main #promos.js {
|
|
height: 273px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#promos.js .feature {
|
|
height: 251px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.slider {
|
|
white-space: nowrap;
|
|
position: relative;
|
|
left: 0;
|
|
-moz-transition-duration: .3s;
|
|
-moz-transition-property: left, right;
|
|
-webkit-transition-duration: .3s;
|
|
-webkit-transition-property: left, right;
|
|
}
|
|
|
|
.slider.noslide {
|
|
-moz-transition: none;
|
|
-webkit-transition: none;
|
|
}
|
|
|
|
.slider > li {
|
|
width: 100%;
|
|
white-space: normal;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
top: 0;
|
|
}
|
|
|
|
#nav-features,
|
|
#nav-recs {
|
|
height: 0;
|
|
margin: 0;
|
|
display: none;
|
|
position: relative;
|
|
}
|
|
|
|
#promos.js #nav-features,
|
|
.recs #recs #nav-recs.js {
|
|
display: block;
|
|
}
|
|
|
|
#nav-features a,
|
|
#nav-recs a {
|
|
position: absolute;
|
|
top: 0;
|
|
margin: 1px;
|
|
z-index: 10;
|
|
display: block;
|
|
height: 271px;
|
|
width: 4%;
|
|
text-indent: -999em;
|
|
text-decoration: none;
|
|
overflow: hidden;
|
|
opacity: 0.3;
|
|
-moz-transition-property: opacity, width;
|
|
-moz-transition-duration: 0.5s;
|
|
-moz-transition-timing-function: ease-out;
|
|
}
|
|
|
|
.nav-prev a.prev {
|
|
border-radius: 5px 0 0 5px;
|
|
}
|
|
|
|
.nav-next a.next {
|
|
border-radius: 0 5px 5px 0;
|
|
}
|
|
|
|
#nav-recs a {
|
|
margin: 0;
|
|
height: 183px;
|
|
}
|
|
|
|
#nav-features a:hover,
|
|
#nav-features a:active,
|
|
#nav-recs a:hover,
|
|
#nav-recs a:active {
|
|
opacity: 1;
|
|
width: 7%;
|
|
-moz-transition-property: opacity, width, background-color;
|
|
-moz-transition-duration: 0.2s;
|
|
-moz-transition-timing-function: ease-out;
|
|
}
|
|
|
|
#nav-features a:focus,
|
|
#nav-recs a:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
.nav-prev a,
|
|
#lightbox-nav a#lightbox-nav-btnPrev {
|
|
left: 0;
|
|
border-radius: 8px 0 0 8px;
|
|
background: url("../../img/zamboni/discovery_pane/arrow-left.png") no-repeat center center, -moz-linear-gradient(left, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.5) 80%) !important;
|
|
box-shadow: inset rgba(255,255,255,0.1) 0px 0px 6px, rgba(125,125,125, 0.1) 1px 0px 3px;
|
|
}
|
|
|
|
.nav-prev a:hover,
|
|
.nav-prev a:active {
|
|
box-shadow: inset rgba(255,255,255,0.4) 0px 0px 6px, rgba(125,125,125,0.1) 2px 0px 3px;
|
|
}
|
|
|
|
.nav-next a,
|
|
#lightbox-nav a#lightbox-nav-btnNext {
|
|
right: 0;
|
|
border-radius: 0 8px 8px 0;
|
|
background: url("../../img/zamboni/discovery_pane/arrow-right.png") no-repeat center center, -moz-linear-gradient(right, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.5) 80%) !important;
|
|
box-shadow: inset rgba(255,255,255,0.1) 0px 0px 6px, rgba(125,125,125, 0.1) -1px 0px 3px;
|
|
}
|
|
|
|
.nav-next a:hover,
|
|
.nav-next a:active {
|
|
box-shadow: inset rgba(255,255,255,0.4) 0px 0px 6px, rgba(125,125,125,0.1) -2px 0px 3px;
|
|
}
|
|
|
|
#nav-recs .nav-prev a {
|
|
border-top-left-radius: 0;
|
|
}
|
|
#nav-recs .nav-next a {
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
.nav-prev .disabled,
|
|
.nav-next .disabled {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* @group Top Add-ons and Featured Personas */
|
|
#sub .featured {
|
|
position: relative;
|
|
}
|
|
|
|
#recs .header,
|
|
#sub .featured h2,
|
|
#more-ways h2 {
|
|
margin: -10px -10px 0;
|
|
padding: 0.45em 10px;
|
|
background: -moz-linear-gradient(top, #fff 0, #ecf1f7 100%);
|
|
box-shadow: inset 0 -3px 0 rgba(58,78,103,0.05), 0 3px 0 rgba(175,195,220,.3);
|
|
border-radius: 8px 8px 0 0;
|
|
border-bottom: 1px solid #a8b8d1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#recs .header {
|
|
margin: 0;
|
|
padding: 0.45em 10%;
|
|
width: 80%;
|
|
}
|
|
|
|
#sub ul {
|
|
margin: 0 0 -10px;
|
|
}
|
|
|
|
#sub li {
|
|
border-bottom: 1px solid #cdd4de;
|
|
margin: 0 -10px;
|
|
clear: both;
|
|
}
|
|
#promo-video-addons li.show {
|
|
border-bottom: 0;
|
|
border-top: 1px solid #cdd4de;
|
|
}
|
|
.featured-personas li {
|
|
border-bottom-color: #666;
|
|
}
|
|
#sub li:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
#sub .featured li,
|
|
.featured-personas li h6,
|
|
#more-ways li {
|
|
font-size: 13px;
|
|
}
|
|
|
|
#sub li a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.htruncate {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.featured .featured-addons a.addon-title .htruncate {
|
|
line-height: 32px;
|
|
display: inline-block;
|
|
width: -moz-calc(100% - 48px);
|
|
}
|
|
|
|
.featured .featured-addons a.addon-title,
|
|
.featured .featured-personas span.addon-title {
|
|
display: block;
|
|
background: rgba(255,255,255,0.35) url("../../img/zamboni/discovery_pane/arrow-right.png") 95% 50% no-repeat;
|
|
color: #333;
|
|
overflow: hidden;
|
|
}
|
|
.featured .featured-personas span.addon-title {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.featured .featured-addons a.addon-title,
|
|
.featured .featured-personas span.addon-title b {
|
|
padding: 0.5em 30px 0.5em 10px;
|
|
}
|
|
|
|
.featured .featured-personas span.addon-title b {
|
|
display: block;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.featured .featured-personas span.addon-title {
|
|
background-color: rgba(255,255,255,0.65);
|
|
border-top: 1px solid rgba(255,255,255,0.35);
|
|
text-decoration: none;
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.featured .featured-addons a.addon-title:hover,
|
|
.featured .featured-addons a.addon-title:focus,
|
|
.featured .featured-addons a.addon-title:active,
|
|
.featured .featured-personas a:hover span.addon-title,
|
|
.featured .featured-personas a:focus span.addon-title,
|
|
.featured .featured-personas a:active span.addon-title {
|
|
background-color: rgba(255,255,255,0.65);
|
|
background-position: 96% 50%;
|
|
-moz-transition-property: background-color, background-position;
|
|
-moz-transition-duration: 0.1s;
|
|
-moz-transition-timing-function: ease-out;
|
|
color: #083681;
|
|
}
|
|
|
|
.featured .featured-personas a:hover span.addon-title,
|
|
.featured .featured-personas a:focus span.addon-title,
|
|
.featured .featured-personas a:active span.addon-title {
|
|
background-color: rgba(255,255,255,0.8);
|
|
}
|
|
|
|
#sub .featured li:last-child a,
|
|
#sub .featured-personas:last-child a span.addon-title,
|
|
#promo-video-addons .show.last a,
|
|
#promo-video-addons .show.last a span.addon-title {
|
|
border-radius: 0 0 8px 8px;
|
|
}
|
|
|
|
.featured .featured-addons img {
|
|
display: block;
|
|
float: left;
|
|
vertical-align: middle;
|
|
margin: 0 8px 0 0;
|
|
}
|
|
|
|
|
|
#sub .all,
|
|
#recs .header h2 a {
|
|
line-height: 24px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
#sub .all {
|
|
display: block;
|
|
float: right;
|
|
}
|
|
|
|
#recs .header h2 a {
|
|
display: inline-block;
|
|
margin-left: 10px;
|
|
}
|
|
.html-rtl #recs .header h2 a {
|
|
float: left;
|
|
height: 18px;
|
|
line-height: 25px;
|
|
margin: 0 10px 0 0;
|
|
}
|
|
|
|
/* @end */
|
|
|
|
/* @group Personas */
|
|
.persona-preview {
|
|
display: block;
|
|
position: relative;
|
|
line-height: 1;
|
|
}
|
|
.persona-preview [data-browsertheme] {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
.pane #main .persona-feature {
|
|
position: relative;
|
|
left: 4px;
|
|
}
|
|
|
|
#recs .persona-feature + .addon-feature {
|
|
left: -4px;
|
|
}
|
|
|
|
#recs .persona-feature + .persona-feature {
|
|
left: 0;
|
|
}
|
|
|
|
#recs .addon-feature + .persona-feature {
|
|
left: 0;
|
|
}
|
|
|
|
#recs .persona-feature:nth-child(3n) {
|
|
left: -4px;
|
|
}
|
|
|
|
.pane #main .persona-feature .persona,
|
|
.pane #main .persona-feature h3,
|
|
.pane #main .persona-feature .persona-preview {
|
|
position: absolute;
|
|
}
|
|
|
|
.pane #main .persona-feature .persona {
|
|
width: 100%;
|
|
}
|
|
|
|
.pane #main .persona-feature h3 {
|
|
top: 80px;
|
|
margin: 10px;
|
|
width: -moz-calc(100% - 20px);
|
|
}
|
|
|
|
.pane #main .persona-feature .persona .persona-preview {
|
|
border: 1px solid #b7c3d7;
|
|
box-shadow: inset 0 -2px 0 rgba(58,78,103,0.08), 0 2px 0 rgba(190,210,230,0.5);
|
|
top: -132px;
|
|
margin-left: -4px;
|
|
/* Think this is cheesy? You're right. Our minifier ruins additions within -moz-calc*/
|
|
width: -moz-calc(100% - -6px);
|
|
}
|
|
|
|
.pane #main .persona-large .persona-preview [data-browsertheme] {
|
|
background-position: 50% 0;
|
|
height: 67px;
|
|
width: 100%;
|
|
}
|
|
|
|
.pane #sub .persona-large .persona-preview [data-browsertheme] {
|
|
background-position: 100% 50%;
|
|
height: 60px;
|
|
}
|
|
|
|
.detail .persona-large {
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
|
|
width: 680px;
|
|
}
|
|
.detail .persona-large .persona-preview [data-browsertheme] {
|
|
background: transparent no-repeat left top;
|
|
border: 1px solid #a9a9a9;
|
|
height: 100px;
|
|
}
|
|
.detail .persona-hover.persona-large .persona-preview [data-browsertheme] {
|
|
border-color: #666;
|
|
}
|
|
.detail .persona-large .caption {
|
|
background-color: rgba(0,0,0,0.35);
|
|
color: #fff;
|
|
font-size: 11px;
|
|
padding: 7px 10px;
|
|
position: absolute;
|
|
}
|
|
.detail .persona-hover.persona-large .caption {
|
|
display: none;
|
|
}
|
|
/* @end */
|
|
|
|
/* @More ways to customize *********/
|
|
#more-ways ul {
|
|
font-size: 13px;
|
|
clear: right;
|
|
}
|
|
|
|
#more-ways a {
|
|
display: block;
|
|
padding: 12px 30px 10px 12px;
|
|
min-height: 45px;
|
|
background: rgba(255,255,255,0.1) url("../../img/zamboni/discovery_pane/arrow-right.png") 95% 8px no-repeat;
|
|
color: #333;
|
|
text-decoration: none;
|
|
text-shadow: 0 0 1px #fff;
|
|
}
|
|
|
|
#more-ways a:hover,
|
|
#more-ways a:focus,
|
|
#more-ways a:active {
|
|
background-position: 96% 8px;
|
|
background-color: rgba(255,255,255,0.5);
|
|
-moz-transition-property: background-position, background-color;
|
|
-moz-transition-duration: 0.1s;
|
|
-moz-transition-timing-function: ease-out;
|
|
color: #083681;
|
|
}
|
|
|
|
#more-addons {
|
|
background: transparent url("../../img/zamboni/discovery_pane/bg-moreaddons.jpg") 95% 50% no-repeat;
|
|
}
|
|
|
|
#more-personas {
|
|
background: transparent url("../../img/zamboni/discovery_pane/bg-morepersonas.jpg") 70% 50% no-repeat;
|
|
border-radius: 0 0 8px 8px;
|
|
}
|
|
|
|
/* @Narrow *********/
|
|
@media (max-width: 860px) {
|
|
body {
|
|
margin: 0 10px;
|
|
min-width: 620px;
|
|
}
|
|
|
|
.no-recs header #mission,
|
|
.no-recs header #my-account,
|
|
.recs header {
|
|
display: none;
|
|
}
|
|
|
|
.no-recs header.auth {
|
|
background: -moz-linear-gradient(top, #fff 0, #ecf1f7 100%);
|
|
}
|
|
|
|
#main,
|
|
#sub,
|
|
#mission,
|
|
#my-account {
|
|
float: none;
|
|
width: 100%;
|
|
}
|
|
|
|
#main #promos {
|
|
height: 290px;
|
|
}
|
|
|
|
.feature {
|
|
height: 270px;
|
|
}
|
|
|
|
#intro {
|
|
border: 0;
|
|
width: auto;
|
|
float: none;
|
|
}
|
|
|
|
#sub #up-and-coming,
|
|
#sub #featured-personas,
|
|
#sub #more-ways {
|
|
float: left;
|
|
margin-right: 1%;
|
|
width: 30%;
|
|
width: -moz-calc(100% / 3 - 22px - 0.5%);
|
|
}
|
|
#sub #more-ways {
|
|
margin-right: 0;
|
|
width: -moz-calc(100% / 3 - 22px - 1%);
|
|
}
|
|
|
|
#promo-video-addons {
|
|
display: none !important; /* Due to $.show() */
|
|
}
|
|
}
|
|
|
|
/* @Detail page *********/
|
|
body.detail {
|
|
padding: 20px;
|
|
margin: 0;
|
|
}
|
|
|
|
.detail #main,
|
|
.detail #addon-reviews {
|
|
padding-left: 52px;
|
|
width: auto;
|
|
float: none;
|
|
position: relative;
|
|
}
|
|
|
|
.html-rtl.detail #main,
|
|
.html-rtl.detail #addon-reviews {
|
|
padding: 0 52px 0 0;
|
|
}
|
|
|
|
/* @group Add-on details header */
|
|
.detail header {
|
|
margin: 0 0 1.6em;
|
|
position: relative;
|
|
text-shadow: 0 1px 0 rgba(255,255,255,0.8);
|
|
}
|
|
|
|
.detail h1.addon {
|
|
color: #000;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.detail h1.addon .version {
|
|
font-size: .833em;
|
|
font-weight: normal;
|
|
color: #76787b;
|
|
}
|
|
|
|
.html-rtl.detail h1.addon,
|
|
.html-rtl.detail h2.author {
|
|
text-align: right;
|
|
}
|
|
|
|
.detail h1.addon .icon {
|
|
max-width: 32px;
|
|
position: absolute;
|
|
left: -52px;
|
|
}
|
|
|
|
.html-rtl.detail h1.addon .icon {
|
|
left: auto;
|
|
right: -52px;
|
|
}
|
|
|
|
.detail h2.author,
|
|
.detail p#back {
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.detail p#back {
|
|
float: right;
|
|
margin-left: 1em;
|
|
}
|
|
.html-rtl.detail p#back {
|
|
float: left;
|
|
margin: 0 1em 1em 0;
|
|
}
|
|
|
|
p#back:before {
|
|
content: "\25B4";
|
|
margin-right: 0.5em;
|
|
position: relative;
|
|
bottom: 1px;
|
|
}
|
|
.html-rtl p#back:before {
|
|
margin: 0 0 0 0.5em;
|
|
}
|
|
|
|
p#back:before,
|
|
p#back a:link,
|
|
p#back a:visited {
|
|
color: #144fae;
|
|
}
|
|
|
|
p#back:hover:before {
|
|
color: #083681;
|
|
}
|
|
/* @end */
|
|
|
|
/* @group Add-on detail install button/links */
|
|
#install li {
|
|
float: left;
|
|
font-weight: bold;
|
|
margin-right: 10px;
|
|
padding-top: 4px;
|
|
}
|
|
.html-rtl #install li {
|
|
float: right;
|
|
}
|
|
.html-rtl #install li:first-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
#install .privacy a {
|
|
padding-top: 5px;
|
|
}
|
|
|
|
#install .privacy-policy {
|
|
display: none;
|
|
}
|
|
|
|
.install-shell p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.install-shell .extra {
|
|
font-size: .85em;
|
|
font-weight: bold;
|
|
padding-top: 6px;
|
|
}
|
|
|
|
.install + .extra {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.install-shell .notavail {
|
|
padding: 1px 0 1px 20px;
|
|
margin-left: 3px;
|
|
background: url(../../img/zamboni/icons/no-14x14.png) 0 30% no-repeat;
|
|
white-space: nowrap;
|
|
}
|
|
.html-rtl .install-shell .notavail {
|
|
padding: 1px 20px 1px 0;
|
|
background-position: 100% 30%;
|
|
}
|
|
|
|
#install .warning {
|
|
clear: both;
|
|
margin: 4px 0 0;
|
|
padding: 0 4px;
|
|
width: 175px;
|
|
}
|
|
|
|
.featuredaddon .install-button + strong {
|
|
display: none;
|
|
}
|
|
|
|
li#no-restart {
|
|
padding: 0;
|
|
}
|
|
|
|
#no-restart-msg {
|
|
background: #fff;
|
|
border: 1px solid #B6D9E5;
|
|
border-radius: 3px;
|
|
color: #294473;
|
|
display: block;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
padding: 3px 12px 4px;
|
|
}
|
|
|
|
.notice {
|
|
background: #e3edfa;
|
|
border-radius: 5px;
|
|
width: 50%;
|
|
margin-bottom: 1.286em;
|
|
padding: 14px;
|
|
}
|
|
.notice p {
|
|
margin: 0;
|
|
}
|
|
|
|
.performance-note {
|
|
background: url(../../img/impala/turtle.png) no-repeat 28px 16px #fff8dc;
|
|
padding: 14px 14px 14px 104px;
|
|
}
|
|
.html-rtl .performance-note {
|
|
background-position: 96% 16px;
|
|
padding: 14px 104px 14px 14px;
|
|
}
|
|
.notice h3,
|
|
.upsell .premium a {
|
|
font: normal bold 14px/1.2em "helvetica neue", helvetica, arial, sans-serif;
|
|
}
|
|
|
|
.upsell {
|
|
position: relative;
|
|
}
|
|
|
|
.upsell > h3,
|
|
.upsell .premium {
|
|
line-height: 32px;
|
|
padding: 0 0 .5em;
|
|
}
|
|
|
|
.upsell > h3 {
|
|
float: left;
|
|
margin-right: 1em;
|
|
}
|
|
.html-rtl .upsell > h3 {
|
|
float: right;
|
|
margin: 0 0 0 1em;
|
|
}
|
|
|
|
.upsell .premium {
|
|
float: right;
|
|
}
|
|
.html-rtl .upsell .premium {
|
|
float: left;
|
|
}
|
|
|
|
.upsell .premium a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.upsell img {
|
|
float: left;
|
|
margin-right: 5px;
|
|
height: 32px;
|
|
}
|
|
|
|
.upsell .prose {
|
|
clear: both;
|
|
}
|
|
|
|
.upsell ul {
|
|
list-style: disc;
|
|
}
|
|
.upsell ol {
|
|
list-style: decimal;
|
|
}
|
|
|
|
.upsell ul,
|
|
.upsell ol {
|
|
margin: 0 0 0 2em;
|
|
}
|
|
.html-rtl .upsell ul,
|
|
.html-rtl .upsell ol {
|
|
margin: 0 2em 0 0;
|
|
}
|
|
|
|
/* @group Installation popup notices */
|
|
|
|
.install-note .msg {
|
|
background-repeat: no-repeat;
|
|
margin-bottom: 10px;
|
|
min-height: 32px;
|
|
}
|
|
|
|
.mobile .install-note .msg,
|
|
.firefox .install-note .msg { background-image: url(../../img/app-icons/small/firefox.png); }
|
|
.thunderbird .install-note .msg { background-image: url(../../img/app-icons/small/thunderbird.png); }
|
|
.sunbird .install-note .msg { background-image: url(../../img/app-icons/small/sunbird.png); }
|
|
.seamonkey .install-note .msg { background-image: url(../../img/app-icons/small/seamonkey.png); }
|
|
|
|
.install-note .msg.m-unreviewed,
|
|
.install-note .msg.m-selfhosted {
|
|
background-image: url(../../img/zamboni/icons/alert-32x32.png);
|
|
}
|
|
|
|
.install-note .msg.m-platforms {
|
|
background-image: url(../../img/zamboni/icons/no-32x32.png);
|
|
}
|
|
|
|
.install-note .beta,
|
|
.fxbeta .install-note .nobeta {
|
|
display: none;
|
|
}
|
|
|
|
.fxbeta .install-note .beta {
|
|
display: block;
|
|
}
|
|
|
|
.install-note {
|
|
position: absolute;
|
|
left: 35px;
|
|
background: #fff;
|
|
border: 3px solid #2e5186;
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
|
margin-top: 12px;
|
|
padding: 10px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.install-note {
|
|
width: 300px;
|
|
}
|
|
|
|
.install-note:before,
|
|
.install-note:after {
|
|
border: 10px solid transparent;
|
|
border-bottom-color: #2e5186;
|
|
content: "\00a0";
|
|
position: absolute;
|
|
left: 50px;
|
|
top: -20px; /* value = - border-top-width - border-bottom-width */
|
|
pointer-events: none;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
/* creates the smaller triangle */
|
|
.install-note:after {
|
|
border-width: 5px;
|
|
border-bottom-color: #fff;
|
|
left: 55px;
|
|
top: -10px; /* value = - border-top-width - border-bottom-width */
|
|
}
|
|
|
|
.install-note p {
|
|
font-weight: normal;
|
|
padding-left: 50px;
|
|
}
|
|
|
|
.install-note strong {
|
|
margin: 0;
|
|
color: inherit;
|
|
font-size: inherit;
|
|
}
|
|
|
|
.install-note .button {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* @end */
|
|
|
|
/* @end */
|
|
|
|
.addon-info li {
|
|
clear: both;
|
|
overflow: hidden;
|
|
padding-left: 110px;
|
|
padding-bottom: .5em;
|
|
margin-bottom: .5em;
|
|
border-bottom: 2px groove rgba(255,255,255,.25);
|
|
}
|
|
|
|
.html-rtl .addon-info li {
|
|
padding-left: 0;
|
|
padding-right: 110px;
|
|
}
|
|
|
|
.addon-info li:last-child {
|
|
border: 0;
|
|
}
|
|
|
|
.addon-info h3 {
|
|
color: #76787b;
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
line-height: 1.3;
|
|
width: 100px;
|
|
float: left;
|
|
margin-left: -110px;
|
|
}
|
|
|
|
.html-rtl .addon-info h3 {
|
|
float: right;
|
|
margin: 0 -110px 0 0;
|
|
}
|
|
|
|
.addon-info p {
|
|
margin: 0;
|
|
}
|
|
|
|
.addon-info .stars {
|
|
margin: -1px 8px 0 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.html-rtl .addon-info .stars {
|
|
float: right;
|
|
margin: -1px 0 0 8px;
|
|
}
|
|
|
|
/* @group Headings */
|
|
#addon-reviews h3,
|
|
body.eula header + h3 {
|
|
margin-bottom: 0.75em;
|
|
position: relative;
|
|
}
|
|
|
|
#addon-reviews h3:after,
|
|
body.eula header + h3:after {
|
|
border-top: 2px groove rgba(255,255,255,.25);
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 4px;
|
|
right: 0;
|
|
width: -moz-calc(100% - 70px);
|
|
}
|
|
body.eula header + h3:after {
|
|
width: -moz-calc(100% - 235px);
|
|
}
|
|
|
|
.html-rtl #addon-reviews h3,
|
|
.html-rtl.eula h3 {
|
|
text-align: right;
|
|
}
|
|
|
|
.html-rtl #addon-reviews h3:after,
|
|
.html-rtl.eula header + h3:after {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
/* @end */
|
|
|
|
/* @Reviews *********/
|
|
#addon-reviews .review-detail {
|
|
margin: 0 0 1.5em;
|
|
padding: 0 0 .25em;
|
|
border-bottom: 2px groove rgba(255,255,255,.25);
|
|
}
|
|
|
|
#addon-reviews .rev-title {
|
|
font-weight: bold;
|
|
font-size: 1em;
|
|
margin: 0 0 .25em;
|
|
}
|
|
|
|
#addon-reviews .stars {
|
|
float: none;
|
|
display: inline-block;
|
|
margin: -3px 0 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
#addon-reviews .rev-author {
|
|
font-size: 1em;
|
|
color: #76787b;
|
|
margin: 0 0 .5em;
|
|
}
|
|
|
|
#addon-reviews .more-info,
|
|
p.users {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* @Star ratings *********/
|
|
.stars {
|
|
text-indent: -999em;
|
|
background: url(../../img/icons/stars.png) 0 50% no-repeat;
|
|
margin-right: .5em;
|
|
width: 65px;
|
|
float: left;
|
|
}
|
|
.stars-4 { background-position: -13px 50%; }
|
|
.stars-3 { background-position: -26px 50%; }
|
|
.stars-2 { background-position: -39px 50%; }
|
|
.stars-1 { background-position: -52px 50%; }
|
|
.stars-0 { background-position: -65px 50%; }
|
|
|
|
/* @Buttons *********/
|
|
a.button {
|
|
padding: 4px 12px 3px;
|
|
border: 1px solid rgba(165,175,185,0.75);
|
|
color: #333;
|
|
text-decoration: none;
|
|
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
|
|
background: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0, rgba(235,235,235,0.5) 50%, rgba(215,215,215,0.5) 52%, rgba(240,240,240,0.5) 100%);
|
|
border-radius: 3px;
|
|
box-shadow: inset 0 0 2px rgba(255,255,255,0.65);
|
|
}
|
|
|
|
.button:hover,
|
|
.button:focus,
|
|
.button:active {
|
|
border-color: rgba(165,175,185,1);
|
|
color: #083681;
|
|
background: -moz-linear-gradient(top, rgba(255,255,255,0.8) 0, rgba(235,235,235,0.8) 50%, rgba(215,215,215,0.8) 52%, rgba(240,240,240,0.8) 100%);
|
|
}
|
|
|
|
/** @Blue @Button *********/
|
|
.button.go {
|
|
font-weight: bold;
|
|
color: #fff;
|
|
background: -moz-linear-gradient(top, #7bf 40%, #39f 60%);
|
|
border-color: #05e;
|
|
text-shadow: 0 -1px 0 #05e;
|
|
}
|
|
|
|
.button.go:hover,
|
|
.button.go:focus,
|
|
.button.go:active {
|
|
border-color: #03c;
|
|
}
|
|
|
|
.button.go:active {
|
|
background: -moz-linear-gradient(top, #39f 40%, #7bf 60%);
|
|
}
|
|
|
|
/** @Green @button *********/
|
|
.button.download,
|
|
.button.add,
|
|
.button.installer {
|
|
font-weight: bold;
|
|
color: #fff;
|
|
background: -moz-linear-gradient(top, #93c85e 30%, #55a802 55%);
|
|
border-color: #3a7404;
|
|
text-shadow: 0 -1px 0 #3a7404;
|
|
}
|
|
|
|
.button.download:hover,
|
|
.button.download:focus,
|
|
.button.add:hover,
|
|
.button.add:focus,
|
|
.button.installer:hover,
|
|
.button.installer:focus {
|
|
border-color: #1a5404;
|
|
}
|
|
|
|
.button.download:active,
|
|
.button.add:active,
|
|
.button.installer:active {
|
|
background: -moz-linear-gradient(#55a802 40%, #83c046 65%);
|
|
}
|
|
|
|
.button.download b,
|
|
.button.add b {
|
|
padding: 3px 16px 3px 12px;
|
|
margin: 0 0 0 -12px;
|
|
width: 16px;
|
|
background: transparent url("../../img/zamboni/icons/button-icons.png") 25% 0 no-repeat;
|
|
}
|
|
|
|
.html-rtl .button b {
|
|
padding: 3px 12px 3px 16px;
|
|
margin: 0 -12px 0 0;
|
|
}
|
|
|
|
.button.add span {
|
|
border-left: 2px groove rgba(150,150,150,0.35);
|
|
padding: 0 0 0 12px;
|
|
margin: 0 2px 0 -2px;
|
|
display: inline-block;
|
|
line-height: 1.2;
|
|
white-space: normal;
|
|
}
|
|
|
|
.html-rtl .button.add span {
|
|
border-left: 0;
|
|
border-right: 2px groove rgba(150,150,150,0.35);
|
|
padding: 0 8px 0 6px;
|
|
margin: 0 -2px 0 2px;
|
|
}
|
|
|
|
.button.concealed {
|
|
background-image: -moz-linear-gradient(top, #bbb 40%, #888 60%);
|
|
border-color: #888;
|
|
text-shadow: 0 -1px 0 #666;
|
|
}
|
|
|
|
.button.concealed:hover,
|
|
.button.concealed:focus,
|
|
.button.concealed:active {
|
|
border-color: #666;
|
|
}
|
|
|
|
.button.concealed:active {
|
|
background: -moz-linear-gradient(top, #888 40%, #bbb 60%);
|
|
}
|
|
|
|
/* For other platforms */
|
|
.install-button .button span.os {
|
|
padding: 0;
|
|
margin: 0;
|
|
border: 0;
|
|
font-weight: normal;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.install-button .button.platform {
|
|
display: none;
|
|
}
|
|
|
|
.mac .button.mac,
|
|
.linux .button.linux,
|
|
.other .button.bsd,
|
|
.other .button.solaris,
|
|
.windows .button.windows {
|
|
display: inline-block;
|
|
margin: -4px 0 0;
|
|
}
|
|
|
|
/* @Images *********/
|
|
#jquery-overlay {
|
|
background-color: rgba(216, 225, 239, 0.75) !important;
|
|
opacity: 1 !important;
|
|
}
|
|
#lightbox-container-image-data-box {
|
|
font: 10px/1.4 "Lucida Grande", "Lucida Sans", Helvetica, Arial, sans-serif !important;
|
|
}
|
|
|
|
#lightbox-secNav-btnClose img {
|
|
display: none;
|
|
}
|
|
a#lightbox-secNav-btnClose:after {
|
|
content: "\D7";
|
|
}
|
|
a#lightbox-secNav-btnClose {
|
|
-moz-border-radius: 20px;
|
|
border-radius: 20px;
|
|
background-color: #ddd;
|
|
color: #fff;
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
height: 25px;
|
|
line-height: 22px;
|
|
margin-top: 2px;
|
|
padding-bottom: 0;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
width: 25px;
|
|
}
|
|
|
|
#jquery-lightbox:hover a#lightbox-secNav-btnClose {
|
|
background-color: #ccc;
|
|
}
|
|
|
|
#jquery-lightbox:hover a#lightbox-secNav-btnClose:hover {
|
|
background-color: #2a4364;
|
|
}
|
|
|
|
#images,
|
|
#screenshot,
|
|
.detail .persona-large {
|
|
margin: 0 0 16px;
|
|
}
|
|
|
|
#images {
|
|
background: rgba(255,255,255,0.35) no-repeat;
|
|
border: 1px solid #a8b8d1;
|
|
box-shadow: inset 0 1px 3px rgba(58,78,103,0.15), 0 1px 0 rgba(255,255,255,0.5);
|
|
max-height: 140px;
|
|
display: none;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
#recs .gallery {
|
|
overflow: hidden;
|
|
height: 183px;
|
|
}
|
|
|
|
#recs .gallery-addons {
|
|
margin: 0 auto;
|
|
width: 80%;
|
|
}
|
|
|
|
#images + .addon-info {
|
|
margin-top: 158px;
|
|
}
|
|
|
|
#images + .addon-info.js {
|
|
margin-top: 0;
|
|
}
|
|
|
|
#images.js {
|
|
height: 140px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#images.js .panel {
|
|
width: -moz-calc(100% / 3);
|
|
margin: 0 -3px;
|
|
padding: 15px 0;
|
|
text-align: center;
|
|
height: 110px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: none;
|
|
}
|
|
|
|
#recs .panel {
|
|
float: none;
|
|
margin: 20px 5% 20px 0;
|
|
}
|
|
#recs .panel:nth-child(3n) {
|
|
margin-right: 0;
|
|
}
|
|
.html-rtl #recs .gallery {
|
|
direction: ltr;
|
|
}
|
|
|
|
#screenshot img,
|
|
#images a img {
|
|
border: 1px solid #a9a9a9;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,.15);
|
|
}
|
|
|
|
#screenshot img {
|
|
display: block;
|
|
}
|
|
|
|
#images a img {
|
|
max-width: 95%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
#images a:hover img,
|
|
#images a:focus img,
|
|
#images a:active img {
|
|
border-color: inherit;
|
|
}
|
|
|
|
#images .nav-images {
|
|
height: 0;
|
|
margin: 0;
|
|
display: none;
|
|
}
|
|
|
|
#images.js .nav-images {
|
|
display: block;
|
|
}
|
|
|
|
.nav-images a,
|
|
#lightbox-nav a {
|
|
position: absolute;
|
|
top: 0;
|
|
margin: 1px;
|
|
z-index: 10;
|
|
display: block;
|
|
height: 140px;
|
|
width: 4%;
|
|
text-indent: -999em;
|
|
text-decoration: none;
|
|
overflow: hidden;
|
|
opacity: 0.3;
|
|
-moz-transition-property: opacity, width;
|
|
-moz-transition-duration: 0.5s;
|
|
-moz-transition-timing-function: ease-out;
|
|
}
|
|
#lightbox-nav a {
|
|
min-width: 3em;
|
|
}
|
|
|
|
.nav-images a:hover,
|
|
.nav-images a:active,
|
|
#lightbox-nav a:hover,
|
|
#lightbox-nav a:active {
|
|
opacity: 1;
|
|
width: 7%;
|
|
-moz-transition-property: opacity, width, background-color;
|
|
-moz-transition-duration: 0.2s;
|
|
-moz-transition-timing-function: ease-out;
|
|
}
|
|
#lightbox-nav a:hover,
|
|
#lightbox-nav a:active {
|
|
min-width: 4em;
|
|
}
|
|
.nav-images a:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
body.eula,
|
|
body.eula #main {
|
|
height: 80%;
|
|
}
|
|
|
|
#eula {
|
|
padding: 15px;
|
|
margin: 0 0 1.6em;
|
|
overflow: auto;
|
|
max-height: 80%;
|
|
background: #f3f8fb;
|
|
border-radius: 8px;
|
|
border: 2px groove rgba(255,255,255,.25);
|
|
}
|
|
|
|
#eula p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* App Specific ****/
|
|
.seamonkey #promos {
|
|
/* Hide this for SeaMonkey as it has no content */
|
|
display: none !important;
|
|
}
|
|
.seamonkey #promos.show-video {
|
|
/* Yucky */
|
|
display: block !important;
|
|
}
|
|
|
|
/* Add-on Video */
|
|
#intro #learn-more.video,
|
|
#watch-video a {
|
|
background: #fff url(../../img/zamboni/discovery_pane/video.png) 6px 50% no-repeat;
|
|
box-shadow: 0 -2px rgba(0,0,0,0.1) inset;
|
|
padding-left: 47px;
|
|
}
|
|
#watch-video {
|
|
display: none;
|
|
margin: 0 0 8px;
|
|
text-align: center;
|
|
}
|
|
#watch-video a {
|
|
display: block;
|
|
padding: 8px 10px 8px 50px;
|
|
}
|
|
#main #promos.js.show-video {
|
|
height: auto;
|
|
/* -moz-transition: height 1s ease; */
|
|
}
|
|
|
|
#main #promos.show-video .slider,
|
|
#main #promos.show-video #nav-features {
|
|
display: none;
|
|
}
|
|
|
|
.promo-video {
|
|
border-radius: 8px;
|
|
/* border: 1px solid rgb(168, 184, 209); */ /* Clean this up before using */
|
|
}
|
|
.promo-video video {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
#video-details {
|
|
background: url(../../img/illustrations/hug.png) 50% 12px no-repeat;
|
|
color: #666;
|
|
line-height: 1.6em;
|
|
padding: 115px 1em 1em;
|
|
}
|
|
|
|
#promo-video-addons {
|
|
display: none;
|
|
}
|
|
|
|
#promo-video-addons li {
|
|
display: none;
|
|
}
|
|
|
|
#promo-video-addons li.show {
|
|
display: block;
|
|
}
|
|
|
|
#featured-addons li.flutter {
|
|
-moz-animation-duration: 1s;
|
|
-moz-animation-iteration-count: infinite;
|
|
-moz-animation-name: flutter;
|
|
-moz-animation-timing-function: linear;
|
|
}
|
|
|
|
@-moz-keyframes flutter {
|
|
0% { -moz-transform: matrix(1, 0, 0.3, 1, -10px, 0); }
|
|
50% { -moz-transform: matrix(1, 0, 0.4, 1, -20px, 0); }
|
|
100% { -moz-transform: matrix(1, 0, 0.3, 1, -10px, 0); }
|
|
}
|
|
|