/*	WHAT?
		This file handles all the typography in a project. Why? Because keeping typography apart from design is vital. So what should go in here?
			Colors
			Top and Bottom Margins / Paddings / Borders
			Font Sizes, Families, Weights

	CHANGELOG
		27-02-2008	Maykel;			Cross-referenced with blueprint CSS.
									Commented a lot.
									Made stuff work better.
										
		02-04-2008	Maykel;			Merged from different projects
		23-04-2008 	Maykel; 		Added better structure and comments to the file.
									Document is now based on a 20 pixel grid, this is easiest for calculation.
									Line Heights will then be 20px, 40px, 60px etc.
									If necessary and properly calculated, line heights can be a multiple of 10px.
*/

/*	----------------------------------------
	Base Font
	---------------------------------------- */

body, input, textarea, button, select {
	font-family: Arial, Helvetica, sans-serif;
}

pre,code    { white-space: pre; }
pre,code,tt { font-family: 'andale mono', 'lucida console', monospace;} 

/*	Exception: HTML and BODY 
	Making the base font 12px, and dark grey on white.
*/
body { 
	font-size: 75%;
	color: #222; 
	background: #fff;
}

/*	----------------------------------------
	HTML Elements
	---------------------------------------- */

/*	Links */
a:focus, 
a:hover     { color: #000; }
a           { color: #009; text-decoration: underline; }

/* 	Line Heights */
table, label, li, p, dt, dd {
	line-height: 20px;
}

/*	Font sizes of 'common' elements */
p, table, ul, ol, dl {
	margin: 0 0 20px;
	padding: 0;
}

/*	-------------------------------------------------------
	Headings
	If you want custom headings, overrule them further down
	------------------------------------------------------- */
	
/*	Based on 20px grid height */
h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 20px; }
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }

h1, h2, h3 {
	line-height: 40px;
	margin-bottom: 0px;
	
	font-weight: bold;
	letter-spacing: -1px;
}

h1 {
	font-size: 36px;
}

h2 {
	font-size: 28px;

	margin-bottom: 20px;
}

h3 {
	font-size: 22px;
	
	line-height: 20px;
	margin-bottom: 20px;
}

h4 {
	font-size: 18px;
}

h5 {
	font-size: 15px;
}


/*	----------------------------------------
	Forms & Inputs
	---------------------------------------- */

form dt,
label {
 	font-size: 1em;
}

select,
input {
	line-height: 1.5em;
	font-size: 1em;
}

textarea {
	font-size: 0.92em;
}


/*	----------------------------------------
	Other Elements
	---------------------------------------- */

em, dfn, tfoot, q,
blockquote	{ font-style: italic; }
dfn			{ font-weight: bold; }
sup, sub	{ line-height: 0; }

strong {
	font:inherit;
	font-weight:bold;
}
	
/*	-----------------------------------------------
	How Handy! (quickly reduce/increase font size!)
	----------------------------------------------- */

.mute 		{ font-size: 0.84em !important; }
.whisper 	{ font-size: 0.92em !important; }
.loud  		{ font-size: 1.08em !important; }
.shout 		{ font-size: 1.16em !important; }