/*
	COPYRIGHT NOTICE:

	This file, and all other files hosted on the Black Fire Networks website
	(http://www.bfnsoftware.com), are exclusive property of the Black Fire Networks.
	Redistribution in part or in whole, without explicit written permission from the
	Black Fire Networks is absolutely forbidden.  

	If you would like to use this code for your own personal projects, unrelated
	to any services the Black Fire Networks provides, and understand that all copyright
	notices must remain unaltered, please submit a request to support with the file name,
	and the reason you would like to use it.

	Copyright © 2006 Black Fire Networks.  All Rights Reserved.
*/

/*
	The body of the document
*/
	BODY {
		margin: 0px 0px 0px 0px;
		background: #FFFFFF;
		color: #FFFFFF;
	}
	
	/*
		Form fix
	*/
		FORM {
			margin: 0px 0px 0px 0px;
		}
		
	/*
		Links
	*/
		A, A:hover, A:link, A:active {
			color: #F1F1F1;
			font-weight: bold;
			font-family:Arial;
			text-decoration: none;
		}
		
		A:hover {
			color: #FFFFFF;
		}


	/*
		The DIV which contains the image for the left background border
	*/
		.background_left {
			background: url(./images/left_background.gif) top left repeat-y;
		}

	/*
		The DIV which contains the image for the right background border
	*/
		.background_right {
			background: url(./images/right_background.gif) top right repeat-y;
			
		}
		
	/*
		The DIV that contains the layout
	*/
		.background_workspace {
			padding-left: 100px;
			padding-right: 100px;
			padding-top: 30px;
			padding-bottom: 100px;
		}



		/*
			The DIV that contains the layout
		*/
			.layout {
				min-width: 400px;
			}


			/*
				The outter DIV of the layout header.  These divs are nested to provide
				drawing containers, like the layout
			*/
				.header_a {
					background: url(./images/header_b.gif) top left repeat-x;

				}

				.header_b {
					background: url(./images/header_c.gif) top right no-repeat;
				}

				.header_c {
					background: url(./images/header_a.gif) top left no-repeat;
					height: 38px;
					font-size: 1px;
				}
				
				/*
					The DIV that maintains a minimum width
				*/
					.header_strict {
						width: 700px;
						font-size: 1px;
						height: 0px;
					}


			/*
				The DIV that contains the menu bar
			*/
				.menu_bar_a {
					background: url(./images/menu_bar_b.gif) top left repeat-x;
				}
				
				.menu_bar_b {
					background: url(./images/menu_bar_a.gif) top left no-repeat;
				}
				
				.menu_bar_c {
					background: url(./images/menu_bar_c.gif) top right no-repeat;
					height: 15px;
					font-size: 1px;
					padding-left: 3px;
				}
				
				/*
					An item in the menu bar
				*/
					.menu_item_a, .menu_item_a_first, .menu_item_a_hover, .menu_item_a_hover_first {
						float: left;
						color: #555555;
						width: auto !important;
						width: 10px;
					}

					.menu_item_b, .menu_item_b_first, .menu_item_b_hover, .menu_item_b_hover_first {
						
						background: url(./images/menu_prefix.gif) top left no-repeat;
						font-size: 11px;
						font-weight: bold;
						font-family: Arial;
						height: 15px;
						line-height: 14px;
						vertical-align: middle;
						padding-left: 11px;
						padding-right: 11px;
						cursor: pointer;
						white-space: nowrap;
						overflow: hidden;
					}
					
					/*
						The first menu item in the menu bar
					*/
						.menu_item_b_first, .menu_item_b_hover_first {
							background: url(./images/menu_prefix.gif)  -2px 0px no-repeat;
							padding-left: 9px;
						}	
					
					/*
						A Menu item which the cursor is currently positioned over
					*/
						.menu_item_a_hover, .menu_item_a_hover_first {
							background: url(./images/menu_hover.gif) top left repeat-x;
							color: #FFFFFF;
						}
						
						
					/*
						The Series of DIVs which make up the menu box.  They are nested to provide drawing
						containers, and allow the box to resize with more flexability
					*/
						.menu_box_a {
							position: absolute;
							margin-left: 3px;
							background: url(./images/menu_content_b.gif);
							min-width: 150px;
							width: auto !important;
							width: 150px;

						}

						.menu_box_b {
							background: url(./images/menu_top_b.gif) top left repeat-x;
						}

						.menu_box_c {
							background: url(./images/menu_content_a.gif) top left repeat-y;
						}

						.menu_box_d {
							background: url(./images/menu_content_c.gif) top right repeat-y;
						}

						.menu_box_e {
							background: url(./images/menu_bottom_b.gif) bottom left repeat-x;
						}

						.menu_box_f {
							background: url(./images/menu_top_a.gif) top left no-repeat;
						}

						.menu_box_g {
							background: url(./images/menu_top_c.gif) top right no-repeat;
						}

						.menu_box_h {
							background: url(./images/menu_bottom_a.gif) bottom left no-repeat;
						}

						.menu_box_i {
							background: url(./images/menu_bottom_c.gif) bottom right no-repeat;
							min-height: 60px;
							height: auto !important;
							height: 60px;

							padding-bottom: 4px;
							padding-top: 4px;
						}

						/*
							This is the DIV that provides a drop shadow for the menu box					
						*/
							.menu_box_shadow {
								position: absolute;
								background-color: #000000;
								filter:alpha(opacity=20);
								-moz-opacity:0.2;
								opacity:0.2;
								-khtml-opacity:0.2;
							}



						/*
							The series of DIVs used to make up a menu item.  They are nested to provide
							drawing containers and allow a high degree of flexability.  
						*/
							.dropdown_item_a, .dropdown_item_a_selected {
								margin-left: 6px;
								margin-right: 6px;
								cursor: pointer;
							}

							.dropdown_item_b, .dropdown_item_b_selected {

							}

							.dropdown_item_c, .dropdown_item_c_selected {

							}

							.dropdown_item_d, .dropdown_item_d_selected {

							}

							.dropdown_item_e, .dropdown_item_e_selected {

							}

							.dropdown_item_f, .dropdown_item_f_selected {

							}

							.dropdown_item_g, .dropdown_item_g_selected {

							}

							.dropdown_item_h, .dropdown_item_h_selected {

							}

							.dropdown_item_i, .dropdown_item_i_selected {
								white-space: nowrap;
								overflow: hidden;
								padding-right: 17px;
								font-family: Arial;
								font-size: 11px;
								font-weight: bold;
								color: #DDDDDD;
								padding-left: 15px;
								vertical-align: center;
								height: 18px;
								line-height: 18px;
							}




						/*
							The series of DIVs used to make up a selected menu item.
						*/
							.dropdown_item_a_selected {
								background: url(./images/menu_item_content_b.gif);
							}

							.dropdown_item_b_selected {
								background: url(./images/menu_item_top_b.gif) top left repeat-x;
							}

							.dropdown_item_c_selected {
								background: url(./images/menu_item_content_a.gif) top left repeat-y;
							}

							.dropdown_item_d_selected {
								background: url(./images/menu_item_arrow.gif) center right no-repeat;
							}

							.dropdown_item_e_selected {
								background: url(./images/menu_item_bottom_b.gif) bottom left repeat-x;
							}

							.dropdown_item_f_selected {
								background: url(./images/menu_item_top_a.gif) top left no-repeat;
							}

							.dropdown_item_g_selected {
								background: url(./images/menu_item_top_c.gif) top right no-repeat;
							}

							.dropdown_item_h_selected {
								background: url(./images/menu_item_bottom_a.gif) bottom left no-repeat;
							}

							.dropdown_item_i_selected {
								background: url(./images/menu_item_bottom_c.gif) bottom right no-repeat;
							}
				
			/*
				The outter DIV of the layout, there are several versions of this DIV, each
				serves the purpose of providing a container to draw a background on.
			*/
				.layout_a {
					background: url(./images/content_b.gif) top left;
				}

				.layout_b {
					background: url(./images/content_a.gif) top left repeat-y;
				}

				.layout_c {
					background: url(./images/content_c.gif) top right repeat-y;
					min-height: 200px;
					height: auto !important;
					height: 200px;
					
					padding: 8px;
					padding-bottom: 30px;
					
				}
				
				/*
					The DIV that ensures minimum width in IE
				*/
					.layout_strict {
						width: 684px;
						font-size: 1px;
						height: 0px;
					}
				
				/*
					The style for titles in the content box
				*/
					.layout_title {
						color: #FFFFFF;
						font-variant: small-caps;
						font-size: 18px;
						font-weight: bold;
						font-family: Arial;
						border-bottom: 1px dashed #FFFFFF;

					}
				
				/*
					The style for normal text in the content box
				*/
					.layout_text {
						color: #FFFFFF;
						font-size: 11px;
						font-weight: bold;
						font-family: Arial;
					}
				
				/*
					The style used to center a column of content
				*/
					.center_content {
						margin-left: auto;
						margin-right: auto;
						text-align: left;
					}
				
				
				/*
					The series of DIV's used to create the information box.  They are nested to provide drawing
					containers
				*/
					.info_box_a {
						position: absolute;
						width: 300px;
						background: #FFFFFF;
					
						filter:alpha(opacity=70);
						-moz-opacity:0.7;
						opacity:0.7;
						-khtml-opacity:0.7;
					}
					
					.info_box_b {
						background: url(./images/info_box_top_a.gif) top left no-repeat;
					}
				
					.info_box_c {
						background: url(./images/info_box_bottom_c.gif) bottom right no-repeat;
						min-height: 70px;
						height: auto !important;
						height: 70px;
						font-family: Arial;
						padding: 5px;
					}
					
				
					/*
						The DIV that provides a paragraph style indent
					*/
						.info_box_indent {
							width: 35px;
							height: 25px;
							float: left;
							font-size: 1px;
						}
					
					/*
						The DIV that the info box title goes in
					*/
						.info_box_title {
						
							
							font-size: 17px;
							font-weight: bold;
							font-variant: small-caps;
							color: #113F6E;	
							padding-top: 6px;
							
						}
					
					/*
						The DIV that the content of the info box goes in
					*/
						.info_box_content {
							font-size: 11px;
							color: #555555;
						}
						
				/*
					This is the DIV that provides a drop shadow for the info box				
				*/
					.info_box_shadow {
						position: absolute;
						background-color: #000000;
						filter:alpha(opacity=20);
						-moz-opacity:0.2;
						opacity:0.2;
						-khtml-opacity:0.2;
					}



			/*
				The outter DIV of the layout footer.  These divs are nested to provide
				drawing containers, like the layout
			*/
				.footer_a {
					background: url(./images/footer_b.gif) top left repeat-x;
				}

				.footer_b {
					background: url(./images/footer_a.gif) top left no-repeat;
				}

				.footer_c {
					background: url(./images/footer_c.gif) top right no-repeat;
					height: 16px;
					font-size: 1px;
				}

/*

	%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% Home Page %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

*/

	/*
		The DIV that contains an intro section, such as products, or services
	*/
		.intro_section {
	
		}

		/*
			The DIV that contains the headers for each of the content sections
		*/
			.intro_header {
				font-size: 20px;
				font-weight: bold;
				font-family: Arial;
				color: #FFFFFF;
				border-bottom: 1px solid #FFFFFF;
				margin-bottom: 4px;
				font-variant: small-caps;
				width: 100%;
			}
			
		/*
			A DIV which contains intro text		
		*/
			.intro_text {
				font-size: 13px;
				color: #FFFFFF;
				padding: 5px;
			}
		
		/*
			The DIV that contains the icons in each of the intro sections
		*/
			.intro_icons {
				padding: 10px;	
			}


			/*
				The DIV that contains an item in the intro
			*/
				.intro_item, .intro_item_hover {
					float:left;
					height: 44px !important;
					height: 35px;
					/*
						width: auto !important;
						width: 1%;
					*/
					width: 200px;
					background-position: top left;
					background-repeat: no-repeat;
					padding-left: 35px;
					font-size: 11px;
					font-family: Arial;
					color: #FFFFFF;
					padding-right: 15px;
					cursor: pointer;
				}
				
				/*
					The Style used when the mouse is over an item
				*/
					.intro_item_hover {
						text-decoration: underline;
						color: #222222;
					}


				/*
					The DIV that contains the short description of each intro item
				*/
					.intro_item_text_desc {
						height: 14px;	
						white-space: nowrap;
					}

				/*
					The DIV that contains the name of each intro item
				*/
					.intro_item_text_name {
						font-size: 14px;
						font-weight: bold;
						height: 18px;
						white-space: nowrap;
					}

			/*
				The DIV that consumes the remainder of this sections item space
			*/
				.intro_item_extra {
					font-size: 1px;
					height: 1px;
					clear: both;
				}



/*
	The DIV that contains the service header
*/
	.service_header {
		height: 32px;
		overflow:hidden;
	}

	/*
		The DIV used to display a service icon
	*/
		.service_icon {
			width: 32px;
			height: 32px;
			font-size: 1px;
			overflow: hidden;
			float: left;
			margin-right: 5px;
		}

	/*
		The DIV that contains the service name
	*/
		.service_name {
			float: left;
			font-size: 28px;
			font-weight: bold;
			color: #FFFFFF;
			font-family: Arial;
			height: 40px;
		}
		
	/*
		The Login link DIV
	*/
		.service_login {
			width: 32px;
			height: 32px;
			background: url(./images/icons/login.gif) top left no-repeat;
			float: right;
			font-size: 1px;
			overflow: hidden;
			margin-right: 5px;
			cursor: pointer;
		}
		
	/*
		The join link DIV
	*/
		.service_join {
			width: 32px;
			height: 32px;
			background: url(./images/icons/join.gif) top left no-repeat;
			float: right;
			font-size: 1px;
			overflow: hidden;
			margin-right: 5px;
			cursor: pointer;
		}
	
/*
	The DIV that contains the service description
*/
	.service_description {
		font-family: Arial;
		font-size: 13px;
		font-weight: normal;
		color: #FFFFFF;
		clear:both;
	}


/*
	The DIV which contains a product description section
*/
	.product_section {
		margin-left: 50px;
		margin-right: 50px;
		margin-bottom: 25px;
		margin-top: 25px;
		border: 1px solid #000000;
		color: #000000;
		background-color: #FFFFFF;
	}
	
	/*
		The DIV that contains a section name
	*/
		.product_section_title {
			font-family: Arial;
			font-size: 15px;
			font-weight: bold;
			padding: 3px;
			background-color: #223950;
			color: #FFFFFF;
			margin-bottom: 4px;
		}
		
	/*
		The DIV that contains the section description
	*/
		.product_section_description {
			font-family: Arial;
			font-size: 13px;
			font-weight: normal;
			padding-left: 40px;
			padding-bottom: 10px;
		}
		
		/*
			Links
		*/
			.product_section_description A, .product_section_description A:hover, .product_section_description A:link, .product_section_description A:active {
				color: #386693;
				font-weight: bold;
				font-family:Arial;
				text-decoration: none;
			}

			.product_section_description A:hover {
				color: #17395b;
			}

/*
	The DIV which contains a support description section
*/
	.support_section {

	}
	
	/*
		The DIV that contains a section name
	*/
		.support_section_title {
			font-family: Arial;
			font-size: 15px;
			font-weight: bold;
			padding: 3px;
			color: #FFFFFF;
			margin-bottom: 4px;
			border-bottom: 1px solid #FFFFFF;
		}
		
	/*
		The DIV that contains the section description
	*/
		.support_section_description {
			font-family: Arial;
			font-size: 13px;
			font-weight: normal;
			padding-left: 40px;
			padding-bottom: 10px;
			color: #FFFFFF;
			padding-right: 30px;
		}

/*
	The DIV that contains the about us description text
*/
	.about_us {
		font-family: Arial;
		font-size: 13px;
		font-weight: normal;
		color: #FFFFFF;
	}



/*
	The DIV that wraps a form section
*/
	.form_section {
	
	}
	
	/*
		the DIV that contains the section title
	*/
		.form_section_title {
			font-size: 14px;
			font-weight: bold;
			color: #FFFFFF;
			font-family: Arial;
			padding: 3px;
			padding-left: 0px;
			padding-right: 0px;
			border-bottom: 1px solid #FFFFFF;
		}
		
	/*
		The DIV that contains the form
	*/
		.form_section_content {
			padding-left: 40px;
			padding-bottom: 20px;
		}
		
	/*
		Information box in a form
	*/
		.form_section_text {
			padding-left: 40px;
			padding-bottom: 10px;
			font-family: Arial;
			font-weight: normal;
			font-size: 13px;
			color: #FFFFFF;
		}


		/*
			The DIV that wraps an input on a form
		*/
			.input_row {
				clear: both;
				padding-top: 4px;
				width: 455px;
			}

			/*
				The DIV that contains the input label
			*/
				.input_label {
					float: left;
					width: 150px;
					font-weight: bold;
					font-family: Arial;
					font-size: 14px;
					color: #FFFFFF;
				}

			/*
				The DIV that contains the input content
			*/
				.input_content {
					float: left;
					font-family: Arial;
					font-weight: normal;
					font-size: 13px;
					color: #FFFFFF;
					white-space: nowrap;
				}

				/*
					The Style used on inputs
				*/
					.form_input {
						width: 300px;
						border: 1px solid #000000;
						background-color: #FFFFFF;
						font-family: Arial;
						font-size: 11px;
						font-weight: bold;
						padding-left: 2px;
						color: #333333;
					}

				/*
					The style used on form textareas
				*/
					.form_textarea {
						width: 300px;
						border: 1px solid #000000;
						background-color: #FFFFFF;
						font-family: Arial;
						font-size: 11px;
						font-weight: bold;
						color: #333333;
					}
			/*
				the DIV that contains an inputs description
			*/
				.input_description {
					font-size: 11px;
					font-weight: normal;
					padding-left: 150px;
					font-family: Arial;
					color: #F1F1F1;
				}
					
/*
	The DIV that contains an error message
*/
	.error_box {
		text-align: left;
		width: 500px;
		padding: 5px;
		border: 1px solid #000000;
		background-color: #FFFFFF;
		
	}
	
	/*
		The DIV that contains the error icon
	*/
		.error_icon {
			float: left;
			height: 50px;
			width: 50px;
			font-size: 1px;
			overflow: hidden;
			margin-right: 10px;
			background: url(./images/error.gif) top left no-repeat;
		}
		
	/*
		The DIV that contains the error title
	*/
		.error_title {
			float: left;
			font-family: Arial;
			font-size: 15px;
			font-weight: bold;
			color: #000000;
			width: 400px;
			
		}
		
	/*
		The DIV that contains the error message
	*/
		.error_message {
			float: left;
			font-family: Arial;
			font-size: 13px;
			font-weight: normal;
			color: #333333;
		}
	/*
		The DIV used for the back link
	*/
		.error_back {
			font-family: Arial;
			font-size: 13px;
			font-weight: normal;
			color: #333333;
			text-align: right;
			clear: both;
		}

/*
	The DIV that contains all the FAQ items
*/
	.faq_manager {
		font-family: Arial;
		font-size: 13px;
		font-weight: normal;
		color: #FFFFFF;
	}
	
	/*
		An FAQ group
	*/
		.faq_group {

		}
		
		/*
			The title of an FAQ group
		*/
			.faq_group_title, .faq_group_title_open {
				font-weight: bold;
				line-height: 18px;
				height: 18px;
				background: url(./images/expand.gif) 5px center no-repeat;
				padding-left: 24px;
				cursor: pointer;
			}
			
			.faq_group_title_open {
				background: url(./images/contract.gif) 5px center no-repeat;
			}
			
		/*
			The content of an FAQ group
		*/
			.faq_group_items {
				padding-left: 30px;
			}
			
			/*
				An FAQ item, such as an extension
			*/
				.faq_item {

				}

				/*
					The DIV that contains an faq items title
				*/
					.faq_item_title, .faq_item_title_open {
						font-weight: bold;
						line-height: 18px;
						height: 18px;
						background: url(./images/expand.gif) 5px center no-repeat;
						padding-left: 20px;
						cursor: pointer;
					}
					
					.faq_item_title_open {
						background: url(./images/contract.gif) 5px center no-repeat;
					}
					
				/*
					The DIV that contains the faq items content
				*/
					.faq_item_questions {
						padding-left: 30px;
					}
					
					/*
						The DIV that contains an FAQ question
					*/
						.faq_qusetion {

						}
						
						/*
							The DIV that contains the question text
						*/
							.faq_question_text, .faq_question_text_open {
								font-weight: bold;
								line-height: 18px;
								height: 18px;
								background: url(./images/expand.gif) 5px center no-repeat;
								padding-left: 20px;
								cursor: pointer;
							}
							
							.faq_question_text_open {
								background: url(./images/contract.gif) 5px center no-repeat;
							}
						
						/*
							The DIV that contains the question answer
						*/
							.faq_answer_text {
								padding-left: 30px;
							}

/*
	The DIV that contains the quota box
*/
	.QuotaBox {
		border: 1px solid;
		border-color: #777777 #000000 #000000 #777777;
		background-color: #FFFFFF;
		-moz-box-sizing: border-box;
	}
	
	/*
		The DIV that contains the name quota
	*/
		.QuotaBox_name {
			float: left;
			font-family: Arial;
			font-size: 13px;
			font-weight: bold;
			color: #000000;
			line-height: 20px;
			padding-left: 5px;
		}
		
	/*
		The DIV that contains the text version of the quota
	*/
		.QuotaBox_text {
			float: right;
			font-family: Arial;
			font-size: 12px;
			font-weight: bold;
			color: #777777;
			line-height: 24px;
			padding-right: 5px;
			text-align: right;
			overflow: hidden;
		}
		
	/*
		The DIV that contains the quota bar
	*/
		.QuotaBox_progress {
			clear: both;
		}
		
		/*
			The DIV that makes up the outside outline of the quota bar
		*/
			.QuotaBox_bar_wrapper {
				position: relative;
				border: 1px solid;
				-moz-box-sizing: border-box;
				border-color: #777777 #BBBBBB #BBBBBB #777777;
				background-color: #F1F1F1;
			}
			
			/*
				The DIV that makes the color fill in for the bar
			*/
				.QuotaBox_bar_status {
					border: 1px solid;
					-moz-box-sizing: border-box;
					border-color: #ACDBAF #1EA828 #1EA828 #ACDBAF;
					background-color: #5DB864;
					font-size: 1px;
					overflow: hidden;
				}