/**
 * POPUP CONTAINER STYLES
 */
#popupMask {
	position: absolute;
	z-index: 200;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity: .4;
	filter: alpha(opacity=40);
	/* this hack is so it works in IE
	 * I find setting the color in the css gives me more flexibility 
	 * than the PNG solution.
	 */
	background-color:transparent !important;
	background-color: #333333;
	/* this hack is for opera support
	 * you can uncomment the background-image if you don't care about opera.
	 * this gives you the flexibility to use any bg color that you want, instead of the png
	 */
	background-image/**/: url("../Images/maskBG.png") !important; 
	background-image:none;
	background-repeat: repeat;
	display:none;
}
#popupContainer {
	position: absolute;
	z-index: 201;
	top: 0px;
	left: 0px;
	display:none;
	padding: 0px;
}
#popupInner {
	border: 2px solid #000000;
	background-color: #ffffff;
}

#popupFrame {
	margin: 0px;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 202;
}
#popupTitleBar {
	background-color: #99CC00;
	color: #ffffff;
	font-weight: bold;
	height: 1.3em;
	padding: 5px;
	border-bottom: 2px solid #000000;
	border-top: 1px solid #CCEE00;
	border-left: 1px solid #CCEE00;
	border-right: 1px solid #336600;
	position: relative;
	z-index: 203;
}
#popupTitle {
	float:left;
	font-size: 1.1em;
}
#popupControls {
	float: right;
	cursor: pointer;
	cursor: hand;
	padding-left: 5px;
}
.titleBar {
	background-color: #F4AA17;
	border-bottom: 2px solid #CCCCCC;
	border-top: 1px solid #CCEE00;
	border-left: 1px solid #CCEE00;
	border-right: 1px solid #CCCCCC;
	font-size: 0.75em;
	line-height: 1.4em;
	font-weight:bold;
	padding:2px 5px 2px 5px;
}
.titleBarImage 
{
    float:left;
    vertical-align: middle;
    padding-top: 0px;
    padding-left: 5px;
    z-index: 10;
}
td{
	padding-left:5px;
	color: #666666;
	font-size: 0.75em;
	line-height: 1.4em;
}
.underline
{
   	border-bottom: 2px solid #CCCCCC;
	border-top: 0px solid #CCEE00;
	border-left: 0px solid #CCEE00;
	border-right: 0px solid #CCCCCC; 
}

/* ^^^^^^^^ BELOW IS THE CODE FOR THE MERCHANT MENU ^^^^^^^^^^ */
#merchantMenuContainer{
	height:30px;
	display:block;
	padding-top: 25px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0px;
	margin: 0px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCC;
}
#merchantMenu{
	position:relative;
	display:block;
	height:30px;
	font-size:1.0em;
	font-weight:bold;
	font-family:Arial,Verdana,Helvitica,sans-serif;
}
#merchantMenu ul{
	padding:0;
	list-style-type:none;
	width:auto;
}
#merchantMenu ul li{display:block;float:left;margin:0 1px 0 0;}
#merchantMenu ul li a{
	display:block;
	float:left;
	color:#000;
	text-decoration:none;
	height:25px;
	background-color: #99CC00;
	background-image: url(../images/menu_bg-OFF.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 10px;
}
#merchantMenu ul li  a:hover, #merchantMenu ul li.selected a{
	color:#fff;
	background-color: #99CC00;
	background-image: url(../images/menu_bg-OVER.gif);
	background-repeat: no-repeat;
	background-position: right top;
}
#merchantMenu ul li a.current,#merchantMenu ul li a.current:hover{
	color:#FFF;
	background-color: #99CC00;
	background-image: url(../images/menu_bg-OVER.gif);
	background-repeat: no-repeat;
}
/* ^^^^^^^^ ABOVE IS THE CODE FOR THE MENU ^^^^^^^^^^ */
/* ^^^^^^^^ BELOW IS THE CODE FOR THE SHOPPING CART MENU ^^^^^^^^^^ */
#shoppingMenuContainer{
	height:24px;
	display:block;
	padding-top: 25px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0px;
	margin: 0px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCC;
}
#shoppingMenu{
	position:relative;
	display:block;
	height:24px;
	font-size:0.8em;
	font-weight:bold;
	font-family:Arial,Verdana,Helvitica,sans-serif;
}
#shoppingMenu ul{
	padding:0;
	list-style-type:none;
	width:auto;
}
#shoppingMenu ul li{display:block;float:left;margin:0 1px 0 0;}
#shoppingMenu ul li a{
	display:block;
	float:left;
	color:#000;
	text-decoration:none;
	height:19px;
	background-color: transparent;
	background-image: url(../images/menu_bg-OFF.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 10px;
}
#shoppingMenu ul li  a:hover, #shoppingMenu ul li.selected a{
	color:#fff;
	background-color: transparent;
	background-image: url(../images/menu_bg-OVER.gif);
	background-repeat: no-repeat;
	background-position: right top;
}
#shoppingMenu ul li a.current,#shoppingMenu ul li a.current:hover{
	color:#FFF;
	background-color: #fff;
	background-image: url(../images/menu_bg-OVER.gif);
	background-repeat: no-repeat;
}
#orderSummary 
{
	border: solid 1px black;
}
#orderSummary table 
{
	width:100%;
}	
#orderSummary th
{
	font-weight: bold;
	font-family: Arial;
	font-size: 14px;
	background-color: #CCCCCC;
	border: dotted 1px #999999;
	text-align: center;
}
#orderSummary th.small
{
	font-weight: bold;
	font-family: Arial;
	font-size: 12px;
	background-color: #CCCCCC;
	border: dotted 1px #999999;
	padding-left: 1px;
	text-align:left;
}
#orderSummary td
{
	border: dotted 1px #999999;
}
#confirmSummary 
{
	border: solid 1px black;
}
#confirmSummary table 
{
	width:100%;
}	
#confirmSummary th
{
	font-weight: bold;
	font-family: Arial;
	font-size: 14px;
	background-color: #CCCCCC;
	border: dotted 1px #999999;
	text-align: center;
}
#confirmSummary th.small
{
	font-weight: bold;
	font-family: Arial;
	font-size: 12px;
	background-color: #CCCCCC;
	border: dotted 1px #999999;
	padding-left: 1px;
	text-align:left;
}
#confirmSummary td
{
	border: dotted 1px #999999;
}
/* ^^^^^^^^ ABOVE IS THE CODE FOR THE SHOPPING CART MENU ^^^^^^^^^^ */
/* styles for tabs */
.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 20px solid #99cc00;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.basictab li{
display: inline;
margin: 0;
}

.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border-bottom: none;
background-color: #336699;
color: white;
}

.basictab li a:visited{
color: white;
}

.basictab li a:hover{
background-color: #99cc00;
color: black;
}

.basictab li a:active{
color: white;
}

.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #99cc00;
color: black;
}

.basictab li.unselected a{ /*selected tab effect*/
background-color: #336699;
}

.basictabpanel
{
    position:relative; 
    border-bottom:solid 1px #99cc00;
    border-left:solid 1px #99cc00;
    border-right:solid 1px #99cc00;
    border-top:solid 20px #99cc00;
}
.greytext
{
    color:Gray;
    font-size: 12px;
}

.accordionHeader
{
    color: black;
    background-color: #99cc00;
      font-family: Arial, Sans-Serif;
      font-size: 12px;
      font-weight: bold;
    cursor: pointer;
    background-image: url("../Images/plus.png");
    background-repeat:no-repeat;
    margin-top: 2px;
}
 
.accordionHeader a
{
      color: #FFFFFF;
      background: none;
      text-decoration: none;
}
 
.accordionHeader a:hover
{
      background: none;
      text-decoration: underline;
}
 
.accordionHeaderSelected
{
    color: black;
    background-color: #99cc00;
      font-family: Arial, Sans-Serif;
      font-size: 12px;
      font-weight: bold;
    cursor: pointer;
    background-image: url("../Images/minus.png");
    background-repeat:no-repeat;
    margin-top: 2px;
}
 
.accordionHeaderSelected a
{
      color: #FFFFFF;
      background: none;
      text-decoration: none;
}
 
.accordionHeaderSelected a:hover
{
      background: none;
      text-decoration: underline;
}
 
.accordionContent
{
    background-color: #D3DEEF;
    border: 1px dashed #99cc00;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
}

.distance
{
    float:right;
    color:#FF3300;
	font-size: 0.65em;
	padding-right:5px;
}

/* merchant search result box */
.iconsBox {
	display: block;
	float: left;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-right-color: #999;

	
}

.merchantIcon
{
	float:left;
	font-size: 0.6em;
	font-weight: bold;
	text-decoration:none;
	padding-top: 1px;
	padding-right: 5px;
	padding-left: 5px;
	padding-bottom: 2px;
	border-right-width: 1px;
	border-right-color: #999;
	
}
.merchantIcon a:link
{
	text-decoration:none;
	color:Black;
	font-weight: bold;
	border-right-width: 1px;
	border-right-color: #999;
}
.merchantIcon:hover
{
	background-repeat: no-repeat;
	color: #fff;
	background-color: #ccc;
}

/* password strength indicators */
.weak{
	color:#666;
}

.average{
	color:#036;
}

.strong{
	color:#060;
}

/* styles for notice list */
ul.noticeList, ul.errorList
{
	font-size:15px;
	padding-left:0;
	margin-left:0;
}

ul.noticeList li, ul.errorList li
{
	text-indent:-12px;
}

/* required and optional indicators for forms */
.required
{
	
}

.required:before
{
    content:"*";
    color:#f00;
	font-size:larger;
}

.optional:before
{
    content:"(";
}

.optional:after
{
    content:")";
}

/* style to position checkbox label away from checkbox */
.checkBox
{
	padding:5px;
}

/* center form button */
span.centerButton
{
	margin:0 0 15px 0;
	width:100%;
	text-align:center;
	display:block;
}

span.centerButton input
{
	width:110px;
	margin-left:auto;
	margin-right:auto;
}

span.centerButton p
{
	margin:0;
	padding:0;
}

/* style to space login image button away from .bixBox border */
.loginImageBtn
{
	margin-left:5px;
}

/* styles for member account settings */
.collapsePanel 
{
	height:0;
	overflow:hidden;
	float:left;
	width:100%;
}
	
.collapsePanelHeader
{
	cursor:pointer;
	float:left;
	width:100%;
}

.collapsePanelHeader h3
{
	display:inline;
	border:none;
	float:left;
	margin:0 0 0 10px;
	padding:0;
	font-size:12px;

}

.collapseStateIndicator
{
	float:right;
	font-size:smaller;
	padding-top:1px;
}

img.collapseStateIndicator
{
	float:left;
}

/* style the forms within the user account settings page */
.savingsInterestAndHobbiesList,.savingsInterestAndHobbiesList ul
{
    font-size:medium;
    float:left;
    width:100%;
    padding:0;
    margin:0;
    line-height:20px;
}

.upperLevelLi
{
    text-decoration:underline;
}

.savingsInterestAndHobbiesList li ul
{
    list-style:none;
    padding:0 !important;
    margin:0 !important;
    line-height:20px;
}

.savingsInterestAndHobbiesList ul li
{
    display:inline;
    float:left;
    padding:0 !important;
    margin:0 !important;
    border:0;
    line-height:20px;
}

.savingsInterestAndHobbiesList ul li:after
{
    content:","
}

.savingsInterestAndHobbiesList ul li:last-child:after
{
    content:""
}

.alternateSavingsInterestArea
{
    background-color:#ddd;
    margin:0;
    padding:0;
    border:0;
}

.savingsInterestAndHobbiesTable
{
    width:100%;
}

.savingsInterestAndHobbiesTable td
{
    width:50%;
}

.formFyi
{
    font-size:small;
    padding:0;
    margin:0;
    width:97%;
}

.formInputBlock, .formInputInline, .vcard, .buttonCollection
{
	padding-bottom:10px;
	color: #666666;
	font-size: 12px;
	line-height: 14px;
}

.buttonCollection ul, .buttonCollection li
{
    list-style:none !important;
}

.formInputBlock
{
	padding:0;
	margin:5px 0 0 5px;
	border:0;
	width:100%;
}

.formInputBlock label
{
	margin:0;
	padding:0;
}

.formInputBlock input, .formInputBlock select
{
    display:block;
    margin:0;
	padding:0;
}

.formInputInline
{
    float:left;
    width:100%;
    margin:5px 0 0 5px;
    padding:0;
}

.formInputBlock label:after
{
	content:":";
}

.formInputInline label
{
	display:inline;
	margin:0 0 0 5px;
	padding:0;
	float:left;
	width:90%;
}

.formInputInline input
{
	display:inline !important;
	margin:0 5px 0 0;
	padding:0;
	float:left;
}

.formInputInline label:after,label.withoutColon:after
{
	content:"";
}

label.withColon:after
{
	content:":";
}

.buttonCollection
{
	width:100%;
	float:left;
	margin:10px 0 5px 5px;
	padding:0;
}

/* member account vcard style */
.fn
{
	font-weight:bold;
}

.vcard
{
    margin-left:5px;
}

/* styles for flash message */
.flashMessage
{
}

/*
.loginTab {
	position: relative;
	top: 0px;
	float: right;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
	z-index: 3;
	clear: both;
}
.loginTab  ul {
	font-size: 10px;
	margin: 0px;
	padding-top: 0px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
	list-style:none;
}

.loginTab li
{
    display:inline;
}

.loginTab  ul li:after
{
    content:" | ";
    color:#000;
	
}

.loginTab  ul li ul
{
    border:solid 1px #666;
}
    
.loginTab  ul li ul li
{
    display:block;
    background-color:#fff;
}

.loginTab  ul li ul li:after
{
    content:"";
}

.loginTab .last-child:after
{
    content:"" !important;
}
*/

#siteSelection select 
{
    font-size:10px;
    color: #f60;
    border:0;
    background-color:#fff;
    margin:0 !important;
    padding:0 !important;
    width:40px;
    height:15px;
}

#siteSelection label
{
    font-size:10px;
}

#siteSelection label:after
{
    content:":";
}

/* wizard styles */
/* wizard styles */
.wizard
{
	width:565px;
	background-image: url(../images/bg_big_box.jpg);
	background-repeat:repeat;
	border: 1px solid #CCCCCC;
	background-position: left bottom;
	margin:0 auto 0 auto;
	padding:0 !important;
	float:none;
	overflow:auto;
}

.step
{
    width:565px;
    float:left;
    margin:0 !important;
    padding:0 !important;
}

.step .notice
{
    margin:15px auto 0 auto;
    padding:0 !important;
    float:none;
    width:530px;

}

.sidebar
{
    width:100%;
    float:left;
    margin:0 0 15px 0 !important;
    padding:0 !important;
}

.sidebar  ol 
{
	float: left;
	margin:0 !important;
	padding:0 !important;
}

.sidebar  ol  li 
{
	list-style-type: none;
	font-size: 12px;
	color: #fff;
	display: inline;
	width: 113px;
	float: left;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	height: 40px;
	margin:0 !important;
	padding:0 !important;
}

.sidebar ol li a:link, .sidebar ol li a:visited, .sidebar ol li a.disabled:hover, .sidebar ol li a.disabled:active,.sidebar ol li a.disabled:focus 
{
	list-style-type: none;
	text-decoration: none;
	color: #fff;
	width: 112px;
	display: block;
	font-weight: bold;
	margin-bottom: 17px;
	border-right: solid 1px #333;
	padding-top: 5px;
	padding-bottom: 9px;
	background-color: #707070;
}


.sidebar ol li a.disabled:hover, .sidebar ol li a.disabled:focus
{
    border-left:0;
}

.sidebar ol li a.active:link,  .sidebar ol li a.active:visited, .sidebar  ol li  a:hover, .sidebar ol li a:focus  
{
	text-decoration: none;
	background-color: #f60;
	border-right: solid 1px #333;
	border-left: solid 1px #333;
	font-weight: bold;
	margin-top: 0px;
	padding-top: 22px;
	padding-bottom: 9px;
	width: 112px;
}

.sidebar ol li a.active:link,  .sidebar ol li a.active:visited
{
    width:111px;
}

.sidebar ol li a.disabled,.sidebar ol li a.active
{
    cursor:default;
}

.previous
{
    border-right: 0;
	border-left: 0;
    width: 112px;
}

#signup .formInputBlock,#signup .formInputInline,#signup .buttonCollection, 
#createAccount .formInputBlock,#createAccount .formInputInline,#createAccount .buttonCollection,
#recovery .formInputBlock,#recovery .formInputInline,#recovery .buttonCollection
{
	width:560px;
	
}

.phone_message
{
    font-weight:bold;
    margin-left:auto;
    margin-right:auto;
    width:430px;
}


/* styles for welcome pages */

/* general or on multiple pages */

#login, #signup, #createAccount, #recovery, #help
{
     
}

#login #wrapper, #signup #wrapper, #createAccount #wrapper, #recovery #wrapper, #help #wrapper
{
    margin-top:100px;
}

#header_welcome
{
    height:40px;
    border-bottom:5px solid #000;
    padding:60px 5px 5px 5px;
    margin:0 0 10px 0;
    background-image:url(../images/wesave_logo/wesavelogo2011.png);
    background-repeat:no-repeat;
    background-position:top right;
}

#header_welcome h1
{
     color:#f60;
     font-size:2.3em;
     margin:0;
     padding:0;
}

#footer_welcome
{
    width:100%;
    float:left;
    margin:15px 0;
}

#footer_welcome p
{
    width:60%;
    margin:0 auto;
    text-align:center;
    padding:0;
}

.welcome_pages fieldset
{
    border:0;
    margin:0;
    padding:0;
    float:left;
    width:100%;
}

.welcome_pages legend
{
    font-size: 0.8em;
	line-height: 1.2em;
	font-weight: bold;
	color: #333;
	padding:5px 0 5px 5px;
	width:282px;
}

.welcome_pages .legend
{
    border-bottom: dotted 1px #CCC;
    width:100%;
    display:block;
}

.welcome_pages table,td
{
	text-align:center;
	vertical-align:top;
}

/* end of general or on multiple pages */



/* login page styles */
#wesavecard_bigpart
{
    float:right;
    height:236px;
    width:244px;
    background-image:url(../images/site_index/wesavecard_bigpart.jpg);
    background-repeat:no-repeat;
    background-position:top right;
}

#wesavecard_smallpart
{
    width:244px;
    height:169px;
    float:right;
}

#wesavecard_smallpart p
{
    width:200px;
    margin:0 0 0 50px;
    padding:0;
    font-weight:bold;
    color:#999;
}

#wesavecard_smallpart strong
{
    text-transform: uppercase;
}

#wesavecard_smallpart #prog_exp
{
    font-size:0.95em;
    line-height:1.1em;
}

#wesavecard_smallpart #pub_emp_exp
{
    font-size:0.65em;
}

#wesavecard_smallpart #pub_emp_lbl
{
    font-weight:bolder;
    font-size:1em;
}

#welcome_message
{
    margin-top:75px;
    width:287px;
}

#welcome_message h1
{
    color:#f60;
    font-size:2.3em;
    margin:0;
    padding:0;
}

#welcome_message p
{
    color:#999;
    font-size:1.1em;
    margin:0;
    padding:0;
    line-height:1.1em;
}

/* login is the id of the body tag on Default.aspx in site root */

#login #createAccountMessage
{
    float:left;
    width:277px;
    padding:5px;
    margin:0;
}
    
#login .formInputBlock label
{
	width:50px;
	float:left;
}

#login .formInputBlock input
{
	display:inline;
	float:right;
	margin-right:35px;
	width:50%;
}

#login .loginBox
{
    float:left;
    width:287px;
}

#login .loginImgBtn
{
    padding-left:0;
    margin-left:0;
}

#login .error, #login .success
{
    float:left;
    width:377px;
    margin-top:5px;
    margin-bottom:5px;
}

#login .error ul
{
    margin-left:15px;
    color:#8a1f11;
    line-height: normal; 
}

#login #welcome_panel
{
    margin:0 0 0 385px;
}

#login .noBorder
{
   border:solid 1px #cccccc; 
}

/* set homepage */
#login #sethomepage A:link { text-decoration: none; color: Gray; font: Arial Black; font-size: small; font-weight: normal }
#login #sethomepage A:visited {  text-decoration: none; color: Gray; font: Arial Black; font-size: small; font-weight: normal   }
#login #sethomepage A:active {  text-decoration: none; color: Gray; font: Arial Black; font-size: small; font-weight: normal  }
#login #sethomepage A:hover {  text-decoration: none; color: Gray; font: Arial Black; font-size: small; font-weight: bold   }


/* signup */
#signup .wizard
{
    margin-top:15px;
}

#signup .wizard,#recovery .wizard,#createAccount .wizard
{
    width:570px;
}

/* help */
#help ul, #help ol
{
    font-size:0.75em;
    margin-left:35px;
}

/* end of styles for welcome pages */