/*
	common.css
	----------
	defines rules for common elements used throughout site

*/

/* set default properties on body */
BODY {
	margin: 0;
	padding: 0;
	background: #D9D9CA url(../images/bg.body.gif) 0 0 repeat-x;
	font-size: 75%;
	color: #333;
}
/* set all headers to same size and give them a standard line-height to 
   make styling them easier
*/
H1, H2, H3, H4, H5, H6 {
	font-size: 100%;
	line-height: 1;
}
/* default link styles */
A {
	text-decoration: none;
}
A:hover {
	text-decoration: underline;
}
/* remove all HRs from display, as we just want them to appear when no CSS is around */
HR.Separator {
	display: block;
	height: 0;
	border: none;
	border-top: 1px solid #CCC;
	margin: 1em 0;
}
/* remove borders and margin/padding from FIELDSETs so we can use them as 'clear' wrappers */
FIELDSET {
	margin: 0;
	border: none;
	padding: 0;
}
/* LEGENDs don't accept styles consistently across all browsers, 
   so let's move them off-page and just use them for structure.
   we'll probably use Hx elements for titling of FIELDSETs
*/
LEGEND {
	margin: 0;
	padding: 0;
	position: absolute;
	top: -9999px;
	left: -9999px;
}
LEGEND {
	display: none;
} /* NOTE: hiding legends by default as FF has problem WRT absolute positioning the element offscreen */
/* resetting font-size here to prevent widgets from being too large/small */
SELECT, BUTTON, INPUT.FileInput {
	font-size: 100%;
}
/* ======================================================================== */



/* -- BEGIN: tables ------------------------------------------------------- */

/* LayoutTables are used in places where CSS can't accomplish what we need it to. */
.LayoutTable {
	width: 100%;
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
	clear: both;
} /* TODO: add bottom margin? */
.LayoutTable TD {
	vertical-align: top;
}
/* secondary class for LayoutTables. sometimes, we don't want 100% wide LayoutTables */
.NoStretch {
	width: auto;
}
/* FormTables are used for LABEL/INPUT pairs, with LABELs in THs and INPUT/SELECT/other stuff in TDs */
.FormTable {
	width: 100%;
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
	clear: both;
} /* TODO: add bottom margin? */
.FormTable TD, .FormTable TH {
	padding: 4px 0 !important;
	line-height: normal;
}
.FormTable TH {
	font-weight: normal;
	text-align: right !important;
	padding: 8px .5em 3px 0 !important;
	vertical-align: top;
}
.FormTable THEAD TH {
	text-align: left;
	border-bottom: 1px solid #081E3F;
}
.FormTable TD .Inputs, .FormTable TD .FieldValue {
	min-height: 14px;
	padding-top: 4px;
}
.FormTable TD .FieldValue {
	font-weight: bold;
}
.FormTable LABEL, .FormTable .Label {
}
/* DataTables hold tabular data. this is the detault style. we'll subclass this as necessary later on */
.DataTable {
	width: 100%;
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
	clear: both;
	margin-bottom: 1em;
}
.DataTable TH, .DataTable TD {
	padding: .5em 5px;
	text-align: left;
	line-height: normal;
}
.DataTable THEAD TH {
	border-bottom: 1px solid #BBB;
	vertical-align: bottom;
	background: #EEE;
}
.DataTable TFOOT TD {
	border-top: 1px solid #BBB;
	vertical-align: bottom;
	font-weight: bold;
}
/* remove left/right padding when a LayoutTable is used inside a Listing */
.Listing .LayoutTable TD {
	padding-left: 0;
	padding-right: 0;
}
/* --------------------------------------------------------- END: tables -- */


/* -- BEGIN: forms -------------------------------------------------------- */

/* wraps a single field and its label */
DIV.Field {
	margin: .25em 0 1em;
}
DIV.Field P {
	margin-bottom: .25em;
}
/* wraps "submit"-type buttons and cancel, etc. links */
DIV.FormAction {
}
DIV.FormAction INPUT.Button {
}
/* wraps things that control elements of the form. ex: select all/none (checkboxes) */
DIV.FormControls {
}
INPUT.TextInput {
	font-size: 100%;
} /* for standard text inputs */
INPUT.CheckboxInput {
} /* for checkboxes */
INPUT.RadioInput {
} /* for radio buttons */
SELECT.SelectInput {
} /* for pulldown menus and multi-selects */
TEXTAREA.TextAreaInput {
	width: 99%;
} /* width is not 100%, because TEXTAREAs have borders and padding by default */
/* used in conjuction w/ JS to show the title attribute inside the INPUT, or SELECT */
.ShowTitle {
}
/* used in conjunction w/ .ShowTitle */
.Disabled {
	color: #999;
}
/* denotes a required form field, used on the INPUT/SELECT element */
.Required {
}
/* usualy goes around the asterisk to mark a field as required */
.RequiredMark {
	color: #C00;
}
LABEL.Invisible {
	display: block;
	position: absolute;
	top: -10000px;
	left: -10000px;
}
.HelpText {
	color: #999;
	font-style: italic;
}
/* ---------------------------------------------------------- END: forms -- */


/* -- BEGIN: lists -------------------------------------------------------- */

/* for navigation that "pounds down". used on UL and maybe OL */
.PoundDownNav {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}
.PoundDownNav LI {
	margin: 0 0 .5em;
	padding: 0 0 0 12px;
	background: url(./images/icon.arrow.dn.gif) 0 .6em no-repeat;
}
/* for radio buttons and checkboxes. used on UL and maybe OL */
.Inputs {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
	line-height: 1;
}
.Inputs LI {
	margin: 0 0 .5em;
	padding: 0 0 0 2em;
	text-indent: -2em;
}
/* displays a simple list as horizontal. used on UL and maybe OL */
.HorizList {
	margin: 0;
	padding: 0;
	list-style: none;
}
.HorizList LI {
	display: inline;
	margin: 0;
	padding: 0 1em 0 0;
}
/* a "standard" smaller bullet. used on UL and maybe OL */
.DotBullet {
	margin: 0 0 1em;
	padding: 0 0 0 10px;
	list-style: none;
}
.DotBullet LI {
	padding: 0 0 0 8px;
	background: url(./images/icon.bullet.gif) 0 .6em no-repeat;
}
* HTML .DotBullet LI {
	background-position: 0 .7em;
} /* stupid IE6/win */
*:first-child + HTML .DotBullet LI {
	background-position: 0 .7em;
} /* stupid IE7/win */
/* for when no bullet is desired */
.NoBullet {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}
.NoBullet LI {
	margin-bottom: 1em;
}
/* for a list of images */
.ImageList {
	margin: 0 0 1em 0;
	padding: 0;
	list-style: none;
}
.ImageList LI {
	margin: 0 0 10px;
	padding: 0;
}
.ImageList LI IMG {
	display: block;
}
/* lists of links (DTs) with descriptions (DDs) */
DL.LinkList {
}
DL.LinkList DT {
}
DL.LinkList DD {
	margin-bottom: 1em;
}
OL UL {
	padding-left: 2em;
}
/* ---------------------------------------------------------- END: lists -- */


/* images */
.Image, .Picture {
} /* content images */
.Photo {
} /* photos */
.Logo {
} /* logos */
.Icon, /* icon-like images */ .Button {
	vertical-align: middle;
} /* button-like images */
.SortIndicator {
} /* the up/down arrows in THs inside DataTables */
/* links */
.Link {
	cursor: pointer;
}
.LinkAction {
	white-space: nowrap;
	font-weight: bold;
}
.LinkMore { /*white-space: nowrap;*/
	padding-right: 12px;
	text-decoration: none !important;
	font-weight: bold;
	zoom: 1;
}
.LinkMore:hover {
	text-decoration: underline !important;
}
.LinkBack {
	margin-bottom: 1.5em;
	line-height: 1;
}
.LinkBack A {
	color: inherit;
	text-decoration: none !important;
	padding-left: 10px;
	background: url(/images/icon.arrow.5C5C5C.lt.gif) 0 .2em no-repeat;
}
* HTML .LinkBack A {
	color: #555;
	background-position: 0 .4em;
}
*:first-child+HTML .LinkBack A {
	color: #555;
	background-position: 0 .4em;
}
.LinkNext {
	padding-right: 8px;
	background: url(/images/icon.arrow.5C5C5C.rt.gif) 100% .2em no-repeat;
}
.LinkPrev {
	padding-left: 8px;
	background: url(/images/icon.arrow.5C5C5C.lt.gif) 0 .2em no-repeat;
}
* HTML .LinkNext {
	background-position: 100% .4em;
}
* HTML .LinkPrev {
	background-position: 0 .4em;
}
*:first-child+HTML .LinkNext {
	background-position: 100% .4em;
}
*:first-child+HTML .LinkPrev {
	background-position: 0 .4em;
}
.LinkDelete {
	color: #C00;
}
.LinkClose {
	text-align: right;
}
/* promos */
.Promo {
	border: 1px solid #CCC;
	font-size: 100%;
	line-height: 1.5em;
	width: 150px;
	margin: 1em auto;
	padding: 60px 0 10px;
}
.Promo P {
	margin-bottom: .5em;
}
.Promo .LinkMore {
	color: #AF7402;
	background: url(../images/bg.arrow-orange.gif) right center no-repeat;
}
.Column .Promo {
	background: #FFF url(../images/bg.promo-newsletter.white.gif) 4px 4px no-repeat;
}
#SideColumn .Promo {
	background: #FFF url(../images/bg.promo-newsletter.white.gif) 4px 4px no-repeat;
}
#SideColumn .Promo .LinkMore {
	background: none;
}
/* abstract classes */
.Item {
}
.Content {
}
.Active {
}
.Hover {
}
.Selected {
}
.Deleted {
}
.Marked {
}
.hidden {
	display: none;
}
/* for lists */
.Even {
	background: #FFF;
}
.Odd {
	background: #F9F9FC;
	background: #F3F3F6;
}
/* used for placeholder messages in UIs ("No articles exist in the selected category") */
P.Placeholder {
	font-style: italic;
	color: #999;
}
TD P.Placeholder {
	text-align: center;
	margin: 1em 0;
}
/* message boxes */
DIV.Message {
	border: 1px solid #CCC;
	padding: 10px;
	margin: 20px 0;
}
DIV.Message P {
	margin: 0;
}
.Message.Error {
	color: #C00;
	border-color: #C00;
}
.Message.Success {
	color: #0C0;
	border-color: #0C0;
}
.Message.Warning {
	color: yellow;
	border-color: yellow;
}
/* for AJAX forms */
.ProgressMessage {
	text-align: center;
	margin: 1em 0;
}
/* simple inline navigation */
P.InlineNav {
}
P.InlineNav SPAN {
	font-weight: bold;
}
P.InlineNav A {
}
/* -- BEGIN: fixes -------------------------------------------------------- */

/* used for explicity clearing floated elements. this is an empty DIV. */
.ClearFix {
	clear: both;
	height: 0;
	font-size: 0;
}
.HorizRule {
	clear: both;
	height: 0;
	font-size: 0;
	border-bottom: 1px solid #E5E5E5;
	line-height: 0;
}
/* used as a "double wrapping" around elements.
   used when design dictates something a single DIV cannot accomplish.
   meant to prevent generic selectors like "DIV DIV".
*/
.BoxFix {
}
/* used as a hook to capping off an element at the top/bottom/left/right.
   no content exists in a .Cap, so we can set the font-size to zero without worry.
*/
.Cap {
	font-size: 0;
}
/* ---------------------------------------------------------- END: fixed -- */



/* used for us developers to put notes in pages so people don't freak out about missing elements */
.DeveloperNote {
	border: 1px solid red;
	padding: 4px;
	margin: 5px 0;
	clear: both;
}
td {
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
}
.addressTable {
	font-size: 12px;
	border: 0px solid #CCC !important;
	margin-bottom: 20px;
}
#addressEntry .textinput {
	border: 1px solid #999;
}
#addressEntry #submitTD {
	text-align: center;
}
.fieldnameCol {
	width: 110px;	
}
.fieldnameCol, .fieldnameColLong, #personalOcctitle .editMode .longInput  {
	text-align: right !important
}
#personalOcctitle {
	width: 100%;
}
#personalOcctitle tr td {
	padding-right: 0;
}
#personalOcctitle .longInput, #personalOcctitle .longInput input {
	width: 300px;
	margin-left: 5px;
}
.editModeFalse .addressFieldTR {
	line-height: 30px !important;
	font-size: 14px;
	font-weight: bold;
	color: #AF7402;
}
.addressOtherTxbx {
	width: 450px;
	height: 80px;
}
#addressEntry .longInputbox, #addressEntry .textinput, .longInputbox {
	width: 200px;
}
#addressEntry .longInputTD {
	width: 150px;
}
.formattedAddress {
	margin-bottom: 20px;
}
.addressOtherTxbx {
	margin-bottom: 20px;
}
.errorMsg {
	display: block;
}
#addressEntry, .addressTable {
	width: 750px;
}
.errorMsg, .errorNoBR, .successMsg {
	font-size: 12px;
	color: #C00;
	font-style: italic;
}
.successMsg {
	color: green;
	font-style: normal;
}
.errorMsg.noCR {
	display: inline;
}
.addressTable label.error {
	display: none !important;
}
textarea.error {
	background-color: #DE85B1;
}
#editAddressLink {
	margin-bottom: 20px;
	display: block;
}
.WarningMsg {
	font-style: italic;
	font-weight: normal;
	color: #F00;
}
.requiredField {
	color: #AF7402;
	font-weight: bold;
}
#nonNAinstruct {
	display: none;
}
#personalInfoForm .fieldnameCol {
	width: 180px;
}
table#personalInfoForm td {
	vertical-align: middle;
}
#personalInfoForm.nonEditMode .fieldnameCol, .fieldnameColLong {
	color: #000;
	font-weight: normal;
}
.ieFloatfix {
	float: right;
}
#SideNav li.checkMarkItem a {
	background: url(../images/checkmark.png) right center no-repeat;

}
#PDFuploadBx {
	background: url(/images/spinner.gif) -2017px 0 no-repeat;
}

#loadSpinner, .loadSpinner {
	background: url(/images/spinner.gif) 17px 17px no-repeat;
	padding-left: 40px;
	font-style: italic;
	height: 50px;
	line-height: 50px;
}
.noScriptError {
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	color: #D00;	
}
.hidden {
	display: none;	
}
.regTxt {
	font-weight: normal;
	font-style: normal;
}
.exampleInput {
	color: #666;
	font-style: italic;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}
.noJS {
	font-weight: bold;
	color: #C00;
}

@font-face {
	font-family: "Arial Bold";
	src: local(Arial);
}