/*
	Typography ~ Blender CSS.
	Typography style sheet
	
	Thanks to Mark Boulton for the ratios to correctly indicate font size hierarchy.
	
	Given a 12px font as body copy and the baseline for the sites the sites Typography will work aas follows:
	50%(6px), 66%(8px), 75%(9px), 83%(10px), 91%(11px), 116%(14px), 150%(20px), 200%(24px), 250%(30px), 300%(36px), 400%(48px), 500%(60px), 600%(72px)
	
	or...
	
	You can set the base to be 10px and use EMs to set your font size. So that would be:
	
	body {font-size:62.5%} This gives you a font base of roughly 10px.
	
	This now make everything divisable by 10. so:
	.6em(6px), .8em(8px), .9em(9px), 1.1em(11px), 1.2em(12px), 1.4em(14px), 1.8em(20px), 2.4em(px), 3em(30px), 3.6em(36px), 4.8em(48px), 6em(60px), 7.2em(72px)
		
	Feel free to change based on your ultimate goals.
	
	Or... you can just use pixels ;-)
	
*/

/* =Typography
----------------------------------------------------------------------------*/
body {
    font-size:14px;
    font-family:"Lucida Grande", Helvetica, Arial, sans-serif;
}

/* =Baseline Grid
----------------------------------------------------------------------------*/
p {
    margin-bottom:20px;
    line-height:20px;
}

h1, h2, h3 {
    letter-spacing:-1px;
}

h1 {
    font-size:30px;
    line-height:40px;
    margin-bottom:20px;
    font-weight:normal;
}

h2 {
    font-size:24px;
    line-height:30px;
    margin-bottom:20px;
    font-weight:normal;
}

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

h4 {
    font-size:18px;
    line-height:20px;
    margin-bottom:20px;
    font-weight:normal;
}

h5 {
    font-size:inherit;
}

li {
    margin:0;
    padding:0;
    line-height:20px;
}

ul {
    list-style:disc;
}

ol {
    list-style:decimal;
}

li, dt, dd {
    margin:0;
    padding:0;
    line-height:20px;
}

p,
dl,
hr,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
ul,
pre,
table,
address,
fieldset {
    margin:0 0 20px 0;
}

a:focus {
	outline: 1px dotted invert;
}

/* =General
----------------------------------------------------------------------------*/
.pageTitle {
    color:#156438;
    font-size:24px;
    font-weight:bold;
    line-height:30px;
}

a {
    color:#1961B3;
    text-decoration:none;
}

a:visited {
    color:#118B51;
}

a:hover {
    color:#2BD884;
}

.sidebarNav .trigger {
    font-size:14px;
}

#slogan h3 {
    text-align:center;
    margin:0;
    padding:0;
    line-height:40px;
    text-transform:uppercase;
    font-weight:normal;
}

#sidebarBlock a, #footerNav a {
    color:#156438;
    text-decoration:none;
}

#sidebarBlock a:hover, #footerNav a:hover {
    color:#2BD884;
}

#logoBlock {
    width:236px;
    height:142px;
    position:absolute;
    top:60px;
    left:50px;
    background:url(../img/logo.png) top left no-repeat;
}

#news a {
    color:#fff;
    text-decoration:none;
}

#news a:hover {
    color:#2BD884;
}

#contentBlock ul {
    margin-left:15px;
}

#contentBlock ol {
    margin-left:20px;
}

#home h2 {
    font-size:18px;
    line-height:20px;
}

.production {
    font-size:10px;
    text-align:center;
}

.registerBlock {
    margin:40px 0;
}

.registerButton, .registerButton:visited {
    background:#156438;
    color:#fff;
    padding:4px 10px;
    font-size:24px;
    font-weight:bold;
    margin:10px 0;
}

.registerButton:hover {
    background:#DEF86A;
    color:#156438;
}

#your_story {
    font-size:12px;
}

#sidebar #your_story h3 {
    font-size:14px;
    margin-bottom:0;
}