/* 
This stylesheet is written by Vasilis van Gemert
It is basically set up as a mediaquery experiment:
How many layouts can you make with one markup
There are six layouts defined in this css, all optimised for different reasons
1. The default layout for old browsers that don't understand madiaqueries
2. An optimised version for wide screens, wider than 1200px
3. A version for average widths between 900 and 1200px
4. A version for smallish screens between 480 and 900px
5. One for a max width of 580px on desktop browsers
6. And one for advanced small (mobile) devices like the iPhone and Android phone.

No. I don't minify my css, I want my visitors to be able to read it. 
A 1.1Kb speedbumb is not a speedbump.

@font-face bit Generated by Font Squirrel (http://www.fontsquirrel.com)
*/

@font-face {
	font-family: 'Lobster11Regular';
	src: url('lobster_1.1_-webfont-webfont.eot');
	src: local('Lobster 1.1'), local('Lobster1.1'), url('lobster_1.1_-webfont-webfont.woff') format('woff'), url('lobster_1.1_-webfont-webfont.ttf') format('truetype'), url('lobster_1.1_-webfont-webfont.svg#webfontRKE8opPv') format('svg');
	font-weight: normal;
	font-style: normal;
} 
/* @group Basic tags */

/* These are block elements */
nav, header, section, article {
	display: block;
}

html {
	font: 70%/1.68 arial,UnderwoodChampionRegular;
	background: #858585;
}
body {
	margin: 0;
	padding: 2em 18em 0 0;
	text-align: left;
	height: 120%;
	max-width: 1300px;
	min-width: 300px;
}
a {
	color: #fff;
	text-shadow: 1px 1px 0 #666;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-o-transition: .4s;
	transition: .4s;
}
a:hover,
a:focus {
	color: #fff;
	background: #333;
}
a:visited {
	color: #fff;
	text-shadow: 0 0 0 none;
}

img {
	border: 0;
}

h1,
legend {
	font-family: 'Lobster11Regular';
	font-weight: normal;
}
section {
	line-height: 1.5;
}
p,
legend,
label,
li,
li p {
	font-size: 1.6em;
}
ul {
	margin-left: 0;
	padding: 0;
}
li {
	margin: 0 0 .5em 1em;
}
body > header,
.nav a,
section > div,
a[href="#top"],
#banner a[href="#top"] {
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd%2B7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAClJREFUeNpi%2Fv%2F%2FvwMTAwPDfzjBgMpFI%2F7hFSOT9Y8qRuF3JLoHAQIMAHYtMmRA%2BCugAAAAAElFTkSuQmCC) -1px 50% no-repeat;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;
}
/* @end */

/* @group Header */

body > header {
	font-weight: normal;
	line-height: 1;
	display: block;
	text-align: left;
	margin: 0 1em 1em;
	padding: 1em;
	background-color: rgb(45, 174, 191);
	background-color: rgba(45, 174, 191, .7);
	*background-color: rgb(45, 174, 191);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 3px 5px 3px rgba(0, 0, 0, .5);
	-moz-box-shadow: 3px 5px 3px rgba(0, 0, 0, .5);
	-o-box-shadow: 3px 5px 3px rgba(0, 0, 0, .5);
	box-shadow: 3px 5px 3px rgba(0, 0, 0, .5);
}
body > header h1,
body > header h2 {
	font-size: 4em;
	margin: 0;
	font-weight: normal;
	color: #fff;
	text-shadow: -1px -1px 0 rgb(45, 174, 191);
	position: relative;
}
body > header h2 {
	font-size: 1.5em;
	color: #fff;
	font-style: italic;
}
.beta-star,
.beta-star:after,
.beta-star:before {
	position: absolute;
	font-size: .5em;
	margin: -6em 0 0 1em;
	background-color: rgb(255, 191, 44);
	width: 3em;
	text-align: center;
	line-height: 3em;
	text-shadow: 0 0 3px rgb(194, 63, 122);
	font-style: normal;
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	-o-transform: rotate(10deg);
	transform: rotate(10deg);
}
.csstransforms .beta-star,
.csstransforms .beta-star:after,
.csstransforms .beta-star:before {
	margin: -.6em 0 0 1em;
}
.csstransforms .beta-star:after,
.csstransforms .beta-star:before {
	content: 'Nieuw!';
	margin: 0;
	font-size: 100%;
	left: 0;
	-webkit-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-o-transform: rotate(-30deg);
	transform: rotate(-30deg);
}
.csstransforms .beta-star:before {
	content: 'Beta!';
	font-size: 100%;
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-o-transform: rotate(30deg);
	transform: rotate(30deg);
}

/* @end */

/* @group Navigation */

.nav {
	overflow: auto;
	margin: 0 0 1em;
	position: fixed;
	right: 0;
	top: 2em;
	width: 19em;
}
.nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav li {
	font-size: 1.7em;
	margin: 0 1em .5em;
	padding: 0;
	font-family: 'Lobster11Regular';
}
.nav a {
	display: block;
	white-space: nowrap;
	padding: 0 1em;
	color: #fff;
	font-weight: normal;
	text-decoration: none;
	background-color: rgb(5, 174, 191);
	background-color: rgba(5, 174, 191,.5);
	*background-color: rgb(5, 174, 191);
	border-bottom: 1px solid rgba(0, 0, 0, .25);
	-webkit-border-radius: .31em;
	-moz-border-radius: .31em;
	border-radius: .31em;
	-webkit-box-shadow: .19em .31em .19em rgba(0, 0, 0, .5);
	-moz-box-shadow: 3px 5px 3px rgba(0, 0, 0, .5);
	-o-box-shadow: 3px 5px 3px rgba(0, 0, 0, .5);
	box-shadow: 3px 5px 3px rgba(0, 0, 0, .5);
	text-shadow: 0 -1px 1px rgba(0, 0, 0, .25);
}
.nav a:hover,
.nav a:focus {
	background-color: rgb(5, 174, 191);
}

/* @end */

/* @group Background colors */

.nav a[href='#geefgul'],
#geefgul > div { 
	background-color: rgb(51, 204, 51);
	background-color: rgba(51, 204, 51, .7);
	*background-color: rgb(51, 204, 51);
	text-shadow: -1px -1px 0 rgb(51, 204, 51);
}
.nav a[href='#geefgul']:hover,
.nav a[href='#geefgul']:focus,
#geefgul:target > div { background-color: rgb(51, 204, 51);}


.nav a[href='#adverteer'],
#adverteer > div { 
	background-color: rgb(194, 63, 122);
	background-color: rgba(194, 63, 122, .7);
	*background-color: rgb(194, 63, 122);
	text-shadow: -1px -1px 0 rgb(194, 63, 122);
}
.nav a[href='#adverteer']:hover,
.nav a[href='#adverteer']:focus,
#adverteer:target > div { background-color: rgb(194, 63, 122);}

.nav a[href='#sponsor'],
#sponsor > div { 
	background-color: rgb(234, 66, 24);
	background-color: rgba(234, 66, 24, .7);
	*background-color: rgb(234, 66, 24);
	text-shadow: -1px -1px 0 rgb(234, 66, 24);
}
.nav a[href='#sponsor']:hover,
.nav a[href='#sponsor']:focus,
#sponsor:target > div { background-color: rgb(234, 66, 24);}

.nav a[href='#linkbait'],
#linkbait > div { 
	background-color: rgb(255, 109, 24);
	background-color: rgba(255, 109, 24, .7);
	*background-color: rgb(255, 109, 24);
	text-shadow: -1px -1px 0 rgb(255, 109, 24);
}
.nav a[href='#linkbait']:hover,
.nav a[href='#linkbait']:focus,
#linkbait:target > div { background-color: rgb(255, 109, 24);}

.nav a[href='#banner'],
#banner > div { 
	background-color: rgb(255, 191, 44); 
	background-color: rgba(255, 191, 44, .7);
	*background-color: rgb(255, 191, 44); 
}
.nav a[href='#banner']:hover,
.nav a[href='#banner']:focus,
#banner:target > div,
#banner:hover > div { background-color: rgb(255, 191, 44);}

/* .nav a[href='#disclaimer'],
#disclaimer > div { 
	background-color: rgb(194, 63, 122);
	background-color: rgba(194, 63, 122, .7);
	text-shadow: -1px -1px 0 rgb(194, 63, 122);
}
.nav a[href='#disclaimer']:hover,
.nav a[href='#disclaimer']:focus,
#disclaimer:target > div { background-color: rgb(194, 63, 122);} */

/* @end */

/* @group Sections */

section {
	position: relative;
	display: inline-block;
	font-family: "Courier New";
	margin: 0 -.6em 0 0;
	width: 50%;
	vertical-align: top;
	text-shadow: -1px -1px 0 rgb(45, 174, 191);
}
section > div {
	font-family: arial;
	background-color: rgb(45, 174, 191);
	background-color: rgba(45, 174, 191, .7);
	*background-color: rgb(45, 174, 191);
	display: inline-block;
	vertical-align: top;
	text-align: left;
	color: #fff;
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	margin: 1em;
	padding: 1.2em 1.8em;
	-webkit-box-shadow: 3px 5px 3px rgba(0, 0, 0, .5);
	-moz-box-shadow: 3px 5px 3px rgba(0, 0, 0, .5);
	-o-box-shadow: 3px 5px 3px rgba(0, 0, 0, .5);
	box-shadow: 3px 5px 3px rgba(0, 0, 0, .5);
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
}

section:target > div {
	background-color: rgb(5, 174, 191);
	-webkit-box-shadow: 8px 10px 3px rgba(0, 0, 0, .7);
	-moz-box-shadow: 5px 7px 3px rgba(0, 0, 0, .7);
	-o-box-shadow: 5px 7px 3px rgba(0, 0, 0, .7);
	box-shadow: 5px 7px 3px rgba(0, 0, 0, .7);
}
section header {
	font-size: 1.5em;
	margin: 0 0 1em;
}
section header h1 {
	font-size: 1.6em;
	margin: 0;
}
section header h2 {
	font-size: 1.1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
}
a[href="#top"],
#banner a[href="#top"]{
	display: none;
}
#banner a {
	display: block;
}
#banner img {
	display: block;
	margin: 0 auto;
	width: 100%;
}
#disclaimer:target {
	position: fixed;
	top: 40px;
	width: 70%;
	left: 50%;
	margin: 0 0 0 -35%;
	font-size: 130%;
}
#disclaimer a {
	text-decoration: none;
}
#disclaimer:target a {
	text-decoration: underline;
}
/* @end */

/* @group Form */
form {
	margin: 0;
	padding: 0;
}
fieldset {
	border: 1px solid rgb(194, 63, 122);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	border-width: 0;
	padding: 0 0 1em;
}
legend {
	font-size: 1.8em;
	font-weight: normal;
	color: #fff;
}
label {
	display: block;
}
input,
textarea {
	display: block;
	font-size: inherit;
	border: 2px solid rgb(194, 63, 122);
	background: #fff;
	-webkit-border-radius: .3em;
	-moz-border-radius: .3em;
	-o-border-radius: .3em;
	border-radius: .3em;
	padding: 2px;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-o-transition: .4s;
	transition: .4s;
}
textarea {
	width: 90%;
	height: 6em;
}
input:focus,
textarea:focus {
	outline: none;
	border: 2px solid #fff;
	-webkit-box-shadow: 3px 3px 8px rgba(0, 0, 0, .7);
}
textarea:focus {
	width: 100%;
}
:invalid {
	background: rgba(255,255,255,.8);
}

/* @end */


@media (min-width:480px) and (max-width:900px){
body {
	padding: 2em 0 0 18em;
}
section {
	width: 100%;
	z-index: 2;
}
body > header {
	margin-left: -17em;
	position: relative;
	z-index: 2;
}
body:after {
	position: fixed;
	content: '`Trans·fi·nan·ci·eel';
	top: .4em;
	left: .5em;
	z-index: 1;
	font-family: 'Lobster11Regular';
	font-weight: normal;
	font-size: 4em;
	margin: 0;
	font-weight: normal;
	color: #fff;
	text-shadow: -1px -1px 0 rgb(45, 174, 191);
	opacity: .3;
}

.nav {
	right: auto;
	left: 0;
	top: auto;
	padding-top: 1em;
}
textarea {
	max-width: 300px;
}

}
@media (min-width:900px) and (max-width:1200px){
section {
	width: 50%;
}
}
@media (min-width:1200px){
body {
	padding: 2em 0 0 0;
	max-width: 1800px;
	margin: 0 auto;
}
section {
	width: 33.33%;
	margin: 1em -.6em -1em 0;
}
.nav {
	overflow: visible;
	margin: 2em 1em;
	position: relative;
	width: auto;
	top: 0;
}
.nav ul {
	margin: 0;
	padding: 0;
	overflow: visible;
}
.nav li {
	float: left;
	width: 16.66%;
	margin: 0;
	padding: 0;
	overflow: visible;
}
.nav a {
	text-align: center;
	margin: 0 .5em;
}
.nav li:first-child a {
	margin: 0 .5em 0 0;
}
.nav li:last-child a {
	margin: 0 0 0 .5em;
}
}
@media (max-width:580px) {
body > header {
	position: relative;
	top: 0;
	margin: 1em;
}
body {
	margin: 0;
	padding: 0;
}
body:after {
	display: none;
}
body > header h1,
body > header h2 {
	font-size: 3.2em;
}
body > header h2 {
	display: none;
}
.nav {
	position: static;
	width: 100%;
}
.nav ul {
	margin: 0 1em;
}
.nav li {
	margin: 0 0 0.5em;
	float: left;
}
.nav a {
	line-height: 2;
	margin: 0 .5em 0 0;
}
section {
	width: 100%;
}
section > div {
	margin-top: 0;
	position: relative;
}
}
@media (max-device-width:481px){
html {
	min-height: 120%;
}
body {
	margin: 0;
	padding: 0;
	width: 100%;
	min-width: 100px;
	max-width: 480px;
}
body > header {
	position: relative;
	top: 0;
	font-size: 100%;
	margin-top: 0;
	background: none;
	padding: 1em 0 0;
	-webkit-box-shadow: none;
	-moz-box-shadow: 3px 5px 3px rgba(0, 0, 0, .5);
	-o-box-shadow: 3px 5px 3px rgba(0, 0, 0, .5);
	box-shadow: 3px 5px 3px rgba(0, 0, 0, .5);
}
body > header h1 {
	font-size: 3em;
	font-weight: normal;
	line-height: 1;
	display: block;
	text-align: left;
	margin: 0;
	padding: .3em;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd%2B7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAClJREFUeNpi%2Fv%2F%2FvwMTAwPDfzjBgMpFI%2F7hFSOT9Y8qRuF3JLoHAQIMAHYtMmRA%2BCugAAAAAElFTkSuQmCC) -1px 50% no-repeat;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;
	background-color: rgb(45, 174, 191);
	background-color: rgba(45, 174, 191, .7);
	-webkit-border-radius: .15em;
	-moz-border-radius: .15em;
	border-radius: .15em;
	-webkit-box-shadow: 3px 5px 3px rgba(0, 0, 0, .5);
	-moz-box-shadow: 3px 5px 3px rgba(0, 0, 0, .5);
	-o-box-shadow: 3px 5px 3px rgba(0, 0, 0, .5);
	box-shadow: 3px 5px 3px rgba(0, 0, 0, .5);
}
body > header h2 {
	display: none;
}
.csstransforms .beta-star {
	right: 0;
	top: 3em;
}
.nav {
	position: static;
	width: 100%;
	margin: 0;
}
.nav ul {
	margin: 0 0 0 1em;
}
.nav li {
	float: none;
}
.nav a {
	line-height: 2;
}
section > div {
	padding: 5em 1em 1em;
	margin-top: 0;
	position: relative;
	height: 100%;
	-webkit-transition: none 0;
}
.csstransitions section {
	padding: 1em 0 0;
	overflow: hidden;
	position: absolute;
	top: 0px;
	left: -100%;
	-webkit-transition: left .4s;
}
.csstransitions section:target {
	width: 100%;
	left: 0;
	top: 0;
	-webkit-transition: left .4s;
}
#disclaimer:target {
	position: absolute;
	top: 0;
	width: 100%;
	left: 0;
	margin: 0;
	font-size: 100%;
}
#banner img {
	width: 100%;
}
a[href="#top"],
#banner a[href="#top"]{
	padding: 0 1em;
	top: 1em;
	display: block;
	position: absolute;
	line-height: 2;
	background: rgb(45, 174, 191);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	background-color: rgb(45, 174, 191);
	font-size: 1.6em;
	font-family: 'Lobster11Regular';
}
textarea {
	height: 6em;
}
}