/*******************************
   Generals and Fonts and Links
******************************/

body {
   height: 90%;
   background: white;
   overflow: scroll;
   padding: 0;
   margin: 0;}

img {
   border: none;
   padding: 0;
   margin: 0;}

a{
   display: inline;
   color: black;}

/********************************
   main-container and first divs
*******************************/

#main-container{
   position: relative;
   width: 775px;
   margin: 0 auto;
   background: white;}

#main-container #boven{
   position: fixed;
   z-index: 20;
   width: 775px;
   height: 190px;
   background: url(./images/bg.png) no-repeat 0 0;}

#main-container #boven div{
   position: relative;
   float: left;}

#main-container #boven div a{
   position: absolute;}

#main-container #boven a#blok1:hover{
   background: url(./images/bg1.png) no-repeat 0 0;}

#main-container #boven a#blok2:hover{
   background: url(./images/bg2.png) no-repeat 0 0;}

#main-container #boven a#blok3:hover{
   background: url(./images/bg3.png) no-repeat -1px 1px;}

#main-container #boven a#blok4:hover{
   background: url(./images/bg4.png) no-repeat 1px 1px;}
   
.menu {
  height:25px;
  position:fixed;
  z-index:100;
  margin-top: 190px;
 }

.menu-flash {
  height:25px;
  position:absolute;
  z-index:100;
  margin-top: 190px;}

/*******************************************
  flash-onder-sub, tekstvlak algemeen
******************************************/

#main-container #flash-onder{
   clear: left;
   width: 775px;
   height: 700px;}

#main-container #flash-onder-sub{
   position: relative;
   width: 775px;
   min-height: 500px;
   z-index: 10;
   padding-top: 215px;
   clear: left;
   background: url(./images/shade-bg.jpg) fixed no-repeat center 215px;}

#main-container #flash-onder-sub .tekstvlak{
   position:relative;
   padding-top: 20px;
   width: 775px;
   min-height: 480px;}

body#expo #main-container #flash-onder-sub .tekstvlak{
   min-height: 1700px;}

body#media #main-container #flash-onder-sub .tekstvlak{
   min-height: 860px;}

#main-container #flash-onder-sub .tekstvlak h1{
   font: italic bold 16px Arial, sans-serif;
   margin: 0;
   padding-bottom: 10px;}

#main-container #flash-onder-sub .tekstvlak p{
   padding-bottom: 10px;
   margin: 0;
   font: normal 11px/16px Verdana, sans-serif;}

#main-container #flash-onder-sub .tekstvlak img{
   margin-top: 20px;
   border: 1px solid #e0e0e0;}

#main-container #flash-onder-sub .tekstvlak .kolom-links{
   width: 365px;
   height: 480px;
   float: left;
   padding-top: 0px;}

#main-container #flash-onder-sub .tekstvlak .kolom-rechts{
   width: 365px;
   height: 480px;
   float: right;
   padding-top: 0px;}

#main-container #flash-onder-sub .tekstvlak .kolom-links img,
#main-container #flash-onder-sub .tekstvlak .kolom-rechts img{
   margin-top: 6px;}

#main-container #flash-onder-sub .tekstvlak p.enlarge{
    font-size: 9px;
    padding: 2px;}

/***********************
  Expositions and Media
**********************/

#main-container #flash-onder-sub .tekstvlak div.float{
     width: 360px;
     border: 1px solid #e0e0e0;
     height: 250px;
     float: left;
     display: inline;
     margin-left: 18px;
     margin-top: 18px;
     background: white;
}

#main-container #flash-onder-sub .tekstvlak div#bigger{
     height: 265px;
}

#main-container #flash-onder-sub .tekstvlak p#milano{
     float: right;
     height: 30px;
     margin-right: 196px;
     display: inline;}

#main-container #flash-onder-sub .tekstvlak div.float img{
     border: none;}

/***************
  News
**************/

#main-container #flash-onder-sub .tekstvlak div.lijn{
     width: 760px;
     border-top: 1px solid #e0e0e0;
     height: 1px;
     float: left;
     margin-left: 10px;
     margin-top: 8px;
}

/***************
  Download
**************/

#main-container #flash-onder-sub .tekstvlak div#thumbs a{
     float: left;
     text-decoration: none;
     margin-left: 80px;
     margin-top: 40px;
}

#main-container #flash-onder-sub .tekstvlak div#thumbs a img{
     padding: 0;
     margin: 0;
     border: 1px solid #e0e0e0;
}

/***************
  Contact
**************/

#main-container #flash-onder-sub .tekstvlak p#contact{
   padding: 0;
   margin: 0;
   padding-left: 100px;
   margin-top: 40px;
   font: normal 14px/18px Verdana, sans-serif;}

/*************************
  plastic4 youtube movies
************************/

#main-container #flash-onder-sub .tekstvlak .flash-position{
   margin-top: 30px;
   margin-left: 170px;
   z-index: 90;}

/***************
  About Me
**************/

#main-container #flash-onder-sub .tekstvlak #cv{
   margin-top: 20px;}

#main-container #flash-onder-sub .tekstvlak #cv .empty{
   height: 20px;}

#main-container #flash-onder-sub .tekstvlak #cv .jaar{
   background: #bebebe;}

#main-container #flash-onder-sub .tekstvlak #cv .maand{
   background: #dedede;}

#main-container #flash-onder-sub .tekstvlak #cv .tekst{
   background: #f2f2f2;}

#main-container #flash-onder-sub .tekstvlak #cv p{
   line-height: 20px;
   padding: 0;}

/*********************
 css drop-down menu
*********************/

/* remove all the bullets, borders and padding from the default list styling */
.menu ul,
.menu-flash ul {
  padding:0;
  margin:0;
  list-style-type:none;}

.menu span, 
.menu-flash span{
  padding-left: 10px;
  font: normal 10px Arial;
  line-height: 25px;}

.menu ul ul,
.menu-flash ul ul {
  width:140px;}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li,
.menu-flash li {
  width:139px;
  height:25px;
  border-right:1px solid #fff;
  float:left;
  position:relative;
  background: black;
  color:white;}

/* style the links for the top level */
.menu a,
.menu-flash a{
  display:block;
  text-decoration:none;
  color:white;
  cursor: default;
  background:black;  }

/* style the second level background */
.menu ul ul a.drop,
.menu-flash ul ul a.drop
{  background: white;}

/* style the second level hover */
.menu ul ul a.drop:hover,
.menu-flash ul ul a.drop:hover
{background: #bebebe; }

.menu ul ul :hover > a.drop,
.menu-flash ul ul :hover > a.drop {background: #bebebe; }

/* style the third level background */
.menu ul ul ul a,
.menu-flash ul ul ul a
 {background: white;}

/* style the third level hover */
.menu ul ul ul a:hover,
.menu-flash ul ul ul a:hover  {background: #bebebe;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul,
.menu-flash ul ul{
  visibility:hidden;
  position:absolute;
  height:0;
  top:25px;
  left:0;
  width:139px;}

/* position the third level flyout menu */
.menu ul ul ul,
.menu-flash ul ul ul
{left:161px; top:2px; width:139px;}

.menu ul ul li#news ul,
.menu-flash ul ul li#news ul
{left:139px; top:2px; width:139px;}

.menu ul ul li#media ul,
.menu-flash ul ul li#media ul{left:171px; top:2px; width:139px;}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table,
.menu-flash table {position:absolute; top:0; left:0; border-collapse:collapse;}

/* style the second level links */
.menu ul ul a,
.menu-flash ul ul a{
  background: white;
  cursor: pointer;
  color: black;
  height: 25px;
  width:138px;
  border-top: 1px solid #bebebe;
  border-left: 1px solid #bebebe;
  border-right: 1px solid #bebebe;}

.menu li#projects li a,
.menu-flash li#projects li a {
   width: 160px;}

.menu li#projects,
.menu-flash li#projects{
   border-left: 1px solid white;}

.menu li#expo li a,
.menu-flash li#expo li a {
   width: 195px;}

.menu li#press li a,
.menu-flash li#press li a {
   width: 170px;}

.menu li#plastic li a,
.menu-flash li#plastic li a {
   width: 210px;}

.menu li#news li a,
.menu-flash li#news li a{
   width: 170px;}

.menu li.lijn-onder a,
.menu-flash li.lijn-onder a{
   border-bottom: 1px solid #bebebe;}

/* style the top level hover */
.menu a:hover,
.menu-flash a:hover,
.menu ul ul a:hover,
.menu-flash ul ul a:hover{
  color:#000;
  background:#bebebe;}

.menu :hover > a,
.menu-flash :hover > a,
.menu ul ul :hover > a,
.menu-flash ul ul :hover > a{
  color:#000;
  background:#bebebe;}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu-flash ul li:hover ul,
.menu ul a:hover ul,
.menu-flash ul a:hover ul,
.menu ul li.over ul,
.menu-flash ul li.over ul{
  visibility:visible;}

/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul,
.menu-flash ul :hover ul ul{
  visibility:hidden;}

/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul,
.menu-flash ul :hover ul :hover ul{ 
  visibility:visible;}

.menu li#japan-li,
.menu-flash li#japan-li,
.menu li#british-li,
.menu-flash li#british-li,
.menu li#terug,
.menu-flash li#terug{
   float: left;
   position: relative;
   width: 35px;
   height: 23px;
   background: white;
   border: 1px solid black;}

.menu li#japan-li a,
.menu-flash li#japan-li a{
   float: left;
   width: 35px;
   height: 23px;
   background: url(./images/japan.jpg) no-repeat 0 0;}

.menu li#british-li a,
.menu-flash li#british-li a{
   float: left;
   width: 35px;
   height: 23px;
   background: url(./images/british.jpg) no-repeat 0 0;}

.menu li#terug a,
.menu-flash li#terug a{
   float: left;
   width: 35px;
   height: 23px;
   background: url(./images/home.jpg) no-repeat 0 0;}