/*  

	New and Improved(tm) "It's like Advantage..." stylesheet
	
*/

/*  

	Global styles:
	
		This should contain any style information that is applicable to all elements
		of a given type in a program.  In other words, nothing in this section should
		have a pseudo-class (<element>.<pseudoclass>), or be applied to an id (#<name>)
		
		The exception to this, is that all global form element styles should be contained
		in the "Form Element styles" section that directly follows this section.
		
*/

* {

		margin					:0;
		padding					:0;
}

body {
        font                	: 11px/13px Verdana,Tahoma,Arial;
        background    			: #000000;
        margin              	: 0px;
        color					: #000000;
}

div {
        float               	: left;
        box-sizing          	: border-box;
        -moz-box-sizing     	: border-box;  
}

img {
		border					: none;
}

p	{
		margin-top				: 12px;
		margin-bottom			: 0px;
}

/*

	Form Element styles:
	
		This area should specify global style information related to form elements.  No pseudo-classes
		or id references should appear in this section.


*/

input {
	border			: 1px solid #000000;
}

select {
	border			: 1px solid #000000;
	font-size		: 11px;
}

textarea {
	border			: 1px solid #000000;
	font-size		: 11px;
}

/*

	Link styles:
	
		This area should contain the global style information for link elements (<a>).
		
*/

a:active, a:link, a:visited {
	color		    	: #0000FF;
	font-weight	    	: 400;
	text-decoration	    	: none;
}

a:hover {
	text-decoration	    	: underline;
}


/*

	Site-shell styles:
	
		This area should contain any styles which are applied to the 'shell' template for a site.
		Typically these are #<id> referenced styles.  They appear in this section, rather than the
		'ID Reference styles' section, because they apply to the actual structure of the site, not
		the more visual presentation aspects.
		
*/

#shell {
	width			: 760px;
/*	Float left aligns the center block to the left, float none + auto margins will center it */
/*      float               	: left; */
        margin-left         	: auto;
        margin-right        	: auto;
        float               	: none;
}

#left_pane {
	width			: 150px;
	margin-bottom	: 5px;
}

/* this is needed to force the space between the left and right panes in Safari */
#left_center_gutter {
	width			: 10px;
	height			: 100px;
}

#center_pane {
	width			: 600px;
	margin-bottom	: 5px;
	margin-left		: 0px;
	float			: right;
}

#right_pane {
}


/*

	Header styles:
	
		This area should contain styles related only to the header pseudo-class (.header)
		
*/

div.header {
	height          : 130px;
	width			: 760px;
	background		: #7A909B;
}


/*

	Footer styles:
	
		This area should contain style related to only the footer pseudo-class (.footer)
		
*/

div.footer {
        height              	: 35px;
        text-align          	: center;
	width			: 760px;
}

div.footer a:link {
	color            	: #c2c2c2 ! important;
	font                	: 10px/12px Verdana,Tahoma,Arial;
}

div.footer a:visited {
	color            	: #c2c2c2 ! important;
	font             	: 10px/12px Verdana,Tahoma,Arial;
}

div.footer a:hover {
	font                	: 10px/12px Verdana,Tahoma,Arial;
}
	
div.footer span {
        color               	: #c2c2c2;
        margin              	: 0px 3px 0px 3px;
	font                	: 10px/12px Verdana,Tahoma,Arial;
}

/*

	ID Reference Styles:
	
		The styles in this section should be limited to styles which are applied to an id element.
		These are specified using the #<name> notation.
		
		Only use this type of style for an element which can appear one time on a page.  If an
		element can appear more than once, it should be given a pseudo-class.  This keeps the
		cascading part of CSS happy
		
*/

/*
	List item styles:
	
		This fixes the displaying of list items.
		It will also display orphaned li tags correctly.
*/

#center_pane ol {
	margin-left		: 10px;
	padding-top		: 3px;
	padding-bottom	: 3px;
}

#center_pane ul {
	padding-top		: 3px;
	padding-bottom	: 3px;
}

#center_pane li {
	margin-left		: 18px;
}

/* json pager link colors */
#pager_first a:active, a:link, a:visited {
	color			: white;
}	

/*

	Error and Notice styles:
	
		These two id references coorespond to all 'soft' errors (non-critical) and notices that are
		generated by the application platform.
		
*/

#error {
	background		: url(/asset/global/icons/mid_error.jpg) no-repeat center left; 
	margin-top		: 2px;
	color			: red;
	width			: 570px ! important;
	text-align		: center;
	vertical-align	: middle;
	height			: 75px;
	padding-left	: 25px;
	font-weight		: bold;
}

#notice {
	background      	: url(/asset/global/icons/mid_info.jpg) no-repeat center left;
	color				: #F88614;
	font-weight			: bold;
	margin-top			: 2px;
	margin-bottom   	: 5px;
	width				: 570px ! important;
	text-align      	: center;
	height				: 30px;
	padding-left		: 25px;
	vertical-align		: middle;
}

/*

	Add in your own ID REFERENCED styles in this section.  Please be sure to group them 
	by association, to keep with the conventions in this file.  Also, to help those who
	come behind you, please include comments on what the elements are used for.
	
*/

/* 
    Busy Indicators
   
        Styles for showing a busy indicator
        (Mostly used during AJAX requests)
*/

/* the entire page is waiting to be refreshed */
#search_spinner {
	background: transparent url('/images/loaders/large-circle.gif') no-repeat top center;
	position: absolute;
	display: block;
	z-index: 1;
	top: 200px;
	left: 50%;
	margin-left: 20px;
	width: 100px;
	height: 100px;
}

/*
	Item Descriptions

		Some of the item data we get has html that behaves badly once placed within our
		divs.  These styles are an attempt to fix this.

*/

#item_description {
	margin-top		: 10px;
}

/* this is the color for the category trail's sub categories */
.item_subcategory_trail, .item_subcategory_trail a {
	color:			#666666;
}

/*

	Pseudo-classed styles:
	
		This section contains the most styles of all sections, since this is where you
		can specify your own pseudo-classed CSS elements.  Please take care to group them by
		association, and include comments about where and what the styles are used for.
		
	Alternate color background DIV blocks
	
		These styles refer to the "light" and "dark" blokcs from the older set.  Used for
		rows of data, etc.  Light is for light background with dark text, and dark is for 
		dark background with light text.  NO widths will be defined, this is a coloration
		class only!
*/

.light_block {
	background		: #C4CED3;
	border			: 1px solid #000000;
	color			: #000000;
}

.dark_block {
   	background-image : url(/images/2/MMPA_background.jpg);
	background-repeat : repeat-x;
	color			: #FFFFFF;
}

.xbrowser_padded_header {
	width			: 100%; 
	line-height		: 17px; 
	text-indent		: 2px; 
	color			: #FFFFFF;
   	background-image 	: url(/images/2/MMPA_background.jpg);
	background-repeat 	: repeat-x;
	vertical-align		: middle;
}

.xbrowser_padded_header a {
	color			: #FFFFFF;
	vertical-align		: middle;
}

.text_center {
	text-align		: center;
}

/* This is for image headings */
.heading {
	clear				: both;
	overflow			: hidden;
	width				: 100%;
	text-align			: left;
	background-color	: #CFCBCF; /* should be the same color as the heading image's background */
	border-bottom		: 1px solid #000;
	height				: 20px;
}

/*
	Common line heights for "rows" of data or form fields
		
		These styles control the heights and line-heights of "rows" on divs.  These can
		contain form fields, and can also have dark borders on the top or bottom to
		help make data more readable.
*/

.form_container {
	margin-top		: 5px;
	padding-top		: 5px;
	padding-bottom	: 5px;
}

.form_container_with_header {
	margin-top		: 5px;
	padding-bottom	: 5px;
}

.form_container_with_header .xbrowser_padded_header {
	margin-bottom	: 5px;
}

.form_row {
	height			: 25px;
	float			: left;
	width			: 100%;
	margin-top		: 2px;
	margin-bottom	: 1px;
}

.form_row div {
    line-height		: 20px;
}

/* col1 and col2 become the default form label and field columns */

.form_row div.col1 {
	width			: 150px;
	text-align		: right;
    line-height     : 18px;
}

.form_row div.col2 {
	width			: 300px;
	padding-left	: 5px;
}

.text_row {
	height			: 20px;
	line-height		: 16px;
	float 			: left;	
	width			: 100% ! important;
}

.text_row div.col {
	width			: 50%;
}

.row_background {
	background		: #fff;
	color			: #000;
}

.alt_row_background {
	background		: #eee;
	color			: #000;
}

.dark_bottom_border {
	border-bottom		: 1px solid #000000;
}

/*

	Button classes:
	
		These classes are used on buttons to provide decent image replacements for common buttons
		used throughout the incentive application
		
*/

input.add_to_cart {
	background		:	#CCC url(/images/buttons/add_to_cart.jpg) no-repeat;
	outline			:	none;
	border			:	none;
	height			:	24px;
	width			:	165px;
}

input.add_to_wishlist {
	background		:	#CCC url(/images/buttons/add_to_wishlist.jpg) no-repeat;
	outline			:	none;
	border			:	none;
	height			:	24px;
	width			:	165px;
}

input.advanced_search {
	background		:	#CCC url(/images/buttons/advanced_search.jpg) no-repeat;
	outline			:	none;
	border			:	none;
	height			:	24px;
	width			:	135px;
}

input.begin_checkout {
	background		:	#CCC url(/images/buttons/begin_checkout.jpg) no-repeat;
	outline			:	none;
	border			:	none;
	height			:	24px;
	width			:	125px;
}

input.cancel {
	background		:	#CCC url(/images/buttons/cancel.jpg) no-repeat;
	outline			:	none;
	border			:	none;
	height			:	24px;
	width			:	75px;
}

input.complete_checkout {
	background		:	#CCC url(/images/buttons/complete_checkout.jpg) no-repeat;
	outline			:	none;
	border			:	none;
	height			:	24px;
	width			:	145px;
}

input.continue_checkout {
	background		:	#CCC url(/images/buttons/continue_checkout.jpg) no-repeat;
	outline			:	none;
	border			:	none;
	height			:	24px;
	width			:	145px;
}

input.edit_shipping_address {
	background		:	#CCC url(/images/buttons/edit_shipping_address.jpg) no-repeat;
	outline			:	none;
	border			:	none;
	height			:	24px;
	width			:	165px;
}

input.empty_cart {
	background		:	#CCC url(/images/buttons/empty_cart.jpg) no-repeat;
	outline			:	none;
	border			:	none;
	height			:	24px;
	width			:	100px;
}

input.enter_access_code {
	background		:	#CCC url(/images/buttons/enter_access_code.jpg) no-repeat;
	outline			:	none;
	border			:	none;
	height			:	24px;
	width			:	145px;
}

input.get_password_reminder {
	background		:	#CCC url(/images/buttons/get_password_reminder.jpg) no-repeat;
	outline			:	none;
	border			:	none;
	height			:	24px;
	width			:	170px;
}

input.go {
	background		:	#CCC url(/images/buttons/go_bttn.jpg) no-repeat;
	outline			:	none;
	border			:	none;
	height			:	16px;
	width			:	16px;
}

input.my_account {
	background		:	#CCC url(/images/buttons/my_account.jpg) no-repeat;
	outline			:	none;
	border			:	none;
	height			:	24px;
	width			:	105px;
}

input.order_history {
	background		:	#CCC url(/images/buttons/order_history.jpg) no-repeat;
	outline			:	none;
	border			:	none;
	height			:	24px;
	width			:	115px;
}

input.point_account {
	background		:	#CCC url(/images/buttons/point_account.jpg) no-repeat;
	outline			:	none;
	border			:	none;
	height			:	24px;
	width			:	115px;
}

input.reset {
	background		:	#CCC url(/images/buttons/reset.jpg) no-repeat;
	outline			:	none;
	border			:	none;
	height			:	24px;
	width			:	70px;
}

input.reset_password {
	background		:	#CCC url(/images/buttons/reset_password.jpg) no-repeat;
	outline			:	none;
	height			:	24px;
	border			:	none;
	width			:	130px;
}

input.return_to_cart {
	background		:	#CCC url(/images/buttons/return_to_cart.jpg) no-repeat;
	outline			:	none;
	border			:	none;
	height			:	24px;
	width			:	120px;
}

input.search {
	background		:	#CCC url(/images/buttons/search.jpg) no-repeat;
	outline			:	none;
	border			:	none;
	height			:	24px;
	width			:	75px;
}

input.send_help_request {
	background		:	#CCC url(/images/buttons/send_help_request.jpg) no-repeat;
	outline			:	none;
	border			:	none;
	height			:	24px;
	width			:	145px;
}

input.sign_in {
	background		:	#CCC url(/images/buttons/sign_in.jpg) no-repeat;
	width			:	75px;
	height			:	24px;
	outline			:	none;
	border			:	none;
}

input.sign_out {
	background		:	#CCC url(/images/buttons/sign_out.jpg) no-repeat;
	outline			:	none;
	border			:	none;
	height			:	24px;
	width			:	85px;
}

input.submit {
	background		:	#CCC url(/images/buttons/submit.jpg) no-repeat;
	outline			:	none;
	border			:	none;
	height			:	24px;
	width			:	75px;
}

input.update {
	background		:	#CCC url(/images/buttons/update.jpg) no-repeat;
	outline			:	none;
	border			:	none;
	height			:	24px;
	width			:	75px;
}

input.update_cart {
	background		:	#CCC url(/images/buttons/update_cart.jpg) no-repeat;
	outline			:	none;
	border			:	none;
	height			:	24px;
	width			:	105px;
}

/*

	Headline classes:
	
		These pseudo-classes are used for 'headline' styled elements.  These are used because
		they tend to be more portable (even if more verbose) across browsers.  They don't carry
		the garbage margins that the HTML default <h#> elements do.
		
*/

span.headline {
    font        	: 16px/25px Verdana,Tahoma,Arial;
    font-weight 	: 600;
	color			: #000000;
}

/*

	Third party component styles:
	
		This section contains all styles related to third-party components that are used
		in the application.  Since these are typically self-contained, these styles are
		exempted from the general conventions of this document.
		
		Commenting guidelines still apply here.  Include the name of the third-party
		component, the URL where the component (and documentation) is available from
		and any other useful information.
		
*/

/*

	Epoch JS styles:
	
		Name	:	Epoch DHTML Javascript Calendar 
		URL		:	http://www.meanfreepath.com/javascript_calendar/index.html
		
		These styles are used for the dynamic calendar controls that we use throughout
		the application.
		
*/

table.calendar {
        font-family             : Verdana, Helvetica, Arial, sans-serif;
        font-size               : 10px;
        border-collapse         : collapse;
        background-color        : white;
        border                  : 1px solid #999999;
        width                   : 200px;
        text-align              : center;
        -moz-user-select        : none;
}

/* keeps the form from being huge on ie... */
table.calendar div {
        width                   : 200px;
}

table.calendar input, table.calendar select {
        font-size               : 10px;
        border                  : 1px solid #1d4a9f;
        background              : #ffffff;
}

table.calendar td {
        border                  : 0;
        font-size               : 10px;
        text-align              : center;
}

div.mainheading {
        width                   : 200px ! important;
        float                   : none;
}

table.caldayheading {
        border-collapse         : collapse;
        cursor                  : pointer;
        empty-cells             : show;
        margin-left             : 6px;
        margin-right            : 6px;
}

table.caldayheading td {
        border                  : solid #CCCCCC 1px;
        text-align              : left;
        color                   : #1d4a9f;
        font-weight             : bold;
        width                   : 22px;
}

table.caldayheading td.wkhead {
        border-right            : double #CCCCCC 3px;
}

table.calcells {
        border-collapse         : collapse;
        cursor                  : pointer;
        margin-left             : 6px;
        margin-right            : 6px;
}

table.calcells td {
        border                  : solid #CCCCCC 1px;
        vertical-align          : top;
        text-align              : left;
        font-weight             : bold;
        width                   : 22px;
        height                  : 20px;
}

table.calcells td {
        padding                 : 1px;
        margin                  : 0px;
}

table.calcells div {
        padding                 : 0px;
        margin                  : 0px;
        float                   : none;
}

table.calcells td.wkhead {
        background-color        : white;
        text-align              : center;
        border-right            : double #CCCCCC 3px;
        color                   : #1d4a9f;
}

table.calcells td.wkday {
        background-color        : #f5f5f5;
}

table.calcells td.wkend {
        background-color        : #f5f5f5;
}

table.calcells td.curdate {
        background-color        : #d1d6df;
}

table.calcells td.cell_selected {
        background-color        : #1d4a9f;
        color                   : white;
}

table.calcells td.notmnth {
        background-color        : #FFFFFF;
        color                   : #CCCCCC;
}

table.calcells td.notallowed {
        background-color        : white;
        color                   : #EEEEEE;
        font-style              : italic;
}

table.calcells td.hover {
        background-color        : #999999;
}


/* 

	End of new stylesheet format.  Everything below this comment is historical, deprecated, and should be 
	removed from the templates and the system, and replaced with more clear and concise styles.  It is 
	left in here to support the transition from the old style to the new style, but the end goal is that
	everything below here is gone, and moved to where it belongs, or outright removed from the system.
	
*/