addons-server/media/css/zamboni/zamboni.css

3533 строки
68 KiB
CSS

/* Clearfix!!! */
#persona #more-personas:after,
.listing .item:after,
.section:after,
.notification .aux:after,
.aux .button-wrapper:after,
.object-lead .button-wrapper:after,
.article.version:after,
.article.review:after,
.grouped_ratings li:after,
.bars:after,
.item:after,
.secondary > div:after,
.listing-header:after,
.review-form p:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
/************************************/
/* ELEMENTS */
/************************************/
.section,
.notification .aux,
.aux .button-wrapper,
.object-lead .button-wrapper {
overflow: visible;
}
li.usertag {
overflow: hidden;
}
html {
background-color: #fff;
background-image: url(../../img/zamboni/global/bg-header.png);
background-position: left top;
background-repeat: repeat-x;
}
header {
display: block;
}
header ol.breadcrumbs {
margin-bottom: 0;
}
header hgroup h2 {
margin-bottom: 0.3em;
margin-top: 0.2em;
}
header hgroup h3 {
margin-top: 0;
color: #666;
font-family: "helvetica neue", arial, helvetica, sans-serif;
font-size: 16px;
margin-bottom: 14px;
}
ul.errorlist {
margin-bottom: 0;
color: #c00;
clear:both;
}
.html-ltr a.more-link:after {
content: '\25B8';
margin-left: .5em;
}
.html-rtl a.more-link:after {
content: '\25C2';
margin-right: .5em;
}
#publish_to {
margin-bottom: .25em;
}
.highlight .more-info {
float: none;
}
.highlight ul {
margin-bottom: .5em;
}
.other-author-addons li .addonitem {
padding-left: 20px;
background-image: url(../../img/icons/icons.png);
background-repeat: no-repeat;
background-position: 0px -200px;
}
.html-rtl .other-author-addons li .addonitem {
padding-right: 20px;
padding-left: 0;
background-position: 100% -200px;
}
.html-rtl.inverse .primary {
float: right;
clear: right;
}
.html-rtl.inverse .secondary {
float: left;
clear: left;
}
.html-rtl .object-lead .notification {
clear: right;
}
.js-hidden {
display: none;
}
.light {
color: #888;
}
.light .light {
color: #ccc;
}
/************************************/
/* GRADIENTS */
/************************************/
/* If you made a gradient, add it here.
* If you want to use an existing gradient, add your selector here.
**/
/* 'listing header' */
.listing-header {
background-color: #E0EFFD;
background: -webkit-gradient(
linear,
left bottom,
left top,
from(#FFFFFF),
to(#E0EFFD)
);
background: -moz-linear-gradient(#FFFFFF, #E0EFFD);
}
/* 'listing footer' */
.listing-footer,
.tab-wrapper .fm-control {
background-color: #E0EFFD;
background: -webkit-gradient(
linear,
left bottom,
left top,
from(#E0EFFD),
to(#FFFFFF)
);
background: -moz-linear-gradient(#E0EFFD, #FFFFFF);
}
/* 'listing item' */
.object-lead,
.listing .item {
background-color: #E0EFFD;
background: -webkit-gradient(
linear,
left bottom,
left top,
from(#FFFFFF),
to(#F6FBFF)
);
background: -moz-linear-gradient(#FFFFFF, #F6FBFF);
}
/* 'Mozilla' */
#minimal-header a.mozilla,
.categories h2,
.categories h3,
div.header-search form,
#navbar li ul li:hover,
#navbar,
span.new {
background: #33589f;
background: -webkit-gradient(
linear,
left bottom,
left top,
from(rgb(42,65,135)),
to(rgb(59,105,177))
);
background: -moz-linear-gradient(
center bottom,
rgb(42,65,135) 0%,
rgb(59,105,177) 100%
);
background: linear-gradient(
center bottom,
rgb(42,65,135) 0%,
rgb(59,105,177) 100%
);
}
/***** END GRADIENTS *******/
/** Generic Button *********/
a.button:link,
a.button:visited,
button,
input[type=submit],
input[type=button] {
font-weight: bold;
color: #fff;
background: #39f url("../../img/zamboni/button-blue.png") 0 50% repeat-x;
background: -moz-linear-gradient(top, #7bf 40%, #39f 60%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, #7bf), color-stop(60%, #39f));
border: 1px solid #3d6db5;
padding: 0 .95em;
margin: 0;
display: inline-block;
line-height: 1.538;
text-shadow: 0 -1px 0 #3d6db5;
-moz-box-shadow: inset 0 0 1px rgba(255,255,255,0.1);
-webkit-box-shadow: inset 0 0 1px rgba(255,255,255,0.1);
box-shadow: inset 0 0 1px rgba(255,255,255,0.1);
-moz-border-radius: .95em;
-webkit-border-radius: .95em;
border-radius: .95em;
}
button,
input[type=submit],
input[type=button] {
padding: .2em .95em .3em;
}
.button span,
button span {
border-left: 2px groove rgba(150,150,150,0.35);
padding: .3em .5em .2em .65em;
margin: 0 .25em 0 -.25em;
display: inline-block;
line-height: 1.2;
white-space: normal;
}
.html-rtl .button span,
.html-rtl button span {
border-left: 0;
border-right: 2px groove rgba(150,150,150,0.35);
padding: .3em .65em .2em .5em;
margin: 0 -.25em 0 .25em;
}
.button.go span,
button.go span {
border: 0;
padding: .3em 0 .2em;
margin: 0;
}
.button.concealed span {
border-color: rgba(130,160,175,0.15);
}
a.button:hover,
a.button:focus,
button:hover,
button:focus,
input[type=submit]:hover,
input[type=button]:hover,
input[type=submit]:focus,
input[type=button]:focus {
border-color: #03c;
-moz-box-shadow: inset 0 0 2px rgba(255,255,255,1);
-webkit-box-shadow: inset 0 0 2px rgba(255,255,255,1);
box-shadow: inset 0 0 2px rgba(255,255,255,1);
}
a.button:active, button.button:active {
border-color: #03c;
background-image: url("../../img/zamboni/button-blue-on.png");
background: -moz-linear-gradient(top, #39f 40%, #6fb7ff 60%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, #39f), color-stop(60%, #6fb7ff));
-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.5);
-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.5);
box-shadow: inset 0 0 2px rgba(0,0,0,.5);
}
.cta a.button:link,
.cta a.button:visited {
background: #5af;
background: -moz-linear-gradient(top, #acf, #5af);
background: -webkit-gradient(linear, left top, left bottom, from(#acf), to(#5af));
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
display: block;
line-height: 1.0;
white-space: normal;
padding: 0.75em 0.95em;
text-align: center;
}
.cta a.button:hover,
.cta a.button:focus {
border-color: #25f;
-moz-box-shadow: inset 0 0 2px #fff;
-webkit-box-shadow: inset 0 0 2px #fff;
box-shadow: inset 0 0 2px #fff;
}
.cta a.button:active {
border-color: #03c;
background: #7bf;
background: -moz-linear-gradient(top, #5af, #7bf);
background: -webkit-gradient(linear, left top, left bottom, from(#5af), to(#7bf));
-moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
}
/* larger buttons for emphasis */
a.button.prominent:link,
a.button.prominent:visited,
a.button.prominent:hover,
a.button.prominent:focus,
a.button.prominent:active,
button.prominent,
input[type=button].prominent,
input[type=submit].prominent {
font-size: 1.2em;
}
/* Some buttons look like links */
button.link {
background: transparent none;
text-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border: 0;
font-weight: bold;
color: #3d6db5;
}
.cta a.button.disabled,
a.button.disabled,
a.button[disabled],
button.button:disabled,
input[type=submit]:disabled,
input[type=button]:disabled {
background: #a6a6a6;
border-color: #666;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
text-shadow: 0 -1px 0 #666;
}
button.link:hover,
button.link:focus {
color: #003595;
text-decoration: underline;
}
/** =Green buttons: Add, Download, Mobile *********/
a.button.add:link,
a.button.add:visited,
button.add,
input[type=submit].add,
input[type=button].add,
a.button.download:link,
a.button.download:visited,
button.download,
input[type=submit].download,
input[type=button].download,
a.button.mobile:link,
a.button.mobile:visited,
button.mobile,
input[type=button].mobile,
input[type=submit].mobile {
background: #55a802 url("../../img/zamboni/button-green.png") 0 50% repeat-x;
background: -moz-linear-gradient(top, #93c85e 30%, #55a802 55%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #93c85e), color-stop(55%, #55a802));
border-color: #3a7404;
text-shadow: 0 -1px 0 #3a7404;
}
a.button.add:hover,
a.button.add:focus,
button.add:hover,
button.add:focus,
input[type=submit].add:hover,
input[type=button].add:hover,
input[type=submit].add:focus,
input[type=button].add:focus {
border-color: #1a5404;
}
a.button.add:active,
a.button.download:active {
border-color: #1a5404;
background-image: url("../../img/zamboni/button-green-on.png");
background: -moz-linear-gradient(#55a802 40%, #83c046 65%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, #55a802), color-stop(65%, #83c046));
}
/** Temporary diagnostic styles to weed out redundant button classes *********/
a.button.significant,
button.significant,
input[type=submit].significant,
input[type=button].significant,
a.button.positive,
button.positive,
input[type=submit].positive,
input[type=button].positive,
a.button.negative,
button.negative,
input[type=submit].negative,
input[type=button].negative,
a.button.neutral,
button.neutral,
input[type=submit].neutral,
input[type=button].neutral,
a.button.cool,
button.cool,
input[type=submit].cool,
input[type=button].cool {
outline: 3px dotted red;
}
/** end of diagnostic styles **/
/** Navigational Button *********/
a.button.go:link,
a.button.go:visited,
button.go,
input[type=submit].go,
input[type=button].go {
color: #3d6db5;
background: #fff none;
border-color: #E0EFFD;
text-shadow: 0 1px 0 #fff;
-moz-box-shadow: inset 0 0 3px #c0e1ee;
-webkit-box-shadow: inset 0 0 3px #c0e1ee;
}
a.button.go:hover,
a.button.go:focus,
button.go:hover,
button.go:focus,
input[type=submit].go:hover,
input[type=button].go:hover,
input[type=submit].go:focus,
input[type=button].go:focus {
color: #3d6db5;
border-color: #a8cedd;
}
a.button.go:active {
border-color: #95b9c5;
background-image: none;
-moz-box-shadow: inset 0 0 5px #ccc;
-webkit-box-shadow: inset 0 0 5px #ccc;
}
/** Cautionary Button *********/
a.button.caution:link,
a.button.caution:visited,
button.caution,
input[type=submit].caution,
input[type=button].caution {
color: #333;
background: #fc0 url("../../img/zamboni/button-caution.png") 0 50% repeat-x;
background: -moz-linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%),
-moz-repeating-linear-gradient(-45deg, #F0B500, #F0B500 7px, #FFD000 7px, #FFD000 14px);
border-color: #a70;
text-shadow: 0 1px 0 #ffe56b;
}
a.button.caution.concealed:link,
a.button.caution.concealed:visited,
button.caution.concealed,
input[type=submit].caution.concealed,
input[type=button].caution.concealed {
color: #859fae;
border-color: #a70;
background: -moz-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6) 60%),
-moz-repeating-linear-gradient(-45deg, #F0B500, #F0B500 7px, #FFD000 7px, #FFD000 14px);
}
a.button.caution: hover,
a.button.caution:focus,
button.caution:hover,
button.caution:focus,
input[type=submit].caution:hover,
input[type=button].caution:hover,
input[type=submit].caution:focus,
input[type=button].caution:focus {
border-color: #850;
}
a.button.caution:active {
border-color: #850;
background-image: url("../../img/zamboni/button-caution-on.png");
background: -moz-linear-gradient(rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.3) 60%),
-moz-repeating-linear-gradient(45deg, #F0B500, #F0B500 7px, #FFD000 7px, #FFD000 14px);
-moz-box-shadow: inset 0 0 5px rgba(0,0,0,.5);
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.5);
}
/** Status Button *********/
a.button.status:link,
a.button.status:visited,
button.status,
input[type=submit].status,
input[type=button].status {
color: #333;
background: #fff none;
border-color: #E0EFFD;
text-shadow: 0 1px 0 #fff;
-moz-box-shadow: inset 0 0 3px #c0e1ee;
-webkit-box-shadow: inset 0 0 3px #c0e1ee;
}
a.button.status:hover,
a.button.status:focus,
button.status:hover,
button.status:focus,
input[type=submit].status:hover,
input[type=button].status:hover,
input[type=submit].status:focus,
input[type=button].status:focus {
color: #333;
border-color: #a8cedd;
}
a.button.status:active {
border-color: #95b9c5;
background-image: none;
-moz-box-shadow: inset 0 0 8px #a4cee2;
-webkit-box-shadow: inset 0 0 8px #a4cee2;
}
/** Concealed Button *********/
a.button.concealed:link,
a.button.concealed:visited,
button.concealed,
input[type=submit].concealed,
input[type=button].concealed {
color: #859fae;
background: #fff none;
border-color: #E0EFFD;
text-shadow: 0 1px 0 #fff;
-moz-box-shadow: inset 0 0 3px #c0e1ee;
-webkit-box-shadow: inset 0 0 3px #c0e1ee;
}
a.button.concealed:hover,
a.button.concealed:focus,
button.concealed:hover,
button.concealed:focus,
input[type=submit].concealed:hover,
input[type=button].concealed:hover,
input[type=submit].concealed:focus,
input[type=button].concealed:focus {
color: #657f8e;
border-color: #a8cedd;
}
a.button.concealed:active {
border-color: #95b9c5;
background-image: none;
-moz-box-shadow: inset 0 0 8px #a4cee2;
-webkit-box-shadow: inset 0 0 8px #a4cee2;
}
/** =Install Button *********/
.item .install-shell .install {
float: left; /* Only in zamboni. */
}
.install-shell .extra {
font-size: .85em;
font-weight: bold;
clear: both;
}
.install-shell .notavail {
padding: 1px 0 1px 20px;
margin-left: 3px; /* Match the padding of .install. */
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%;
}
.item .install,
.install-shell .install {
text-align: inherit;
margin: 0 0 .5em;
}
.item .install strong,
.install strong {
font-weight: bold;
text-shadow: none;
margin: 0 4px;
font-size: 0.85em;
display: block;
}
.teaser-items .item .install strong {
margin: 0 4px;
}
.install.featuredaddon,
.install.lite,
.install.unreviewed,
.install.selfhosted {
padding: 2px;
-moz-border-radius: .95em .95em .95em 0;
-webkit-border-radius: .95em;
-webkit-border-bottom-left-radius: 0;
border-radius: .95em .95em .95em 0;
}
.html-rtl .install.featuredaddon,
.html-rtl .install.lite,
.html-rtl .install.unreviewed,
.html-rtl .install.selfhosted {
-moz-border-radius: .95em .95em 0 .95em;
-webkit-border-radius: .95em;
-webkit-border-bottom-left-radius: .95em;
-webkit-border-bottom-right-radius: 0;
border-radius: .95em .95em 0 .95em;
}
.install.featuredaddon {
background: #bcdba2;
}
.install.featuredaddon strong {
color: #360;
}
.install.lite,
.install.unreviewed {
background: #ffe57f;
}
.install.lite strong,
.install.unreviewed strong {
color: #333;
}
.install.selfhosted {
background: #d3ecf6;
}
.install.selfhosted strong {
color: #235;
}
/** =Button =icons *********/
.button.add b,
.button.download b,
.button.mobile b,
.button.contribute b,
.button.status.ok b {
padding: .3em 1em .2em .85em;
margin: 0 0 0 -.5em;
width: 16px;
background: transparent url("../../img/zamboni/icons/button-icons.png") 25% 0 no-repeat;
}
.button.add b { background-position: 25% 0; }
.button.add.prominent b { background-position: 25% -49px; }
.button.download b { background-position: 25% -100px; }
.button.download.prominent b { background-position: 25% -150px; }
.button.add.caution b { background-position: 25% -400px; }
.button.add.caution.prominent b { background-position: 25% -450px; }
.button.download.caution b { background-position: 25% -500px; }
.button.download.caution.prominent b { background-position: 25% -550px; }
.button.add.concealed b { background-position: 25% -200px; }
.button.add.concealed.prominent b { background-position: 25% -250px; }
.button.download.concealed b { background-position: 25% -300px; }
.button.download.concealed.prominent b { background-position: 25% -350px; }
.button.mobile b { background-position: 25% -600px; }
.button.mobile.prominent b { background-position: 25% -650px; }
.button.mobile.caution b { background-position: 25% -700px; }
.button.mobile.caution.prominent b { background-position: 25% -750px; }
.button.contribute b { background-position: 25% -800px; }
.button.contribute.prominent b { background-position: 25% -850px; }
.button.status.ok b { background-position: 25% -900px; }
.html-rtl .button b,
.html-rtl button b {
padding: .3em 1em .2em .65em;
margin: 0 -.5em 0 .25em;
}
/* For other platforms */
.install-button .button span.os {
padding: 0;
margin: 0;
border: 0;
font-weight: normal;
display: inline;
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: inherit;
}
th, td {
text-align: left;
padding: 0.308em 0.537em 0.214em 0.231em; /* 4px 7px 3px 7px */
}
/** Button =Popups *********/
.install {
position: relative;
padding: 2px 3px 3px;
}
.popup-shim {
position: relative;
}
div.popup-shim {
display: inline-block;
}
.popup p:last-child,
.popup ul:last-child {
margin-bottom: 0;
}
.install-note .msg,
.popup .msg,
.app {
background-repeat: no-repeat;
min-height: 32px;
}
.mobile .install-note .msg, .mobile.app,
.firefox .install-note .msg, .firefox.app { background-image: url(../../img/app-icons/small/firefox.png); }
.thunderbird .install-note .msg, .thunderbird.app { background-image: url(../../img/app-icons/small/thunderbird.png); }
.sunbird .install-note .msg, .sunbird.app { background-image: url(../../img/app-icons/small/sunbird.png); }
.seamonkey .install-note .msg, .seamonkey.app { background-image: url(../../img/app-icons/small/seamonkey.png); }
.mz.app { background-image: url(../../img/app-icons/small/mozilla.png); }
.install-note .msg.m-unreviewed,
.install-note .msg.m-selfhosted,
.popup.warning .msg {
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 {
display: none;
}
.fxbeta .install-note .beta {
display: block;
}
.fxbeta .install-note .nobeta {
display: none;
}
.install-note,
.popup,
.modal {
position: absolute;
left: -15px;
margin-top: 5px;
background: #fff;
padding: 10px;
border: 3px solid #2e5186;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.35);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.35);
box-shadow: 0 1px 3px rgba(0,0,0,0.35);
z-index: 2001; /* because of devhub title */
}
.modal form {
margin: 0;
}
.modal h2,
.modal h3 {
margin-top: 0;
color: #2e5186;
}
.modal-delete h3 {
color: #6c1a1a;
}
.install-note {
width: 300px;
}
/* append the left class if the bubble is to the far right */
.install-note.left,
.popup.left {
left: -160px;
}
.unreviewed .install-note,
.popup.warning {
border-color: #c90;
}
.popup.error,
.modal-delete {
border-color: #6c1a1a;
color: #333;
}
.modal-overlay {
background-color: #fff;
height: 100%;
-khtml-opacity: 0.75;
-moz-opacity: 0.75;
opacity: 0.75;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 2000;
}
.install a * {
pointer-events: none;
}
/* http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html */
/* Creates the larger triangle. */
.install-note:before,
.popup:before {
content: "\00a0";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
width: 0;
height: 0;
left: 50px;
top: -20px; /* value = - border-top-width - border-bottom-width */
border: 10px solid transparent;
border-bottom-color: #2e5186;
pointer-events: none;
}
.unreviewed .install-note:before,
.popup.warning:before {
border-bottom-color: #c90;
}
.popup.error:before {
border-bottom-color: #6c1a1a;
}
/* creates the smaller triangle */
.install-note:after,
.popup:after {
content: "\00a0";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
left: 55px;
width: 0;
height: 0;
top: -10px; /* value = - border-top-width - border-bottom-width */
border: 5px solid transparent;
border-bottom-color: #fff;
pointer-events: none;
}
.install-note.left:before,
.popup.left:before {
right: 71px; /* controls horizontal position */
left: auto;
}
.install-note.left:after,
.popup.left:after {
right: 76px; /* value = (:before right) + (:before border-right) - (:after border-right) */
left: auto;
}
.install .install-note > *,
.popup.warning > * {
margin-bottom: 1em;
padding-left: 50px;
}
.install .install-note strong,
.popup strong {
margin: 0;
color: inherit;
font-size: inherit;
}
/** hover tooltip styles **/
#tooltip {
display:none;
background: #2A4364;
color: white;
font-size: 11px;
border: 1px solid #fff;
-moz-border-radius: .8em;
-webkit-border-radius: .8em;
max-width: 300px;
text-align: center;
position: absolute;
padding: 0.5em 1em;
pointer-events: none;
z-index: 16389;
}
#tooltip.error {
background: #6C1a1a;
}
#tooltip span {
display: block;
line-height: 1.2em;
}
#tooltip:before {
content: "\00a0";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
width: 0;
height: 0;
margin-left: -6px;
left: 50%;
bottom: -16px;
border: solid transparent;
border-width: 8px 6px;
border-top-color: #2A4364;
pointer-events: none;
}
#tooltip.error:before {
border-top-color: #6c1a1a;
}
/** =Search =Suggestions *********/
#search-suggest {
background: #fff;
border: 1px solid #011234;
width: 38%;
padding: .5em 0;
position: absolute;
left: 1.4%;
z-index: 99;
display: none;
}
.html-rtl #search-suggest {
left: auto;
right: 1.4%;
}
#search-suggest .all {
margin: .5em 10px 0;
font-weight: bold;
font-size: 12px;
}
#search-suggest ul {
margin: 0;
}
#search-suggest li a {
display: block;
padding: 2px 2px 2px 32px;
font-weight: bold;
font-size: .875em;
color: #444;
text-decoration: none;
background: transparent url("../../../media/img/zamboni/icons/suggest-types.png") 8px 2px no-repeat;
}
.html-rtl #search-suggest li a {
padding: 2px 32px 2px 2px;
}
#search-suggest li a:hover,
#search-suggest li a:focus,
#search-suggest li a:active {
background-color: #ecf7fb;
text-decoration: none;
}
/** Code Licenses *********/
ul.license li {
display: block;
float: left;
list-style: none;
}
.html-rtl ul.license li {
float: right;
}
ul.license li.text {
font-size: 90%;
margin-top: -.2em;
}
.html-ltr ul.license li.text {
margin-left: .3em;
}
.html-rtl ul.license li.text {
margin-right: .3em;
}
ul.license li.icon {
background: url(../../img/zamboni/licenses.png) no-repeat top left;
height: 15px;
width: 15px;
}
ul.license li.cc-attrib { background-position: 0 0; }
ul.license li.cc-noderiv { background-position: 0 -65px; }
ul.license li.cc-noncom { background-position: 0 -130px; }
ul.license li.cc-share { background-position: 0 -195px; }
ul.license li.copyr { background-position: 0 -260px; }
/** Personas *********/
.persona-list,
.persona-list-2col,
.persona-list-3col {
overflow: hidden;
}
.persona-list-2col .persona {
float: left;
width: 50%;
margin-bottom: .6em;
}
.persona-list-3col .persona {
float: left;
width: 33.3%;
margin-bottom: .6em;
}
#more-artist .persona {
margin-bottom: .6em;
}
.persona-inner {
position: relative;
padding: .5em;
-moz-border-radius: .25em;
}
.persona-small .persona-inner {
max-width: 206px;
}
.persona-large .persona-inner {
max-width: 680px;
}
.persona-hover .persona-inner {
background: #c8e8f2;
}
.persona-hover .persona-install {
display: block;
}
.persona-preview {
position: relative;
display: block;
line-height: 1;
}
.persona-preview [data-browsertheme] {
display: block;
background: transparent no-repeat right top;
border: .25em solid #c8e8f2 !important;
}
.persona-hover .persona-preview [data-browsertheme] {
border-color: #fff !important;
}
.persona-small .persona-preview [data-browsertheme] {
height: 67px;
}
.persona-large .persona-preview [data-browsertheme] {
height: 100px;
}
.persona-preview .created,
.persona-preview .users,
.persona-preview .reviews {
background-color: #c8e8f2;
display: inline-block;
padding: .25em .5em;
font-size: .846em;
position: absolute;
left: 0;
top: 0;
}
.html-rtl .persona-preview .created,
.html-rtl .persona-preview .users,
.html-rtl .persona-preview .reviews {
left: auto;
right: 0;
}
.persona-hover .created,
.persona-hover .users,
.persona-hover .reviews {
background-color: #fff;
}
.personas .created {
color: #222;
}
.personas .users b {
font-weight: bold;
}
.persona .users {
color: #390;
}
/** Persona Homepage **/
.personas-featured .persona-list-3col {
border: 1px solid #E0EFFD;
-moz-border-radius: 5px;
}
.featured.personas-home {
position: relative;
}
.personas-home .intro {
font-size: 1.4em;
width: 450px;
}
#featured-addons.personas-home .featured-inner {
background: #fff url(../../img/zamboni/personas/promo-browser.png) no-repeat left bottom;
height: 345px;
}
.personas-home .intro .more-info {
background-position: 96% -151px;
float: none;
}
#featured-addons .personas-slider {
float: right;
height: 340px; /* 4 personas @ 85px; */
width: 30%;
overflow: hidden;
margin-bottom: 0;
}
/************************************/
/* PAGES */
/************************************/
#search-suggest li.ext a { background-position: 7px 2px; }
#search-suggest li.col a { background-position: 7px -98px; }
#search-suggest li.cat a { background-position: 7px -196px; }
.html-rtl #search-suggest li.ext a { background-position: 98% 2px; }
.html-rtl #search-suggest li.col a { background-position: 98% -98px; }
.html-rtl #search-suggest li.cat a { background-position: 98% -196px; }
#search-suggest em {
font-weight: normal;
font-style: normal;
color: #999;
margin: 0 8px;
}
/** =Form Elements *********/
fieldset {
margin: 1em 0 1.5em;
border: 0;
padding: .25em 0 1em;
clear: both;
border-bottom: 1px dotted #a4cfde;
}
form fieldset:last-child {
border-bottom: 0;
padding-bottom: 0;
margin-bottom: .5em;
}
fieldset legend { /* based on h3 */
font: normal 1.385em/1.1 georgia, serif;
color: #011234;
margin: 0.75em 0 0;
}
.user-input h3 {
margin: 0 0 .5em;
}
fieldset ol,
fieldset ul,
.html-rtl fieldset ol,
.html-rtl fieldset ul {
list-style: none;
margin: 0;
}
fieldset li {
margin-bottom: .5em;
}
.user-input label {
display: block;
width: 320px;
}
.user-input .check label {
width: auto;
display: inline;
}
input[type="text"],
input[type="url"],
input[type="password"],
select,
textarea {
padding: 2px 5px;
border: 1px solid #5875a0;
color: #666;
}
select {
padding: 2px 0 2px 5px;
}
.html-rtl select {
padding: 2px 5px 2px 0;
}
input[type="text"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
color: #444;
}
select:disabled {
color: #999;
}
.user-input input[type="text"],
.user-input input[type="password"] {
width: 310px;
}
.user-input select {
width: 322px;
}
.user-input textarea {
/* width: 98%;*/
}
.user-input .instruct {
width: 70%;
margin-bottom: .75em;
}
form .note {
font-size: 0.846em; /* 11px */
line-height: 1.4;
color: #666;
}
form label .note {
font-weight: normal;
display: block;
margin-bottom: .5em;
}
.req {
color: #d52f2f;
font-weight: bold;
}
fieldset.inline {
margin: 1em 0 0;
padding: 0;
position: relative;
}
fieldset.inline legend {
font-size: 1.077em; /* 14px */
}
fieldset.inline ol,
fieldset.inline ul {
margin-bottom: .5em;
}
fieldset.inline li {
display: inline;
margin-right: 10px;
}
fieldset.inline label {
display: inline;
margin-right: 5px;
}
fieldset.inline input[type="text"],
fieldset.inline input[type="password"],
fieldset.inline select {
width: auto;
}
form .error {
margin-bottom: 1em;
}
form .error .error,
form .error .errorlist,
form .error .errorlist li {
margin-bottom: 0;
}
form .error input[type="text"],
form .error input[type="url"],
form .error input[type="password"],
form .error select,
form .error textarea {
border-color: #c00;
border-width: 2px;
}
form .error .note {
color: inherit;
}
form .error .note.error {
color: inherit;
font-size: inherit;
display: block;
}
/************************************/
/* PAGES */
/************************************/
/** =User =Edit *********/
#user-profile ol {
padding-right: 280px;
min-height: 310px;
margin: 0;
position: relative;
}
.html-rtl #user-profile ol {
padding: 0 0 0 280px;
}
#acct-account label[for="account_hideemail"] {
font-weight: normal;
color: #666;
}
#user-profile input[type="text"] {
width: 90%;
max-width: 310px;
}
#user-profile .profile-photo {
width: 220px;
position: absolute;
right: 10%;
top: 0;
margin-left: 55%;
}
.html-rtl #user-profile .profile-photo {
left: 10%;
right: auto;
margin-left: 0;
margin-right: 55%;
}
#user-profile .profile-photo label {
width: auto;
}
#user-profile .avatar {
border: 3px solid #e0effd;
padding: 0;
margin-top: 1em;
}
#user-profile .trans {
width: 100%;
-moz-box-sizing: border-box;
}
.html-rtl #user-edit #acct-notify {
padding: 0 0 0 35%;
}
#user-edit #acct-delete {
margin: .25em 0;
float: right;
}
.html-rtl #user-edit #acct-delete {
float: left;
}
#acct-delete a {
color: #c00;
}
/** =User =Profile *********/
.object-lead table {
margin: 0 0 1em;
}
.object-lead table tr th {
width: 160px;
}
.object-content .prose {
margin: 0 0 1em;
}
.object-content .editprofile {
border-top: 1px dotted #a5c9d5;
margin: .25em 0 0;
padding-top: .25em;
}
.object-content .editprofile a {
background: transparent url("../../img/icons/news-feed-sprite.png") 0 -538px no-repeat;
font-weight: bold;
font-size: .923em;
margin-right: 1em;
padding: .25em 0 .25em 22px;
}
.html-rtl .object-content .editprofile a {
background-position: 100% -538px;
padding: .25em 22px .25em 0;
margin-right: 0;
margin-left: 1em;
}
/** =Category Landing *********/
.category-landing [role="main"] {
width: 73.47%;
}
.personas .persona-inner,
.category-landing .persona-inner {
margin: 0 auto;
}
#featured-addons {
width: auto;
}
#featured-addons ul {
width: 96.7%;
padding-left: 3.3%;
}
#featured-addons li.addon {
width: 30%;
padding: 0;
margin: 0 3.33% 0 0;
overflow: visible;
float: left;
}
#featured-addons ul li.addon:last-child {
margin-right: 0;
}
#featured-addons .featured-inner {
padding: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #e4f5fb);
}
#featured-addons h3 {
margin-top: 0;
}
#featured-addons h3 a {
color: inherit;
}
.html-rtl #featured-addons li.addon {
float: right;
clear: none;
margin: 0 0 0 3.33%
}
#featured-addons .addon:last-child {
margin-right: 0;
}
.html-rtl #featured-addons .addon:last-child {
margin-left: 0;
margin-right: 3.33%;
}
#featured-addons .preview {
margin-bottom: .5em;
position: relative;
left: -3px;
overflow: hidden;
}
.html-rtl #featured-addons .preview {
left: 3px;
right: -3px;
}
#featured-addons .preview a {
border: 3px solid #e0effd;
display: block;
max-width: 200px;
height: 155px;
overflow: hidden;
}
#featured-addons .preview a:hover,
#featured-addons .preview a:focus,
#featured-addons .preview a:active {
border-color: #aedff3;
}
#featured-addons .addon-desc {
margin-bottom: .75em;
text-overflow: ellipsis;
min-height: 5em;
}
#featured-addons .addon-rating {
clear: both;
float: left;
margin-bottom: 1em;
}
.html-rtl #featured-addons .addon-rating {
clear: both;
float: right;
margin-bottom: 1em;
}
#featured-addons .install-shell {
display:block;
}
#featured-addons .item .install {
float: left;
clear: both;
margin: .5em 0;
}
.html-rtl #featured-addons .item .install {
float: right;
}
.category-landing .addons-column {
float: left;
padding: 0 2% 0 0;
width: 32%;
border: 0;
}
.html-rtl .category-landing .addons-column {
float: right;
padding: 0 0 2% 0;
}
.category-landing .addons-column:last-child {
padding-right: 0;
}
.html-rtl .category-landing .addons-column:last-child {
padding-right: 2%;
padding-left: 0;
}
.category-landing .addons-column h3 {
background: transparent none;
color: inherit;
font-family: georgia, serif;
margin: 0 2px .5em;
}
.category-landing .addons-column h3 a:link,
.category-landing .addons-column h3 a:visited {
color: inherit;
}
.category-landing .addons-column h3 a:hover,
.category-landing .addons-column h3 a:focus,
.category-landing .addons-column h3 a:active {
color: inherit;
text-decoration: underline;
}
.category-landing .addons-column ul {
border: 1px solid #E0EFFD;
-moz-border-radius: 5px;
padding: 0;
margin: 0;
}
.category-landing .addons-column ul.personas {
padding: .5em 5px 1.2em;
}
.category-landing .addons-column ul li {
border-top: 1px dotted #E0EFFD;
overflow: hidden;
padding: 0;
position: relative;
}
.category-landing .addons-column ul.personas li {
background-color: inherit;
padding: .6em 0 0;
border: 0;
}
.html-rtl.category-landing .addons-column ul li {
overflow: auto;
}
.category-landing .addons-column ul li a {
min-height: 50px;
height: auto;
display: block;
position: relative;
text-decoration: none;
padding: 0 5px 0 50px;
}
.html-rtl.category-landing .addons-column ul li a {
padding: 0 50px 0 5px;
}
.category-landing .addons-column ul li a:hover,
.category-landing .addons-column ul li a:focus {
background-color: #e4f5fb;
}
.category-landing .addons-column ul li a .name {
font-size: 1em;
font-weight: bold;
color: #3d6db5;
padding: 8px 0 0;
margin-left: 0;
display: block;
height: 1.25em;
line-height: 1.25em;
overflow: hidden;
text-overflow: ellipsis;
}
.category-landing .addons-column ul li a:hover .name,
.category-landing .addons-column ul li a:focus .name,
.category-landing .addons-column ul li a:active .name {
color: #003595;
text-decoration: underline;
}
.category-landing .addons-column ul li a .meta {
margin-left: 0;
position: static;
color: #777;
display: block;
font-size: 93%;
}
.category-landing .addons-column ul li a img.icon {
left: 5px;
top: 6px;
position: absolute;
}
.html-rtl.category-landing .addons-column ul li a img.icon {
left: auto;
right: 5px;
}
.category-landing .view-all {
background: transparent none;
margin-top: .75em;
font-weight: bold;
padding: 2px 0 2px 9px;
}
.category-landing .view-all a:link,
.category-landing .view-all a:visited {
font-size: 1em;
color: #3d6db5;
padding-right: 10px;
background: transparent url(../../img/zamboni/icons/arrow-right-blue.png) 100% 55% no-repeat;
}
.html-rtl.category-landing .view-all a:link,
.html-rtl.category-landing .view-all a:visited {
padding-right: 0;
padding-left: 10px;
background: transparent url(../../img/zamboni/icons/arrow-left-blue.png) 0 55% no-repeat;
}
.category-landing .view-all a:hover,
.category-landing .view-all a:active {
color: #003595;
}
.category-landing .featured.personas .view-all {
border-top: 1px dotted #E0EFFD;
padding: 2px 7px;
margin: -15px 0 0;
text-align: right;
}
.html-rtl .category-landing .featured .view-all {
text-align: left;
}
/** =Search results *********/
.results {
border: 4px solid #E0EFFD;
background-color: #E0EFFD;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 2em;
clear: both;
}
.results-inner {
background-color: #fff;
border: 1px solid #2e5186;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
overflow: visible;
}
.listing-header .item-sort {
margin-right: 5px;
}
.listing-header .item-sort button {
position: absolute;
left: -999em;
}
.html-rtl .listing-header .item-sort button {
left: auto;
right: -999em;
}
.results .featured {
border-width: 0 0 1px;
background-color: transparent;
margin-bottom: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.result-count {
padding: 0 10px;
font-size: 1.231em;
}
.listing .contribute,
.separated-listing .contribute,
.collector-note,
.item .performance-note {
background: #E0EFFD;
float: left;
padding: 3px 10px;
margin-top: 0.5em;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.html-rtl .listing .contribute,
.html-rtl .separated-listing .contribute,
.html-rtl .collector-note {
float: right;
}
.listing .contribute a {
font-weight: bold;
}
.html-rtl .listing .contribute {
float: right;
}
.primary .performance-note h3 {
font: normal bold 14px "helvetica neue", helvetica,arial,sans-serif;
line-height: 1.2em;
margin: 0;
}
.primary .performance-note span:first-child {
float: left;
width: 32px;
height: 32px;
background: url("../../img/zamboni/notifications.png") no-repeat 0px -226px;
}
.primary .performance-note {
background: #fff3cc;
}
.primary .performance-note div {
margin-left: 45px;
}
.item .performance-note {
background: url("../../img/zamboni/notifications.png") no-repeat 7px -300px #fff3cc;
padding-left: 28px;
}
.listing .item {
overflow: visible;
}
.listing .item h3 {
float: left;
}
.html-rtl .listing .item h3 {
float: right;
}
.item .install,
.results .item .install {
float: left;
clear: both;
min-height: 2.75em;
margin-left: -3px;
}
.html-rtl .item .install {
float: right;
margin-right: -3px;
margin-left: 0;
}
.item .install-button {
margin-bottom: .25em;
}
.item-info .notavail,
.item-info .addon-rating,
.item-info .downloads,
.item-info .updated {
font-size: .923em; /* 12px */
padding-top: 1px;
margin: 0;
clear: both;
}
.html-rtl .item-info .notavail,
.html-rtl .item-info .addon-rating,
.html-rtl .item-info .downloads,
.html-rtl .item-info .updated {
margin: 0;
}
.listing .item blockquote {
clear: left;
overflow-x: hidden;
}
.html-rtl .listing .item blockquote {
clear: right;
padding-right: 0;
padding-left: 16em;
}
.listing .item blockquote img {
max-width: 100%;
}
.results-head {
position: relative;
width: auto;
}
.html-rtl .results-head {
padding-right: 0;
}
.results-head .suggest {
padding-left: 10px;
font-size: .923em;
line-height: 1.4;
position: absolute;
width: 280px;
padding: 6px 8px 6px 28px;
background: #ffc url("../../img/zamboni/icons/suggest-help.png") 6px .5em no-repeat;
border: 1px solid #fc6;
-moz-box-shadow: 2px 2px 0 #E0EFFD;
-webkit-box-shadow: 2px 2px 0 #E0EFFD;
box-shadow: 2px 2px 0 #E0EFFD;
top: 0;
right: 0;
}
.results-head .suggest a {
font-weight: bold;
}
.results-head .suggest strong {
display: block;
}
.results-head .suggest .point {
position: relative;
left: -28px;
margin-bottom: -19px;
display: block;
padding: 0 0 20px 28px;
background: transparent url("../../img/zamboni/suggest-point.png") 8px bottom no-repeat;
}
.html-rtl .results-head .suggest {
padding: 6px 28px 6px 8px;
background-position: 292px .5em;
}
.html-rtl .results-head .suggest .point {
left: auto;
right: -28px;
padding: 0 28px 20px 0;
background-image: url("../../img/zamboni/suggest-point-rtl.png");
background-position: 255px bottom;
}
.other-categories,
#refine-results,
.versions .primary > .warning {
background: #fff;
border: 1px solid #e0effd;
}
.versions .primary > .warning h2 {
font-style: italic;
margin: 0;
}
.versions .primary > .warning {
border-color: #C63717;
}
.versions .primary > .warning p {
margin-top: .5em;
}
.version nav.further-navigation {
display: block;
padding-top: .5em;
margin-top: 1em;
clear: right;
border-top: 1px dotted #E0EFFD;
}
.version a.source-code {
display: inline-block;
margin-top: 1em;
padding-left: 20px;
}
.version a.more-info {
float:right;
margin: 0;
}
.item.version {
padding: 2em;
}
.version .item-info {
margin-right: 0;
width: auto;
}
.item.version h5 {
font-size: 1em;
}
.article.version {
overflow: visible;
}
.article.version blockquote {
clear: left;
overflow-x: hidden;
}
.article.version h3 {
font-family: "helvetica neue",arial,helvetica,sans-serif;
font-size:1em;
float: left;
margin-top:0;
}
.article.version h3 span:before {
content: '\02013\00a0';
}
#refine-results h5 {
color: #235;
}
.secondary ul.refinements {
border-bottom: 1px dotted #94bfce;
padding-bottom: 1em;
margin-bottom: 1em;
}
#refine-results div:last-child ul.refinements {
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.secondary ul.refinements li a {
color: #3d6db5;
padding: 0 0 0 10px;
font-weight: bold;
font-size: .923em;
}
.html-rtl .secondary ul.refinements li a {
padding: 0 10px 0 0;
}
.secondary ul.refinements li.selected a {
background: transparent url("../../img/zamboni/arrow-right-blue.png") 0 .5em no-repeat;
}
.html-rtl .secondary ul.refinements li.selected a {
background: transparent url("../../img/zamboni/arrow-left-blue.png") 100% .5em no-repeat;
}
/** =Report abuse form *********/
.abuse {
border: 0;
padding: 1em 0 0;
}
.abuse ol {
list-style: none;
margin: 0;
padding: 0;
}
.abuse-wrapper legend {
float: right;
}
.abuse-wrapper ol {
padding-top: 3em;
}
.abuse label {
font-weight: normal;
}
.abuse legend {
font-family: inherit;
font-size: inherit;
font-weight: bold;
}
.abuse ol.hidden {
display: none;
}
.abuse legend a.abuse-image {
padding-left: 25px;
color: #3d6db5;
background: transparent url("../../img/zamboni/notifications.png") 0 -305px no-repeat;
}
.html-rtl .abuse legend span {
padding-left: 0;
padding-right: 25px;
background-position: 100% -1700px;
}
/* TODO(jbalogh): remove hasJS when we add the abuse pane. */
.hasJS .abuse legend span {
cursor: pointer;
}
.hasJS .abuse legend span:hover {
text-decoration: underline;
}
.abuse textarea {
border: 1px solid #5875A0;
width: 60%;
}
/** =Personas Details page *********/
.persona-img {
height: 100px;
overflow: hidden;
}
#persona-summary table {
display: block;
width: 320px;
float: right;
}
#persona-summary table th {
width: auto;
min-width: 120px;
vertical-align: top;
}
#persona-summary table .artist td {
font-weight: bold;
}
#persona-summary .share-arrow {
position: absolute;
z-index: 100;
}
#persona #more-personas {
margin-bottom: 3em;
}
#persona #more-personas h3 {
margin-top: 0;
}
#persona #more-category {
width: 65.6%;
float: left;
}
.html-rtl #persona #more-category {
float: right;
}
#persona #more-category.persona-list-3col {
width: 100%;
}
#persona #more-artist {
width: 32.5%;
float: right;
}
.html-rtl #persona #more-artist {
float: left;
}
#persona #more-personas .article {
margin-bottom: .3em;
}
#persona #more-personas .more-link {
font-weight: bold;
}
#persona-side .category-list h3 {
margin-top: 0;
}
/** Personas listing pages. **/
.personas-grid {
padding: 0 10px;
margin: 1em auto;
}
.personas-grid li {
display: inline-block;
width: 32.9%;
vertical-align: top;
margin-bottom: .77em;
}
.personas-grid li .persona-inner {
margin: 0 auto;
}
.personas-grid li .details {
font-size: 0.846em;
line-height: 1.4;
margin: 0 .25em;
}
.personas-grid h6 {
margin: .5em .25em .25em;
}
.personas-grid li .details p {
margin: 0;
}
.personas-grid li .details .users {
background-color: inherit;
margin-left: 1em;
font-size: 1em;
padding: 0;
position: static;
}
.personas-grid li .details .users b {
font-weight: bold;
}
.html-rtl .personas-grid li .details .users {
margin-left: 0;
margin-right: 1em;
}
/** White category list **/
.other-categories ul {
margin: 0;
}
.other-categories ul + ul,
.other-categories .divider {
border-top: 1px dotted #94BFCE;
margin-top: 1em;
padding-top: 1em;
}
.other-categories ul li {
padding: 0 1em;
font-size: 1.05em;
}
#search-tools-sidebar h3 {
margin-bottom: 0.55em;
}
#search-tools-sidebar h4 {
margin-top: 0;
margin-bottom: 0.55em;
font-style: italic;
font-family: georgia, serif;
font-size: 1.0em;
font-weight: normal;
color: #565656;
}
/** Notifications **/
.notification-box {
margin: 10px 0 28px;
border: 3px solid #1d4900;
background-color: #e0effd;
padding: 13px 13px 13px 58px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
font-family: "helvetica neue", arial, helvetica, sans-serif;
color: #444;
font-size: 13px;
position: relative;
}
.notification-box h2 {
margin: 0;
padding-top: 10px;
font-size: 130%;
line-height: 1.5em;
min-height: 38px;
color: #444444;
}
.notification-box p {
padding-top: 8px;
}
.notification-box p:first-child {
padding-top: 0pt;
}
.html-rtl .notification-box h2 {
padding-left: 0;
background-position: top right;
}
.notification-box:before {
content: "\00a0";
width: 32px;
height: 32px;
display: block;
left: 10px;
top: 50%;
margin-top: -16px;
position: absolute;
background-image:url(../../img/zamboni/notifications.png);
}
.html-rtl .notification-box:before {
right: 10px;
left: auto;
}
.notification-box.warning {
background-color: #FD9;
color: #444;
border: 3px solid #550b00;
}
.notification-box.warning:before {
background-position: 0 -225px;
}
.notification-box.error {
background-color: #FFA5A5;
color: #444;
border: 3px solid #550b00;
}
.notification-box.error:before {
background-position: 0 -83px;
}
.notification-box.error h2 {
color: #C63717;
background-position: 0 -150px;
}
.notification-box.info {
color: #444;
border: 3px solid #002955;
}
.notification-box.info:before {
background-position: 0 -435px;
}
.notification-box.info h2 {
color: #425A8B;
background-position: 0 -150px;
}
.html-rtl .notification-box {
padding: 13px 58px 13px 13px;
}
.notification-box h2 {
background: none;
font-weight: bold;
padding: 0;
font-family: "helvetica neue", arial, helvetica, sans-serif;
font-size: 13px;
line-height: 1;
min-height: 0;
}
.notification-box p {
margin: 0;
}
/** Add-on detail page buttons. **/
#addon-summary .install-shell .install {
float: left;
clear: both;
}
.html-rtl #addon-summary .install-shell .install {
float: right;
}
#addon-summary .install-shell .notavail {
clear: both;
}
.install-wrapper {
margin-bottom: 1.5em;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
.install-shell {
display:inline-block;
}
.install-wrapper .warning {
clear: both;
padding: 0 4px;
margin: 0;
}
.privacy-policy {
display: inline-block;
}
.privacy-policy ul,
.policy-statement ul {
list-style: disc outside none;
margin: 0 0 0 20px;
}
.privacy-policy ol,
.policy-statement ol {
list-style: decimal outside none;
margin: 0 0 0 20px;
}
.privacy-policy blockquote,
.policy-statement blockquote {
margin-bottom: 0;
}
.install-wrapper .extra {
border-top: 1px dotted #A5C9D5;
padding-top: 6px;
}
/* Contributions */
#contribution.notification .aux {
}
#contribution .aux .button-wrapper {
padding-bottom: 10px;
}
#contribution h2 span {
top: 0;
}
#developers #contribution .aux {
width: 25%;
text-align: right;
float: right;
}
#developers #contribution .button-wrapper {
float: none;
padding: 10px 0 5px;
}
#developers #contribution h3 {
width: 75%;
float: left;
}
#developers #contribution h3.show-install {
float: none;
margin: 0;
width: 100%;
}
#developers #contribution .aux-bottom {
padding-top: 10px;
margin-top: 10px;
border-top: 1px dashed #E0EFFD;
}
#developers #contribution .aux-bottom .button-wrapper {
float: left;
padding: 0;
width: 60%;
}
#developers .notification .continue,
#developers .install,
#developers .install_shell,
#developers .aux-bottom #contribute-button {
float: left;
}
#developers .show-install h3 {
margin: 0;
}
/* Disable styling for stacked .extras. */
.install-wrapper .extra + .extra {
border: none;
padding: 0;
}
.install-wrapper.lite .extra,
.install-wrapper.unreviewed .extra {
border-top: 1px dotted #AA7700;
}
.install-wrapper.lite .install strong,
.install-wrapper.unreviewed .install strong,
.install-wrapper.selfhosted .install strong {
display: none;
}
.install-wrapper.lite .install-note strong,
.install-wrapper.unreviewed .install-note strong,
.install-wrapper.selfhosted .install-note strong {
display: inherit;
}
.install-wrapper.lite,
.install-wrapper.unreviewed,
.install-wrapper.selfhosted {
padding: 0.4em;
}
.install-wrapper.selfhosted {
background: #D3ECF6;
}
.install-wrapper.lite,
.install-wrapper.unreviewed {
background: #FFE57F;
}
.aux .button-wrapper {
float: left;
margin: 0;
padding: 0.1em 0 1.5em;
}
/** Add-on listing on the homepage. */
.listing.compact .item blockquote {
padding: 0;
}
.listing.compact .item .install-shell,
.listing.compact .item .install {
float: right;
margin-left: 10px;
}
.html-rtl .listing.compact .item .install-shell,
.html-rtl .listing.compact .item .install {
float: left;
margin-left: 0;
margin-right: 10px;
}
.listing.compact .item h3 {
float: none;
}
td .addon-rating,
.listing.compact .item .meta .addon-rating,
.listing.compact .item .meta .downloads,
.listing.compact .item .meta .updated {
display: inline;
}
.listing.compact .item blockquote {
clear: both;
}
#discovery-modules .ordering input {
width: 2em;
}
#discovery-modules .module {
font-weight: bold;
}
#discovery-modules .locales input {
width: 20em;
}
/* Carousel arrows for personas carousel */
.personas-home ol.breadcrumbs {
clear:none; /*don't want breadcrumbs clearing floats in this module*/
}
.arrow {
display: block;
float: right;
width: 24px;
height: 24px;
border: 1px solid #7fcbd8;
-moz-border-radius: 13px;
cursor: pointer;
text-indent: -999px;
background: white;
position: absolute;
right: 108px;
overflow: hidden;
}
.arrow.prev {
top: -15px;
}
.arrow.next {
top: 355px;
}
.arrow:before {
content: "\00a0";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
width: 0;
height: 0;
border: 6px solid transparent;
border-style: solid;
}
.arrow.prev:before {
left: 6px;
top: 2px;
border-bottom-color: #0471ed;
}
.arrow.next:before {
left: 6px;
top: 9px;
border-top-color: #0471ed;
}
.other-note {
display: none;
clear: left;
padding: .25em 0 0 1em;
margin: 0;
}
.other-note input[type='text'] {
width: 150px;
}
.other-note input[type='submit'] {
margin-top: -2px;
}
.other .other-note,
.review-reason a {
display: block;
}
/** Reviews *********/
ul.review-options {
float: right;
font-size: .9em;
margin-top: 1em;
margin-bottom: 2px;
color: #aaa;
}
ul.review-options > li {
float: left;
}
.review ul.review-options > li > a {
font-weight: normal;
color: #aaa;
-moz-transition: color .2s;
-webkit-transition: color .2s;
transition: color .2s;
}
ul.review-options > li:not(:first-child) {
list-style-type: disc;
margin-left: 1.6em;
}
.article.review {
margin-bottom: 1em;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
overflow: visible;
}
.review h5 {
float: left;
margin-right: .8em;
font-size: 120%;
}
.html-rtl .review h5 {
float: right;
margin-right: inherit;
margin-left: .8em;
}
.review p {
margin: 1em 0 0 0;
}
.review .reviewed-on {
clear: left;
font-size: .9em;
}
.html-rtl .review .reviewed-on {
clear: right;
}
.review.deleted {
display: none;
}
h6.author, .author a {
font-weight: normal;
}
.reviews .highlight > span {
display: block;
}
.reviews .highlight hgroup {
display: block;
margin-bottom: 1em;
}
.reviews .highlight > div {
margin: 0;
padding: 1em .2em;
border-top: 1px dashed #ccc;
font-size: .9em;
}
.reviews .highlight > div:last-child {
text-align: center;
padding-bottom: 0;
}
.average_rating {
margin: 0 .2em;
}
.average_rating .stars {
margin-right: .9em;
}
.article .review-detail .show-more {
font-weight: normal;
float: right;
}
/* grouped ratings style */
.grouped_ratings .rating_bar {
border-left: 1px solid black;
height: 2em;
float: left;
width: 0px;
overflow: visible;
width: 120px;
}
.num_ratings {
width: 1px;
position: absolute;
right: -4px;
top: -2px;
line-height: 1em;
}
.grouped_ratings .rating_bar span.bar {
display:block;
height: 100%;
position: relative;
background: #acd;
margin: .4em .5em 0 0;
height: .9em;
}
.html-rtl .grouped_ratings .rating_bar {
border-left: 0;
border-right: 1px solid black;
float: right;
}
.html-rtl .grouped_ratings .rating_bar span.bar {
float: right;
margin: .4em 0 0 .5em;
}
.html-rtl .grouped_ratings .rating_bar span.num_ratings {
right: auto;
left: -4px;
}
/* stacking the stars to the right for the grouped ratings */
.grouped_ratings .stars-4 {
background-position: 13px 50%;
}
.grouped_ratings .stars-3 {
background-position: 26px 50%;
}
.grouped_ratings .stars-2 {
background-position: 39px 50%;
}
.grouped_ratings .stars-1 {
background-position: 52px 50%;
}
.grouped_ratings .stars-0 {
background-position: 65px 50%;
}
/* review form */
#review-box form {
width: 48%;
height: 200px;
float: left;
padding: 0 10px 1em 0;
margin-right: 1em;
}
#review-box textarea {
margin-bottom: 1em;
height: 100px;
}
#review-box div {
padding-left: 48%;
}
.review-form p > label {
float: left;
width: 8em;
}
#review-form {
margin: 2em 1em 0 1em;
}
.review-form textarea {
margin: 1em 0 1em 0;
clear: left;
}
.review-form .ratingwidget {
float: left;
margin-bottom:0;
}
.review-form input[type='text'] {
width: 15em;
}
.ratingwidget input {
display: none;
}
.ratingwidget {
display: block;
float: none;
width: 65px;
margin-bottom: 1em;
}
.ratingwidget label {
text-indent: -5000px;
display: block;
float: left;
width: 13px;
}
.review:hover ul.review-options > li > a {
color: #3d6db5;
}
.review-wrapper {
position: relative;
}
.reviews header {
margin-left: 0;
}
.highlight h5 {
font-size: 120%;
}
.review.reply {
margin-left: 4em;
background: #f0f6f2;
border-color: #d0e2c5;
}
.review .review-note {
float: left;
font-size: .9em;
margin-top: 1em;
margin-bottom: 2px;
font-style: italic;
}
.review.reply-form {
background: #e0effd;
border: 0;
}
.reply-form form {
margin-bottom: 0;
}
.reply-form label {
display: block;
margin-top: 1em;
}
label > .optional {
font-weight: normal;
color: #888;
}
.reply-form textarea {
margin-bottom: 2em;
width: 80%;
}
.reply-form h3 {
margin: 0;
}
.reply-form input[type='text'] {
width: 60%;
}
.collection-add {
left: -42px;
}
.collection-add-dropdown, .collection-rate-dropdown {
margin: 0;
display: none;
width: 200px;
padding: 1em;
}
.collection-rate-dropdown {
margin-top:1em;
}
.upvote .collection-rate-dropdown {
left: -56px;
}
.downvote .collection-rate-dropdown {
left: inherit;
right: -76px;
}
.popup h3 {
margin-top: 0;
}
#add-to-collection form {
margin-bottom: 0;
}
#add-to-collection #id_description {
height: 6em;
}
.edit_with_prefix span, .edit_with_suffix span {
border: 1px solid #5875A0;
background: #eee;
color: #888;
}
.edit_with_prefix input:focus, .edit_with_suffix input:focus {
outline: 0;
}
.edit_with_prefix span {
border-right: 0 none;
padding: 2px 2px 2px 5px;
}
.edit_with_prefix input {
border-left: 0 none;
}
.edit_with_suffix span {
border-left: 0 none;
padding: 2px 5px 2px 2px;
}
.edit_with_suffix input {
border-right: 0 none;
}
.edit_initially_hidden {
display: none;
}
#slug_value {
font-weight: bold;
color: #222;
}
#collection-form-slug,
#clear-recents {
font-size: .9em;
}
#collection-favorites-opts li {
display: inline-block;
margin-right: 1em;
}
.collections-details #id_name {
display: block;
-moz-box-sizing: border-box;
width: 100%;
}
#collection_listed {
margin-bottom: 1.5em;
}
#collection_listed ul label {
font-weight: normal;
}
#icon_upload {
padding-top: 5px;
}
#icon_upload .icon_preview {
float: left;
text-align: center;
margin-right: 10px;
line-height: 1em;
}
#icon_upload .icon_preview img {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #C1E0EA;
padding: 8px;
width: 32px;
height: 32px;
display: block;
}
#ajax_collections_list {
margin: 0 0 .5em 0;
}
#ajax_new_collection {
border-top: 1px dashed #aecfda;
padding: .5em 0 0 30px;
margin: 0;
}
#ajax_collections_list li {
cursor: pointer;
padding-left: 30px;
background-repeat: no-repeat;
background-position: 0 4px;
background-image: url(../../img/zamboni/icons/checks.png);
}
#ajax_collections_list li:hover {
background-position: 0 -36px;
}
#ajax_collections_list li.selected {
background-position: 0 -76px;
}
#ajax_collections_list li.ajax-loading {
background-image: url(../../img/zamboni/loading-white.gif);
background-position: left bottom;
}
.collections-contributors tr a {
display: none;
}
.collections-contributors tr:hover a {
display: inline;
}
.collections-personas .personas-grid {
border: 1px solid #C9E8F3;
padding: 1em;
margin: 0 0 1em 0;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius :8px;
background-color: #ffffff;
clear:both;
}
.featured div.meta {
margin-top: 0;
}
.meta li {
line-height: 2em;
}
.followers {
color: #37a632;
}
.followers span {
font-weight: bold;
}
.listing-footer .delete {
float: right;
color: red;
}
.html-rtl .listing-footer .delete {float: left;}
.tab-wrapper .content {
margin: 1em;
}
.tab-wrapper .listing-footer {
padding-top: .5em;
z-index: 0;
}
.tab-wrapper .content h3 {
display: none;
}
.tab-wrapper .content p {
margin-top: 2em;
}
input:-moz-placeholder {
color: #ccc;
}
input::-webkit-placeholder {
color: #ccc;
}
table#addons-list, table#contributors-list {
width: 100%;
}
#addons-list .comments {
display: none;
margin: 0 0 .2em 42px;
}
#addons-list .comments.hascomment {
display: block;
}
td.remove {
width: 20px;
text-align:center;
}
#addons-list thead,
#contributors-list thead {
font-size: .9em;
}
#addons-list tbody tr,
#contributors-list tbody tr {
border-top: 1px dotted #A5BFCE;
}
#addons-list tbody tr:hover,
#contributors-list tbody tr:hover,
.ui-state-hover {
background-color: #e4f5fb;
}
td.input {
background: #E0EFFD;
padding-top: .5em;
padding-bottom: .4em;
}
#addons-list h3 {
line-height: 36px;
display: inline;
margin: 0;
padding: 0;
}
#addons-list img {
float: left;
margin: 2px 1em 0 0;
}
#id_name {
display: block;
}
#addons-list a.remove,
#addons-list a.comment,
#contributors-list a.remove {
text-decoration: none;
cursor: pointer;
display: block;
width: 16px;
height: 16px;
margin: 10px;
text-indent: -9000px;
background-repeat: no-repeat;
background-image: url(../../img/zamboni/icons/collections.png);
}
#addons-list a.remove,
#contributors-list a.remove {
background-position: 0 -250px;
}
#addons-list a.remove:hover,
#contributors-list a.remove:hover,
.collection-admin a.delete {
background-position: 0 -200px;
}
#addons-list a.comment {
background-position: 0 -800px;
}
.collection-admin {
font-weight: bold;
padding: .5em 1em;
margin-bottom: 0;
display: inline-block;
}
.collection-admin a {
background-repeat: no-repeat;
background-image: url(../../img/zamboni/icons/collections.png);
margin-left: 1em;
white-space: nowrap;
padding-left: 22px;
}
.collection-admin a.edit {
background-position: 0 -300px;
}
.collection-create .featured-inner {
padding: 1em;
}
.contributor span {
position: relative;
}
#contributor-ac-error {
margin: 0;
}
.make-owner {
margin-left: 1em;
}
/* collections landing module */
.collections-landing {
padding: 1em;
min-height: 190px;
background-image: url(../../img/illustrations/logo-collections-220x270.png),
-moz-linear-gradient(#e4f5fb, #ffffff);
background-repeat: no-repeat;
background-position: 95% 30px, left top;
}
.collections-landing p {
font-size: 1.4em;
padding-right: 250px;
max-width: 450px;
line-height: 1.25em;
}
.collections-landing .breadcrumbs {
margin-bottom: 4px;
}
.collections-landing h2 {
font-family: inherit; /* this should be Meta eventually */
font-size: 2.8em;
font-weight: bold;
margin-top: 0;
}
.html-rtl .collections-landing {
background-position: 5% 20px, left top;
}
.html-rtl .collections-landing p {
padding-right: 0;
padding-left: 250px;
}
a.outlink {
margin-left: 4px;
background-repeat: no-repeat;
background-image: url(../../img/zamboni/icons/collections.png);
white-space: nowrap;
padding-left: 16px;
background-position: 0 -850px;
}
a.outlink:hover {
background-position: 0 -900px;
}
#addon-collector-logo {
float: right;
}
.html-rtl #addon-collector-logo {
float: left;
}
/* Widgets! they're just fancy <a> tags donchaknow */
.collection_widgets {
margin-top: .5em;
}
.collection_widgets .condensed {
margin-right: 4px;
}
.object-details .collection_widgets {
margin-bottom: 1em;
}
.widget {
background-image: url(../../img/zamboni/icons/collections.png);
background-repeat: no-repeat;
padding-left: 22px;
margin-right: 1em;
height: 16px;
line-height: 16px;
}
.html-rtl .widget {
margin-right: 0;
margin-left: 1em;
}
.widget.condensed {
margin-right: 8px;
padding-left: 16px;
width: 16px;
}
.html-rtl .widget.condensed {
margin-left: .8em;
}
#addon .widgets {
clear:left;
}
#addon .widget {
display: block;
margin-bottom: 1em;
float: left;
}
.html-rtl #addon .widget,
.html-rtl #persona .widget {
float: right;
}
.widget.edit { background-position: 0 -350px; }
.widget.edit:hover { background-position: 0 -300px; }
.widget.copy { background-position: 0 -50px; }
.widget.copy:hover { background-position: 0 0px; }
.widget.watch { background-position: 0 -750px; }
.widget.watch:hover { background-position: 0 -700px;}
.widget.watching { background-position: 0 -650px; }
.widget.favorite { background-position: 0 -500px; }
.widget.favorite:hover { background-position: 0 -450px; }
.widget.favorite.faved { background-position: 0 -400px; }
.widget.condensed.collection { background-position: 0 -150px; }
.widget.collection, .widget.condensed.collection:hover { background-position: 0 -100px;}
.widget.condensed.share { background-position: 0 -600px; }
.widget.share, .widget.condensed.share:hover { background-position: 0 -550px; }
.widgets .widget.ajax-loading,
.widgets .widget:hover.ajax-loading,
input.ui-autocomplete-loading,
.modal.ajax-loading,
.tooltip.ajax-loading,
.tooltip:hover.ajax-loading {
background-image: url(../../img/zamboni/loading-white.gif);
background-repeat: no-repeat;
background-position: left bottom;
}
input.ui-autocomplete-loading {
background-position: right center;
}
.modal.ajax-loading {
background-position: center center;
}
.modal-actions.ajax-loading {
background-image: url(../../img/zamboni/loading-white.gif);
background-repeat: no-repeat;
background-position: right center;
}
.suggested-amount.ajax-loading,
#contribute-box .ajax-loading {
background-image: url(../../img/zamboni/loading-white.gif);
background-repeat: no-repeat;
background-position: right center;
padding-right: 30px;
}
#contribute-box .ajax-loading {
margin-left: 0px;
font-weight: bold;
}
#popup-staging .popup {
display: none;
}
/** Add-on detail page QR Code area. Feature test from Bug 595561 **/
#addon-qr-code {
-moz-border-radius: 5px;
background-color: #e0effd;
border: 6px solid #e0effd;
color: #223355;
float: right;
font-size: 0.9em;
margin-left: 0.5em;
width: 172px;
}
.html-rtl #addon-qr-code {
float: left;
margin-left: 0;
margin-right: 0.5em;
}
/** Hide Featured tab on Search Tools landing page when there's a category **/
/** Bug 605670, 609318 **/
.search-tools-for-cat li a[href*="?sort=featured"] {
display: none;
}
/** l10n */
#l10n-menu {
float: right;
}
#l10n-menu p {
margin: 0;
}
.html-rtl #l10n-menu {
float: left;
}
#change-locale {
padding-right: 16px;
}
#change-locale:after {
position: relative;
top: 12px;
left: 4px;
content: "\00a0";
display: inline-block; /* reduce the damage in FF3.0 */
width: 0;
height: 0;
border: 4px solid transparent;
border-style: solid;
border-top-color: #003595;
}
#locale-popup section {
display: block;
overflow-y: auto;
height: 300px;
line-height: 30px;
}
#locale-popup section a {
display: block;
}
#locale-popup section a:hover {
background-color: #EEFAFE;
text-decoration: none;
}
#locale-popup section a em {
color: #98BFEF;
}
#locale-popup section > div,
#locale-popup section > ul {
border-top: 1px dotted #a4cfde;
margin-bottom: 0;
}
#locale-popup section > div:first-child,
#locale-popup section > ul:first-child {
border-top: none;
}
#existing_locales a.remove {
float: right;
display: block;
margin: 4px;
}
#existing_locales a.remove:hover {
background-color: #2A4364;
}
.trans [lang] {
display: none;
}
.trans [lang]:first-child {
display: block;
}
.trans .init-trans {
display: none;
}
.trans .cloned {
color: #ccc;
font-style: italic;
}
/* end l10n */
/** "Some HTML Allowed" text/popup **/
.html-support {
font-size: .9em;
color: #003595;
float: right;
}
.html-rtl .html-support {
float: left;
}
.html-support:hover {
color: #000;
cursor: help;
}
.errorlist .l10n {
cursor: pointer;
}
.errorlist .l10n:hover {
text-decoration: underline;
}
#no-restart {
margin: -1em 0 1.5em 0;
}
#no-restart-msg {
border: 1px solid #b6d9e5;
border-radius: 3px; /* Only shown in Fx4. */
padding: .2em .4em;
color: #294473;
font-weight: bold;
font-size: .9em;
}
#navbar {
display: none;
}
#paypal-error {
background: white url("../../img/zamboni/notification-error.png") no-repeat 5px;
padding-left: 50px;
}
#contribute-box {
position: fixed;
left: 50%;
}
#contribute-box .error {
padding: 10px 0px 10px 50px;
}
ul.errorlist li progress {
margin-left: 1em;
}
ul.errorlist li.strength {
color: #444444;
}