/*******************************************************************************
 * theme.css
 *
 * The theme.css file contains all colors and borders and generic styles for 
 * the site.  This is the standard theme for all CMSe sites.  Please be careful
 * when changing this file that it can potentially affect all cmse pages.  
 *
 * Each instance should have its own CSS file that would either replace this file
 * as a whole or override any style that it wants to change.  Please keep this file
 * to color, font and border based styles.
 *
 * This is currently the base theme file used in the original cmse.  There is a 
 * new theme ontop of this called themeFIS.css.  Theoretically we could take that 
 * put it in here but it is show casing how the theme can work if we need to 
 * instance off cmse eventually.  I would not update this file unless fixing an issue.
 *******************************************************************************/
/*******************************************************************************
 * Core - Layout
 *
 * These styles are core styles for the layout, these should contain any potential
 * overrides or additions to the layout.css plus main fonts or colors.
 *******************************************************************************/
body {
	background: #FFF; /* Just incase there is some sort of overflow color it white */
	color: #000; /* need to set the default font color also 
					 * Please note that this is the default font color for the site
					 * Some styles or sections or pages might required a different font
					 * color and that can be adjusted accordingly below */
		/* I've seen several comments that setting the base font size to 100.1%
	 * fixes some browser bugs. Which bugs? I don't know. I believe it's
	 * to fix some rounding-error bugs that some browsers (Mozilla) are
	 * prone to. It doesn't hurt anything, so I keep it here.
	 */
	font-size: 100.1%; /* Leave this, this will control over all font size when being changed */
}
#page-container {
  	background: #FFF; /* this is the background color for the main container that will hold all of your pages */
  	border-color: #AAAAAA;
	font-size: 100%; /* Forcing 100% font here on the page-container as well. This can come in handy in the futre
						if we ever have dynmaic font size chaging  on the body. */
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
/* This has been added incase the last menu option has a submenu,
 * this should give it enough room to display, increase as necessary.
   Note: although I think the browser should auto adjust, look into this */
#menu-column {
  	padding-bottom: 3em;
}
/**
 * Background for Center Column
 */
#inner-column-container {
  	background: #ffffff;
	border-right: 0em solid #999;
  	border-left: 0em solid #999;
}
/**
 * Background for Left Column
 */
#columns-container {
  	background: #FFF;
}
/**
 * Background for Right Column
 */
#outer-column-container {
  	background: #FFF;
  	border-color: #FFF;
}
#main-column,
#third-column {
  	padding-top: 2px;
}
/* This is a fix for some text that is getting cut off.*/
#columns-container p {
  	line-height: 1.5;
}
#main-column div.inside {
	margin-bottom: 5px;
	margin-right: 10px; /* This gives us a little space on the right so 
						   the main content isn't against the scroll bar. 
						   The non menu layouts will override this with the
						   same style but that is no big deal.  Going to
						   leave it in those css in case this one needs to or
						   is wanted to be removed.  We don't want to break 
						   other functionality. */
}
#third-column div.inside,
#menu-column div.inside {
  	margin: 0 5px 5px 0px;
}
#footer {
	border-top: 0px solid #999;
  	padding: 2px 0;
}
#footer p {
  	margin: 0 0 5px 0;
  	text-align: center;
}
#main-column {
	margin-top: 1em;	
}
#top-menu .inside { /* Adding this to the inside tag and not the main tag, causes an issue in IE6 with hover and padding */
	padding-top: 0.3em;
	
}
/*******************************************************************************
 * End Core - Layout
 *******************************************************************************/
 /*******************************************************************************
 * End Core - Layout
 *******************************************************************************/
/*******************************************************************************
* General presentation styles
*******************************************************************************/
/* This is for the return link*/
#search-return {
	margin-bottom: 20px;
}
/*
 * Change these to up-arrow, down-arrow or something so they can be more generic
 * and used else where.
 */
.up {
	background-image: url(/images/banner-arrow_up.gif);
	background-repeat: no-repeat;
	background-position: center left;
}
.down {
	background-image: url(/images/banner-arrow.gif);
	background-repeat: no-repeat;
	background-position: center left;
}
/*
 * Any place you need to use a container or wrap some piece of text for input 
 * or anything that needs to be "contained" from something else, add this class.
 * Keeps things visually consistent. 
 */
.container {
	border: solid 1px #8A8A8A;
}
/*
 * This class is used for any place you want to put a static message on the screen
 * and keep things contained from other things.  Use this class to keep things 
 * consistent.  You can use the class above with this one to add the border.
 */
.service-message {
	padding: 5px;
	background-color: #DFEEFF;
}
.service-message p {
	font-size: 0.75em;
}
input {
	color: #000;
}
/* All buttons in CMSe should have the button class attached */
input.button {
	font-size: 0.75em; 
	margin-right: 0.3em;
	line-height: 1.5;
}
/* This is used for all text that is not a label that is usually
   static data that cannot be changed or updated. This should be
   used for anything that is data or is/was user entered. */
.static-text {
	color: #0000ff;;
}
h1, 
h2,
h3,
h4,
h5,
h6,
caption {
	color: #000;
} 
/* This is a class for any generic information text */
.information-text {
	color: #000;
	background-color: #dddddd;
}

.required-label {
	color: #ff0000;
}
.warning-text {
	color: #0053A5;
}
a.link {
	font-size: 0.8em;	
	text-decoration: underline;
	color: blue;
}
a.link:visited {
	color: #000;
}
a.link:hover {
	text-decoration: none;
}
table tr.title{
	background-color: #dddddd; 
}
/*******************************************************************************
 * Banner
 * The banner consists of the Metavante Logo and any general links throughout the
 * site.  This is not the traditional CMSe Banner anymore, that is called cardholder
 * information.
 *******************************************************************************/
/*******************************************************************************
 * Banner : Structure
 *
 *******************************************************************************/
#banner div.logo {
	width: 100%;
	height: 33px;
	background: url(/images/mvnt_logo_white.jpg);
	background-repeat: no-repeat;
}
#banner div.inside {
	padding: 1em;
}
/*******************************************************************************
 * Banner : Presentation
 *
 *******************************************************************************/
#banner {
	background-color: #002D62;
	vertical-align: middle;
	border-bottom: solid 1px #BCCADC;
}
#banner #banner-title {
	line-height: 2.5;
}
#banner #banner-title h1 {
	color: #FFF;
	margin: 0 0 0 275px;
}
#banner div.logo {
	color: #FFF;
	font-weight: bold;
}
#banner #top-links {
	text-align: right;
	font-size: 0.75em;
	color: #FFF;
}
/*******************************************************************************
 * Information-Banner
 *
 * The Information-Banner is a set of structures that allow another banner per 
 * page.  This can be used to hold a grouping of information, such as for the
 * cardholder pages this can be used to store cardholder information that is
 * always visible when a cardholer page is open.
 *******************************************************************************/
/*******************************************************************************
 * Information-Banner : Structure
 *
 *******************************************************************************/
#information-banner {
	background-color: #FFF;
}
#information-banner div.banner-container {
	float: left;
	width: 100%;
}
#information-banner div.banner-container .static-data {
	float: none;
	width: 100%;
}
#information-banner div.banner-container .static-data .static-text, 
#information-banner div.banner-container .static-data .label {
	float: none;
	padding: 0;
}

#information-banner div.banner-container table {	
	width: 100%; 
	margin-bottom: 5px;
}

#information-banner div.banner-container td,
#information-banner div.banner-container th {	
	padding: 0;
	vertical-align: top;
}
/*******************************************************************************
 * Cardholder Information-Banner : Structure
 *
 * These styles are for the cardholder specific information-banner.  Please note
 * that the structure in here is justified because it is not for the entire 
 * site layout but how cmse renders the information banner for the cardholder.
 * It is put in here so it could be overridden more easily. 
 *******************************************************************************/
#information-banner div.banner-container table.data-table col.cardholder-banner-col1 {
	width: 11%;	
}
#information-banner div.banner-container table.data-table col.cardholder-banner-col2 {
	width: 21%;	
}
#information-banner div.banner-container table.data-table col.cardholder-banner-col3 {
	width: 10%;	
}
#information-banner div.banner-container table.data-table col.cardholder-banner-col4 {
	width: 20%;	
}
#information-banner div.banner-container table.data-table col.cardholder-banner-col5 {
	width: 15%;	
}
#information-banner div.banner-container table.data-table col.cardholder-banner-col6 {
	width: 19%;	
}
#information-banner div.banner-container div#basic-cardholder,
#information-banner div.banner-container div#card-information,
#information-banner div.banner-container div#card-verification {
	/* This is probably not the best method and could get cleaned up 
	 * later.  Putting width of 99% on here so we can at least get some
	 * margin in on the left and a little bit on the right.  Because
	 * the parent is floated and takes up 100% of the width and we don't
	 * want to push these out of the parent but havign 100% width and then
	 * adding padding or margin we need to lower the width.  There is probably
	 * better way to do this.  We CANNOT remove the width because the jQuery
	 * that moves these up and down needs a width for the sliding to work
	 * appropriate, if there is no width in some browsers it adds a lot of 
	 * extra white space. */
	width: 99%;
	margin-left: 0.5em;
}
#information-banner div.banner-container div#card-information,
#information-banner div.banner-container div#card-verification {
	display: none;	
}
#information-banner div.banner-container div.banner-links {
	float: right;
	width: 20em;
	margin-bottom: 10px;
	text-align: right;
}
#information-banner div.banner-container div.banner-links a {
	padding-left: 15px;
}
#information-banner div.banner-container h3,
#information-banner div.banner-container caption {
	padding: 5px 0;
	margin: 0;
}
/*******************************************************************************
 * Information-Banner : Presentation
 *
 * These are generic styles for the information banner
 *******************************************************************************/
#information-banner {
	/*margin-bottom: 0.5em;	*/
}

#information-banner,
#information-banner div.banner-container,
#information-banner div.banner-container table {
	background-color: #EEE;
}
#information-banner div.banner-container h3,
#information-banner div.banner-container caption {
	background-color: #DDD;
	font-weight: bold;
}
#information-banner div.banner-container div.banner-links a {
	font-size: 0.75em;
	color: #000;
	text-decoration: underline;
}
#information-banner div.banner-container .static-data .static-text {
	margin: 0 1em 0 1em;	
}
/*******************************************************************************
 * Product Information-Banner : Presentation
 *
 * These styles are for the product specific information-banner
 *******************************************************************************/
#information-banner .banner-container #product-information.static-data {
	width: 99%;
	margin: 0.5em 0 0.5em 0.5em;
}
/*******************************************************************************
 * Menu Presentation
 *******************************************************************************/
/*******************************************************************************
 * PRESENTATION : General
 *
 * This is where the visual presentation of the menu is handled. If you try to
 * alter the borders width or location of placement pay close attention to the
 * notes provided with the existing CSS rules in this section. There are key
 * reasons behind borders and negative margins being placed where they are.
 */

ul.menu {
	
}
ul.menu-ver {
	border-top: solid 1px #fff; /*ditto */
	border: solid 2px #BBB;	
}
ul.menu-ver, ul.menu-ver ul {
	width: 11.5em;	/* sub-menus need a defined width, especially
					   vertical sub-menus. salt to taste. */
}
ul.menu li a {
	padding: 5px 10px 6px;	/* 2px top, 3px bottom always seems to
							   provide the most visually balanced 
							   padding */
	font-size: 0.75em;
	color: #000;
}
ul.menu li a:link,
ul.menu li a:hover,
ul.menu li a:visited,
ul.menu li a:active {
	text-decoration: none;
}
ul.menu li {
	background-color: #EEE;	/* default background color of menu items */
}
ul.menu li:hover,
ul.menu li ul li:hover,
ul.menu li ul li.hover,
ul.menu li.hover {
	background-color: #7BA1D3;	/* background color for parent menu items of
							   the current sub-menu. includes the hover
							   class which is used in the suckerfish hack
							   detailed later in this stylesheet. */
}
ul.menu li a:hover,
ul.menu li:hover a:hover {
	background-color: #0053A5;
	color: #FFF;
}
a.highlightMenu {
	background-color: #FF9F00;
}
/*******************************************************************************
 * PRESENTATION : Expand
 *
 * the bits below implement a graphic to appear on those anchor elements which 
 * have the menu-expand class assigned. this is something you have to do
 * manually on any LI element containing a UL element that is to be a dropdown 
 * menu. there is no mechanism to do this automatically.
 *
 * the seemingly redundant CSS is done for reasons similar to the suckerfish
 * css. it's to deal with all sorts of nested menu issues. it'll work as far
 * as three levels deep, after that all bets off.
 */
 /*
ul.menu li.menu-expand ul li a {
	background-color: #ffa;
}
ul.menu li.menu-expand ul li a:hover {
	background-color: #ddf;
}*/
ul.menu li.menu-expand a,
ul.menu li.menu-expand li.menu-expand a,
ul.menu li.menu-expand li.menu-expand li.menu-expand a {
	padding-right: 25px;
	background-image: url("/images/arrow-right.gif");
	background-repeat: no-repeat;
	background-position: 100% 50%;
}
ul.menu-vRight li.menu-expand a,
ul.menu-vRight li.menu-expand li.menu-expand a,
ul.menu-vRight li.menu-expand li.menu-expand li.menu-expand a,
ul.menu-hRight li.menu-expand a,
ul.menu-hRight li.menu-expand li.menu-expand a,
ul.menu-hRight li.menu-expand li.menu-expand li.menu-expand a {
	padding-right: 5px;
	padding-left: 20px;
	background-image: url("/images/arrow-left.gif");
	background-repeat: no-repeat;
	background-position: -5px 50%;
}
ul.menu-hor li.menu-expand a {
	padding-left: 5px;	/* reset padding */
	padding-right: 15px;
	background-image: url("/images/arrow-down.gif");
	background-position: 100% 50%;
}
ul.menu li.menu-expand li a,
ul.menu li.menu-expand li.menu-expand li a,
ul.menu li.menu-expand li.menu-expand li.menu-expand li a {
	background-image: none;
	padding-right: 5px;	/* reset padding */
	padding-left: 5px;	/* reset padding */
}
/*******************************************************************************
 * End Menu Presentation
 *******************************************************************************/
/*******************************************************************************
 * Top tab Menu 
 *******************************************************************************/
#top-menu {
	background: #FFF;
}
#top-menu .inside {
	/*margin-top: 5px;*/	
}
#tabs {
	width: 100%;
	float: left;
}

#tabs ul.tab-menu {
	padding-left: 15em;
}

#dummy-spacer {
	width: 11.5em;
	float: left;
}

#tabs ul {
	border-bottom:1px solid #BBB;
}
ul.tab-menu {
	border-bottom: 1px solid #66CC66;
	font-size: 0.75em;
	/*margin-top: 1em; removed to add to parent tag for now */
	padding: 3px 10px;
	line-height: normal;
}
/*
 * http://www.evotech.net/blog/2007/04/ie7-only-css-hacks/
 * http://www.satzansatz.de/cssd/onhavinglayout.html
 * http://ago.tanfa.co.uk/css/examples/haslayout/tripswitch-demo.html
 */

* html ul.tab-menu {
	line-height: 1;
}
html>body ul.tab-menu { *line-height: 1;}

ul.tab-menu li {
	display: inline-block;
}
ul.tab-menu li {
	border-bottom: 1px solid #FFFFFF;
	display: inline;
	margin-left: 5px;
	margin-top: 0;
	z-index: 1;
	min-height: 0; 
}
/* We are setting the border bottom on here because of an issue
 * with IE 7. */
ul.tab-menu li a {
	background-color: #EEEEEE;
	position: relative;
	border-color: #BBB #BBB #BBB #BBB;
	border-style: solid solid solid solid;
	border-width: 1px 1px 1px 1px;
	color: #666666;
	margin-right: 0;
	padding: 3px 4px;
	text-decoration: none;
}
/* Set the border bottom to none on the selected ones to fix an IE 7 issue */
ul.tab-menu li a.selected  {
	text-decoration: none;
	color: #000000;
	background-color: #FFF;
	padding-top: 4px;
	position: relative;
	top: 1px;		
	border-bottom: none;
}

ul.tab-menu li a:hover {
	background: #FFFFFF none repeat scroll 0 0;	
}
ul.menu li a.selectedMenu {
	background-color: #909090; /* Make sure to just change background color, don't want to override other background settings */
}
/*******************************************************************************
 * End Top tab menu
 *******************************************************************************/
/*******************************************************************************
 * dialog boxes
 *******************************************************************************/
/*******************************************************************************
 * Efd Dialog box
 * 
 * This is CSS to go along with the code in efd-dialog.css  This is more so for
 * dialog box menu system that is currently being used in merchant process and
 * disputes but could easily be used anywhere.  
 *******************************************************************************/
.efd-ui {

}
.efd-dialog {
	border: 1px solid gray;
	background: #FFFFFF;
	color: #000000;
	position: absolute;
	display: block;
	cursor: default;
	clear: both;
	/* since most likely this dialog is appended to the body we need to add the font family */
	font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
	width: 13em;
}
.efd-dialog .dialog {
}
.efd-dialog .dialog .title {
	padding: 5px;
	font-size: 0.8em;
	border-bottom: 1px solid #909090;
	overflow:hidden;
}
.efd-dialog .dialog .title span.title-name{
	float: left;
}
.efd-dialog .dialog .title span.close{
	float: right;
}
.efd-dialog .dialog .content {

}
#standard-popup {
	border: 2px solid #BBBBBB;
}
/* We don't want a border on the menu, putting it on the popup*/
#standard-popup .dialog .content ul.menu-ver {
	border: 0;
	width: 13em;
}
/* But if there is a submenu we want a border */
#standard-popup .dialog .content ul.menu-ver li.menu-expand ul.menu-ver {
	border: 2px solid #BBBBBB;
}
/*******************************************************************************
 * jQuery dialog - theme
 *
 * Please put any code here to change the specific theme around the general dialog
 * box for the site.  These will change the theme for ALL dialog boxes. If for some
 * reason your page needs something slightly different, override for that pages
 * css.
 *******************************************************************************/
.ui-dialog { 
	background: #fff;
}
.ui-dialog .ui-dialog-titlebar { 
	padding: .5em .3em .3em 1em; 
}
.ui-dialog .ui-dialog-title { 
	margin: .1em 0 .2em; 
} 
.ui-dialog .ui-dialog-content { 
	border: 0; 
	padding: .25em .25em; 
	background: none; 
}
.ui-dialog .ui-dialog-content {
	/*font-size: 0.75em;*/
	padding: 10px;
}
.ui-dialog .ui-dialog-content p {
	font-size: 0.75em;
}
.ui-dialog .ui-dialog-buttonpane { 
	text-align: left; 
	border-width: 1px 0 0 0; 
	background-image: none; 
	margin: .5em 0 0 0; 
	padding: .3em 1em .5em .4em; 
}
.ui-dialog .ui-dialog-buttonpane button { 
	float: right; 
	margin: .5em .4em .5em 0; 
	padding: .2em .6em .3em .6em; 
}
.ui-dialog .ui-dialog-buttonpane button.button-left { 
	float: left;
}
/*******************************************************************************
 * ui-tooltip
 *******************************************************************************/

.ui-tooltip .ui-widget-content,
.ui-tooltip .title {
	background-color: #EEEEEE;
}
.ui-tooltip .ui-widget-content {
	border: none;
	font-size: 0.75em;
	padding: 0.8em;
}	
/******************************************************************************
* end theme.css
*******************************************************************************/