/*  
    overlay dimensions are defined with CSS. this tool detects them dynamically   
    and resizes the background image correspondingly 
*/ 

#myOverlay {     
    
    /* overlay is initially hidden  */
    /*display:none;*/
} 

/*  
    close button (div.close element) is auto-generated by default.  
    here it is positioned on top-right corner  
*/ 

/*

#myOverlay div.close { 
    background:url(img/overlay/close.png) no-repeat; 
    position:absolute;
    top:2px; 
    right:2px; 
    width:36px; 
    height:36px; 
    cursor:pointer;     
} 

*/

/*  

    the actual content is moved little bit inside so that it doesn't overlap 
    with the drop shadow in the overlayed image 

*/ 

/*

#myOverlay p { 
   color:#567; 
   font-size:50px; 
   margin: 55px 65px 15px 65px;
}

*/

a.open_overlay {
	cursor: pointer;
}

div.overlay {
    padding:40px;
   /* width:576px; */
   display:none;
   height: 1000px;
   background-image:url(img/overlay/gray.png);
}

div.overlay div.close {
 background:url(img/overlay/close.png) no-repeat;
 position:absolute;
 top:10px;
 right:15px;
 width:35px;
 height:35px;
 cursor:pointer;
}

#apple div.close {
   background-image:url(img/overlay/apple-close.png);
   left:16px;
   top:18px;
}

#apple p {
   color:#fff;
}

div.overlay p {
   color:#567;
   font-size:50px;
   margin:60px;
}

#petrol p {
   color:#fff;
}

#custom {
 width:432px;
 display:none;
}

#custom div.close {
   left:80px;
   top:-25px;
}

#external a {
   font-size:35px;
   color:#95d0df;
   text-decoration:none;
}