static/css/legacy/main-mozilla.css (1,486 lines of code) (raw):

/** * Mozilla-local tweaks to ClearLeft sourced main.css */ #header #title img { height: 75px } .with-js .hide-with-js { display: none } .show-with-js { display: none } .with-js .show-with-js { display: block } .clearboth { clear: both; } /** * This is a wtf I found on the collector_features page. If your page looks * like * <div class=primary /> * <div class=secondary /> * then the default clear: both on .secondary will put .secondary content * *under* .primary, not beside. It works if you put the .secondary div first * in your code, but that's wrong. */ .secondary { clear: left; } .categories ul { padding: 1em; } .primary.full, .secondary.full { width: 100%; } /** addon listings */ #addon-list-options ul { float: none; margin: 0 1em 0 .75em; } #addon-list-options ul li { margin: 0 0; } #addon-list-options ul li.perpage { float: right; } .html-rtl #addon-list-options ul li.perpage { float: left; } #addon-list-options ul li.perpage div { display: block; line-height: 2em; } /** * Fix for bug 494070. The default width is 50%. I'm assuming * pagination will have most of the line, so we can give it more space. * Only tested on collections listing and detail pages. */ ol.pagination { width: 70%; } /* clearleft's category padding is 20px */ li.sub-category { padding-left:30px } .html-rtl li.sub-category { padding-left: 0; padding-right: 30px; } p.install-button { margin: 0; } .experimental .install-container { min-width: 10em; margin: .3em .3em .5em .3em; } .install strong.compatmsg { padding-bottom: 0.5em; } .install label { font-weight: normal; } .experimental .install .exp-confirm-install { } .experimental .install .exp-desc { } .teaser-items .item .install { float: left; } .html-rtl .teaser-items .item .install { float: right; } .nonfirefox { text-align: center; } .nonfirefox .installmsg { font-size: 120%; } .html-rtl .column { float: right; margin-left: 0; margin-right: 2%; } .html-rtl .first { margin-right: 0; } /* Email links */ span.emaillink { direction: rtl; unicode-bidi: bidi-override; } span.emaillink .i { display: none; } /* Translation Box Element */ .graybox { background-color: #fff; border: 3px solid #e0effd; padding: 15px; } .graybox.errors { background-color: #fff1eb; } .graybox.spaced { margin-bottom: 10px; } .rounded { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } .translation-box .html_allowed { margin-top: -1em; margin-bottom: 1em; } .translation-box .html_allowed .allowed_tags{ font-weight: bold; } .translation-box h4 { border-bottom: 1px solid #2E5186; } .translation-box h4 img { float: right; margin-top: 3px; } .html-rtl .translation-box h4 img { float: left; } .translation-box .translation-button img { cursor: pointer; float: left; background-color: #EEEEEE; border: 1px solid #EEEEEE; border-bottom: none; padding: 2px 5px 3px; margin: 5px 0 0 10px; height: 1.5em; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; } .html-rtl .translation-box .translation-button img { float: right; margin: 5px 10px 0 0; } .translation-box .translation-button.remove img { float: right; } .html-rtl .translation-box .translation-button.remove img { float: left; } .translation-box .translation-button img:hover { background-color: #E4F3FA; } .translation-box .translation-tab { float: left; margin-right: 2px; background-color: #DDDDDD; text-align: center; padding: 5px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; width: 3.1em; height: 1.5em; cursor: pointer; border-bottom: 1px solid #FFFFFF; } .html-rtl .translation-box .translation-tab { float: right; margin-right: auto; margin-left: 2px; } .translation-box .translation-tab.selected { border: 1px solid #2E5186; background-color: #e0effd; border-bottom: none; color: #1D587F; } .translation-box .translation-tab:hover { text-decoration: underline; } .translation-box .translation-area { clear: both; margin: 0; } .translation-box .translation-maxlength { text-align: right; display: none; } .html-rtl .translation-box .translation-maxlength { text-align: left; } .translation-box .translation-maxlength.selected { display: block; } .translation-box .translation-maxlength img { display: none; } .translation-box .translation-maxlength.over { color: #CC3333; } .translation-box .translation-maxlength.over img { display: inline; vertical-align: middle; } .translation-box .translation-maxlength span { font-weight: bold; } .translation-box .input { border: 1px solid #2E5186; margin: 0; -moz-border-radius-bottomleft: 6px; -moz-border-radius-bottomright: 6px; -webkit-border-bottom-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; width: 100%; display: none; } .translation-box .input.selected { display: block; } .translation-newlocale-container, .translation-deletelocale-container, .translation-help-container, .translation-error-container { display: none; } .translation-newlocale, .translation-deletelocale { border: 1px solid #1D587F; margin: 0; -moz-border-radius-bottomleft: 6px; -moz-border-radius-bottomright: 6px; -webkit-border-bottom-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; width: 100%; height: 100px; display: none; } .translation-deletelocale.textarea { position: absolute; z-index: 10; } .translation-newlocale.selected, .translation-deletelocale { display: block; } .translation-newlocale .padded, .translation-deletelocale .padded, .translation-help .padded { padding: 15px; } .translation-newlocale .buttons, .translation-deletelocale .buttons { text-align: center; margin: 10px; } .translation-help { background-color: #def1f8; margin-bottom: 10px; display: none; border: 1px solid #e0effd; -moz-border-radius: 6px; border-radius: 6px; } .graybox .error-message { background: transparent; color: red; padding: 5px 0 5px 30px; } .html-rtl .graybox .error-message { background-position: 100% 50%; padding: 5px 25px 5px 0; } /** jQuery UI tabs */ .ui-tabs-hide { display: none !important; } .ui-tabs-nav { list-style: none; margin: 0; padding: 0 0 0 3px; } .ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */ display: block; clear: both; content: " "; } .ui-tabs-nav li { float: left; margin: 0 0 0 2px; font-weight: bold; } .ui-tabs-nav a, .ui-tabs-nav a span { float: left; /* fixes dir=ltr problem and other quirks IE */ padding: 0 12px; background-color: #26395A; } .ui-tabs-nav a { margin: 5px 0 0; /* position: relative makes opacity fail for disabled tab in IE */ padding-left: 0; background-position: 100% 0; text-decoration: none; white-space: nowrap; /* @ IE 6 */ outline: 0; /* @ Firefox, prevent dotted border after click */ } .ui-tabs-nav a:link, .ui-tabs-nav a:visited { color: #fff; } .ui-tabs-nav .ui-tabs-selected a { position: relative; top: 1px; z-index: 2; margin-top: 0; background-position: 100% -23px; } .ui-tabs-nav a span { padding-top: 1px; padding-right: 0; height: 20px; background-position: 0 0; line-height: 20px; } .ui-tabs-nav .ui-tabs-selected a span { padding-top: 0; height: 27px; background-position: 0 -23px; line-height: 27px; } .ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */ cursor: text; } .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active, .ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { /* @ Opera, we need to be explicit again here now... */ cursor: pointer; } .ui-tabs-disabled { opacity: .4; filter: alpha(opacity=40); } .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { color: #000; } .ui-tabs-panel { border: 1px solid #26395A; padding: 10px; _background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */ } /** END collections pages */ /* Search Pages */ .no-results, p.addon-search-message { margin-top:2em; color: #777777; font-size: 180%; font-weight: bold; text-align:center; padding-bottom: .5em; } /** END Search Pages */ /** Add-on display page additions **/ #addon .featured .secondary { margin-bottom: 0; max-width: 205px; } #addon .featured .secondary div { margin-bottom: 1em; } #addon .featured .widget div { margin-bottom: 0; } #review-box button { padding: 0.1em 1em; margin-left: 18%; } h2 span { position:relative; top: -0.35em; } h2.collection .private, h2.addon span.version { color: #5E728C; font-size: 85%; margin: 0 .2em; vertical-align: bottom; } h2.collection .private { font-style: italic; } h4.author { position:relative; left:51px; top:-25px; font-weight: normal; } .html-rtl h4.author { left: auto; right: 51px; } h4.author a { font-weight: bold; } .hidden { position: absolute; top: -100000px; } .addon-cats { margin: 0; } .addon-cats li { display: inline; } .addon-cats li:after { content: " | "; } .addon-cats li:last-child:after { content: ""; } #addon-summary-wrapper { float: right; width: 100%; margin-left: -25em; } .html-rtl #addon-summary-wrapper { float: left; margin-left: auto; margin-right: -25em; } #addon-summary { margin-left: 230px; float: none; width: auto; display: block; } .html-rtl #addon-summary { margin-left: auto; margin-right: 230px; } .html-rtl .notification #addon-summary { margin: 0; } #addon-summary.condensed { margin-left: 5px; min-height: 30px; } .html-rtl #addon-summary.condensed { margin-left: 0; margin-right: 5px; } #addon-summary .stats { margin: 0; float: none; text-align: left; color: #6FB727; } .html-rtl #addon-summary .stats { text-align: right; } #addon-summary .stats em { font-style: normal; font-weight: bold; } .preview-img { left:-260px; padding:0 0 0 20px; position:absolute; top:0; } .html-rtl .preview-img { left: auto; right: -260px; padding-left: 0; padding-right: 20px; } .updated { color: #666; /* evil */ } #addon-summary .rating { left:-240px; top: 160px; position: absolute; font-weight: bold; } .html-rtl #addon-summary .rating { left: auto; right: -240px; } #addon-summary .share-this { clear:left; float:left; left:-240px; position:absolute; width:200px; top: 230px; } .html-rtl #addon-summary .share-this { clear: right; float: right; left: auto; right: -240px; } #addon-summary .stats { position: absolute; left: -240px; top: 180px; } .html-rtl #addon-summary .stats { left: auto; right: -240px; } .aux #addon-summary .install , #addon-summary #addon-install .install { float: left; text-align: center; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; padding: 0 3px 3px 3px; } .html-rtl .aux #addon-summary .install , .html-rtl #addon-summary #addon-install .install { float: right; } #addon-summary .unavailable { border: 1px solid #D2E7EE; padding: 0.3em; width: 10em; background-color: #FFFFFF; color: #666666; } .aux #addon-summary.rec .install, #addon-summary.rec #addon-install .install { background-color: #efe; border: 1px solid #2a2; padding-top:4px; margin-bottom:3px; } .aux #addon-summary.exp .install, #addon-summary.exp #addon-install .install { background-color: #fee; border: 1px solid #f66; padding-top:4px; margin-bottom:3px; } .aux #addon-summary .install strong , #addon-summary #addon-install .install strong { display: block; font-weight: normal; font-size: 0.85em; line-height: 1em; color: #000; text-shadow: #FFFFFF 1px 1px 1px; clear: left; } .html-rtl .aux #addon-summary .install strong , .html-rtl #addon-summary #addon-install .install strong { clear: right; } table caption { position: absolute; top: -60000px; opacity: 0; } #addon-summary table th { color: #223355; } #addon-summary tr.meta-stats a { margin: 0 1em; } .share-frame { z-index: 100; /** prevents sharing network dropdown from showing up behind preview thumbnails **/ } #addon-info .item { padding: 1em; } #addon-info a { font-weight: bold; } .app_compat ul { margin: 0; } .userinput ul { list-style-type: disc; } .prose ul li, .userinput ul li { margin-left: 1em; } .html-rtl .prose ul li { margin-left: 0; margin-right: 1em; } .privacypolicy { clear: both; font-weight: bold; } .policy-link { clear: both; } .highlight.collections-add p { margin-bottom: 1em; } .hint { font-size: 90%; } .hint .example{ font-style: italic; } /* addons "old versions" page */ #version-history .listing .item.oldversion { padding-left: 1em; } #version-history .oldversion ul.legal li { padding-left: 20px; } #version-history .oldversion ul.legal li.license { background: url(../../img/icons/script_code_red.png) left no-repeat; } #version-history .oldversion ul.legal li.source, .version a.source-code { background: url(../../img/icons/page_code.png) left no-repeat; } /* addons "source license" page */ #version-license pre { max-height: 400px; overflow-y: auto; background-color: #fff; padding: 1em 2em; -moz-border-radius: 8px; } #version-license h2 span { top: auto; } /** END Add-on display page additions **/ /** Review box **/ #form-review .login, #form-review h3 { display: inline; } #form-review h4, #form-review .selectReplacement { float: left; } .html-rtl #form-review h4, .html-rtl #form-review .selectReplacement { float: right; } #form-review .selectReplacement, #form-review .stars { margin: 4px 0 0 5px; clear: none; } #form-review .stars { margin: 1px 0 0 5px; height: 12px; } .html-rtl #form-review .selectReplacement, .html-rtl #form-review .stars { margin-left: 0; margin-right: 5px; } #form-review a { font-weight: bold; } #form-review button { float: right; } .html-rtl #form-review button { float: left; } #form-review p { clear: both; } /** END Review box **/ /** Highlight styles **/ .highlight a { font-weight: bold; } .highlight h3 a { font-weight: normal; } .highlight .prose { margin: 0; } .highlight .other-author-addons { clear: left; padding-top: 1em; } .highlight .other-author-addons h4 { margin-bottom: 0.1667em; } .highlight .other-author-addons form#addons-author-addons, .highlight .other-author-addons ul.xoxo { margin-bottom: 0.5833em; } .highlight .other-author-addons li { margin-bottom: 0; } .html-rtl .highlight .other-author-addons { clear: right; } .highlight h3 label { font-weight: normal; } /** END Highlight styles **/ /** Header tweaks **/ #header { z-index: 2000; } /** END header tweaks **/ /** User Profile */ #userprofile-reviews p.noreviews { font-family: Georgia, serif; font-size: 125%; font-style: italic; margin: .5em 0; text-align: center; } /** User Edit page **/ #profile-user .line .edit-picture { float:left; } .html-rtl #profile-user .line .edit-picture { float:right; } table#editor-subscriptions { width: 100%; border-collapse: separate; } table#editor-subscriptions tbody { height: 20em; overflow: auto; overflow-x: hidden; } /** END User Edit page **/ /* pages/submissionhelp */ ul.submissionHelp li span.required { font-weight: bold; } ul.submissionHelp li span.optional { font-style: italic; } /* END pages/submissionhelp */ /* pages/collector_firstrun */ form.collector-firstrun-favorite, div.collector-firstrun-favorite { margin-bottom: 1.5em; } div.collector-firstrun-favorite { clear:both; } /* END pages/collector_firstrun */ /* Plug-ins browse page */ .item .baseline img.faq {margin: 0 5px 0 0; float: left;} .html-rtl .item .baseline img.faq {margin: 0 0 0 5px; float: right;} /* END Plug-ins browse page */ /* =Reviews Page */ .review .others-by-user { font-style: italic; display: block; margin-top: 0.5em; font-size: 0.85em } .review .others-by-user a { padding-left: 22px; } .review .others-by-user a.loading { background: transparent; } .review h2 { margin-bottom: 2px;} .review h3 { margin-bottom: 2px;} .review .hsession { display: inline; } .review .reviewed-on { font-size: .8em; margin: .4em 0; } .others-by-user-load { padding-left: 3em; } .review-reply { margin-left: 3em; } .review p.flag-thanks, .review-reply p.flag-thanks { font-weight: bold } .review form.flag, .review-reply form.flag { display: block; padding-bottom: 1em } .review form.flag label, .review-reply form.flag label { display: block; font-weight: bold } .review form.flag .error { color:#f00; } .with-js .review p.flag-thanks, .with-js .review-reply p.flag-thanks { display: inline } .with-js .review form.flag, .with-js .review-reply form.flag { display: inline } .with-js .review form.flag label, .with-js .review-reply form.flag label { display: none; } .review .flag span.loading, .review-reply .flag span.loading { padding-left: 22px; background: transparent; } /* END =Reviews Page */ .html-rtl .new, .html-rtl .listing-header li { unicode-bidi: embed; } .html-rtl .meta .subscribers, .html-rtl .meta .addons { float: right; } .html-rtl .item { clear: right; } /** Frozen button styles **/ .exp-loggedout .button.positive:link, .exp-loggedout .button.positive:visited, .exp-loggedout .button.positive:hover, .exp-loggedout .button.positive:active { background: none #555; border-color: #999; cursor: default; opacity: 0.3; filter: (opacity=30); } .exp-loggedout .button.positive:link img, .exp-loggedout .button.positive:visited img, .exp-loggedout .button.positive:hover img, .exp-loggedout .button.positive:active img { border-right: 1px solid #999; } /** END Frozen button styles **/ /** Adding focus outline to buttons **/ a:focus.button { outline-color: #73B9FF; } a:focus.button.neutral { outline-color: #E5A365; } a:focus.button.positive { outline-color: #8CC553; } a:focus.button.negative { outline-color: #EC7F82; } .item h3, .item h4 { word-wrap: break-word; } /** END Adding focus outlines to buttons **/ /** FAQ and Validation Pages **/ dl.faq dt:target, dl.validation dt:target { color: #df731b; } /** END FAQ / Validation Page **/ /** Installation instruction overlays (bug 495124) **/ .app_install { margin: 0 auto; } #app_install-popup-container { z-index: 1000; } .app_install-popup { width: 32em; background: #fbfefb; border: 4px solid #b4e4b4; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-align: left; z-index: 10001; display: none; } .html-rtl .app_install-popup { text-align: right; } .app_install-popup-inner { padding: 1em; border: 1px solid #256350; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .app_install-popup h3 { margin-top: 0; } .app_install-popup ol, .app_install-popup p { margin-top: 1.5em; margin-bottom: 0; } .html-rtl .app_install-popup ol { margin-left: 0; margin-right: 2em; } .html-rtl .app_install-popup ol { margin-top: 1.5em; margin-bottom: 0; } .app_install-popup .close { font-weight: bold; text-align: right; } .html-rtl .app_install-popup .close { text-align: left; } /** END Installation instruction overlays **/ /* Clearfix! */ .browse-thumbs .thumbs:after, #builder li:after, .block-row:after, .barometer:after, .vcard:after, #addon-install:after, .stars:after, .notification:after, .featured-inner:after, .article.userinput:after, .addon-info:after { content: "."; clear: both; display: block; visibility: hidden; height: 0; overflow: hidden; } .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } /* Modal collection subscription box, based on jqModal styling. */ .modal-subscription { display: none; position: fixed; top: 17%; left: 50%; margin-left: -20em; width: 40em; } /* Turn off notification box colors. */ .modal-subscription .notification-box { background: none; border: none; } /* The long description. */ .modal-subscription .notification-box div { margin-left: 60px; /* the offset from the icon */ padding-bottom: .5em; border-bottom: 2px dotted #b4dfee; } /* The short message. */ .modal-subscription .notification-box h2 { margin-bottom: 0.5em; } .modal-subscription .footer { margin-left: 5.3em; /* offset to match the text indent */ margin-top: -0.5em; } .modal-subscription .bother { float: right; padding-right: 10px; /* matches the notification element */ } .modal-subscription .bother label { font-weight: normal; } .jqmOverlay { background-color: #000; } /** END Modal collection box. */ /*** =Dictionaries ***/ #dictionaries { background-color: #f7fafc; border: 1px solid #eef1f3; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } #dictionaries th, #dictionaries td { border-bottom: 1px solid #eee; } #dictionaries tbody tr:nth-child(even), #dictionaries tbody tr.alt th, #dictionaries tbody tr.alt td { background-color: #fff; } #dictionaries { clear: both; padding: 10px 15px; } #dictionaries table { width: 100%; } #dictionaries th, #dictionaries td { padding: 6px 12px; } #dictionaries td p { margin-bottom: 0; } #dictionaries tbody th { font-weight: bold; } #dictionaries thead th { border-top: none; } /*** END =Dictionaries ***/ /* Search engines & Themes Landing pages */ .secondary h3.compact { margin-bottom: 12px; } .compact { margin: 0px; } /* END Search engines & Themes Landing pages */ /* Search engines & Themes Landing pages */ .secondary h3.compact-bottom { margin-bottom: 6px; } /* END Search engines & Themes Landing pages */ /*** =Browse Thumbs ***/ .browse-thumbs .featured, .browse-thumbs .featured-inner { background: transparent; } .browse-thumbs ul.thumbs { margin-bottom: 0; } .browse-thumbs ul.thumbs li { width: 24.5%; float: left; position: relative; background: #f9f9f9 -moz-radial-gradient(center, circle, #d3eff7, #fff 90%); } .browse-thumbs ul.thumbs .inner { margin: 6px 4px; padding: 1.5em 8px 0; border: 1px solid #ececec; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } .browse-thumbs ul.thumbs .inner > a { display: block; overflow: hidden; border:1px solid #CCCCCC; height: 135px; } .browse-thumbs ul.thumbs .details { margin: 1em 0 0.5em; } .browse-thumbs ul.thumbs .details p { margin: 0; } .browse-thumbs ul.thumbs .meta { font-size: 93%; } .browse-thumbs .thumbs li.featuredaddon .flag, .browse-thumbs .thumbs li.recommended .flag { color: #360; } .browse-thumbs .thumbs li.featuredaddon .inner, .browse-thumbs .thumbs li.recommended .inner { background: #efe; padding-top: 0; } .browse-thumbs .thumbs li.unreviewed .flag, .browse-thumbs .thumbs li.experimental .flag { color: #900; } .browse-thumbs .thumbs li.unreviewed .inner, .browse-thumbs .thumbs li.experimental .inner { background: #fee; padding-top: 0; } .browse-thumbs ul.thumbs .incompatible .inner { opacity: 0.3; } .browse-thumbs ul.thumbs .overlay p { margin: 0; } .browse-thumbs ul.thumbs .overlay { display: none; position: absolute; top: 30%; background: rgba(0, 0, 0, 0.5); color: #fff; pointer-events: none; padding: 10px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; text-align: center; } .browse-thumbs .subcategories li { margin: 0.2em; } .browse-thumbs .subcategories li:not(:first-child) { margin-left: 1em; } .browse-thumbs .subcategories li.selected { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid #001133; background-color: #223355; padding: 0 3px 0 3px; } .browse-thumbs .subcategories li.selected a { color: #fff; } #license a { font-size: 0.9em; } /** * Tag classes, from 1 to 10, 10 being the largest */ .tagLevel1 {font-size: 1.2em;} .tagLevel2 {font-size: 1.4em;} .tagLevel3 {font-size: 1.6em;} .tagLevel4 {font-size: 1.8em;} .tagLevel5 {font-size: 2em;} .tagLevel6 {font-size: 2.2em;} .tagLevel7 {font-size: 2.4em;} .tagLevel8 {font-size: 2.6em;} .tagLevel9 {font-size: 2.8em;} .tagLevel10 {font-size: 3em;} /** tag styles **/ .addon-tags .tag .tagitem { padding-left: 20px; background-image: url(../../img/icons/icons.png); background-repeat: no-repeat; background-position: 0px -1400px; } .html-rtl .addon-tags .tag .tagitem { background-position: 100% -1400px; padding-left: 0; padding-right: 20px; } .collectionitem, .collection-add strong { padding-left: 22px; background: url(../../img/icons/icons.png) no-repeat 0 -300px; } .html-rtl .collectionitem, .html-rtl .collection-add strong { background-position: 100% -300px; display: inline-block; padding: 0 20px 0 0; } .addon-otheraddons li .addonitem { padding-left: 20px; background-image: url(../../img/icons/icons.png); background-repeat: no-repeat; background-position: 0px -200px; } .html-rtl .addon-otheraddons li .addonitem { padding-right: 20px; padding-left: 0; background-position: 100% -200px; } .results-head {width: 100%;} .results-head h2 { margin-bottom: 0; margin-top: 0;} .results-head h3 {margin-top: 0; font-family: "helvetica neue", arial, helvetica, sans-serif; font-weight: normal; color: #444;} .results .item .item-info .downloads {display: block; margin-left: 0px;} .results .item .install {float: none; margin-left: 0px;} .results .item h3 { float: left; } .html-rtl .results .item h3 { float: right; } .results .item blockquote { clear: left; } .html-rtl .item blockquote { clear: right; } .secondary ul.refinements li a { padding: 0.21em 1.2em; display: block; color: #444; font-weight: normal;} .secondary ul.refinements li.selected a { background-color: #b9dbe7; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-weight: bold; background-image: url(../../img/icons/arrows.gif); background-repeat: no-repeat; background-position:4px -152px; } .secondary ul.refinements li a.tagitem { padding: 0.21em 2em; background-image: url(../../img/icons/icons.png); background-repeat: no-repeat; background-position: 3px -596px; } .secondary ul.refinements ul { padding-left: 1em; } /*** =Site-notice ***/ #site-notice { background: #ffe; border-bottom: 2px solid #ccc; font-size: 110%; width: 80%; padding: 5px 10% 0px; margin: 0px; text-align: center; } /** Login and Registration Page **/ #login, #register { padding-top: 1.5em; padding-bottom: .5em; } #login .container, #register .container { margin-bottom: .75em; clear: left; } .html-rtl #login .container, .html-rtl #register .container { clear: right; } #login label, #register label, #recaptcha_whatsthis { float: left; width: 9em; padding-right: 1em; text-align: right; border-bottom: none; } .html-rtl #login label, .html-rtl #register label, .html-rtl #recaptcha_whatsthis { float: right; padding-left: 1em; padding-right: 0; text-align: left; } #login .remember label { float: none; } #login .remember { margin-left: 10em; } .html-rtl #login .remember { margin-left: 0; margin-right: 10em; } #login button { margin-left: 8.33em; } .html-rtl #login button { margin-left: 0; margin-right: 8.33em; } #login-help { padding-bottom: 0; } #login-help h3 { margin-top: 0; } #login-help ul { list-style: square outside; margin-left: 1.5em; } #login-help li { margin-top: .25em; } #register #name-help { display: block; float: right; max-width: 40%; } .html-rtl #register #name-help { float: left; } #register input[type=checkbox] { margin: 0; } #recaptcha_whatsthis a { font-size: 90%; } #register #recaptcha_widget { display: block; margin-left: 10em; } .html-rtl #register #recaptcha_widget { margin-left: 0; margin-right: 10em; } #register-help h3 { margin-top: 0; } #register-help ul { list-style: square outside; margin-left: 1.5em; } .html-rtl #register-help ul { margin-left: 0; margin-right: 1.5em; } #register .submit { padding-left: 10em; } .html-rtl #register .submit { padding-left: 0; padding-right: 10em; } /** END Login and Registration Page */ .amo-form .error_message { border-color: #C63717; background-color: #FFA5A5; color: #C63717; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } /** Support this add-on box. **/ .support-this-addon { text-align: center; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #dfeef5; font-size: 0.9em; } .recommended .support-this-addon { background-color: #f7f6d3; } .support-this-addon a { font-weight: bold; } .category_landing .support-this-addon { margin-left: 5%; /* What could be better than absolute positioning with pixels??? */ position: absolute; bottom: 34px; width: 92%; } /* Don't strech over the extra info on search results. */ .results .item .support-this-addon { margin-right: 17em; } .html-rtl .item .support-this-addon { margin-left: 17em; margin-right: inherit; } /** END Support this add-on box. **/ /** Ratings barometer **/ .barometer form { display: inline-block; position: relative; } .barometer .bars { position: relative; } .barometer .upbar, .barometer .downbar { float: left; } .html-rtl .barometer .upbar, .html-rtl .barometer .downbar { float: right; } .barometer .upbar { background-color: #a3e4cf; margin-right: 1%; /* Little bit of space between the bars. */ } .html-rtl .barometer .upbar { margin-left: 1%; /* Little bit of space between the bars. */ margin-right: 0; } .barometer .downbar { background-color: #ffc3c6; } /* .upvotes and .downvotes are the numbers + thumb images, in inputs. */ .barometer .upvotes, .barometer .downvotes { /* Override native input styling. */ margin: 0; padding: 0; border: 0 none; cursor: pointer; text-shadow: none; -moz-border-radius: 0; font-weight: normal; padding-top: 0.1em; /* Push the text down a bit. */ background-repeat: no-repeat; background-color: transparent; } .barometer .upvotes { color: #00b960; padding-left: 1.2em; /* Space for the image. */ margin-right: 0.2em; /* Space between number and bar. */ background-image: url('../../img/icons/thumbs.png'); background-position: left 33.2%; } .html-rtl .barometer .upvotes { padding: 0 1.2em 0 0; /* Space for the image. */ margin: 0 0 0 .2em; /* Space between number and bar. */ background-position: right 32.5%; } .barometer .upvotes.voted, .barometer .upvotes:hover { background-image: url('../../img/icons/thumbs.png'); background-position: left 0; } .html-rtl .barometer .upvotes.voted, .html-rtl .barometer .upvotes:hover { background-position: right 0; } .barometer .downvotes { color: #d93a40; padding-right: 1.2em; /* Space for the image. */ margin-left: 0.2em; /* Space between number and bar. */ background-image: url('../../img/icons/thumbs.png'); background-position: right 100%; } .html-rtl .barometer .downvotes { padding: 0 0 0 1.2em; /* Space for the image. */ margin: 0 0.2em 0 0; /* Space between number and bar. */ background-position: left 100%; } .barometer .downvotes.voted, .barometer .downvotes:hover { background-image: url('../../img/icons/thumbs.png'); background-position: right 67%; } .html-rtl .barometer .downvotes.voted, .html-rtl .barometer .downvotes:hover { background-position: left 67.2%; } .barometer .downvotes:hover, .barometer .upvotes:hover, .barometer .downvotes.voted, .barometer .upvotes.voted { font-weight: bold; text-shadow: none; } .barometer .novotes { background-color: #d9d9d9; } /* /* Turn off form margins in listings. */ .item .barometer form { margin: 0; } .item .barometer { padding-bottom: 7px; } /** END Ratings barometer **/ /** Hub pages **/ .hub-category-description { padding-right: 35px; } /** END Hub pages **/ .error, .highlight .error-message { color: #C63717; } /* Thumbnails (like the personas browser) */ .thumbnails li { display: inline-block; border: 2px solid #ecf2f5; -moz-border-radius: 6px; margin: 1.2em; padding: 1em 0.5em; background: #f9f9f9; width: 200px; vertical-align: top; } .thumbnails { background: linear-gradient(#cfeaf4, #fff 20%); background: -webkit-gradient(linear, left top, left 20%, from(#cfeaf4), to(#fff)); background-repeat: no-repeat; } /* END Thumbnails (like the personas browser) */ .hide { display:none; } .created-by { margin-top: -1.2em; margin-bottom: 2em; } /* Compatibility first-run */ .firstrun-image { padding: 10px; background-color: #FFFFFF; -moz-border-radius: 6px; margin-top: 75px; width: 85%; } /* Compatibility Reporter */ .compat-info .comments td { padding: 1em; border-bottom: 3px solid #666; } h2.compat-heading a { color: inherit; } #compat-query { font-size: 200%; height: 1.5em; width: 20em; margin-top: .5em; } #compat-filters { margin-left: 0.4em; } #compat-filters label { display: block; } #compat-filters ul, #compat-filters li { margin-bottom: 0.5em; } /* END Compatibility Reporter */ /** jqModal overlay styling */ .jqmWindow { display: none; position: fixed; top: 17%; left: 50%; margin-left: -400px; width: 800px; background-color: #efefef; color: #333; border: 1px solid black; padding: 12px; } .jqmOverlay { background-color: #000; } /* Background iframe styling for IE6. Prevents ActiveX bleed-through (<select> form elements, etc.) */ * iframe.jqm { position: absolute; top: 0; left: 0; z-index: -1; width: expression(this.parentNode.offsetWidth+'px'); height: expression(this.parentNode.offsetHeight+'px'); } * html .jqmWindow { position: absolute; top: expression((document.documentElement.scrollTop || document.body.scrollTop)+Math.round(17 *(document.documentElement.offsetHeight || document.body.clientHeight) / 100)+'px'); } /** END jqModal */ #credits table { width: 100%; } /* Listed add-ons */ .visit-listed { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; background-color: #fff0a6; padding: 1em; } .visit-listed p { margin-bottom: 1em; } .visit-button-wrapper { text-align: center; } div.visit-listed-popup { width: 30em; border: 4px solid #cb7e42; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; padding: 0; } .visit-listed-popup .visit-listed { background-color: #fff; } /* END Listed add-ons */ /* Homepage */ .collections-sidebar > img { margin-left: 1em; float: right; } .collections-sidebar h3 { margin-top: 0; } /* Hide all the add-on lists by default. */ #list-new, #list-updated, #list-popular, #list-featured { display: none; } /* But show whichever one we have selected. */ .addon-listing-new #list-new, .addon-listing-updated #list-updated, .addon-listing-popular #list-popular, .addon-listing-featured #list-featured { display: block; } /* END Homepage */ .appversion img { vertical-align: middle; }