/* 
  xnoizz/maps/css by Theo van Asselt, Plyworks Media 
  version: 2.0 31-05-2011
*/

#container2 .block.banners .body {
  background: none;
  }
.block.banners .body {
  margin: 0px 0px 11px 0px;
  }
  
/* all teasers same width, causing to float in all containers */

#container3 .OneInARow, #container3 .TwoInARow, #container3 .ThreeInARow {
  float: none;
  height: auto;
  }

.block.newteasers {
  }
.homepage #container2 .block.newteasers.OneInARow, 
.homepage #container2 .block.newteasers.TwoInARow, 
.homepage #container2 .block.newteasers.ThreeInARow {
  margin: 0px 1px 0px 0px;
   }  

.homepage #container2 .block.newteasers.OneInARow .body, 
.homepage #container2 .block.newteasers.TwoInARow .body, 
.homepage #container2 .block.newteasers.ThreeInARow .body {
 background: transparent;
  height: 135px;
  overflow: hidden;
  background: #ececec;
  background-image: url('../images/block-body-bg.jpg');
  background-position: left top;
  background-repeat: repeat-y;
  padding: 0px 0px 0px 0px;
  
 }   
  
  
#container2 .block.newteasers img.picture {
  float: left;
  margin: 0px 15px 0px 0px;
  z-index: 50;
  }
#container2 .block.newteasers .innerhead,
#container2 .block.newteasers .head {
  display: none;
  } 
.block.newteasers .body h2 {
  background-image: url('../images/teaser-title-cont2-bg.png');
  background-repeat: no-repeat;
  color: #0a0809;
  text-transform: uppercase;
  padding: 9px 10px 0px 20px;
  height: 20px;
  line-height: 100%;
  }
.block.newteasers .body h2 a {
  color: #0a0809;                  
  -webkit-transition: color 1s linear;
  }
.block.newteasers .body h2 a:hover {
  color: #fff;
  }
#container2 .block.newteasers .body h3 {
  color: #5f5c5c;
  font-size: .7em;
  font-weight: normal;
  margin: 15px 10px 10px 0px;
  max-height: 80px;
  }
.newteasers .innerblock {
  clear: right;
  /*width: 241px;
  */margin: 0px;
  padding: 0px;
  z-index: 51;
 }
  
#container3 .newteasers .innerbody {
   height: auto;
 } 
#container2 .block.newteasers .innerbottom {
  display: block;
  position: relative;
  left: 0px;
  top: -126px;
  width: 36px; 
  height: 50px;
  z-index:99;
  background-image: url('../images/teaser-cont2-mask-bg.png');
  background-repeat: no-repeat;
 }
/* adding pixLeft-class: image on left with cutout right  
.block.newteasers.pixLeft img.picture {
  margin: 0px 9px 0px 0px;
  }  
.homepage #container2 .block.newteasers .innerbody {
  height: 200px;
  }
.block.newteasers.pixLeft div.innerbottom {
  position: relative;
  left: 89px;
  top: -145px;
  width: 36px; 
  height: 145px;
  background: url('../images/masker.png') no-repeat;
  z-index: 51;
  border: 1px sold red;
  }  

/* adding pixRight-class: image on right with cutout left 
#container2 .block.newteasers.pixRight img.picture {
  margin: 0px 0px 0px 0px; 
  float: right;
  position: relative;
  }  
.block.newteasers.pixRight h3 {                                                                                
  margin-left: 12px;
  }
#container2  .block.newteasers .innerbottom {
  clear: both;
  display: block;
  }  
  
.block.newteasers.pixRight div.innerbottom {
  position: relative;
  left: 115px;
  top: -145px;
  width: 37px; 
  height: 145px;
  background: url('../images/masker-special.png');
  background-repeat: no-repeat;
  z-index: 51;
  }
  
/* adding xReview-class: image on left with cutout left also in blue header 
   adding xReviewGreen-class: image on left with cutout left also in green header
   combine with TwoInARow for rotated album covers!

#container2 .block.newteasers.xReview .body, 
#container2 .block.newteasers.xReviewGreen .body {
  background: #ececec;
  background-image: url('../images/teaser-rec-bg.gif');
  background-repeat: no-repeat;
  background-position: -1px 0px;
  height: 198px;
  } 
.block.newteasers.xReview .body h2 {
  background: #00c0e8;
  background-image: url('../images/teaser-rec-heading-bg.jpg');
  background-repeat: no-repeat; 
  padding-left: 44px;
  text-align: right;
  } 
#container2 .block.newteasers.xReview  img.picture, 
#container2  .block.newteasers.xReviewGreen img.picture  {
  margin: 12px 12px 20px 2px;   
  }
 .block.newteasers.xReviewGreen .body h2 {
  background: #6bbc0a;
  background-image: url('../images/teaser-rec-heading-green-bg.jpg');
  text-align: right;
  padding-left: 44px;
  }
  
/* adding xblue-class for blue heading bg 
 .block.newteasers.xblue .body h2 {
  background: #00c0e8;
  background-image: url('../images/blue-heading-bg.jpg');
  }
    
/* Links (rendermode = Lijst) */  
#container2 .block.links .body {
  background: #FFFFFF;
   }  
.block.newteasers.links .body h2 {
  background-image: url('../images/teaser-heading-cutout-bg.jpg');
  background-repeat: no-repeat;
  color: #000;
  padding: 0px 10px 0px 17px;
  height: 30px;
  text-transform: uppercase;
  line-height: 230%;
  overflow: hidden;
  
  }
#container2 .block.newteasers.links .body h2 {
  display: none;
  }
#container2 .block.newteasers.links .body ul {
  margin: 10px 0px 0px 0px;
  }  
#container2 .block.newteasers.links .body ul li {
  background-image: url('../images/teaser-list-image.png');
  background-repeat: no-repeat;
  margin: 0px 10px 10px 8px;
  padding: 0px 0px 0px 27px;
  background-position: 0px 0px;
  }  
#container2 .block.newteasers.links .body ul li a {
  color: #686666;
  }
#container3 .block.links .body {
  background: #fefefe;
  background-image: url('../images/x-bg.jpg');
  background-repeat: no-repeat;
  background-position: right bottom;
  }  
#container3 .block.links a {
  color: #5f5c5c;
  } 
  
  
  /*---------teaserlist-----------



/*---------------slideshow---------------*/

.block.slideshow {
 height: 198px;
 margin: 0px 0px 10px 0px;
 position: relative;
 }
#container2 .block.slideshow .body {
 overflow: visible;
 }
.block.slideshow.withindex {  
 width: 250px;
 float: right;
 border: 1px solid red;
 }
 
#container1 .block.slideshow {
 width: 226px;
 height: 157px;
 }
.block.slideshow div.slide {
 position: absolute;
 top: auto;
 left: 0px;
 width: 241px;
 height: 198px;
 overflow: hidden;
 }
.block.slide.withindex {
 width:241px;
 }  
#container2 .block.slideindex {
 width: 127px;
 height: 300px;
 float: left;
 display: none;
 }  
#container1 .block.slideshow div.slide {
 left: 0px;
 width: 226px;
 height: 157px;
 }
#container3 .block.slideshow div.slide {
 left: 10px;
 width: 225px;
 height: 153px;
 }
div.slide img {
 height: 145px;
 position: absolute;
 top: 53px;
 }
#container1 div.slide img, #container3 div.slide img {
 height: 127px;
 top: 29px;
  }
div.slide .slideText {
  position: absolute;
  top: 0px;
  display: block;
  color: #fefefe;
  font-weight: normal;
  width: 241px; 
  height: 53px;
  background: #6bbc0a;
  background-image: url('../images/teaser-heading-bg.jpg');
  background-repeat: no-repeat;
  line-height: 117%;
  overflow: hidden;
  z-index: 999;
  }
#container1 div.slide .slideText, #container1 div.slide .slideText {
  width: 226px;
 height: 30px;
  }
div.slide .slideText h3 {
  color: #ffffff;
  text-transform: uppercase;
  margin: 10px 10px 0px 13px;
  padding: 0px;
  font-weight: normal;
  font-family: EO-JongerenBold, Arial, Verdana, sans-serif;
  font-size: .85em;
  }
#container1 div.slide .slideText h3, #container3 div.slide .slideText h3 {
 width: 226px;
 color: #000;
 line-height: 1.1em;
 margin: 10px 2px 0px 18px;
 }
div.slide a {
 display: block;
 position: absolute;
 z-index: 1000;
 bottom: 10px;
 right: 8px;
 width: 64px;
 height: 13px;
 color: #404040;
 font-size: 9px;
 background-image: url("../images/div-meer-bg.gif");
 background-repeat: no-repeat;
 text-align: center;
 }
div.slide a:hover {
 color: #000000;
 }
#container1 div.slide a, #container3 div.slide a {
 right: 9px;
 bottom: 6px;
 width: 20px;
 height: 20px;
 background-image: url("../images/slide-meer.png");
 background-repeat: no-repeat;
 text-align: center;
 color: transparent;
 font-size: .000001em;
  }

#container2 .block.flashteaser {
  width: 494px; 
  height: 279px;
  margin-top: 10px 0px 11px 0px;
  overflow: hidden;
  }