/*
* Version 1.6 (2008-11-21) By Ryan Haugh
*
* DESCRIPTION:
* - The goal of this CSS document is normalize all browser quirks so that styling webpages goes a lot more smoothly.
*
* IMPLEMENTATION:
* - All HTML documents must start with:
*
* - This must be the first CSS file listed. This will allow other CSS files to overwrite styles that are declared here.
* The best practices implentation is:
* 1. Include this file
* 2. Include all W3 validated stylesheets
* 3. Include an IE-hacked stylesheet to fix any IE anomolies (such as the png issues)
*
*
* RULES:
* - If you want to set the style for every instance of an element use the 'element {}' (eg: 'h1 { font-weight:bold; }' - now all h1 elements will be bold) CSS declaration.
*
* - If you are going to use the same style definition more than once us a class. This will cut down on the amount of redundancy in the CSS code.
*
* - If you only want to use a style once then stylize the ID (eg: '#myId { font-color:#ff0000; }').
*
* - Calling two classes is allowed. This allows you to create two general classes that will sometimes be used separately (eg: .
*
* - Do not stylize the actual 'input' element. Until all browsers accept attributes in CSS (eg: 'input[type="checkbox"]') there is no way to differentiate between the different input types. Best practice is to add a class to the input element.
*
* - Encapsulate your styles by declaring the whole path to that style. This will prevent styles from bleeding into other styles.
* For example:
*
*
*
This is path one
* Some text
*
*
*
*
*
*
This is path two
* Some text
*
*
*
*
* HELP:
* - HOW TO HORIZONTALLY CENTER AN ELEMENT:
* - If the element to be centered is inline, use 'text-align:center;' on the containing element.
* For example:
*
* I am centered!
*
* - If the element to be centered is block, use 'margin:0px auto; width:??;' on the actual element.
* According to W3 specifications for block elements, if both 'margin-left' and 'margin-right' are 'auto', their computed values are equal.
* The width must be specified. If it is not then the width defaults to 100%, meaning the element will not be centered.
* For example:
*
*
* - HOW TO VERTICALLY CENTER AN ELEMENT:
* - If the element to be centered is inline, use 'line-height:??; vertical-align:middle;' on the containing element.
* For example:
*
* I am centered!
*
* - If the element to be centered is block, use 'position:relative;' on the containing element and 'position:absolute; top:50%; line-height:??; margin-top:-??/2;' on the actual element. margin-top must be line-height / 2.
* For example:
*
*
* - HOW TO CORRECTLY CLEAR FLOATS:
* - Whenever you use floats, the containing element does not acknowledge its childrens' heights. Therefore, the elements that follow the containing div aren't positioned correctly.
* For example:
*
*
* This is in the wrong spot!
*
*
* - To clear the floats, add 'overflow:auto|hidden|scroll; width:??' to the containing div.
* For example:
*
*
* This is in the correct spot!
*
*
* TROUBLESHOOTING:
* - [ALL] AN ELEMENT IS APPEARING DIFFERENTLY THAN HOW I DEFINED IT:
* - If you don't define a style for a particular class, it will use the value of its closest descendent that defined it.
* - To get rid of that style, simply explicitly define the style in the class that the element is using to reset it.
*
* - [ALL] THE 'WIDTH' STYLE DOESN'T CHANGE THE SIZE OF THE ELEMENT:
* - You can only specify a width for inline elements. If you need to specify a width, add 'display:block;' to the class.
*
* - [ALL] I'M USING THE STYLE 'RIGHT' BUT IT'S NOT APPEARING ON THE RIGHT SIDE:
* - Add the style 'left:auto;'. If the 'left' style was previously set in the one of the element's descendents, it will still have that value. It needs to be reset.
* - The same goes for the 'bottom' style - if 'top' is specified then 'bottom' will be ignored.
*
* - [IE6] I CAN'T GET THE HEIGHT OF MY ELEMENT TO GET SMALL ENOUGH:
* - In IE6 you need to explicitly add the styles 'font-size:0px; line-height:0px;' to the element whose height you are changing.
*
* - [IE6] MY PNG IMAGES HAVE BOXES AROUND THEM:
* - IE6 only supports png8. To make it support png24 you will have to use a hack:
* { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="", sizingMethod="scale"); }
* - Background images should add the class: 'background: none;'
*
* - [IE6] MY DIVS ARE DISPLAYED CORRECTLY IN OTHER BROWSERS BUT THEY DROP DOWN IN IE6:
* - Specify an explicit width (not a percent) for the div that is dropping down.
*
* - [IE6] MARGINS & PADDINGS ARE DOUBLE WHAT THEY SHOULD BE:
* - Add '* html { display:inline; }' to your CSS document (where can refer to an HTML tag, id or class). This line will only be read by IE6 but still allows for successful CSS validation.
*
* HISTORY:
* 1.6 (2008-11-21) - Set body's font size to 10px so that it is easy to us em's
* - Removed 'overflow:auto;' from normalization - it made things worse
*
* 1.5 (2008-10-07) - Added style to remove the outline around the inputs in Chrome & Safari
* - Added style to disable the textarea resize grip in Chrome & Safari
* - Hide disabled scrollbars in IE
*
* 1.4 (2008-08-29) - Added 'overflow:auto;' to normalization
* - Added the IE6 double margin/padding resolution
*
* 1.3 (2008-08-27) - Added the help section
*
* 1.2 (2008-08-19) - Added IE fixes for img and li
*
* 1.1 (2008-08-15) - Added FF fix to remove outline around active links
*
* 1.0 (2008-04-25) - Original document.
*/
/* Normalize all controls across all browsers */
a, body, div, form, h1, h2, h3, h4, h5, h6, hr, img, input, label, li, ol, optgroup, option, p, select, span, table, tbody, td, textarea, tfoot, th, thead, tr, ul { border:0px; margin:0px; padding:0px; position:relative; text-align:left; z-index:2; }
/*a, body, div, form, h1, h2, h3, h4, h5, h6, hr, img, input, label, li, ol, optgroup, option, p, select, span, textarea, ul { position:relative; }*/
/* Remove the dotted border around elements in FF */
:focus, a:hover, a:active { outline:none; }
/* Fixes an IE issue that causes whitespace to appear below images */
img { display:block; }
/* Fixes an IE issue that causes whitespace to appear below list items */
li { vertical-align:bottom; }
/* Create superscript and subscript styles. These classes will not alter the line height like the other ones */
span.sup { bottom:0.33em; font-size:smaller; vertical-align:baseline; }
span.sub { bottom:-0.25em; font-size:smaller; vertical-align:baseline; }
/* Scroll the background when the window is resized */
div.bg-scroll { background-repeat:no-repeat; background-position:50% 0; }
/* Remove the outline around the inputs in Chrome & Safari */
input, textarea { outline:none; }
/* Disable the textarea resize grip in Chrome & Safari */
textarea { resize:none; }
/* Hide disabled scrollbars in IE */
html { overflow:auto; }
/* Set the font size to 10px so that it is easy to use em's */
body, table { font-size:10px; }
/* Ensure that the cursor indicates that it is over a link in IE */
a span { cursor: pointer; }