// Typography
// 
// This is the base of all the font elements for Edna.
// 
// Styleguide 26

// Headings
//
// Markup:
// <h{{modifier_class}} class="heading">H{{modifier_class}} Heading</h{{modifier_class}}>
// 
// 1			- H1
// 2			- H2
// 3			- H3
// 4			- H4
// 5			- H5
// 6			- H6
//
// Styleguide 26.1

// Paragraph
//
// Markup:
// <p class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem lectus, pellentesque in metus molestie, adipiscing tincidunt erat. Curabitur a nibh nunc. Vestibulum dignissim vulputate tortor at mattis. Vivamus ut odio nunc. Duis a aliquet ante. Suspendisse porta eu sem eu adipiscing. Ut tempus eleifend turpis vel viverra. Duis nulla lacus, ultricies sed blandit cursus, sollicitudin id felis.</p>
//
// Styleguide 26.2

// Anchor
//
// Markup:
// <a class="txt-link" href="#">Click me!</a>
// 
// .visited           - Keyboard focus state
// .hover             - Keyboard focus state
// .focus             - Keyboard focus state
// .active            - Keyboard focus state
// 
// Styleguide 26.3

// Blockquote
//
// Markup:
// <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem lectus, pellentesque in metus molestie, adipiscing tincidunt erat. Curabitur a nibh nunc. Vestibulum dignissim vulputate tortor at mattis. Vivamus ut odio nunc. Duis a aliquet ante. Suspendisse porta eu sem eu adipiscing. Ut tempus eleifend turpis vel viverra. Duis nulla lacus, ultricies sed blandit cursus, sollicitudin id felis.</p>
// <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem lectus, pellentesque in metus molestie, adipiscing tincidunt erat. Curabitur a nibh nunc. Vestibulum dignissim vulputate tortor at mattis. Vivamus ut odio nunc. Duis a aliquet ante. Suspendisse porta eu sem eu adipiscing. Ut tempus eleifend turpis vel viverra. Duis nulla lacus, ultricies sed blandit cursus, sollicitudin id felis.</blockquote>
// <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem lectus, pellentesque in metus molestie, adipiscing tincidunt erat. Curabitur a nibh nunc. Vestibulum dignissim vulputate tortor at mattis. Vivamus ut odio nunc. Duis a aliquet ante. Suspendisse porta eu sem eu adipiscing. Ut tempus eleifend turpis vel viverra. Duis nulla lacus, ultricies sed blandit cursus, sollicitudin id felis.</p>
// 
// Styleguide 26.4

// Strong & Em
//
// Markup:
// <p><{{modifier_class}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem lectus, pellentesque in metus molestie, adipiscing tincidunt erat. Curabitur a nibh nunc. Vestibulum dignissim vulputate tortor at mattis. Vivamus ut odio nunc. Duis a aliquet ante. Suspendisse porta eu sem eu adipiscing. Ut tempus eleifend turpis vel viverra. Duis nulla lacus, ultricies sed blandit cursus, sollicitudin id felis.</{{modifier_class}}></p>
//
// strong		- Strong
// em			- Em
//
// Styleguide 26.5

// Sup & Sub
//
// Markup:
// <p>Lorem <{{modifier_class}}>ipsum dolor sit amet, consectetur adipiscing elit</{{modifier_class}}>. Donec hendrerit, justo eu aliquet imperdiet, odio tortor pellentesque eros, a porta arcu tortor ac orci. Nullam non purus lobortis, hendrerit mauris quis, condimentum orci.</p>
//
// sup			- Sup
// sub			- Sub
//
// Styleguide 26.6

// Pre & Code
//
// Markup:
// <{{modifier_class}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, justo eu aliquet imperdiet, odio tortor pellentesque eros, a porta arcu tortor ac orci. Nullam non purus lobortis, hendrerit mauris quis, condimentum orci.</{{modifier_class}}>
//
// pre			- Pre
// code			- Code
//
// Styleguide 26.7

html & {
	font-size: @font-size; // set base font to 10
}

body & {
	color: @font-color;

	.fontfamily(sans);
	.fontsize(1.6);
}

p,
.txt {
	margin: 0 0 20px;

	line-height: @p-line-height;
	color: @p-color;

	.fontsize(@p-size);
	&:last-child {
		margin-bottom: 0;
	}
}

a,
.txt-link {
	color: @link-color;
	text-decoration: none;
	&:visited {
		color: @link-color-visited;
	}
	&:hover {
		color: @link-color-hover;
		text-decoration: @link-decoration-hover;
	}
	&:focus {
		color: @link-color-focus;
		text-decoration: @link-decoration-focus;
	}
	&:active {
		color: @link-color-active;
		text-decoration: @link-decoration-active;
	}
}

b,
strong {
	font-weight: bold;
	color: @font-color-strong;
}

em {
	font-style: italic;
}

sup {
	top: -(@em * .5);
}

sub {
	bottom: -(@em * .25);
}

blockquote {
	padding-left: .5rem;
	margin-left: 1.5rem;

	border-left: .25em solid @blockquote-border-color;
}

pre {
	margin: 0 0 1rem;

	.fontfamily(mono);
}

code {
	font-weight: normal;
	color: @code-color;

	.fontfamily(code);
}

@import (once) '_tag.less'; // import the tag stylesheet because it's formatting text