/*
 * Page specific styles
 *
 * @author Rogier van der Linde <rogier@bitmatters.be>
 */


/* ==========================================================================
   Content
   ========================================================================== */

#content {
	padding-top: 0;
	padding-left: 2rem;
	padding-right: 2rem;
}

/* parts */

.part .text {
	width: 30rem;
	margin-top: 5rem;
	margin-left: 2rem;
}

.part .visual {
	margin-left: 0;
	margin-right: 3rem;
}

#part1 {
	clear: inherit;
}

#part1 .line {
	height: 5rem;
}

#part1, #part3 {
	float: left;
}

#part2, #part3 {
}

.editor h3 {
	margin-left: -4rem;
}

#extra {
	margin-top: 3rem;
}

#content .col {
	padding-left: 2rem;
}

@media (min-width: 50em) { /* 800px */
	.part {
		margin-bottom: 4rem;
	}

	#content {
		padding-top: 0;
		padding-left: 4rem;
		padding-right: 4rem;
	}
	.part .text {
		float: left;
		margin-top: 0;
		margin-left: 0;
	}
	#content .col {
		padding-left: 0;
	}
	#part2, #part3 {
		margin-top: -2rem;
	}
}

@media (min-width: 60em) { /* 960px */
	#part2, #part3 {
		margin-top: 0;
	}
	.part {
		margin-bottom: 2rem;
	}
	#part2 {
		float: right;
	}
}

@media (min-width: 75em) { /* 1200px */
	.part {
		width: 65rem;
	}
	#extra {
		float: right;
		width: 31rem;
		margin-top: 6.3rem;
	}
}