/* CSS Document */
table.data{  font-family:Arial, Helvetica;  border:#ccc 1px solid;  -moz-border-radius:5px;	-webkit-border-radius:5px;	border-radius:5px;	-moz-box-shadow: 0 1px 2px #d1d1d1;	-webkit-box-shadow: 0 1px 2px #d1d1d1;	box-shadow: 0 1px 2px #d1d1d1; width:100%;
}
tr.header{	background:#DBE8F4; color: #00009A;
}
table.data tr:hover{background:#DBE8F4;}

table.data td{padding:4px;}

.odd-circle{
    width: 12px;
    height: 12px;
    padding: 3px 7px;
    border-radius: 8px;
    text-align: center;
    font-size: 8px;
    line-height: 1.428571429;
    border-color: #ccc;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid #ccc;
}
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('../assets/images/ajax-loader.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

.ext{position: relative; z-index: 0;text-align:left;}

.ext:hover{background-color: transparent; z-index: 50;}

.ext span{ /*CSS for enlarged image*/
position: absolute; width: 450px;background-color: lightyellow; padding: 5px; left: 10px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none;}

.extspan img{ /*CSS for enlarged image*/
border-width: 0; padding: 2px;}

.ext:hover span{ /*CSS for enlarged image on hover*/
visibility: visible; top: 10px;
left: 20px; /*position where enlarged image should offset horizontally */
}