/*--------------------------------------------------

BASE CSS

This contains globally used, default styling for 
the basic HTML components; this acts like a reset 
stylesheet. It also contains externally required 
CSS such as SIFR.

--------------------------------------------------*/

/* Palette - common Hex values
--------------------------------------------------
	Text: #000
	Link: #000
*/


/* Font
--------------------------------------------------
	Base font size: 16px

	Elements font size: 11px

	Font size we want DIVIDE BY parent font size EQUALS font size in ems
	11px / 16px = 0.6875em
	
	Reset for nested elements and margins.
	11px / 11px = 1em;

	Or else it would become too small.
	0.6875em * 0.6875em = 0.47265625em


	Example--------------------------------------

	
		<p>Text</p>
	

	The  is 16px, so the <p> will be 16px.
	We want the <p> font size to be 12px.
	So 12px / 16px = 0.75em


	Example--------------------------------------

	Now add in a <ul>

	
		<p>Text</p>
		<ul>
			<li>Text</li>
			<li>
				<p>Text</p>
			</li>
		</ul>
	</ul>

	The  is 16px, so the <li> will be 16px.
	We want the <li> text to be 12px.
	So 12px / 16px = 0.75em

	If we have set the p tag to have a default 
	size of 12px:
	12px / 16px = 0.75em
	p {
		font-size: 0.75em;
	}

	The <p> tag outside the <li> has the correct
	font size but when it's nested inside the <li> the
	font sizes are compounded. This means that the 
	nested element (<p>) will have it's font size 
	multiplied by it's parent element (li). So the 
	font size calculation will be:
	0.75 * 0.75 = 0.5625em
	<p>  * <li>

	That is too small - we want the <p> inside the
	<li> to be 12px too.

	We need to set a size of 0.75em.
	12px / 12px = 1em
	<p>  / <li>

	1em * 0.75em = 0.75em
*/

/* Hierarchy - preferable way to order CSS
--------------------------------------------------
selector1, 
selector2,
selector3 {
	margin: 0;
	border: 0;
	padding: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: visible;
	position: static;
	z-index: 0;
	float: none;
	clear: none;
	font: inherit;
	line-height: 0;
	text-indent: 0;
	background: none;
	list-style-type: none;
}

All CSS can be compressed for a live site so 
readability is the most important factor here.

/* Includes
--------------------------------------------------*/
@import url(layout.css);
@import url(components.css);
@import url(content.css);
@import url(development.css);
@import url(ui.css);


/* Elements
--------------------------------------------------*/
html {
	border: 0; /* WIE6 : Removes 2 pixel border ie WIE standards mode */
}
body {
	margin: 0; 
	padding: 0; 
	text-align: center;
	font-family: "lucida grande", Tahoma, Verdana, Arial, sans-serif;
	font-size : 100.1%; /*@ OP : Percentage to avoid IE ems bugs and .1 for older Opera versions */
	line-height: 1;
	color: #666;
	background: url(../../assets/media/images/global/bg.jpg) repeat 0 0;
	overflow: -moz-scrollbars-vertical !important; /* FF : Prevent page jumping between non/scrolling pages */
}
h1 {
	font-size: 1.9375em; /* 31px / 16px */
	margin: 0 0 0.27em;
	padding: 0;
	color: Black;
}

h2 {
	font-size: 1.625em;  /* 26px / 16px */
	margin: 0 0 0.4em;
	padding: 0;
	color: black;
}

#aside h2,
#tab-container h2 {
	font-size: 1.3125em; 
}

#aside h2 {
	color: #FFF;
}

#tab-container h2 {
	color: #FFF;
}

h3 {
	font-size: 1.3125em;  /* 21px / 16px */
	margin: 0 0 0.5em;
	padding: 0;
	color: Black;
}
h4 {
	font-size: 1em;  /* 16px / 16px */
	margin: 0 0 0.5em;
	padding: 0;
}
h5 {
	font-size: 1em;  /* 16px / 16px */
	margin: 0 0 0.2em;
	padding: 0;
}

#tab-container h5 {
	color: #FFF;
}

h6 {
	font-size: 0.8em;  /* 16px / 16px */
	margin: 0 0 0.5em;
	padding: 0;
}
img {
	vertical-align: bottom; /*@ WIE : stops images aligning to baseline, so they line with bottom of parent element */
	border: none; 
	margin: 0; /*@ WIE : image margin reset bug */
}
input, select, textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.6875em; /* 11px / 16px */
}
p input,
li input, li select, li textarea,
dd input, dd select, dd textarea {
	font-size: 1em; /* 11px / 11px */
}
a:link {
	color: #fff;
	text-decoration: none;
}
a:visited {
	color: #fff;
	text-decoration: none;
}
a:hover {
	color: #FFF;
}
a:active {
	color: #fff;
	text-decoration: none;
}
ul, ol {				
	margin: 0 0 1.2727em 2.2727em; /* 14px / 11px | 25px / 11px */
	padding: 0;
}
li {
	font-size: 0.6875em; /* 11px / 16px */
	padding: 0;
	margin: 0;
	line-height: 1.2727em; /* 14px / 11px */
}
li li,
li p,
li dl,
dd p,
dd li,
dl label,
dl input,
ul label,
ul input {
	font-size: 1em; /* 11px / 11px */
}
p, dl {
	margin: 0 0 0.75em; /* 14px / 11px */
	padding: 0;
	line-height: 1.2727em; /* 14px / 11px */
	font-size: 0.6875em; /* 11px / 16px */
	color:#666666;
}	
dd, dt, form, fieldset {
	border:0;
	margin: 0;
	padding: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 0.6875em; /* 11px / 16px */
	line-height: 1.2727em; /* 14px / 11px */
}
th, td {
	padding: 0;
	text-align: left;
}
label {
	font-size: 0.6875em; /* 11px / 16px */
}


/* Accessibility
--------------------------------------------------*/
.longdesc,
.access,
caption,
legend { /* Place selectors here as required to hide something for accessibility reasons */
	position: absolute;
	left: -999em;
	/* These are for older browsers */
	height: 0;
	width: 0;
	margin: 0;
	padding: 0;
	font-size: 0;
	overflow: hidden;
}

ul#access-nav, 
ul#access-nav li {
	padding: 0; 
	margin:0; 
	list-style: none;
	display:inline;
}
#access-nav a:link, 
#access-nav a:visited {
	width: 0; 
	height: 0;
	float: left; 
	overflow: hidden; 
}
#access-nav a:active, 
#access-nav a:focus {
	width: auto; 
	height: auto;
	position:absolute; 
	left: 0;
	top: 0;
	z-index:10000; 
	overflow: visible; 
	background-color: #FFF;
	padding: 5px;
}


/* Helper
--------------------------------------------------*/
.clear:after { /* Do NOT use this class, add a selector here */
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
* html .clear {
	height: 1%;
}