/**
 * 
 * 03. Base theme styles
 * 
 */


/** 03.01 <body> & <html>  **/
body {
	@extend %font-stack-body;
	font-size: 14px;
	letter-spacing: 0px;
	line-height: 1.9em;
	color: $color-darker-gray;
	background-color: $color-body-background;
	@include transition(transform $duration-transform $easing-transform, opacity 0.1s ease-in-out);

	> * {
		@include transition(transform $duration-transform $easing-transform);
	}
}

html.hide-until-fonts {
	opacity: 0;
	@include transition(opacity 0.1s ease-in-out);

	&.wf-active,
	&.wf-inactive {
		opacity: 1;
	}
}

.dark {
	color: #fff;
}

.dark .main-content, article.dark {
	background-color: $color-dark-bg;
}


/** 03.02 a, p, strong & ::selection etc  **/
a {
	@include transition(all $duration-all $fn-cubic);
	@extend .color-link-ext-fg;
	text-decoration: none;
	&:visited {
		@extend .color-link-ext-fg;
	}
	&:focus {
		@extend %outline-none;
		@extend .color-link-hover-ext-fg;
		text-decoration: underline;
	}
	&:hover {
		@extend .color-link-hover-ext-fg;
		text-decoration: none;

		&:visited {
			@extend .color-link-hover-ext-fg;
		}
	}

	.dark & {
		@include color-link-dark();
	}
}

p {
	letter-spacing: 0.2px;
}

b, strong {
	font-weight: 900;
}

ul {
	list-style: disc;
}

dd {
	margin-bottom: 24px;
}

blockquote {
	border-left: 5px solid;
	border-color: $color-primary; /* redux[border-color: main_theme_color] */ 
	font-weight: 900;
}

cite {
	color: $color-dark-gray;
	font-weight: 700;
}

::selection{
	/* no extend */
	color: $color-secondary;
	background-color: $color-primary;
}
::-moz-selection {
	/* no extend */
	color: $color-secondary;
	background-color: $color-primary;
}


/** 03.03 Headings h1-h6  **/
h1, h2, h3, h4, h5, h6 {
	font-weight: 900;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;

	b, strong {
	  color: $color-primary; /* redux[color: main_theme_color] */ 
	}
}

h1 {
	font-size: 30px;
}

h2 {
	font-size: 28px;
}

h3 {
	font-size: 23px;
}

h4 {
	font-size: 19px;
}

h5 {
	font-size: 16px;
}

h6 {
	font-size: 14px;
}

h1.center, h2.center, h3.center, h4.center, h5.center, h6.center, p.lead.center {
	text-align: center;
}

h1.left, h2.left, h3.left, h4.left, h5.left, h6.left, p.lead.left {
	text-align: left;
}

h1.right, h2.right, h3.right, h4.right, h5.right, h6.right, p.lead.right {
	text-align: right;
}

/** 03.04 Tables  **/
table {
	border-collapse: separate;
	border-spacing: 0;
	border: 2px solid rgba(0,0,0,0.1);
	border-width: 2px 0 0 2px;
	margin-bottom: 24px;
	width: 100%;

	td, th {
		border: 2px solid rgba(0,0,0,0.1);
		border-width: 0 2px 2px 0;
		padding: 9px 10px;
		text-align: left;
	}

	th {
		font-weight: 700;	
	}
}