/* ----------------------------------------------------------------------------
	BASIC TAG STYLES
---------------------------------------------------------------------------- */

html {
	margin: 0px;
	padding: 0px;
}

body {
	font: normal 12px arial, helvetica, sans-serif;
	margin: 2px;
	padding: 0px;
	background-color: #C9E8FA;
}

a { color: #336699; }

/* link with error coloring (refer to the "error" style class below) */
a.error:link, a.error:active, a.error:visited, a.error:hover { color: #ff0000 }

/** Use H1 tags for all page titles **/
h1 {
	margin: 0;
	padding: 0;
	color: #333;
	font: bold 16px arial, helvetica, sans-serif;
}

/** Use H2 tags for all sub-titles / section titles **/
h2 {
	margin: 0;
	padding: 0;
	color: #333;
	font: bold 13px arial, helvetica, sans-serif;
}

/** Use H3 tags for all headers in sections built on the "component" class
	(see below)
**/
h3 {
	margin: 0;
	padding: 4px;
	color: white;
	font: bold 11px arial, helvetica, sans-serif;
	background-color: #51608e;
}

/** The H4 tag is essentially the same as an H3, just with a little less top
	padding. This should also be used in "component"-based page sections
**/
h4 {
	margin: 0;
	padding: 2px 4px 4px 4px;
	color: white;
	font: bold 11px arial, helvetica, sans-serif;
	background-color: #51608e;
}

.topheader {
	margin: 0;
	padding: 4px;
	font: bold 11px arial, helvetica, sans-serif;
	background-color: #F0F0E8;
}

p {	font: normal 12px arial, helvetica, sans-serif; }

img {
	border: none;
	vertical-align: middle;
}

/* form elements */
form {
	display: inline;
	margin: 0px;
	padding: 0px;
}

input, select, textarea {
	font: normal 11px arial, helvetica, sans-serif;
	vertical-align: middle;
}

/* added fieldset, legend and label */
fieldset {
    float: left;
    margin-top: 3px;
    margin-right: 10px;
    padding: 0px 8px 3px 8px;
    border: 1px solid black;
}

legend
{
    font-weight: bold;
    font-size: 13px;
    font-family: arial, helvetica, swiss, sans-serif;
}

label
{
    font-weight: bold;
    font-size: 11px;
    font-family: arial, helvetica, swiss, sans-serif;
}

label.optional { font-weight: normal }

/* table elements */
th, td {
	font-size: 11px;
	font-family: arial, helvetica, swiss, sans-serif;
}

pre {
    font-size: 7.5pt;
    font-color: black;
}

/* begin: anchor tags (<a>) previously defined */
a.underlined:link {
    color: #000080;
    text-decoration: underline;
}

a.underlined:active {
    color: #0000ff;
    text-decoration: underline;
}

a.underlined:visited {
    color: #707070;
    text-decoration: underline;
}

a.underlined:hover {
    color: #ff0000;
    text-decoration: underline;
}

a.emphasized:link {
    font-weight: bold;
    color: #000080;
    text-decoration: underline;
}

a.emphasized:active {
    font-weight: bold;
    color: #0000ff;
    text-decoration: underline;
}

a.emphasized:visited {
    font-weight: bold;
    color: #707070;
    text-decoration: underline;
}

a.emphasized:hover {
    font-weight: bold;
    color: #ff0000;
    text-decoration: underline;
}

a.header:link {
    font-weight: bold;
    font-size: 12pt;
    color: #000080;
    text-decoration: underline;
}

a.header:active {
    font-weight: bold;
    font-size: 12pt;
    color: #0000ff;
    text-decoration: underline;
}

a.header:visited {
    font-weight: bold;
    font-size: 12pt;
    color: #707070;
    text-decoration: underline;
}

a.header:hover {
    font-weight: bold;
    font-size: 12pt;
    color: #ff0000;
    text-decoration: underline;
}

a.pghdglnk {
    padding-right: 22px;
    font-weight: bold;
    font-size: 14px;
    color: #314379;
}

/* ----------------------------------------------------------------------------
	BASIC DISPLAY FORMATTING CLASSES
---------------------------------------------------------------------------- */

.pghdg
{
    padding-left: 12px;
    font-weight: bold;
    font-size: 18px;
    color: #314379;
}

.alignleft, .alignl {	text-align: left;}

.alignright, .alignr {	text-align: right;}

.aligntop {	vertical-align: top;}

.center, .alignc {	text-align: center;}

.cleanup {	clear:both; line-height:0; font-size: 0;}

/** begin: Greys out text to indicate it is disabled **/
.disabledtext { color: #999; } /* Safe Hex 3, slightly lighter than #666 */

.grayedtext { color: #666; } /* Safe Hex 3, dark grey version */

.explanatorytext {
	margin: 0;
	padding: 5px 12px 15px 12px;
	font: normal 11px arial, helvetica, sans-serif;
}

/** Text color for the contents of a text input field displaying a format tip.
	Use the JavaScript functions clearTip() and restoreTip() to manage the focus
	and blur behavior in text fields that use format tips
**/
.formattip { color: #aaa }
/** end: Greys out text to indicate it is disabled **/

/** This class hides an element and causes the layout to reflow **/
.hidden {
	visibility: collapse;
	display: none;
}

/** This class is similar to .hidden, but elements that use this class remain
	in the layout (leaving a "gap" or "hole") and the browser does not reflow
	the content
**/
.hiddenNoCollapse {	visibility: hidden;}

/** Forces an element to use inline display **/
.inline { display: inline; }

/** Prevents text from wrapping to the next line **/
.nowrap { white-space: nowrap; }

/** Standard alignment of elements that display numeric data **/
.number { text-align: right }

/** You can use JavaScript to change an elements class from "hidden" or
	"hiddenNoCollapse" to "shown", thereby toggling its display on the screen.
**/
.shown {
	visibility: auto;
	display: auto;
}

.tip {
	padding: 2px;
	font: normal 10px arial, helvetica, sans-serif;
}

/** This class truncates text that runs wider than the container and replaces
	the truncated text wtih an ellipsis (...).
	
	This class MUST be used in conjunction with an ID that specifies the width
	of the container. If the container does not have a fixed width, this class
	does not work.
**/
.truncatedtxt { 
	text-overflow: ellipsis;
	overflow: hidden; 
	white-space: nowrap;
}

.bgfooter
{
    color: #cccccc;
    background-color: #000000;
}
.ftrheight
{
    height: 23px;
}
.ftrcopyright
{
    font-size: 10px;
    color: #999999;
}
.ftrlinks
{
    font-size: 10px;
    color: #cccccc;
    text-decoration: underline;
}

#copyright {
	color: #999;
	font: normal 11px arial, helvetica, sans-serif;
	clear:both;
	position: relative;
	background-color: #333;
	padding: 2px 2px 2px 2px;
	/* border: 1px solid green; */
}

/* ----------------------------------------------------------------------------
	STANDARD WINDOW CLOSE BUTTON ID FOR POP-UP WINDOWS
---------------------------------------------------------------------------- */
#closebutton {
	position: absolute;
	top: 4px; right: 12px;
}

/* ----------------------------------------------------------------------------
	STANDARD MESSAGE FORMAT CLASSES
---------------------------------------------------------------------------- */

/** Standard text color for error status messages. Can be used in conjunction
	with the "strong" class to add emphasis to the message. Error messages
	should always be displayed with the warning icon
	(/common/img/icon_warning.jpg) displayed just before the message text. e.g.:
	
	<div class="error"><img src="/common/img/icon_warning.jpg">Place your error
	message text here.</div>
	
	If the status message is displayed against a gray or other neutral
	background, there is no need for any other styling. Error messages displayed
	against a white background should also use the "status" class for better
	readability.
**/
.error, .formErrorMsg { color: #ff0000 }

/** Standard text color for informational status messages. Can be used in
	conjunction with the "strong" class to add emphasis to the message. Info
	messages should always be displayed with the information icon
	(/common/img/icon_info.jpg) displayed just before the message text. e.g.:
	
	<div class="info"><img src="/common/img/icon_info.jpg">Place your status
	message text here.</div>
**/
.info { color: #336699 }

/** Standard background color for error status messages displayed on a white
	page background, to provide better readability. Error messages should
	always be displayed with the warning icon (/common/img/icon_warning.jpg)
	displayed just before the message text. e.g.:
	
	<div class="strong error status"><img
	src="/common/img/icon_warning.jpg">Place your error message text here.</div>
**/
.status {
	font: normal 11px arial, helvetica, sans-serif;
	padding: 0;
	margin: 5px 0 0 0;
	background-color: #FFFF99;
}

/** The next two selectors ensure that an unordered list displayed in a status
	block only has a bottom margin, keeping the list close to the main message
	text.
**/
.status ul { margin: 0 0 0 40px; padding: 0 }

.status li { margin: 0; padding: 0 }

.strong { font-weight: bold; }

/* Error message block */
.messageBlock {
	font: normal 11px arial, helvetica, sans-serif;
	color: #000;
	padding: 5px;
	border: 1px solid black;
	vertical-align:top !important;
}

.messageBlock p {
	float:left;
	margin-left:13px;
}

.messageBlock img {
	border: 0px;
	margin: 3px;
}

.messageBlock ul{
	margin: 0 0 5px 40px;
	padding:0px;
}

.messageBlock li {
	margin:0px;
	padding:0px;
}

.errorBG {
	background-color:#fac0ca;/* old color choices:FFBBBC */
}

.warningBG {
	background-color:#FFFFCC;
}

.alertBG {
	background-color:#FFFFCC;
}

.infoBG {
	background-color:#D3E9FF;
}
/* end of error message block */

.approved {
  color:green;
}

.pending {
  color:#B23290; 
}    

/* --------------------------------------------------
General Style
-------------------------------------------------- */
.text {
	font-family: arial, helvetica, swiss, sans-serif;
	font-size: 9pt;
}

.textsmall {
	font-family: arial, helvetica, swiss, sans-serif;
	font-size: 8pt;
}
.textsmaller {
	font-family: arial, helvetica, swiss, sans-serif;
	font-size: 7pt;
}

.note {
	font: normal 11px arial, helvetica, sans-serif;
	color: red;
}

/* ----------------------------------------------------------------------------
	STANDARD CSS ACTION BUTTON CLASSES
---------------------------------------------------------------------------- */

/** Use this class in a <div> tag to set a button's outer border colors **/
.buttonout {
	margin: 0px;
	padding: 0px;
	border-style: solid;
	border-width: 1px;
	border-color: #eee #333 #333 #eee;
	}

/** Use this class in a <div> tag contained by a <div class="buttonout"> tag.
	This denotes the button's inner border colors.
**/
.buttonin {
	margin: 0px;
	padding: 0px;
	border-style: solid;
	border-width: 1px;
	border-color: #ccc #777 #777 #ccc;
	}

/** This represents a button that is not currently enabled / clickable. Use this
	class in a <div> that is separate from the active version's <div> tag. You
	then use the showHide() JavaScript function to hide one and show the other,
	thereby "activating" and "deactivating" the button.
**/
.buttondisabled {
	display: block;
	padding: 2px 4px;
	margin-top: 1px;
	color: #888;
	background-color: #ccc;
	border: 1px solid #999;
	text-transform: uppercase;
	white-space: nowrap;
	font: bold 11px arial, helvetica, sans-serif;
	vertical-align: middle;
	text-align: center;
	}

/** Apply this class to a link placed inside a <div class="buttonin"> tag. This
	class defines the actual color of the button and its text.
**/
.button:link, .button:active, .button:visited {
	display: block;
	padding: 2px 3px 1px 3px;
	margin: 0;
	color: white;
	background-color: #4874a1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	font: bold 11px arial, helvetica, sans-serif;
	vertical-align: middle;
	text-align: center;
	}

/** This is the color of the button and its text when the mouse is held over the
	button link
**/
.button:hover {
	color: #ffffcc;
	background-color: #5e8bb5;
	}

/** Forces an image tag in a button link to display as a block element, rather
	than inline.
**/
.button img { display: inline; }

/** The next several styles are for buttons that need a narrower vertical
	appearance. They are otherwise identical to the previous button classes.

	original code
.slimbutton:link, .slimbutton:active, .slimbutton:visited {
	display: block;
	padding: 2px 3px 0px 3px;
	margin: 0;
	color: white;
	background-color: #4874a1;
	text-transform: uppercase;
	text-decoration: none;
	font: normal 9px arial, helvetica, sans-serif;
	white-space: nowrap;
	text-align: center;
}

.slimbutton:hover {
	color: #ffffcc;
	background-color: #5e8bb5;
}
	
.slimbutton img { display: block; }
	
.slimbuttondisabled {
	display: block;
	padding: 2px 3px 1px 3px;
	margin: 0;
	color: #999;
	background-color: #ccc;
	border: 1px solid #999;
	text-transform: uppercase;
	white-space: nowrap;
	font: normal 9px arial, helvetica, sans-serif;
	vertical-align: middle;
	text-align: center;
}
**/
.slimbuttontxt:link, .slimbuttontxt:active, .slimbuttontxt:visited {
	display: block;
	padding: 2px 3px 0px 3px;
	margin: 0;
	color: #ffffcc;
	background-color: #4874a1;
	text-transform: uppercase;
	text-decoration: none;
	font: normal 9px arial, helvetica, sans-serif;
	white-space: nowrap;
	text-align: center;
}

.slimbuttontxt:hover {
	color: #ffffcc;
	background-color: #5e8bb5;
}
	
.slimbuttontxt img { display: block; }
	
.slimbuttontxtdisabled {
	display: block;
	padding: 2px 3px 1px 3px;
	margin: 0;
	color: #999;
	background-color: #ccc;
	border: 1px solid #999;
	text-transform: uppercase;
	white-space: nowrap;
	font: normal 9px arial, helvetica, sans-serif;
	vertical-align: middle;
	text-align: center;
}

a.slimbutton:link, a.slimbutton:active, a.slimbutton:visited {
	display: inline;
	margin: 2px; 
	padding: 1px 6px 1px 4px;
	/* width: 80px; */
	background-color: #36648B;
	border-style: solid; 
	border-width: 1px; 
	border-color:#ccc #666 #666 #ccc; 
	font: bold 9px arial, helvetica, sans-serif !important;
	color: #fff;
	vertical-align:middle;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	}

a.slimbutton:hover {
	display: inline;
	margin: 2px; 
	padding: 1px 6px 1px 4px; 
	/* width: 80px; */
	background-color: #B2DFEE/*#eee*/;
	border-style: solid; 
	border-width: 1px; 
	border-color:#666 #ccc #ccc #666; 
	font: bold 9px arial, helvetica, sans-serif !important;
	color: /*#fff*/#000;
	vertical-align:middle;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	}

.slimbutton img {
	display: inline;
	border: none;
	padding: 2px 6px 2px 6px; 
	vertical-align: middle;
	}

.slimbuttondisabled {
	display: inline;
	padding: 1px 6px 1px 4px; 
	/* width: 80px; */
	margin: 0px;
	color: #999;
	background-color: #ccc;
	border: 1px solid #999;
	text-transform: uppercase;
	white-space: nowrap;
	font: normal 9px arial, helvetica, sans-serif;
	vertical-align: middle;
	text-align: center;
}

/* ----------------------------------------------------------------------------
Component Block styles

These are used to create the standard bordered boxes that define sections of a
page and/or form. The code for typical component block looks like this:

	<table>
	<tr>
		<td class="component">
		<h3>Component header</h3>
		<div class="componentbody"> // this is optional
		Code for component here -- can be a nested table, plain text, or
		whatever is needed to fill the component.
		</div>
		</td>
	</tr>
	</table>
---------------------------------------------------------------------------- */

/** Use the "components" class to define a table that will
	contain mulitple components. This table will span the width of the page, with
	each component placed in one of the table's <td> tags.
**/
table.components {
	margin-top: 8px;
	width: 100%;
}

/** Use the "component" class by itself or in conjunction with the "components"
	class to define a single componnet block. This class is typically applied to
	a <td> tag, but may also be applied to other elements, such <div> or <p>.
	
	Note that the height of the element is auto-sized to 100% of the available
	space. So to ensure that this component does not fill the page, the
	containing element should be given a fixed or relative height, set directly
	in the tag or (preferably) via an ID assigned to the element.
**/
.component {
	padding: 2px;
	border: 1px solid #51608e;
	vertical-align: top;
	height: 100%;
}

/** This class identifies the body of a component and fills the space with a
	grey background and sets some padding clearance for the contents. This
	element's height auto-sizes to the full height of its "component" class
	container (less any space taken up by a heading at the top of the
	component).
	
	Use of this class is optional.
**/
.componentbody {
	padding: 4px 5px;
	background-color: #dcdcdc;
	height: 100%;
}

.componentbody table { width: 100% }
.componentbody table td { padding: 2px; white-space: nowrap }

/* --------------------------------------------------
Page Loading / Progress Indicator styles
-------------------------------------------------- */
#progressindicator {
	text-align: center;
	height: 50px;
	position: relative;
	top: 50%;
	margin-top: -25px;
	background-color: white;
}

#loadingtext {
	font: bold 11px arial, helvetica, sans-serif;
	color: #666699;
}

#progressbar {
	font: normal 11px arial, helvetica, sans-serif;
	padding: 2px;
	border: solid #666699 1px;
	width: 125px;
	margin: 5px 0px 0px 0px;
}

/* blocking layer style */
.transparent {
    filter:alpha(opacity=90);
    background-color:#dddddd;
    display:none;
    position:absolute;
    border: 1 gray solid;
	top:65px; 
	left:12px; 
	z-index:5111;
	WIDTH: 97%; 
	PADDING-RIGHT: 0px; 
	PADDING-LEFT: 0px; 
	PADDING-BOTTOM: 0px; 
	PADDING-TOP: 0px;
	MARGIN: 0px 0 0 0; 
}


/****************** data table **********************/

table.data {
	/* width: 100%; */
	border-spacing: 0;
	border-collapse: collapse;
	font: normal 12px arial, helvetica, sans-serif;
	background-color: #fff;
	margin: 2px;
	border: 1px solid #ccc;
	}

table.data th {
	padding: 2px 6px;
	background-color: #e5e5e5;
	border-top: 1px solid #999;
	border-right: 1px solid #ccc;
	text-align: left;
	}

table.data th.center {
	padding: 2px 6px;
	background-color: #e5e5e5;
	border-top: 1px solid #999;
	border-right: 1px solid #ccc;
	text-align: left;
	}

table.data th.alignright {
	padding: 2px 6px;
	background-color: #e5e5e5;
	border-top: 1px solid #999;
	border-right: 1px solid #ccc;
	text-align: left;
	}


table.data thead td {
	padding: 2px 6px;
	background-color: #e5e5e5;
	border-top: 1px solid #999;
	border-right: 1px solid #ccc;
	text-align: left;
	cursor: hand;
	}

table.data thead td.center {
	padding: 2px 6px;
	background-color: #e5e5e5;
	border-top: 1px solid #999;
	border-right: 1px solid #ccc;
	text-align: left;
	cursor: hand;
	}

table.data thead td.alignright {
	padding: 2px 6px;
	background-color: #e5e5e5;
	border-top: 1px solid #999;
	border-right: 1px solid #ccc;
	text-align: left;
	cursor: hand;
	}

table.data td {
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	padding: 2px 8px;
	}

table.data th a, body.portlet table.data th a:unvisited {
	text-decoration: none;
	}

table.data th a:hover {
	text-decoration: underline;
	}


/* login page style */

.loginbox {
	border: 1px;
	border-color: #666699;
	border-style: solid;
	padding: 2px 2px 2px 2px;
	background-color: #e5e5e5;
	width: 500px;
	margin: 2px;
}

.boxheader{
	width:100%;
	margin: 0;
	padding: 0;
	background-color: #666699;
	height: 18px
}

.headertext{
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}

.paddingleftright
{
	padding-left: 10px;
	padding-right: 10px;
}

.txtemphasize
{
    font-weight: bold;
}

.txtemphasize_black
{
    font-weight: bold;
	color: #000000;
}

.loginButton, .loginButton:visited  {
	margin: 2px;
	padding: 1px 6px 1px 4px;
	width: 70px;
	background-color: #36648B !important;
	border-style: solid;
	border-width: 1px;
	border-color:#ccc #666 #666 #ccc;
	font: bold 10px arial, helvetica, sans-serif !important;
	color: #fff;
	text-align: center;
	text-decoration:none;
	text-transform: uppercase;
	white-space: nowrap;
	}