/* Advanced Style Sheet - Contains "default"  styles for use in the appspace area. */
/* To change display properties for your applications, override these styles in your
	"suite.css" or "app.css" file as appropriate. */
/* Style Sheet Last Updated: 05/23/05 */

/* Used to launch help servlet for page-specific help links. */
h3 span#help a {
	display: block;
	float: right;
	font-weight: bold;
	font-size: 10pt;
	margin-top: -20px;
}

/* Forms and Fields */
form {margin: 2px 0;}
body#popup form {margin: 2px 0;}
form label, form label span {clear: left; padding: 0;}
form label span {
	float: left;
	font-weight: bold;
	text-align: right;
	padding-right: 5px;
	margin: 6px 0 0;
}


form input, form select, form textarea {
	float: left;
	text-align: left;
	padding: 0;
	margin: 5px 0 0;
}

form input, form textarea {padding-left: 2px;}



form textarea {overflow: auto;}

form table.Mtable td input, 
form table.Mtable td select, 
form table.Mtable td textarea {float: none; padding: 0; margin: 0;}

form table.Mtable td input,
form table.Mtable td textarea {padding-left: 2px;}
form table.Mtable td textarea {border: none;}

/* Form Decorators */
form .money {text-align: right;}
form span.required {cursor: pointer; cursor: hand;}
form span.required:first-letter {font-style: italic; color: #f00;}

/* Used on paper form-style headers and follows the header text. */
form .Mtable th span.required {font-style: italic; color: #f00; padding-left: 3px;}

form p.instruction {clear: both; font-size: 9pt; margin: 20px 2px 2px;}
form span.format {float: left; font-style: italic; padding: 5px 0 0 2px;}
form span.datafield {line-height: 25px;}
form span.fldinfo {
	float: left;
	width: 16px;
	height: 16px;
	background: transparent url(/FAMS_Trunk/Common/webTierStatic/common/css/ico_info.gif) center no-repeat;
	margin: 6px 0 0 3px;
	cursor: pointer;
	cursor: hand;
}

/* Use this class to visually delineate specific groups of input fields on a form. */
form .section {border: 1px solid #ccc;}

/* Section Headers */
h5.sectionbar { 
	background: #dfe9ff;
	font-weight: bold;
	font-size: 10pt;
	text-align: left;
	color: #000;
	padding: 2px 5px 4px;
	margin-bottom: 5px;
}

/* Navigation (paging) Bars */
div.pagenavbar {clear: left; height: 30px; width: 100%; color: #808080;}
div.pagenavbar label span, div.pagenavbar li {font-size: 9pt;}
div.pagenavbar label span {font-weight: normal; margin-top: 7px;}
div.pagenavbar div.pgsel,
div.pagenavbar div.pgnav {float: left; width: 40%; height: 30px; padding: 1px 0;}
div.pagenavbar div.pgnav {width: 59.5%; text-align: right;}
div.pagenavbar ul {margin-top: 7px;}
div.pagenavbar li {padding: 0 1px 0 5px; border-left: 1px #808080 solid;}
div.pagenavbar li.firstlink {border: none;}
div.pagenavbar li a {line-height: 20px;}
div.pagenavbar select#pager {margin-top: 5px;}
div.pagenavbar div.pgsel a {float: left; margin: 7px 0 0 10px;}

/* On screen messages */
p span.required {
	font-weight: bold;
	font-style: italic;
	font-size: 10pt;
	color: #f00;
	padding: 0 3px 0 1px;
}

/* Error Handling */
div#errormessage {display: block; color: #f00; margin-top: 8px;}
div#errormessage p {float: left; clear: left; width: 100%;}
div#errormessage p img {float: left; margin-right: 5px;}

/* Use this for displaying a list of error messages at the top of the page. */
ul#errlist {
	clear: both;
	list-style-image: url(../images/Bullet_GraySquare.gif);
	font-weight: bold;
	text-align: left;
	padding-top: 10px;
	margin: 0 0 0 40px;
}
ul#errlist li {display: list-item;}

p.message {font-size: 10pt; color: #f00; padding: 0 0 5px; margin: 0;}
p.tabletitle {clear: both; font-weight: bold; padding: 0; margin: 0 2px 2px;}
p.requiredfieldmessage {color: #808080; margin: 10px 0;}

/* Button Bars */
div.buttonbar {
	clear: both;
	text-align: center;
	padding: 30px 0 20px;
	margin: 0 auto;
}
div.mobile_buttonbar {
	clear: both;
	text-align: left;
	padding: 30px 0 20px;
}
div.buttonbar input, div.buttonbar_vert input, input.button {
	float: none;
	width: 110px;
	text-align: center;
	padding: 0;
	margin: 0 8px;
}
div.mobile_buttonbar input, div.buttonbar_vert input, input.button {
	float: none;
	width: 100px;
	text-align: center;
	padding: 0;
	margin: 0 8px;
}

div.buttonbar_vert input {margin: 10px auto;}

div.onebutton {width: 136px;}
div.twobuttons {width: 256px;}
div.threebuttons {width: 376px;}
div.fourbuttons {width: 496px;}
div.fivebuttons {width: 616px;}
div.sixbuttons {width: 736px;}
div.sevenbuttons {width: 840px;}
/* Seven buttons is the largest button bar you can have w/minimum width side menu.
At maximum width side menu, you can only accommodate six buttons. */

/* Approval Bars */
div.approvalbar2, div.approvalbar3, div.approvalbar4, div.approvalbar5 {
	float: left;
	height: 25px;
	width: 98.5%;
	background: #eaeaea;
	padding: 0 5px;
	border: 1px #ccc solid;
	margin: 30px auto 0;
}
div.approvalfield {float: left;}
div.approvalfield label span {float: none; font-weight: bold;}
div.approvalfield span.datafield {float: none; line-height: 25px;}
html>body div.approvalfield span.datafield {line-height: 27px;}
div.approvalfield select {margin-top: 3px;}
div.approvalfield span.ddlabel  {line-height: 14px; padding-bottom: 5px;}

div.approvalbar2 .approvalfield {width: 50%;}
div.approvalbar3 .approvalfield {width: 33%;}
div.approvalbar4 .approvalfield {width: 25%;}
div.approvalbar5 .approvalfield {width: 20%;}

div.approvalbar2 div.selectfield label span, 
div.approvalbar3 div.selectfield label span, 
div.approvalbar4 div.selectfield label span, 
div.approvalbar5 div.selectfield label span {float: left; margin-top: 6px;}
div.approvalbar5 div.selectfield {margin: 0 20px 0 -20px;}

div.approvalbar4 div.userfield, 
div.approvalbar5 div.userfield,
div.approvalbar3 div.statusfield,
div.approvalbar4 div.statusfield, 
div.approvalbar5 div.statusfield {text-align: center;}

div.approvalbar2 div.datefield, 
div.approvalbar3 div.datefield, 
div.approvalbar4 div.datefield, 
div.approvalbar5 div.datefield {text-align: right;}

/* Use for tabular data display. */
table.Mtable {clear: both; width: 100%; margin: 0;}
table.Mtable, table.Mtable th, table.Mtable td {
	white-space: nowrap;
	padding: 3px;
	border: 1px solid #ccc;
	border-collapse: collapse;
	border-spacing: 1px; /* N6 fix */
}
table.Mtable thead, table.Mtable th {background: #dfe9ff; color: #000;}
table.Mtable tfoot {font-weight: bold;}
table.Mtable th {vertical-align: bottom; white-space: normal;}
table.Mtable td img {height: 16px; width: 16px; margin: 0 auto;}

* html table.Mtable td {padding-bottom: 0;} /* IE6 only */
table.Mtable {empty-cells: show;} /* CSS2 - Not currently supported on IE. */

/* Use either <colgroup>s or specific <col>s to specify alignment 
for entire table column, rather than specifying it for each 
individual th or td tag. */
table.Mtable colgroup.right, table.Mtable col.right {text-align: right;}
table.Mtable colgroup.center, table.Mtable col.center {text-align: center;}

/* Since the above approach is not cross-browser compatible, use the following
classes on each <td> requiring either center or right justification. */
table.Mtable td.right, table.Mtable td.money {text-align: right;}
table.Mtable td.center {text-align: center;}

/* Makes a specific column wrappable. Mtable column data does not wrap by default. */
table.Mtable td.wrap {white-space: normal;}

/* Sorting-related Styles */
table.Mtable th.sortable {cursor: pointer; text-decoration: underline;}
table.Mtable th span.indicator {font-family: Webdings; line-height: 12px;}

/* Use this for paragraphs of structured text within a table instead of <br /> tags. */
table.Mtable td p {padding: 0; margin: 0;}

/* Removes the border around form set */
fieldset {
        border:0;
}

.fieldSetWrapper {
        position:relative;
        padding-top:1.3em;
}

legend span {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        text-align:center;
        color : #000;
        font:bold 1em/1.3em arial,helvetica,sans-serif;
}