/* BASIC CSS STYLING TO MAKE IT LOOK PRETTIER */
/*table { margin: 5em; } */
td, th { padding: 2px 4px; } 


/* IE7: setting "separate" results in bad visuals; all other browsers work fine with either value */
/* if set to "separate", then this rule is also needed to prevent double vertical borders on hover:
table.ui-styled-table tr * + th, table.ui-styled-table tr * + td  { border-left-width: 0px !important; } */
table.ui-styled-table { border-collapse: collapse; 
                        border-spacing: 0;
}

/* undo the "bolding" that jQuery UI theme may cause on hovered elements
/* IE7: does not support "inherit", so use a MS proprietary expression along with an IE <= 7 targeting hack
        to make the visuals consistent across all supported browsers */
table.ui-styled-table td.ui-state-hover {
    font-weight: inherit;
    *font-weight: expression(this.parentNode.currentStyle['fontWeight']);
}

/* initally remove bottom border for all cells */
table.ui-styled-table th, table.ui-styled-table td { border-bottom-width: 0px !important; }

/* hovered-row cells should show bottom border (will be highlighted) */
table.ui-styled-table tbody tr:hover th,
table.ui-styled-table tbody tr:hover td
{ border-bottom-width: 1px !important; }

/* remove top border if the above row is being hovered to prevent double horizontal borders */
table.ui-styled-table tbody tr:hover + tr th,
table.ui-styled-table tbody tr:hover + tr td
{ border-top-width: 1px !important; }

/* last-row cells should always show bottom border (not necessarily highlighted if not hovered) */
/* IE7, IE8: selector dependent on CSS classes because of no support for :last-child */
table.ui-styled-table tbody tr.last-child th,
table.ui-styled-table tbody tr.last-child td
{ border-bottom-width: 1px !important; }

/* Round Corners */
table.ui-styled-table th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}
table.ui-styled-table th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}
table.ui-styled-table th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}



/* last-row cells should always show bottom border (not necessarily highlighted if not hovered) */
/* IE8 BUG: if these (unsupported) selectors are added to a rule, other selectors for that rule will stop working as well! */
/* IE9+, FF, Chrome: make sure the visuals are working even without the CSS classes crutch */
table.ui-styled-table tbody tr:last-child th,
table.ui-styled-table tbody tr:last-child td
{ border-bottom-width: 1px !important; }