/* CANVAS CSS Document */
/* 2010.04.25 updated */
/*******************

START - Global Properties

*******************/
/* Establishing CSS Framework for future development 
.whole-page, #hd, #bd, #ft{
	border:1px solid #000;
}
.whole-page{
	border-color:#F00;
}
#hd{
	border-color:#0F0;
}
#bd{
	border-color:#00F
}
#ft{
	border-color:#FF0;
}
 END Establishing CSS Framework for future development */

body{ 						/* Controls the body elements of all pages */
	background:#091822;		/* Set the Background color */
	/*background:#162b3f; - an older shade of blue keeping just incase*/
	margin:0;				/* Clears out random margin issues */
	padding:0;				/* Clears out random padding issues */
	*text-align:center;		/* Because IE is Stupid */
	/*background-color:#FFFFFF;	/* POSSIBLE LIGHTER VERSION 
	background-image:url(/canvas/images/20090903_canvas_bg.gif);
	background-position:top;
	background-repeat:repeat-y;
	*/
}
/** REMOVED 2010.01.05 **/
/*
#whole-page, #wholePage, #page, .whole-page{
	margin:0px;				/* Clears out random margin issues 
	padding:0px;			/* Clears out random padding issues 
	margin-left:auto;		/* Centers the content from the left 
	margin-right:auto;		/* Centers the content from the right 
	text-align:left;		/* Keeps the text left aligned 
	width:990px;			/* Set the width of the actual content within the pages to the 1024 width 
	background:#FFFFFF;		/* Keeps the background white for the content areas 
}

#fullPage{
	width:990px;			 Set the width of the actual content within the pages to the 1024 width 
}
*/
/** REMOVED 2010.01.05 **/
#pageContent, .content, .breadCrumb{
	background:none;
	margin-top:30px;
	/*background:#FFFFFF;		 Keeps the background white due to inconsitencies in how the content is layed out on each page */
}
#fullPage .breadCrumb, #pageContent .breadcrumbs, #productAlternatesALink{
	margin-top:30px;		/* Pushes the content within the pages to be below the dropped Canvas Logo */
}
/** REMOVED 2010.01.05 **/
/*
#fullPage .content, #fullPage .breadCrumb, #fullPage #pageContent{
	margin-left:111px;		/* Helps center the content at a 1024 width 
}

.pageContent{
	background:#FFFFFF;		/* Sets the background color to white for the content area of the shopping bag pages 
	width:990px;	/* Resets the widht to 990px wide due to inconsistent CSS within other pages 
	margin:0px;
	padding:0px;
}
*/
/** REMOVED 2010.01.05 **/

/* This sets the Global Properties for both the Canvas Header and Footer */
#canvas-global-footer, #canvas-global-header{ 	
	font-family:Arial, Helvetica, sans-serif;	/* Sets the fonts to Arial */
	background:#091822;							/* Set the background to the dark blue color, be sure that if the body background is changed that you update this color as well*/
	margin:0px;									/* Clears out random margin issues */
	padding:0px;								/* Clears out random padding issues */
	color:#B6B6A7;								/* Sets the Font color to the nice shade of brownish toupe */
	/*width:990px;*/
}
/*******************

END - Global Properties

*******************/
/*******************

START - HEADER - Content

*******************/
#canvas-global-header{					/* This is the containing div for the canvas global header */
	position:relative;					/* By setting it to postition relative, we are able to control the position of the canvas logo indepentently of the browser window */
	margin:0px;							/* Clears out random margin issues */
	padding-top:25px 0px 10px 0px;		/* Set the global nav slightly below the address bar, could be tightened up to remove white space */
	height:135px;						/* Due to internal elements floating and not clearing out correctly this is used to control how tall the global header container is */
}

#canvas_logo{				/* This is the actual Canvas Logo */		
	position:absolute;		/* by absolute positioning the logo we are able to give depth to the actual pages */
	top:5px;				/* 30px from the upper left corner of the #canvas-global-header */
	left:-10px;				/* 20px from the left edge of the #canvas-global-header */
	border:none;			/* this removes the border that is applied to the linking of the logo */
	z-index:999;			/* sets the Logo to be the highest most element on the page, unless someone decides to set thier z-index to 9999, yeah that is 4 nines. */
}

#canvas-global-header #menu{/*This is used to postisiton the navigation around the logo*/
	/*height:120px;	*/		/* Again we are using floating elements and due to inconsistencies in the browser we set the hieght to match the #canvas-global-header height */
	color:#B6B6A7;			/* Sets the Font color to the nice shade of brownish toupe */
	/*font-size:.7em;		   Originally was using em calculations for the font size, like a good boy does but due to current site inconsistencies switched over to px*/
	font-size:11.25px;
	/*letter-spacing:1px;	   Since we are so longer using EMs to calculate the font-size the 1px letter spacing no longer calculates correctly */
	line-height: 1.175em;	/* Keeps the line height of each link in check */
	margin:0px;				/* Clears out random margin issues */
	padding:30px 0px 10px 210px; /* pushes the menu down 25px, sets 0px to the right and 5px from the bottom and a whopping 280px from the left to get around the canvas logo */
}
#menu-customer-service{		/* Contianer Div used for the customer service links, which include -  800.###.####  CUSTOMER SERVICE  SIGN-IN  MY BAG  */ 
	color:#6C899E;			/* Sets the Font color to the nice shade of blue-ish gray */
	font-size:11.25px;		/* Sets the font equal to its sister navigation be sure to keep in check with  the #menu links */
	line-height: 1.175em;	/* Sets the font equal to its sister navigation be sure to keep in check with  the #menu links */
	margin:0px;				/* Clears out random margin issues */
	text-align:right;		/* Due to this is on the right side of the screen we align the text on the right */
	float:right;			/* Due to this is on the right side of the screen we float it to the right, it gives us more controll that trying to set it float left and adding a bunch of pixels */
}
#landsend{
	margin-top:30px;		/* This ID is not currently being used but I will leave it in. It is designed to be pushed to the bottom of the #menu */
}
/* Controls the anchor links for the menu */
#menu a:link,
#menu a:visited,
#menu a:hover{
	text-decoration:none;	/* no underline */
	color:#B6B6A7;			/* Sets the Font color to the nice shade of brownish toupe */			
	display:block;			/* sets the anchors so that they are block level and allows the user to not have to have the cursor directly over the text for the link to work */
	cursor:pointer;			/* Changes the cursor to the hand icon when a user is over the link, addtional notification that it is linkable */
}
#menu-customer-service a:link,
#menu-customer-service a:visited,
#menu-customer-service a:hover{
	text-decoration:none;	/* no underline */
	color:#6C899E;			/* Sets the Font color to the nice shade of blue-ish gray */			
	display:block;			/* sets the anchors so that they are block level and allows the user to not have to have the cursor directly over the text for the link to work */
	cursor:pointer;			/* Changes the cursor to the hand icon when a user is over the link, addtional notification that it is linkable */
	
}
#menu a:hover{
	color:#FFFFFF;			/* Changes the link color to white on hover */
}

/* Making the Shopping bag link look so freaking cool */
a#shopping-bag-link:link,
a#shopping-bag-link:visited,
a#shopping-bag-link:hover{
	margin-top:18px;												/* Pushes the link to the bottom of the #menu navigatio*/
	padding:5px 20px 2px 0px;										/* Adds another 5px to the top so accessing the link is easier, 20px to the left for the nifty little icon, 2px to the bottom just cause and 0px to the left since it is floating right */
	background-image:url(/canvas/images/091030_global_nav_sprites.gif);	/* CSS Sprites in full-effect */
	background-position:right -60px;								/* Aligns right but pushed down -60px */
	background-repeat:no-repeat;									/* No-repeat because repeating this would be stupid */
}
a#shopping-bag-link:hover{
	background-position:right -80px;								/* Aligns right but *NOW* pushed down -80px, we just saved another trip to the server by doing CSS rollovers awesomely */
}
a#personal-account:link,
a#personal-account:visited,
a#personal-account:hover{			/* the possibility to have the my account available in the future */
	display:none;
}
#menu .menu-row{
	/*width:15%;							replaced this with the set 125px width but leaving in for future width parameters */
	width:143px;							/* set width due to floating and layout issues in IE would like to switch back to %s for future use*/
	float:left;								/* Floating left so that each sub menu aligns to the left of the previous menu */
	height:90px;							/* set a hieght due to the background img and allowing links on the bottom mene */
	margin:0px;								/* Clears out random margin issues */	
	padding:5px 10px 0px 10px;				/* sets top padding to 0px, right padding set to 10px which allows for the right bar background img to align correctly, 0px for the bottom and 5px to the left so that the border and the text do no layout on top of each other. */
		*padding-right:0px;						/* IEs Box models is broken */
	/*border-right:.01em dashed #B6B6A7; 	Replaced this with a background image due to IE being stupid about how it handles 1px dashed borders */
	background-image:url(/canvas/images/090901_menu_row_bg.gif);	/* Using this because of IE see above note */
	background-position:top right;	/* positioning to the far right side of the .menu-row remeber to keep the 125px x-value equal to the width of the element. */
	background-repeat:repeat-y;		/* repeats on the Y value so that it repeats up and down not across */
	}
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Chrome rules here */
	#menu .menu-row{ width:147px;}
	}

#menu #row-2{				/* This is the sub-menus */
	display:none;
	width:150px;
	padding-left:20px;
	/* this initially hides the submenus */
}
#menu a.highlight:link,	/* A special class so that when a user is over the submenus it highlights the primary menu */
#menu a.highlight:visited,
#menu a.highlight:hover{		
	color:#FFFFFF;			/* sets the color to White */
}
/*switched this from #women to #canvas-story */
a#lands-end:link,
a#lands-end:visited,
a#lands-end:hover,
a#canvas-story:link,
a#canvas-story:visited,
a#canvas-story:hover{
	padding-top:10px;
}
a#lands-end:link,
a#lands-end:visited{
	color:#FFF;
}
a#lands-end:hover{
	color:#B6B6A7;
}
/*******************

END - HEADER - Content

*******************/



/*******************

START - Footer - Content

*******************/
.globalNavFooter{				/* This is the containing div for the canvas global footer  that already exsists within the current site*/
	margin:0px;					/* Clears out random margin issues */
	padding:0px;				/* Clears out random padding issues */
}
#canvas-global-footer{			/* This is the containing div for the canvas global header */
	padding:15px 0px 50px 0px;	/* pushes the footer off of the bottom of the page  and gives a little padding from the top of the existing page content */
	font-size:10px;				/* sets the font size for the contiaing div */
	color:#6C899E;				/* Sets the Font color to the nice shade of blue-ish gray */			
	background:#091822;
	border:1px solid #091822;
	_height:75px;
}


#canvas-global-footer form, #canvas-global-footer p{
	margin:0px;					/* Clears out random margin issues */
	padding-bottom:10px;		/* cleans up how the rows are layed out */
}
/* Controls all links within the global footer */
#canvas-global-footer a:link,
#canvas-global-footer a:visited,
#canvas-global-footer a:hover{
	color:#6C899E;				/* Sets the Font color to the nice shade of blue-ish gray */
	text-decoration:none;		/* no underline */
}
#canvas-global-footer a:hover{
	color:#FFFFFF;				/* sets the color to White */
}
/* ENDS Controls all links within the global footer */
.left-column{	/* Basic 50% width float left element */
	float:left;
	width:49%;
	text-align:left;
}
.right-column{	/* Basic remaining width float right element */
	float:right;
	text-align:right;	/* text align right since it floats right */
	padding-top:4px;	/* aligns second level text with second level text in left column */
}
#canvas-global-footer .left-column a:link, 
#canvas-global-footer .left-column a:visited,
#canvas-global-footer .left-column a:hover{
	background-image:url(/canvas/images/091030_global_nav_sprites.gif);	 /* CSS Sprites in full-effect */
	/*background-image:url(/canvas/images/090820_global_nav_sprites.gif);	Original CSS Sprites */
	background-repeat:no-repeat;/* No-repeat because repeating this would be stupid */
	padding:5px 0px 2px 24px;	/* offsets the link to allow for the background image to be visible and the link text to be aligned to the right */
	margin-right:15px;			/* pushes the next link over */	
}

#canvas-global-footer .right-column a:link, 
#canvas-global-footer .right-column a:visited,
#canvas-global-footer .right-column a:hover{
	margin-left:10px;	/* set the spacing between links that are in the right column */
}
#canvas-global-footer .right-column a#returns:link,
#canvas-global-footer .right-column a#returns:visited,
#canvas-global-footer .right-column a#returns:hover{
	margin-left:0px;/* Aligns left no extra space */
}
#canvas-global-footer #footer-legal{
	text-align:center;
	margin-top:65px;
	font-size:.95em;
}
#canvas-global-footer #footer-legal a{
	margin-left:15px;
}
a#getlivehelp:link,
a#getlivehelp:visited,
a#getlivehelp:hover{
	background-position:left -22px;		/* Aligns left but pushed down -22px */

}
a#getlivehelp:hover{
	background-position:left -42px;		/* Aligns left but *NOW* pushed down -42px */
}
a#facebook:link,
a#facebook:visited,
a#facebook:hover{
	background-position:left -101px;	/* Aligns left but pushed down -101px */
}
a#facebook:hover{
	background-position:left -121px;	/* Aligns left but *NOW* pushed down -121px */
}
a#blog:link,
a#blog:visited,
a#blog:hover{
	background-position:left -141.5px;	/* Aligns left but pushed down -101px */
}
a#blog:hover{
	background-position:left -161.5px;	/* Aligns left but *NOW* pushed down -121px */
}
#search,
#e-scribe{						/* This is the email sign-up form input field */
	width:160px;				/* set width to control the text input field */
	color:#65868A;				/* Sets the Font color to the nice shade of blue-ish gray */
	background:#091822;			/* Set the Background color of the text inputs */
	border:1px solid #65868A;	/* sets the border to the same color as the font color */
	font-family:'Courier New', Courier, monospace;	/* sets the input field font to Courier New */
	font-size:10px;				/* sets the font size for the value of the text input */
	margin:0px 5px 0px 10px;	/* sets margins top to 0 right to 5px bottom to 0px left to 10px; */
	padding:3px 5px 3px 5px;	/* may have to look at this a little bit more due to IE, but 3px top and bottom and 5px left and right */
	height:11px;				/* was 19px sets the height so that the IE can be happy other wise due to we do not have doctypes on all our pages the box model is not working correctly */	
}
/*#globalNavigationFooter #canvas-global-footer #e-scribe,			corrects the extra height on the index pages*/
/*#globalNavFooter #canvas-global-footer #e-scribe,					corrects the extra height on the product pages*/
div#mainCenteredDiv div.pageContent div div#canvas-global-footer div.left-column form#e-scribe-canvas input#e-scribe,	/*corrects the extra height on shopping bag pages*/
.pageContent #canvas-global-footer #e-scribe,						/*corrects the extra height on the shipto pages*/
#globalNavBottom #canvas-global-footer #e-scribe
{
	height:11px;
}

#wholePage #canvas-global-footer .left-column form#e-scribe-canvas input#e-scribe, /* Giftcard page adjustment */
div .pageContent #canvas-global-footer .left-column form#e-scribe-canvas input#e-scribe{ /* AccountPortal.cgi does not have a doctype set */
	height:19px;
}
#whole-page #canvas-global-footer .left-column form#e-scribe-canvas input#e-scribe{
	height:11px;
}
#search-button,
#escribe-button{
	vertical-align:bottom;			/* this keeps the submit button in line with the bottom of the input box and the label */
/*	*vertical-align:text-bottom;	 Thank you IE for your non-valid CSS properties */
}
/*******************

END - Footer - Content

*******************/
/*******************

START - index-page - Content

*******************/
/* TESTING product Layout on index. 
This is only here to modify the display for testing purposes.
It is currently taken out due to we need to understand what is desired for look and feel.
We will keeping current CSS until ready to deploy.
.productResultBanner, .paginationDisplayTop, .paginationDisplayBottom{
	border:none;
}
.paginationButton{
	border:none;
}
.paginationButtonSelected{
	background:#FFFFFF;
}
.paginationButtonSelected a {
	background-color:#FFFFFF;
	color:#999999;
}
.leftNavigationLabelDefault{
	border:none;
	border-bottom:1px solid #999999;
}
.leftNavigationLabelDefault .leftNavigationLabelTitle{
	color:#091822;

}
.leftNavigationCategoryDivision{
	border:none;

}

.lev0_leftNavigationOption a {
	color:#091822;
}
.lev0_leftNavigationOption a:hover {
	background-color:#B6B6A7;
}
.lev0_leftNavigationOptionSel a {
	background-color:#B6B6A7;
	color:#091822;
}
.selectBoxDisplay{
	border-color:#CCCCCC;
}

.product, .productRight {
	border:1px solid #eeeeee;
	padding:4px;
	margin:0px 16px 21px 0px;
	width:170px;
	text-align:center;
}
.productRight {
	margin:0px;
}
.productName a:link,
.productName a:visited,
.productName a:hover{
	display:block;
	text-decoration:none;
	padding:5px;
}
.productName a:hover{
	background-color:#091822;
	color:#B6B6A7;

}

.productImageContainer img {
	border:none;
}
.swatchHeight{
	height:20px;
}
.swatchSelected, .swatch{
	height:14px;
}

.swatchInner {
	height:12px;
}
*/
/*.breadCrumb, .breadcrumbs took this out so that we can now see the awesome breadcrumbs*/
/** ADDED 2010.01.05 **/
#bd{
	background:#FFF;
}
/** ADDED 2010.01.05 **/
.productAlternatesALink{
	visibility:hidden;
}
.paginationDisplayBottom{
	margin-bottom:10px;
}
.tabLabel{
	display:none;
}
/** ADDED 2010.01.05 **/
#index-page #bd{
	padding:0px 5px 0px 5px;
	background:#FFF;
}
.product{
	padding-right:33px;
}
/** ADDED 2010.01.15 **/
#product-page #bd, #multi-item-product-page #bd {
	margin:10px auto;
	padding-left:116px;
	width:auto;
}
/*******************

END - index-page - Content

*******************/

/*******************

START - product-Page - Content

*******************/
.productGrids{
	margin-bottom:20px;		/* added a 20px margin to the bottom of the product page essentially this could be put into core, but not necessary due to the white space the footer creates.*/
}

/*******************

END - product-Page - Content

*******************/

/*******************

START - shoppingBag - Content

*******************/
/* Turned GGTS in shopping bag back on 04-06-2010
ggt_sm{
	display:none;
}
*/
/** REMOVED 2010.01.05 **/
/*
.shoppingBag{
	margin-left:100px;
	_padding-left:100px;
}
*/
/** REMOVED 2010.01.05 **/
/** ADDED 2010.01.05 **/
.shoppingBag{
	margin-left:116px;
	_padding-left:116px;
}
#shopping-bag #bd{
	width:100%;
}
/** ADDED 2010.01.05 **/
.popErrorMask{
	height:0px;
}


.giftCard{
	display:none;
}
/** ADDED 2010.01.15 **/
#shopping-bag #bd{
	padding:0px;
}

/*******************

END - shoppingBag - Content

*******************/



/*******************

START - shipto-CGI - Content

*******************/
/** REMOVED 2010.01.05 **/
/*#ship-to, #bill-to{	 additiona ID added to clean up css inconsistencies TAMBO is the Rambo of programming 
	width:768px;		 sets the width of the ship-to form to the current width 
	margin-left:auto;	 centers the content 
	margin-right:auto;	 centers the content 
}*/
/** REMOVED 2010.01.05 **/
/** ADDED 2010.01.05 **/
#order-confirm #bd,
#ship-to #bd,
#bill-to #bd{
	padding:15px 116px 15px 116px;
}
/** ADDED 2010.01.05 **/
#progress_bar_login, .ra_horz, .progressBar{
	width:768px;		/* sets the width of the ship-to form to the current width */
	margin-top:35px;	/* pushes the progress bar and login below the canvas logo */
	margin-left:auto;	/* centers the content */
	margin-right:auto;	/* centers the content */
}
/** ADDED 2010.01.15 **/
#ship-to #bd{
	padding:15px 116px;
}
 
/*******************

END - shipto-CGI - Content

*******************/

/*******************

START - AddrNickName-CGI - Content

	This is a CGI page for when you are in the My Account Pages

*******************/

.nnbody{
	width:768px;	/* sets the width to the current width */
}
.pageContent div .nnbody form{
	width:768px;		/* sets the width to the current width */
	margin-top:35px;	/* pushes the headings below the canvas logo */
}

.childBody, .childBody_wide{
	padding:15px 0px 15px 0px;
}

/*******************

END - AddrNickName-CGI - Content

*******************/

/*******************

START - Gift Card

*******************/
img#gift-card-options-img,
form#gift-card-attrib-form{
	margin-left:110px;
	*margin-left:220px;
}
form#gift-card-attrib-form table{
	width:444px;
}

#dps-page #bd, #frame2k-page #bd, #otc-page #bd, #catalog-request #bd {
	width:100%;
}

#egcbalanceinquiry #bd{
	padding:25px 170px
}

/*******************

END - Gift Card

*******************/

/*******************

START - orderreview - Content

*******************/

#globalNavBottom{
	width:990px;
	text-align:left;
}

.solid_spacer{			/* So in the design instead of using a border bottom or border top we decided to use a specific div for dividers */
	height:0px;				/* Reset to 0 height, so that it doesn't add extra spacing in IE */
	*background:#fff;		/* Set its background to white due to IE still adding uncontrollable spacing */
	padding:0px;			/* Clears out random padding issues */
	margin:0px;				/* Clears out random margin issues */
}
#order_review_loading{
	background:#FFFFFF;
}
#order-review #bd{
	padding-top:5px;
}
/*******************

END - orderreview-CGI - Content

*******************/

.ty_body{
	width:990px;
}
.ty_left_col{
	margin-left:112px;
	_margin-left:58px;
}

/********************
START - site widening clean up
********************/
#index-page .content{
	margin-top:10px;
}
#index-page .breadCrumb{
	margin-top:0px;
	padding-top:10px;
	background:#FFF;
	border:1px solid #FFF;
}
#pageContent .breadcrumbs, #productAlternatesALink{
	margin:0;
}
.breadcrumbs{
	margin:0px;
	padding:5px 0px 5px 0px;
}
/* Turning Off BreadCrumbs 
.breadCrumb, .breadcrumbs{
	visibility:hidden;
}
*/
#product-page #bd{
	float:left;
	clear:both;
	width:884px;
	}
.shoppingBag table{
	border-collapse:separate;
}
#ship-to, #ship-to-confirm, #bill-to, #order-review, #order-confirm{
	background:#091822;
}
#ship-to #bd form, #ship-to-confirm #bd form, #bill-to #bd form, #order-review #bd form, #order-confirm #bd form{
	background:#FFF;
}
#canvas-global-header form,
#canvas-global-footer form{
	background:#091822;
}
.ty_body{
	width:auto;
}
.ty_left_col{
	margin-left:0px;
}
/********************
END - site widening clean up
********************/

.clear{			/* the magical clear class that like the boogey man, sasquatch, leperchauns and la chupacabra  it is awesome*/
	clear:both;
	float:none;
	margin:0px;		/* added this to Clears out random margin issues */
	padding:0px;	/* added this to Clears out random padding issues */
}