/* -----------------------------------------------
Beige #ECE9DC    ---------------------------------
Grey #BABABA    -------------- COLOR -------------
Dark Grey #4B4B4B    ----------SCHEME ------------
Logo Blue #0077C0 --------------------------------
----------------------------------------------- */
/* {margin:0;padding:0;}*/

body
	{
    background-color:white;
}

body, table, p, em, ul, li, ol
	{
    color:#4B4B4B;
    font-family:Verdana, Helvetica, sans-serif;
    font-size:11px;
    text-align:left;
}
img {border:0px;}

p{padding-bottom:10px;}

.clear{clear: both; height: 0; *height: 1%;}
	
.left{float:left;}
	
.right{float:right}

.center{text-align:center;}
	
.padding{padding:10px;}

a:link, a:visited, a:active
	{	
	text-decoration:none;
	color:#0077C0;
	font-weight:bold;
}	
		
a:hover{text-decoration:none;color:#4B4B4B;}

.yellow /* highlight used on customerNum  popup */
	{
	background-color:#F1F53D;
	font-size:12px;
	font-weight:700;	
}

H1	
	{
	position:relative;
	color:#0077C0;
	font-size:12px;
	font-weight:700;
	text-align:left;
}

		
H2	/* h2's are primarily used for the product index pages in conjunction with the alpha classes */
	{	
	display:block;
	color:#0077C0;
	font-size:11px;
	font-weight:900;
	padding-left:18px;
	text-align:left;
	line-height:20px;
}	

H2 a:hover{color:#FFF;background:#0077C0;}

/* Alpha are used in conjunction with H2 on product index pages */
.alphaC	{background:transparent url("../Img/alpha/c.gif") no-repeat;}
.alphaE	{background:transparent url("../Img/alpha/e.gif") no-repeat;}
.alphaH	{background:transparent url("../Img/alpha/h.gif") no-repeat;}
.alphaI {background:transparent url("../Img/alpha/i.gif") no-repeat;}
.alphaK {background:transparent url("../Img/alpha/k.gif") no-repeat;}
.alphaL	{background:transparent url("../Img/alpha/l.gif") no-repeat;}
.alphaP	{background:transparent url("../Img/alpha/p.gif") no-repeat;}
.alphaR	{background:transparent url("../Img/alpha/r.gif") no-repeat;}
.alphaT	{background:transparent url("../Img/alpha/t.gif") no-repeat;}
			
#header
	{
	position:relative;
	width:772px;
	height:87px;
	background:url("../Img/header.jpg") no-repeat;	/* Logo with grey nav bar bg */
	margin:0;
	padding:0;
}

#spanishheader
	{
	position:relative;
	width:772px;
	height:87px;
	background:url("../Img/headerspanish2.jpg") no-repeat;	/* Spanish Logo with grey nav bar bg */
	margin:0;
	padding:0;
}

#chineseheader
	{
	position:relative;
	width:772px;
	height:87px;
	background:url("../Img/headerChinese.jpg") no-repeat;	/* Chinese Logo with grey nav bar bg */
	margin:0;
	padding:0;
}


#topNav	 /*Horizontal global nav found in header control */
	{
	position:relative;
	width:772px;
	margin:0;
	padding:0;
}

#topNav ul
	{
	position:relative;
	list-style-type:none;
	padding-left:140px;
	padding-top:56px;
	margin:0;
}
	
#topNav ul li{float:left;display:inline;}
	
#topNav ul li a:link, #topNav ul li a:visited, #topNav ul li a:active, #topNav ul li a:hover
	{
	float:left;
	display:block;  
	padding:10px 10px 8px 10px;
	background-color:Transparent;
	color:#4B4B4B;
	white-space:nowrap;
	font-family:Verdana, Helvetica, sans-serif;
	text-decoration:none;
	font-size:10px;
	font-weight:bold;
}
	
#topNav ul li a:hover
	{
	background:url("../Img/topNavBgOver.jpg") repeat-x; /* Darker Grey image */
	color:#FFF;
}
	
#container /* center area that contains the nav and content area */
	{
	width:772px;
	height:auto;
	overflow:hidden;  /*  need to look into why this hides everything in ns 7 */
	background:url("../Img/background.jpg") repeat-y;
	margin:0;
	padding:0;
}

#ChineseContainer /* center area that contains the nav and content area */
	{
	width:772px;
	height:auto;
	overflow:hidden;  /*  need to look into why this hides everything in ns 7 */
	background:url("../Img/background.jpg") repeat-y;
	margin:0;
	padding:0;
	position:relative;
	top: -3px;
}


#leftSide /* container for the nav and other leftside tools */
	{
	float:left;
	width:176px;
	display:block;
	background:#ECE9DC;
	margin:0;
	padding:0;
}
	
div#nav /*----- LEFT NAVIGATION ------*/
	{
	position:relative;
	top: 0;
	left: 0;
	background:#ccc;
	width:176px;
	font-size:10px;
	margin:0;
	padding:0;
	z-index:100;
 }
 
div#nav ul, div#nav ul{width:176px;background:#ccc;margin:0;padding:0;}

div#nav li 
	{
	padding:10px 0;
	*padding:0;
	position: relative;
	width:176px;
	list-style: none;
	background:url(../Img/leftNavBg.jpg) no-repeat;
}

div#nav li:hover, div#nav li.on{background:url(../Img/leftNavBgOver.jpg) no-repeat;}

div#nav li:hover a, div#nav li.on a{color: #fff;}

div#nav ul.level1 li ul a
	{
	background:transparent;
	*background:url(../Img/subNavBg.jpg) no-repeat;
	color:#4B4B4B;
	margin-right:10px;
	*margin-right:0;
}


div#nav ul.level1 li ul a:hover{background:url(../Img/subNavBgOver.jpg) no-repeat;}

div#nav li a 
	{
	display: block;
	*display: inline-table;/*ie workaround to eliminate whitespace issue */
	width:176px;
	text-align:right;
	color:#0077C0;
	font-family:Verdana, Helvetica, sans-serif;
	text-decoration:none;
	font-weight:bold;
	padding: 8px 5px 9px 0;
	margin:0;
}

div#nav li a:hover, div#nav li.on a{color:#FFF;}

div#nav>ul a{width:auto;margin:0;padding:0;}

div#nav ul ul /* hides sub nav when not using */
	{
	position: absolute;
	top:0;
	left:176px;
	display: none;
	margin:0;
	padding:0;
}

div#nav ul.level1 li.submenu:hover ul, div#nav ul.level1 li.on ul
	{ /* turns on upon mouse over to show sub nav */
	display:block; 
	margin:0;
	padding:0;
}

#homepageCopy{float:left;width:60%;margin:0;padding:0;}  /* used on default page */

#homepageLogin /* area on default page that hold the login box */
	{
	text-align:center;
	float:left;
	width:40%;
	margin:0;
	padding:0;	
}

#account /* used as section in left nav, boxed in area, authenicate, sub tools, etc */
	{
	position:relative;
	width:160px;
	height:auto;
	/*text-indent:-44px;*/
	*text-indent:0;
	display:block;
	text-align:center;	
	background-color:#ECE9DC;
	border:solid 1px #BABABA;
	margin:0;
	padding:0;
}

#account ul li table 
	{
	position:relative;
	width:166px;
	height:auto;
	/*text-indent:-44px;*/
	*text-indent:0;
	display:block;
	text-align:center;
	margin:0;
	padding:0;
}

#account .title  /* used by the title on the my account, my orders box */
	{
	position:relative;
	top:-8px;
	color:#0077C0;
	background:#ECE9DC;
	font-size:10px;
	font-weight:bold;
	margin:0;
	padding:0;		
}

#account ul{list-style:none;padding-bottom:10px;margin:0;}
	
#account li{position:relative;display:block;margin:0;padding:0;}

#account a:link, #account a:visited, #account a:active, #account a:hover
	{
	position:relative;
	display:block;
	/*width:11px;*/
	font-size:10px;
	text-align:left;
	padding:2px 0px 2px 5px;
	margin:0;
	vertical-align:middle;
}

.navLinkImg /* used to center align the icons in the sub tools vertically */
	{
	vertical-align: baseline;
	padding-right:5px;
	padding-left: 10px;
	

}

#content /* this is the big white area that has that beige gradient background */
	{
	position:relative;
	z-index:-0;
	float:left;
	width:568px; /* ns and ff - width excluding padding */
	*width:588px; /* ie box model - width including padding */
	text-align:center;
	padding:10px;
	margin:0;
	background:transparent url("../Img/bgContent.jpg") repeat-x top;	
	
}

.toolbar /* ---- Tool Bar for shopping cart pages --- */
	{
	height:37px;
	background:url("../Img/tools/bg.gif") repeat-x;
	margin:0;
	padding:0;
}

.toolbar a:link, .toolbar a:visited, .toolbar a:active, .toolbar a:hover
	{
	text-decoration:none;
	color:#4B4B4B;
	font-size:7px;
	margin:0;
	padding:0;
}

.toolbar a:hover{color:#0077C0;margin:0;padding:0;}

.toolbarTxt{position:relative;top:-13px;margin-right:10px;padding:0;}


#breadCrumb /*----- Navigation BreadCrumbs on the top of the pages -----*/
	{
	line-height:10px;
	position:relative;
	color:#9A9A9A;
	font-size:10px;	
	text-align:right;
	margin-right:8px;
	font-weight:bold;
	padding:0;
}

#breadCrumb a:link, #breadCrumb a:visited, #breadCrumb a:active, #breadCrumb a:hover
	{
	color:#9A9A9A;
	text-decoration:none;
	margin:0;
	padding:0;
}

#breadCrumb a:hover{color:#0077C0;}

#breadCrumb .trail{position:relative;top:2px;padding:5px;font-size:17px;margin:0;}

/* ----- Shopping Cart Data Grid Formatting -----  */

#data  /* surrounding datagrids */
	{
	width:568px;
	overflow:auto;
	font-family:Verdana, Helvetica, sans-serif;
	color:#4B4B4B;
}

.GridHead /*dataGrid Header Row */
	{
	background-color:#BABABA;
	/*background-color:#4B4B4B;*/
	font-size:10px;
	color:#0077C0;
	font-weight:bold;
	height:70px;
	text-align:center;
}

.GridItem /* row of dataGrid */
	{
	background-color:#ECE9DC;
	color:#000;
	height:50px;
	font-size:9px;
}

.GridItemStyle2 /* row of dataGrid */
	{
	background-color:#ECE9DC;
	color:#000;
	height:40px;
	font-size:9px;
}

.GridItemAlt /* alt row of dataGrid */
	{
	background-color:#EAEAEA;
	color:#000;
	height:50px;
	font-size:9px;
}

.GridItemAltStyle2 /* alt row of dataGrid */
	{
	background-color:#EAEAEA;
	color:#000;
	height:40px;
	font-size:9px;
}
.GridFooter
	{
	background-color:#BABABA;
	color:#4B4B4B;
	padding:0;
	margin:0;
}

.GridPager  /* paging list in dataGrid */
	{
	background-color:#BABABA;
	font-size:9px;
	color:#4B4B4B;
	font-weight:bold;	
}

/******************************/
#CalendarStyle /* Calendar styling */
{
	
}

#CalendarStyle a:hover   /* Calendar styling */
{
	/*background-color:#B2D0F8;
	height:1px;
	z-index:100;
	border:20;*/
	background:url(../Img/popcalendarOver.gif);
}

#lblWelcome, #lblWelcome p, #lblSelectShipTo, #SearchAddLabel
	{
    color:#4B4B4B;
    font-family:Verdana, Helvetica, sans-serif;
    font-size:13px;
    font-weight:bold;
    text-align:center;
}

#lblselectedShipTo , #Message, #ResShipToVal
	{
    color:#4B4B4B;
    font-family:Verdana, Helvetica, sans-serif;
    font-size:13px;
    font-weight:bold;
    text-align:left;
}

.ContentHead
	{
	color:#0077C0;
	font-size:15px;
    font-weight:bold;
    width:100%;
}

#lblSelectShipTo p.blue, .blue
	{
	color:#0077C0;
	font-size:15px;
    font-weight:bold;
    text-align:center;
}

#gcLookup, #AddButton, #WarnSubmit, #WarnCancel, #SearchButton, #UpdateBtn,
#checkOut, #clearCart, #gcLookupHistory, #CloseDesc, #OrderButton,
#CancelButton, #ClearResultsBtn, #SearchAddButton, #PSSearchButton,#btnAddPenToCart,
#ClearRecResultsBtn
{
	color:#FFFFFF;
	background-color:#0077C0;
	font-family:Verdana, Helvetica, sans-serif;
	letter-spacing:-1px;
	font-size:11px;
	font-weight:600;
	border: 3px double #999999;
	border-top-color:#CCCCCC;
	border-left-color:#CCCCCC;
	text-align:center;
	margin:0;
	padding:5px 0;
}

.orderHead /*dataGrid Header Row */
	{
	background-color:#888888;
	color:#fff;
	font-weight:bold;
	border:solid 12px #FFFFFF;
	padding:4px;
	text-align:center;
}

.orderItem{background-color:#ECE9DC;color:#000;}

.orderItemAlt /* alt row for dataGrid */
	{
	background-color:#fff;
	color:#000;
}

#lblchkboxValidate, #ListError, #lblWarning, #lblWarning p, #lblNoShipTo, 
#GCSearchVal, .ErrorText, #tooManyPl, #noResultsPl, #ListError, 
.PriceChk, .red, .updated, #UpdateLbl, #MinQtyCheck, #MinTotalChk,
#MyError, #POValidate, #SearchBTValidate
/* Red font for validation. 
should be condensed to one and class's/id's replaced (old site classes) */
	{
	color:#ff0000;
	font-weight:bold;
	font-size:11px;
	text-align:center;
	width:100%;
}

.valerror  
/* form validation error message text
-here is another to be condensed */
	{
	position:relative;
	font-size:10px;
}

.kern /* used on warning copy to space letters */
	{
	letter-spacing:15px;
	font-size:14px;
	line-height:28px;
}



/* ----- Should be the end of the Shopping Cart Data Grid Formatting Mess -----  */

.prodLeft /*------ Product Thumbnails Used on index pages -----*/
	{
	float:left;
	width:265px;
}

.prodLeft img
	{
	float:left;
	margin-top:10px;
	border-top:solid 1px #0077C0;	
	border-left:solid 1px #0077C0;
}

.prodRight
	{
	float:left;
	width:260px;
	margin-left:40px;
}

.prodRight img
	{
	float:left;
	margin-top:10px;
	border-top:solid 1px #0077C0;	
	border-left:solid 1px #0077C0;
}

.description{float:left;}

/* ---- FORM FIELD ELEMENTS  --*/
div#contactForm
	{
	position:relative;
	width:auto;
	height:auto;
	display:block;
	text-align:center;
	border:solid 1px #BABABA;
	padding:10px 0;
}

#contactForm.halfSize /* used on login and forgot pages. */
	{
	width:340px;
	background-color:#ECE9DC;
}

.formTitle /* Title text that overlaps top border of box */
	{
	position:relative;
	top:-19px;
	color:#0077C0;
	background-color:#FFF;
	font-size:11px;
	font-weight:bold;		
}

.formTitleBeige /* Title text that overlaps top border of box color beige bg */
	{
	position:relative;
	top:-19px;
	color:#0077C0;
	background-color:#ECE9DC;
	font-size:11px;
	font-weight:bold;		
}


.quarterSize  /* used on small login area (default page) and left nav sub navs 
(authenicate, customer service sub) */
	{
	width:226px;
	background-color:#ECE9DC;
}

div#contactForm table.form /* aligns and centers forms tables */
	{
	width:auto;
	text-align:right;
	padding:6px;
	margin-left:auto;
	margin-right:auto;
	border:0;
}

div#contactForm table.form td /* pads table cell to add space between fields */
	{
	padding:0 0 10px 0;
}

.formLabel /* bold required form field names */
	{
	font-size:10px;
	text-align:right;
	font-weight:bold;
	padding-right:3px;
}

.formLabeleft /* bold required form field names aligned left */
	{
	font-size:10px;
	text-align:left;
	font-weight:bold;
	padding-right:3px;
}

.formLabelNon  /* non-bold non-required form field names */
	{
	font-size:11px;
	text-align:right;
	font-weight:normal;
	padding-right:3px;
	letter-spacing:-1px;
}

.formComment /* need to align left */
	{
	font-size:10px;
	text-align:left;
}

#contactForm input, #contactForm .drop, #pswdForm input  
/* Default for all inputs and dropdowns  */
	{
	height:20px;
	width:120px;
	background-color:#fff;
	font-size:10px;
	margin-bottom:0px;
	margin-right:2px;
	border: 1px solid #7F9DB9;
}

#contactForm input.longTxtBox
/* Text boxes that span like the address input. */
	{
	width:354px;		
}

#contactForm input.medTxtBox /* Medium lenght input fields  */
	{
	width:65px;		
}

#contactForm .smallTxtBox /* Small lenght input fields - used for customer number  */
	{
	height:20px;
	width:45px;
	background-color:#fff;
	font-size:10px;
	margin-bottom:0px;
	margin-right:2px;
	border: 1px solid #7F9DB9;
}

#contactForm .dateTxtBox /* Small input fields - used on myOrders page  */
	{
	height:20px;
	width:48px;
	background-color:#fff;
	font-size:10px;
	margin-bottom:0px;
	margin-right:2px;
	border: 1px solid #7F9DB9;
}

#contactForm input#artwork, #contactForm input#search, #contactForm #opt_in, #contactForm input#RB1,#contactForm input#RB2 /* CHECKBOX */
	{
	height:20px;
	width:20px;
	background:#fff;
	font-size:10px;
	margin-right:3px;
	border:0;
}

#contactForm input#search, #contactForm #OpenOrdersSearch /* beige CHECKBOX */
	{
	height:20px;
	width:20px;
	background:#ECE9DC;
	font-size:10px;
	margin-right:3px;
	border:0;
}


#contactForm .formBtn /* Default Blue Form Buttons */
	{
	color:#FFFFFF;
	height:auto;
	width:60px;
	background-color:#0077C0;
	font-size:9px;
	font-weight:normal;
	border: 3px double #999999;
	border-top-color:#CCCCCC;
	border-left-color:#CCCCCC;
	padding:2px;
} 

#contactForm .formBtnLong, .formBtnLong  /* Longer Form Buttons */
	{
	color:#FFFFFF;
	height:auto;
	width:100px;
	background-color:#0077C0;
	font-size:9px;
	font-weight:normal;
	border: 3px double #999999;
	border-top-color:#CCCCCC;
	border-left-color:#CCCCCC;
	padding:2px;
} 

.formBtnLong  /* Longer Form Buttons */
	{
	color:#FFFFFF;
	height:auto;
	width:100px;
	background-color:#0077C0;
	font-size:12px;
	font-weight:normal;
	border: 3px double #999999;
	border-top-color:#CCCCCC;
	border-left-color:#CCCCCC;
	padding:2px;
} 

.formBtn /* Default Blue Form Buttons */
	{
	color:#FFFFFF;
	height:auto;
	width:100px;
	background-color:#0077C0;
	font-size:12px;
	font-weight:normal;
	border: 3px double #999999;
	border-top-color:#CCCCCC;
	border-left-color:#CCCCCC;
	padding:2px;
} 

.drop2 /* drop down used on log/default ship to list */
	{
	height:20px;
	width:auto;
	color:#4B4B4B;
	background-color:#fff;
	font-size:12px;
	border:1px solid #7F9DB9;		
}
	
#footer
	{
	position:relative;
	z-index:100;
	width:auto;
	text-align: center;
	color:#4B4B4B;
	text-decoration:none;
	font-size:9px;
	line-height:24px;	
	margin:0;
	padding:0;	
}

#moveUp
	{
	position:relative;
	top:-13px;
}

ul.none li /* list with no type.  Used on site map */
	{
	line-height:18px;
	list-style-type:none;
	list-style-position:outside;
	margin-left:25px;
}
ul.none li ul li /* secondary list with no type.  Used on site map */
	{
	line-height:18px;
	list-style-type:none;
	list-style-position:outside;
	margin-left:15px;
}	

ul.square, li.square
	{
	line-height:18px;
	list-style-type:square;
	list-style-position:inside;
	margin-left:15px;
}	

ol.dec, li.dec 
	{
	list-style-type:decimal;
	line-height:18px;
	list-style-position:outside;
	margin-left:35px;
}

ol.alpha, li.alpha 
	{
	list-style-type:upper-alpha;
	line-height:18px;
	list-style-position:outside;
	margin-left:35px;
}

ol.rom li.rom 
	{
	list-style-type:upper-roman;
	line-height:18px;
	list-style-position:outside;
	margin-left:35px;
}

/************************************/
div#SearchForm
{
	border:solid 1px #2E85B1;
}

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

.ColdHorizTabBtn 
{ 
background-color: #7CCEF7; 
border: #2E85B1 thin solid;
border-bottom: #7CCEF7 thin solid;
font-weight: bold; 
font-size: smaller; 
color: black; 
} 

.HotHorizTabBtn 
{ 
border-right: tan thin solid; 
border-top: tan thin solid; 
font-weight: bold; 
font-size: smaller; 
border-left: tan thin solid; 
color: red; 
border-bottom: blanchedalmond thin solid; 
background-color: blanchedalmond; 
} 

.TabBodyContent 
{ 
background-color: blanchedalmond; 
border-top: blanchedalmond thin solid; 
border-right: tan thin solid; 
border-bottom: tan thin solid; 
border-left: tan thin solid; 
}