/* designed + coded by Jeremy Mulenex for MasterCard International */

/* begin common css, Use for default page elements */
body, div, p, h1, h2, h3, h4, form, ul, ol { /* all of these elements margin and padding are set to zero so that they may be set manually when needed*/
	margin: 0px;
	padding: 0px;
	}
body { /* set default font size and color.*/
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	background: #000000;
}

a {
	color: #666633;
}
a.action {
	background:  url(/images/common/content/icon_arrow_yellow.gif) no-repeat 0px 3px;
	padding-left: 15px;
	display: block;
	margin-top: 4px;
}
br {clear:both}
/* end common css */

/* begin header css */
#header {color: #999999;}
#header a {color: #fff; font-size: 10px; line-height: 16px; font-family: Verdana, sans-serif; text-decoration: underline }
#header select {color: #000; font-size: 11px }
/* end header css */


/* start MENU css */
#menu_container { /* this div holds the menu in place keeping the width at 200px */
 width: 200px;
 padding-top: 15px;
}
#menu { /* required to hold the menu sets left margin at 25px */
 margin-left: 10px;
 font: 12px Verdana, Arial, Helvetica, sans-serif;
}
#menu ul, li { /* makes sure that all margin and padding begins at 0px */
 padding: 0px;
 margin: 0px;
}
#menu ul { /* removes the bullets from the menu so we can insert fake bullets, more on that later */
 list-style: none;
}
#menu li{ /* Images are used to represent bullets, this allows us to control the space between the bullet image and text, these item are used to set the default property's for and li in the menu */
 background:  url("/images/common/nav/icon_arrow_yellow.gif") no-repeat 0px 4px; /* default bullet 'mn1Normal' */
 padding: 0px 0px 0px 15px; /* sets the default padding for all li */
 margin: 6px 0px; /* default top and bottom margins for all li's */
 line-height: 16px; /* default line height */
}
#menu li a { /* set default margin for all links in the menu */
	margin: 0px;
	padding: 0px;
}
#menu ul li { /* this sets the default property for the li for the first tier of the menu and will not affect the others below it */
 line-height: 16px;
 font-size: 12px;

}
#menu ul ul li { /* this sets the default property for the li's for the second level and all it's children, (sub menus ) */
 font-size: 11px;
 line-height: 15px;

}

/* begin menu specific css */
#menu li.mn1Selected { /* sets the bullet for the selected state, controls bullet spacing */
 background:  url("/images/common/nav/icon_arrow_active.gif") no-repeat 0px 6px;
}
#menu li.mn1SelectedWOSub { /* sets the bullet for the selected state, controls bullet spacing */
 background:  url("/images/common/nav/icon_arrow_yellow.gif") no-repeat 0px 4px;
}
#menu li.mn1Active { /* sets the bullet image for the active state, controls bullet spacing */
 background:  url("/images/common/nav/icon_arrow_active.gif") no-repeat 0px 6px;
}
#menu li.mn2Normal, #menu li.mn3Normal, #menu li.mn4Normal { /* sets bullet and spacing for the normal state */
 background:  url("/images/common/nav/icon_arrowsm_yellow.gif") no-repeat 0px 5px;
 padding-left: 9px;
}
#menu li.mn2SelectedWSub, #menu li.mn3SelectedWSub, #menu li.mn4SelectedWSub { /* sets the bullet and spacing for the select state */
 background:  url("/images/common/nav/icon_arrowsm_yellow_down.gif") no-repeat 0px 7px;
 padding-left: 9px;
}
#menu li.mn2Selected, #menu li.mn3Selected, #menu li.mn4Selected { /* sets the bullet and spacing for the select state */
 background:  url("/images/common/nav/icon_arrowsm_yellow.gif") no-repeat 0px 5px;
 padding-left: 9px;
}
#menu li.mn2ActiveWSub, #menu li.mn3ActiveWSub { /* sets the bullet and spacing for the select state */
 background:  url("/images/common/nav/icon_arrowsm_yellow_down.gif") no-repeat 0px 7px;
 padding-left: 9px;
}
#menu li.mn2Active, #menu li.mn3Active, #menu li.mn4Active { /* sets the bullet and spacing for the select state */
 background:  url("/images/common/nav/icon_arrowsm_yellow.gif") no-repeat 0px 5px;
 padding-left: 9px;
}
/* end menu specific css */

#menu ul li.mn1Normal a, #menu ul ul li.mn2Normal a, #menu ul ul ul li.mn3Normal a, #menu ul ul ul ul li.mn4Normal a {color: #666633; text-decoration:underline;} /* sets the link properties for the normal state */
#menu ul li.mn1Active a, #menu ul ul li.mn2Active a, #menu ul ul ul li.mn3Active a, #menu ul ul ul ul li.mn4Active a {color: #666633; text-decoration:underline;} /* sets the link properties for the Active state */
#menu ul ul li.mn2ActiveWSub a, #menu ul ul ul li.mn3ActiveWSub a {color: #666633; text-decoration:underline;} /* sets the link properties for the Active state */
#menu ul li.mn1Selected a, #menu ul li.mn1SelectedWOSub a, #menu ul ul li.mn2Selected a, #menu ul ul ul li.mn3Selected a, #menu ul ul ul ul li.mn4Selected a {color: #FF9900; text-decoration: none;} /* sets the link properties for the Select state */
#menu ul ul li.mn2SelectedWSub a, #menu ul ul ul li.mn3SelectedWSub a {color: #FF9900; text-decoration: none;} /* sets the link properties for the Select state */
#menu li a:hover {color:#FF9900;} /* sets the hover state, currently only works in IE*/


#menu .mnhide {display:none} /* use this class applied to the UL of the list to be hidden, this is used to hide sub menus */
/* end MENU css*/


/* begin content css, use for the content section of the document, includes the #left, #right id's */
/* begin default content css */
#content {
	width: 551px;
}
#content .dottedLine {
	background:  url("/images/common/content/h2_bg.gif") repeat-x;
	height: 10px;
}
#content p {
	margin: 4px 0px 10px;
}

#content h2, #content h3 {
	margin: 4px 0px;
	font-size: 12px;
	font-weight: bold;
}
#content h2 {

}
#content h3 {
	margin-top: 0px;
	margin-bottom: 0px;
}
#content h5 {
	margin-top: 20px;
	font-size: 9px;
	font-weight: normal;
}
#content a:link, #hmContent a:link {
	color: #666633;
}
#content a:visited, #hmContent a:visited {
	color: #999;
}
#content a:hover, #hmContent a:hover {
	color: #FF9900;
}
#content a:active, #hmContent a:active  {
	color: #FF9900;
	text-decoration: none;
}
#content ol {
	padding-top: 4px;
	padding-bottom: 4px;
	margin-left: 1em;
	padding-left: 18px;
}
#content ul {
	padding-top: 4px;
	padding-bottom: 4px;
	margin-left: 1em;
	padding-left: 10px;
}

#content img.header {
	background:  url("/images/common/content/icon_arrow_yellow.gif") no-repeat 0px 4px;
	padding-left: 15px;
}
#content img.titleImage {
	border-top: 1px solid #cccc99;
	border-bottom: 1px solid #cccc99;
	margin-bottom: 10px;
}
#content .alert {
	color: #CC0000;
 	
}
/* end default content css */

/* begin left css */
/* commented out as float/clear causing many cascading issues
#left .section {
	margin-bottom: 20px;
	clear: right;
	float: left;
	width: auto;
}
*/
#left .section {
	margin-bottom: 20px;
	width: auto;
}
#left .section a.action {
	display: block;
}
#left .section form br { clear:both
}
#left img {
	vertical-align: text-top;
	margin: 2px 10px 10px 0px;
	float: left;
}
#left fieldset {
	margin: 15px 0px;
	padding: 0px 0px 10px;
	border: none;
}
#left fieldset p{
	display: block;
	float: left;
	margin: 6px 3px 3px;
	padding: 0px;
	width: auto;
}
#left label {
	text-align:left;
	width:150px;
	float:left;
	padding:0px 2px 2px;
	margin:6px 0 0;
	display: block;
	color: #000000;
	font-size: 10px;
} 
#left select {
	vertical-align: middle;
}
#left input, #left select, #left textarea {
	margin:3px 3px 3px 0px;
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	vertical-align: middle;
}
#left .required {
	float: left;
	width: 10px;
	clear: left;
	color: #CC0000;
	padding-top: 6px;
	margin: 0px;
	font-weight: bold;
}
#left .textfield {
	width:150px;
}
#left .textfieldHalf {
	width:80px;
}

#left .textarea {
	height:165px;
	width:200px;
	clear: right;
}

#left label.radio, #left label.checkbox  {
	text-align:left;
	width: 88%;
	float: left;
	clear: none;
	display: block;
	margin: 4px;
	padding-top: 2px;
}
#left input.radio, #left input.checkbox {
	width:16px;
	float:left;
	margin:3px;
	clear: left;
}
#left .noWrap {
	width: 385px;
	float: left;
	margin-bottom: 6px;
	margin-top: 4px;
}
/* table CSS starts here */

#left table {
	border-top: 1px solid #999966;
	border-bottom: 1px solid #999966;
	margin-top: 15px;
}
#left tr {
	background: url(/images/common/content/h2_bg.gif) repeat-x scroll 0% top; 
	
}
#left tr.first{
	
	background: none;
	
}

#left td {
	padding: 4px 3px;
}
#left td li {
}
#left td.first {
}
#left th {
	color: #666633;
	background: #E8EBD6;
	padding: 4px 3px;
}
#left tr.altRow  {
	background: #F9FAF4 url(/images/common/content/h2_bg.gif) repeat-x scroll 0% top;
}
#left dl{margin:0px 0px 10px;padding:0px}
#left dt{font-weight:bold;padding-top:5px}
#left dd{margin:0px 0px 5px;padding:0px 0px 0px 10px}

/* start DATA table */

#left  table.dataTB {
}
#left  .dataTB tr {
	background: url(none);	/* background:  url("/images/common/content/h2_bg.gif") repeat-x; */
	
}
#left  .dataTB td {
	border-top: 1px solid #cccc99;
	border-left: 1px solid #cccc99;
}
#left  .dataTB td.first {
	border-left: none;
}
#left  .dataTB th {
	border-left: 1px solid #cccc66;
}
#left .dataTB th.first {
	border-left: none;
}

#left .dataTB  tr.selected	 {
	background: #ffffcc;
	
}

#left .dataTB tr.altRow  {
	background: #f9faf4 url(none);
	
}
/* end table CSS */
/* start FAQ CSS */
/*
#left .faq table {
	border: none;
}
#left  .faq tr {
	background: url(none);
	
}
#left .faq td {
	border: none;
	vertical-align: top;
}
#left .faq th {
	border: none;
	font-style: italic;
	padding: 3px;
	vertical-align: top;
	color: #000000;
}

#left .faq tr.altRow  {
	background: #CCCC99 url(none);
	
}
*/
/* end FAQ CSS */
/* end left css */

/* begin right CSS */
#right .highlight {
	background: #f5f5e8;
	width: 162px;
	border-bottom: 1px solid #cccc99;
	padding-bottom: 11px;
	margin: 0px 0px 20px 10px;
	border-top: 1px solid #cccc99;
}
#right .highlight img {
	border-bottom: 1px solid #cccc99;
}
#right .highlight h2 {
	color:#990000;
	border: none;
	padding: 0px 6px;
	background: url(none);
}
#right p {
	padding: 0px 6px;
	
}
/* end right css */
/* end content css */


/* begin footer css */
#footer, #footer td { /* using the TD cause IE 5.5 likes it. */ 
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	color: #999999;
}
#footer p {
	margin: 0px;
	padding: 0px 0px 4px;	
}
#footer a {
	color: #FFFFFF;
}
#footer .fmText { /* controls text field font-size and color, and width */
	color: #000;
	font-size: 11px;
	width: 155px;
}
/* end footer css*/
#hmContent {
	color: #000000;
}
#hmContent h2 {
	font-size: 12px;
	margin-bottom: 4px;
	margin-top: 4px;
}
#hmContent p {
	padding: 0px 6px 0px 10px;
	
}
#hmContent div{
}
#hmContent .row {
	color: #000000;
	width: 768px;
	margin-bottom: 10px;
	clear: both;
	float: left;
}
#hmContent .column {
	float: left;
	width: 182px;
	padding-left: 10px;
}
#hmContent .columnLg {
	float: left;
	width: 372px;
	margin: 0px;
	padding-left: 10px;
}

#hmContent ul{
	margin:0;
	padding:0;
	list-style-type:none;
}
#hmContent ul ul{
}
#hmContent li{
	padding:0px 0px 3px;
}
#hmContent ul a{
	display:block;
	padding:3px 0 0 11px;
	font-weight:bold;
	font-size:11px;
	color:#666633;
	background:url(/images/common/content/icon_arrow_yellow.gif) no-repeat 0px 5px;
}
#hmContent li li{
	margin:0;
	padding:0 0 2px;
	background-image:none;
}
#hmContent li li a{
	font-weight:normal;
	font-size:11px;
	background-image:none;
}
#hmContent a:hover {
	text-decoration: none;
}
#hmContent .subSection {
	clear: both;
	margin: 0px 0px 10px;
	padding: 0px 0px 10px;
}
#hmContent .subSection img {
	border-bottom: 1px solid #cccc99;
	border-top: 1px solid #cccc99;
}
#hmContent .promo p {
	padding: 0px 6px 4px 6px;
	
}
#hmContent .promo {
	background: #f5f5e8;
	border-bottom: 1px solid #cccc99;
	padding-bottom: 11px;
	border-top: 1px solid #cccc99;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
}
#hmContent .promo img {
	border-bottom: 1px solid #cccc99;
	border-top: none;
}
#hmContent .promo h2 {
	color:#990000;
	border: none;
	padding: 0px 6px;
	background: url(none);
}
#hmContent .promo h3 {
	background: url(none);
	font-size: 10px;
	font-weight: normal;
	padding: 5px 6px;
}
#hmContent .promo h3 img {
	float: left;
	clear: both;
	border: none;
	margin: 0px;
	padding: 0px;
}
#hmContent .promo h3  a{
	padding: 0px 6px 10px;
	background: url(none);
	color: #666633;
	display: block;
	float: right;
}
#hmContent .promo h4 {
	font-size: 10px;
	padding: 6px 6px 0px;
}