/*---------------------------------------------------------------------------- Color CSS file for Addons.mozilla.org Created by Craig Cook - focalcurve.com on December 30, 2007 Color Reference Body text (almost black): #333 Links (medium blue): #1d587f Visited links (blue-gray): #748d9e Headings (dark blue): #2d3b58 Box border (light blue-gray): #d8dcdf Special box border (dark blue): #5d6c8c -----------------------------------------------------------------------------*/ /*** =General elements ***/ body { background: #fff; color: #333; } a:link { color: #1d587f; } a:visited { color: #748d9e; } a:active, a:hover, a:focus { color: #000; } a.view { background: transparent url("../img/sprite.png") 100% -247px no-repeat; } .html-ltr a.view:hover { background-position: 100% -301px; } .html-rtl a.view { background-position: 100% -486px; } .html-rtl a.view:hover { background-position: 100% -540px; } h3, h4, h5, h6 { color: #2d3b58; } td, th { border-bottom: 1px solid #eee; } thead th { color: #555; } input, button, select, textarea { color: inherit; } a img { border: none; } div.error-notice { background: #fffefa url("../img/warning.png") 10px 10px no-repeat; border: 1px solid #eee; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } /*** =Site-notice ***/ #site-notice { background: #ffe; border-bottom: 2px solid #ccc; } /*** =Access nav ***/ #nav-access a:active, #nav-access a:focus { color: #000; background: #fff; border: 1px solid #475470; outline: 0; } /*** =Header ***/ h4#moz a { background: transparent url("../img/sprite-alpha.png") no-repeat 0 -1px; } h4#moz a:hover, h1#moz a:active, h1#moz a:focus { background-position: 0 -51px; } /* =Page title */ #page-title { background: transparent url("../img/brandbanner-bg.png") 0 40% repeat-x; } #page-title p.page-intro { color: #354a4f; } #page-title.firefox h1, #page-title.firefox h1 a { color: #bd1d01; } /* red */ #page-title.thunderbird h1, #page-title.thunderbird h1 a { color: #0b4190; } /* blue */ #page-title.seamonkey h1, #page-title.seamonkey h1 a { color: #3f38a3; } /* purple */ #page-title.sunbird h1, #page-title.sunbird h1 a { color: #337b5a; } /* green */ #page-title.generic h1, #page-title.generic h1 a { color: #bd1d01; } /* red */ #page-title.developers h1, #page-title.developers h1 a { color: #bd1d01; } /* red */ #page-title h2 { color: #2D3B58; } /* =User nav */ .html-ltr #nav-user li { border-left: 1px solid #666; } .html-rtl #nav-user li { border-right: 1px solid #666; } #nav-user li:first-child { border-left: 0; } #nav-user li:first-child { border-right: 0; } #nav-user a:link { color: #000; } #nav-user a:visited { color: #666; } #nav-user a:hover, #nav-user a:active, #nav-user a:focus { color: #000; } /* =Other Applications */ #other-apps { background-color: #b3deee; border: 1px solid #90c8dd; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } #other-apps h3 { color: #4d757b; } #other-apps.js h3 { border-bottom: 1px solid #90c8dd; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } #other-apps.js h3 { background: transparent url("../img/sprite.png") 4px -262px no-repeat; } .html-rtl #other-apps.js h3 { background-position: 14px -262px; } #other-apps.js h3:hover { background-color: #c5e3ee; } #nav-apps a { color: #1f0084; background-repeat: no-repeat; background-position: 0 50%; } #nav-apps a:hover, #nav-apps a:active, #nav-apps a:focus { color: #1d587f; } .html-ltr #other-apps.js #nav-apps #app-safari a { background: url("../img/sprite-alpha.png") -909px 0 no-repeat;} .html-rtl #other-apps.js #nav-apps #app-safari a { background: url("../img/sprite-alpha.png") -837px 0 no-repeat;} .html-ltr #other-apps.js #nav-apps #app-seamonkey a { background: url("../img/sprite-alpha.png") -465px 0 no-repeat;} .html-rtl #other-apps.js #nav-apps #app-seamonkey a { background: url("../img/sprite-alpha.png") -390px 0 no-repeat;} .html-ltr #other-apps.js #nav-apps #app-sunbird a { background: url("../img/sprite-alpha.png") -616px 0 no-repeat;} .html-rtl #other-apps.js #nav-apps #app-sunbird a { background: url("../img/sprite-alpha.png") -541px 0 no-repeat; } .html-ltr #other-apps.js #nav-apps #app-thunderbird a { background: url("../img/sprite-alpha.png") -766px 0 no-repeat; } .html-rtl #other-apps.js #nav-apps #app-thunderbird a { background: url("../img/sprite-alpha.png") -691px 0 no-repeat; } .html-ltr #other-apps.js #nav-apps #app-firefox a { background: url("../img/sprite-alpha.png") -321px 0 no-repeat; } .html-rtl #other-apps.js #nav-apps #app-firefox a { background: url("../img/sprite-alpha.png") -246px 0 no-repeat; } .html-ltr #other-apps.collapsed h3 { border-bottom: 0; background-position: 6px -320px; } .html-rtl #other-apps.collapsed h3 { border-bottom: 0; background-position: 16px -320px; } /*** =Search form ***/ #search-bubble-outer { background: transparent url("../img/sprite.png") right top no-repeat; } #search-bubble-inner { background: transparent url("../img/sprite.png") left top no-repeat; } #search-form li { color: #666; } .html-ltr #search-form #query { background: #fff url("../img/sprite.png") -977px -686px no-repeat; } .html-rtl #search-form #query { background: #fff url("../img/sprite.png") 100% -686px no-repeat; } #search-form #search-category label { color: #426a13; } .html-ltr #search-form #my-submit { background: url("../img/sprite-alpha.png") -120px 0 no-repeat; } .html-ltr #search-form #my-submit:hover { background-position: -157px 0;} .html-rtl #search-form #my-submit { background: url("../img/sprite-alpha.png") -120px -40px no-repeat; } .html-rtl #search-form #my-submit:hover { background: url("../img/sprite-alpha.png") -157px -40px no-repeat;} #advanced-search {background-color: #e6e6e6; border: 1px solid #68B41C; } #advanced-search-toggle {background: url("../img/sprite.png") right -68px no-repeat; } #advanced-search-toggle div {background: transparent url("../img/sprite.png") left -68px no-repeat;} #advanced-search-toggle a {color: black; text-decoration: none; padding:1px 3px 1px 3px;} .html-ltr #advanced-search-toggle a.asclosed { background: url("../img/sprite.png") right -355px no-repeat;} .html-ltr #advanced-search-toggle a.asopen { background: url("../img/sprite.png") right -371px no-repeat;} .html-rtl #advanced-search-toggle a.asclosed {background: url("../img/sprite.png") -989px -355px no-repeat;} .html-rtl #advanced-search-toggle a.asopen { background: url("../img/sprite.png") -989px -371px no-repeat;} #advanced-search-toggle #toggle-outer {background: url("../img/sprite.png") right -87px no-repeat; } #advanced-search-toggle #toggle-inner {background: url("../img/sprite.png") -861px -87px no-repeat; } /*** =Footer ***/ #footer { color: #888; padding: 1em 0; background: transparent url("../img/foot-bg.png") repeat-x; } #footer a:link, #footer a:visited { color: #777; } #footer a:hover, #footer a:active, #footer a:focus { color: #000; } /*** =Extra content ***/ #content-extra .extra { border: 1px solid #d8dcdf; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } /*** =Categories ***/ #categories h3 { background: #79be1b url("../img/sprite.png") -104px -106px no-repeat; border-bottom: 1px solid #abe071; } #categories h3 span { color: #426a13; background: transparent url("../img/sprite.png") -230px -106px no-repeat; } #categories.collapsed h3 { background-position: 0 -106px; } #categories.collapsed h3.open { background-position: -26px -106px; } #categories, #categories.collapsed #cat-list { background-color: #f6f6f6; border: 1px solid #d8dcdf; border-width: 0 1px 1px; } #categories, #categories.collapsed #cat-list { /* redundancy compensates for varying browser support */ -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; -webkit-border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } #cat-list { border-top: 1px solid #e8e6e6; } #cat-list li { border-bottom: 3px double #e8e6e6; } #cat-list a { background: #f4f2f2 url("../img/cat-link.png") repeat-x left top; } #categories a:link { color: #4e4e4e; } #categories a:visited { color: #777; } #categories a:hover, #categories a:active, #categories a:focus { color: #1d587f; background: #f1f0f0 url("../img/cat-link.png") repeat-x left -100px; } #categories.collapsed h3 span { background-position: -242px -106px; } #categories.collapsed h3:hover { color: #4f7f17; background-position: -52px -106px; } #categories.collapsed h3.open:hover { background-position: -78px -106px; } #categories.collapsed h3:hover span { background-position: -533px -106px; } #categories p { border-top: 1px solid #e8e6e6; } /*** =Add-on boxes ***/ .addon { border-left: 1px solid #d8dcdf; background: transparent url("../img/sprite.png") right -1256px no-repeat; } .addon .vex { background: transparent url("../img/sprite.png") right bottom no-repeat; } .addon .vex span { background: transparent url("../img/sprite.png") left bottom no-repeat; } .addon .preview-img { background: transparent url("../img/sprite.png") left -1256px no-repeat; } .addon .stats em { color: #d54601; } .addon .flag { border: 1px solid #ccc; border-width: 0 1px 1px 0; } #addon-listing .addon .vex { background: transparent url("../img/sprite.png") no-repeat right bottom; } /* =Secondary featured add-ons */ .sub .irk { background: transparent url("../img/sprite.png") left -1256px no-repeat; } .sub .preview-img { background-image: none; } /* =Recommended add-ons */ .rec { background: url("../img/rec-tr.png") no-repeat right top; border-left-color: #c1e1c1; } .rec .preview-img { background: transparent url("../img/rec-tl.png") left top no-repeat; } .rec .flag { color: #360; background: #f8f8f7 url("../img/rec-flag.png") no-repeat; } .rec .vex { background-image: url("../img/rec-br.png"); } .rec .vex span { background-image: url("../img/rec-bl.png"); } /* =Experimental add-ons */ .exp { background: url("../img/exp-tr.png") no-repeat right top; border-left-color: #e3c1c1; } .exp .preview-img { background: transparent url("../img/exp-tl.png") left top no-repeat; } .exp .flag { color: #900; background: #f8f8f7 url("../img/exp-flag.png") no-repeat; } .exp .vex { background-image: url("../img/exp-br.png"); } .exp .vex span { background-image: url("../img/exp-bl.png"); } /* =Listing items */ #addon-listing .more li { border-right: 1px solid #666; } #addon-listing .more li:last-child { border: 0; } /*** =Install button ***/ .install-button a { color: #062445; background: #7cc11c url("../img/sprite.png") 100% -730px no-repeat; } .install-button a span { background: transparent url("../img/installbtn-edges.png") left bottom no-repeat; } .install-button a span span { background: transparent url("../img/installbtn-edges.png") right bottom no-repeat; } .install-button a span span span { background: transparent url("../img/installbtn-edges.png") left top no-repeat; } .install-button a span span span strong { background: transparent url("../img/installbtn-edges.png") right top no-repeat; } .install-button a:hover, .install-button a:focus, .install-button a:active { color: #0a3b73; background-color: #9dd34c; background-position: 100% -860px; } /* In listings - general add-ons */ .install-button a span, .install-button a span span, .install-button a span span span, .install-button a span span span strong { background-image: url("../img/installbtn-edges-list.png"); } /* In listings - experimental add-ons */ .exp .install-button a span, .exp .install-button a span span, .exp .install-button a span span span, .exp .install-button a span span span strong { background-image: url("../img/installbtn-edges-exp.png"); } /* In listings - recommended add-ons */ #addon-listing .rec .install-button a span, #addon-listing .rec .install-button a span span, #addon-listing .rec .install-button a span span span, #addon-listing .rec .install-button a span span span strong { background-image: url("../img/installbtn-edges-rec.png"); } /* Experimental add-ons - while logged out */ #content-main .exp-loggedout { border: 1px solid #d8d8d8; background: #fff; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } #content-main .exp-loggedout .install-button a { color: #aaa; background-color: #fff; background-position: 100% -995px; } #content-main .exp-loggedout .install-button a span, #content-main .exp-loggedout .install-button a span span, #content-main .exp-loggedout .install-button a span span span, #content-main .exp-loggedout .install-button a span span span strong { background-image: url("../img/installbtn-edges-dis.png"); } #content-main .exp-loggedout .install-button a:hover { background-color: #f3f3f3; background-position: 100% -1125px; } /* Unavailable add-ons */ #content-main .install-container .not-avail { padding: 5px 10px; float: left; color: #666; border: 1px solid #d8d8d8; background: #fff; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } /*** =Pitch ***/ .pitch { background-color: #f8f8f8; border: 1px solid #e4f3fa; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } .pitch h3 { color: #042253; } /*** =Landing pages ***/ #recommended { background: #f2f8fd; border: 1px solid #e9f1f8; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } #recommended .addon { background: #fff url("../img/landrec-tr.png") no-repeat top right; } #recommended .addon .preview-img { background: url("../img/landrec-tl.png") no-repeat top left; } #recommended .addon .vex { background-image: url("../img/landrec-br.png"); } #recommended .vex span { background-image: url("../img/landrec-bl.png"); } #content.landing #secondaries .exp .irk { background-image: url("../img/exp-tl.png"); } #content.landing #secondaries .sub .vex { background-image: url("../img/addon-br.png"); } #content.landing #secondaries .exp .vex { background-image: url("../img/exp-br.png"); } #content.landing #secondaries .exp .preview-img { background-image: none; } #content.landing .more-addons { border: 1px solid #5d6c8c; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } .browse-list a { background: #fafafa; border: 1px solid #e8e6e6; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } .browse-list a:hover { background-color: #f1f0f0; border-color: #e1dfdf; } /*** =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.alt th, #dictionaries tbody tr.alt td { background-color: #fff; } /*** =Detail page ***/ .addon-cats li { border-left: 1px solid #666; } .addon-cats li:first-child { border-left: 0; } #addon-info, #addon-advanced { border: 1px solid #d8dcdf; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } .addon-images a img { border: 1px solid #1d587f; } .addon-reviews li, .addon-versions li { border-top: 1px solid #d8dcdf; } #addon-info .addon-reviews li { background-color: #f7fafc; border: 1px solid #eef1f3; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } #addon-advanced h5 { border-top: 1px solid #d8dcdf; } /* =Version History Page */ #latest-version { border: 1px solid #5d6c8c; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } div.oldversion { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } /* =Review form */ #form-review { background-color: #f8f8f8; border: 1px solid #e4f3fa; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } /* =reCaptchas */ #recaptcha_image { border: 1px solid #d8dcdf; } /* =Star rating */ #rate-it legend span { color: #042758; } /* ul.star-rating { background: #fff; padding: 3px 5px; border: 1px solid #edbe97; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } */ /* =More add-ons */ .more-addons h3 a.view { background: transparent url("../img/sprite.png") 100% -387px no-repeat; } .html-ltr .more-addons h3 a.view:hover { background-position: 100% -437px; } .html-rtl .more-addons h3 a.view { background-position: 100% -597px; } .html-rtl .more-addons h3 a.view:hover { background-position: 100% -647px; } /*** =Pagination ***/ .pagination { background-color: #f7fafc; border: 1px solid #eef1f3; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } .pages a { border: 1px solid #fff; } .pages a:hover { background-color: #ccf29b; border-color: #bbde92; } .pages .current strong { background-color: #ccf29b; border: 1px solid #83c53f; } .pages .prev a { background: transparent url("../img/arr-prev.png") 0 50% no-repeat; } .pages .prev a:hover { background-color: #ccf29b; } .pages .next a { background: transparent url("../img/arr-next.png") 100% 50% no-repeat; } .pages .next a:hover { background-color: #ccf29b; } /*** =Listing control bar ***/ #form-listcontrol { background: #f2f8fd; border: 1px solid #e9eff4; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } #order-by button { color: #7598b5; background-color: #fff; border: 1px solid #89a8c1; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } #order-by button:hover { background-color: #e9eff4; color: #496377; } #order-by button.current, #order-by button.current:hover { background-color: #89a8c1; color: #fff; } #form-listcontrol #experimental label { background: #fff; border: 1px solid #933; color: #933; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } /*** =Thumbnail browser layout */ #thumb-subcategories ul { -moz-border-radius-bottomleft:6px; -moz-border-radius-bottomright:6px; border-color:#D8DCDF; border-style:solid; border-width:0pt 1px 1px; } #thumb-subcategories ul li { border-top:1px solid #E8E6E6; } #thumb-subcategories a:link { color: #4e4e4e; } #thumb-subcategories a:visited { color: #777; } #thumb-subcategories a:hover, #thumb-subcategories a:active, #thumb-subcategories a:focus { background: #F2F8Fd } #thumb-subcategories li.selected a:link, #thumb-subcategories li.selected a:visited { background-color:#89A8C1; color:#FFFFFF; } #thumb-browser .thumbs li.thumb { background: transparent url(../img/sprite.png) no-repeat scroll right -1256px; } #thumb-browser .thumbs li.thumb div.wrapper { background: transparent url(../img/sprite.png) no-repeat scroll left -1256px; } #thumb-browser .thumbs li.exp { background: transparent url(../img/exp-tr.png) no-repeat scroll right top; } #thumb-browser .thumbs li.exp div.wrapper { background: transparent url(../img/exp-tl.png) no-repeat scroll left top; } #thumb-browser .thumbs li.thumb .vex { background:transparent url(../img/sprite.png) no-repeat scroll right bottom; } #thumb-browser .thumbs li.thumb .vex span { background:transparent url(../img/sprite.png) no-repeat scroll left bottom; width: 10px; height: 10px; float: left;} #thumb-browser .thumbs li.exp .vex { background:transparent url(../img/exp-br.png) no-repeat scroll right bottom; } #thumb-browser .thumbs li.exp .vex span { background:transparent url(../img/exp-bl.png) no-repeat scroll left bottom; }