/* HTML/BODY STUFF */
html{}
body{position:relative;font-family:'Trebuchet MS', verdana;font-size:14px;color:#FFF;background: url('../images/framework/background-body.png') no-repeat;margin:0;padding:0;}

/* VARIOUS */
hr{border:0;height:0;border-collapse:collapse;clear:both;}
a{color:#FFF;text-decoration:none;}
a:hover{color:#000000;}
img{border:0;}
.flex{display:flex;}
div,input{box-sizing:border-box;}
.gradientOrange{background-color:#EE9508;background:linear-gradient(#E08110 0%,#FBA802 100%);}
.gradientGreen{background-color:#9AD027;background:linear-gradient(#88C94F 0%,#A9D707 100%);}
.gradientBlue{background-color:#189DE3;background:linear-gradient(#147FDB 0%,#1DB6EA 100%);}
.gradientGrey{background-color:#EEEEEE;background:linear-gradient(#CCCCCC 0%,#FAFAFA 100%);}

/* DIVS padding/bordering */
#logo,#boxleft,#boxright,#com728,#footer,#animatie,.tinybox{border-radius:5px;padding:2px;border:1px solid #666;margin-bottom:8px;}

/* CONTENT */
#content{padding:10px;margin:auto;max-width:734px;min-height:650px;}
	#content div{position:relative;z-index:1;}

/* WORD FLOW */
.flow{position:absolute;z-index:0;font-size:20px;font-weight:bold;overflow:hidden;}
	.flow:hover{color:#AAA;}
	a.w1{color:#E1E1E1;bottom:100px;right:100px;font-size:30px;}a.w2{color:#E1E1E1;top:100px;left:100px;font-size:29px;}a.w3{color:#E1E1E1;bottom:50px;left:50px;font-size:28px;}a.w4{color:#E1E1E1;top:30px;right:120px;font-size:27px;}a.w5{color:#E5E5E5;top:40px;left:400px;font-size:26px;}a.w6{color:#E5E5E5;top:250px;left:500px;font-size:25px;}a.w7{color:#E5E5E5;top:200px;right:10px;font-size:24px;}a.w8{color:#E5E5E5;bottom:110px;left:200px;font-size:23px;}a.w9{color:#E8E8E8;top:200px;left:200px;font-size:22px;}a.w10{color:#E8E8E8;bottom:150px;right:450px;font-size:21px;}a.w11{color:#E8E8E8;top:300px;right:200px;font-size:20px;}a.w12{color:#E8E8E8;top:350px;left:350px;font-size:19px;}a.w13{color:#EBEBEB;top:400px;left:50px;font-size:18px;}a.w14{color:#EBEBEB;top:100px;right:450px;font-size:17px;}a.w15{color:#EBEBEB;bottom:50px;right:550px;font-size:16px;}a.w16{color:#EBEBEB;top:400px;right:500px;font-size:15px;}a.w17{color:#EEE;bottom:250px;right:100px;font-size:14px;}a.w18{color:#EEE;bottom:100px;left:300px;font-size:13px;}a.w19{color:#EEE;top:250px;left:150px;font-size:12px;}a.w20{color:#EEE;top:150px;right:150px;font-size:11px;}

/* LOGO */
#logo{position:relative;padding:10px;}
	#logo h1{margin:0;height:72px;line-height:72px;background:url('../images/framework/logo-groot.png') no-repeat;padding:0 0 0 82px;font-family:'Palatino Linotype';color:#FFF;font-size:35px;font-style:italic;}
	#logo h1 a:hover{color:#FFF;}

/* THOSE SMALL AND WIDE DIVS */
.tinybox{color:#999;min-height:18px;width:100%;}
	.tinybox p{margin:auto;text-align:center;}
	.tinybox a{color:#000;}
	.tinybox a:hover{color:#999;}

/* CONTENT DIVS */
#boxleft,#boxright{width:50%;min-height:325px;padding:10px;}

/* LEFT CONTENT BOX */
#boxleft{margin-right:8px;}
	#animatie{width:244px;height:50px;background:#FFFFFF url('../images/animatie.gif') no-repeat;opacity:0.8;margin:auto;}

/* RIGHT CONTENT BOX */

	/* SEARCH FIELDS */
	input{height:26px;vertical-align:middle;border-radius:5px;}
	.inp{width:150px;padding:2px 4px;border:0px;background:#FAFAFA;font-size:18px;}
	.sbm{padding:2px 10px;border:1px solid #FFF;color:#FFF;font-size:16px;cursor:pointer;}
	.sbm:hover{background:#561A1A;}
	
	/* SEARCH RESULTS */
	#results{margin:0;padding:0;list-style:none;}
		#results li{background:#FFF;margin:1px;padding:5px;border-radius:5px;color:#000;font-weight:bold;}
		#results li.moreresults{background:none;font-weight:normal;color:#FFF;}

	/* ADD WORD PRE */
	#preaddform{margin:13px auto 13px auto;}
		#preaddform input{display:none;}

	/* ADD WORD FINAL */
	#addform .inp{width:200px;}

/* FOOTER */
#footer{text-align:center;}

@media (max-width:750px){
	body{font-size:16px;}
	.flex{flex-direction:column-reverse;}
	
	.flow{display:none;}
	#logo{height:auto;padding:5px;}
	#logo h1{height:48px;line-height:48px;background-image:url('../images/framework/logo.png');padding:0px 0px 0px 58px;font-size:24px;}
	
	#boxleft,#boxright{width:100%;min-height:auto;}
}