/* CSS STYLESHEET                      */
/* Algemene info: # = ID en . is CLASS */

iframe { 
overflow:hidden;
border:0px; 
width:100%;
} 

/*Tekst type en grote*/
html, body {
   height: 100%;
   background-color: #FFFFFF;
   background-image: url(../images/background.png);
   background-attachment:fixed;
   font-family: sans-serif, Arial;
   font-size: 14px;
   margin: 0px;
   padding: 0px;
}

div#all {
   height: 101%;
   width: 800px;
   position: relative;
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 0px;
   padding: 0px;
}

/*TEXT plaats en formaten*/
div#HH {
   overflow:hidden;
   position:absolute;
   left:10px;
   top:2px;
   margin: 0px;
   text-align: left;
   color: #FFFFFF;
   font-size: 28px;
   font-weight:bold;
   text-shadow: 1px 1px 1px #000080;
   z-index:5;
}

/*tekst rechts van Arnoldie*/
span#H {
   font-size: 16px;
   font-weight:bold;
   text-shadow: 1px 1px 1px #000080;
   z-index:5;
}

div#s1 {
   width: 154px;
   height: 17px;
    border-style: solid;
    border-width: 2px;
   background-color: #FFFFFF;
   overflow:hidden;
   position:absolute;
   right:130px;
   top:10px;
   margin: 0px;
   padding: 0px;
   text-align: right;
   color: #777777;
   font-size: 14px;
   font-weight:bold;
   text-shadow: 1px 1px 1px #000080;
   z-index:5;
   opacity: 0.80; -ms-filter: "alpha (opacity=80)";
}

div#s2 {
   width: 154px;
   height: 17px;
    border-style: solid;
    border-width: 2px;
   background-color: #FFFFFF;
   overflow:hidden;
   position:absolute;
   right:130px;
   top:41px;
   margin: 0px;
   padding: 0px;
   text-align: right;
   color: #777777;
   font-size: 14px;
   font-weight:bold;
   text-shadow: 1px 1px 1px #000080;
   z-index:5;
   opacity: 0.80; -ms-filter: "alpha (opacity=80)";
}

div#welcome {
   overflow:hidden;
   position:absolute;
   left:20px;top:90px;
   margin: 0px;
   text-align: left;
   font-size: 14px;
   font-weight: bold;
   color: #FFFFFF;
   text-shadow: 1px 1px 1px #000080;
   z-index:5;
}

/*STATUS plaats en shadow effect*/

#divimgnl {
   background-image: url(http://www.n3kl.org/sun/images/status.gif?);
   width: 121px;
   height: 21px;
   overflow: hidden;
   position: absolute;
   right: 10px;top:10px;
   -moz-box-shadow: 0px 0px 5px #FFFFFF;
   -webkit-box-shadow: 0px 0px 5px #FFFFFF;
   box-shadow: 0px 0px 10px #FFFFFF;
   z-index:5;
}

#divimgth {
   background-image: url(http://www.n3kl.org/sun/images/kpstatus.gif?);
   width: 121px;
   height: 21px;
   overflow: hidden;
   position: absolute;
   right: 10px;top:41px;
   -moz-box-shadow: 0px 0px 5px #FFFFFF;
   -webkit-box-shadow: 0px 0px 5px #FFFFFF;
   box-shadow: 0px 0px 10px #FFFFFF;
   z-index:5;
}

/*SHADOW IMAGES BLACK*/
.shadow {
   text-decoration:none;
   -moz-box-shadow: 0px 0px 5px #000000;
   -webkit-box-shadow: 0px 0px 5px #000000;
   box-shadow: 0px 0px 10px #000000;
}

/*SHADOW IMAGES WHITE*/
.shadoww {
   text-decoration:none;
   -moz-box-shadow: 0px 0px 5px #FFFFFF;
   -webkit-box-shadow: 0px 0px 5px #FFFFFF;
   box-shadow: 0px 0px 10px #FFFFFF;
}
/*ICONS GOOGLE, INFO EN WEBCAM*/
#divimggm {
   background-image: url(../images/gm.png);
   width: 18px;
   height: 18px;
   overflow: hidden;
   position: absolute;
   right: 116px;top:132px;
   z-index:5;
}
#divimgi {
   background-image: url(../images/i.png);
   width: 18px;
   height: 18px;
   overflow: hidden;
   position: absolute;
   right: 93px;top: 132px;
   z-index:5;
}
#divimgwc {
   background-image: url(../images/wc.png);
   width: 18px;
   height: 18px;
   overflow: hidden;
   position: absolute;
   right: 139px;top: 132px;
   z-index:5;
}

/*MENU-PLAATJES BIJ FOTOS preview, index, en next*/
#p {
   background-image: url(../images/p.png);
   width: 18px;
   height: 18px;
   overflow: hidden;
   position: absolute;
   right: 66px;top: 132px;
   z-index:6;
}
#in {
   background-image: url(../images/in.png);
   width: 18px;
   height: 18px;
   overflow: hidden;
   position: absolute;
   right: 43px;top: 132px;
   z-index:6;
}
#n {
   background-image: url(../images/n.png);
   width: 18px;
   height: 18px;
   overflow: hidden;
   position: absolute;
   right: 20px;top: 132px;
   z-index:6;
}

/*LINKEN text en algemeen. blauw en hover-rood*/
A:link {
   text-decoration: none; color: #000080;
}
A:visited {
   text-decoration: none; color: #000080;
}
A:active {
   text-decoration: none; color: #000080;
}
A:hover {
   text-decoration: underline; color: #990000;
}
/*ICONS LINK effect: link is met blauwe shadow effect rondom*/
.in:visited, .in:link, .in:active, .p:visited, .p:link, .p:active, .n:visited, .n:link, .n:active, .hov:active, .hov:link, .hov:visited {
   text-decoration: none; color: #000080;
   -moz-box-shadow: 0px 0px 5px #000000;
   -webkit-box-shadow: 0px 0px 5px #000000;
   box-shadow: 0px 0px 10px #000000;
}
/*MENU LINKEN effect: link is met blauwe text, en shadow effect rondom. En kleurt rood bij hover*/
#menu A:visited {
   text-decoration: none; color: #000080;
//   -moz-box-shadow: 0px 0px 5px #000000;
//  -webkit-box-shadow: 0px 0px 5px #000000;
//  box-shadow: 0px 0px 10px #000000;
}
#menu A:active {
   text-decoration: none; color: #000080;
//   -moz-box-shadow: 0px 0px 5px #000000;
//  -webkit-box-shadow: 0px 0px 5px #000000;
//  box-shadow: 0px 0px 10px #000000;
}
#menu A:link {
   padding-top:2px;
   padding-bottom:0px;
   padding-left:2px;
   padding-right:2px;
   text-decoration: none; color: #000080;
//   -moz-box-shadow: 0px 0px 5px #000000;
//   -webkit-box-shadow: 0px 0px 5px #000000;
//   box-shadow: 0px 0px 10px #000000;
}
#menu A:hover {
   text-decoration: none; color: #990000;
   -moz-box-shadow: 0px 0px 5px #990000;
   -webkit-box-shadow: 0px 0px 5px #990000;
   box-shadow: 0px 0px 10px #990000;
}
/*HOVER EFFECT in het menu voor: preview, index en next. webcam, info, en google maps icons 
(kleur: rood, id is class)*/
.in:hover, .p:hover, .n:hover, .hov:hover { 
   text-decoration: underline; color: #990000;
   -moz-box-shadow: 0px 0px 5px #990000;
   -webkit-box-shadow: 0px 0px 5px #990000;
   box-shadow: 0px 0px 10px #990000;
}

/*MENU + PLAATS*/
div#menu {
   width: 760px;
   Height: 16px;
   background-color: #FFFFFF;
   position: absolute;
   left: 10px;
   bottom: 10px;
   margin: 0px;
   padding: 10px;
   text-align: left;
   font-weight: bold;
   font-size: 16px;
   color: #000000;
   -moz-box-shadow: 0px 0px 5px #000000;
   -webkit-box-shadow: 0px 0px 5px #000000;
   box-shadow: 0px 0px 10px #000000;
   z-index:5;
   opacity: 0.80; -ms-filter: "alpha (opacity=80)";
   border-radius: 10px;
}

/* Border/ronde hoeken bij topimage slidesow en slideshows relatiebureau */
/* div#fadeshowtop {
   border-radius:10px;
   z-index:2;
} */

.topimage {
   border-radius:10px;
   width: 800px;
   height: 168px;
}

/*TOP HEADER*/
div#top {
background-image:url(../images/top_img/0.png);
   height: 168px;
   width: 800px;
   position: absolute;
   top: 10px;
   margin: 0px;
   padding: 0px;
   text-align: left;
   -moz-box-shadow: 0px 0px 5px #000000;
   -webkit-box-shadow: 0px 0px 5px #000000;
   box-shadow: 0px 0px 10px #000000;
   z-index:1;
   border-radius: 10px;
}
/*VOLLEDIGE BREEDTE BIJ FOTOS EN FORM*/
div#top1a, div#top1b {
/*   background-image:url(../images/background2.gif);
   background-attachment:fixed; */
   background-color: #FFFFFF;
   width: 780px;
   position: relative;
   margin-top: 0px;
   margin-left: 0px;
   margin-right: 0px;
   margin-bottom: 10px;
   padding: 10px;
   text-align: left;
   color: #000000;
   -moz-box-shadow: 0px 0px 5px #000000;
   -webkit-box-shadow: 0px 0px 5px #000000;
   box-shadow: 0px 0px 10px #000000;
   border-radius: 10px;
}

/*TEXT RUIMTE BOVEN DE THUMBS*/
.phototext {
   font-size: 12px;
   padding: 0px;
   padding-left: 2px;
   width:138px;
   background-color: #FFFFFF;
   opacity: 0.70; -ms-filter: "alpha (opacity=70)";
}

div#left {
   position:absolute;
   left: 0px; 
   top: 188px;
   width: 395px;
   padding: 0px;
   margin: 0px;
}

div#right {
   position:absolute;
   right: 0px; 
   top: 188px;
   width: 395px;
   padding: 0px;
   margin: 0px;
}

div#lefta, div#leftb, div#leftc, div#leftd, div#lefte, div#leftf, div#leftg, div#lefth {
/*   background-image:url(../images/background2.gif);
   background-attachment:fixed; */
   background-color: #FFFFFF;
   width: 375px;
   position: relative;
   margin-top: 0px;
   margin-left: 0px;
   margin-right: 0px;
   margin-bottom: 10px;
   padding: 10px;
   -moz-box-shadow: 0px 0px 5px #000000;
   -webkit-box-shadow: 0px 0px 5px #000000;
   box-shadow: 0px 0px 10px #000000;
   border-radius: 10px;
}

div#righta, div#rightb, div#rightc, div#rightd, div#righte, div#rightf, div#rightg, div#righth {
/*   background-image:url(../images/background2.gif);
   background-attachment:fixed; */
   background-color: #FFFFFF;
   width: 375px;
   position: relative;
   margin-top: 0px;
   margin-left: 0px;
   margin-right: 0px;
   margin-bottom: 10px;
   padding: 10px;
   -moz-box-shadow: 0px 0px 5px #000000;
   -webkit-box-shadow: 0px 0px 5px #000000;
   box-shadow: 0px 0px 10px #000000;
   border-radius: 10px;
}
/*RSS*/
.rss-box {
   width: 100%;
   text-align: left;
   margin: 0px;
   padding: 0px;
}
.rss-title {
   margin: 0px;
   padding: 0px;
}
.rss-title a {
   margin: 0px;
   padding: 0px;
}
.rss-items {
   list-style:none;
   margin: 0px;
   padding: 0px;
}
.rss-item  {
   margin: 0px;
   padding: 0px;
}
.rss-item a:link {
   text-decoration: none;
} 
.rss-item a:visited {
   text-decoration: none;
} 
.rss-item a:active {
   text-decoration: none;
}
.rss-item a:hover {
   color: #990000; 
   text-decoration: underline;
}	
.rss-date {
   font-size: 10px; 
   color: #7F7F7F;
}

/*INFOBOX bij relatiebureau en contact*/
a.infobox { 
  text-decoration:none;
}

a.infobox:hover {
  text-decoration:none;
}

a.infobox span {
  visibility:hidden;
  width: 290px;
  position: absolute;
  top: 130px; /*BOX VANAF BOVEN*/
  padding: 5px;
  text-decoration: none; 
  z-index:99;
}

a.infobox:hover span, a.infobox:focus span, a.infobox:active span {
  visibility:visible; 
  left:240px; /*BOX VANAF LINKS*/
  border:1px solid #505050;
  color: #000000; 
  background-color:#F6CECE;
}

/*FORMULIER*/
#mainForm {
  border: 0px;
  border-style: solid;
  margin: 0px;
  width: 100%;
  background-color: #FFFFFF;
}

ul.mainForm {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  list-style-type: none;
  font-size:12px;	
}

li.mainForm {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

#mainFormError {
  border: 1px;
  border-style: solid;
  margin: 0 auto;
  width: 100%;
}

input.mainFormError {
  background-color: #FADADD;
}

textarea.mainFormError {
  background-color: #FADADD;
}

select.mainFormError {
  background-color: #FADADD;
}

#formInfo {
  width: 100%;
  background-color: #FFFFFF;
  margin:0 0 0 0;
}

h2.formInfo {
  margin:0 0 0 0;
  font-weight:normal;
  font-size:14px;
  left:0px;
  top:0px;
  letter-spacing: 1px;
  line-height:100%;
  color: #000000;
}

p.formInfo {
  margin:0 0 0 0;
  font-weight:normal;
  color: #000000;
  font-size:14px;
  left:0px;
  top:0px;
  color: #000000;
}

#formFields {
  width: 100%;
  background-color: #FFFFFF;
  margin:0 0 0 0;
}

label.formFieldQuestion {
  line-height:100%;
  padding: 0px;
  border:none;	
  display:block;
}

label.formFieldOption {
  margin-left:0px;
  vertical-align:top;
}

label.formFieldOption1 {
  margin-left:1px;
  width:160px;
  vertical-align:top;
  float:left;
}

input.formFieldStyle {
  display:block;
  line-height:100%;
  margin:8px 0 0 3px;
  width:13px;
  height:13px;
}
/*LIGHTBOX*/
#lightbox { position: absolute; left: 0; top: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; }
#lightbox img { width: auto; height: auto; } /*positie van de foto in de frame*/
#lightbox a img { border: none; }

#outerImageContainer { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; border-top-left-radius: 10px; border-top-right-radius: 10px; }
#imageContainer { padding: 10px; }

#loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav { left: 0;}
#hoverNav a { outline: none;}

#prevLink, #nextLink { width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer { font-size: 12px; color: #000000; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }

#imageData { padding:0 10px; color: #666; }
#imageData #imageDetails { width: 70%; float: left; text-align: left; font-size: 12px; color: #000000; }	/*omschrijving*/
#imageData #caption { font-size: 12px; color: #000000; font-weight: bold; } /*naam*/
#imageData #numberDisplay { display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose { width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	
/* TRANSPARENCY  opacity and filters for IE.10 (not working with compability) */
#overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; background-color: #010101; opacity: 0.70; -ms-filter: "alpha (opacity=70)"; }