body {
	font-family: Tahoma;
	font-size: 14px;
	background: url('tree_bark.png');
	padding: 2% 5%;
	line-height: 1.5;
}

h1, h2, h3, h4 {
	font-family: 'Indie Flower';
	color: #008;
}

h1 {
	font-size: 300%;
	border-bottom: 2px solid rgba(0,0,136,0.5);
}

h2, h3, h4 {
	margin-top: 0.3em;
	margin-bottom: 0.3em;
}

h2 {
	font-size: 250%;
	margin-top: 0.6em;
}

h3 {
	font-size: 200%;
}

h4 {
	font-size: 150%;
}

dt { font-weight: bold; }

.pull-left { float: left; }
.pull-right { float: right; }

.flex-container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; margin-left: -25px; margin-right: -25px; }
.flex-container > div, .flex-container > section { margin: 25px; }
.flex-container2 { display: flex; flex-wrap: wrap; flex-direction: column; }

.group:before,
.group:after {
    content: " ";
    display: table;
}

.group:after {
    clear: both;
}
.group {
    *zoom: 1;
}
section > div { padding: 10px; background: rgba(150,150,255,0.3);}

.master-passed, .bachelor-passed { margin-left: 10%;}
.master-current { width: 50%; }
.master-passed { width: 36%; }
.projects { width: 50%; }
.bachelor-passed { width: 36%; }
.me { min-width: 500px; flex-grow: 2; }
.skills { min-width: 275px; flex-grow: 1; }
#contact-details { flex: 1 275px; }
#contact-form { flex: 2 575px; }

h1, h2 { clear: left; }
h2#heroes { font-size: 239%; }

#intro > div { min-height: 250px; }
#contact > div { min-height: 211px; }
#education > div { min-height: 225px;}
#personal { flex: 1 1 400px; }
#experience { flex: 1 1 400px; }
#personal > div, #experience > div { flex: 1; }

.me ul { list-style-type: none; margin-left: 0; padding-left: 0; }
.me ul li { line-height: 24px; padding-left: 30px; margin: 10px 0; }
#draw { background: url('brush.png') no-repeat; }
#web { background: url('globe.png') no-repeat; }
#programming { background: url('terminal.png') no-repeat; }
#study { background: url('black_book.png') no-repeat; }
#passion { background: url('black_heart.png') no-repeat; }
.business { font-weight: bold; }

.up-down dd { margin-left: 0; top: -21px; font-weight: bold; color: #008; }
.up-down dt, .up-down dd { position: relative; padding-left: 30px; }
.up-down dt { top: 21px; margin-bottom: 5px; font-weight: normal; }
.up-down dt:before {
	content: '';
	display: block;
	height: 24px;
	width: 24px;
	position: absolute;
	bottom: 9px;
	left: 0px;
}

.up-down dt#webskill:before {
	background-image: url('globe.png');
}
.up-down dt#language:before {
	background-image: url('speechbubble.png');
}
.up-down dt#db:before {
	background-image: url('db.png');
}
.up-down dt#mail:before {
	background-image: url('mail.png');
}
.up-down dt#city:before {
	background-image: url('home.png');
}
.up-down dt#phone:before {
	background-image: url('phone.svg');
	background-size: 24px 24px;
}

label { display: block; }
input[type=text],input[type=email],textarea {
	border: 0;
	box-shadow: 0 1px 1px 1px rgba(0, 0, 136, 0.5) inset;
	border-radius: 3px;
}
input[type=submit] {
	border: 0;
	box-shadow: 0 1px 1px 1px rgba(0, 0, 136, 0.5);
	border-radius: 3px;
	float: right;
}

.form-fields.input label { display: inline-block; }
.form-fields.input input { display: block; }

@media print {
	body { font-size: 11px; }
	#contact-form { display: none; }
	.skills { width: 240px; margin-left: 30px; }
	.me { width: 293px;}
	#intro > div { min-height: 310px; }
	#education > div { min-height: 175px; }
	h4#webtech { font-size: 141%; }
	h4#tdd { font-size: 131%; }
	#education, #personal { page-break-before: always; }
	#projects { font-size: 275%; line-height: 163%;}
	#personal { height: 1038px; }
	#personal, #experience { margin-top: 20px; }
	.up-down dt#webskill:before {
		background-image: url('globe_print.png');
	}
	.up-down dd { margin-left: 0; top: -21px; font-weight: bold; color: #008; }
	.up-down dt { top: 15px; margin-bottom: 5px; font-weight: normal; }
}