@charset "utf-8";
/* CSS Document */
body{
    font-family: 'Roboto', arial;
    font-weight:400;
	background-color:black;
	color:#b3b3b3;
}
@media all and (min-width: 1001px){
div.mobielversie{
	background:#000000;
	width:745px;
	overflow:auto;
	margin-top:30px;
	margin:0px auto;
	overflow-x: hidden;
}
div.mobielversiedeel1{
	float:left;
	width:360px;
}
div.mobielversiedeel2{
	float:left;
	margin-top:20px;
	margin-left:25px;
	width:360px;
}
}

@media all and (max-width: 1000px){
div.mobielversie{
	background:#000000;
	width:360px;
	overflow:auto;
	margin:0px auto;
	overflow-x: hidden;
}
div.mobielversiedeel1{
	float:left;
	width:360px;
}
div.mobielversiedeel2{
	float:left;
	clear:both;
	width:360px;
}
}

div.referentie{
	width:340px;
	height:40px;
	float:left;
	color:white;
}
div.tekst{
	width:185px;
	display: table-cell;
	vertical-align: middle;
	padding-top:10px;
	float:left;
	margin:20px 0px 0px 0px;
	color:#b3b3b3;
	font-family: 'Roboto', arial;
	font-weight:400;

	}
div.buttons{
	width:170px;
	float:left;
	margin:20px 0px 0px 0px;
	color:#b3b3b3;
	font-family: 'Roboto', arial;
	font-weight:400;

}
div.milimeter{
	width:160px;
	float:left;
	margin:10px 0px 0px 0px;
	color:white;

}
div.pijt{
	width:355px;
	background-color:#ffffff;
	background-image:url("/img/plaatjes/pijlenafwerkingenkort.png");
	background-size: 355px 221px;
	background-repeat: no-repeat;
	background-position:0px 0px;
}
input.klik{
cursor: pointer;
background-color:#525252;
border: 1px solid #525252;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
font-size: 20px;
margin: 0px 0px 0px 0px;
height: 40px;
outline: 0;
-webkit-appearance: none;
color:#b3b3b3;
font-family: 'Roboto', arial;
font-weight:400;
}
input.afrekenen{
cursor: pointer;
background-color:#8E3C15;
border: 1px solid #8E3C15;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
font-size: 20px;
margin: 0px 10px 0px 0px;
outline: 0;
-webkit-appearance: none;
color:#ffffff;
width:355px;
height: 40px;
font-family: 'Roboto', arial;
font-weight:400;
}
.bordertype1{
	border-bottom-left-radius:2px;
	border-top-left-radius:2px;
}
.bordertype2{
	border-bottom-right-radius:2px;
	border-top-right-radius:2px;
}

input[type="text"], input[type="number"]{
	background-color:#666666;
	color:#ffffff;
	padding-top:10px;
	padding-bottom:10px;
	text-align:center;
	border:solid 1px #666666;
}
input:focus{
	outline:none !important;
	border: solid 1px #cc6633;
	
}
.text {
  border: 1px solid #aabbcc;
  height: 20px;
  border-radius:2px;
  font-size:16px;
}
.text-reveal-if-active {
  border: 1px solid #aabbcc;
  height: 20px;
  border-radius:2px;
  font-size:16px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}
label {
    position: relative;
    display: inline-block;
}

select {
	-webkit-appearance:none; 
	-moz-appearance:none
    display: inline-block;
    padding: 4px 3px 5px 5px;
	height:30px;
    width: 340px;
    outline: none;
    color: #ffffff;
    border: 1px solid #666666;
    border-radius: 2px;
    box-shadow: inset 1px 1px 2px #666666;
	background-color:#666666;
}

/* Select arrow styling */
.notIE label:after {
    content: '';
    width: 25px;
    height: 25px;
    position: absolute;
    display: inline-block;
	margin-top:1px;
	margin-right:1px;
    top: 0px;
    right: 0px;
    pointer-events: none;
	overflow: hidden;

}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width:0\0) { 
    .notIE label:after
    {
        display:none;
    }
}
input[type=radio], input[type=checkbox] {
		display:none;
	}

input[type=radio] + label, input[type=checkbox] + label {
	float:right;
		display:inline-block;
		margin-left:1px;
		padding: 10px 12px;
		margin-bottom: 0;
		font-size: 14px;
		line-height: 20px;
		color: #999999;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		background-color: #333333;
		background-image: -moz-linear-gradient(top,#333333,#333333);
		background-image: -webkit-gradient(linear,0 0,0 100%,from(#333333),to(#333333));
		background-image: -webkit-linear-gradient(top,#333333,#333333);
		background-image: -o-linear-gradient(top,#333333,#333333);
		background-image: linear-gradient(to bottom,#333333,#333333);
		background-repeat: repeat-x;
		border: 0px solid #333333;
		border-color: #333333 #333333 #333333;
		border-color: rgba(51,51,51,1) rgba(51,51,51,1) rgba(51,51,51,1);
		border-bottom-color: #333333;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333',endColorstr='#333333',GradientType=0);
		filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
		-webkit-box-shadow: inset 0 0px 0 rgba(51,51,51,1),0 0px 0px rgba(51,51,51,1);
		-moz-box-shadow: inset 0 0px 0 rgba(51,51,51,1),0 0px 0px rgba(51,51,51,1);
		box-shadow: inset 0 0px 0 rgba(51,51,51,1),0 0px 0px rgba(51,51,51,1);
		z-index: 0;
	}

	 input[type=radio]:checked + label, input[type=checkbox]:checked + label{
		   background-image: none;
		background-color:#666666;
		color:#ffffff;
	}

input[type="radio"]:checked ~ .text-reveal-if-active,
input[type="checkbox"]:checked ~ .text-reveal-if-active {
  opacity: 1;
  max-height: 100px; /* little bit of a magic number :( */
  overflow: visible;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;.
	-moz-appearance:none
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input::-moz-outer-spin-button,
input::-moz-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    -moz-appearance: none;
	display:flex;
    text-indent: 1px;
    text-overflow: '';
	-prefix-appearance 
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
p{
	clear:none;
}

/*-------------------------------
*	Demo page styles.
--------------------------------*/

*{
	margin:0;
	padding:0;
}

body{
}

#page{
    width:auto;
    height:auto;
    margin:0px 0px;
}

#page h1{
    font-weight:normal;
    
    /* text h1 offscreen zetten, plaatje zou ook kunnen schalen */
    
    text-indent:-99999px;
    overflow:hide;
    background:url('../img/QS%20Logo wit.png') center no-repeat;
    max-width:100%;
    min-height:220px;
    max-height:200%;
    padding-top:5%;
    padding-bottom: 0;
}



#page form{
	margin:4% auto;
    padding:1%;
}

.tri{
	border-color:transparent transparent #212121;
	border-style:solid;
	border-width:20px 17px;
	height:0;
	left:50%;
	margin:-40px 0 0 -400px;
	position:absolute;
	top:0;
	width:0;
}