/*
# $Id: system.css,v 1.19 2004/09/15 12:52:35 jgauld Exp $
# $Name:  $
#
# System Stylesheet
#
# Notes
# - Don't set width to be 100% in nested DIVs because Firefox doesn't like that. However, do set it
#   in the 'panel' DIV as that makes sure all nested divs are displayed correctly.
*/

/*
# Panel
# Nesting:
#	panel
#		panelHeading
#		panelNotes
#			td.panelNotes
#		panelBody
#		panelSubHeading
*/
div.panel {
	border: 1px solid #CCCCCC;
	font-size: 100%;
	margin-bottom: 5px;
	width: 100%;
	display: block;
}

/* This little hack sets the panel width to 'auto' only for Firefox, because 100% stretches it off to the right in Firefox */
div.panel[class] { width: auto; }

div.panelHeading {
	font-size: 120%;
	background-color: #838A92;
	color: #FFFFFF;
	padding: 4px;
	font-weight: normal;
	vertical-align: center;
	white-space: nowrap;
	font-family: Trebuchet MS, Arial, Helvetica, Sans Serif;
	display: block;
}

div.panelSubHeading {
	font-size: 110%;
	background-color: #B6BABE;
	color: #FFFFFF;
	padding: 4px;
	font-weight: normal;
	vertical-align: center;
	white-space: nowrap;
	font-family: Trebuchet MS, Arial, Helvetica, Sans Serif;
	border-bottom: #838A92 2px solid;
	display: block;
}

div.panelNotes {
	font-size: 70%;
	background-color: #D9DBDD;
	color: #000000;
	padding: 8px;
	line-height: 150%;
	display: block;
}

div.panelBody {
	background-color: #FFFFFF;
	color: #000000;
	padding: 0px;
	font-size: 80%;
	display: block;
}

td.panelNotes {
	font-size: 70%;
}


/*
# Table lists
*/
td.listTableHead {
	background-color: #F0EFE6;
	color: #000000;
	border-bottom: #000000 1px solid;
	font-family: Arial, Helvetica, Sans;
	font-size: 80%;
	padding: 5px;
}

td.listTableHead input.button { font-size: 100%; }
td.listTableHead select.select { font-size: 100%; }

td.listColumnHead {
	background-color: #DDDAC6;
	color: #000000;
	border-bottom: #000000 1px solid;
	border-left: #F0EFE6 1px solid;
	border-right: #BDB891 1px solid;
	font-family: Arial, Helvetica, Sans;
	font-size: 70%;
	cursor: default;
	/*height: auto;*/
}

a.listColumnHead:link, a.listColumnHead:active, a.listColumnHead:hover,
a.listColumnHead:visited, a.listColumnHead:visited:hover {
	width: 100%;
	height: 100%;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 3px;
	background-color: #DDDAC6;
	color: #000000;
	text-decoration: none;
	font-family: Arial, Helvetica, Sans;
	font-size: 100%;
	display: table-caption;	/* This forces the table cell that contains this link to expand it's height to accomodate this link */
}

a.listColumnHead:hover, a.listColumnHead:visited:hover {
	background-color: #D1CDB1;
	color: #000000;
	text-decoration: none;
}

tr.listRowA {
	background-color: #FFFFFF;
	padding-top: 3px;
	padding-bottom: 3px;
	line-height: 115%;
}

tr.listRowB {
	background-color: #F0F0F0;
	padding-top: 3px;
	padding-bottom: 3px;
	line-height: 115%;
}

tr.listRowA:hover, tr.listRowB:hover {
	background-color: #DDE4E6;
}

tr.listRowHilite {
	background-color: #CCFF00;
	padding-top: 3px;
	line-height: 115%;
}

td.listCell {
	padding-left: 4px;
	font-size: 70%;
}
td.listCell[class] {
	padding-top: 3px;
	padding-bottom: 3px;
}

td.listTableFooter {
	border-top: #666666 1px solid;
	padding: 5px;
	font-size: 80%;
}

td.listTableFooter select.select,
td.listTableFooter input.text {
	margin-bottom: 3px;
}

td.listTableFooter input.button {
	font-size: 100%;
}


/*
# Form Fields & Elements
*/
form {
	margin: 0px;
}

td.formFieldTitle {
	width: 160px;
	background-color: #EFEFEF;
	vertical-align: top;
	padding: 3px;
	padding-top: 6px;
	font-size: 70%;
}

div.formFieldTitle_notes {
	width: 158px;
	font-style: normal;
	background-color: #F9F9F9;
	padding: 2px;
	border-top: #999999 1px solid;
	margin-top: 5px;
}

td.formFieldValue {
	vertical-align: top;
	padding-left: 3px;
	font-size: 70%;
}

td.formFieldValue input.button {
	font-size: 100%;
}

input.button {
	font-size: 100%;
	font-family: Trebuchet MS, Arial, Helvetica;
	font-weight: normal;
	padding: 0px;
	padding-left: 3px;
	padding-right: 3px;
	margin: 2px;
	border: #666666 1px solid;
	border-left: #CCCCCC 1px solid;
	border-top: #CCCCCC 1px solid;
	/* width: 50px; */
	overflow: visible;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

input.help {
	background-color: #A9CCD8;
}

div.panelNotes input.button {
	font-size: 100%;
	background-color: #ECEDD8;
	border: #000000 1px solid;
}

input.buttonNotes {
	font-size: 85%;
}

input.buttonHeading {
	font-size: 70%;
	margin: 0px;
	margin-bottom: -1px;
}

input.buttonSmall {
	font-size: 85%;
}

input.text, input.password, input.file {
	width: 150px;
	margin: 0px;
	padding: 0px;
}

input.checkbox {
	margin-top: 0px;
	padding-top: 0px;
	margin-left: -4px;
	margin-right: -4px;
}

textarea.textarea {
	width: 100%;
	height: 100px;
	font-size: 100%;
	font-family: Arial, Helvetica, Sans;
}

select.select {
	font-size: 100%;
}


/*
# Links
*/
a.help_small:link, a.help_small:active,
a.help_small:hover, a.help_small:visited, a.help_small:visited:hover {
	background-color: #006699;
	font-size: 75%;
	font-weight: normal;
	font-family: Verdana, Arial, Helvetica, "Time New Roman";
	color: #FFFFFF;
	padding: 1px 3px 1px 3px;
	border: #FFFFFF 1px solid;
	border-right: #666666 1px solid;
	border-bottom: #666666 1px solid;
	text-decoration: none;
}

a.help_small:hover, a.help_small:visited:hover {
	background-color: #996600;
}

/*
# Dividers
# Border around <hr/> can't be removed in IE :( so unfortunately
# we have to wrap the <hr/> in a DIV.
*/
div.divider_dot1 hr {
	display:none;
}
div.divider_dot1 {
	background: transparent url('/core/skins/_blank/images/divider_dot1.gif') repeat-x center center; 
	height: 6px;
}