/* start of "reset v2.0 | 20110126", taken from http://meyerweb.com/eric/tools/css/reset/ */

html, body, div, span, applet, object, iframe,
/*h1, h2, h3, h4, h5, h6, */ p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
/*b, u, i, */ center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
	color: #000;
	background-color: #fff;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* end of reset */

html {
	overflow-y: scroll;
	background-color: #eee;
}

body {
	font-family: tahoma, sans-serif;
	font-size: 12pt;
	background-color: #eee;
	padding: 0.7em 0 0.7em 0;
	line-height: 1.2;
}

input, textarea, select {
	font: inherit;
	font-size: 100%;
	vertical-align: middle;
	margin: 0 0.1em;
}

input[type=text], input[type=password], input.text, textarea, textarea.text, select.dropdown, input.mandatory, textarea.mandatory, select.mandatory {
	border: 1px solid #ddd;
	padding: 3px 2px;
}

input[type=button], input[type=submit], button {
	padding: 0.2em 0.6em;
	vertical-align: middle;
}

.number {
	text-align: right;
}

p {
	padding: 0.3em 0 0.5em 0;
}

hr {
	border: none;
	height: 1px;
	background-color: #ccc;
	margin: 1.4em 0;
}

h1, h2, h3, h4 {
	font-family: georgia, times new roman, serif;
	color: #d80843;
	margin: 0;
	padding: 0.3em 0em;
}

h1 {
	font-size: 200%;
}

h2 {
	font-size: 150%;
}

h3 {
	font-size: 125%;
}

h4 {
	font-size: 110%;
}

h5 {
	font-size: 105%;
}

b {
	color: #3c8dd9;
}

#main {
	position: relative;
	clear: both;
	max-width: 850px;
	margin: 0 auto;
	padding: 0.5em 1em 1em 1em;
	border: 1px solid #ccc;
	min-height: 600px;
	box-shadow: 2px 2px 10px #bbb;
	-webkit-box-shadow: 2px 2px 10px #bbb;
}

div.header {
	position: relative;
	min-height: 115px;
	background-image: url(logo.png);
	background-size: 160px;
	background-position: 100% 10px;
	background-repeat: no-repeat;
}

div.header h1 {
	font-size: 32px;
	position: relative;
	top: 0.4em;
	width: 70%;
	border-bottom: 1px dotted #d80843;
}

div.sheet {
	left: 16px;
	top: 120px;
	right: 20px;
	bottom: 0px;
}

div.question {
	position: relative;
	padding-left: 1.8em;
	margin: 0em 1em 1.5em 0em;
	background-image: url(q.png);
	background-size: 16px;
	background-position: 1px 1px;
	background-repeat: no-repeat;
}

div.comment {
	color: #c33;
	margin: 0.5em 0;
	padding: 0 0.2em;
	font-style: normal;
	font-weight: bold;
}

p.indented {
	padding-left: 2em;
}

div.toelichting {
	max-width: 36em;
}

div.form {
	padding: 0 0 0.5em 0;
}

div.form {
	padding: 0.5em 0;
}

div.form div.header {
	margin: 0.3em 0;
}

div.form div.header, div.form td.header {
	font-family: georgia, times new roman, serif;
	font-size: 150%;
	padding: 0.4em 0;
	color: #d80843;
}

div.form div.item {
	margin: 0 0 0.7em 0;
}

div.form div.label {
	color: #777;
	padding-left: 0.2em;
	margin: 0 0 0.2em 0;
}

div.form td.label, div.form div.label {
	color: #890;
}


div.form div.literal {
	font-style: italic;
	margin: 0.5em 0;
}

div.form table {
	margin: 0;
}

div.form table td {
	vertical-align: middle;
}

div.form td.label {
	color: #777;
	padding: 0.3em 0.5em 0.3em 1em;
}

div.form td.value {
	padding: 0.3em 0.5em 0.3em 1em;
}

div.form td.value span.note {
	font-size: 80%;
	padding-left: 0.3em;
	font-style: italic;
	color: #669;
	vertical-align: top;
}

div.form td.literal {
	font-style: italic;
	padding: 0.5em 0;
}

div.form div.navigation {
	margin: 0.5em 0;
}

input.incomplete, textarea.incomplete, select.incomplete {
	border: 1px solid #ddd;
	border-right: 4px solid #cd0042;
}

div.sync {
	text-align: center;
	background-color: #ffc;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	padding: 0.5em 1em;
	margin: 1em 0em;
	clear: both;
}

div.footer {
	font-family: tahoma, lucida sans, verdana, sans-serif;
	font-size: 90%;
	color: #777;
	text-align: center;
	margin: 0.5em 0;
}

div.footer b {
	font-family: georgia;
	font-size: 111%;
	color: #559;
}

div.alert, div.error, div.log {
	font-family: verdana, sans-serif;
	font-size: 85%;
	padding: 0.5em 0.7em;
	text-align: left;
}

div.error {
	white-space: pre;
	/*margin-top: 1em;
	margin-bottom: 1em;*/
}

div.alert, div.log {
	color: white;
	background-color: #447; /*#006;*/
	border: 1px solid #ccc;
	margin: 1em 0 1em 0;
}

div.alert {
	margin: -0.6em 0 1em 0;
}

div.log {
	margin: 1em 0 1em 0;
}

div.alert .entry {
}

div.alert .prefix {
	color: yellow;
	white-space: pre;
	display: block;
}

div.alert .stack {
	color: silver;
	white-space: pre;
	display: block;
}

div.error {
	color: black;
	background-color: yellow;
	border: 2px solid blue;
}

div.log {
	height: 7em;
	overflow-y: scroll;
}

div.message {
	color: #c33;
	background-color: #fff0f0;
	text-align: center;
	margin: 0.5em 0em 0.7em 0em;
	padding: 0.5em 0em;
	border-top: 1px solid #e33;
	border-bottom: 1px solid #e33;
	border-radius: 20px;
}

div.debug {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 1em 0em;
	margin: 2em 0em;
}

div.data_grid table {
	font-size: 95%;
	border: 1px solid #ddd;
	margin: 0.3em 0px;
	width: 80%;
}

div.data_grid table tr th {
	background-color: #f0f0ff;
	color: #579;
	text-align: left;
	font-weight: normal;
	border-bottom: 1px solid #ddd;
}

div.data_grid table tr td, div.data_grid table tr th {
	padding: 0.25em 0.5em;
	white-space: nowrap;
	overflow: hidden;
}

div.data_grid table * td {
	cursor: pointer;
}

tr.hilighted {
	background-color: #ddf;
}

div.pager {
	text-align: center;
	font-size: 90%;
}

div.pager a.nav {
	padding-left: 0.4em;
	padding-right: 0.4em;
	width: 2.5em;
}

div.pager input.nav {
	padding: 0.1em 0.4em;
	width: 2.5em;
}

.pagenr {
	display: inline-block;
	padding-left: 0.3em;
	padding-right: 0.3em;
	min-width: 2em;
}

.pagenr i {
	font-size: 75%;
	color: #aaa;
	padding-left: 0.2em;
}

div.data_grid th.col1 {
	width: 11em;
}

.floatr {
	float: right;
}

.floatl {
	float: left;
}

input.button {
	min-width: 4em;
}

div.range_grid table {
	width: 100%;
	margin: 0.7em 0;
}

div.range_grid table th {
	padding: 0 0.2em 0.3em 0.2em;
	white-space: nowrap;
	color: #cd0042;
}

div.range_grid table table.range_grid td {
	padding: 0.3em 0.3em;
}

div.range_grid table td.rlabel {
	text-align: left;
	padding: 0.3em 1em 0.3em 1em;
}

div.range_grid table td input {
	margin: 0;
	padding-left: 0em;
	padding-right: 0em;
}

div.range_grid table td label {
	width: 2.4em;
}

div.single_answer table td, div.multi_answer table td {
	padding: 0.2em 0.3em;
	vertical-align: middle;
}

div.single_answer table td label, div.multi_answer table td label {
	padding-right: 3em;
}

i {
	color: #999;
}

div.remark {
	font-family: georgia, times roman, serif;
	font-style: italic;
	font-size: 105%;
	border-left: 4px solid #f8f800;
	background-color: #ffc;
	padding: 0.5em 0.7em;
	margin: 1.7em 1em 2.5em 0em;
	box-shadow: 2px 2px 5px #ddd;
}

#main div.tail {
	position: absolute;
	bottom: 1em;
	right: 1.5em;
}

span.progress {
	position: relative;
	left: 0px;
	right: 0px;
	top: 0px;
	font-size: 120%;
}

div.organisation {
	font-size: 80%;
}

div.reflexis {
	font-family: tahoma, verdana, sans-serif;
	font-size: 80%;
	text-align: center;
	color: #999;
	padding: 0.4em 0;
}

div.reflexis a, div.reflexis a:visited {
	color: #999;
}

div.reflexis a:hover {
	color: #cd0042;
}

div.indent {
	padding-left: 1em;
	margin: 0;
}

div.sync {
	color: #cd0042;
	font-weight: bold;
	background-color: #fff;
	margin: 0.5em 0;
	border: none;
}

span.prefill {
	font-size: 80%;
	color: #696;
}

div.matrix table tr {
	height: 2.2em;
}

div.matrix table tr.header {
	height: 1.5em;
}

div.matrix table th {
	color: #d80843;
	padding: 0.3em 0.5em;
	text-align: right;
}

div.matrix table td {
	vertical-align: middle;
	text-align: right;
}

div.matrix table td input {
	text-align: right;
	border: none;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
	background-color: #f8f8f8;
}

div.matrix table td input.invalid {
	background-color: #fdd;
	border-bottom: 1px solid #f77;
}

div.matrix table td input[readonly] {
	background-color: #fff;
	color: #777;
}

div.matrix table td.label {
	color: #669;
}

div.matrix table td.value {
	width: 6em;
	padding-right: 0.5em;
	border-left: 1px solid #eee;
}

div.matrix table div.note {
	font-size: 80%;
	text-align: right;
	padding-left: 1em;
	color: #999;
}

div.note {
	font-size: 90%;
	color: #669;
	margin: 0.2em 0;
}

::-webkit-input-placeholder {
	font-size: 80%;
	color: #696;
	padding: 0.2em 0;
}
::-moz-placeholder  { color: #696 } /* Firefox 19+ */
:-moz-placeholder  { color: #696 } /* Firefox 18- */
::-ms-input-placeholder { color: #696 }
:-ms-input-placeholder { color: #696 }

@media screen and (max-width: 992px) {

body {
	background-color: #fff;
	margin: 0em 0.5em;
}

html {
	background-color: #fff;
}

#main {
	width: 100%;
	border: none;
	margin: 0;
	padding: 0;
	box-shadow: none;
	-webkit-box-shadow: none;
}

div.header {
	background-size: 100px;
	background-position: 98% 0px;
}

div.matrix {
	overflow-x: auto;
}

#main div.tail {
	position: relative;
	bottom: 0em;
	right: 1.5em;
}

}