/* Theme Name: Rock Your Firefox Theme URI: http://www.rockyourfirefox.com/ Description: Theme for Rock Your Firefox. Design by Lee Tom. Code by Craig Cook. Copyright Mozilla Corporation, all rights reserved. Author: Craig Cook Author URI: http://www.focalcurve.com/ Created February 10, 2010 Colors... Text #575344 or rgba(0,0,0,0.65) [black, 65% alpha] Pale yellow #f9eec2 Orange #cb461b Bergundy #8c0d0b */ /* =Reset defaults */ html, body, form, fieldset, legend, h1, h2, h3, h4, h5, h6, dd { margin: 0; padding: 0; } p, pre, blockquote, ul, ol, dl, table { margin: 0 0 1.4em; padding: 0; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } table { border-collapse: collapse; border-spacing: 0; } fieldset { border: 0; } form ul, form ol { list-style: none; margin: 0 0 1.4em; } a img { border: 0; } input, select, textarea { font-family: inherit; font-size: 100%; } /* =General elements */ html { background: #fbf3d4 url("img/bg-content.png") 0 128px repeat-x; padding-top: 128px; } body { font: 16px/1.5 Georgia, Times, "Times New Roman", serif; color: #575344; color: rgba(0,0,0,0.65); background: #f9eec2; } #wrap { padding-bottom: 190px; background: transparent url("img/bg-wrap.png") -190px 100% no-repeat; min-height: 36em; } #content { position: relative; min-height: 800px; width: 100%; background: transparent url("img/bg-content.jpg") 0 0 no-repeat; } #content:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } /* clear floats */ #content-main { position: relative; width: 672px; padding-left: 320px; padding-top: 3em; } /* =Links */ :link { color: #cb461b; text-decoration: none; } :visited { color: #8c0d0b; text-decoration: none; } :link:hover, :visited:hover, :link:focus, :visited:focus, :link:active, :visited:active { color: #8c0d0b; text-decoration: underline; } /* =Headings */ h1, .page-title { margin: 0 0 .25em; font: bold 2.25em/1.2 Calibri, Helvetica, Arial, sans-serif; color: #8e0c03; } /* 2.25 * 16px = 36px */ h2 { margin: 0 0 .25em; font: 1.3125em/1.2 Calibri, Helvetica, Arial, sans-serif; color: #8e0c03; } /* 1.3125 * 16px = 21px */ h3 { margin: 0 0 .25em; font: 1.125em/1.2 Calibri, Helvetica, Arial, sans-serif; color: #8e0c03; } /* 1.125 * 16px = 18px */ h4 { margin: 0 0 .25em; font: 1em/1.2 Calibri, Helvetica, Arial, sans-serif; color: #8e0c03; text-transform: uppercase; } h5, h6 { margin: 0 0 .25em; font: 1em/1.2 Calibri, Helvetica, Arial, sans-serif; text-transform: uppercase; color: #8e0c03; } #fail .page-title { margin-bottom: 1em; } /* =Basics */ .post li, .page li { margin-bottom: .25em; } .post li ul, .post li ol, .page li ul, .page li ol { margin: 0 0 0 15px; } .post blockquote, .page blockquote { position: relative; left: -.5em; padding: 0 15px 0 25px; border-left: .5em solid #ffc566; } .post dt, .page dt { font-style: italic; } .post dd, .page dt { padding-left: 15px; } .post table, .page table { border-collapse: collapse; border: solid #d4d1c3; border-width: 1px 1px 0; } .post table caption, .page table caption { font: 100% Helvetica, Arial, sans-serif; } .post th, .post td, .page th, .page td { border-bottom: 1px solid #d4d1c3; padding: 0 4px; } .post thead th, .page thead th { font-size: 90%; text-align: left; font-weight: normal; } .post tbody th, .page tbody th { text-align: left; } .post code, .page code { font-size: 90%; color: #93641a; } /* =Skip links *********/ #nav-access { position: absolute; top: -10em; left: 64px; width: 192px; font-family: Helvetica, Arial, sans-serif; } #nav-access a:focus, #nav-access a:active { position: absolute; width: 192px; top: 32.5em; z-index: 12; display: block; text-align: center; color: #fff; text-decoration: none; outline: 0; border: 1px solid #aaa; background: rgba(0,0,0,0.5); -moz-border-radius: .25em; -webkit-border-radius: .25em; border-radius: .25em; } /* =Branding header *********/ #branding { position: absolute; left: 30px; top: 0; z-index: 11; width: 192px; padding: 0 34px; color: rgba(0,0,0,.65); background: transparent url("img/bg-branding.png") center top no-repeat; } #branding #logo { margin: 34px 0 95px -16px; line-height: 0; } /*** =About blurb *********/ #branding #brand-about { font: 1em/1.28 Helvetica, Arial, sans-serif; } #branding #brand-about p { font-size: .875em; } /*** =External navigation *********/ #branding #nav-extra { list-style: none; } #branding #nav-extra li { font: .875em/1.3 Helvetica, Arial, sans-serif; margin-top: .5em; } #branding #nav-extra li a { padding: 1px 0 1px 20px; background-position: 0 0; background-repeat: no-repeat; } #branding #nav-extra li.twitter a { background-image: url("img/twitter.png"); } #branding #nav-extra li.rss a { background-image: url("img/rss.png"); } #branding #nav-extra li.collection a { background-image: url("img/collection.png"); } #branding #nav-extra li.amo a { background-image: url("img/amo.png"); margin-left: -1.25em; } #branding #nav-extra li.amo { margin: 0.5em -0.5em 1em; background: #f4e7c2; background: rgba(255,255,255,.5); padding: 0.5em 0.5em 0.3em; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border-radius: 0.5em; text-align: center; } /*** =Search form *********/ #fm-search legend { font: .875em/1.3 Helvetica, Arial, sans-serif; } #fm-search #s { width: 150px; height: 1.4em; background: #fff; border: 1px solid #f0d597; font-family: inherit; font-size: .875em; margin-right: 5px; } #fm-search #s:hover, #fm-search #s:focus { border-color: #cb461b; } #fm-search button { height: 20px; width: 25px; text-indent: -999em; overflow: hidden; background: transparent url("img/btn-search.png") 0 0 no-repeat; border: 0; cursor: pointer; } #fm-search button:hover, #fm-search button:focus { background-position: 0 -21px; } #fail #fm-search { margin: 1.5em 0 2em; } #fail #fm-search #s { border: 1px solid #d4d1c3; float: left; width: 23em; background: #fff; font-family: inherit; font-size: .875em; margin-right: 5px; } #fail #fm-search #s:hover, #fail #fm-search #s:focus { border-color: #ed8a3d; } /*** =Recently featured *********/ #recent h3 { font: .875em/1.28 Helvetica, Arial, sans-serif; margin-bottom: .5em; } #recent h3 { color: #494843; } #recent ul { font: .875em/1.28 Helvetica, Arial, sans-serif; list-style: none; } #recent li { margin-bottom: .5em; } #recent a { padding: 1px 0 1px 20px; background: url(img/bullet.png) 0 -1px no-repeat; } /* =Main =navigation *********/ #nav-main { background: #adacad url("img/bg-head.jpg") 0 0 no-repeat; position: absolute; left: 0; top: 0; right: 0; height: 128px; z-index: 10; border-bottom: 3px solid #cb461b; font-family: Helvetica, Arial, sans-serif; line-height: 1.2; } #nav-main ul { position: absolute; bottom: 0; width: 672px; padding-left: 320px; text-align: right; list-style: none; margin: 0 0 .185em; } #nav-main li { display: inline; margin-left: .5em; } #nav-main a { padding: .5em 1.25em; font-size: .875em; color: #fff; text-decoration: none; text-shadow: -1px -1px 0 rgba(162,56,22,0.6); background: #cb461b; background: -moz-linear-gradient(top, #ed8c56 0, #ea7432 2px, #ea7432 50%, #cb461b 60%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #ea7432), color-stop(60%, #cb461b)); border: 1px solid #cb461b; border-bottom: 0; -moz-border-radius: .35em .35em 0 0; border-radius: .35em .35em 0 0; -webkit-border-top-left-radius: .35em; -webkit-border-top-right-radius: .35em; } #nav-main a:hover, #nav-main a:focus, #nav-main a:active { background: #f08c33; background: -moz-linear-gradient(top, #ed8c56 0, #f08c33 2px, #f08c33 50%, #cb461b 60%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #f08c33), color-stop(60%, #cb461b)); } #nav-main a.selected { background: -moz-linear-gradient(top, #face73 0, #f0903b 2px, #f08c33 50%, #cb461b 60%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #f08c33), color-stop(60%, #cb461b)); } /* =Paged =navigation (next and previous) *********/ .nav-paging { text-align: right; list-style: none; position: absolute; top: 2.33em; left: 592px; width: 400px; color: #929086; font: .875em Helvetica, Arial, sans-serif; } .nav-paging li { display: inline; } .nav-paging .prev a { padding-left: 16px; background: transparent url("img/nav-arrows.png") 0 -22px no-repeat; } .nav-paging .next { margin-left: 20px; } .nav-paging .next a { padding-right: 16px; background: transparent url("img/nav-arrows.png") 100% 4px no-repeat; } .nav-paging a:visited { color: #cb461b; } .nav-paging.end { position: static; width: auto; text-align: left; } .nav-paging.end .next { float: right; } .nav-paging.end .prev { float: left; } /* =Posts *********/ .post:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } /* clear floats */ .search .post { width: 28em; } .entry-head { position: relative; } .entry-posted { width: 250px; position: absolute; top: -1.1em; font: .875em Helvetica, Arial, sans-serif; color: #a3551b; } abbr.published, abbr.updated { border: 0; outline: 0; } .main-image img { max-width: 672px; } .post .edit { margin: .25em 0; width: 28em; font-size: .875em; } .post .edit a { padding: 2px 6px 2px 25px; background: #fff url("img/icn-edit.png") 4px 50% no-repeat; border: 1px solid #ebe7ce; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } .post .entry-title { font: bold 2.25em/1.2 Calibri, Helvetica, Arial, sans-serif; } .post .entry-title a:link, .post .entry-title a:visited, .post .entry-title a:hover, .post .entry-title a:focus, .post .entry-title a:active { color: #8c0d0b; } .post .entry-summary { font: 131.25%/1.2 Calibri, Helvetica, Arial, sans-serif; color: #000; } .archive .post .entry-summary, .search .post .entry-summary { font: 100%/1.4 Georgia, Times, "Times New Roman", serif; color: #575344; color: rgba(0,0,0,0.65); } .post .entry-summary p { margin: .5em 0 1em; } .post .entry-content { float: left; width: 448px; } .page .post .entry-content { width: auto; } .post .entry-meta { float: right; width: 192px; font: .857em Helvetica, Arial, sans-serif; } .post .entry-meta h3 { margin: 0 0 .5em; font-size: .857em; font-weight: normal; text-transform: uppercase; letter-spacing: .05em; color: #494843; } .post .entry-meta ul { list-style: none; margin: 0 0 1.5em; } .post .entry-meta li { margin: 0 0 .25em; } .post .entry-meta h3.developer { margin-bottom: 1em; } .entry-meta .discuss a { padding: 1px 0 1px 20px; background-position: 0 50%; background-repeat: no-repeat; } .entry-meta .comments a { background-image: url("img/comments.png"); } .entry-meta .post a { background-image: url("img/comment.png"); } .entry-meta address { font-style: normal; font-size: .857em; } .entry-meta address .url { font-size: 1.174em; } .post .entry-content dt { font-weight: bold; } .post .entry-content dd { margin: 0 0 1em 1em; } .post .entry-content dd ul { margin: 0.5em 0 0 3em; } .post .author { font-size: .9em; font-style: italic; border-top: 1px solid #ecc697; border-top-color: rgba(203,70,27,0.1); padding-top: 1em; } /** =Images *********/ .post img { position: relative; left: -0.5em; padding: 0.5em; background: #fff; background: rgba(255,255,255,.7); } .post img.alignright, .post div.alignright { position: relative; left: auto; right: -0.5em; } .post a:hover img, .post a:focus img { background-color: #fff; outline: 1px solid #f0d597; } .post .entry-content img, .archive .post img, .search .post img { max-width: 100%; height: auto; } .alignleft { float: left; margin: 0 1em 10px 0; } .alignright { float: right; margin: 0 0 10px 1em; } .aligncenter { display: block; margin: 0 auto 1.5em; } .wp-caption.aligncenter { width: auto !important; padding: 0 !important; border: 0; background: transparent; } .wp-caption img { display: block; margin: 5px auto; max-width: 100%; } .wp-caption.aligncenter img { margin: 0 auto 5px; } .wp-caption-text { margin: .25em 0; font-size: .75em; font-style: italic; } /** =Social networks *********/ .entry-meta .sociable a { padding: 1px 0 1px 20px; background: transparent url("img/icn-social.png") 0 0 no-repeat; } /* Icons by Paul Robert Lloyd - http://prlloyd.com/e/226 */ .entry-meta .sociable a[href^="http://twitter.com"], .entry-meta .sociable a[href^="http://www.twitter.com"] { background-image: url("img/icn-twitter.png"); } .entry-meta .sociable a[href^="http://facebook.com"], .entry-meta .sociable a[href^="http://www.facebook.com"] { background-image: url("img/icn-facebook.png"); } .entry-meta .sociable a[href^="http://delicious.com"], .entry-meta .sociable a[href^="http://www.delicious.com"] { background-image: url("img/icn-delicious.png"); } .entry-meta .sociable a[href^="http://digg.com"], .entry-meta .sociable a[href^="http://www.digg.com"] { background-image: url("img/icn-digg.png"); } .entry-meta .sociable a[href^="http://stumbleupon.com"], .entry-meta .sociable a[href^="http://www.stumbleupon.com"] { background-image: url("img/icn-stumbleupon.gif"); } /** =Install button *********/ .entry-meta .install { margin: 0 0 1em -6px; } .entry-meta .install a { padding: .3em 10px; background: #e34d01 url("img/button-bg.png") 0 -80px repeat-x; border: 1px solid #e54e01; -moz-border-radius: .5em; -webkit-border-radius: .5em; border-radius: .5em; color: #fef8f2; text-decoration: none; outline: none; display: block; text-align: center; font: bold 150% Helvetica, Arial, sans-serif; text-shadow: -1px -1px 1px rgba(162,56,22,0.5); -moz-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.25); -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.25); box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.25); } .entry-meta .install a:hover, .entry-meta .install a:focus, .entry-meta .install a:active { background-position: 0 -280px; color: #fff; } .entry-meta .install a:focus { outline: 1px dotted #8c0d0b; } /** =Install note *********/ .entry-meta .install-note { font-size: 0.9em; } /* =Archives and =Search results *********/ .archive #content-main, .search #content-main { float: left; width: 448px; } .archive #content-extra, .search #content-extra { float: left; width: 192px; margin: 3.8em 0 1em 35px; } .archive .page-title, .search .page-title { margin: .3em 0 .5em; color: #9b4d13; font-size: 1.25em; } .archive #content-extra h3, .search #content-extra h3 { margin: 0 .65em .5em; font-size: .75em; font-weight: normal; text-transform: uppercase; letter-spacing: .05em; color: #494843; } .archive #content-extra ul, .search #content-extra ul { list-style: none; margin: 0 .5em 1.5em .5em; font: .857em Helvetica, Arial, sans-serif; } .archive #content-extra li, .search #content-extra li { margin-bottom: .25em; color: #aaa188; } .archive .post, .search .post { margin-bottom: 1.5em; border-bottom: 1px solid #ecc697; border-bottom-color: rgba(203,70,27,0.1); } .archive .post .entry-title, .search .post .entry-title { font-size: 1.5em; } .archive .post .entry-meta, .search .post .entry-meta { float: none; width: auto; } /* =Comments *********/ #comments { position: relative; width: 672px; clear: both; padding: 2em 0; } #comments .comments-head { margin-bottom: 1em; font-family: Helvetica, Arial, sans-serif; color: #8c0d0b; } #comments .comments-head h3 { display: inline; font-size: 1.3125em; } #comments .comments-head a { margin-left: 1em; font-size: .875em; } #comments .comment-list { list-style: none; width: 448px; clear: both; margin-bottom: 2em; } #comments .hentry { position: relative; list-style: none; width: 448px; min-height: 4.5em; margin: 0 -16px 1.4em; padding: .75em 16px .5em; background: #f9d18b; -moz-border-radius: .95em; -webkit-border-radius: .95em; border-radius: .95em; -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1); box-shadow: 0 1px 2px rgba(0,0,0,.1); } #comments .hentry .entry-content { position: static; margin: 0; border: 0; padding: 0; } #comments .hentry p { margin: 0 0 1em; } #comments .entry-title { position: absolute; right: -208px; top: .5em; width: 176px; min-height: 45px; padding: 25px 0 0 32px; color: #7d796a; background: transparent url("img/comment-stem.png") no-repeat 0 1.25em; font: .875em Helvetica, Arial, sans-serif; text-transform: none; } #comments .av .entry-title { padding-top: 0; } #comments .hentry .hentry { margin: 0 -16px -1em 0; width: auto; background: #fcdf9a; border-width: 1px 0 1px 1px; border-style: solid; border-color: #eac56c; } #comments .hentry .hentry .entry-title { background-image: url("img/nested-comment-stem.png"); } #comments .vcard cite { float: left; clear: both; font-style: normal; } #comments .vcard .photo img { float: left; border: 1px solid; margin-bottom: .25em; } #comments .entry-title a:hover cite, #comments .entry-title a:focus cite, #comments .entry-title a:active cite { text-decoration: underline; } #comments .comment-meta { font: .75em Helvetica, Arial, sans-serif; color: #c48352; } #comments .comment-meta abbr { border: 0; outline: 0; } #comments .comment-meta a { color: #c48352; } #comments .hentry .hentry .comment-meta a { color: #c48352; } #comments .reply, .comment-list .edit { margin: 0 0 .5em; font: .75em Helvetica, Arial, sans-serif; } #comments .mod { font-family: Helvetica, Arial, sans-serif; color: #8e0c03; } /* =Comment =Form *********/ #respond { clear: both; position: relative; list-style: none; width: 448px; min-height: 4.5em; margin: 1em -16px; padding: .75em 16px .5em; background: #f9d18b; -moz-border-radius: .95em; -webkit-border-radius: .95em; border-radius: .95em; -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1); box-shadow: 0 1px 2px rgba(0,0,0,.1); } .comment-list #respond { margin: -2em -16px 1.5em 0; width: auto; background: #fcdf9a; border-width: 1px 0 1px 1px; border-style: solid; border-color: #eac56c; } #respond fieldset { padding-top: 1em; } #respond legend { color: #8c0d0b; } #respond .self { position: absolute; right: -7em; top: 1em; height: 2em; width: 5.75em; padding-left: 1.25em; color: #7d796a; background: url("img/comment-stem.png") 0 0 no-repeat; font: 150% Helvetica, Arial, sans-serif; } #respond .self small { font-size: 50%; } .comment-list #respond .self { background-image: url("img/nested-comment-stem.png"); } #respond li { margin-bottom: .75em; width: 100%; float: left; } #respond label { width: 7em; float: left; font: .875em Helvetica, Arial, sans-serif; } #respond label abbr { color: #8e0c03; border: 0; } #respond .note { display: block; font-size: .857em; color: #c39e5d; } #respond input { width: 320px; font-size: .857em; } #respond textarea { width: 98%; } #respond #submit { padding: .2em 10px; background: #e34d01 url("img/button-bg.png") 0 -90px repeat-x; border: 1px solid #e54e01; -moz-border-radius: .5em; -webkit-border-radius: .5em; border-radius: .5em; color: #fef8f2; text-decoration: none; outline: none; display: block; text-align: center; font: bold 100% Helvetica, Arial, sans-serif; text-shadow: -1px -1px 0 rgba(0,0,0,0.25); -moz-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.25); -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.25); box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.25); } #respond #submit:hover, #respond #submit:focus { background-position: 0 -290px; color: #fff; cursor: pointer; } #respond .commentrules { font-size: 0.85em; } #cancel-comment-reply { position: absolute; right: 14px; top: 1em; font: .75em Helvetica, Arial, sans-serif; } #cancel-comment-reply a { padding: 3px 22px 3px 5px; background: #eee url("img/btn-close.png") 100% 0 no-repeat; text-decoration: none; border: 1px solid #ccc; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } #cancel-comment-reply a:hover, #cancel-comment-reply a:focus, #cancel-comment-reply a:active { background-position: 100% -50px; } /* =Pagination *********/ .pages { margin: 1.6em 0; padding-top: 1em; border-top: 1px solid #fddecc; font: .875em Helvetica, Arial, sans-serif; } .pages b { font-weight: bold; padding: 2px 6px; border: 1px solid #e08136; background: #ed8a3d; color: #fff; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .pages a:link b, .pages a:visited b { text-decoration: none; background: #fff; color: #cb461b; } .pages a:hover b, .pages a:focus b, .pages a:active b { background: #ed8a3d; color: #fff; text-decoration: none; } /* =Footer *********/ #site-info { clear: both; width: 100%; padding: 1em 0 2em; color: #736857; border-top: 2px solid #cb461b; background: #fbf3d4 url("img/bg-foot.png") repeat-x; text-shadow: 1px 1px 0 rgba(255,255,255,0.125); } #site-info p, #site-info ul { font-size: .875em; margin: 0 0 0 320px; width: 672px; } #site-info li { display: inline; margin-right: 1em; } #site-info #copyright { margin-top: .5em; } #site-info :link, #site-info :visited { color: #d26b3b; } #site-info :link:hover, #site-info :visited:hover, #site-info :link:focus, #site-info :visited:focus, #site-info :link:active, #site-info :visited:active { color: #8c0d0b; } /* =SurveyGizmo *********/ #content .entry-content.survey .sg-body { margin-top: -1.5em; } #content .sg-wrapper { width: auto; } #content .sg-wrapper img, #content .sg-powered-by img { left: auto; padding: 0; border: 0; background-color: transparent; } #content .sg-title { margin: 0 0 .25em; font: 1.3125em/1.2 Calibri, Helvetica, Arial, sans-serif; } /* 1.3125 * 16px = 21px */ #content .sg-header, #content .sg-content, #content .sg-question, #content .sg-question-options { padding: 0; border: 0; } #content .sg-progress-bar-text { font: .875em/1.3 Helvetica, Arial, sans-serif; }