﻿/*
Creating an HTML5 enhanced responsive-ready contact form, with custom javascript feature detection
www.toddmotto.com
*/

* {
	margin:0;
	padding:0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-font-smoothing:subpixel-antialiased;
	-moz-font-smoothing:subpixel-antialiased;
	-o-font-smoothing:subpixel-antialiased;
	text-rendering:auto;
}
body {
	font:400 12px/1.625 "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#444;
	background:#e51937;
	background-image:linear-gradient(left , #761542 0%, #DF354E 52%, #761542 100%);
	background-image:-moz-linear-gradient(left , #761542 0%, #DF354E 52%, #761542 100%);
	background-image:-webkit-linear-gradient(left , #761542 0%, #DF354E 52%, #761542 100%);
}
.wrapper {
max-width:900px;

	width:95%;
	margin:0 auto;
	position:relative;
    top: 0px;
    left: 0px;
}

.tekstbox {
    font:400 12px/12px "Helvetica Neue", Helvetica, Arial, sans-serif;
    width:100%;
	box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
	-webkit-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
	-moz-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
	border:1px solid #CCC;
	background:#FFF;
	margin:0 0 5px;
	padding:10px;
	border-radius:5px;
}
.tekstbox:hover {
    -webkit-transition:border-color 0.3s ease-in-out;
	-moz-transition:border-color 0.3s ease-in-out;
	transition:border-color 0.3s ease-in-out;
	border:1px solid #AAA;
}
.nummeringave {
    font:400 12px/12px "Helvetica Neue", Helvetica, Arial, sans-serif;
    width:100%;
	box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
	-webkit-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
	-moz-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
	border:1px solid #CCC;
	background:#FFF;
	margin:0 0 5px;
	padding:10px;
	border-radius:5px;
    text-align:right;
}
.nummeringave:hover {
    -webkit-transition:border-color 0.3s ease-in-out;
	-moz-transition:border-color 0.3s ease-in-out;
	transition:border-color 0.3s ease-in-out;
	border:1px solid #AAA;
}
.datumveld  {
    font:400 12px/12px "Helvetica Neue", Helvetica, Arial, sans-serif;
    width:100%;
	box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
	-webkit-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
	-moz-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
	border:1px solid #CCC;
	background:#FFF;
	margin:0 0 5px;
	padding:10px;
	border-radius:5px;
}
.datumveld:hover {
    -webkit-transition:border-color 0.3s ease-in-out;
	-moz-transition:border-color 0.3s ease-in-out;
	transition:border-color 0.3s ease-in-out;
	border:1px solid #AAA;
}
.btn {
    cursor:pointer;
	width:100%;
	border:none;
	background:#e51937;
	background-image:linear-gradient(bottom , #696969 0%, #928F8F 52%);
	background-image:-moz-linear-gradient(bottom , #696969 0%, #928F8F 52%);
	background-image:-webkit-linear-gradient(bottom , #696969 0%, #928F8F 52%);
	color:#FFF;
	margin:0 0 5px;
	padding:10px;
	border-radius:5px;
}
.btn:hover {
    background-image:linear-gradient(bottom, #F3290A 0%, #e51937 52%);
	background-image:-moz-linear-gradient(bottom, #F3290A 0%, #e51937 52%);
	background-image:-webkit-linear-gradient(bottom, #F3290A 0%, #e51937 52%);
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}
#formulier {
	text-shadow:0 1px 0 #FFF;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	background:#F9F9F9;
	padding:25px;
}
#formulier h3 {
	color:#e51937;
	display:block;
	font-size:28px;
}
#formulier h4 {
	margin:5px 0 15px;
	display:block;
	font-size:13px;
}
#formulier td {
    padding:2px;
}
#formulier table.ingave {
     border: 1px solid #ddd;
    text-align: center;
 
}
#formulier th.ingave {
    background-color: #e51937;
    color: white;
     border: 1px solid #ddd;
    text-align: center;
}
#formulier td.ingave {
    border: 1px solid #ddd;
    text-align: center;
}
#formulier td.ingavegrijs {
    border: 1px solid #ddd;
    text-align: center;
    background-color:#ddd;
}
#formulier label span {
	cursor:pointer;
	color:#e51937;
	display:block;
	margin:5px 0;
	font-weight:900;
}

#formulier button[type="submit"] {
	cursor:pointer;
	width:100%;
	border:none;
	background:#e51937;
	background-image:linear-gradient(bottom , #696969 0%, #928F8F 52%);
	background-image:-moz-linear-gradient(bottom , #696969 0%, #928F8F 52%);
	background-image:-webkit-linear-gradient(bottom , #696969 0%, #928F8F 52%);
	color:#FFF;
	margin:0 0 5px;
	padding:10px;
	border-radius:5px;
}
#formulier button[type="submit"]:hover {
	background-image:linear-gradient(bottom, #F3290A 0%, #e51937 52%);
	background-image:-moz-linear-gradient(bottom, #F3290A 0%, #e51937 52%);
	background-image:-webkit-linear-gradient(bottom, #F3290A 0%, #e51937 52%);
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}
#formulier button[type="submit"]:active {
	box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);
}

#header {overflow:auto;background:#696969;max-width:900px;margin:0 auto;}
#logo {float:left;margin:10px 0 5px 20px;}
#logo img {width:80px;height:36px;}
#titel {float:left;margin:10px 0 10px 20px;color:white;font:400 20px/1.625 "Helvetica Neue", Helvetica, Arial, sans-serif;}
#view-tut {float:right;font-size:13px;font-weight:900;margin:10px 40px 5px 0;}
#view-tut ul {margin:0;}
#view-tut ul li {display:inline-block;*display:inline;zoom:1;margin:0 5px 0 0;}
#view-tut ul li a {display:block;padding:5px 10px;background:#04A4CC;color:#FFF;border-radius:20px;text-decoration:none;}
#view-tut ul li a:hover {background:#0097CD;}