/***********************************************************
 * File: melle.css
 * Project: melle-schilder . nl 
 *
 * Copyright: (c) 2012 Hippo Software. All rights reserved
 *            <http://www.hipposoftware.nl>
 *
 * Author: Bert Bulder <mailto:bertb@hipposoftware.nl>
 *         Brouwersgracht 48, 1013 GX Amsterdam, 020-6255344
 *
***********************************************************************/
body {
  color: #f7e8d1;
  font: 90%/1.8 BrownLight, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  background-color: #717171;
  text-align: center;
  margin: 0;
  margin-top: 10px;
}

em {
  font-style: normal;
  font-family: BrownLightItalic;
}

strong {
  font-weight: normal;
  font-family: BrownMedium;
}

/* hoofdstructuur */
div#wrapper {
  width: 95%;
  max-width: 1300px;
  min-height: 650px;
  margin: 10px auto;
  text-align: left;
  background-color: #fff;
  color: #333;
  border: 1px solid gray;
  line-height: 145%;
}

div#wrapper.werken {
  max-width: 99%;
}

header {
  padding-top: 32px;
  height: 60px;
  padding-left: 175px;
  padding-left: 205px; /* BB 2021-05-18 */
  background-color: #fff;
  font-family: BrownLight;
  font-weight: normal;
  color: #a7a9ac;
  font-size: 200%;
  cursor: pointer;
}

header span.kop {
  padding: 0;
  margin: 0;
  font-family: BrownMedium;
  font-weight: normal;
  font-style: normal;
  font-size: 160%;
  color: #6d6e71;
  margin-right: 6px;
}

header span.divider {
  color: #3d9acf;
  font-size: 110%;
  padding-left: 4px;
  padding-right: 4px;
}

.menu-button {
  display: none;
}

nav.breed, nav.smal,
div.breed, div.smal {
  float: left;
  width: 360px;
  width: 400px; /* BB 2021-05-18 */
  margin: 0;
  padding: 0;
}

nav.smal,
div.smal {
  width: 174px;
  width: 204px; /* BB 2021-05-18 */
}

nav.main {
  font-family: BrownLight;
  font-weight: normal;
  font-style: normal;
  padding-left: 24px;
  width: 150px;
  width: 180px; /* BB 2021-05-18 */
  font-size: 110%;
  line-height: 1.54;
  float: left;
}

nav.main a {
  color: #a7a9ac;
}

nav.main a:hover, nav.main a.selected {
  color: #c73715;
}

nav.main li.category {
  padding-top: 12px;
}

nav.main li.category a {
  color: #3d9acf;
  font-family: BrownMedium;
  font-weight: normal;
  font-style: normal;
}

nav.main li.category a:hover, nav.main li.category a.selected {
  color: #c73715;
}

nav.main li.category.divider {
  line-height: inherit;
  padding-bottom: 12px;
}

nav.main li.divider2 {
  margin-top: 0px;
}

nav.kaders {
  float: left;
  width: 100%;
  height: 189px;
}

div.fotokader,
nav.fotokader {
  float: left;
  width: 100%;
  height: 180px;
}

div.fotokader div,
nav.fotokader div {
  float: left;
  width: 178px;
  height: 180x;
  margin-right: 14px;
}

aside.left {
  float: left;
  width: 178px;
}

/* tijdelijk ivm boek koos levy */
body.home aside.left {
  float: left;
  width: 170px;
  padding: 0 8px 0 0;
  border-right: 1px solid gray;
}

/* -- */
aside.left p {
  clear: both;
  font-family: BrownLight;
  font-weight: normal;
  font-style: normal;
  padding: 19px;
  color: #3d9acf;
  font-size: 90%;
}

/* tijdelijk ivm boek koos levy */
body.home aside.left p {
  padding: 19px 9px 19px 4px;
}

/* -- */
section.content {
  margin-left: 358px;
  margin-left: 390px; /* BB 2021-05-18 */
  border-left: 1px solid gray;
  padding: 0 0 0 8px;
  max-width: 70%;
  text-align: left;
}

/* tijdelijk ivm boek koos levy */
body.home section.content {
  padding: 0;
  border-left: none;
}

/* -- */
/* tijdelijk ivm expo */
body.home section.content .museumtekst {
  font-size: 1rem;
  width: 100%;
  max-width: 600px;
  margin-left: 30px;
}

body.home section.content .museumtekst a {
  color: #3d9acf;
  font-family: BrownMedium;
  font-weight: normal;
  font-style: normal;
}

section.content article {
  padding-top: 19px;
  max-width: 550px;
  padding-right: 0px;
}

section.content article.bio {
  max-width: 500px;
  margin-left: 23px;
}

section.content article.bio.jezus {
  max-width: 550px;
  margin-left: 23px;
  padding-right: 0;
}

section.content article.formulier {
  margin-left: 23px;
  padding-right: 0;
  width: 500px;
  max-width: 450px;
}

section.content article.bio a, section.content article.bio a:active {
  color: #c73715;
  text-decoration: none;
  border: none;
}

section.content article.bio a:hover {
  border-bottom: #c73715 1px dotted;
}

section.content article h2 {
  font-family: BrownMedium;
  font-weight: normal;
  font-style: normal;
  padding: 0;
  margin: 0;
  color: #489acf;
  font-size: 120%;
}

section.content.big img {
  width: 95%;
  height: auto;
  max-width: 95%;
}

section.content.werk {
  margin-left: 174px;
  margin-left: 204px; /* BB 2021-05-18 */
  max-width: 85%;
  border: none;
}

section.content.werk div.werkcontainer {
  float: left;
  width: 178px;
  height: 180px;
  overflow: hidden;
  margin-right: 14px;
  margin-bottom: 14px;
  background-position: center;
  background-size: 178px 180px;
  background-repeat: no-repeat;
}

footer {
  clear: both;
  margin: 0;
  padding: 1em 0.5rem 0.5rem 32.3%;
  color: #888 !important;
  text-decoration: none;
}

footer a {
  color: #888 !important;
  text-decoration: none;
}

body.work footer {
  padding-left: 13.1rem;
}

nav p {
  margin: 0 0 1em 0;
}

section.content h2 {
  margin: 0 0 0.5em 0;
}

#tabellevensloop, #tabeltentoon {
  max-width: 500px;
  margin-top: -5px;
}

#tabellevensloop td, #tabeltentoon td {
  padding-top: 5px;
  padding-bottom: 5px;
}

.kader {
  width: 156px;
  padding-left: 22px;
  height: 110px;
  padding-top: 16px;
  font-family: BrownLight;
  font-weight: normal;
  font-style: normal;
  font-size: 100%;
  color: #000;
  float: left;
  margin-right: 14px;
}

.kader.blauw:hover, .kader.blauw.selected {
  background-color: #489acf;
  cursor: default;
}

.kader h2 {
  color: #fff;
  padding: 0;
  margin: 0;
  font-family: BrownMedium;
  font-weight: normal;
  font-style: normal;
  font-size: 100%;
}

.blauw {
  background-color: #489acf;
}

.rood {
  background-color: #c53d01;
}

.grijs {
  background-color: #a7a9ac;
}

.grijs.selected {
  background-color: #c53d01;
}

.grijs:hover {
  background-color: #c53d01;
  cursor: pointer;
}

.tentoonstelling {
  width: 410px;
  padding: 0;
  height: 126px;
}

kader.tentoonstelling:hover {
  background-color: #fff;
}

.row {
  width: 410px;
  height: 50px;
}

.lower {
  margin-top: 18px;
}

.t_item {
  width: 22%;
  padding-top: 20px;
  height: 38px;
  margin-right: 3%;
  text-align: center;
  font-family: BrownMedium;
  font-weight: normal;
  font-style: normal;
  font-size: 110%;
  background-color: #a7a9ac;
  vertical-align: middle;
  color: #fff;
  float: left;
  cursor: pointer;
}

.t_item:hover, .t_item.selected {
  background-color: #c53d01;
}

.t_item.selected {
  cursor: default;
}

div.t_item a {
  color: #FFF;
}

.solo {
  color: #489acf;
  font-family: BrownMedium;
  font-weight: normal;
  font-style: normal;
  font-size: 120%;
}

#box {
  display: none;
}

/* contact formulier */
form input.veld36, form textarea.area36 {
  width: 337px;
  margin-bottom: 8px;
  padding: 4px;
  border: #CCCCCC 1px solid;
  height: 14px;
}

form textarea.area36 {
  height: 200px;
}

form input.button {
  background-color: #c53d01;
  color: #fff;
  border: #ccc 1px solid;
  padding: 2px 8px 5px 8px;
  margin-top: 10px;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 1px;
}

/* item pagina */
.bijschrift {
  color: #A7A9AC;
  margin-top: 16px;
  float: left;
  width: 300px;
}

table.pijltjes {
  margin-top: 16px;
  margin-left: 300px;
}

/* tentoonstellingen */
/*  a names geen links kleuren */
table#tabeltentoon tbody tr td a {
  color: #333333;
}

table#tabeltentoon tbody tr td a:hover {
  color: #333333;
  border-bottom: none !important;
  text-decoration: none;
}

/* formulier elementen - zoek pagina */
input.veld36 {
  width: 160px;
  height: 15px;
  border: #999999 1px solid;
  margin-bottom: 3px;
  font: 11px/16px Verdana, Arial, Helvetica, sans-serif;
  padding-left: 3px;
  border: #CCCCCC 1px solid;
}

textarea.area36 {
  width: 150px;
  height: 200px;
  border: #999999 1px solid;
  font: 11px/16px Verdana, Arial, Helvetica, sans-serif;
  padding-left: 3px;
  margin-bottom: 3px;
}

input.button {
  background-color: #c73715;
  color: #FFFFFF;
  font: 10px/16px Verdana, Arial, Helvetica, sans-serif;
  font-variant: small-caps;
  width: 90px;
  height: 26px;
  padding-left: 3px;
  text-align: left;
  cursor: pointer;
}

input.buttonzoek {
  background-color: #c73715;
  color: #FFFFFF;
  font: 10px/16px Verdana, Arial, Helvetica, sans-serif;
  font-variant: small-caps;
  width: 94px;
  height: 22px;
  margin-bottom: 3px;
  text-align: center;
  cursor: pointer;
}

input.veld34 {
  width: 162px;
  height: 21px;
  margin-bottom: 3px;
  font: 10px/16px Verdana, Arial, Helvetica, sans-serif;
  padding-left: 3px;
  margin-left: 4px;
  border: #CCCCCC 1px solid;
}

input.check {
  margin-top: 4px;
}

select.select36 {
  width: 150px;
  height: 22px;
  margin-bottom: 3px;
  font: 10px/22px Verdana, Arial, Helvetica, sans-serif;
  padding-left: 3px;
  margin-left: 4px;
  border: #CCCCCC 1px solid;
}

form table tbody tr td {
  padding: 5px 0;
}

form table tbody tr td input.check {
  margin-right: 5px;
}

/* --- viewport configuration voor de mouseover effecetn bij werk--------------- */
.viewport {
  border: none;
  float: left;
  height: 180px;
  margin: 0;
  overflow: hidden;
  position: relative;
  width: 178px;
  margin-right: 14px;
  margin-bottom: 14px;
  vertical-align: middle;
}

/* This is so that the 2nd thumbnail in each row fits snugly. You will want to add a similar
   class to the last thumbnail in each row to get rid of the margin-right. */
.no-margin {
  margin-right: 0;
}

/* --- Link configuration that contains the image and label ----------------------------- */
.viewport a {
  display: block;
  position: relative;
  width: 178px;
}

.viewport a img {
  left: 0;
  position: relative;
  top: 0;
}

/* --- Label configuration -------------------------------------------------------------- */
.viewport a span {
  display: none;
  font: 100%/1.5 BrownLight, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  height: 100%;
  padding-top: 0;
  position: absolute;
  text-align: left;
  text-decoration: none;
  width: 80%;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 10%;
  z-index: 100;
}

.viewport a span em {
  display: block;
  font-size: 100%;
  font-weight: normal;
}

/* --- Dark hover background ------------------------------------------------------------ */
.dark-background {
  background-color: rgb(197, 61, 1);
  color: #fff;
  text-shadow: #000 0px 0px 20px;
}

.dark-background em {
  color: #ccc;
}

/**

/* pagina links */
div.boek {
  width: 100%;
  display: block;
  margin-top: 12px;
}

table.links {
  width: 60%;
  float: left;
}

table.rechts {
  margin-left: 3%;
  width: 34%;
  float: left;
}

/*  ~~  voor iPad  ~~  */
@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
  #wrapper {
    width: 768px;
    font: 120%/1.5 BrownLight, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  }
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
  /* For portrait layouts only */
  #wrapper {
    width: 1024px;
  }
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
  /* portrait styles here */
  #wrapper {
    width: 768px;
  }
}

/*# sourceMappingURL=melle.css.map */