/* tooltip styling. by default the element to be styled is .tooltip  */
body{font-family:Arial,sans-serif,"Lucida Sans Unicode","Lucida Grande";font-size:0.75em;line-height:1.6em; }
A {text-decoration: none; color: #7089ad; } 
P{margin: 0px;} 
.tooltip {
    display:none;
    background:transparent url(../pix/black_arrow.png);
    font-size:12px;
    height:70px;
    width:160px;
    padding:25px;
    color:#fff; 
    vertical-align:middle;   
}

/* style the trigger elements */
#demo img {
    border:0;
    cursor:pointer;
    margin:0 25px;
}

.zitem {
    width:150px;
    height:150px;    
    border:8px solid #f2f2f2;    
    margin:5px 5px 5px 0;
    
    /* required to hide the image after resized */
    overflow:hidden;
    
    /* for child absolute position */
    position:relative;
    
    /* display div in line */
    float:left;
}

.zitem .caption {
    width:150px;
    height:20px;
    background:#000;
    color:#fff;
    text-align: center;
        
    /* fix it at the bottom */
    position:absolute;
    bottom:-1px; /* fix IE issue */
    left:0;

    /* hide it by default */
    display:none;

    /* opacity setting */
    filter:alpha(opacity=70);    /* ie  */
    -moz-opacity:0.7;    /* old mozilla browser like netscape  */
    -khtml-opacity: 0.7;    /* for really really old safari */  
    opacity: 0.7;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.zitem .caption a {
    text-decoration:none;
    color:#fff;
    font-size:12px;    
    
    /* add spacing and make the whole row clickable*/
    padding:5px;
    display:block;
}

img.last {
    border:0;
    
    /* allow javascript moves the img position*/
    position:absolute;
}


 TD.c1{ border-bottom: thin dashed #cccccc; background-color: #ffffcc;}  
 TD.c3{ border-bottom: thin dashed #cccccc; background-color: #ffffcc; text-align: center; font-weight:bold; }  
 TD.c2{ border-bottom: thin dashed #cccccc; background-color: #ffffff; text-align: center;  font-weight:bold;}