/************************************************************************/
/**** BUTTON.CSS                                                     ****/
/**** Controls appearance of all buttons across the application.     ****/
/************************************************************************/

/****************************** buttonArea ******************************/
/**** Used by the <table> that contains the button elements.         ****/
/************************************************************************/
.buttonArea
{
    padding:0px 10px 10px 10px;
    text-align:right;
}
.buttonTable
{
    margin:0px;
}
.buttonRow
{
    padding:0px;
}

/******************************* button1 ********************************/
/**** Gray buttons.  Used for page-level operations.                 ****/
/************************************************************************/
/*** the parent <td> is used to draw the border ***/
.button1Td, .button1Td_default
{
	border:1px solid #9F9F9F;
	white-space:nowrap;
	cursor:pointer;
}
.button1Td_default
{
	border:1px solid #5C5C5C;
}
/*** the button itself is drawn with a link or with the <button> element ***/
.button1, .button1_default, .button1:active, .button1_default:active
{
	color:#333;
	border-top:1px solid #F5F5F5;
	border-left:1px solid #F5F5F5;
	border-bottom:1px solid #CFCFCF;
	border-right:1px solid #CFCFCF;
	background-color:#E4E4E4;
	text-decoration:none;
	cursor:pointer;
	padding: 3px 7px;	
	/*display:block;*/
}
/*** "default" buttons can also have a different appearance ***/
.button1_default
{
    background-color:#D8D8D8;
}
/*** the button element has more built-in padding than a <a> tag does ***/
button.button1, button.button1_default
{
    padding:1px 2px;
}
/*** the button can change appearance when clicked ***/
.button1:active, .button1_default:active
{
	border-bottom:1px solid #eee;
	border-right:1px solid #eee;
	border-top:1px solid #CFCFCF;
	border-left:1px solid #CFCFCF;
	background-color:#D6D6D6;
	padding-top: 4px;
	padding-right: 6px;
	padding-bottom: 2px;
	padding-left: 8px;
}
.button1_default:active
{
    background-color:#C4C4C4;
}
button.button1:active, button.button1_default:active
{
	padding-top: 2px;
	padding-right: 3px;
	padding-bottom: 0px;
	padding-left: 1px;
}
/******************************* button2 ********************************/
/**** Gray buttons.  Used for local and secondary operations.        ****/
/************************************************************************/
/*** the parent <td> is used to draw the border ***/
.button2Td, .button2Td_default
{
	border:1px solid #9F9F9F;
	white-space:nowrap;
	cursor:pointer;
}
.button2Td_default
{
	border:1px solid #5C5C5C;
}
/*** the button itself is drawn with a link or with the <button> element ***/
.button2, .button2_default, .button2:active, .button2_default:active
{
	color:#333;
	border-top:1px solid #FFFFF5;
	border-left:1px solid #FFFFF5;
	border-right:1px solid #D7D7CE;
	border-bottom:1px solid #D7D7CE;
	background-color:#EAEAD5;
	text-decoration:none;
	cursor:pointer;
	padding: 3px 7px;	
	display:block;
}
/*** "default" buttons can also have a different appearance ***/
.button2_default
{
    background-color:#DDDDBB;
}
/*** the button element has more built-in padding than a <a> tag does ***/
button.button2, button.button2_default
{
    padding:1px 2px;
}
/*** the button can change appearance when clicked ***/
.button2:active, .button2_default:active
{
	border-bottom:1px solid #FFFFF5;
	border-right:1px solid #FFFFF5;
	border-top:1px solid #D7D7CE;
	border-left:1px solid #D7D7CE;
	background-color:#DEDECC;
	padding-top: 4px;
	padding-right: 6px;
	padding-bottom: 2px;
	padding-left: 8px;
}
button.button2:active, button.button2_default:active
{
	padding-top: 2px;
	padding-right: 3px;
	padding-bottom: 0px;
	padding-left: 1px;
}