/*
 * Name: Content-UI
 * Author: Ben Babics
 * Date: 02/23/2010
 * Updated: 04/26/2010
 * Description: Style content within the Distributor application div.content_wrapper
*/


/***************************************************************************
 ***** Page Wrapper ********************************************************
***************************************************************************/
/**
 ** Name: Form Wrapper
 ** Description: Provides layout and styling of elements within a form.
   				 This class MUST be a child of the <form> element.
**/
.form-wrapper {
	padding: 0px 20px 80px;
	background: url(form-wrapper_bg.gif) repeat-x center bottom;
}
.ui-dialog-content .form-wrapper {
	padding: 0px;
	background: none;
}

	/*
	 * Name: Elements - Form Wrapper
	 		 Elements - Article Wrapper
	*/
	.form-wrapper h1,
	.article-wrapper h1 {
		margin: 30px 0px 15px;
		font-size: 1.5em;
		font-weight: normal;
		line-height: normal;
		border-bottom: 1px solid #a8a8a8;
	}
		* html .form-wrapper h1,
		* html .article-wrapper h1 { /* legacy browsers */
			zoom: 1; /* this rule will become depricated */
		}
	.form-wrapper h2,
	.article-wrapper h2,
	.form-wrapper fieldset legend {
		margin: 0px 0px 10px;
		font-size: 1.3em;
		font-weight: normal;
	}
	.form-wrapper p,
	.article-wrapper p {
		margin: 15px 0px;
		line-height: 1.2em;
		color: #666;
	}
	form-wrapper a,
	.article-wrapper a {
		outline: 0;
	}
	.form-wrapper span.required {
		color: #ff0000;
		font-weight: bold;
		font-size: 12px;
		vertical-align: middle;
	}
	.form-wrapper fieldset {
		margin: 15px 0px 0px;
		padding: 0px 0px 0px 10px;
		border: none;
		background: url(ui-dotted-line_bg.gif) repeat-x center bottom;
	}
	.content_main .form-wrapper fieldset:last-child {
		border-bottom: none;
		background: none;
	}
	.form-wrapper fieldset legend {
		margin-left: -10px;
		_margin-left: -15px; /* this rule will become depricated */
		padding: 0px;
		color: #444;
	}
	.form-wrapper div.section,
	.article-wrapper div.section {
		margin: 18px 0px;
	}	
	
	/*
	 * Name: Styling - Form Wrapper
	 		 Styling - Article Wrapper
	*/
	.form-wrapper .text-nowrap,
	.article-wrapper .text-nowrap {
		white-space: nowrap;
	}
	.form-wrapper .text-center,
	.article-wrapper .text-center {
		text-align: center;
	}
	.form-wrapper .text-bold,
	.article-wrapper .text-bold {
		font-weight: bold;
	}
	.form-wrapper .text-italic,
	.article-wrapper .text-italic {
		font-style: italic;
	}
	.form-wrapper .text-dark,
	.article-wrapper .text-dark {
		color: #444;
	}
	.form-wrapper .text-light,
	.article-wrapper .text-light {
		color: #888;
	}
	
	
	
	
/***************************************************************************
 ***** UI Components *******************************************************
***************************************************************************/
/**
 ** Name: UI Table Form
 ** Syntax: table.ui-table-form
 ** Required: MUST be attached to a <table> element
**/
.form-wrapper table.ui-table-form td {
	padding: 0px 30px 20px 0px;
	vertical-align: top;
}

	/*
	 * Name: Elements - UI Table Form
	*/
	.form-wrapper table.ui-table-form label {
		display: block;
		margin-bottom: 2px;
		font-size: .9em;
		color: #555;
	}
	.form-wrapper table.ui-table-form input.btn {
		padding: 0px 10px;
	}
	.form-wrapper table.ui-table-form input.text,
	.form-wrapper table.ui-table-form textarea,
	.form-wrapper table.ui-table-form select {
		margin-right: 10px;
		width: 97%;
	}
	* html .form-wrapper table.ui-table-form select { /* legacy browsers */
		/* width: auto; */ /* this rule will become depricated */	
	}
	
	/*
	 * Name: Elements - UI Table Form [Cells]
	*/
	.form-wrapper table.ui-table-form td:last-child {
		padding-right: 0px;
	}
	.form-wrapper table.ui-table-form td.last-child { /* legacy browsers */
		padding-right: 0px; /* this rule will become depricated */
	}
	
	/*
	 * Name: Elements - UI Table Form [Radio Group]
	*/
	.form-wrapper table.ui-table-form h2 + div.radio-group {
		margin-left: 10px;
	}
	.form-wrapper table.ui-table-form div.radio-group.legacy-add-margin-left { /* legacy browsers */
		margin-left: 10px; /* this rule will become depricated */
	}
	.form-wrapper table.ui-table-form div.radio-group label {
		display: inline;
		margin: 0px 30px 0px 10px;
	}
	.form-wrapper table.ui-table-form div.radio-group select {
		width: auto;
	}	
	
	/*
	 * Name: Elements - UI Table Form [Paragraph]
	*/
	.form-wrapper table.ui-table-form + p {
		margin-top: 0px;
	}
	.form-wrapper table.ui-table-form p.legacy-remove-margin-top { /* legacy browsers */
		margin-top: 0px; /* this rule will become depricated */
	}
	.form-wrapper table.ui-table-form p:last-child {
		margin-bottom: 0px;
	}
	.form-wrapper table.ui-table-form p.legacy-remove-margin-bottom { /* legacy browsers */
		margin-bottom: 0px; /* this rule will become depricated */
	}
	
	/*
	 * Name: Styles - UI Table Form [input]
	*/
	.form-wrapper table.ui-table-form input.text.disabled {
		color: #aaa;
		background-color: #eee;
	}
	
/**
 ** Name: UI Table Results
 		  UI Table ReadOnly
 ** Syntax: table.ui-table-results, table.ui-table-readonly
 ** Required: MUST be attached to a <table> element
**/
.form-wrapper table.ui-table-results,
.form-wrapper table.ui-table-readonly,
.form-wrapper table.ui-table-readonly table,
.article-wrapper table.ui-table-results,
.article-wrapper table.ui-table-readonly,
.article-wrapper table.ui-table-readonly table {
	width: 100%;
	_width: 99.5%; /* this rule may become depricated */
	line-height: 25px;
	font-size: .95em;
	border-collapse: collapse;
	background-color: #fff;
}
.form-wrapper table.ui-table-results thead th,
.form-wrapper table.ui-table-readonly thead th,
.form-wrapper table.ui-table-results tbody td,
.form-wrapper table.ui-table-readonly tbody td,
.article-wrapper table.ui-table-results thead th,
.article-wrapper table.ui-table-readonly thead th,
.article-wrapper table.ui-table-results tbody td,
.article-wrapper table.ui-table-readonly tbody td {
	padding: 0px 10px;
}
.form-wrapper table.ui-table-results thead th,
.form-wrapper table.ui-table-readonly thead th,
.article-wrapper table.ui-table-results thead th,
.article-wrapper table.ui-table-readonly thead th {
	border-right: 1px solid #fff;
	border-bottom: 1px solid #a2a2a2;
	background-color: #d5d5d5;
}
.form-wrapper table.ui-table-results thead th:last-child,
.form-wrapper table.ui-table-readonly thead th:last-child,
.article-wrapper table.ui-table-results thead th:last-child,
.article-wrapper table.ui-table-readonly thead th:last-child {
	border-right: none;
}
.form-wrapper table.ui-table-results tbody td,
.form-wrapper table.ui-table-readonly tbody td,
.article-wrapper table.ui-table-results tbody td,
.article-wrapper table.ui-table-readonly tbody td {
	color: #777;
}

	/*
	 * Name: Styling - UI Table Results
	 		 Styling - UI Table ReadOnly
	*/
	.form-wrapper table.ui-table-results.layout-fixed,
	.form-wrapper table.ui-table-readonly.layout-fixed,
	.article-wrapper table.ui-table-results.layout-fixed,
	.article-wrapper table.ui-table-readonly.layout-fixed {
		table-layout: fixed;
	}
	.form-wrapper table.ui-table-results.width-small,
	.form-wrapper table.ui-table-readonly.width-small,
	.article-wrapper table.ui-table-results.width-small,
	.article-wrapper table.ui-table-readonly.width-small {
		width: 35%;
	}
	.form-wrapper table.ui-table-results.width-medium,
	.form-wrapper table.ui-table-readonly.width-medium,
	.article-wrapper table.ui-table-results.width-medium,
	.article-wrapper table.ui-table-readonly.width-medium {
		width: 65%;
	}	

/**
 ** Name: UI Table Results
 ** Syntax: table.ui-table-results
**/
.form-wrapper table.ui-table-results tbody tr td,
.article-wrapper table.ui-table-results tbody tr td {
	vertical-align: top;
}
.form-wrapper table.ui-table-results tbody tr.even td,
.article-wrapper table.ui-table-results tbody tr.even td {
	background: #f8f8f8;
}

.form-wrapper table.ui-table-results tbody tr:nth-child(even),
.article-wrapper table.ui-table-results tbody tr:nth-child(even) {
	background-color: #f8f8f8;
}

	/*
	 * Name: Styling - UI Table Results
	*/
	.form-wrapper table.ui-table-results tbody tr td.align-middle,
	.article-wrapper table.ui-table-results tbody tr td.align-middle {
		vertical-align: middle;
	}

/**
 ** Name: UI Table ReadOnly
 ** Syntax: table.ui-table-readonly
**/
.form-wrapper table.ui-table-readonly table,
.article-wrapper table.ui-table-readonly table {
	position: relative;
	right: -10px;
	margin-top: 10px;
	width: 100%;
}
.form-wrapper table.ui-table-readonly table.ui-table-readonly,
.article-wrapper table.ui-table-readonly table.ui-table-readonly {
	right: 0px;
	margin: 0px 0px 10px;
}
.form-wrapper table.ui-table-readonly tbody tr td,
.article-wrapper table.ui-table-readonly tbody tr td {
	vertical-align: center;
}

	/*
	 * Name: Elements - UI Table ReadOnly
	*/
	.form-wrapper table.ui-table-readonly thead th,
	.article-wrapper table.ui-table-readonly thead th,
	.form-wrapper table.ui-table-readonly table.ui-table-readonly thead th,
	.article-wrapper table.ui-table-readonly table.ui-table-readonly thead th {
		color: #444;
		border-bottom: 1px solid #a2a2a2;
		background-color: #d5d5d5;
	}
	.form-wrapper table.ui-table-readonly table thead th,
	.article-wrapper table.ui-table-readonly table thead th,
	.form-wrapper table.ui-table-readonly table.ui-table-readonly table thead th,
	.article-wrapper table.ui-table-readonly table.ui-table-readonly table thead th {
		background-color: #eee;
		border-bottom-color: #d5d5d5;
	}
	
	/*
	 * Name: Styling - UI Table ReadOnly
	*/
	.form-wrapper table.ui-table-readonly.ui-table-wrapper,
	.article-wrapper table.ui-table-readonly.ui-table-wrapper {
		border: 1px solid #aaa;
	}
	.form-wrapper table.ui-table-readonly table.layout-fixed,
	.article-wrapper table.ui-table-readonly table.layout-fixed {
		table-layout: fixed;
	}
	
	
/**
 ** Name: UI Accordion
 ** Syntax: div.ui-accordion h3 span.ui-accordion-title, div.ui-accordion div.ui-accordion-wrapper
 ** Required: Must be wrapped by element that is assigned the .ui-accordion class name
 ** Description: This encapsulates styling for content found within an accordion
**/
.ui-accordion h3 span.ui-accordion-title,
.ui-accordion h3 span.ui-accordion-title {
	display: inline-block;
	margin-left: 25px;
	line-height: 2em;
	font-size: .85em;
	font-weight: bold;
}
.ui-accordion div.ui-accordion-wrapper.ui-accordion-content,
.ui-accordion div.ui-accordion-wrapper.ui-accordion-content {
	zoom: 1;
	padding: 10px;
	background-color: #f2f5f7;
}
	
	
/**
 ** Name: UI Decision
 ** Syntax: .form-wrapper table.ui-table-form tbody.ui-decision-wrapper, td.ui-decision-[?]
 ** Required: .ui-decision-wrapper class name attached to <tbody>
 ** Description: This encapsulates styling for elements to display as a decision component
**/
.form-wrapper tbody.ui-decision-wrapper td {
	padding-right: 0px;
	background-position: center center;
	background-repeat: no-repeat;	
}

	/*
	 * Name: Styling - UI Decision
	*/
	.form-wrapper tbody.ui-decision-wrapper td.ui-decision-or {
		padding: 0px 35px;
		background-image: url(ui-decision-or.gif);
	}
	* html .form-wrapper tbody.ui-decision-wrapper td.ui-decision-or { /* legacy browsers */
		padding: 0px 20px; /* this rule will become depricated */
	}


/**
 ** Name: UI Listbox
 ** Syntax: .form-wrapper table.ui-table-form.ui-listbox, td.controls-listbox, td.controls-listbox div.radio-group, td.controls-listbox div.listbox-buttons
 ** Required: Table element with EXACTLY three <td>
 ** Description: This encapsulates styling for elements to display as listbox component
**/
.form-wrapper table.ui-table-form.ui-listbox {
	margin: 0px 0px 20px 0px;
	width: 100%;
}
.form-wrapper table.ui-table-form.ui-listbox td {
	padding: 0px;
	width: 30%;
	vertical-align: top;
}

	/*
	 * Name: Elements - UI Listbox
	*/
	.form-wrapper table.ui-table-form.ui-listbox h2 {
		margin: 0px 0px 5px;
	}
	.form-wrapper table.ui-table-form.ui-listbox input.btn,
	.form-wrapper table.ui-table-form.ui-listbox select.listbox {
		padding: 0px;
		width: 100%;
	}
	* html .form-wrapper table.ui-table-form.ui-listbox input.btn,
	* html .form-wrapper table.ui-table-form.ui-listbox select.listbox { /* legacy browser */
		border: 1px solid #444; /* this rule will become depricated */
	}
	* html .form-wrapper table.ui-table-form.ui-listbox input.btn { /* legacy browser */
		background-color: #eee; /* this rule will become depricated */
		cursor: pointer; /* this rule will become depricated */
	}
	.form-wrapper table.ui-table-form.ui-listbox select.listbox {
		height: 250px;
	}


/**
 ** Name: UI Workflow
 ** Syntax: div#ui-workflow
 ** Required: div#ui-workflow, ol#ui-workflow-nav, div#ui-workflow-view, div#ui-workflow-view
**/
#ui-workflow {
    display: block;
    border-top: 1px solid #ffe0b2;
    border-bottom: 25px solid #ffffdb;
    background: url(ui-workflow_bg.gif) repeat-x 0px 0px;
}
	* html #ui-workflow {
		height: 1px;
	}
#ui-workflow:after {
    display: block;
    clear: both;
    content: "";
}

/**
 ** UI Workflow [View]
**/
#ui-workflow #ui-workflow-view {
	margin: -10px 0px 25px 220px; /* negative top-margin reduces top-margin from .form-wrapper *:first-child */
}

	/**
	 ** Name: Styling - Alerts Component
	**/
	#ui-workflow #ui-workflow-view div#alerts,
	#ui-workflow #ui-workflow-view div.ui-alerts-wrapper {
		margin: 10px 0px 0px;
		padding: 25px 0px 0px;
		background: none;
	}
	#ui-workflow #ui-workflow-view div#alerts div.alert_outer {
		margin-bottom: 10px;
	}

/**
 ** Name: UI Workflow [Navigation]
 ** Syntax: div#ui-workflow ol#ui-workflow-nav
**/
#ui-workflow ol#ui-workflow-nav {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 200px;;
}
#ui-workflow ol#ui-workflow-nav li {
	background: url(ui-dotted-line_bg.gif) repeat-x center bottom;
}

	/*
	 * Name: Elements - UI Workflow [Navigation]
	*/
	#ui-workflow ol#ui-workflow-nav li a {
		display: block;
		padding: 20px 10px 20px 20px;
		background-repeat: no-repeat;
	}
	#ui-workflow ol#ui-workflow-nav li strong,
	#ui-workflow ol#ui-workflow-nav li small {
		display: block;
		cursor: default;
		line-height: 1.2em;
	}
	#ui-workflow ol#ui-workflow-nav li strong {
		color: #444;
		font-size: 1.2em;
	}
	#ui-workflow ol#ui-workflow-nav li small {
		color: #888;
		font-size: 1em;
	}
	#ui-workflow ol#ui-workflow-nav li a:hover strong,
	#ui-workflow ol#ui-workflow-nav li a:hover small {
		cursor: pointer;
		text-decoration: underline;
	}
	
	/*
	 * Name: Styling - UI Workflow [Navigation]
	*/
	#ui-workflow ol#ui-workflow-nav li.complete a {
		padding-left: 45px;
		background-image: url(ui-workflow-nav-step-complete.gif);
		background-position: 20px 23px;
	}
	#ui-workflow ol#ui-workflow-nav li a.cursor-default:hover,
	#ui-workflow ol#ui-workflow-nav li a.cursor-default:hover strong,
	#ui-workflow ol#ui-workflow-nav li a.cursor-default:hover small {
		cursor: default;
		text-decoration: none;
	}

	/*
	 * Name: Branding - UI Workflow [Navigation]
	 * Description: These rules should be defined in brand.css
	*/
	#ui-workflow ol#ui-workflow-nav li.active {
		background-color: #000;
	}
	#ui-workflow ol#ui-workflow-nav li.active strong {
		color: #ff0000;
	}
	#ui-workflow ol#ui-workflow-nav li.active small {
		color: #ff0000;
	}
	
	
/**
 ** Name: UI Alert Wrapper
 ** Syntax: div.ui-alerts-wrapper > div.ui-alert-outer > div. ui-alert-inner
**/
.form-wrapper div.ui-alerts-wrapper {
	padding: 20px;
	background: url(ui-alerts-wrapper_bg.gif) repeat-x 0px 0px;
}
.form-wrapper div.ui-alerts-wrapper div.ui-alert-outer {
	zoom: 1; /* this rule will become depricated */ /* legacy browsers */
	margin-bottom: 10px;
    height: auto;
    background-color: #f3f3f3;
}
	
.form-wrapper div.ui-alerts-wrapper div.ui-alert-outer div.ui-alert-inner {
    position: relative;
    right: 4px;
    bottom: 4px;
    padding: 0px 25px 0px;
    border: 1px solid #eee;
    background-color: #fff;
    background-repeat: no-repeat;
}
.form-wrapper div.ui-alerts-wrapper div.ui-alert-outer div.ui-alert-inner p {
    margin: 15px 0px;
}
.form-wrapper div.ui-alerts-wrapper div.ui-alert-outer div.ui-alert-inner p strong {
	display: inline-block;
	margin-right: 5px;
	padding-left: 30px;
	line-height: 15px;
	background-position: left center;
	background-repeat: no-repeat;
}
	
	/*
	 * Name: Styling - UI Alert Inner
	*/
	.form-wrapper div.ui-alerts-wrapper div.ui-alert-outer div.ui-alert-inner.note p strong {
		padding-left: 35px;
		color: #f2a612; /* dark yellow */
	    line-height: 20px;
	    background-image: url(ui-alert_note.gif);
	}
	.form-wrapper div.ui-alerts-wrapper div.ui-alert-inner.focus p strong {
		color: #6aaccb; /* light blue */
		line-height: 27px;
	    background-image: url(ui-alert_focus.gif);
	}
	.form-wrapper div.ui-alerts-wrapper div.ui-alert-inner.success p strong {
		color: #529230; /* dark green */
	    background-image: url(ui-alert_success.gif);
	}
	.form-wrapper div.ui-alerts-wrapper div.ui-alert-inner.validation p strong {
		color: #D71919; /* dark red */
	    background-image: url(ui-alert_validation.gif);
	}
	
	
/**
 ** Name: UI - Icons
 ** Syntax: a.ui-icon-[id]
 ** Description: Graphical icon that indicates functionality; usually to handle jQuery plug-ins
**/
.form-wrapper a.ui-icon-view,
.article-wrapper a.ui-icon-view {
	display: inline-block;
	padding-left: 21px;
	line-height: 21px;
	background: url(controls-icon-magnifyingGlass.gif) 0px 0px no-repeat;
}
.form-wrapper div.ui-icon-calendar,
.article-wrapper div.ui-icon-calendar {
	position: relative;
	zoom: 1;
	white-space: nowrap;
	padding-right: 30px;
}

	/*
	 * Name: Elements - UI Icon Calendar
	*/
	.form-wrapper div.ui-icon-calendar img.ui-datepicker-trigger,
	.article-wrapper div.ui-icon-calendar img.ui-datepicker-trigger {
		position: absolute;
		bottom: 0px;
		right: -5px;
		cursor: pointer;
	}


/***************************************************************************
 ***** Controls ************************************************************
***************************************************************************/
/**
 ** Name: Controls - Form Wrapper
 ** Syntax: div.form-wrapper + div.controls-form-wrapper
**/
.controls-form-wrapper {
	margin-top: 20px;
	text-align: right;
}
.ui-dialog-content div.controls-form-wrapper {
	padding-bottom: 10px;
}

	/*
	 * Name: Elements - Controls Form Wrapper
	*/
	.controls-form-wrapper input.btn {
		padding: 0px 10px;
	}
	.controls-form-wrapper input.btn,
	.controls-form-wrapper input.btn.primary {
		margin-left: 10px;
	}
	.controls-form-wrapper input.btn.secondary {
		float: left;
		margin: 0px 10px 0px 0px;
	}


/**
 ** Name: Controls - Section
 ** Syntax: div.controls-section + div.section
 ** Required: div.controls-section must have an accompanying div.section as a NEXT sibling
**/
.form-wrapper div.controls-section,
.article-wrapper div.controls-section {
	margin: 18px 0px;
}


/**
 ** Name: Controls - Table Results
 ** Syntax: div.controls-scrollbar-300/500/700 > table.ui-table-results
 ** Required: div.controls-scrollbar-300/500/700 MUST parent table.ui-table-results
**/
.form-wrapper .controls-scrollbar,
.article-wrapper .controls-scrollbar {
	overflow-x: hidden;
	overflow-y: auto;
	width: 97%;
	border: 1px solid #aaa;
}

	/*
	 * Name: Styles - Controls Table Results
	*/
	.form-wrapper .controls-scrollbar.height-small,
	.article-wrapper .controls-scrollbar.height-small { 
		max-height: 300px;
		_height: 300px; /* this rule will become depricated */
	}
	.form-wrapper .controls-scrollbar.height-medium,
	.article-wrapper .controls-scrollbar.height-medium {
		max-height: 500px;
		_height: 500px; /* this rule will become depricated */
	}
	.form-wrapper .controls-scrollbar.height-large,
	.article-wrapper .controls-scrollbar.height-large {
		max-height: 700px;
		_height: 700px; /* this rule will become depricated */
	}


/**
 ** Name: Controls - Table Readonly
 ** Syntax: div.controls-table-readonly + table.ui-table-readonly
**/
.form-wrapper div.controls-table-readonly,
.article-wrapper div.controls-table-readonly {
	clear: right;
	height: 23px;
}

	/*
	 * Name: Styling - Controls Table Readonly
	*/
	.form-wrapper div.controls-table-readonly div.controls-crud-wrapper,
	.article-wrapper div.controls-table-readonly div.controls-crud-wrapper {
		margin-bottom: 3px;
	}


/**
 ** Name: Controls - Listbox
 ** Syntax: table.ui-table-form.ui-listbox > td.controls-listbox
**/
.form-wrapper table.ui-table-form.ui-listbox td.controls-listbox {
	width: 40%;
	vertical-align: middle;
}
.form-wrapper table.ui-table-form.ui-listbox td.controls-listbox {
	padding: 0px 20px;
}
.form-wrapper table.ui-table-form.ui-listbox td.controls-listbox div.radio-group {
	margin-left: 0px;
}
.form-wrapper table.ui-table-form.ui-listbox td.controls-listbox .listbox-buttons {
	margin-top: 30px;
}

	/*
	 * Elements - Controls Listbox
	*/
	.form-wrapper table.ui-table-form.ui-listbox .controls-listbox fieldset {
		margin: 0px;
		padding: 10px 0px 15px;
		text-align: center;
		border: 1px solid #666;
		background-image: none; /* this rule will become depricated */
	}
	.form-wrapper table.ui-table-form.ui-listbox .controls-listbox fieldset legend {
		margin: 1px 0px 0px 5px;
		font-weight: bold;
		font-size: 1em;
		color: #444;
	}
	.form-wrapper table.ui-table-form.ui-listbox .controls-listbox div.radio-group label {
		margin-right: 5px;
	}
	.form-wrapper table.ui-table-form.ui-listbox .controls-listbox div.radio-group input {
		width: auto;
	}
	.form-wrapper table.ui-table-form.ui-listbox .controls-listbox .listbox-buttons input {
		margin-bottom: 10px;
	}
	
	
/**
 ** Name: Controls - CRUD
**/
.form-wrapper div.controls-crud-wrapper,
.article-wrapper div.controls-crud-wrapper {
	float: right;
}
.form-wrapper div.controls-crud-wrapper a,
.article-wrapper div.controls-crud-wrapper a {
	display: block;
	float: left;
	margin-left: 3px;
	width: 24px;
	height: 22px;
	outline: 0;
	text-indent: -99999px;
	background-image: url(controls-crud_matrix.gif);
	background-repeat: no-repeat;
}
	
	/*
	 * Name: Styling - Controls CRUD
	*/
	.form-wrapper div.controls-crud-wrapper a.controls-crud-create,
	.article-wrapper div.controls-crud-wrapper a.controls-crud-create {
		background-position: 0px 0px;
	}
	.form-wrapper div.controls-crud-wrapper a.controls-crud-create:hover,
	.article-wrapper div.controls-crud-wrapper a.controls-crud-create:hover {
		background-position: -24px 0px;
	}
	.form-wrapper div.controls-crud-wrapper a.controls-crud-read,
	.article-wrapper div.controls-crud-wrapper a.controls-crud-read {
		background-position: 0px -22px;
	}
	.form-wrapper div.controls-crud-wrapper a.controls-crud-read:hover,
	.article-wrapper div.controls-crud-wrapper a.controls-crud-read:hover {
		background-position: -24px -22px;
	}
	.form-wrapper div.controls-crud-wrapper a.controls-crud-update,
	.article-wrapper div.controls-crud-wrapper a.controls-crud-update {
		background-position: 0px -44px;
	}
	.form-wrapper div.controls-crud-wrapper a.controls-crud-update:hover,
	.article-wrapper div.controls-crud-wrapper a.controls-crud-update:hover {
		background-position: -24px -44px;
	}
	.form-wrapper div.controls-crud-wrapper a.controls-crud-delete,
	.article-wrapper div.controls-crud-wrapper a.controls-crud-delete {
		background-position: 0px -66px;
	}
	.form-wrapper div.controls-crud-wrapper a.controls-crud-delete:hover,
	.article-wrapper div.controls-crud-wrapper a.controls-crud-delete:hover {
		background-position: -24px -66px;
	}
	
	
/**
 ** Name: Controls - Action Button
 ** Syntax: a.controls-action-btn
 ** Required: an ID attribute is required to for functionality and styling to be applied.
 			  otherwise, hyperlink will appear without styling.
 ** Description: Graphical action button that has indicates functionality; usually to display a modal when clicked
**/
.form-wrapper a.controls-action-btn,
.article-wrapper a.controls-action-btn,
#controls-workflow-nav a.controls-action-btn {
	display: block;
	height: 34px;
	outline: 0;
	text-indent: -99999px;
	background-position: 0px 0px;
	background-repeat: no-repeat;
}
.form-wrapper a.controls-action-btn:hover,
.article-wrapper a.controls-action-btn:hover,
#controls-workflow-nav a.controls-action-btn:hover {
	background-position: 0px -34px;
}

	/*
	 * Name: Styling - Controls Action Button [Classnames]
	*/
	.form-wrapper a.controls-action-btn.align-right,
	.article-wrapper a.controls-action-btn.align-right,
	#controls-workflow-nav a.controls-action-btn.align-right {
		float: right;
	}
	
	/*
	 * Name: Styling - Controls Action Button [Unique Button ID]
	 * Syntax: a.controls-action-btn#[unique id]
	 * Required: an ID is required for each control action button
	 			 although, the thought is these buttons will be unique for each page
	 			 if this changes, we can make these classnames instead
	 			 however, in that case the classnames, formely ID's, should prepend "ui-"
	 			 and this section should be covered in the UI definition.
	*/
	.form-wrapper a.controls-action-btn#addAccount,
	.article-wrapper a.controls-action-btn#addAccount {
		width: 142px;
		background-image: url(controls-action-btn_addAccount.gif);
	}	
	.form-wrapper a.controls-action-btn#addProduct,
	.article-wrapper a.controls-action-btn#addProduct {
		width: 120px;
		background-image: url(controls-action-btn_addProduct.gif);
	}
	.form-wrapper a.controls-action-btn#addNewSiteGroup,
	.article-wrapper a.controls-action-btn#addNewSiteGroup {
		width: 167px;
		background-image: url(controls-action-btn_addNewSiteGroup.gif);
	}
	.form-wrapper a.controls-action-btn#addOPISGroup,
	.article-wrapper a.controls-action-btn#addOPISGroup {
		width: 141px;
		background-image: url(controls-action-btn_addOPISGroup.gif);
	}
	.form-wrapper a.controls-action-btn#renewTerms,
	.article-wrapper a.controls-action-btn#renewTerms {
		width: 126px;
		background-image: url(controls-action-btn_renewTerms.gif);
	}
	.form-wrapper a.controls-action-btn#viewPricingHistory,
	.article-wrapper a.controls-action-btn#viewPricingHistory {
		width: 167px;
		background-image: url(controls-action-btn_viewPricingHistory.gif);
	}
	
	/*
	 * Name: Styling - Controls Workflow Action Button [Unique Button ID]
	 * Syntax: a.controls-action-btn#[unique id]
	*/
	#controls-workflow-nav  a.controls-action-btn {
		width: 200px;
	}
	#controls-workflow-nav  a.controls-action-btn#printAgreement {
		background-image: url(controls-action-btn_printAgreement.gif);
	}
	#controls-workflow-nav  a.controls-action-btn#addCostPlusAgreement {
		background-image: url(controls-action-btn_addCostPlusAgreement.gif);
	}
	#controls-workflow-nav  a.controls-action-btn#manageAgreements {
		background-image: url(controls-action-btn_manageAgreements.gif);
	}


/**
 ** Name: Controls - Collapsible Buttons
**/
.form-wrapper a.controls-collapsible,
.article-wrapper a.controls-collapsible {
	background-repeat: no-repeat;
}
.form-wrapper div.controls-collapsible-wrapper,
.article-wrapper div.controls-collapsible-wrapper {
	overflow: hidden;
}
.form-wrapper table.ui-table-readonly.ui-table-wrapper table.ui-table-readonly div.controls-collapsible-wrapper,
.form-wrapper table.ui-table-readonly.ui-table-wrapper table.ui-table-readonly div.controls-collapsible-wrapper {
	margin-right: -10px;
}

	/*
	 * Name: Controls - collapsible Section 
	 * Syntax: div.controls-section + div.section
	*/
	.form-wrapper div.controls-section a.controls-collapsible,
	.article-wrapper div.controls-section a.controls-collapsible {
		padding-left: 26px;
		line-height: 14px;
		background-image: url(controls-section-collapsible_matrix.gif);
	}
	.form-wrapper div.controls-section a.controls-collapsible,
	.form-wrapper div.controls-section a.controls-collapsible.collapsed,
	.article-wrapper div.controls-section a.controls-collapsible,
	.article-wrapper div.controls-section a.controls-collapsible.collapsed {
		background-position: 0px 0px;
	}
	.form-wrapper div.controls-section a.controls-collapsible.expanded,
	.article-wrapper div.controls-section a.controls-collapsible.expanded {
		background-position: 0px -26px;
	}
		
	/*
	 * Name: Controls - collapsible Table Readonly
	 * Syntax: div.controls-table-readonly + table.ui-table-readonly
	*/
	.form-wrapper div.controls-table-readonly a.controls-collapsible,
	.article-wrapper div.controls-table-readonly a.controls-collapsible {
		display: inline-block;
		float: left;
		margin-left: 10px;
		padding-left: 15px;
		line-height: 23px;
		font-size: .8em;
		background-image: url(controls-table-readonly-collapsible_matrix.gif);
	}
	.form-wrapper div.controls-table-readonly a.controls-collapsible,
	.form-wrapper div.controls-table-readonly a.controls-collapsible.collapsed,
	.article-wrapper div.controls-table-readonly a.controls-collapsible,
	.article-wrapper div.controls-table-readonly a.controls-collapsible.collapsed {
		background-position: 0px 0px;
	}
	.form-wrapper div.controls-table-readonly a.controls-collapsible.expanded,
	.article-wrapper div.controls-table-readonly a.controls-collapsible.expanded {
		background-position: 0px -23px;
	}
	
	
/**
 ** Name: Controls Workflow [Navigation]
 ** Syntax: div#ui-workflow ul#controls-workflow-nav
**/
#ui-workflow ul#controls-workflow-nav {
	clear: left;
	float: left;
	margin: 20px 0px 0px;
	padding: 0px;
	width: 200px;;
}
#ui-workflow ul#controls-workflow-nav li {
	margin-bottom: 10px;
}