/* $Id: zen.css,v 1.14.2.1 2009/02/13 07:46:04 johnalbin Exp $ */

@viewport {
  zoom: 1.0;
  width: device-width;
}

/**
* Algemeen
*/

#header {
  width: 100%;
  padding-bottom: 10px;
}

#header img {
  width: 75%;
  margin: 10px;
}

#languages {
  width: 60px;
  margin: auto;
}

#languages ul {
  margin: 0;
  padding: 0;
}

#languages ul li {
  display: inline;
  list-style-type: none;
}

#content {
  padding: 10px;
}

/**
* Formulieren
*/

.form-item, /* Wrapper for a form element (or group of form elements) and its label */
.form-checkboxes,
.form-radios {
  margin: 1em 0;
}

.form-item input.error, /* Highlight the form elements that caused a form submission error */
.form-item textarea.error,
.form-item select.error {
  border: 2px solid #c00;
}

.form-item textarea, /* Make sure the textfields/area's fit inside the mobile width and are not too large */
.form-text { 
  width: 98%;
}

.form-item label { /* The label for a form element */ 
  display: block;
  font-weight: bold;
}

.form-item label.option { /* The label for a radio button or checkbox */ 
  display: inline;
  font-weight: normal;
}

.form-required { /* The part of the label that indicates a required field */
  color: #c00;
}

.form-item .description { /* The descriptive help text (separate from the label) */
  font-size: 0.85em;
}

.form-checkboxes .form-item, /* Pack groups of checkboxes and radio buttons closer together */
.form-radios .form-item {
  margin: 0.4em 0;
}

.form-submit { /* The submit button */ 
}

.container-inline div, .container-inline label { /* Inline labels and form divs */
  display: inline;
}

/**
* Pager
*/

.item-list ul.pager {
  clear: both;
  text-align: center;
  margin: 0;
  padding: 0 0 0 2em;
}

.item-list ul.pager li {
  background-image: none;
  display: inline;
  list-style-type: none;
  padding: 0.5em;
  margin: 0;
}

/**
* Blokken
*/

.node-type-be-imgs .content .gv_galleryWrap { /* TODO: show image strips but no slideshows => add seperate class */
  display: none !important;
}

.node-type-gallery .content .imag img,
.node-type-gallery-image .content .imag img,
.node-type-be-imgs .content .be_imgs img,
.node-type-be-imag .content .imag img,
.node-type-sc-products .content img,
.node-type-sc-categories .content img,
.node .content .blockeditor .mdia video,
.node .content .blockeditor .embv iframe {
  width: 100%;
}

.node .content .blockeditor .file .file_item .tinymcefield_file-icon,
.node .content .blockeditor .file .file_item .tinymcefield_file-desc {
  display: inline;
  margin-right: 5px;
}

.node-type-be-code .content iframe,
.node-type-be-gmap .content iframe,
.node-type-be-gmap-text .content iframe,
.node .content .blockeditor .mdia .mejs-video {
  width: 100% !important;
  height: 100% !important;
}

.node-type-webform .content .webform-datepicker .webform-calendar {
  display: none;
}

.node-type-webform .content .webform-container-inline div {
  display: inline;
}

/* Mobile portrait view - blokken */
@media only screen and (max-width: 480px) {
  .node .content .imag img {
    width: 100%;
  }
}

/**
* Status + Error messages
*/
.form-item input.error, .form-item textarea.error, .form-item select.error {
  border: 2px solid red !important;
}

.messages.status a:link,
.messages.status a:hover,
.messages.status a:active,
.messages.status a:visited {
  color: #000;
  text-decoration: underline;
}

.messages.error a:link,
.messages.error a:hover,
.messages.error a:active,
.messages.error a:visited {
  color: #900;
  text-decoration: underline;
}

/* Alter width: 100%; to auto so tables leave the same space on the right side as the left side */
@media only screen and (max-width: 768px) {
  table, thead, tbody, th, td, tr {
    width: auto;
  }
}