/*  SCSS Document  */

@import url('https://fonts.googleapis.com/css?family=Droid+Sans|Oswald');

$color_1: #793ca0;
$color_2: adjust-hue($color_1, 10deg);
$color_3: adjust-hue($color_1, 180deg);

body {
	
	font-family: 'Droid Sans', sans-serif;
	font-size: 16px;
	line-height: 1.3em;
	margin: 0;
	padding: 0;
	background: $color_2 url(images/pattern.png) repeat 0 0;
	background-size: 20px auto;
	color: $color_1;
}

h1 {
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	color: #fff;
	position: absolute;
	bottom: 10px;
	left: 0;
	padding: 25px 100px 25px 55px;
	background-color: scale-color($color_1, $lightness: -10%);
}

h2 { font-family: 'Oswald', sans-serif; font-size: 1.5em; margin: 0 0 12px 0; }

h3 { font-family: 'Oswald', sans-serif; font-size: 1.2em; }

main { margin: 0 auto; padding: 20px 45px; font-size: 16px; background-color: #fff; }

main::after { content:''; display: block; clear: both; }

header {
	height: 150px;
	background: $color_1 url(images/banner.png) no-repeat center top;
	position: relative;
}

article { width: 65%; float: left; }

article > div { padding: 15px; }

aside {
	width: 30%;
	float: left;
	margin: 50px 0px 0px 3%;
	font-size: .9em;
	line-height: 1.2em;
}

aside > div {
	padding: 10px 15px;
	border: 1px solid $color_1;
	color: $color_1;
	background-color: rgba($color_3, $alpha: 0.1);
}

aside > div h3 {
	background-color: $color_3;
	color: #fff;
	margin: -10px -15px 15px -15px;
	padding: 8px 5px 12px 15px;
}

.bar {
	width: 100%;
	height: 15px;
	background-color: scale-color($color_2, $lightness: -5%);
}

.bar div {
	width: 50%;
	height: inherit;
	background-color: scale-color($color_2, $lightness: 10%);
}