/*  Scrims

    Used to created a fade out or dimmed effect behind pop ups 
*/

.scrim_underlay_classic {
    height:100%;
    left:0;
    position:fixed;
    top:0;
    width:100%;
    z-index:900;
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent url(/images/bg_overlay.png) repeat scroll 0 0;
}


/* CLASSIC STYLE */

/*  
SAMPLE CLASSIC POPUP

This stretches to fill available width.... 

<div class="panel popup classicLP">
    <div class="corner topLeft"><div class="corner topRight"><div class="topSpan"></div></div></div>
        <div class="sideLeft"><div class="sideRight"><div class="panelContent">
            HELLO world!<br /><br /><br />      
        </div></div></div>
    <div class="corner bottomLeft"><div class="corner bottomRight"><div class="bottomSpan"></div></div></div>    
</div>
  
  
One with a target size ....

<div class="panel popup classicLP classicLP_670x453">
    <div class="corner topLeft"><div class="corner topRight"><div class="topSpan"></div></div></div>
    <div class="sideLeft"><div class="sideRight"><div class="panelContent">
        <h2>Sign up NOW!!! </h2>
        HELLO world!<br /><br /><br />
    </div></div></div>
    <div class="corner bottomLeft"><div class="corner bottomRight"><div class="bottomSpan"></div></div></div>    
</div>
  
*/

div.classicLP div {
    border: 0px solid #333;
}
div.classicLP .corner { 
    background-repeat: no-repeat;
}
div.classicLP .span {
    background-repeat: repeat; 
}


div.classicLP .topLeft {
    background: url(/css/panel/popup/classic/tb_scale9_topLeft.png)  no-repeat left top;   
    padding-top: 0px;
    padding-left: 28px;
}
div.classicLP .topSpan {
    background: url(/css/panel/popup/classic/tb_scale9_topSpan.png);   
    padding-top: 28px;
}

div.classicLP .topRight {
    background: url(/css/panel/popup/classic/tb_scale9_topRight.png)  no-repeat right top;   
    padding-top: 0px;
    padding-right: 28px;
}


div.classicLP .sideLeft {
    background: url(/css/panel/popup/classic/tb_scale9_sideLeft.png)  repeat-y left top;   
    padding-top: 0px;
    padding-left: 28px;
}
div.classicLP .panelContent {
    background: url(/css/panel/popup/classic/tb_scale9_center.png) repeat top left;
    display: block;
    border: 1px solid #fff;
}

div.classicLP .sideRight {
    background: url(/css/panel/popup/classic/tb_scale9_sideRight.png)  repeat-y right top;   
    padding-top: 0px;
    padding-right: 28px;
}

div.classicLP .bottomLeft {
    background: url(/css/panel/popup/classic/tb_scale9_bottomLeft.png)  no-repeat left top;   
    padding-top: 0px;
    padding-left: 28px;
}
div.classicLP .bottomSpan {
    background: url(/css/panel/popup/classic/tb_scale9_bottomSpan.png);   
    padding-top: 28px;
}
div.classicLP .bottomRight {
    background: url(/css/panel/popup/classic/tb_scale9_bottomRight.png)  no-repeat right top;   
    padding-top: 0px;
    padding-right: 28px;
}


/* Classic Medium ( video sized ) 
 * The visual size is 669 wide by 453 tall 
 * These sizes factor in the space surrounding the panel 
 * for the srop shadow effect that is part of the 
 * back ground images
 * The classic shadow is padding (visually) 
 * Top and bottm 6 pixel
 * Left and right 7 pixel 
 * Add these numbers to the style name declaration
 * I.E. panel that is 670 wide ( 670 + 7 + 7 )
 * for the panel content subtract padding of top and bottom minus
 * the visual padding of the drop shadow effect ( 480 - ( 28-6 ) - ( 28 - 6 ) )
 **/

/* medium size (videos) */ 
div.classicLP_670x453 {
    width:684px;
}
div.classicLP_670x453 .panelContent {
    height:417px;
}
/* large size (diadnostic tool) */
div.classicLP_925x453 {
    width:939px;
}
div.classicLP_925x453 .panelContent {
    height:417px;
}


/* end CLASSIC */