/* Make the login and password fields the same width on IE. I don't think the "width" does anything, but the "font" inheritance does the trick */
.loginTextBox {width:auto; font:inherit;}
.loginValidator {min-width:10px;width:10px; max-width:10px;display:inline-block;}
.loginButton {margin-right:10px;}

/* Privilege page formatting */
.privilegeCategory {background-color:#a3ccea;margin-top:1px;}
.privilegeCategory:hover {background-color:#b9e36a;color:#20bf55;}

/***
 show-hide panel, like used in AccountList
 ***/
/* The container contains the toggle and the ListPanel */
.showHideSelectionContainer {margin-bottom:40px;}
/* This contains the toggle area where the user clicks to toggle */
.showHideToggle {background-color:#a3ccea;margin-top:1px;}
.showHideToggle:hover {background-color:#b9e36a;color:#20bf55;}
/* This contains the panel that is shown/hidden */
.showHidePanel {border:1px solid #a3ccea;padding:10px 5px 10px 5px;}

/* class for any use of the accordion control */
.accordionHeader {background-color:#a3ccea;margin-top:1px;}
.accordionHeader:hover {background-color:#b9e36a;color:#20bf55;}

/* NewUser */
/* the container contains the New User wizard */
.newuserCreationContainer {margin-bottom:40px;}
.newuserFormPanel {border:1px solid #a3ccea;padding:10px 5px 10px 5px;}

/* New FileType entry "form" */
.newFileTypePanel {border: 1px solid #a3ccea;padding:10px 5px 10px 5px;padding-bottom:10px;margin-top:40px;margin-bottom:40px;}
.statusPanel {border: 2px solid #c50000; color: #c50000; font-weight:bold; padding:10px 5px 10px 5px; margin-top:20px;margin-bottom:40px;}

/* used for the stretch icon */
.stretchHandle {background-image:url(../images/stretch.png);
                height:11px;width:11px;
	overflow:hidden;
	cursor:se-resize;
}

/* Contains a privilege on the Privileges page */
.privilege {width:100%;}
/* Contains the privilege name and object name respectively. Min-height enables the floats to take space even when they are empty */
.privilegeName {position:relative;float:left;width:20%;min-height:1.2em;}
.privilegeObject {position:relative;float:left;width:20%;min-height:1.2em;}
.privilegeObject .containsValidObject {border-left: solid 1px #999999;padding-left: 5px;}
/* The style applied to the tooltips in the Priv repeater */
/* display:block to make it a block with a border; spans are normally inline, so borders do weird things.
 * position: static !important: overrides the hover widget's positioning.
 */
.hoverPrivilegeDesc {background-color:#ffffff;border:solid 1px #a3ccea; position:static !important; display:block;}
/* Contains the set of items for a privilege */
.privilegeItems {float:left;}
/* Contains an individual privilege item */
.privilegeItem {position:relative;float:left;padding-left:5px; padding-right:5px}
/* Contains the textual label for the privilege item */
.privilegeItemLabel {text-align:center;}
/* Contains the field for data entry */
.privilegeItemField {text-align:center;}
.privilegeItemClear {clear:both;}
.privilegeClear {clear:both;}

.repeaterRow1 {}
.repeaterRow2 {background-color:#EEEEEE;}

/* need to reset min-width to zero, or at least something smaller, for small screen */
.roleBtn {min-width:50px;text-align:center;} /* need to override to align left for small screen */
.roleNm {min-width: 150px;text-align:left;padding-left:5px;padding-right:5px;}
.roleDesc {min-width: 400px;text-align:left;padding-left:5px;padding-right:5px;}

/* User grid */
.userBtn {min-width:50px;text-align:center;} /* need to override to align left for small screen */
.userUserNm {min-width: 170px;text-align:left;padding-left:5px;padding-right:5px;}
.userFirstNm {min-width: 85px;text-align:left;padding-left:5px;padding-right:5px;}
.userLastNm {min-width: 95px;text-align:left;padding-left:5px;padding-right:5px;}
.userGreetingNm {min-width: 90px;text-align:left;padding-left:5px;padding-right:5px;}
.userAccountNm {min-width: 90px;text-align:left;padding-left:5px;padding-right:5px;}

.userEditBtn {padding-left: 5px; padding-right: 5px; border: 1px solid #a3ccea}
/* Stopped working in ie8 normal mode, but works in compatibility mode */
/* Tried a zillion things. Not going to fix for now. */
.userEditBtn:hover {border: 1px solid #000; background-color: #EEEEEE;}

.userRolesPanel {padding-top: 20px;}

/* For the User management page, User-Role pane: Contains a role */
.userRole {width:100%;}
/* Contains the field for data entry/checkboxing for User-Roles */
.userRoleField {position:relative; float:left;}
/* Contains a role name and its checkbox in the User-Role mapping screen */
.userRoleNm {position:relative; left: 20px;}
.userRoleDesc {position:relative; left: 20px; font-style:italic;}
.userRoleClear {clear:both;}
/* Contains the Query More Roles control bar */
.userQueryMoreRoles {background-color: #a3ccea;margin-top:5px;padding:5px 0px;}
/* this style is set programatically when a User role is from an alternate account. */
.alternateAccount {color:blue;border-bottom:1px dotted blue;}

/* Account Admin screen */
.accountEditBtn {padding-left: 5px; padding-right: 5px; border: 1px solid #a3ccea}
/* Stopped working in ie8 normal mode, but works in compatibility mode */
/* Tried a zillion things. Not going to fix for now. */
.accountEditBtn:hover {border: 1px solid #000; background-color: #EEEEEE;}


/* Download page */
.downloadGridCol {/*min-width: 175px;*/text-align:left;padding-left:5px;padding-right:5px;}

/* The style applied to the File Description in the download page grid */
/* display:block to make it a block with a border; spans are normally inline, so borders do weird things.
 * position: static !important: overrides the hover widget's positioning.
 */
.hoverFileDesc {background-color:#ffffff;border:solid 1px #a3ccea; position:static !important; display:block;}


/* Used on a asp:panel to avoid consuming more vertical space */
.advancedSearchOptionsToggle {display:inline-block;}
  /* inline-block somehow prevents the toggled panel from displaying, but inline works */
.ie .advancedSearchOptionsToggle {display:inline;}


/**************
 Upload Page
**************/
#divUploadStatus {text-align:center;}

/* Used to put a circle around "i" where we want to provide a popup, e.g. <div class="i-info-outer"><span id="noteRevertToSFU" class="i-info-inner">i</span></div> */
.i-info-inner {font-style:"Courier New","Courier","Lucida Console",Lucida,monospace;font-size:0.8em;padding:0;margin:0;overflow:hidden;color:#0473c6; text-decoration:none;text-align:center;vertical-align:middle;display:table-cell; width:1.8em;height:1.8em; border:solid 1px #0473c6;-webkit-border-radius: 0.9em; -moz-border-radius: 0.9em; border-radius: 0.9em;}
.i-info-inner:hover {color:#b9e36a;border:solid 1px #b9e36a;background-color:#7a8590;}
.i-info-inner:active {color:#888888;border:solid 1px #888888;}
.i-info-outer {display:inline-block;padding-left:1em;padding-right:1em;}

/* Buttons */
.yui-skin-sam .yui-button.multifileuploader-remove-button {font-weight:bold;}
.yui-skin-sam .yui-button.multifileuploader-reenqueue-button {font-weight:bold;}
.yui3-skin-sam .yui3-button.multifileuploader-remove-button {font-weight:bold;}
.yui3-skin-sam .yui3-button.multifileuploader-reenqueue-button {font-weight:bold;}

/* Table highlighting */
.yui-skin-sam .yui-dt tr.itemRemoved {color:#999999; font-style:italic;}
.yui-skin-sam .yui-dt tr.itemCancelled {color:#999999; font-style:italic;}
.yui3-skin-sam .yui3-datatable-table tr.itemRemoved {color:#999999; font-style:italic;}
.yui3-skin-sam .yui3-datatable-table tr.itemCancelled {color:#999999; font-style:italic;}
/* Table column hiding */
.yui3-skin-sam .yui3-datatable-col-accountId {display: none;}
.yui3-skin-sam .yui3-datatable-col-id {display: none;}
.yui3-skin-sam .yui3-datatable-col-filedesctodisplay {display: none;}
.yui3-skin-sam .yui3-datatable-col-accountNmtodisplay {display: none;}
/* Button color - subtle light blue */
.yui3-skin-sam BUTTON.mfu-button {background-color: #a3ccea}

/* General highlighting, usually programmatically DOM inserted */
.highlightItem {background-color:Red;border-right:solid 2px Red;}
.yui-skin-sam .yui-dt td.highlightItem {background-color: #20bf55;}
.yui3-skin-sam .yui3-datatable-table td.highlightItem {background-color: #a3ccea;}
#selectFilesBorder {display:inline-block; border:solid 2px #fff;}
#selectFilesBorder.highlightItem {border:solid 2px Green; background-color:Green;}
#clickForUploadBorder {display:inline-block; border:solid 2px #fff;}
#clickForUploadBorder.highlightItem {border:solid 2px Green; background-color:Green;}

#msgMustSelectFileType {color:#666666;}
#msgMustFixErrors {color:#666666;}

/* Add space between the Select Files and Start Upload buttons */
#uploaderContainer {display:inline-block; padding-right:40px;}
#beginUploadingButtonContainer {display:inline-block;}

/* YUI Tooltip text style */
.yui-tt {max-width:400px;}
.yui-tt .bd {font-size:9px;font-family: Helvetica, Arial, Tahoma, Verdana, sans-serif;}
.yui3-tt {max-width:400px;}
.yui3-tt .bd {font-size:9px;font-family: Helvetica, Arial, Tahoma, Verdana, sans-serif;}

/* Progress bar */
.uploadersection .yui3-datatable-table .progressbar {height:5px;min-width:100px;width:100%;}


/* Used for our primary throbber in UpdatePanels. Be sure that this is contained somewhere in a div with explicit position declared (e.g. relative), like .throbbercontainer,
 * because the throbber1 absolute will be positioned absolutely inside that div.
 * Usage model: throbbercontainer div around the whole area where the throbber and the content it is replacing will appear.
                throbber1 where the throbber will appear.
                throbber1_imgdiv inside throbber1.
 */
.throbbercontainer {position:relative;}
.throbber1 {position: absolute; top:0;width:100%;text-align:center;margin-left:auto;margin-right:auto}
.throbber1_imgdiv {position: relative; margin-left:auto;margin-right:auto; background-image:url(../images/throbber_al_snake_006699.gif);
                height:32px;width:32px;}
.safari .throbber1_imgdiv {background-image:url(../images/throbber_al_clock_006699.gif);
				height:32px;width:32px;}
.android .throbber1_imgdiv {background-image:url(../images/throbber_al_squarescircle_006699.gif);
				height:31px;width:31px;}

/* GridView formatting */
/* Bug: IE8/9 is really weird about borders when a background color is in use in a TH.
 *      Sometimes the borders are invisible/hidden.
 *      Sometimes they are misaligned between TH and TD.
 * Conclusion: It looks best if we remove borders from TH and TD completely for IE. Use Outline around the
 * table so that the outline appears around the edge of the TR-TH.
 * Bug: IE8 supposedly supports gradients, but when we do any sort of async postback with our animations,
 *      IE8 seems to munge any text that is on a gradient background. It seems to work ok on IE9, though,
 *      so we use gradients for IE9.
 */
.grid1 { 
    width: 100%; 
    background-color: #fff; 
    margin: 5px 0 10px 0; 
    border: solid 1px #888888; 
    border-collapse:collapse; 
}
.ie .grid1 {border-style:none; outline: 1px solid #888888}

.grid1 td { 
    /*padding: 2px; */
    border: solid 1px #aaaaaa; 
    /*color: #717171; */
}
.ie .grid1 td {border-style:none;}

.grid1 tr {border: solid 1px #888888;}
.ie .grid1 tr {border-style:none;}

.grid1 th { 
    padding-top: 4px; 
    padding-bottom: 4px;
    /*color: #fff; */
    background-color:#a3ccea;
    background-image:-moz-linear-gradient(center top , #ffffff, #a3ccea);
    background-image:-webkit-linear-gradient(center top , #ffffff, #a3ccea);
    background-image:-webkit-gradient(linear,left top, left bottom,color-stop(0,#ffffff),color-stop(1,#a3ccea));
	background-image:-ms-linear-gradient(center top , #ffffff, #a3ccea);
	background-image:linear-gradient(to bottom , #ffffff, #a3ccea);
    border: solid 1px #888888;
    text-shadow:0 1px 3px #F6F6F6;
    /*font-size: 0.9em; */
}
.ie .grid1 th {border-style:none; }
.ie9 .grid1 th {-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#a3ccea')";}

.grid1 .grid1_alt
{
    background-color:#eee;
    background-image:-moz-linear-gradient(center top, #eeeeee, #f8f8f8);
    background-image:-webkit-linear-gradient(center top, #eeeeee, #f8f8f8);
    background-image:-webkit-gradient(linear,left top, left bottom,color-stop(0,#eeeeee),color-stop(1,#f8f8f8));
	background-image:-ms-linear-gradient(center top , #eeeeee, #f8f8f8);
	background-image:linear-gradient(to bottom , #eeeeee, #f8f8f8);
}
.ie9 .grid1 .grid1_alt {-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#f8f8f8')";}
.grid1 .grid1_pager {
	background-color:#a3ccea;
	background-image:-moz-linear-gradient(center top , #ffffff, #a3ccea);
	background-image:-webkit-linear-gradient(center top , #ffffff, #a3ccea);
	background-image:-webkit-gradient(linear,left top, left bottom,color-stop(0,#ffffff),color-stop(1,#a3ccea)); 
	background-image:-ms-linear-gradient(center top , #ffffff, #a3ccea);
	background-image:linear-gradient(to bottom , #ffffff, #a3ccea);
    text-shadow:0 1px 3px #F6F6F6;
}
.ie .grid1 .grid1_pager {border-style:none; outline: 1px solid #888888}
.ie9 .grid1 .grid1_pager {-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#a3ccea')";}

.grid1 .grid1_pager table { margin: 5px 0; }
.grid1 .grid1_pager td { 
    border-width: 0; 
    padding: 0 6px; 
    /*disable the borders; the separators between page numbers looks busy. border-left: solid 1px #666;*/
    border-left-style: none; 
    border-right-style: none;
    font-weight: bold; 
    /*color: #fff; */
    line-height: 12px; 
 }

.grid1 .grid1_pager tr {border: none;}

/* Disable the right/left borders because only the rightmost one is visible when we have a background, anyway */
.ie .grid1 .grid1_pager td {
	border-left-style: none;
	border-right-style: none;
}
.ie9 .grid1 .grid1_pager td {
	background-color:#a3ccea;
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#a3ccea')";
}
 /* We will let it inherit the global a/a:hover colors.
.grid1 .grid1_pgr a { color: #666; text-decoration: none; }
.grid1 .grid1_pgr a:hover { color: #000; text-decoration: none; }
*/

/* We use :before for some formatting on small screens. Small screens are handled by UserWeb_smallscreen.css.
   We hide the :before on normal screens, but the small screen stylesheet will turn it back on and use it.
 */
.grid1>tbody>tr>td:before {display:none;}

/* Use the firefoxOnlyBlock style when you want a display:block element to appear only on firefox */
.firefoxOnlyBlock {display:none;}
.ff .firefoxOnlyBlock {display:block;}

.userAdminUnlockApprovePanel {margin-top: 10px;}
.userAdminChangePasswordPanel {margin-top: 10px;}

/* Use these 3 classes together to align info on screen in a table-like manner. Not good for tables with headers, though. */
.tableDiv {display:table;}
.tableDiv .rowDiv {display:table-row;vertical-align:middle;}
.tableDiv .rowDiv .cellDiv {display:table-cell;vertical-align:middle;}


/* Use this class to add color-pop to a validation error */
.validationerror {color:Red;}
/* Use these classes to add color-pop to success/failure messages */
.successmessage {color:Green;}
.failuremessage {color:Red;}
.unusualvalue {border-bottom:2px dashed orange;}