/* Violet Brain Typographic Basics:

This file is created to go alongside the Violet Brain Grid system. 
It is math coded for linehieght and beautiful text and page formatting.
The reader should be able to flow down the page very fluid.

*/

/* formatting for all text in the website */

body {
	font-size: 100%; 
	font-family: Tahoma, "Arial Black", Arial, sans-serif;
	color: #333;
}

html>body {
	font-size: 16px; /* 16px x 1.5em Linehight = 24px for total line - 16px for font =  8 px of spacing */
}

p {
	line-height: 1.5em; 
}

/* formatting for spacing to keep line flow */

p {
	font-size: 1em;  /* 1.0em x16=16px */
	margin-top: 1em; /*1.5em x 16 = 24px of line space. which matches our above line space */
	margin-bottom: 0.75em;
}

p.small {
	font-size: 0.875em; /* 14px = 14/16= .875em */
	line-height: 1.714em; /* 24/14 = 1.714 em */
	margin-top: 2.571em;
	margin-bottom: 0.857;
	}

/* formatting for headings to keep line flow */

h1 {
	font-size: 1.625em; /* want 26px text for heading 1 which is 26/16 = 1.625em */
	line-height: 0.923em; /* 24/26= .6667em */
	margin-top: 0; 
	margin-bottom: 0.4615em; /* half the size of our line height for a-symlines */
	}
	
h2 {
	font-size: 1.375em; /* want 22px text for heading 2 which is 22/16 = 1.375em */
	line-height: 1.0909em; /* 24px(our set height) divided by our wanted text size 22(1.375em) for h1 = 1.0909EM's */
	margin-top: 0;  /* 1.5 x the lineheight for a-symlines */
	margin-bottom: 0.5455em; /* again the same thing as above. */
	}
	
h3 {
	font-size: 1.25em; /* want 20px text for heading 3 which is 20/16 = 1.25em */
	line-height: 1.2em; /* 24px/20= 1.2em */
	margin-top: 0;
	margin-bottom: 0.6em;
	}
	
h4 {
	font-size: 1.125em; /* want 18px text for heading 4 which is 18/16 = 1.125em */
	line-height: 1.3333em; /*24px/18(fontsize) = 1.3333em */
	margin-top: 0;
	margin-bottom: 0.65em;
	}
	
li {
	line-height: 1.2em;
	}