html,body,p,a,h1,h2,h3,h4{
	margin : 0;
	padding : 0;
}

*{
	
}

html{
	/* overflow : hidden; */
	background : linear-gradient(#eee,#fff);
	/* background : url(bg1.jpg); */
	position : relative;
}

html,body{
	width : 100%;
	height : 100%;
	font-family: Verdana,Geneva,sans-serif;
}

body{
	min-width : 640px;
}

.logo{

}

.logo a{
	background: url('../../images/OBwoordenhulpcirkel.png') center no-repeat;
	width: 167px;
	height: 60px;
	margin: 27px auto;
	display: block;
	background-size: contain;
	line-height: 0;
	font-size: 0;
}

header{
	position: relative;
	  min-width: 640px;
	  /* max-width: 980px; */
	  text-align: center;
	  padding: 1.5em;
	  color: #1B78A8;
	  text-shadow: 0 1px 2px #D7D7D7;
	  margin: 0px auto;
	  padding-bottom: 35px;
	  background: rgba(221, 221, 221, 0.71);
}

#again{
	display: block;
	width : 25px;
	height : 25px;
	background : url(refresh-1.png) center no-repeat;
	background-size : contain;
	text-decoration: none;
	color: #2E94C8;
}

#again:hover{
	color : #444;
	background : url(refresh.png) center no-repeat;
	background-size : contain;
	text-decoration : underline;
}

.container{
	border-radius : 5px;
	margin : 0px auto;
	
}

.wrapper{
	/* box-shadow: 0px 1px 7px 0 #333; */
	margin : 1px auto;
}

.form-wrap{
	box-shadow: 0px 1px 7px 0 #333;
	background : #fff;
}

.output{
	text-align : center;
	margin-left: 41px;
	margin-bottom: 18px;
}

.output .error{
	background : #eee;
	max-width: 500px;
  line-height: 1.44em;
  margin: 7px auto;
}

.error{
	font-size : .9em;
	color: rgb(237, 69, 20);
	margin-top: 4px;
}

.ok{
	color : green;
}

#invForm{
	min-width : 580px;
	max-width : 900px;
	margin : 0px auto;
	padding: 2em;
}

#invForm label{
	display : block;
	margin : 7px;
	padding : .4em;
}

fieldset{
	text-align : center;
	border: 2px solid #197279;
	border-radius: 10px;	
	box-shadow: 0 1px 7px 0 #666666;
	background: #CBB5FF;
}

.group{
	width : 48%;
	display : inline-block;
}

input[type="text"]{
	border-radius : 4px;
	padding : .3em;
	text-align : center;
	border: 1px solid #59829B;
	box-shadow: 1px 1px 1px #424242 inset;
	font-size: 16px;
	color : #626262;
}

.buttons{
	text-align : center;
}

.btn{
	padding : .4em .7em;
	border : 1px solid #e6e6e6;
	background: #2FA0DA;
	color: #F7F7F7;
	border-radius: 4px;
	cursor : pointer;
	outline : 0;
	font-size : 14px;
	margin-top: 20px;
	line-height: 18px;
}

.btn:hover{
	background: #7C7C7C;
	border : 1px solid #626262;
	color : #fff;
}

span.error{
	font-size : .9em;
	color: rgb(207, 63, 37);
}

.blok{
	position : relative;
	border : 1px solid #ccc;
	text-align : center;
	font-size : 16px;
	color : #474747;
	float: left;
	display : inline-block;
	background: #EF82D5;
	background: -o-linear-gradient(#D48AFF,#EF82D5);
	background: -moz-linear-gradient(#D48AFF,#EF82D5);
	background: linear-gradient(#D48AFF,#EF82D5);
	color: #fff;
	box-shadow: 0 1px 2px #747474;
	-webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */

  /* No support for these yet, use at own risk */
  -o-user-select: none;
  user-select: none;          
}

.blok p{
	width : 100%;
	height : 100%;
}

.blok.active{
	box-shadow: inset 0px 1px 5px #888888;
	z-index: 12;
	background: #EF82D5;
	background: -o-linear-gradient(#D48AFF,#EF82D5);
	background: -moz-linear-gradient(#D48AFF,#EF82D5);
	background: linear-gradient(#D48AFF,#EF82D5);
	color: #913939;
	text-shadow: 0px 1px 1px #FF8B8B;
}

.innerblok{
	position : absolute;
	width : 100%;
	height : 100%;
	top : 0;
	left : 0;
	background : #e6e6e6;
	background : -o-linear-gradient(#e6e6e6,#ddd);
	background : -moz-linear-gradient(#e6e6e6,#ddd);
	background : linear-gradient(#e6e6e6,#ddd);
}

.mysterie{
	text-align : center;
}

.letterblok{
	display : inline-block;
	font-size : 20px;
	height: 24px;
	vertical-align: bottom;
	width: 24px;
	padding: 10px;
	margin: 7px;
	border: 1px solid #166283;
	background: #FEFFCA;
	color: #166283;
}

.uil{
	position: relative;
	margin : 14px auto;
	width : 85px;
	height : 120px;
	background : url('uil_trans.png') center top no-repeat;
	background-size : contain;
	cursor: pointer;
	transition : all .4s;
}

.uil:hover{
	background : url('uil.png') center top no-repeat;
	background-size : contain;
}

/*.uil:hover .tool{
	display: block;
}*/

.tool{
	position: absolute;
	display: none;
	bottom: -20px;
	background: #26bdcf;
	background: linear-gradient(#2FA0DA,#1C7B9E);
	left : -15px;
	border : 1px solid #ddd;
	border-radius: 5px;
	padding : .1em;
	font-size: .8em;
	color : #ddd;
	transition : all .4s;
}


@media screen and (min-width: 700px){
	.blok{
		font-size : 16px
	}

	.letterblok {

		height: 30px;
		width: 30px;
	
		}
	
}

@media screen and (min-width: 850px){
	.blok{
		font-size : 20px
	}

	.letterblok {

		height: 35px;
		width: 35px;
	
		}
}