/* style.css */

html, body
{
  margin: 0px;
  width: 100%;
  height: 100%;
}

body
{
  background: #00a0c6;
  font-family: Arial, Tahoma, Verdana Lucida Sans Unicode, Trebuchet MS;
  font-size: 12px;
  color: #FFFFFF;
  line-height: 120%;
}

#mainTable
{
  width: 100%;
  height: 100%;
  font-family: Arial, Tahoma, Verdana Lucida Sans Unicode, Trebuchet MS;
  font-size: 12px;
  color: #FFFFFF;
}

#mainTdLeft, #mainTdRight
{
}

#mainTdCentre
{
  width: 800px;
}

#wrapper
{
  width: 800px;
  margin: 10px 0px 10px 0px;
  padding: 0px;
  background: #FFFFFF;
}

a, a:visited
{
  font-family: Arial, Tahoma, Verdana Lucida Sans Unicode, Trebuchet MS;
  font-size: 11px;
  color: #04586e;
  text-decoration: underline;
}

a:hover, a:active
{
  text-decoration: none;
}


/* ################## HEADER ################### */


#header
{
  position: relative;
  margin: 0px;
  padding: 0px;
  width: 800px;
  height: 88px;
}

#headernav
{
  position: relative;
  margin: 0px 20px 0px 20px;
  padding: 2px 0px 0px 0px;
  width: 760px; /* 800 - 20 - 20 */
  height: 18px;
  _height: 20px;
  background: #FFFFFF;
}

#headernav a, #headernav a:visited, #headernav a:active
{
  margin: 0px;
  padding: 0px 8px 0px 4px;
  font-size: 12px;
  font-weight: bold;
  color: #0f5c5c;
  text-decoration: none;
}

#headernav a:hover
{
  text-decoration: underline;
}

#headernav img
{
  border: none;
}

#headerimages
{
  position: relative;
  margin: 0px 20px 0px 20px;
  padding: 0px;
  width: 760px; /* 800 - 20 - 20 */
  height: 45px;
  background: #FFFFFF;
  overflow: hidden;
  text-align: left;
  white-space: nowrap;
}

#headerspacer
{
  position: relative;
  margin: 0px;
  padding: 0px;
  width: 800px;
  background: #FFFFFF;
}


/* ################### HOVER MENU'S ############# */


#hoverbuttons, #normalbuttons
{
  height: 61px; /* Hoogte table = hoogte roll-over buttons */
  overflow: hidden;
}

#hoverbuttons a, #normalbuttons a
{
  display: block;
  text-decoration: none;
  float:left;
  height: 61px;
}

a.hoverbutton1 span,a.hoverbutton2 span,a.hoverbutton3 span,a.hoverbutton4 span,a.normalbutton1 span,a.normalbutton2 span,a.normalbutton3 span,a.normalbutton4 span
{
  visibility: hidden;
}

a.hoverbutton1:hover,a.hoverbutton2:hover,a.hoverbutton3:hover,a.hoverbutton4:hover
{
  background-position: left top;
}

a.hoverbutton1  { width: 107px; }
a.hoverbutton2  { width: 114px; }
a.hoverbutton3  { width: 114px; }
a.hoverbutton4  { width: 107px; }

a.normalbutton1  { width: 107px; }
a.normalbutton2  { width: 114px; }
a.normalbutton3  { width: 114px; }
a.normalbutton4  { width: 107px; }

#popup0, #popup1, #popup2, #popup3, #popup4
{
  position: absolute; 
  width: 442px; 
  height: 299px; 
  top: 61px; 
  _top: 61px;
  left: 0px; 
  _left: 0px; 
}

#popup0
{
  color: #000000;
}

#popup1, #popup2, #popup3, #popup4
{
  color: #FFFFFF;
  visibility: hidden;
}

#popuptop0, #popupbottom0, #popuptop1, #popupbottom1, #popuptop2, #popupbottom2, #popuptop3, #popupbottom3, #popuptop4, #popupbottom4
{
  margin: 0px;
  padding: 0px;
  width: 442px;
  height: 7px;
  _height: auto;
  line-height: 0px;
}

#popupcontent1, #popupcontent2, #popupcontent3, #popupcontent4
{
  height: 285px; /* 305 - 2 x 10px padding */
  _height: 305px; 
  padding: 10px 10px 10px 10px;
  overflow: hidden;
}

#popuptop0 { background: url(../img/aqua_corners_white_top.gif) no-repeat left top;  }
#popupbottom0 { background: url(../img/aqua_corners_white_bottom.gif) no-repeat left top;  }
#popupcontent0
{ 
  background: #ffffff; 
  color: #4296ac;
  height: 285px; /* 305 - 2 x 10px padding */
  _height: 305px; 
  padding: 10px 0px 10px 0px;
  overflow: hidden;
}

#popuptop1 { background: url(../img/aqua_corners_blue_top.gif) no-repeat left top;  }
#popupbottom1 { background: url(../img/aqua_corners_blue_bottom.gif) no-repeat left top;  }
#popupcontent1 { background: #047391; }

#popuptop2 { background: url(../img/aqua_corners_orange_top.gif) no-repeat left top;  }
#popupbottom2 { background: url(../img/aqua_corners_orange_bottom.gif) no-repeat left top;  }
#popupcontent2 { background: #ff7f00; }

#popuptop3 { background: url(../img/aqua_corners_green_top.gif) no-repeat left top;  }
#popupbottom3 { background: url(../img/aqua_corners_green_bottom.gif) no-repeat left top;  }
#popupcontent3 { background: #009632; }

#popuptop4 { background: url(../img/aqua_corners_purple_top.gif) no-repeat left top;  }
#popupbottom4 { background: url(../img/aqua_corners_purple_bottom.gif) no-repeat left top;  }
#popupcontent4 { background: #9b2176; }


#popupcontent0 p
{
  margin: 10px 0px 0px 0px;
  padding: 0px 10px 0px 10px;
}

.popuptitle0
{
  position: relative;
  font-family: Arial, Tahoma, Verdana Lucida Sans Unicode, Trebuchet MS;
  font-size: 19px;
  font-weight: bold;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 10px;
}

.popuptable
{
  font-family: Arial, Tahoma, Verdana Lucida Sans Unicode, Trebuchet MS;
  font-size: 11px;
  color: #FFFFFF;
  width: 412px;
  border: none;
}

.popuptabletext
{
  width: 112px;
  padding: 0px 10px 0px 0px;
  overflow: hidden;
}

.popuptableimage
{
  width: 145px;
  height: 123px;
} 

.popuptablebuttons
{
  margin: 0px -10px 0px 0px;
  padding: 6px 0px 0px 0px;
  text-align: right;
}

.maskedimage, .imagemask
{
  position: absolute; 
  width: 145px; 
  height: 123px; 
  overflow: hidden; 
  border: none;
}

.maskedimage
{
  z-index: 250; 
}

.maskedimage img
{
  border: none;
}

.imagemask
{
  z-index: 200; 
  border: none;
}

.imagemask img
{
  border: none;
}

.titlebox
{
  position: absolute; 
  top: 100px; 
  left: 0px; 
  height: 28px;
  width: 145px;
  text-align: center;
  vertical-align: bottom;
}

/*
.titleboxleft
{
  height: 18px; 
  width: 7px; 
  float: left;
}

.titleboxcenterblue, .titleboxcenterorange, .titleboxcentergreen, .titleboxcenterpurple
{
  padding: 2px 0px 0px 0px; 
  float: left; 
  white-space: nowrap; 
  min-width: 1px; 
  _width: 1px; 
  height: 18px; 
  font-weight: bold;
  text-transform: uppercase;
  color: #047391;
}

.titleboxcenterblue { background: url(../img/aqua_oval_blue_bg.png) repeat-x left top; }
.titleboxcenterorange { background: url(../img/aqua_oval_orange_bg.png) repeat-x left top; }
.titleboxcentergreen { background: url(../img/aqua_oval_green_bg.png) repeat-x left top; }
.titleboxcenterpurple { background: url(../img/aqua_oval_purple_bg.png) repeat-x left top; }

.titleboxright
{
  float: left; 
  height: 18px; 
  width: 7px;
}
*/

.titlelayer1
{
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 200;
  color: #ffffff;
  /* font-family: Times New Roman, Palatino Linotype, Arial; */
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  width: 145px;
  text-align: center;
}

.titlelayer2
{
  position: absolute;
  left: 0px;
  top: 1px;
  z-index: 180;
  color: #000000;
  /* font-family: Times New Roman, Palatino Linotype, Arial; */
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  width: 145px;
  text-align: center;
}

/* ################### CONTENT ALGEMEEN ################## */


#contentouter
{
  position: relative;
  margin: 0px 20px 0px 20px;
  padding: 0px;
  width: 760px; /* 800 - 20 - 20 */
  min-height: 368px;
  _height: 428px;
  background: #FFFFFF;
}
  
#contentinner
{
  width: 678px; /* 760 - 41 - 41 Voor Firefox padding er af halen */
  _width: 760px;
  margin: 0px 0px 10px 0px;
  padding: 13px 41px 48px 41px; /* 48px ruimte aan de onderkant */
  background: #7ad1eb url(../img/aqua_content_bg.jpg) no-repeat left top;
  min-height: 368px;
  _height: 428px;
}

#contentswap
{
  font-family: Arial, Tahoma, Verdana Lucida Sans Unicode, Trebuchet MS;
  font-size: 11px;
  color: #FFFFFF;
  position: relative;
  width: 442px;
}


/* ################## CONTENT VERVOLGPAGINA'S ############## */


#contentgeneral
{
  
}

#contenttop
{
  height: 7px;
}

#content
{
  min-height: 300px;
  _height: 300px;
  margin: 0px;
  padding: 10px 10px 0px 10px;
  background: #ffffff;
  font-family: Arial, Tahoma, Verdana Lucida Sans Unicode, Trebuchet MS;
  font-size: 11px;
  color: #047391;
}

#content p
{
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 10px 0px;
}

#content input {
	border:1px solid #000;
}

#contentbottom
{
  height: 6px;
}

#contenttitle
{
  margin: 0px;
  padding: 0px 0px 5px 0px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: #FFFFFF;
}


/* ################### COMPARE/INFO TABELLEN ################ */


#infotable
{
  width: 100%;
  background: #ffffff;
  font-family: Arial, Tahoma, Verdana Lucida Sans Unicode, Trebuchet MS;
  font-size: 11px;
  color: #047391;
}

#infotabletext
{
  /*width: 250px;*/
  padding: 0px 20px 0px 0px;
}

#infotablecontent
{
  width: 400px;
}

#infotabletext p
{
  margin: 0px;
  padding: 0px 0px 10px 0px;
}

.inleiding
{
  font-weight: bold;
}

#infoimagelinks, #infoimagerechts
{
  position: relative;
  width: 200px;
  height: 156px;
}

#infoimagebig
{
  width: 400px;
  height: 310px;
}

#infodivleft
{
  margin: 0px;
  padding: 0px 10px 0px 0px;
}

#inforight
{
  width: 140px;
  margin: 0px;
  padding: 0px;
  height: 100%;
}

#infocontent
{
  padding: 0px 0px 10px 0px;
}

#infotableright
{
  width: 400px;
  font-family: Arial, Tahoma, Verdana Lucida Sans Unicode, Trebuchet MS;
  font-size: 11px;
  color: #047391;
}

.mask195
{
  width: 195px;
  height: 146px;
}

.mask400
{
  width: 400px;
  height: 300px;
}

/* ################### NEWS ################### */


#news
{
  font-family: Arial, Tahoma, Verdana Lucida Sans Unicode, Trebuchet MS;
  font-size: 11px;
  color: #FFFFFF;
  position: absolute;
  margin: 0px;
  padding: 0px;
  width: 190px;
  height: 307px;
  top: 0px;
  left: 488px;
}

#newstop
{
  height: 7px;
  background: url(../img/aqua_corners_news_top.gif) no-repeat left top;
}

#newsbottom
{
  height: 7px;
  background: url(../img/aqua_corners_news_bottom.gif) no-repeat left top;
}

#newscontent
{
  height: 283px;
  _height: 293px;
  padding: 0px 10px 10px 10px;
  overflow: hidden;
  background: #b0006e;
}

#newscontent a, #newscontent a:visited
{
  color: #fff;
  text-decoration: none;
}

#newscontent a:hover, #newscontent a:active
{
  text-decoration: underline;
}

#newscontent p
{
  margin: 0px 0px 15px 0px;
  padding: 0px;
}

#newscontent h4
{
  font-family: Arial, Tahoma, Verdana Lucida Sans Unicode, Trebuchet MS;
  font-size: 11px;
  font-weight: bold;
  margin: 0px;
  padding: 0px;
}

.newsstipjes
{
  margin: 0px 0px 8px 0px;
  _margin: 0px 0px 0px 0px;
  padding: 0px;
  width: 161px;
  height: 7px;
  background: url(../img/aqua_news_stipjes.jpg) no-repeat left top;
}

.newstitle
{
  margin: 0px 0px 8px 0px;
  padding: 0px;
  font-family: Arial, Tahoma, Verdana Lucida Sans Unicode, Trebuchet MS;
  font-size: 13px;
  font-weight: bold;
  color: #FFFFFF;
  text-transform: capitalize;
}



/* ################### MATRIXTABLE ################## */


#matrixtable
{
  background: #ffffff;
  font-family: Arial, Tahoma, Verdana Lucida Sans Unicode, Trebuchet MS;
  font-size: 11px;
  color: #047391;
  border: 0px solid #cccccc;
}

#matrixtable td
{
   border: 1px solid #cccccc; 
}

#matrixtable .kenmerkvalue
{
  background: #d9ebf7;
  padding: 2px 10px 2px 10px;
  text-align: center;
  border: none;
  font-weight: bold;
}

#matrixtable .kenmerklabel
{
  padding: 2px 3px 2px 3px;
  width: 130px;
}

.matriximage
{
  text-align: center;
  position: relative;
  border: none !important;
  vertical-align: bottom;
  white-space: pre-line;
}

.matriximgmask
{
  position: absolute; 
  z-index: 200; 
  left: 0px; 
  margin-top: 0px;
  border: none;
}

.matriximgimg
{
  border: none;
}

#matrixtable .maskdiv
{
  position: relative;
  margin: 0px 0px 35px 0px;
  _margin: 0px 0px 0px 0px;
  padding: 0px;
  width: 120px;
  height: 90px;
}

.forecwrap
{
  width: 120px;
  height: 90px;
}

.matriximage
{
  margin: 10px 5px 10px 5px;
}

.caption
{
  margin: 0px;
  padding: 0px;
  font-weight: bold;
  font-size: 12px;
}

#matrixtable .blank
{
  border: none;
}

#matrixtable .links
{
  text-align: center;
}

.links
{
  padding: 3px;
}

/* ################### POPUP ################## */


#popuphelp
{
  margin: 15px;
  padding: 15px 15px 15px 15px;
  height: 80%;
  _height: 50px;
  background: #ffffff;
  color: #047391;
}

#popuparea
{
  margin: 15px;
  padding: 15px 15px 15px 15px;
  height: 50px;
  background: #ffffff;
  color: #047391;
}

#popuppage
{
  margin: 15px;
  padding: 15px 15px 15px 15px;
  background: #ffffff;
  color: #047391;
}


/* ################### FOOTER ################# */


#footer
{
  position: relative;
  width: 800px;
}

#bottom
{
  position: absolute;
  margin: -48px 0px 0px 0px; /* transparante onderkant stukje verschuiven over het contentdeel */
  padding: 0px;
  width: 800px;
}


/* ################### COMMON ################# */

#contactform
{
  background: #ffffff;
  font-family: Arial, Tahoma, Verdana Lucida Sans Unicode, Trebuchet MS;
  font-size: 11px;
  color: #047391;
  width: 500px;
}

#contactform select
{
  width: 150px;
}

#contactform td
{
  font-family: Arial, Tahoma, Verdana Lucida Sans Unicode, Trebuchet MS;
  font-size: 11px;
  color: #047391;
}

/* ################### COMMON ################# */

form
{
  margin: 0px;
  padding: 0px;
}

.overflowhidden
{
  overflow: hidden;
}

.overflowhidden2
{
  overflow: hidden;
  height: 240px;
}

.selected
{
  background-position: left top !important;
}

.displaynone
{
  display: none;
}

.imgbutton
{
  border: none;
}

.imgright
{
  margin: 2px 0px 10px 10px;
  padding: 0px;
  border: none;
}

.imgleft
{
  margin: 2px 10px 10px 0px;
  padding: 0px;
  border: none;
}

.floatleft
{
  float: left;
}

.floatright
{
  float: right;
}

.floatright img
{
  margin-top: 1px;
}

.clearall
{
  clear: both;
  padding: 0px !important;
  margin: 0px !important;
}

#logo
{
  position: absolute;
  top: 318px;
  left: 488px;
  z-index: 100;
}

.moveup
{
  margin-top: -5px !important;
  margin-bottom: 0px !important;
  padding-bottom: 0px !important;
}

.moveup2
{
  margin-top: 0px;
  float: left;
}

h2, h3
{
  margin: 0px 0px 10px 0px;
  padding: 0px;
  font-size: 13px;
}

