/* probably worse then the fixed relative positions in the example you gave me, but i don't like pixel positioning, this way the boxes are the size of the images. */
/* TODO: hmm positioned as rows, probably easier/better as columns */

#promoContainer
{
 width: 790px;
 height: 360px;
 overflow: hidden;
}
.promoContainerBEF1 { background-image: url('/images/promos/promogeneral/bef/default1.jpg'); }
.promoContainerBEF2 { background-image: url('/images/promos/promogeneral/bef/default2.jpg'); }
.promoContainerBEF3 { background-image: url('/images/promos/promogeneral/bef/default3.jpg'); }
.promoContainerBEW1 { background-image: url('/images/promos/promogeneral/bew/default1.jpg'); }
.promoContainerBEW2 { background-image: url('/images/promos/promogeneral/bew/default2.jpg'); }
.promoContainerBEW3 { background-image: url('/images/promos/promogeneral/bew/default3.jpg'); }
.promoContainerLUF1 { background-image: url('/images/promos/promogeneral/luf/default1.jpg'); }
.promoContainerLUF2 { background-image: url('/images/promos/promogeneral/luf/default2.jpg'); }
.promoContainerLUF3 { background-image: url('/images/promos/promogeneral/luf/default3.jpg'); }
.promoContainerNLD1 { background-image: url('/images/promos/promogeneral/nld/default1.jpg'); }
.promoContainerNLD2 { background-image: url('/images/promos/promogeneral/nld/default2.jpg'); }
.promoContainerNLD3 { background-image: url('/images/promos/promogeneral/nld/default3.jpg'); }
.promoContainerBEE1 { background-image: url('/images/promos/promogeneral/bee/default1.jpg'); }
.promoContainerBEE2 { background-image: url('/images/promos/promogeneral/bee/default2.jpg'); }
.promoContainerBEE3 { background-image: url('/images/promos/promogeneral/bee/default3.jpg'); }
.promoContainerLUE1 { background-image: url('/images/promos/promogeneral/lue/default1.jpg'); }
.promoContainerLUE2 { background-image: url('/images/promos/promogeneral/lue/default2.jpg'); }
.promoContainerLUE3 { background-image: url('/images/promos/promogeneral/lue/default3.jpg'); }
.promoContainerNLE1 { background-image: url('/images/promos/promogeneral/nle/default1.jpg'); }
.promoContainerNLE2 { background-image: url('/images/promos/promogeneral/nle/default2.jpg'); }
.promoContainerNLE3 { background-image: url('/images/promos/promogeneral/nle/default3.jpg'); }

/*fill the content, everything underneath the promo overlay.*/
#promoContent
{
 position: absolute;
}
.promoContent
{
 position: absolute;
 top:0px;
 display:none;
 width:790px;
 height:360px;
}
.promoWhitelayer
{
 background-color:#FFFFFF;
}

#promoOld
{
 /*background-color:#0000FF;*/
}
#promoNew
{
/* background-color:#FF0000;*/
}

/*the overlay: graphical elements, tabs and the boxes to select the promos, everything that hovers above the promocontent.*/
#promoOverlay
{
 position: absolute;
 width:790px;
 height:360px;
}

#promoCurrent
{
 position: absolute;
 top:0px;
 width:790px;
 height:360px;
 z-index:0;
}

#promoBoxes
{
 margin-top:78px;
 margin-right:5px;
 overflow:hidden;
 position:absolute;
 right:0;
 width:280px;
 z-index:3;
}
#promoBoxes .box
{
 float: right;
 margin: 4px;
 cursor: pointer;
}