@import url('/stylesheets/duo/_typography.css');
@import url('/stylesheets/duo/_form.css');

.input_hint {
  color:#999;
}
textarea.text .large_ta {
    width:600px;
    height: 800px;
}
#login_form input {
  vertical-align:middle;
}

#login_button {
  margin-left:5px;
}

#login_header {
  margin-bottom:1em;
}

#login_form {
  margin-top:1.5em;
}

#login_form input[type=text] {
  line-height:1.5em;
}

.survey {
  max-width:1050px;
}

/* survey styling start */

.survey_body {
  margin-top:1.5em;
}

.elements, .multiple_elements, .radio_options, .page_buttons, .inputs, .buttons, .group_elements {
  list-style:none;
  margin:0;
  padding:0px 0px 0px 0px;
}

.inputs {
  margin-bottom:1em;
}

.page_header h2 {
  font-weight: bold;
  color:#152E4B;
}
.page_buttons .button {
  width:110px;
}

/* survey header */

.survey_header {
  margin-bottom:1.5em;
  overflow:hidden;
  zoom:1;
  padding-bottom:15px;
}

.survey_header a {
  color:#152e4b;
}

.survey_header ul {
  float:right;
  margin-top:0;
  list-style:none;
}

.survey_header p {
  margin-top:1em;
  margin-bottom:0;
}

.survey_header ul li {
  display:inline-block;
  *display:inline;
  border-right:1px solid #8cbcd9;
  padding-right:7px;
  margin-right:7px;
}

.survey_header ul li, .survey_header ul li span {
  color:#0c75bd;
}

.survey_header ul li:last-child {
  border:none;
  margin-right:0;
  padding-right:0;
}

.survey_header .progress {
  clear:right;
  margin-top:0.2em;
  float:right;
}

.survey_header h1 {
  margin-bottom:0.4em;
  color:#152E4B
}

.survey_header h2 {
  margin-bottom:0;
  padding-top:0.2em;
  color:#0c75bd;
}


/* progress indicator */

.progress {
  overflow:auto;
  display:block;
  zoom:1;
  white-space:nowrap;
  line-height:1.5;
  font-size:0.9em;
}

.progress table {
  border:1px solid #0C75BD;
  width:100px;
  margin:0;
  padding:1px;
  background:#fff;
  display:inline-block;
}

.progress td {
  padding:0px 3px;
  border:none;
}

.progress td.progress_done {
  background-color:#4AA02C;
  color:#fff;
  text-align:right;
}

.progress span {
  color: #0C75BD;
  display:inline-block;
  margin-right:5px;
  vertical-align:middle;
}

/* page */

.page {
  overflow:hidden;
  zoom:1;
}

.page_elements {
  margin:0;
  margin-bottom:1.5em;
}

.page_elements > li {
  margin-bottom:2em;
}

.page_elements > li:last-child {
  margin-bottom:0;
}

.page_buttons {
  margin:0 auto;
  position:relative;
}

.page_buttons ol {
  list-style:none;
  position:relative;
  margin:0 auto;
  display:block;
}

.page_buttons li {
  float:right;
  margin:0 5px;
  width:110px;
  position:relative;
}

/* elements */

.element > .header p {
  margin-bottom:0.5em;
}

.heading {
  line-height:1.5em;
  margin-bottom:0;
}

.heading.with_number label, .heading.with_number p, .heading.with_number .title {
  margin-left:27px;
  display:block;
}

.number {
  color:#30A0CE;
  display:inline-block;
  font-weight:bold;
}

.indent {
  margin-left:28px;
}

.hint {
  font-size:0.8em;
  color:#888;
  margin-top:0.7em;
}

.error_hint {
  color:#8A1F11;
  margin-bottom:0.5em;
}

.has_error input[type='text'] {
  border-color:#8A1F11;
}

.header.has_error .heading {
  color:#8A1F11;
}

/* matrix */

.matrix table {
  border-collapse:collapse;
  width:100%;
  margin:0;
  font-size:0.85em;
}

.matrix .hint {
  text-align:center;
  margin-top:1.5em;
}

.matrix_row th .number {
  width:15px;
}

.matrix_row th {
  font-weight:normal;
}

.matrix_row {
  vertical-align:middle;
  height:50px;
}

.matrix .number_column {
  vertical-align:middle;
  width:25px;
}

.matrix th {
  padding:5px 10px;
  color: #333;
  font-size:1.1em;
  vertical-align:middle;
  border-top:1px solid #ddd;
}

.matrix .has_error th, .matrix .has_error th .number {
  color:#8A1F11;
}

.matrix .spacer .header, .matrix .spacer .header p {
  margin-bottom:0;
}

.matrix .spacer .header .number {
  width:auto;
}

.matrix .spacer .header .indent {
  margin-left:35px;
}

/*
.matrix .has_error th, .matrix .has_error td {
  background:#fde6e6;
}*/

.matrix th.column_header {
  background-color:#fff;
  padding:8px 10px;
  vertical-align:middle;
  white-space:normal;
  width:30px;
}

.matrix th.column_header, .matrix td {
  border-left:1px solid #ddd;
  text-align:center;
  border-top:1px solid #ddd;
}

.matrix th.column_header {
  border-top:1px solid #ddd;
  font-weight:bold;
}

.matrix thead th.last {
  border-right:1px solid #ddd;
}

.matrix td {
  text-align:center;
  padding:5px 10px;
  vertical-align:middle;
}

.matrix td.comment_button_wrap {
  border-left:none;
}

.matrix tr.odd {
  background-color:#F4F6F8;
}

.matrix tbody tr:hover, .matrix tbody tr:hover th {
  background:#e9ecf3;
}

.matrix th.spacer {
  border-top:0;
  background:#fff;
  border-left:0;
  padding-left:0;
}

.matrix td select {
  margin:0;
}

.matrix td input.text {
  width:50px;
}

/* radio element */

.other {
  display:inline-block;
  margin-left:25px;
}

.other > .header > p {
  color:#222;
  margin-bottom:0;
}

.other > .header {
  margin-bottom:0.7em;
}

.radio_options > li, .radio_options > li > input {
  vertical-align:top;
}

.radio_options > li {
  margin-bottom:0.3em;
  line-height:1.5em;
}

.radio_options > li:last-child {
  margin-bottom:0;
}

.radio_options > li > .other {
  margin-top:0px;
}

.radio_options > li > label, .multiple_item_check > label {
  display:block;
  margin-left:25px;
  padding-top:2px;
}

.radio_options > li > input, li.multiple_item_check > input {
  float:left;
  margin-top:5px;
  line-height:1.5em;
}

.radio_options.horizontal > li {
  display:inline-block;
}

.radio_options.horizontal > li > label {
  display:inline;
  margin-left:5px;
}

.radio_options.horizontal > li > input {
  float:none;
}

.multiple_select > select {
  min-width:100px;
}

/* group */

.group_elements > li {
  margin:1em 0;
}

.group_elements li.grouped_element, .group_elements > li.grouped_element:first-child {
  margin-top: 0em;
}

.group_elements > li:last-child {
  margin-bottom:0;
}


.element_header {
  margin-bottom:0.5em;
}

.group_header.level_1 {
  margin-bottom:1em;
}

.group_header {
  background:#efefef;
  padding:5px 10px;
}

.group_header.horizontal {
  background:transparent;
  padding:0;
}


.group_elements.horizontal > li {
  display:inline-block;
  vertical-align:top;
  margin:0 1em 0 0;
}

.group_elements.horizontal > li > .header .heading {
  color:#666;
}

.group_elements.horizontal > li > .header {
  margin-bottom:0.5em;
}

.group_elements.horizontal > li > .header.has_error .heading {
  color:#8A1F11;
}

.group > .element_body > .hint {
  margin-top:1em;
}

/* multiple_item_check */

.multiple_item_check {
  margin-bottom:0.3em;
  line-height:1.5em;
}

.multiple_item_check > .hint {
  margin-left:23px;
}

/* comment */

.comment_button {
  background:transparent url(/images/comment_new.gif) left top no-repeat;
  width:16px;
  cursor:pointer;
  height:16px;
  float:right;
}

.has_comment {
  background-image:url(/images/comment_yellow.gif);
}

.comment_dialog {
  display:none;
}

.ui-widget {
  font-size:0.9em;
}

.ui-dialog .ui-dialog-titlebar {
  padding-bottom:0.5em;
}

.ui-dialog .ui-dialog-content {
  padding:1em;
}

.ui-dialog .ui-dialog-buttonpane {
  margin-top:0;
}

.comment_dialog textarea {
  width:464px;
  margin:0;
  border-color:#cbd9ed;
  height:125px;
}

.comment_dialog p {
  text-align:left;
  line-height:1.6em;
  margin-bottom:1em;
}

.ui-datepicker-trigger {
  border:none;
  padding:0;
  margin-left:5px;
  width:17px;
  height:25px;
  display:inline-block;
  background:transparent url(/images/datepicker-icon.gif) left top no-repeat;
}

body {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 10pt;
  color: #152e4b;
  font-family: arial;
  vertical-align: baseline;
  background-image: url('/images/background_body.png');
  background-repeat: repeat-x;
}

body.schilder {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 10pt;
    color: #152e4b;
    font-family: arial;
    vertical-align: baseline;
    background-image: url('/images/background_body_schilder.png');
    background-repeat: repeat-x;
}

body.teacher {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 10pt;
    color: #152e4b;
    font-family: arial;
    vertical-align: baseline;
    background-image: url('/images/background_body_teacher.png');
    background-repeat: repeat-x;
}

body.werk {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 10pt;
    color: #152e4b;
    font-family: arial;
    vertical-align: baseline;
    background: transparent url('/images/background_body_werk.jpg') 0 0 repeat-x;
}

#wrapper {
    background-repeat: no-repeat;
    min-height: 615px;
    margin-top: 0px;
    padding: 0px;
}

.wrapper_po {
  background-image: url('/images/background_container_po.png');
}

.wrapper_vo {
  background-image: url('/images/background_container_vo.png');
}

.wrapper_schilder {
    background-image: url('/images/background_container_schilder.png');
}

.wrapper_teacher {
    background-image: url('/images/background_container_teacher.png');
}
.wrapper_werk {
    background-image: url('/images/background_werkreflectie.jpg');
}

.survey_header {
  border:none;
  margin-left:225px;
}

.survey {
  margin:0px 100px;
  padding-top:20px;
  padding-bottom:20px;
}

.survey_body {
  margin-left:145px;
  margin-top:50px;
}




.inputbox {
}

.login_form td {
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 20px;
    height: 115px;
    vertical-align: top;
}

.login_form td strong {
    display:block;
    margin-bottom:5px;
}

.login_form td button {
    display:inline;
    padding:0;
    border:none;
    vertical-align:bottom;
}

#content {
    margin-left: 280px;
    margin-top: 20px;

}

.splash td {
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 20px;
    height: 115px;
    vertical-align: top;
}

#splash_right {
    background-color: #CEE9F9;
    padding: 20px;
    min-height: 300px;

}

#splash_left {
    background-color: #fff;
    padding: 20px;
    width: 420px;
    min-height: 300px;
}

.survey_body .notification {
  margin-bottom:1em;
}