Copying one CSS box..

[Norman]

I'm trying to re-do on my localpage this box: http://img520.imageshack.us/img520/3964/immaginemu0.jpghttps://addons.mozilla.org/it/firefox/On the Firefox page's source code, I've found this code:

<div id="feature1" class="addon featured main">		<h4 class="name"><a href="/it/firefox/addon/77"><img src="/en-US/firefox/images/addon_icon/77" width="32" height="32" alt="" class="icon"/>Sage</a></h4><h5 class="author">di <a href="/it/firefox/user/56"  class="profileLink">The Sage Team</a></h5><p class="preview-img"><a href="/it/firefox/addon/77"><img src="/en-US/firefox/images/addon_preview/77/1" alt="Anteprima immagine di Sage" title="Anteprima immagine di Sage"/></a></p><p class="desc">Sage is a lightweight RSS and Atom feed aggregator extension for Mozilla Firefox. It's got a lot of what you need and not much of what you don't...</p><p class="rating"><img src="/img//ratings/4stars.png" width="68" height="12" alt="" title="Voto 4 stelle su 5"/>  <a href="/it/firefox/addon/77#reviews">17 recensioni</a></p><p class="stats"><em>11284</em>download settimanali</p><p class="updated">	Aggiornato il 29 gennaio 2007</p><div id="install-29159" class="install-container">							<p class="install-button platform-ALL">			<a href="/it/firefox/downloads/file/378/sage-1.3.10-fx.xpi" id="installTrigger378" title="Aggiungi Sage a Firefox" addonName="Sage" addonIcon="/en-US/firefox/images/addon_icon/77" addonHash="sha1:39d0b2efe6339915bac8f98ed3f0bdf364e48e8f" onclick="return install(event,document.getElementById('installTrigger378').getAttribute('addonName'), document.getElementById('installTrigger378').getAttribute('addonIcon'), document.getElementById('installTrigger378').getAttribute('addonHash'));" ><span><span><span><strong>Scarica ora </strong></span></span></span></a>			</p>					<script type="text/javascript">		installVersusDownloadCheck("installTrigger378", "Aggiungi a Firefox ", "Scarica ora ");	</script>			</div>	<script type="text/javascript">setTimeout(function() {fixPlatformLinks('29159', document.getElementById('installTrigger378').getAttribute('addonName'));addCompatibilityHints('77', '29159', '1.0', '2.0.0.*', '', '');},0);</script><p class="more-from">Visualizza altri in <a href="/it/firefox/browse/type:1/cat:1" class="view">RSS, news e blog</a></p>		<div class="vex"><span><!-- bottom edge --></span></div>	</div>		<div id="secondaries">				<div id="feature2" class="addon featured sub">			<div class="irk">			<h4 class="name"><a href="/it/firefox/addon/6396"><img src="/en-US/firefox/images/addon_icon/6396" width="32" height="32" alt="" class="icon"/>Mahalo Share</a></h4><h5 class="author">di <a href="/it/firefox/user/2519"  class="profileLink">Christopher Finke</a>, <a href="/it/firefox/user/704619"  class="profileLink">Mahalo</a></h5><p class="preview-img"><a href="/it/firefox/addon/6396"><img src="/en-US/firefox/images/addon_preview/6396/1" alt="Anteprima immagine di Mahalo Share" title="Anteprima immagine di Mahalo Share"/></a></p><p class="desc">Easily share and recommend links across 12 different bookmarking and blogging services.</p><p class="rating"><img src="/img//ratings/5stars.png" width="68" height="12" alt="" title="Voto 5 stelle su 5"/>  <a href="/it/firefox/addon/6396#reviews">6 recensioni</a></p><p class="stats"><em>3903</em>download settimanali</p><p class="learn-more"><a href="/it/firefox/addon/6396"  class="view" title="Ulteriori informazioni su Mahalo Share">Dettagli</a></p>			</div>			<div class="vex"><span><!-- bottom edge --></span></div>		</div>

Then, this should be the entire code. Now, on my local test page.. I have edited it so:

<div id="feature1" class="addon featured main">		<h4>FaviconizeTab</h4><h5>di Kyosuke Takayama</h5><p>Test</p>  </div>

Now.. my question is this: where is located the CSS code for this box? I've try searching in these documents:

	<link rel="stylesheet" type="text/css" href="/css/type.css" media="all" />	<link rel="stylesheet" type="text/css" href="/css/remora.css" media="screen,projection" />	<link rel="stylesheet" type="text/css" href="/css/color.css" media="all" />	<link rel="stylesheet" type="text/css" href="/css/screen.css" media="screen,projection" />	<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />

And I have founded this:

#feature1 { float: left; }.addon { position: relative; min-height: 160px; padding: 18px 20px 10px; margin-bottom: 1.6em; }

But, where is the 'featured main' class(es)? Can you help me?

[newseed]

They could be redundants for the page you are on.

[Norman]

What does 'redundants' means?

[nhaskins]

in type.css

/* =Primary featured add-on */.main .name { font-size: 200%; }

in screen.css

/* =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; }

in ie.css

/* Conflicts with container padding in spite of being positioned out of normal flow. */.main .vex { width: 100%; position: static; padding: 0 20px 0 240px; margin: 0 -20px -10px -240px; }.main .vex span { position: relative; left: -240px; }

in ie6.css

/* Bottom edges - IE7 needs different rules than IE6 so we'll override the previous style sheets */.addon .vex { padding: 0; }.addon .vex span { margin-left: 0; }#addon-listing .addon .vex, #addon-summary .vex, .main .vex { padding: 0; }#addon-listing .addon .vex span, .main .vex span { margin-left: 0; }#addon-summary .vex span, .main .vex span { margin-left: 1px; }.sub .vex { padding: 0; left: 1px; }.sub .vex span { margin-left: 0; }.main .vex { width: 100%; position: absolute; padding: 0; margin: 0; }.main .vex span { position: relative; left: 0; }

and

/* Position and margin adjustments */.sub .irk, .addon .vex span { margin-left: 0; position: relative; left: -1px; }.main .vex span, #addon-listing .vex span { left: 0; }

and

/* Size and padding adjustements */#content { height: 800px; } /* acts like min-height */.addon { height: 170px; } /* acts like min-height */#page-title div { padding-left: 120px; }#content-extra { width: 29%; }#search-form { height: 54px; }#content #sidebar { width: 17.5%; }#categories.collapsed #cat-list a:active { width: 150px; }.main .vex, #addon-listing .addon .vex, #addon-summary .vex { padding-right: 261px; }

just open the css file in your browser and use the find dialog. I didn't see any .featured it probably isn't there.

[newseed]

What does 'redundants' means?

It probably has excess classes that are not being used or is not neccessary....at least for that particular page.

[Norman]

Thank you guys, but I don't understand how it is used and created.. I've trying it on my localhost but I get a brutal styled box. Could you please help me posting the right (simple) code and images that it uses? I can't understand and I can't reproduce it.