/* the overlayed element */
div.overlay {
	
	/* growing background image */

	
	/* dimensions after the growing animation finishes  */
	width:800px;		
	
	/* initially overlay is hidden */
	display:none;
	
	/* some padding to layout nested elements nicely  */
	padding:55px;
}

/* default close button positioned on upper right corner */
div.overlay div.close {
	background-image:url(./img/overlay/close.png);
	position:absolute;
	right:50px;
	top:30px;
	cursor:pointer;
	height:35px;
	width:35px;
}


/* black */
div.overlay.black {
	background:url(./img/overlay/transparent.png) no-repeat !important;
	color:#fff;
}

/* petrol */
div.overlay.petrol {
	background:url(./img/overlay/petrol.png) no-repeat !important;
	color:#fff;
}

div.black h2, div.petrol h2 {
	color:#ddd;		
}
/* use a semi-transparent image for the overlay */ 
#overlay { 
    
    color:#000; 
    z-index: 33000; 
} 
 
/* container for external content. uses vertical scrollbar, if needed */ 
div.wrap { 
    
    overflow-y:auto; 
}
/* POPUP: klasy główne */    
#POPUP { padding: 0px 0 0 5px; }
#POPUP p { text-align:center; padding:10px 0; }
/* BOX1: box glowny, glowne tlo dla elementow */
.BOX1 { }
.BOX1 .TOP, .BOX1 .BOTTOM { 
    margin-left:10px;
}
    .BOX1 .TOP .ONE, .BOX1 .BOTTOM .ONE{
        position:relative;
        height:10px;
        padding:0 10px 0 0;
    }
    .BOX1.WHITE .TOP .ONE         { background: url('./img/basic/bg3.png') no-repeat right top;}
    .BOX1.WHITE .BOTTOM .ONE  { background: url('./img/basic/bg3.png') no-repeat right bottom;}
    
    .BOX1.BLACK .TOP .ONE         { background: url('./img/basic/bg4.png') no-repeat right top;}
    .BOX1.BLACK .BOTTOM .ONE { background: url('./img/basic/bg4.png') no-repeat right bottom;}
    
    .BOX1.SPECIAL1 .TOP .ONE         { background: url('./img/basic/bg10.png') no-repeat right top;}
    .BOX1.SPECIAL1 .BOTTOM .ONE  { background: url('./img/basic/bg10.png') no-repeat right bottom;}
    
    .BOX1.SPECIAL2 .TOP .ONE         { background: url('./img/basic/bg13.png') no-repeat right top;}
    .BOX1.SPECIAL2 .BOTTOM .ONE  { background: url('./img/basic/bg13.png') no-repeat right bottom;}
    
    .BOX1.SPECIAL3 .TOP .ONE         { background: url('./img/basic/bg14.png') no-repeat right top;}
    .BOX1.SPECIAL3 .BOTTOM .ONE  { background: url('./img/basic/bg14.png') no-repeat right bottom;}
    
        .BOX1 .TOP .ONE div, .BOX1 .BOTTOM .ONE div {
            position:absolute;
            left:0;
            top:0;
            margin-left:-10px;
            height:10px;
            width:10px;
        }
        
        .BOX1.WHITE .TOP .ONE div        { background: url('./img/basic/bg3.png') no-repeat left top; }
        .BOX1.WHITE .BOTTOM .ONE div { background: url('./img/basic/bg3.png') no-repeat left bottom; }
        
        .BOX1.BLACK .TOP .ONE div        { background: url('./img/basic/bg4.png') no-repeat left top;}
        .BOX1.BLACK .BOTTOM .ONE div { background: url('./img/basic/bg4.png') no-repeat left bottom; }
        
        .BOX1.SPECIAL1 .TOP .ONE div        { background: url('./img/basic/bg10.png') no-repeat left top; }
        .BOX1.SPECIAL1 .BOTTOM .ONE div { background: url('./img/basic/bg10.png') no-repeat left bottom; }
        
        .BOX1.SPECIAL2 .TOP .ONE div        { background: url('./img/basic/bg13.png') no-repeat left top; }
        .BOX1.SPECIAL2 .BOTTOM .ONE div { background: url('./img/basic/bg13.png') no-repeat left bottom; }
        
        .BOX1.SPECIAL3 .TOP .ONE div        { background: url('./img/basic/bg14.png') no-repeat left top; }
        .BOX1.SPECIAL3 .BOTTOM .ONE div { background: url('./img/basic/bg14.png') no-repeat left bottom; }

    .BOX1 .MIDDLE  { padding:0 8px; }
        .BOX1.WHITE .MIDDLE  { background: #FFF; }
        .BOX1.BLACK .MIDDLE  { background: #000; }
        .BOX1.SPECIAL1 .MIDDLE  { background: #66C6E2; padding: 0 3px; }
        .BOX1.SPECIAL1 .MIDDLE  div.ADD_BOX{ background: #eaf8fb; }
        .BOX1.SPECIAL2 .MIDDLE  { background: #63c5e2; }
        .BOX1.SPECIAL3 .MIDDLE  { background: #e3e3e3; }