path: root/site/app/webroot/css/screen.css

/*----------------------------------------------------------------------------
Standards-Compliant Layout CSS file for Addons.mozilla.org
Created by Craig Cook - focalcurve.com
                on November 20, 2007
-----------------------------------------------------------------------------*/


/*** =Reset defaults ***/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }

/*** =General elements ***/
body { min-width: 770px; }

ol, ul { margin-left: 2em; }
blockquote { margin: 0 3em 1em; }
dd { margin-left: 2em; }
td, th { padding: 2px 6px; }

a.view { padding-right: 10px; }
button, input[type="submit"] { cursor: pointer; }

h2 { margin-bottom: .5em; }

div.error-notice { margin: 0; min-height: 48px; margin-bottom: 1.5em; padding: 10px 10px 0 70px; }

.with-js .hide-with-js { display: none }
.show-with-js { display: none }
.with-js .show-with-js { display: block }

/*** =Site-notice ***/
#site-notice { width: 80%; padding: 5px 10%; }

/*** =Access nav ***/
#nav-access { position: absolute; top: -10em; margin: 0 auto; width: 100%; }
#nav-access a:active, #nav-access a:focus { position: absolute; top: 11em; width: 18em; z-index: 2;}
.html-ltr #nav-access a:active, .html-ltr #nav-access a:focus { left: 50%;  margin-left: -8em;}
.html-rtl #nav-access a:active, .html-rtl #nav-access a:focus { right: 50%;  margin-right: -8em;}


/*** =Header ***/
#branding { position: relative; }

h4#moz { position: absolute; top: 10px; margin: 0; z-index: 1; }
.html-rtl h4#moz {left: 0px; }
.html-rtl h4#moz img {position: relative; left: -10px; }

h4#moz a { display: block; height: 44px; width: 100px; padding-left: 10px;}

/* =Page title */
#page-title { height: 13em; }

#page-title div { max-width: 900px; margin: 0 auto;}
.html-ltr #page-title div {padding: 25px 105px 0;}
.html-rtl #page-title div {position:relative; left:-70px; padding: 25px 0 0 0;}

#page-title h1 { position: relative; }
.html-ltr #page-title h1 {padding: 10px 0 5px 125px; }
.html-rtl #page-title h1 {padding: 10px 320px 5px 0; }

#page-title h1 img { position: absolute; top: 0; }
.html-ltr #page-title h1 img{left: 0;}
.html-rtl #page-title h1 img {right: 200px;}

#page-title h2 { position: relative; }
.html-ltr #page-title h2 { margin: -5px 0 5px 175px; }
.html-rtl #page-title h2 { margin: -5px 370px 5px 0; }

#page-title p.page-intro { margin-bottom: 0; width: 42em; max-width: 650px; }
.html-ltr #page-title p.page-intro {padding-left: 125px;}
.html-rtl #page-title p.page-intro {padding-right: 320px;}


/* =User nav */
#nav-user { max-width: 900px; min-width: 770px;}
.html-ltr #nav-user { margin: -1.75em auto 0; padding: 0 50px;}
.html-rtl #nav-user { margin: 0em auto 0; padding: 0 0 0 50px;}

#nav-user li { display: inline;}
.html-ltr #nav-user li { padding-left: 1em; margin-right: .5em; }
.html-rtl #nav-user li { padding-right: 1em; margin-left: .5em; }

.html-ltr #nav-user li:first-child { border-left: 0; padding-left: 0; }
.html-rtl #nav-user li:first-child { border-right: 0; padding-right: 0;}


/* =Other Applications */
#other-apps { position: absolute; top: -9.65em;  z-index: 5;} 
.html-ltr #other-apps {right: 50px; padding: 6px 10px 0; }
.html-rtl #other-apps {right: 50px; padding: 6px 10px 0; }

#other-apps.js { width: 12em; padding-bottom: 6px; }

#other-apps h3 { float: left; margin-right: 20px; }

#other-apps.js h3 { float: none; cursor: pointer; }
.html-ltr #other-apps.js h3 {margin: -6px -10px; padding: 6px 15px 6px 20px; }
.html-rtl #other-apps.js h3 {margin: -6px -10px; padding: 6px 15px 6px 20px; }

#nav-apps { margin-top: .1em; }
.html-ltr #nav-apps { margin-left: 0;}
.html-rtl #nav-apps { margin-right: 0;}

#nav-apps li { display: inline; }
.html-ltr #nav-apps li {  margin-right: 10px; }
.html-rtl #nav-apps li {  margin-left: 10px; }

#other-apps.js #nav-apps { margin-top: 1em; }
#other-apps.js #nav-apps li { display: block; margin-right: 0; }
.html-ltr #other-apps.js #nav-apps li { margin-right: 0; }
.html-rtl #other-apps.js #nav-apps li { margin-left: 0; }

#other-apps.js #nav-apps a { display: block; line-height: 35px; }
.html-ltr #other-apps.js #nav-apps a { padding-left: 40px; }
.html-rtl #other-apps.js #nav-apps a { padding-right: 40px; }

#other-apps.collapsed #nav-apps { position: absolute; }
.html-ltr #other-apps.collapsed #nav-apps { left: -999em; }
.html-rtl #other-apps.collapsed #nav-apps { right: -999em; }

#other-apps.collapsed #nav-apps a:active, #other-apps.collapsed #nav-apps a:focus { position: absolute; top: 0; }
.html-ltr #other-apps.collapsed #nav-apps a:active, .html-ltr #other-apps.collapsed #nav-apps a:focus { left: -999em; }
.html-rtl #other-apps.collapsed #nav-apps a:active, .html-rtl #other-apps.collapsed #nav-apps a:focus { right: -999em; }

/*** =Search form ***/
#search-element { position: relative; width: 80%;}
.html-ltr #search-element {left: 190px; }
.html-rtl #search-element {left: 0} 

#search-bubble-inner { height: 71px; margin:0; padding: 0; width: 6px; float: left; }
.html-ltr #standard-search { padding: 20px 4px 15px 14px;}
.html-rtl #standard-search { padding: 20px 20px 15px 4px;} 

#search-bubble-outer legend { display: none; }
#search-form ol { margin: 0; padding: 0; }
#search-form #search-query { width: 55%; }

#search-form #search-query label { display: none; } /* label is hidden by default when JS isn't available */

#search-form #search-query label { position: absolute;  top: 20px; }
.html-ltr #search-form #search-query label { left: 17px; padding: .2em 5px .2em 30px; }
.html-rtl #search-form #search-query label { right: 17px; padding: .2em 30px .2em 5px; }

#search-form #query { width: 42%;}  
.html-ltr #search-form #query {  padding: .2em 5px .2em 24px;}
.html-rtl #search-form #query {  padding: .2em 24px .2em 5px;}

#search-form #category { width: 36%; padding: .3em 0 .2em 0;  }
#search-form #category option { min-width: 14em; }

#search-form #my-submit { width:37px; height: 38px; border: 0px; margin-left: 9px; }

/*** =Advanced Search Form ***/
#advanced-search { margin: -2px 0 0 0; padding: .1in .25in 0 .25in; }
form.asclosed {display: none;}
#search-application { padding-bottom: .1in}
#advanced-search-toggle {position: relative; top:-2px}
.html-ltr #advanced-search-toggle {text-align: right;}
.html-rtl #advanced-search-toggle {text-align: left; direction: ltr;}
#advanced-search-toggle div { width:6px; height: 6px; float: left; }
#advanced-search-toggle #toggle-inner { padding-left: 3px;}
.html-ltr #advanced-search-toggle #toggle-outer { margin: 0 .25in .1in 0; padding-right: 4px;}
.html-ltr #advanced-search-toggle a { padding-right: .15in }
.html-rtl #advanced-search-toggle #toggle-outer { margin: 0 0 .1in .25in; padding-right: 4px;}
.html-rtl #advanced-search-toggle a { padding-left: .15in}

.html-ltr #search-application td {padding-right: .2in}
.html-rtl #search-application td {padding-left: .2in}
.html-rtl #advanced-search td { text-align: right;}

.html-ltr #search-platform {float: left;   margin-bottom: 1.5em; margin-right: 1in;}
.html-rtl #search-platform {float: right;  margin-bottom: 1.5em; margin-left: 1in;}

/*** =Footer ***/
#footer { position: relative; width: 100%; clear: both; padding: 1em 0;  min-width: 770px;}
#footer-lang-form { position: relative; max-width: 900px; min-width: 770px;}
.html-ltr #footer-lang-form {padding: 0 50px; margin: 0 auto;}
.html-rtl #footer-lang-form {padding: 0 0 0 50px; margin: 0 0;}

.html-ltr #footer-lang-form p { position: absolute; right: 50px; }
.html-rtl #footer-lang-form p { position: absolute; left: 50px; }

#footer-legal { max-width: 900px; margin: 0 auto; padding: 0 50px;  min-width: 770px;}
#copyright { margin-bottom: 0; }
#nav-legal li { display: inline; margin-right: .5em; }
#footer-disclaimer { margin-top: 1em; }

/*** =Content layout ***/
#content { clear: both; position: relative; padding: 1em 50px; max-width: 950px; margin: 0 auto 1em; min-width: 770px; min-height:1000px; }
#content-main { position: relative; margin-left: 190px; min-height: 50em; }
#content.main-page #content-main, 
#content.detail-page #content-main, 
#content.reviews-page #content-main, 
#content.versions-page #content-main { width: 60%; padding-right: 20%; }
#content-main.full { margin-left: 0; }
#content.detail-page #content-main.full, 
#content.reviews-page #content-main.full, 
#content.versions-page #content-main.full { width: 75%; padding-right: 25%; }
#secondaries .sub { width: 48%; }
#secondaries #feature3 { float: right; }
#secondaries #feature2 { float: left; }

#content #sidebar { position: absolute; left: 50px; top: 1em; width: 170px; }

/*** =Extra content ***/
#content-extra { position: absolute; right: 0; top: 0; width: 23%; }

#content-extra .extra { margin-bottom: .1em; padding: 5px 12px;}

#content-extra h3 { margin-bottom: .1em; }
.html-ltr #content-extra ul { margin: 0 0 0 10px;}
.html-rtl #content-extra ul { margin: 0 10px 0 0; }
#content-extra ul li {margin: 0; padding:0;}
#content-extra ul li span {font-size: 8pt;}
#content-extra p.view-all { margin-bottom: .5em; }
.html-rtl #content-extra p.view-all {margin-right: 4px}

/*** =Categories ***/
#categories { margin-bottom: 1em; position: relative; z-index: 5; }
#categories h3 { margin: 0 -1px; padding-left: 6px; }
#categories.collapsed h3 { padding-left: 18px; }
#categories h3 span { display: block; padding: 8px 4px; }

#categories, #categories.collapsed #cat-list { padding-bottom: 6px; }
#categories.collapsed h3 span { text-indent: 4px; padding-left: 0; }
#cat-list { margin-left: 0; }
#cat-list li { padding-right: 1px; }
#cat-list a, #cat-list span { display: block; padding: .5em 10px; }

#categories.collapsed h3 { cursor: pointer; }
#categories p { margin: 0 -1px -6px; padding: .6em 10px; }
#categories.collapsed #cat-list { position: absolute; left: -999em; top: -999em; }
.html-rtl #categories.collapsed #cat-list {position: absolute; left: 999em; top: -999em;}
#categories.collapsed #cat-list.visible { margin: 0 -1px; width: 100%; left: 0; top: 3.35em; height: auto; overflow: visible; z-index: 99; }
#categories.collapsed #cat-list a:active, #categories.collapsed #cat-list a:focus { position: absolute; left: 999em; top: 1002.4em; width: 85%; }
#categories.collapsed #cat-list.visible a:active, #categories.collapsed #cat-list.visible a:focus { position: static; width: auto; }

/*** =Content-main, general styles ***/
#content-main p, #content-main ul, #content-main ol { margin-bottom: 1.25em; }
#content-main li { margin-bottom: .5em; }
#content-main li ul, #content-main li ol { margin-left: 15px; }

/*** =Add-on boxes ***/
.addon { position: relative; min-height: 160px; padding: 18px 20px 10px; margin-bottom: 1.6em; }
.addon .vex { height: 10px; width: 100%; position: absolute; left: 0; bottom: 0;}
.addon .vex span { display: block; height: 10px; margin-left: -1px; width: 10px; float: left;}
.addon .name { padding-left: 44px; position: relative; }
.addon .name img { position: absolute; left: 0; }
.addon .author { margin: 0 0 1.25em 44px; }
.addon .preview-img { position: absolute; left: -1px; top: 0; padding: 18px 0 0 20px; width:200px; height:150px; overflow:hidden;}
.addon .flag { position: absolute; left: -1px; top: 0; padding: 5px 10px 3px 10px; z-index: 5; }
.addon .baseline img.faq {margin: 0 5px 0 0; float: left;}
.rec, .exp { min-height: 170px; }
.rec .preview-img, .exp .preview-img { padding: 2.5em 0 0 20px; }
.updated { font-size: 75%; color:#666; }

/* =Primary featured add-on */
.main { padding-left: 240px; min-height: 220px; }
.main .rating { position: absolute; left: 20px; top: 180px; width: 200px; }
.main .stats { position: absolute; left: 20px; top: 180px; width: 200px; margin-top: 2em; }

/* =Secondary featured add-ons */
.sub { position: relative; padding: 0; }
.sub .irk { margin-left: -1px; padding: 14px 20px 8px; margin-right: 4px; }
.sub .vex { padding: 0; left: 0; }
.sub .name { margin-bottom: 0; }
.sub .preview-img { position: static; padding: 0;}
.sub .rating { position: static; width: 40%; padding-right: 10%; float: left; }
.sub .rating img { display: block; }
.sub .more-from { clear: both; }

/* =Listing items */
#content-main #addon-listing { margin-left: 0; }
#addon-listing .addon { padding: 18px 240px 10px; margin-bottom: 1em; }
#addon-listing .preview-img { position: absolute; left: -1px; top: 0;}
#addon-listing .rating { display: inline; margin-right: 2em; }
#addon-listing .stats { display: inline; margin-right: 2em; }
#addon-listing .more { display: inline; margin: 0; padding: 0; }
#addon-listing .more li { display: inline; margin: 0 10px 0 0; padding: 0 15px 0 0; }
#addon-listing .desc { margin-top: .5em; }

/*** =Install button ***/
.install-button:after, .install-container:after {content:".";clear:both;display:block;visibility:hidden;height:0;overflow:hidden;} /* clear floats */
.install-button a { float: left; cursor: pointer; max-width: 290px;}
.install-button a * { display: block; float: left; position: relative; }
.install-button a span { padding: 0 0 0 6px; }
.install-button a span span { padding: 0 0 8px 0; }
.install-button a span span span { left: -6px; padding: 0 0 6px 0; }
.install-button a span span span strong { right: -6px; padding: 10px 45px 0 6px; }
.install-button a span span span strong img {padding: 0 6px 0 0;}

#addon-listing .install-container { position: absolute; right: 0; top: 20px; max-width: 180px; padding: 0 15px; }
#addon-listing .install-container .install-button { margin-bottom: .5em; float: right; }
#addon-listing .addon p.updated { position: absolute; right: 0; bottom: 5px; max-width: 180px; padding: 0 15px; }

#addon-listing .exp .exp-loggedout { float: right; }
#addon-listing .exp .exp-loggedout .install-button { float: none; }

.exp-loggedout { float: left; padding: 5px 5px 3px 8px; }
.exp-loggedout .install-button { margin-top: 3px; margin-right: -3px; }
#content-main .exp-loggedout p.install-button { margin-bottom: 0; }

/*** =Pitch ***/
.pitch { margin-bottom: 1em; padding: 10px; }
.pitch h3, .pitch p { margin-bottom: 1em; }
.html-rtl .pitch ul { padding-right: 15px;}
.pitch h3 img { float: left; margin: -4px 10px 0 0; }

/*** =Landing pages ***/
#recommended { padding: 0 1% 10px; width: 98%; float: left; margin-bottom: 1em; }
#recommended .addon { float: none; }

#content.wide #recommended .addon { width: 20%; padding-left: 26.5%; min-width: 100px; margin-bottom: 0; }
#content.wide #recommended .addon .preview-img { width: 45%; }
#content.wide #recommended #feature1 { float: left; }
#content.wide #recommended #feature2 { float: right; }

#content.landing #secondaries { float: left; }
#content.landing #secondaries .sub { float: left; width: 30.5%; margin-right: 2.5%; }
#content.landing-with-slider #secondaries .sub { float: left; width: 31.5%; margin-right: 2.5%; }
#content.landing-with-slider #secondaries #feature8 { margin-right: 0; }
#content.landing #secondaries .sub .irk { padding-top: 2.2em; }
#content.landing #secondaries .sub .vex { padding-top: 0; }
#content.landing #secondaries .exp .preview-img { padding: 0;}
#content.landing #secondaries .addon .preview-img { padding: 0; width:180px;}

#content.landing-with-slider #secondaries .sub { float: left; width: 31.5%; margin-right: 2.5%; }
#content.landing-with-slider #secondaries #feature8 { margin-right: 0; }

/* Without a recommended box */
#content.landing #secondaries { width: 77%; }
#content.landing #content-extra { width: 23%; }
#content.landing-with-slider #secondaries { width: 100%; }
#content.landing-with-slider #content-extra { width: 25%; position: absolute; top: 0; right: 0; }
#content.landing-with-slider #content-main { position: relative }
#content.landing-with-slider #recommended { float: none; position: relative; left: 0%; width: 71%; }
.html-rtl #content.landing-with-slider #recommended { float: left; }
#content.landing-with-slider #recommended #slider .item_set .addon { float: left; width: 308px; padding-left: 240px }
#content.landing-with-slider #recommended #slider { background-color: #fff; margin-bottom: 0 }

/* When there is a recommended box...
#content.landing #secondaries { width: 76%; padding-left: 1%; }
#content.landing #content-extra { width: 22%; margin-right: 1%; }
*/

#content.landing #content-extra { position: static; float: right; }
#content.landing-with-slider #content-extra { position: absolute; float: none; }
#content.landing.languages #content-extra { margin-right: 0; }
#content.landing .more-addons { margin: 0 0 1em; padding: 6px 10px 0; }

#content.landing.browse #secondaries { width: 50%; }
#content.landing.browse #secondaries .sub { width: 47%; }
#content.landing.browse #secondaries #feature4 { margin-right: 0; }
#content.landing.browse #content-extra { width: 47%; }
#content.browse .more-addons h3 a.view { display: inline; }

.browse-list { list-style: none; margin: 0; width: 100%; overflow: auto; }
.browse-list li { width: 48%; margin: 0 0 3px 1%; float: left; }
.browse-list a { display: block; padding: 3px 5px; }

#content.landing.languages .sub { width: 23.75%; margin-right: 2%; float: left; }
#content.landing.languages #feature3 { margin-right: 0; }

/*** =Dictionaries ***/
#dictionaries { margin-top: 1.5em; clear: both; padding: 10px 15px; }
#dictionaries table { width: 100%; }
#dictionaries th, #dictionaries td { padding: 6px 12px; }

/*** =Detail page ***/
#addon-summary { padding-left: 240px; min-height: 225px; }
#addon-summary .name { margin-bottom: 0; }
#addon-summary .preview-img { position: absolute; left: -1px; top: 0; padding: 18px 0 0 20px;}
#addon-summary.exp .preview-img, #addon-summary.rec .preview-img { padding-top: 2.5em; }
#addon-summary .rating img { display: block; }
#addon-summary .rating { position: absolute; left: 20px; top: 180px; width: 200px; }
#addon-summary .stats { position: absolute; left: 20px; top: 180px; width: 200px; margin-top: 3.5em; }

#addon-summary .link-sharing { position: absolute; left: 105px; /*padding-left: 25px; border-left: 1px solid #cecece;*/ top: 180px; font-size: 0.7em; }
#addon-summary .link-sharing .badge { } 
#addon-summary .link-sharing .badge .button {  display: block;color: #062445; background: #7cc11c url("../img/sprite.png?20081210") -800px -730px no-repeat;  }
#addon-summary .link-sharing .badge .button a { display: block; padding: 0 8px 8px 0; background: transparent url(../img/installbtn-edges.png) no-repeat scroll right bottom; }
#addon-summary .link-sharing .badge .button a span { display: block; text-align: center; font-weight: bold; padding: 2px 0 0 2px; background: transparent url(../img/installbtn-edges-list.png) no-repeat scroll left top; }

#addon-summary .link-sharing .share-button { padding: 0; margin: 0 }
#addon-summary .link-sharing .share-button:after, .install-container:after {content:".";clear:both;display:block;visibility:hidden;height:0;overflow:hidden;}
#addon-summary .link-sharing .share-button a { float: left; cursor: pointer; max-width: 290px; text-decoration: none; }
#addon-summary .link-sharing .share-button a * { display: block; float: left; position: relative; }
#addon-summary .link-sharing .share-button a span { padding: 0 0 0 6px; }
#addon-summary .link-sharing .share-button a span span { padding: 0 0 8px 0; }
#addon-summary .link-sharing .share-button a span span span { left: -6px; padding: 0 0 0 0; }
#addon-summary .link-sharing .share-button a span span span strong { width: 90px; text-align: center; right: -6px; padding: 0 18px 0 6px; }
#addon-summary .link-sharing .share-button a span span span strong img {padding: 0 6px 0 0;}

#addon-summary .link-sharing .share-button a { color: #062445; background: #7cc11c url("../img/sprite.png?20081210") -800px -730px no-repeat; }
#addon-summary .link-sharing .share-button a span { background: transparent url("../img/installbtn-edges.png") left bottom no-repeat; }
#addon-summary .link-sharing .share-button a span span { background: transparent url("../img/installbtn-edges.png") right bottom no-repeat; }
#addon-summary .link-sharing .share-button a span span span { background: transparent url("../img/installbtn-edges.png") left top no-repeat; }
#addon-summary .link-sharing .share-button a span span span strong { background: transparent url("../img/installbtn-edges.png") right top no-repeat; }

#addon-summary .link-sharing .share-button a:hover, .install-button a:focus, .install-button a:active { color: #0a3b73; background-color: #9dd34c; background-position: -800px -860px; }

#addon-summary .link-sharing .badge .counter { display: block; position: relative; padding-right: 4px; text-align: center; top: -4px; }

#addon-summary .link-sharing .choices { display: none; position: absolute; z-index: 999; left: -120px; top: 12px; width: 360px; background: transparent url(../img/box-pointer-top.png) center top no-repeat; padding-top: 12px; }
#addon-summary .link-sharing .choices div { margin: 0; padding: 1em; background-color: #f8f8f8; border: 1px solid #657b86; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }
#addon-summary .link-sharing .choices ul { list-style: none; margin: 0; }
#addon-summary .link-sharing .choices ul li { width: 50%; float: left; }
#addon-summary .link-sharing .choices ul li p { padding: 0.25em; margin: 0 0.25em 0 0 }
#addon-summary .link-sharing .choices ul li p a { font-weight: bold; display:block; height: 20px; text-decoration: none; padding-left: 22px; background: transparent url(../img/favicons/digg.gif) left top no-repeat }
#addon-summary .link-sharing .choices ul li.digg p a { background-image: url(../img/favicons/digg.gif); }
#addon-summary .link-sharing .choices ul li.facebook p a { background-image: url(../img/favicons/facebook.gif); }
#addon-summary .link-sharing .choices ul li.delicious p a { background-image: url(../img/favicons/delicious.gif); }
#addon-summary .link-sharing .choices ul li.myspace p a { background-image: url(../img/favicons/myspace.gif); }
#addon-summary .link-sharing .choices ul li.friendfeed p a { background-image: url(../img/favicons/friendfeed.gif); }
#addon-summary .link-sharing .choices ul li.reddit p a { background-image: url(../img/favicons/reddit.gif); }


.addon-cats { margin-left: 0; }
.addon-cats li { display: inline; padding-left: 1em; margin-right: .5em; }
.addon-cats li:first-child { padding-left: 0; }

#addon-info, #addon-advanced { padding: 8px 15px; margin-bottom: 1em; }
.html-ltr #addon_app_compatibility {position:relative; top: .6em; padding-left: 22em; font-weight:bold}
.html-rtl #addon_app_compatibility {position:relative; top: .6em; padding-right: 22em; font-weight:bold}
.html-ltr #addon-info .app_compat {float: left}
.html-rtl #addon-info .app_compat {float: right}
#addon-info h4 { font-size: 147%; }

.addon-images { margin: 1em auto 1.5em; }
.addon-images li { display: inline; margin-right: 10px;  }
.addon-images a img { margin-bottom: 10px; }

#addon-advanced { position: relative; }
#addon-advanced h5 { margin-top: 1em; }

/* =Reviews Page */
#content .addon-reviews { margin-left: 0; }
#content .addon-reviews blockquote { margin: 0; }
#content .addon-reviews li { padding: 8px 10px; }
#content .addon-reviews .cite { font-size: 95%; margin-bottom: 0; }

#content-extra ul.nav-addon { list-style: none; margin-left: 0; padding-left: 0; }

#content .review .others-by-user { font-style: italic; display: block; margin-top: 0.5em; font-size: 0.85em }
#content .review .others-by-user a { padding-left: 22px;  }
#content .review .others-by-user a.loading { background: transparent url(../img/ajax_loading.gif) no-repeat 2px top }

#content .others-by-user-load { padding-left: 3em; }

#content .review-reply { margin-left: 3em; }

#content .review p.flag-thanks, #content .review-reply p.flag-thanks { font-weight: bold }
#content .review form.flag, #content .review-reply form.flag { display: block; padding-bottom: 1em }
#content .review form.flag label, #content .review-reply form.flag label { display: block; font-weight: bold }

.with-js #content .review p.flag-thanks, .with-js #content .review-reply p.flag-thanks { display: inline }
.with-js #content .review form.flag, .with-js #content .review-reply form.flag { display: inline }
.with-js #content .review form.flag label, .with-js #content .review-reply form.flag label { display: none; }

#content .review .flag span.loading, #content .review-reply .flag span.loading { padding-left: 22px; background: transparent url(../img/ajax_loading.gif) no-repeat 2px top }

#content ul.review-flags { padding: 1em 1em 0.5em 1em; list-style-type: square }
#content ul.review-flags li { font-weight: bold; } 
#content ul.review-flags-notes { padding: 0.25em 0.5em; list-style-type: disc }
#content ul.review-flags-notes li { font-weight: normal; } 
#content ul.review-flags-notes .note { font-style: italic } 

/* =Version History Page */
#latest-version { width: 96%; float: left; margin-bottom: 1.5em; padding: 8px 2%; }
#latest-version h3 { float: left; }
#latest-version .install-button { float: right; margin-bottom: 0; }
#content .addon-versions { margin-left: 0; padding-left: 0; list-style: none; }
#content .addon-versions li { padding: 8px 10px 0; }
#content .addon-versions h3 { margin-bottom: .5em; }

/* For romanticized version - These rules will probably go away */
#content .version-details, #content .version-links { list-style: none; margin-left: 0; padding-left: 0; }
#content .version-details li, #content .version-links li { padding: 0; border: 0; }
#content .version-links li { margin-bottom: .25em; }
#content .version-details em, #content .version-links em { font-style: normal; color: #888; }

/* =Review miniform */
#form-review { position: relative; margin-bottom: 1em; padding: 10px; }
#form-review textarea { width: 98%; margin: 0 auto .5em; }
#form-review #review-submit { width: 100%; clear: both; margin-top: -1.5em; }
#form-review .disabled {background: #eee;}
#form-review h3 {display:inline;}
#form-review .login {display:inline; font-size: 92%;}
#form-review .login a:link, #form-review .login a:visited {text-decoration:none;}
.html-ltr #form-review #review-submit { float: left;}
.html-rtl #form-review #review-submit { float: right;}
.html-ltr #form-review #review-submit input { float: right; }
.html-rtl #form-review #review-submit input { float: left; }

/* =reCaptchas */
#recaptcha_image { margin: .5em 0; }

/* =Star rating */

#rate-it {
    margin-bottom: 1em;
}

#rate-it h4 {
    float:left;
    width: 6em;
    font-size: 110%;
}

.html-rtl #form-review #rate-it h4 { 
    float:right; 
}

#rate-it .stars {
    display:block;
    float:left;
    width: 90px;
    margin: 0.3em 0 0 0;
}

#form-review #rate-it .degrade {
    margin-left: 0;
    width: 145px;
}

#form-review #rate-it .degrade p {
    margin: .2em 0;
}

#rate-it .rating {
    cursor: pointer;
    margin: 2em;
    clear: both;
    display: block;
}
#rate-it .rating:after {
    content: '.';
    display: block;
    height: 0;
    width: 0;
    clear: both;
    visibility: hidden;
}

#long-review .stars {
    margin: 0;
}

#long-review .degrade {
    margin-left: 14em;
}

#long-review .stars p {
    margin: 0.2em 0;
}

#long-review .rating {
    margin: 1em 0;
}

/* =Base star styles*/
.stars input {
    margin: 0 4px;
}

.stars {
    zoom:1;
}

.stars .cancel,
.stars .star{
    float: left;
    width: 12px;
    height: 14px;
    overflow: hidden;
    text-indent: -999em;
    cursor: pointer;
}

.html-rtl .stars .star, 
.html-rtl .stars .cancel {
    float:right;
}

.stars .cancel a, 
.stars .cancel a {
    background: url(../img/ratings_images.gif) no-repeat;
}

.stars .star a, 
.stars .star a {
    background: url(../img/ratings_images.gif) no-repeat;
}
 
.stars.cancel a,
.stars .star a, 
.stars .cancel a, 
.stars .star a {
    display: block;
    width: 100%;
    height: 100%;
    background-position: 0 -25px;
    border:1 solid #FF0000; 
}

.stars .cancel a, 
.stars.cancel a {
    background-position: 0 2px;
}

.stars div.star_hover a,
.stars div.star_hover a {
    background-position: 0 -38px;
}

.stars div.cancel_on a, 
.stars div.cancel_on a {
    background-position: 0 -11px;
}

.stars div.star_on a, 
.stars div.star_on a {
    background-position: 0 -38px;
}

.stars:after {
    content:".";clear:both;display:block;visibility:hidden;height:0;overflow:hidden;
}

/* =More add-ons */
.more-addons { padding: 10px; }
.more-addons h3 a.view { display: block; padding-right: 30px; padding: .2em 30px .2em 0; }
.more-addons h4 { margin-top: 1.5em; }
#content.landing #content-extra .more-addons ul { margin-left: 0; }

/*** =Pagination ***/
.pagination { padding: 8px 10px 0; margin-top: 1em; }
.pages { margin: 0; float: left; }
.pages li { display: inline; margin: 0 2px; }
.pages a { padding: 3px 6px; }
.pages .current strong { padding: 3px 6px; }
.pages .prev a { padding-left: 15px; }
.pages .next a { padding-right: 15px; }
#content-main .pagination p.count { margin-bottom: 0; }
.pagination p.perpage em, .pagination .perpage a { margin: 0; }

/*** =Listing control bar ***/
#form-listcontrol { position: relative; margin-bottom: 1em; padding: 8px 20% 8px 18%; }
#form-listcontrol p, #form-listcontrol ul { margin: 0; }
#form-listcontrol #per-page { position: absolute; top: 8px; left: 10px; padding-top: 6px; }
#order-by li { display: inline; margin: 0 2px; }
#order-by button { cursor: pointer; padding: 8px 2px; width: 18.5%; }
#order-by button.current, #order-by button.current:hover { cursor: default; }
#form-listcontrol #experimental { position: absolute; top: 8px; right: 10px; width: 140px; }
#form-listcontrol #experimental label { display: block; cursor: pointer; padding: 4px 0 4px 30px; }
#form-listcontrol #experimental label input { position: absolute; left: 6px; top: 20%; }


/*** =Developer addon add agreement ***/
#developerAgreement ul { list-style-type: disc; margin-top: 5px;}

/*** =Thumbnail browser layout */
#thumb-subcategories { position: absolute; left: 50px; top: 7.125em; width: 170px; }
#thumb-subcategories ul { list-style-type: none; margin: 0; padding: 0; padding-bottom:6px; margin-bottom:1em; position:relative; }
#thumb-subcategories ul li { padding-right:1px; overflow: hidden; }
#thumb-subcategories ul li a, #thumb-subcategories ul li span { display: block; font-size: 95%; padding: .25em 10px; }

#thumb-subcategories a:link, #thumb-subcategories a:visited { text-decoration: none; }

#thumb-browser .thumbs { list-style-type:none; margin-left: 23%; }
#thumb-browser .thumbs li.thumb { position: relative; width: 170px; margin-right: 10px; display: inline; float: left; text-align: center; }
#thumb-browser .thumbs li.thumb div.wrapper { padding: 1.75em 9px 0px 9px; margin: 0 5px 0 0; }
#thumb-browser .thumbs li.thumb div.wrapper div.item { width: 150px; }

#thumb-browser .thumbs li.thumb div.img { border: 1px solid #ccc; background: #fff; height: 112px; overflow: hidden; }
#thumb-browser .thumbs li.thumb div.img img { width: 150px; }
#thumb-browser .thumbs li.thumb h3 { font-size: 115%; line-height: 115%; height: 2.25em; overflow: hidden; padding-top: 0.5em; margin-bottom: 0.5em; }
#thumb-browser .thumbs li.thumb .flag { position: absolute; top: 0; left: 0; padding: 0 6px; }
#thumb-browser .thumbs li.thumb p.meta { margin-bottom: 0; padding: 0; height: 3.5em; overflow: hidden; }
#thumb-browser .thumbs li.thumb .vex { text-align: left; height: 8px; }
#thumb-browser .thumbs li.thumb .vex span { display:block; height: 8px; margin-left:0px; }

#thumb-browser #form-listcontrol { margin-left: 20%; padding: 8px 12% 8px 15%; }
#thumb-browser #form-listcontrol #order-by button { white-space: nowrap; width: 16.5% }

#slider { margin-bottom: 18px; width: 100%; background:transparent url(../img/sprite.png?20081210) no-repeat scroll left -1256px; }
#slider .inner { background:transparent url(../img/sprite.png?20081210) no-repeat scroll right -1256px; width: 100%; }
#slider .viewport { position: relative; width: 100%; overflow: hidden; }
#slider .item_set { width: 6000px; }
#slider .item_set .addon { float: left; width: 308px; }
#slider .item_set li.addon { list-style: none; }
#slider .item_set .addon .preview-img { background: transparent url(../img/sprite.png?20081210) no-repeat 1px -1256px } 
#slider .item_set .addon { background: none; border-left: none } 
#slider .item_set .addon .install-container { height: 85px; }
#slider .item_set .addon .install-button { padding-top: 1.75em; padding-left: .5em; }
#slider .item_set .addon .exp-loggedout .install-button { padding-top: 0; padding-left: 0; }
#slider .item_set .addon .count { border-top:1px solid #CCCCCC; bottom:4px; height:35px; margin-left:-240px; position:absolute; }
#slider .controls { border-top: 1px solid #ccc; width: 100%; }
#slider .controls_inner { font-size: 140%; text-align: center; padding-top: 6px; border-left: 1px solid #ccc; border-right: 1px solid #ccc }
#slider .controls a { text-decoration: none; padding: 0 0.5em; }
#slider .controls a img { border: none; vertical-align: top }
#slider .vex { background: transparent url("../img/sprite.png?20081210") right bottom no-repeat; width: 100%; }
.html-rtl #slider .vex { direction: ltr; }
#slider .vex span { background: transparent url("../img/sprite.png?20081210") left bottom no-repeat; height: 10px; display: block; width: 10px; }

/** Collections normal view **/

#content .addon-listing .date-added {
    margin: 0;
    float: right;
}

#content .coll-addon .preview-img {
    margin: 0;
}

.collections .nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: right;
}

.collections .nav:after {
    float: left;
}

.collections .nav li {
    float: left;
    margin: 5px;
}

.collections .collections-web li.coll-addon {
    margin: 0;
}

/* bandwagon collections: interactive collections template */
.collections p.amo-plug {
    float: right;
    -moz-border-radius: 7px;
    border: 1px solid #d8dcdf;
    padding: 5px;
}

.collections #content-main h1 {
    font-size: 200%;
}

.collections .cat-name {
    margin-left: .3em;
}

.collections .cat-header h3 {
    background: transparent url(../img/fyf/triangle-right.png) scroll no-repeat left 5px;
    padding-left: 20px;
    margin-right: .4em;
}

.collections .cat-header.selected h3 {
    background: transparent url(../img/fyf/triangle-down.png) scroll no-repeat left 5px;
}

.collections #content-main .cat-header p {
    margin: 0;
    margin-left: 20px;
    padding-right: 5px;
}

.collections ul.addon-listing {
    padding: 0;
    margin: 0;
}

.collections ul.addon-install-listing {
    max-height: 30em;
    overflow: auto;
}

.collections li.list-addon:after,.collections .coll-addon .preview-img:after,.collections .nav:after,#collectionform:after {
    content: '.';
    clear: both;
    display: block;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}

.collections li.coll-addon {
    margin: .2em 2em .2em 2em;
    padding: .5em 0;
    border-top: 1px solid #ccc;
}

.collections li.inst-addon {
    margin: .5em 0;
    padding: .5em;
}

.collections .coll-addon .preview-img {
    max-width: 12em;
    float: left;
    clear: both;
}

.collections .coll-addon .preview-img img {
    float: left;
    clear: both;
    margin: .5em 1em 0 0;
    max-width: 12em;
    max-height: 9em;
}

.collections .list-addon h4 {
    color: #2d3b58;
    font-size: 140%;
}

.collections .inst-addon .desc h4 {
    width: auto;
    float: none;
}

.collections .list-addon .desc {
    width: 81%;
    margin: .2em 0 0 0;
    float: left;
}

.collections .list-addon img.icon {
    float: left;
    margin-right: .5em;
    vertical-align: middle;
}

.collections .inst-addon .desc {
    float: left;
    width: auto;
    margin: 0;
}

.collections .inst-addon .desc p {
    font-size: 90%;
    float: left;
}

.collections .coll-addon h4 a {
    text-decoration: none;
}

.collections .list-addon .add-button,.collections .coll-addon .done-box {
    -moz-border-radius: 7px;
    padding: 5px 10px;
    float: right;
}

.collections .list-addon .add-button,.collections .coll-addon .done-box {
    min-width: 160px;
}

.collections .list-addon .done-box {
    display: none;
    clear: right;
}

.collections .list-addon .add-button {
    background: transparent url(../img/installbtn-bg.png) repeat-x top left;
}

.collections .coll-addon .add-button {
    font-weight: bold;
}

.collections .inst-addon .add-button {
    margin: 1em 1em 0 2em;
    min-width: 15%;
}

.collections .add-button .add,.collections .add-button input {
    vertical-align: middle;
    cursor: pointer;
}

.collections .add-button .add {
    color: #062445;
}

.collections .add-button.upgrade {
    background: #fff;
    border: 1px solid #d8dcdf;
    font-size: 125%;
}

.collections #content-main .add-button p {
    margin: 0;
    font-weight: normal;
}

.collections .done-box {
    margin-top: .5em;
    border: 1px solid #d8dcdf;
}

.collections .installsubmit {
    margin: 1em 0;
    float: right;
}

.collections .installsubmit input {
    font-size: 120%;
    margin: 0 .5em;
}

.collections .faq {
    float: right;
    text-align: right;
}
/* jqModal base Styling courtesy of Brice Burgess <bhb@iceburg.net> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
    the Window's z-index value will be set to 3000 by default (via jqModal.js). */
.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');
}