/*  

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

/*  

/*Roth Pride Points Main Styles */

@charset "utf-8";
/**************************************/
/*   MAIN CSS for ROTH PRIDE POINTS   */
/*   Version: 1.0                     */
/*   Date: 06-17-11                   */
/**************************************/

/********************************* RESETS *********************************/
* { margin:0; outline:none; padding:0; }

/**************************************************************************/
/*                               TYPOGRAPHY                               */
/**************************************************************************/
/************** COLORS **************/
/*
green dk:  #669977
green lt:  #b4cd96
orange dk: #cb4300
orange lt: #f39f1f
blue lt:   #3c6399
blue pale: #cfd9e8
gray pale: #efefef
*/
/************** GENERAL *************/
body {
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}
p {
	font-size: 13px;
	margin-bottom: 10px;
}
#footer p {
	color: #636363;
	font-size: .68em; /* = 11px */
}
.last {
	margin-bottom: 0;
}
.note {
	font-size: .8em;
	padding-top: 3px;
	margin-bottom: 10px;
}
.signature {
	text-align: right;
}
/************** HEADERS **************/
h1 { 
	font-size: 24px; 
}
.roth_headline {
	color: #3c6399;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 24px;
	font-style: italic;
}
h2 { 
	font-size: 20px;
	color: #3c6399;
	font-family: Arial, sans-serif;
	padding-top: 12px;
}
h3 { 
	font-size: 18px;
	color: #cb4300;
	height: 35px;
	padding-top: 12px;
	margin-bottom: -5px;
}
h4 { 
	font-size: 1em; 
}
h5 { 
	font-size: 13px; 
}
form h5 {
	font-weight: normal;
}
.subHead {
	font-size: 13px;
}
.welcome {
	color: #3c6399;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 24px;
	font-style: italic;
}
/************ HEADER IMAGE ************/
#remarkable h3 {
	background: url(/images/2/title_remarkable.png) left top no-repeat;
	padding-left: 50px;
}
#rankings h3 {
	background: url(/images/2/title_ranking.png) left top no-repeat;
	padding-left: 40px;
}
#points h3 {
	background: url(/images/2/title_points.png) left top no-repeat;
	padding-left: 40px;
}
/**************************************************************************/
/*                                 UL/LI                                  */
/**************************************************************************/
#header li,
#nav li,
#utilities li {
	list-style: none;
}
#nav li,
#utilities li {
	float: left;
}
#nav ul {
	color: #fff;
	width: 100%;
	float: left;
}
/**************************************************************************/
/*                                 LINKS                                  */
/**************************************************************************/
#nav a,
#utilities a {
	color: #fff;
	text-decoration: none;
}
#nav a:hover {
	color: #265d67;
}
#utilities a:hover {
	color: #b2c891;
}
#remarkable .more {
	color: #fff;
	float: right;
	font-size: 13px;
	font-style: italic;
}
.externalLink {
	background: url(/images/2/external_link.png) left top no-repeat;
	color: #d35908;
	font-size: 10px;
	height: 15px;
	padding-left: 15px;
}
.externalLink:hover {
	color: #ff9046;
}
/**************************************************************************/
/*                                MAIN DIVS                               */
/**************************************************************************/
body {
	background: #f1f1f1;
}
#wrapper {
	background: #fff;
	margin: 0 auto;
	width: 950px;
	position: relative;
}

#header {
	background: #fff;
	width: 100%;
}
#headerwrapper {
	background: #fff;
	margin: 0 auto;
	width: 900px;
}
#innerwrapper {
	background: #fff;
	margin: 0 auto;
	width: 900px;
}
#content {
	background: #fff;
	width: 100%;
	float: left;
}
#left_content {
	width: 170px;
	float: left;
}
#center_content {
	width: 710px;
	float: right;
}
#footer {
	background: #fff;
	/* padding: 0 30px; */
	width: 100%;
	text-align: left;
}
#footer a {
	color: #636363;
	font-size: 12px;
}
/*************************** HEADER ***************************/
#header {
	height: 90px;
}
#logo {
	float: left;
	margin-top: 25px;
}
#logo a {
	background: url(/images/2/logo.png) left top no-repeat;
	height: 65px;
	width: 375px;
}
#logoRoth {
	background: url(/images/2/logo_roth.png) top left no-repeat;
	float: left;
	position: absolute;
	left: 780px;
	top: 35px;
	height: 35px;
	width: 85px;
}
/*************************** MAIN NAV **************************/
#nav {
	background: url(/images/2/nav_bar.png) left bottom repeat-x;
	height: 30px;
	margin-bottom: 10px;
	width: 100%;
	/* padding: 0 30px; */
}

#nav ul li {
	display: block;
	float: left;
	height: 30px;
	position: relative;
}

#nav .navLink a {
	display: block;
	float: left;
	width: 93px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	font-size: 13px;
}
#nav .navDivider img {
	display: block;
	float: left;
	width: 12px;
	height: 30px;

}
/*************************** CONTENT ***************************/
#content {
	margin-bottom: 30px;
}
.row1 {
	margin-bottom: 15px;
}
.section {
	margin-bottom: 10px;
}
#remarkable img {
	border: 2px solid #b4cd96;
	height: 120px;
	float: left;
	margin-right: 15px;
	width: 110px;
}
/***************************** BOXES ****************************/
.boxGray, .boxGreen, .boxYellow {
	behavior: url(images/2/PIE.htc);	
	border-radius: 5px;	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
	position: relative;
}
.boxGray {
	background: #efefef;
	border: 1px solid #d1d1d1;
	padding: 10px;
	float: left;
}
.boxGreen {
	background: #669977;
	border: 1px solid #588668;
	color: #fff;
	padding: 15px 15px 10px 15px;
}
.boxYellow {
	background: #F1D861 url(/images/2/box_yellow.png) left top repeat-x;
	border: 1px solid #f9e582;
	padding: 10px;
}

.boxYellowNav {
	background: #F1D861 url(/images/2/box_yellow_nav.png) left top repeat-x;
	border: 1px solid #f9e582;
	padding: 10px;
}
/***************************** FOOTER ****************************/
#footer {
	padding-bottom: 20px;
}
/*************************** UTILITIES ***************************/
#utilities {
	background: url(/images/2/utilities.png) left top no-repeat;
	color: #fff;
	font-size: 1em;
	height: 25px;
	position: absolute;
	left: 730px;
	top: 0px;
	width: 165px;
}
#utilities ul {
	margin: 3px 0 0 32px;
}
#utilities li {
	margin-right: 15px;
}
/************ DISPLAY ************/
#logo a,
#logoRoth,
.externalLink {
	display: block;
}
#rankings,
.boxGray, 
.boxGreen,
.row1,
.row2,
.section {
	display: block;
	overflow: hidden;
}
/************** SPAN *************/
#header span {
	display: none;
	visibility: hidden;
}
/**************************************************************************/
/*                                  FORMS                                 */
/**************************************************************************/
#btnLogin {
	background: url(/images/2/sign_in.png) left top no-repeat;
}
#btnRedeem {
	background: url(/images/2/redeem.png) left top no-repeat;
}
#btnLogin:hover, #btnRedeem:hover {
	background-position: bottom;
}
.input {
	border: 1px solid #b8b8b8;
	height: 25px;
	width: 245px;
}
.marginBottom {
	margin-bottom: .5em;
}
.submit {
	border: 0;
	float: right;
	height: 25px;
	width: 85px;
}
/**************************************************************************/
/*                                 TABLES                                 */
/**************************************************************************/

table {
	font-size: 13px;
}
table td {
	padding: 5px;
}
thead td {
	color: #3c6399;
	font-size: 16px;
	height: 35px;
	text-align: center;
	vertical-align: middle;
}
#rankings .col2 {
	border-right: 1px solid #797979;
	padding-right: 10px;
}
#rankings .col3 {
	padding-left: 10px;
	text-align: center;
}
.reports_col1 {
	width: 400px;
	height: 30px;
	line-height: 30px;
	float: left;
}
.reports_col2 {
	width: 310px;
	height: 30px;
	line-height: 30px;
	float: left;
	font-size: 14px;
	text-align: right;
}
.odd {
	background: #cfd9e8;
}
.even,
thead td {
	background: #efefef;
}
/************* RANKINGS **************/
#rankings table {	
	float: left;
	width: 290px;
}
#rankings .tableLeft,
#rankings .tableCenter {
	margin-right: 10px;
}

/**************************************************************************/
/*                                  IE6                                   */
/**************************************************************************/
.submit {
	_margin-bottom: -10px;
}



/*

	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.


*/

/*

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

a, a:link, a:visited {
	color: #d35908;
	text-decoration	    	: none;
}

a:hover {
	text-decoration	    	: underline;
	color: #ff9046;
}

/* Left Navigation Styles */


a.leftnav, a.leftnav:link, a.leftnav:visited {
	font-size				: 12px;
	color: #d35908; /* To be changed to customers colors */
	text-decoration	    	: none;
}

a.leftnav:hover {
	text-decoration	    	: none;
	color: #ff9046; /* To be changed to customers colors */
}





/* END Left Navigation styles */



/*

	Side Menu link styles
	
		
*/

a.sidemenu, a.sidemenu:link, a.sidemenu:visited {
	
	text-decoration	    	: none;
	color					: #d35908; /* To be changed to customers colors */
	padding-left: 5px;
}

a.sidemenu:hover {

	color					: #ff9046; /* To be changed to customers colors */
	text-decoration	    	: underline;
}

a.sidesubmenu, a.sidesubmenu:link, a.sidesubmenu:visited {
	
	text-decoration	    	: none;
	color					: #d35908; /* To be changed to customers colors */
	margin-left: 10px;
}

a.sidesubmenu:hover {

	color					: #ff9046; /* To be changed to customers colors */
	text-decoration	    	: underline;
}

td.sidemenu {
	
	text-decoration	    	: none;
	color					: #FFFFFF; /* To be changed to customers colors */
	padding-top				: 2px;
	padding-left			: 3px;
	padding-bottom			: 5px;  
	font-size				: 11px;
}

td.sidemenu, td.sidemenu:link, td.sidemenu:visited {
	
	text-decoration	    	: none;
}


td.sidesubmenu {
	
	text-decoration	    	: none;
	color					: #FFFFFF; /* To be changed to customers colors */
	padding-top				: 2px;
	padding-left			: 6px;
	padding-bottom			: 3px; 
	font-size				: 10px;
}

td.sidesubmenu, td.sidesubmenu:link, td.sidesubmenu:visited {
	
	text-decoration	    	: none;
}


td.searchsidemenu {
	
	text-decoration	    	: none;
	color					: #000000; /* To be changed to customers colors */
	padding-top				: 1px;
	padding-left			: 3px;
	padding-bottom			: 3px;  
	font-size				: 10px;
}

td.searchsidemenu, td.searchsidemenu:link, td.searchsidemenu:visited {
	
	text-decoration	    	: none;
}



/*




	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			: 1024px;
    margin			: auto;
    float               	: none;
}

#left_pane {
	width			: 200px;
	float			: left;
}




#center_pane {
	width			: 785px;
	float			: right;
	background-color: #FFFFFF;
}


.center_pane_inner {
	width			: 750px;
	float			: none;
	margin			: auto;
}



#right_pane {
}

div.content	{
	 background-color: #FFFFFF;
	 width			 : 950px;

}

div.contentinner	{
	 width			: 100%;
	 float			: none;
	 margin			: auto;
}




div.full_width {
	width: 100%;
}


.topinfo {
	width					: 100%;
	float					: left;
	margin-bottom			: 10px;
	height					: 36px;
	border-bottom			: 2px solid #1e3a85;
}

div.welcomecontent	{
	width			: 200px;
	line-height		: 36px;
	padding-left	: 15px;
	float			: left;
	font-size		: 14px;
	font-weight		: bold;

}


.newsearchbox {
	width					: 565px;
	float					: right;
}


.mainsearchbox {
	width					: 300px;
	float					: left;
	height					: 20px;
	margin					: 5px 5px 5px 0px;
	/*
	background-image		: url(/images/2/2/search.gif);
	background-position		: left center;
	background-repeat		: no-repeat;
	*/
	padding					: 3px 5px 3px 5px;
	background-color		: #ffffff;
	
}

.searchcatdrop {
	width					: 150px;
	float					: left;
	margin					: 5px 5px 5px 0px;
	padding					: 5px;
	background-color		: #ffffff;
}

.searchbutton {
	width					: 60px;
	padding					: 5px;
	float					: left;
	text-align				: center;
	margin					: 5px 0px 0px 0px;

}


/*

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

div.headermenu{
	padding-top		: 0px;
	height          : 75px;
	width			: 840px;
	text-align		: left;
	color			: #1E3a85; /* To be changed to customers colors */
	font-weight		: bold;
	float			: right;
}

a.header, a.header:link, a.header:visited {
	
	text-decoration	    	: none;
	color					: #1E3a85; /* To be changed to customers colors */
	
	font-weight				: bold;
}

a.header:hover {

	color					: #000000;  /*To be changed to customers colors*/
	text-decoration	    	: none;
} 

a.headerhover, a.headerhover:link, a.headerhover:visited {
	
	text-decoration	    	: none;
	color					: #000000; /* To be changed to customers colors */
	cursor					: default;
	font-weight				: bold;
}

a.headerhover:hover {

	color					: #1E3a85;  /*To be changed to customers colors*/
	text-decoration	    	: none;
	cursor					: default;
} 


span.header{

	color					: #CCCCCC; /* To be changed to customers colors */
}


/*

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

.footer {
    text-align          	: center;
	width					: 100%;
	padding-top				: 10px;
	height: 100px;
	border-top				: 2px solid #1e3a85;
	background-color: #fff;
}

	.footer a {
		color: #000;
		text-decoration: none;
	}

		.footer a:hover {
			text-decoration: underline;
		}

div.footer {
    text-align          	: center;
	width					: 950px;
	padding-top				: 25px;
}

div.footermenu {
    text-align          	: center;
	width					: 950px;
	border-top				: 2px solid #1e3a85;
	padding-top				: 10px;
}

div.footer a:link {
	color            	: #000000 ! important;
	font                	: 10px Arial;
}

div.footer a:visited {
	color            	: #000000 ! important;
	font             	: 10px Arial;
}

div.footer a:hover {
	font                	: 10px Arial;
}
	
div.footer span {
    color               	: #000000;
    margin              	: 0px 3px 0px 3px;
	font                	: 10px Arial;
}



/* these are for the nomination process */
div.process_wrapper {
	border 					: 1px solid #666666;
	float					: left;
	width					: 585px;
}

div.process_head {
	float					: left;
	width					: 100%;
	background-color		: #666666;
	color					: white;
	padding					: 5px;
}

div.process_block {
	border-bottom			: 1px solid #666666;
	float					: left;
	padding					: 0px;
	padding-top				: 15px;
	padding-bottom			: 15px;
	width				: 100%;
}

div.process_spacer {
	float					: left;
	width					: 10px;	
}

div.process_line {
	width					: 100%;
	margin-top				: 5px;
	float					: left;
}

div.process_left {
	font-weight				: 700;
	width					: 100px;
	float					: left;
}	

div.process_right {
	width					: 445px;
	float					: left;
}


/*

	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.
*/

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

#content ul {
	padding-top		: 3px;
	padding-bottom	: 3px;
	float: left;
}

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

#center_content li {
	margin: 0px;
}

/*

	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			: 100%;
	text-align		: center;
	vertical-align	: middle;
	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				: 100%;
	text-align      	: center;
	vertical-align		: middle;
}

.notice_special {
	width				: 100%;
	float				: left;
	border				: 1px solid #fcefa1;
	background-color	: #fbf9ee;
	color				: #363636;
	font-size			: 14px;
	font-weight			: bold;
}

	.notice_special_inner {
		padding				: 10px;
	}
	
.error_special {
	width				: 100%;
	float				: left;
	border				: 1px solid #cd0a0a;
	background-color	: #fef1ec;
	color				: #cd0a0a;
	font-size			: 14px;
	font-weight			: bold;
}

	.error_special_inner {
		padding				: 10px;
	}

/*

	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/2/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;
}

/* this is for asa tables */
table.asa {
	width			: 780px;
	border			: 1px solid #e07b29;
	padding			: 1px;	
	text-align		: center;
}

tr.asaheader {
	background-color 	: #e07b29;
	font-weight			: 700;
	color				: #000000;
	line-height			: 20px;
	height				: 20px;
}

tr.asa {
	height				: 20px;
}

td.asa {
	height				: 20px;
}	

/*
	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 {
	border			: none;
	color			: #000000;
}


.light_block_nav{ 
	margin-bottom	: 5px; 
	margin-top		: 5px;
	border			: 0px; 
}

.dark_block {
   	background      : #e07b29;
	color			: #ffffff;
	float: left;
}


.xbrowser_padded_header {
	width			: 100%; 
	line-height		: 17px; 
	text-indent		: 2px; 
	color			: #ffffff;      /* yellow writing on hte banner - to be changed to customers colors   */
   	background          : #e07b29;  /* this is red, for the dark headers - to be changed to customers colors */
	vertical-align		: middle;
	float: left;
}

.dark_block_table {
   	background      : #e07b29;
	color			: #ffffff;
}


.xbrowser_padded_header_table {
	width			: 100%; 
	line-height		: 17px; 
	text-indent		: 2px; 
	color			: #ffffff;      /* yellow writing on hte banner - to be changed to customers colors   */
   	background          : #e07b29;  /* this is red, for the dark headers - to be changed to customers colors */
	vertical-align		: middle;
}

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

.text_center {
	text-align		: center;
}

/* This is for image headings */
.heading {
	width				: 100%;
	border: none;
	margin-bottom		: 6px;
	color: #111111;
	font-size: 16px;
	font-weight: bold;
	padding-left: 5px;
}

/*
	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.
*/


.formlabel {
	width			: 150px;
	text-align		: right;
	height			: 25px;
	line-height		: 25px;
	margin-top		: 2px;
	margin-bottom	: 1px;
}

.forminput {
	width			: 250px;
	padding-left	: 5px;
	text-align		: left;
	height			: 30px;
	margin-top		: 2px;
	margin-bottom	: 3px;
}


.dropdownforce {
	width			: 250px;
}

.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		: left;
    line-height     : 25px;
    float: left;
}

.form_row div.col1search {
	width			: 110px;
	text-align		: right;
	float: left;
}

.form_row div.col2search {
	width			: 300px;
	padding-left	: 10px;
	float: left;
}

.search_form_width {
	width: 420px;
}

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

.form_row div.col2account {
	width			: 225px;
	padding-left	: 5px;
	float: left;
}

.form_row div.col3 {
	width			: 200px;
	padding-left	: 5px;
	color			: red;
	float: left;
}

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

.text_row_item {
	float: left;
	width: 100%;
}

.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;
}

div.row {
  clear: both;
  padding-top: 5px;
  }

div.row span.label {
  float: left;
  width: 150px;
  text-align: right;
  }

div.row span.formw {
  float: right;
  width: 250px;
  text-align: left;
  } 
  
div.spacer {
  clear: both;
  }

/*

	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 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 {
        font-size               : 10px;
        border                  : 1px solid #999999;
        background              : #ffffff;
}

table.calendar input:hover{
	background-color:	#006f3a; /* To be changed to customers colors */
	color			:	#FFFFFF;
	cursor			: 	pointer;
}

table.calendar select {

		font-size               : 10px;
        border                  : 1px solid #999999;
        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              : center;
        color                   : #006f3a;
        font-weight             : bold;
        width                   : 22px;
}

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

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

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

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

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

table.cells td.wkhead {
        background-color        : #aa4400;
        text-align              : center;
        border-right            : double #CCCCCC 3px;
        color                   : #006f3a;
}

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

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

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

table.cells td.cell_selected {
        background-color        : #006f3a;
        color                   : white;
}

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

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

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


/* Shop Item styles  */

div.shopitem {
	
	text-decoration	    	: none;
	margin-bottom			: 0px; 
	width					: 176px;
	height					: 176px;
	margin-left				: 0px; 
	text-align				: center;
	margin-top				: 10px;
}

div.shopper {
	border					: 1px solid #1E3a85;
	padding					: 2px;
}

div.shoptitle {
	height					: 25px;
	line-height				: 25px;
	width					: 176px;
	background-color		: #1E3a85;
}

a.shop, a.shop:link, a.shop:visited {
	text-decoration	    	: none;
	color					: #FFFFFF;
}

a.shop:hover {
	color					: #FFFFFF;
	text-decoration	    	: underline;
	
}



div.featured_item_text {
 	margin-top				: 2px;
 	text-align				: center;
 	line-height				: 10px;
 	width					: 150px;
 	padding					: 2px;
 	height					: 40px;
}


/* END Shop Item styles  */

/* Item Skeleton styles */

 div.item_skeleton {
 	float					: left;
 	width					: 215px;
 	margin-left				: 15px;
 	
 	
} 

#table_wrapper {
	width: 100%;
}

table.item_table {
	border					: 1px solid #cccccc;
	margin-bottom			: 15px;
}

td.brandtitle {
	padding					: 2px;
	background-color		: #CCCCCC;
	color					: #1e3a85;
}

div.item_skeleton_itemwrapper {
	width					: 195px;
	height					: 255px;
	margin-top				: 0px;
	margin-bottom			: 0px;
	}
	

/*div.item_skeleton_image {
	margin-top				: 5px;
 	overflow				: hidden;
 	width					: 170px;
 	height					: 160px;
 	text-align				: center;
 	line-height				: 160px;
}*/

table.item_skeleton_image {
 	overflow				: hidden;
 	width					: 170px;
 	height					: 170px;
 	text-align				: center;
}

a.item_image_link {
 	font-size				: 10px;
}

div.item_skeleton_name {
	width					: 180px;
	height					: 50px;
	/*margin-left				: 3px;*/
}

a.bold_link {
	font-weight				: bold;
	color					: #000;
}

div.item_skeleton_brand {
	width					: 205px;
	margin-left				: 0px;
	border-left				: 0px;
	/*margin-left				: 3px;*/
	padding-top				: 3px;
	padding-bottom			: 2px;
	color					: #000000;
	font-weight				: bold;
}

a.reg_link {
 	color					: #000000;
}

a.brand_link {
	color					: #1e3a85;
}

div.item_skeleton_points {
	width					: 180px;
	/*margin-left				: 3px;*/
	text-align				: right;
	font-weight				: bold;
	color					: #333333;
	height					: 20px;
}


div.item_skeleton_links {
	width					: 195px;
	/*margin-left				: 3px;*/
	text-align				: right;
	height					: 15px;
	background-image		: url(/images/2/viewitem.jpg);
	background-repeat		: no-repeat;
	background-position		: bottom right;
	
}


/* END Item Skeleton Styles */



/* dcategory ITEM SKELETON STYLES */


div.d_item_skeleton {
 	width					: 100%;
 	border-top				: 1px solid #ed9623;
 	margin-bottom			: 5px;
 	padding-top: 10px;
 	float: left;
 	
}

div.d_item_skeleton:first-child {
	width					: 100%;
 	margin-top			: 5px;
 	padding-top: 0px;
	border-top: none;
	float: left;
}

table.d_item_table {
	width					: 100%;
}

td.d_itemskeleton_image {
	width					: 170px;
}

td.d_itemskeleton_links {
	vertical-align			: top;
}
	


table.d_item_skeleton_image {
 	overflow				: hidden;
 	width					: 170px;
 	height					: 170px;
 	text-align				: center;
}

a.d_item_image_link {
 	font-size				: 10px;
}


a.d_bold_link {
	font-weight				: bold;
	color					: #1e3a85;
}


a.d_reg_link {
 	color					: #1e3a85;
}

span.d_item_skeleton_desc {
	color					: #666666;
}

span.d_item_skeleton_points {
	font-weight				: bold;
	color					: #333333;
}

/* END dcategory ITEM SKELETON STYLES */



/* lcategory ITEM SKELETON STYLES */


div.l_item_skeleton {
 	width					: 100%;
 	border-top				: 1px solid #ed9623;
 	margin-bottom			: 3px;
 	float: left;
 	
}

div.l_item_skeleton:first-child {
	width					: 100%;
 	padding-top: 0px;
	border-top: none;
	float: left;
}

table.l_item_table {
	width					: 100%;
}

td.l_itemskeleton_image {
	width					: 35px;
}

td.l_itemskeleton_links {
	vertical-align			: top;
}

td.l_itemskeleton_quick {
	vertical-align			: top;
	text-align				: right;
}
	


table.l_item_skeleton_image {
 	overflow				: hidden;
 	width					: 35px;
 	height					: 35px;
 	text-align				: center;
}



a.l_bold_link {
	font-weight				: bold;
	color					: #1e3a85;
}


span.l_item_skeleton_points {

	color					: #333333;
}



/* END lcategory ITEM SKELETON STYLES */





/* JSON Pager Styles */

div.pager {
	width					: 100%;
	margin-top				: 5px;
	margin-bottom			: 3px;
	height					: 20px;
	background-color		: none;
	border-bottom			: 1px solid #ed9623;
	float: left;
}

div.pagerbottom {
	width					: 100%;
	margin-top				: 3px;
	margin-bottom			: 10px;
	height					: 20px;
	background-color		: none;
	border-top				: 1px solid #ed9623;
	float: left;
}

div.pager_first {
	width					: 15%;
	height					: 20px;
	line-height				: 18px;
	float: left;
}


div.pager_pages {
	width					: 70%;
	height					: 20px;
	line-height				: 18px;
	text-align				: center;
	color					: #1e3a85;
	float: left;
}

div.pager_last {
	width					: 15%;
	height					: 20px;
	line-height				: 18px;
	text-align				: right;
	float					: left;
}


a.pager, a.pager:link, a.pager:visited {
	color		    		: #1E3a85;
	text-decoration	    	: none;
}

a.pager:hover {
	text-decoration	    	: underline;
}

a.pages, a.pages:link, a.pages:visited {
	color		    		: #1E3a85;
	margin-left				: 2px;
	margin-right			: 2px;
	text-decoration	    	: none;
}

a.pages:hover {
	text-decoration	    	: underline;
}

a.pagesbold, a.pagesbold:link, a.pagesbold:visited {
	color		    		: #1E3a85;
	margin-left				: 2px;
	margin-right			: 2px;
	font-size				: 14px;
	font-weight				: 700;
	text-decoration	    	: none;
}

a.pagesbold:hover {
	text-decoration	    	: underline;
}




/* END JSON Pager Styles */

/* Site cleanup styles -> Attempting to cleanup site by removing as many styles from the .xsl files as possible and moving them here in the CSS
   This is the location for styles that don't fit in well anywhere else.  Any random styles can be put here */

.default {
 	width					: 125px;
 	margin-right			: 2px;
 	vertical-align			: middle;
 	color					: #666666;
}

.go {
	vertical-align			: middle;
}

.advancedsearch {
	font-size				: 9px;
	color					: #000000;
	text-decoration			: underline;
}



/* NEW INNER LEFT PANE STYLES */


.navpaneleft {
	width: 200px;
	float: left;
}

	.navpaneleft span {
		display: block;
		float: left;
		height: 25px;
		line-height: 25px;
		font-weight: bold;
		border: 1px solid #1e3a85;
		background-color: #ffffff;
		color: #000000;
		margin: 0px 0px 5px 0px;
		width: 188px;
		padding-left: 10px;
	}
	
	.navpaneleft span a {
		color: #1e3a85;
		text-decoration: none;
	}
	
	
	.navpaneleft a.select {
		display: block;
		float: left;
		height: 25px;
		line-height: 25px;
		border-bottom: 1px solid #e3e3e3;
		background-color: #ffffff;
		color: #1e3a85;
		text-decoration	: none;
		width: 190px;
		padding-left: 10px;
	}
		.navpaneleft a.select:hover {
			color: #1e3a85;
			background-color: #f7f7f7;
			text-decoration	: none;
		}
		
	.navpaneleft a.itsme {
		display: block;
		float: left;
		height: 25px;
		line-height: 25px;
		border-bottom: 1px solid #e3e3e3;
		color: #1e3a85;
		background-color: #f7f7f7;
		text-decoration	: none;
		width: 190px;
		padding-left: 10px;
	}

.navpaneleft span.tiertwo {
		display: block;
		float: left;
		height: 25px;
		line-height: 25px;
		font-weight: bold;
		border: 1px solid #1e3a85;
		background-color: #ffffff;
		color: #000000;
		margin: 10px 0px 5px 0px;
		width: 188px;
		padding-left: 10px;
	}
	


.navpaneleft span.mycategory {
		display: block;
		float: left;
		height: 25px;
		line-height: 25px;
		font-weight: bold;
		border: 1px solid #1e3a85;
		background-color: #f7f7f7;
		color: #000000;
		margin: 0px 0px 5px 0px;
		width: 188px;
		padding-left: 10px;
	}	
	



	
.clear {
    clear: both;
    height: 1px;
   
    /* IE HACK */
    font-size: 0px;
    line-height: 0px;
}




/* MAIN SHOP PAGE STYLES */


.mainattraction {
	width: 100%;
	float: left;
	height: 305px;
}

	.mainattractionImage {
		float: left;
		width: 305px;
		margin-left: 10px;
	}
	
	.mainattractionText {
		width: 350px;
		float: left;
	}
		.mainattractionText span {
			position: relative;
			top: 80px;
			font-size: 18px;
			font-weight: bold;
			line-height: 20px;
		}

		.mainattractionText a {
			color: #1e3a85;
			font-size: 14px;
			text-decoration: none;
		}

		.mainattractionText a:hover {
			text-decoration: underline;
		}


		
.categorypush {
	margin-top: 15px;
	width: 100%;
	float: left;
	height: 150px;
	border-bottom: 1px solid #e3e3e3;
}


.recenthistory {
	margin-top: 15px;
	width: 100%;
	float: left;
	height: 150px;
	border-bottom: 1px solid #e3e3e3;
}

	.recenthistory span {
		display: block;
		height: 25px;
		line-height: 25px;
		float: left;
		width: 100%;
		font-size: 16px;
		font-weight: bold;
		color: #000000;
	}

.breadcrumb {
	width: 100%;
	float: left;
	height: 25px;
	line-height: 25px;
	font-size: 12px;
	background-color: #ffffff;
	border: 1px solid #1e3a85;
	margin-bottom: 10px;
}
		

	.breadcrumb a {
		color: #1e3a85;
		font-weight: bold;
		text-decoration	: none;
	}
		.breadcrumb a.hover {
			text-decoration	: none;
		}

.viewtypes {
	width: 100%;
	float: left;
	height: 20px;
	line-height: 20px;
	text-align: right;
	margin-bottom: 10px;
}



.hotlist {
	width: 100%;
	float: left;
	padding-top: 10px;
}

	.hotlist span {
		display: block;
		height: 30px;
		line-height: 25px;
		float: left;
		width: 100%;
		font-size: 16px;
		font-weight: bold;
		color: #000000;
		margin-bottom: 15px;
		border-bottom: 1px solid #ed9623;
	}
	
.carousel {
	width: 710px;
	float: left;
	height: 200px;
}

	.carousel ul {
		margin: 0;
		list-style: none;
	}

	.carousel li div {
		width: 150px;
        height: 200px;
        margin: 0px 2px 0px 2px;
        text-align: center;
        font-size: 12px;
        float: left;
	}

	
	
	/*need to have the extra number on them so the js can have more than one carousel on a page */
	
	.hotlist .next, .next1, .next2, .next3, .next4, .next5 {
		width: 35px;
		float: left;
		height: 200px;
		display: block;
		background-image: url(/images/2/next.jpg);
		background-position: right center;
		background-repeat: no-repeat;
	}
	
	
	.hotlist .prev, .prev1, .prev2, .prev3, .prev4, .prev5 {
		width: 35px;
		height: 200px;
		float: left;
		display: block;
		background-image: url(/images/2/back.jpg);
		background-position: left center;
		background-repeat: no-repeat;
	}

.itemcontainer {
	width: 150px;
	height: 225px;
	float: left;
	margin: 0px 12px 25px 12px;
}

.itemcatcontainer {
	width: 150px;
	height: 270px;
	float: left;
	margin: 0px 12px 40px 12px;
}

.imagewrap {
	width: 150px;
	height: 150px;
	margin-bottom: 5px;
	padding-bottom: 3px;
}

.itembrand {
	height: 20px;
	line-height: 20px;
	font-weight: bold;
	color: #000;
	margin-bottom: 5px;
	width: 100%;
}

.itemname {
	height: 40px;
	width: 100%;
	color: #000;
	font-size: 12px;
}

.itemname a {
	color: #000;
	text-decoration: underline;
}

div.item_skeleton_points {
	width					: 150px;
	/*margin-left				: 3px;*/
	text-align				: right;
	font-weight				: bold;
	color					: #333333;
	height					: 20px;
	line-height: 20px;
	border-bottom: 2px solid #ed9623;
}
	
.superCat {
	width: 100%;
	height: 245px;
	float: left;
	padding-top: 10px;
	
}

	.superCat span {
		display: block;
		height: 30px;
		line-height: 25px;
		float: left;
		width: 100%;
		font-size: 16px;
		font-weight: bold;
		color: #000000;
		border-bottom: 1px solid #e3e3e3;
		margin-bottom: 10px;
	}	
	
	
	.superCat span .tomore {
		font-size: 12px;
		line-height: 25px;
		font-weight: normal;
		float: right;
	}
	
	.superCat .superCatItem {
		width: 33%;
		text-align: center;
	}
	
	
	
	
	
	
	
/* rcategory page popular items */

.popitems {
	width: 100%;
	height: 185px;
	float: left;
	padding-top: 10px;
	border-bottom: 1px solid #ed9623;
}

	.popitems span {
		display: block;
		height: 25px;
		line-height: 25px;
		float: left;
		width: 100%;
		font-size: 16px;
		font-weight: bold;
		color: #000000;
	}
	
.carouselpop {
	width: 600px;
	float: left;
	height: 150px;
}

	.carouselpop ul {
		margin: 0;
		list-style: none;
	}

	.carouselpop li div {
		width: 150px;
        height: 150px;
        text-align: center;
	}
	
	
	
	/*need to have the extra number on them so the js can have more than one carousel on a page */
	
	.popitems .next, .next1, .next2, .next3, .next4, .next5 {
		width: 35px;
		float: left;
		height: 150px;
		display: block;
		background-image: url(/images/2/2/next.jpg);
		background-position: right center;
		background-repeat: no-repeat;
	}
	
	
	.popitems .prev, .prev1, .prev2, .prev3, .prev4, .prev5 {
		width: 35px;
		height: 150px;
		float: left;
		display: block;
		background-image: url(/images/2/2/back.jpg);
		background-position: left center;
		background-repeat: no-repeat;
	}
	




/* IMAGE PAGE STYLES  width of image + width of details should be less than width of center_pane_inner */

.item_image {
	width: 310px;
	float: right;
	text-align: left;
	margin-left: 10px;
}


.item_details {
	float: left;
	width: 375px;
}

	.item_details .smallgray {
		font-size: 10px;
		color: #aaaaaa;
	}


	.item_details .pointstext {
		font-size: 14px;
		color: #000000;
		font-weight: bold;
	}



.formcart {
	float: left;
}

.formwishlist {
	float: left;
}

.productdesc {
	border-top: 1px solid #ed9623;
	width: 100%;
	float: left;
	padding-top: 5px;
	margin-top: 5px;
	padding-left
}

.relateditems {
	padding-top: 5px;
	margin-top: 15px;
	border-top: 1px solid #ed9623;
	width: 100%;
	float: left;
}


/* should be same as center_pane_inner */
.big_float {
	width			: 710px;
	float			: none;
	margin			: auto;
}



.rcatItems {
	width			: 100%;
	float			: left;
	margin-top		: 15px;
}

.rcatItemsPop {
	width			: 697px;
	float			: none;
	margin			: auto;
}

.rcatBig {
	width			: 100%;
	float			: left;
	height			: 275px;
	border-bottom: 1px solid #e3e3e3;
}



.splitthree {
	width			: 33%;
	float			: left;
}

.categoryCallout {
	width			: 200px;
	height			: 200px;
	border-top		: 10px solid #e3e3e3;
	border-left		: 10px solid #e3e3e3;
	border-right	: 10px solid #cccccc;
	border-bottom	: 10px solid #cccccc;
	margin			: auto;
	float			: none;
	overflow		: hidden;
}


.categoryCalloutName {
	position		: relative;
	top				: 165px;
	left			: 0px;
	background-color: #ffffff;
	color			: #1e3a85;
	padding			: 10px 10px 10px 10px;
	border-bottom	: 2px solid #cccccc;
	font-weight		: bold;
	text-decoration : none;
}


/* END OF IMAGE PAGE STYLES */

.clearFieldBlurred { color: #666; font-style: italic; }
.clearFieldActive { color: #000; }

/* nearly the same as rcatItems and rcatItemsPop */
.catItems {
	width			: 100%;
	float			: left;
}

.catItemsPop {
	width			: 697px;
	float			: none;
	margin			: auto;
}

/* Search Styles */

.search_input {
	width: 90px;  
	height: 15px !important; 
	float: left; 
	font-size: 13px; 
	margin-left: 5px;
}

.search_button {
	width: 30px; 
	float: left;
	margin-left: 5px;
}
.advancedsearch {
	float: left;
	font-size				: 10px;
	color					: #000000;
	text-decoration			: underline;
	margin-left: 5px;
}

.account_button_blank {
        height: 25px;
        width: 110px;
        display: block;
        background-image: url(/images/buttons/blank.png);
        background-position: 0 0;
        color: #fff ! important;
        text-align: center;
        line-height: 25px;
        font-weight: normal;
}

.account_button_blank:hover {
        background-position: 0 -25px;
        text-decoration: none ! important;
}

.account_button {
	height: 25px;
	width: 110px;
	display: block;
	background-image: url(/images/buttons/my_account.png);
	background-position: 0 0;
}

.account_button:hover {
	background-position: 0 -25px;
}

.account_button_2 {
	height: 25px;
	width: 110px;
	display: block;
	background-image: url(/images/buttons/order_history.png);
	background-position: 0 0;
}

.account_button_2:hover {
	background-position: 0 -25px;
}

.account_button_3 {
	height: 25px;
	width: 110px;
	display: block;
	background-image: url(/images/buttons/point_account.png);
	background-position: 0 0;
}

.account_button_3:hover {
	background-position: 0 -25px;
}

.account_button_4 {
	height: 25px;
	width: 110px;
	display: block;
	background-image: url(/images/buttons/token_account.png);
	background-position: 0 0;
}

.account_button_4:hover {
	background-position: 0 -25px;
}

.help_button {
	height: 25px;
	width: 140px;
	display: block;
	background-image: url(/images/buttons/send_help_request.png);
	background-position: 0 0;
}

.help_button:hover {
	background-position: 0 -25px;
}

/* 

	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.
	
*/

.award-buttons {
    margin-top: 10px;
    margin-right: 10px;
    padding: 10px 10px;
    font-size: 14px;
    line-height: 100%;
    color: #000 ! important;
    display:inline-block;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    transition: background 0.1s ease-in-out;
    -webkit-transition: background 0.1s ease-in-out;
    -moz-transition: background 0.1s ease-in-out;
    -ms-transition: background 0.1s ease-in-out;
    -o-transition: background 0.1s ease-in-out;
    color: #000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #ee853e;
}

.award-buttons:active {
    padding-top: 15px;
        margin-bottom: -1px;
}

.award-buttons, .award-buttons:hover, .award-buttons:active {
    outline: 0 none;
    text-decoration: none;
    color: #fff;
}

.award-buttons:hover {
    background-color: #ea711f;
}