/*
This file describes styles used for content presentation within the Detail Pane. 
*/

/*
COLORS:
Background light-grey:		#f7f7f7;
Sticky-note yellow:			#feffc4;
Sticky-note edge:			#d2d2d3;
Red:						#ac0d14;
Blue:						#427dbe;
Light blue:					#7d9fd4;
*/


.section { /* A primary collapsable division of content within the detail pane */
	margin:					20px 10px 20px 25px;
}

	.section h1 { /* The header text for a section */
		position:				relative;
		display:				block;
		font-size:				12px;
		color:					#427dbe;
		padding-bottom:			2px;
		border-bottom: 			1px solid #7d9fd4;
		cursor:					pointer;
	}
	
	.section h1:hover {
		color:					#7d9fd4;
	}
	
		.section h1 img { /* the expand/contract button image for a section */
			position: absolute;
			left: -15px;
			top: 3px;
		}
		
	.section .content { /* The content of a section, only visible when the section is expanded */
		margin:					10px 0 20px 170px;
	}

		.section .content dl { /* A grouping of simple data-pairs within a section */
			position:				relative;
			margin-bottom:			20px;
		}
	
			.section .content dl dt { /* The label portion of a data-pair within a section */
				position:				absolute;
				left:						-180px;
				width:					165px;
				text-align:				right;
				padding-top:			3px;
				font-size:				9px;
				color:					#4b4b4b;
			}
			
			.section .content dl dt.validation { /* A label which is marked to draw attention for validation reasons */
				color:					#ac0d14;
				font-weight:			bold;
			}
	
			.section .content dl dd { /* The data portion of a data-pair within a section, read only */
				padding-top:			3px;
				font-style:				italic;
				color:					#4b4b4b;
				position:				relative;
			}
			
				.section .content dl dd strong { /* Ensure read-only style applies to strong content */
					font-style: italic;
				}
				.section .content dl dd strong,
				.section .content dl dd strong input,
				.section .content dl dd strong textarea { /* strong content is called out for primary identifiers on a given page */
					font-size:				13px;
					font-weight:			bold;
				}
			
				.section .content dl dd .editable,
				.section .content dl dd .editable strong { /* The data portion of a data-pair within a section, editable */
					font-style:				normal;
					color:					#222222;
					cursor: 				pointer;
				}
			
				.section .content dl dd .editable:hover,
				.section .content dl dd .editable:hover strong  {
					background-color:		#ac0d14; /* #427dbe; */
					color:					#fff;
				}
			
				.editing { /* A collection of fields that is actively being edited */
					background-color:		#fff;
					border-bottom:			1px solid #bbb;
					border-right:			1px solid #d2d2d3;
					padding:				5px 8px 5px 5px;
					position: 				relative;
				}
					
					.editing dd {
						border-bottom: 1px solid #d2d2d3;
						padding-bottom: 2px;
					}
					
					.editing input,
					.editing textarea,
					.editing select,
					.editing option { /* actively edited input fields */
						font-family:			Verdana, Arial, Helvetica, sans-serif;
						font-style:				normal;
						font-size:				11px;
						line-height:			15px;
						border:					0;
						width:					100%;

					}
	
					.editing textarea { /* set default height for textareas */
						height:					100px;
					}
					
					.editing textarea,
					.editing input {
					}

					.editing .controls { /* container for the control buttons under an actively edited element */
						margin:					0 2px;
						text-align:				right;
					}
						
						.editing .controls li,
						.add_control { /* an individual control button for actively edited elements */
							margin-left:			2px;
							padding:				1px 2px 1px 2px;
							font-size:				9px;
							font-style:				normal;
							font-weight:			normal;
							color:					#ac0d14; 
							display:				inline;
							cursor:					pointer;
							background-image:		url(../images/menu_bar_bg.gif);
							background-position:	0 -2px;
						}
						
						.editing .controls li:hover,
						.add_control:hover {
							background-image:		url(../images/menu_bar_bg.gif);
							background-position:	0 -18px;
							color:					#fff;
						}
						
						.editing ul.controls li.default { /* Different style for the default button, usually "OK" */
							text-transform:		uppercase;
							font-weight:		bold;
							font-size:			10px;
						} 
						
						.editing ul.controls li.default:hover {

						}		
				
	table.tree { /* A table with the ability to expand/collapse each row to display additional data-pairs */
	}
		
		table.tree th { /* The header labels for a table.tree */
			font-style:				normal;
			font-size:				9px;
			color:					#4b4b4b;
		}
	
		table.tree tr.primary_row td { /* The cells within a table.tree */
			font-style:				normal;
			color:					#427dbe;
			cursor:					pointer;
		}
				
		table.tree tr.primary_row:hover td { /* Make a table.tree primary row highlight on hover */
			color:					#7d9fd4;
		}
		
		table.tree th,
		table.tree tr.primary_row td { /* provide adequate horizontal spacing and vertical alignment within table.trees */		
			padding:			0 10px 4px 0;
			vertical-align:		top;
		}
		
		
		table.tree tr.primary_row img.expand_btn { /* expand and collapse button indicator for table.tree rows */

		}

		
		table.tree tr.content_row td { /* The content cell within an expanded table.tree row */
			color:				#222222;
			padding-bottom:		10px;
		}
		
		.section table.tree tr dl { /* A grouping of simple data pairs within a table.tree */
			margin:					0 0 5px 100px;
		}
		
			.section table.tree tr dl dt { /* The label portion of a data-pair within a table.tree */
				left:					-100px;
				width:					90px;
				font-style:				normal;
			}
			
			.section table.tree tr dl dd { /* The data portion of a data pair within a table tree */

			}
		
		table.tree tr.editing_row td { /* proper spacing beneath a table.tree editing row */
			padding-bottom:		10px;
		}
		
		.row_controls {
			width: 42px;
			height: 20px;
		}

		.row_control_icon.edit			{ background-image: url(../images/tool_edit.gif); }
		.row_control_icon.view			{ background-image: url(../images/tool_view.gif); }
		.row_control_icon.delete		{ background-image: url(../images/tool_delete.gif); }
		
		.row_control_icon {
			float: left;
			border-left: 1px solid #e0e0e0;
			width:20px;
			height: 16px;
			background-repeat: no-repeat;
			background-position: 2px 0;
			cursor: pointer;
		}

		.row_control_icon:hover {
			background-position: 2px -16px;
		}
		
.project_branding {
	width: 320px;
	padding: 15px;
}

	.project_branding_item {
		margin-bottom: 15px;
	}

.add_sub {
	float:right;
}
	
.assoc_table {
	margin-top: 10px;
	margin-bottom: 30px;
	border:1px solid #13556d;
}

	.assoc_table th {
		background-color: #13556d;
		font-weight: bold;
		color:#ffffff;
		padding: 4px 2px 4px 4px;
		text-align:center;
	}
	
	.assoc_table th.left {
		background-color: #13556d;
		font-weight: bold;
		color:#ffffff;
		padding: 4px 2px 4px 4px;
		text-align:left;
	}
	
	.assoc_table td {
		font-weight: normal;
		font-size: 10px;
		padding: 2px 2px 2px 4px;
	}
	
	.assoc_table tr.even {
		background-color: #fff;
	}
	
	.assoc_table tr.odd {
		background-color: #f1f1f1;
	}