HTML, BODY {
	margin: 0px;
	padding: 0px;
	font-family: Verdana, sans-serif;
	font-size: 13px;
  height: 100%;
}

BODY.ochtend { background: #18abfb; color: #FFFFFF; }
BODY.middag { background: #1998fb; color: #FFFFFF; }
BODY.avond { background: #9c3f16; color: #FFFFFF; }
BODY.nacht { background: #002433 url(../images/back_nacht.jpg); color: #FFFFFF; }

#container {
	position: relative;
	min-height: 100%;
}
.ochtend #container { background: url(../images/back_image_opgang.jpg) repeat-x center bottom; }
.middag #container { background: url(../images/back_image.jpg) repeat-x center bottom; }
.avond #container { background: url(../images/back_image_ondergang.jpg) repeat-x center bottom; }
.nacht #container { background: url(../images/back_image_nacht.jpg) repeat-x center bottom; }

/***************************************/
/***************************************/

.page-container {
  margin: 0 auto;
  width: 960px;
  overflow: hidden;
}

.grid {
  display: inline;
  position: relative;
  float: left;
  box-sizing: border-box;
  padding-bottom: 10px;
}

.grid-12 { width: 960px; }
.grid-11 { width: 880px; }
.grid-10 { width: 800px; }
.grid-9 { width: 720px; }
.grid-8 { width: 640px; }
.grid-7 { width: 560px; }
.grid-6 { width: 480px; }
.grid-5 { width: 400px; }
.grid-4 { width: 320px; }
.grid-3 { width: 240px; }
.grid-2 { width: 160px; }
.grid-1 { width: 80px; }

.hide-on-desktop { display: none; }
.hide-on-mobile { }

/***************************************/
/***************************************/

H1 {
  font-family: 'Handlee', cursive;
  font-size: 25px;
  margin: 15px 0px 5px 0px;
}

H2 {
  font-family: 'Handlee', cursive;
  font-size: 18px;
}

A {
  color: #FFFFFF;
  text-decoration: none;
}

A:hover,
A:focus {
  text-decoration: underline;
}

/***************************************/
/***************************************/

HEADER {
	display: block;
  position: fixed;
  border-bottom: 1px dotted #065880;
  width: 100%;
  z-index: 100;
  font-family: 'Handlee', cursive;
}

SECTION {
	display: block;
  position: relative;
  padding-top: 58px;
  overflow: hidden;
}

FOOTER {
	display: block;
  position: relative;
	height: 150px;
}

/***************************************/
/***************************************/

.header-background {
  background: url(../images/nav-background.jpg);
  overflow: hidden;
}

.header-border {
  border: 1px dashed #FFFFFF;
  border-top: 0px;
  margin: 0px 3px 3px 3px;
}

#logo {
	display: block;
	float: left;
	width: 360px;
  padding-top: 5px;
  color: #FFFFFF;
}

#logo .logo-subnaam {
  float: left;
  font-size: 20px;
  padding: 0 10px 0 0;
}
#logo .logo-naam {
  float: left;
  font-size: 38px;
  padding: 0 20px 0 0;
}
#logo .logo-jaar{
  float: left;
  font-size: 17px;
  width: 30px;
}

#maan {
	position: absolute;
	width: 71px;
	height: 71px;
  left: -100px;
  top: 50px;
}
.ochtend #maan { display: none; }
.middag #maan { display: none; }
.avond #maan {	display: none; }
.nacht #maan {	display: block; }

/***************************************/
/***************************************/

NAV {
	display: block;
  overflow: hidden;
}

NAV UL {
  list-style: none;
  margin: 0;
  padding: 0;
	float: right;
}

NAV UL LI {
  margin: 0;
  padding: 0;
	float: right;
}

NAV UL LI A {
  display: block;
  padding: 15px;
  font-size: 18px;
  text-decoration: none;
}
.ochtend NAV A {	color: #FFFFFF; }
.middag NAV A { color: #FFFFFF; }
.avond NAV A {	color: #FFFFFF; }
.nacht NAV A {	color: #FFFFFF; }

NAV A:hover,
NAV A:focus {
  background: rgba(18,52,86,0.3);
  text-decoration: underline;
}

NAV A.selected {
  background: rgba(18,52,86,0.3);
}

A#nav-toggle {
  padding: 15px;
  font-size: 18px;
  text-decoration: none;
	float: right;
}
A#nav-toggle:hover,
A#nav-toggle:focus {
  background: rgba(18,52,86,0.3);
  text-decoration: underline;
}

/***************************************/
/***************************************/

UL.submenu {
  list-style-type: square;
  padding: 0px 0px 0px 14px;
}

UL.submenu LI {
  margin: 0px 0px 3px 0px;
}

UL.submenu LI A {
  padding: 2px 4px;
}

UL.submenu LI A:hover,
UL.submenu LI A:focus {}

/***************************************/
/***************************************/

A.grid-link IMG {
  width: 90%;
  border-radius: 7px;
}

A.grid-link:hover IMG,
A.grid-link:focus IMG {}

.link-back {
  display: none;
  overflow: hidden;
  margin: 10px 0px;
  clear: both;
}

.link-back A {
  float: right;
  font-family: 'Handlee', cursive;
  font-size: 18px;
  padding: 4px 10px;
  background: url(../images/nav-background.jpg);
  border: 1px dashed #FFFFFF;
  border-radius: 5px;
}

.home-image {
  margin: 0 0 10px 10px;
  width: 500px;
  border-radius: 7px;
}

/***************************************/
/***************************************/

IFRAME {
  width: 560px;
  height: 315px;
}

/***************************************/
/***************************************/

.gallerij-box {
  float: left;
  width: 150px;
  height: 100px;
  overflow: hidden;
  margin: 0px 5px 5px 0px;
}

IMG.gallerij {
  width: 100%;
  cursor: pointer;
}

/***************************************/
/***************************************/


@media only screen and (min-width: 1024px) {
/* plaats hier de css code voor desktops, breedte website is minimaal 1024 pixels */
  #nav-toggle { display: none; }
}

@media only screen and (min-width: 981px) and (max-width: 1024px) {
/* plaats hier de css code voor tablets in landscape mode, breedte website is 1024 pixels */
  .page-container { width: 960px; }
  #nav-toggle { display: none; }
}

@media only screen and (min-width: 768px) and (max-width: 980px) {
/* plaats hier de css code voor tablets in portrait mode, breedte website is 768 pixels */
  .page-container, .grid-12 { width: 720px; }
  .grid-8 { width: 480px; }
  .grid-4 { width: 240px; }
  .iframe { width: 100% !IMPORTANT; }
  #nav-toggle { display: none; }
  IFRAME { width: 100%; height: 315px; }
  .home-image { width: 400px; }
}

@media only screen and (min-width: 500px) and (max-width: 767px) {
/* plaats hier de css code voor smartphones in landscape mode, breedte website is 480px */
  .hide-on-mobile { display: none; }
  .page-container { min-width: 482px; max-width: 767px; width: auto; }
  HEADER { position: relative; }
  SECTION { padding: 10px; box-sizing: border-box; }
  .grid { width: 100%; }
  .iframe { width: 100%; }
  #logo{ width: 200px; }
  #logo .logo-naam { padding-left: 5px; }
  #logo .logo-jaar { display: none; }
  #container { background-position: 46% bottom; }
  NAV { display: none; }
  NAV.open { display: block; clear: both; border-top: 1px dashed #308CC1; }
  NAV.open UL { float: none; }
  NAV.open UL LI { float: none; width: 100%; }
  #nav-toggle { display: block; }
  A.grid-link IMG { width: 100%; }
  .link-back { display: block; }
  IFRAME { width: 100%; height: 315px; }
  .gallerij-box { width: 100px; height: 75px; }
  .home-image { width: 300px; }
}

@media only screen and (max-width: 499px) {
/* plaats hier de css code voor smartphones in portrait mode, maximale breedte 320px */
  .hide-on-mobile { display: none; }
  .page-container { min-width: 320px; max-width: 480px; width: auto; }
  HEADER { position: relative; }
  SECTION { padding: 10px; box-sizing: border-box; }
  .grid { width: 100%; }
  .iframe { width: 100%; }
  #logo{ width: 200px; }
  #logo .logo-naam { padding-left: 5px; }
  #logo .logo-jaar { display: none; }
  #container { background-position: 47% bottom; }
  NAV { display: none; }
  NAV.open { display: block; clear: both; border-top: 1px dashed #308CC1; }
  NAV.open UL { float: none; }
  NAV.open UL LI { float: none; width: 100%; }
  #nav-toggle { display: block; }
  A.grid-link IMG { width: 100%; }
  .link-back { display: block; }
  IFRAME { width: 100%; height: 250px; }
  .gallerij-box { width: 100px; height: 75px; }
  .home-image { width: 100%; }
}