/********************************
 *	Faces Components Stylesheet *
 ********************************/

body {
  color            : #000000;
  margin-left      : 20px;
  margin-right     : 20px;
  margin-bottom    : 20px;
  padding          : 0px;
  background-color : #FFFFFF;
  background-image : url("img/bg1.jpg");
  font-family	   : Verdana, Arial, Helvetica, sans-serif;
  font-size        : 11px;
  line-height	   : 18px;
  color			   : #0860B7;
}

hr {
  color            : #999999;
  height           : 1px;
  width            : 100%;
}

a:hover {
	text-decoration: none;
	font-weight:bold;
}

/********************************
 *	Information Boxes *
 ********************************/
 .infomessages, .successmessages, .warningmessages, .errormessages, .validation {  
     border: 1px solid;  
     margin: 10px 0px;  
     padding:15px 10px 15px 50px;  
     background-repeat: no-repeat;  
     background-position: 10px center;
     display: block;
     width:	75%;
     font-size: 10pt
 }  
 .successmessages, .infomessages {  
     color: 4F8A10;  
     background-color: DFF2BF;  
     background-image:url('img/success.png');  
 }  
 .warningmessages, .infomessages {  
     color: 9F6000;  
     background-color: FEEFB3;  
     background-image: url('img/warning.png');  
 }  
 .errormessages {  
     color: D8000C;  
     background-color: FFBABA;  
     background-image: url('img/error.png');  
 }

/********************************
 *	Panel Columns *
 ********************************/
 .tableCenter, .mainColLeft, .mainColMiddle, .mainColRight {
 	vertical-align	: top;
 	text-align		: center;
 }
 .tableCenter, .mainColLeft, .mainColMiddle, .mainColRight {
 	text-align: -moz-center;
 }
 .mainColLeft {
 	width: 20%;
 }
 .mainColMiddle {
 	width: 60%;
 }
 .mainColRight {
 	width: 20%;
 }
 
 .panelGridCenter {
 	text-align: center;
 }
.loginCol1 {
 	text-align: right;
	width: 40%;
 }
.loginCol2 {
 	text-align: left;
	width: 60%;
 }
 
.orderEntrySummaryCol1, .orderEntrySummaryCol2 {
 	text-align: left;
 	vertical-align: top;
	width: 50%;
 }
.orderEntrySummaryCol2 {
 	text-align: left;
 	vertical-align: top;
	width: 50%;
 }
 
.contactCol1 {
 	text-align: right;
	width: 40%;
 }
.contactCol2 {
 	text-align: left;
	width: 60%;
 }

.brochureHelpCols {
 	vertical-align: top;
 	width: 25%;
}
.brochureCreateCols {
 	vertical-align: top;
 	width: 50%;
}
 
.displayCatStyleCol1 {
	padding: 5px 0px ;
	text-align: left;
}
.footerClassCart {
	text-align: center;
}

/********************************
 *	Panes and Tables *
 ********************************/
 
.panelGrid, .panelDialog {
  table-layout	   : auto;
  background-color : #C3D9FF; 
  vertical-align   : top;
}

.headerClass, .headerClassNoBg {
  padding			: 2px;
  font-size        	: 11px;
  font-weight      	: bold;
  text-transform   	: uppercase;
  text-align       	: center;
  height           	: 21px;
  line-height      	: 15px;
  letter-spacing   	: 1px;
  color            	: #FFF;
  background-color	: #003C75;
  background-repeat	: repeat-x;
  background-image 	: url("img/header-bg.jpg");  
}

.footerClass {
	background-color	: #C3D9FF;
	color				: WindowText;
	border-width		: 0px;
	border-style		: none;
	padding				:0px;
	padding-left		:4pt;
	padding-right		:4pt;
	padding-top 		:4pt;
	padding-bottom 		:4pt;
	font-weight			: 400;
	text-align			: center;
	overflow			: -moz-scrollbars-none;
}

.rowClass1 {
	background-color: white;
}

.rowClass2 {
	background-color: #C3D9FF;
}

.rowSelect {
	background-color: #FFFFCC;
}

.columnClass1, .columnClass2, .columnClass1Left, .columnClass2Left, .rowSelect {
	margin			:2px;
	padding			:0px;
	padding-left	:4pt;
	padding-right	:4pt;
	padding-bottom	:2px;
	text-align		:center;
	vertical-align	:middle;
	overflow		:-moz-scrollbars-none;
}

.columnClass2, .columnClass2Left {
	background-color: #C3D9FF;
}

.columnClass1Left, .columnClass2Left {
	text-align: left;
}



/********************************
 *	Input Controls
 ********************************/
 
.inputText, .inputSecret {
	color: #0860B7;
	background-color:#FFFFCC;
	border:1px solid #739CCA;
	padding: 1px 6px ;
}


.inputText_Error {
	border-style: solid;
	border-color: #DE5C5C;
}

/********************************
 *	Output  Controls
 ********************************/

.outputFormat, .outputText, .outputTextSmall, .outputLabel, .outputTextSmallWhite {
	color		: #0860B7;
	font-weight	: bold;
	font-size	: 12px;
}

.outputLabel {
	text-align	:right;
}

.outputTextSmall, .outputTextSmallWhite {
	font-size	: 10px;
}

.outputTextSmallWhite {
	color		: #FFFFFF;
}
/********************************
 *	Misc Controls/Buttons  Controls
 ********************************/
 
.commandExButton, .commandButton {
	background: url("img/graydient.gif");
	font-family:Verdana;
	font-size:11px;
	font-weight:bold;
	padding:1px 5px 1px 5px;
}

.commandExButton_Label {
	color: #333333;
	text-align: center;
	vertical-align: middle
}

.commandExButton_Icon {
	text-align: left;
	margin-left: 4px;
	height: 17px;
	width: 17px
}

.commandExButton_Icon_moused {
	text-align: left;
	margin-left: 4px;
	height: 17px;
	width: 17px
}

.commandExButton_Icon_depressed {
	text-align: left;
	margin-left: 4px;
	height: 17px;
	width: 17px
}

.commandExButton_Icon_disabled {
	text-align: left;
	margin-left: 4px;
	height: 17px;
	width: 17px
}

.selectBooleanCheckbox {
}

.selectBooleanCheckbox_Error {
}

.selectOneRadio {
}

.selectOneRadio_Error {
}

.selectOneRadio_Disabled {
	color: GrayText;
}

.selectManyCheckbox {
}

.selectManyCheckbox_Error {
}

.selectManyCheckbox_Disabled {
	color: GrayText;
}

.selectOneListbox {
}

.selectOneListbox_Error {
}

.selectManyListbox {
}

.selectManyListbox_Error {
}

.selectOneMenu {
}

.selectOneMenu_Error {
}

.selectManyMenu {
}

.selectManyMenu_Error {
}




.outputLinkEx, .requestLink {
	text-decoration: none;
}

.graphicImageEx {
	border: 0px;
}

.outputSeparator {
	
}


.panelLayout {
	
}


.dataTableEx {
	background-color:#C3D9FF; 
	border: #C3D9FF 1px solid;
	empty-cells: show
}

.editStyleClass A {
	margin: 0px;
	padding: 0px;
	border-width: 0px;
	border-style: none;
	width: 1px;
	height: 1px
}

/*******************************************
 *	CSS Markup for Type Ahead Control
 *******************************************/
 
.inputText_TypeAhead-List {
	background-color: #C3D9FF;
	text-align: left;
	vertical-align: middle;
	height: auto;
	font-family: sans-serif;
	font-weight: 400;
	font-size: 10pt;
	border-collapse: collapse
}

.inputText_TypeAhead-Item {
	background-color: #C3D9FF;
	color: WindowText;
	padding-left: 1pt;
	padding-right: 1pt
}

.inputText_Typeahead-Item-Selected {
	color: Window;
	background-color: Highlight;
	padding-left: 1pt;
	padding-right: 1pt
}

.inputText_Typeahead-Item a {
	text-decoration: none;
	color: WindowText
}

.inputText_Typeahead-Item-Selected a {
	text-decoration: none;
	color: Window
}

/*******************************************
 *	Panel Dialog and Section CSS
 *******************************************/
.panelSection {
	
}

.panelSection-header {
	
}

.panelSection-header a {
	text-decoration: underline;
	color: black
}

.panelSection-header a:hover {
	
}

.panelSection-body {
	
}

.panelSectionWide {
	
}

.panelSectionWide-header {
	border-style: solid;
	border-width: 1px;
	border-color: black
}

.panelSectionWide-header a {
	text-decoration: none;
	color: black;
	display: block;
	width: 100%
}

.panelSectionWide-header a:hover {
	
}

.panelSectionWide-body {
	
}


.panelDialog {
	position: absolute;
}

.panelDialog_TitleBar {
	text-align: center;
	color: white;
	font-family: sans-serif;
	font-weight: bold;
	font-size: 11px;
	padding-left: 15px;
	padding-right: 20px;
	padding-top: 1px;
	padding-bottom: 2px;
	background-color: #003C75;
	background-repeat: repeat-x;
	background-image: url("img/header-bg.jpg");
	cursor: pointer
}

.panelDialog_TitleBar-CloseButton {
	position: absolute;
	top: 1px;
	right: 1px;
	cursor: default;
	border-style: none;
	border-width: 0px
}

.panelDialog_TitleBar-CloseButton-img {
	background-image: url("img/JSF_title_closebtn.gif");
	background-repeat: repeat-x;
	width: 16px;
	height: 14px;
	border-style: none;
	border-width: 0px
}

.panelDialog_ContentArea {
	font-family: sans-serif;
	font-size: 12px;
	padding: 2px;
	padding-top: 10px
}


/*******************************************
 *	DIV Container which scrolls the module versus
 *  growing it.
 *******************************************/
.divModuleScrolling {
	overflow:auto;
	width:100%;
	height:275;
	background-color:	white;
	border: 0;
}

/********************************
 *	DIV Style Displaying CSS *
 ********************************/

.divStyleContainer {
	overflow	:auto;
	width		:100%;
	height		:150px;
	background-color:	white;
	border		: 0;
}

/********************************
 *	CSS Below is used for a table where
 *  the cells are the actual links.
 ********************************/
table.blockLinks {
	background-color: white;
	border			: 0px;
	width			: 100%;
	cellpadding		: 2;
   	border-collapse	: collapse;
}
table.blockLinks td {
   border: 1px solid #ccc;
}
table.blockLinks td a{
   display: block;
   width: 100%;
   padding: 3px;
   text-decoration: none;
}
table.blockLinks td a:link, table.blockLinks td a:visited {
   color: #000;
   background-color: #fff;
}
table.blockLinks td a:hover, table.blockLinks td a:active {
	background-color	: #C3D9FF; 
	border				: 0px solid #3169C6;
	color				: #fff;
}

/**********************************************
 *	Component:  inputMiniCalendar 					  *
 **********************************************/

.inputMiniCalendar {
	background-color: ButtonFace;
	border: 1px;
	border-style: solid;
	border-color: ButtonShadow;
	font-family: Arial, sans-serif;
	font-size: 8pt;
	text-decoration: none;
	font-weight: normal;
	color: WindowText;
	padding: 2px;
	margin: 0px;
	width: 130pt;
}

.inputMiniCalendar-Size {
}

.inputMiniCalendar-Header {
	border-width: 0px;
	border-bottom-width: 1px;
	border-style: solid;
	border-color: ButtonShadow;
}

.inputMiniCalendar-Body {
	border-width: 0px;
	border-style: none;
	background-color: window;
}

.inputMiniCalendar-HeaderLine1,
.inputMiniCalendar-HeaderLine2,
.inputMiniCalendar-HeaderWeekday, 
.inputMiniCalendar-HeaderYear,
.inputMiniCalendar-HeaderMonth {
	font-family: Arial, sans-serif;
	font-size: 8pt;
	text-decoration: none;
	font-weight: bold;
	vertical-align: middle;
}

.inputMiniCalendar-HeaderLine1 {
	width: 12px;
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 2px;
	padding-bottom: 1px;
}

.inputMiniCalendar-HeaderYear {
	color: WindowText;
	padding-top:2px;
	padding-bottom:1px; 
}

.inputMiniCalendar-HeaderLine2 {
	width: 12px;
	padding-left: 2px;
	padding-right: 2px;
	padding-bottom: 3px;
}

.inputMiniCalendar-HeaderMonth {
	color: WindowText;
	padding-bottom: 3px;
}

.inputMiniCalendar-Button {
	border: 0px;
	width:  12px;
	height: 12px;
}

.inputMiniCalendar-HeaderWeekday {
	color: WindowText;
	background-color: ButtonFace;
	padding-top: 1px;
	padding-bottom: 2px;
}

.inputMiniCalendar-OtherMonth,
.inputMiniCalendar-CurrentMonth,
.inputMiniCalendar-CurrentDay, 
.inputMiniCalendar-CurrentOtherDay, 
.inputMiniCalendar-InvalidDay, 
.inputMiniCalendar-Today,
.inputMiniCalendar-CurrentToday,
.inputMiniCalendar-Hover {
	font-family: Arial, sans-serif;
	font-size: 9pt;
	text-decoration: none;
	font-weight: normal;
	text-align: center;
	vertical-align: middle;
	border-width: 1px;
	border-style: solid;
	padding: 1px;
	padding-left: 2px;
	padding-right: 2px;
	border-width:1px;
	border-style:solid;
	border-color:window;
}

.inputMiniCalendar-Hover {
	background-color:InactiveCaptionText;
	border-color:black;
}

.inputMiniCalendar-OtherMonth {
	color: GrayText;
}
.inputMiniCalendar-CurrentMonth {
	color: WindowText;
}

.inputMiniCalendar-Today {
	border-color: Window;
	color: Window;
	background-color:ThreeDDarkShadow;
	font-weight: bold;
}

.inputMiniCalendar-CurrentDay, .inputMiniCalendar-CurrentToday {
	color: HighlightText;
	background-color: Highlight;
}

.inputMiniCalendar-CurrentToday {
	font-weight: bold;
}

.inputMiniCalendar-CurrentOtherDay {
	color: HighlightText;
	background-color: Highlight;
}

.inputMiniCalendar-InvalidDay {
	color: GrayText;
	background-color: buttonface;
	border-color: buttonface;
}
/**********************************************
 *	Compound Component:  DatePicker Dropdown  *
 **********************************************/

.inputText_DatePicker {
	background-color: ButtonFace;
	border: 1px;
	border-style: solid;
	border-color: ButtonShadow;
	font-family: Arial, sans-serif;
	font-size: 8pt;
	text-decoration: none;
	font-weight: normal;
	color: WindowText;
	padding: 2px;
	margin: 0px;
}

.inputText_DatePicker-Size {
}

.inputText_DatePicker-Header {
	border-width: 0px;
	border-bottom-width: 1px;
	border-style: solid;
	border-color: ButtonShadow;
}

.inputText_DatePicker-Body {
	border-width: 0px;
	border-style: none;
	background-color: window;
}

.inputText_DatePicker-HeaderLine1,
.inputText_DatePicker-HeaderLine2,
.inputText_DatePicker-HeaderWeekday, 
.inputText_DatePicker-HeaderYear,
.inputText_DatePicker-HeaderMonth {
	font-family: Arial, sans-serif;
	font-size: 8pt;
	text-decoration: none;
	font-weight: bold;
	vertical-align: middle;
}

.inputText_DatePicker-HeaderLine1 {
	width: 12px;
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 2px;
	padding-bottom: 1px;
}

.inputText_DatePicker-HeaderYear {
	color: WindowText;
	padding-top:2px;
	padding-bottom:1px; 
}

.inputText_DatePicker-HeaderLine2 {
	width: 12px;
	padding-left: 2px;
	padding-right: 2px;
	padding-bottom: 3px;
}

.inputText_DatePicker-HeaderMonth {
	color: WindowText;
	padding-bottom: 3px;
}

.inputText_DatePicker-Button {
	border: 0px;
	width:  12px;
	height: 12px;
}

.inputText_DatePicker-HeaderWeekday {
	color: WindowText;
	background-color: ButtonFace;
	padding-top: 1px;
	padding-bottom: 2px;
}

.inputText_DatePicker-OtherMonth,
.inputText_DatePicker-CurrentMonth,
.inputText_DatePicker-InvalidDay, 
.inputText_DatePicker-CurrentDay, 
.inputText_DatePicker-CurrentOtherDay, 
.inputText_DatePicker-Today,
.inputText_DatePicker-CurrentToday,
.inputText_DatePicker-Hover {
	font-family: Arial, sans-serif;
	font-size: 9pt;
	text-decoration: none;
	font-weight: normal;
	text-align: center;
	vertical-align: middle;
	border-width: 0px;
	border-style: none;
	padding: 2px;
	padding-left: 3px;
	padding-right: 3px;
}

.inputText_DatePicker-Hover {
	background-color:InactiveCaptionText;
}

.inputText_DatePicker-OtherMonth {
	color: GrayText;
	border-color: Window;
}
.inputText_DatePicker-CurrentMonth {
	color: WindowText;
	border-color: Window;
}

.inputText_DatePicker-Today, .inputText_DatePicker-Today A {
	border-color: Window;
	color: Window;
	background-color:ThreeDDarkShadow;
	font-weight: bold;
}

.inputText_DatePicker-CurrentDay, .inputText_DatePicker-CurrentToday {
	color: HighlightText;
	background-color: Highlight;
}

.inputText_DatePicker-CurrentToday {
	font-weight: bold;
}

.inputText_DatePicker-CurrentOtherDay {
	color: HighlightText;
	background-color: Highlight;
}

.inputText_DatePicker-InvalidDay {
	color: GrayText;
	background-color: buttonface;
	border-color: buttonface;
}