/* styles extracted from proposed style guide css and modified for localized inclusion into pre-globalnav cardholderservices us_es */
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 background color - modified to set default font color */
	font: 12px Arial, Helvetica, sans-serif;
	background: #000000;
}
br {
	clear: both;
}

/* 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 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/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;
 font-weight: bold;
}
#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: 12px;
 line-height: 15px;
 font-weight: normal;
}

/* begin menu specific css */
#menu li.mn1Selected { /* sets the bullet for the selected state, controls bullet spacing */
 background:  url(../images/common/icon_arrow_grey.gif) no-repeat 0px 6px;
}
#menu li.mn1Active { /* sets the bullet image for the active state, controls bullet spacing */
 background:  url(../images/common/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/icon_arrowsm_yellow.gif) no-repeat 0px 5px;
 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/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/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/icon_arrowsm_yellow.gif) no-repeat 0px 5px;
 padding-left: 9px;
}
#menu li.mn2ActiveWSub, #menu li.mn3ActiveWSub, #menu li.mn4ActiveWSub { /* sets the bullet and spacing for the select state */
 background:  url(../images/common/icon_arrowsm_yellow_down.gif) no-repeat 0px 7px;
 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: #999966; text-decoration:underline;} /* sets the link properties for the Active state */
#menu ul li.mn1Selected a, #menu ul ul li.mn2Selected a, #menu ul ul ul li.mn3Selected a, #menu ul ul ul ul li.mn4Selected a {color: #999966; text-decoration: none;} /* sets the link properties for the Select state */
#menu ul li.mn1SelectedWSub a, #menu ul ul li.mn2SelectedWSub a, #menu ul ul ul li.mn3SelectedWSub a, #menu ul ul ul ul li.mn4SelectedWSub a {color: #999966; text-decoration: none;} /* sets the link properties for the Select state */
#menu li a:hover {color:#000000;} /* 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: 511px;
}
.dottedLine {
	background:  url(../images/common/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: 10px;
}
#content a {
	color: #666633;
}
#content a:hover {
	color: #000;
}
#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: 4px;
}
a.action {
	background:  url(../images/common/content/icon_arrow_yellow.gif) no-repeat 0px 3px;
	padding-left: 15px;
	color: #999966;
	display: block;
	margin-top: 4px;
}
#content img.header {
	background:  url(../images/common/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: #FF0000;
 	
 }
/* end default content css */

/* begin left css */
#left .section {
	margin-bottom:20px;
}
#left img {
	vertical-align: text-top;
	float: left;
	margin: 2px 10px 0px 0px;
}

/* 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/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: #000;
	background: #E8EBD6;
	padding: 4px 6px 6px;
	text-align: left;
	vertical-align: top;
}
	#left th a.action {float: right; font-weight: normal; clear: both; width: 60px; font-size: 11px;}
	
#left tr.altRow  {
	background: #F9FAF4 url(../images/common/h2_bg.gif) repeat-x scroll 0% top;
	
}

/* 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;
	font-size: 11px;
}
/* end right css */
/* end content css */

/* begin footer css */
#footer, #footer td, #footer p { /* using the TD cause IE 5.5 likes it. */ 
	font: 10px Arial, Helvetica, sans-serif;
	color: #999999;
}
#footer p {
	margin: 0px;
	padding: 0px 0px 4px;	
}
#footer a {
	font: 10px Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}
#footer .fmText { /* controls text field font-size and color, and width */
	color: #000;
	font-size: 11px;
	width: 155px;
}
/* end footer css*/

/* custom mods for cardholderservices us_es usage */
body{color:#000;}
img,table{border:0;}
a,p,td{font-family:Arial,Helvetica,sans-serif;}
p,td{font-size:12px;line-height:15px;}
.bracketTop{width:17px;height:7px;line-height:0;vertical-align:bottom;}
.bracketMid{width:17px;background:transparent url(../images/common/content/bracket_bg.gif) repeat-y;}
.bracketBot td{height:5px;line-height:0;vertical-align:top;}
#content ol.lcase{list-style-type:lower-alpha;}
#content ol ul{list-style-type:disc;}
#content select{margin:3px;font:12px Arial,Helvetica,sans-serif;color:#000000;}
#content input.image{border:0;margin-top:5px;}
#content .legal, #content .footnote{font-size:11px;}
#left .sectionlink{padding-left:14px;background:transparent url(../images/common/icon_arrow_yellow.gif) no-repeat 0 4px;}
#left .sectionlink h3{line-height:18px;}
#left .sectionlink h3 img{float:none;}
#right .floatRight{float:right;}
#right select{margin:0 0 5px;width:150px;}

#left .alignLeft{text-align:left;}
#left td.alignCenter{text-align:center;}
#left td.alignCenter img{float:none;}
#left table.footnotes{border:0;margin:0;}
#left table.footnotes tr{background:transparent none;height:auto;vertical-align:top;}
#left table.footnotes td{padding-right:10px;font-size:11px;}

#left div.faqSection{clear:both;margin-bottom:20px;}
#left div.faqSection table{width:100%;}
#left div.faqSection div.faqQuestion, div.faqSection div.faqAnswer, #left div.faqSection div.faqPadded{padding:0 0 10px 25px;}
#left div.faqSection div.faqQuestion, div.faqSection div.faqAnswer{padding-top:8px;border-top:1px solid #E5E5CC;background:transparent none no-repeat 3px 10px;}
#left div.faqSection div.faqQuestion{background-color:#FAFAF5;background-image:url(../images/common/icon_faq_question.gif);}
#left div.faqSection div.faqQuestion a, div.faqSection div.faqQuestion a:hover{margin:0;padding:0;color:#000;text-decoration:none;}
#left div.faqSection div.faqAnswer{background-image:url(../images/common/icon_faq_answer.gif);}
#left div.faqSection div.faqAnswer p{margin-top:0;padding-top:0;}