/* —[ THE bn RESET ]— */
html, body {
	font-size: 10px;
	margin: 0;
	padding: 0;
	line-height: 1;
	
}
a{
	color:#C60;
	padding-bottom: 2px;
	text-decoration:none;
	border-bottom: 1px solid #C60;}

* {
	font-family:Helvetica,Arial,sans-serif;
	font-size: 1em;
	margin: 0;
	padding: 0;
	outline: 0;
	vertical-align: baseline;
}

img { border: none; display: block; }
ul, ol, li { list-style: none; }
:focus { outline: none; }
table, td, form, fieldset {
	border: none;
	border-collapse:
	collapse; border-spacing: 0;
}

/* —[ REUSABLE CLASSES ]— */
.hide { display: none; }
.right { float: right; }
.left { float: left; }
.current { cursor: default; }
.clear {
	clear: both;
	height: 0;
	margin: 0;
	padding: 0;
	line-height: 0;
	font-size: 1px;
	overflow: hidden;
}


/*The main question I always get at this point is why did I set the font size of the body and html tags to 10px, and then switch over to 1em for the universal selector. Well, two reasons: first, because different browsers have different default font sizes and while there are varying ways to handle this, for me the simplest is to reset the font size of my page down to 10px. Then I can use em settings — which is my measurement tool of choice for reasons I’ll not go into here — throughout my code, and I know that my starting numbers are always multiples of 10. So, for instance, if I want the font size of my h1 tags to be 18px, I just set them at 1.8em. Easy peasy. It should be noted here that there are some times this gets a bit confusing, since font sizes are inherited by child elements. For example, if I set the font size of the p tag to be 1.2em, and then the font size of the span tag to be 2em, and I put that span inside a p tag, what I end up with is a span with a font size of 24px (1.2em x 10px = 12px for the p, and 12px x 2em = 24px for the span). So keep that in mind.

The second reason why I do this is for scalability. If for some reason I need to adjust the font sizes of my project in any kind of universal way, these preset values of 10px and 1em can be adjusted and the changes will cascade down to the child elements. CSS is all about saving you from massive cut and paste jobs, so this is yet another great example.

Now, the next bit of code here covers a bunch of minor resets that are important but not things we want to apply universally. The easy one is removing borders from your images, but the others are often overlooked and very useful. The list (ul, ol, and li) elements are cleared out so I can use them however I like. I find it’s pretty rare that I show a real “bulleted list” anymore, or at least one without custom bullets or formatting, so why bother clearing it out each time. I clear that bitch out once and then put it back if I need it. The :focus pseudo-class is cleared out so you can steer clear of those stupid dotted outlines on links you click, and then comes the big daddy for me: table and form.

Tables and forms are the bane of most designers’ / coders’ existence to some degree because they just don’t behave dependably across browsers. Enter the border-collapse property. If you’re anything like me and you want your layouts to do what they’re told, even to the pixel, this is your best friend. Forms and tables (and their child elements like td and fieldset tags) have borders, even when you tell them not to. Even if you set a table’s property as border: 0, some browsers will still add in that damned extra pixel — albeit without any visually representation, just a space you can’t get rid of. This magical and wildly underused property clears out the problem and forces all browsers to hide the borders on these elements unless you explicitly tell them otherwise. That’s right… do as your told.

Finally, my reset includes a couple of fairly obvious but very handy classes that I use constantly. They’re pretty straightforward, so I’ll spare you the explanation, but keeping in mind that an element can be assigned multiple classes at once (like, for instance, <a class="right current">), these five preset classes will allow you to make your code dance without writing custom classes or added superfluous attributes to stuff you’ll only use once or twice.

CSS is all about extensibility… so use it the way it’s supposed to be used. Zero things out, ask them to do what you want, and set up classes that you can reuse constantly. Don’t reinvent the wheel, just borrow from us kind and generous souls who are happy to share the love and help bn reset your browser. Eric Meyer */