/* On small screen, center the throbber in the middle of the screen, because otherwise it might be out of view */
.throbber1 {position: fixed; top:50%;right:50%;width:auto;text-align:center;margin-left:auto;margin-right:auto}
.throbber1_imgdiv {margin-left:-16px;margin-right:-16px;}


/* clear some min-widths that are set for big screens */
.grid1 tr {min-width:0px;}
.grid1 th {min-width:0px;}

/*******
 skinnify tables, per technique at http://css-tricks.com/9096-responsive-data-tables/
*******/

/* First force elements to block mode */
.grid1 table, .grid1>thead, .grid1>tbody, /*.grid1>thead>tr>th, .grid1>tbody>tr>th,*/
.grid1>tbody>tr>td, .grid1>tbody>tr, .grid1>thead>tr,
.yui3-datatable-table table,  .yui3-datatable-table>thead,  .yui3-datatable-table>tbody,
 .yui3-datatable-table>tbody>tr>td,  .yui3-datatable-table>tbody>tr,  .yui3-datatable-table>thead>tr {
	display: block;
}
/* Clear borders/outlines */
.grid1,  .yui3-datatable-table {
	outline-style: none;
	border-style: none;
}

/* Hide header, well, technically, put it out of view; accessibility screen readers can still read it */
/* Wait - do not hide it - we can use it for sorting. Instead, add a Before to tell the user so.
.grid1>thead>tr, .grid1>tbody>tr>th {position:absolute;top:-9999px;left:-9999px;}
*/
.grid1 > tbody > tr:nth-of-type(1):before,
.yui3-datatable-table > thead > tr:nth-of-type(1):before {float:left;padding-right:5px;height:100%}
.grid1 > tbody > tr:nth-of-type(1):before,
.yui3-datatable-table > thead > tr:nth-of-type(1):before {content: "Sort by:";}
.grid1>thead>tr>th, .grid1>tbody>tr>th,
.yui3-datatable-table>tbody>tr>th {padding:2px;font-size:9px;}

/* But we DO want to hide the uploader page YUI table header, because it is a non-sortable table. */
.uploadersection .yui3-datatable-table>thead>tr, .uploadersection .yui3-datatable-table>tbody>tr>th {position:absolute;top:-9999px;left:-9999px;}


.grid1>tbody>tr, .yui3-datatable-table>tbody>tr { border: 1px solid #ccc; }
.grid1>tbody>tr>td, .yui3-datatable-table>tbody>tr>.yui3-datatable-cell {
                /* Behave  like a "row" */
                border: none;
                border-bottom: 1px solid #eee;
                position: relative;
                padding-left: 11em; /* Leaves room for field description */
                overflow:hidden; /* in case the :before text overlaps */
        }
/* remove gradient - we like gradients in general, but this area is so tall that a gradient looks awkward */
.grid1>tbody>TR.grid1_alt, .yui3-datatable-table>tbody>TR.yui3-datatable-odd {background-image:none;}
/* since this area is slightly darker than a regular TR>TD, make its border color a little darker, too */
.grid1>tbody>TR.grid1_alt>td, .yui3-datatable-table>tbody>TR.yui3-datatable-odd>td {border-bottom-color:#ddd;}

/* Content property specifies what text to put in the "before". attr(data-label) tells it to read from the element''s data-label attribute.
 * In essence, this grabs the value from the data-label attribute and places it before the actual cell value.
 */
.grid1>tbody>tr>td:before,
.yui3-datatable-table>tbody>tr>td:before {
        position:absolute;
        width:10em;
        top:0px;
        left:3px;
        display:block;
        overflow:hidden; /* in case the :before text overlaps */
        content:attr(data-label);
    }

/* Emphasize/de-emphasize some text in the skinnified grid */
.downloadGridFileNameCol {font-weight:bold;}
.downloadGridFileNameCol:before {font-weight:normal;}
.downloadGridFileNameCol .hoverFileDesc {font-weight:normal;}
.roleNm {font-weight:bold;}
.roleNm:before {font-weight:normal;}
.userUserNm {font-weight:bold;}
.userUserNm:before {font-weight:normal;}
.userAccountNm {font-weight:bold;}
.userAccountNm:before {font-weight:normal;}

/* Keeps row from being too short for row title to display */
.uploadersection .yui3-datatable-table .progressbar {min-height: 1em;}
.uploadersection .yui3-datatable-table .yui3-datatable-col-progresstodisplay {min-height:1em;}
.uploadersection .yui3-datatable-table .yui3-datatable-col-remove {min-height:1em;}
/* Make table fill the width of the screen */
.uploadersection .yui3-datatable-table {min-width: 100%;}

/* need to override to align left for small screen */
.roleBtn {text-align:left;}
.userBtn {text-align:left;}
/* need to override min-width for small screen */
.roleBtn {min-width: 0px;}
.roleNm {min-width: 0px;}
.roleDesc {min-width: 0px;}
.userBtn {min-width: 0px;}
.userUserNm {min-width: 0px;}
.userFirstNm {min-width: 0px;}
.userLastNm {min-width: 0px;}
.userGreetingNm {min-width: 0px;}
.userAccountNm {min-width: 0px;}