/*
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Start of CSS for 212 Kids
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
html {
	margin:0;
  	padding: 0;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666;
	margin:0;
	padding: 0;
}

/*
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Start setting default properties for LON.
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	
*/



.doprint,#doprint { display:none; }
.mainWidth {
	width:760px;	
}
a { color: #000000; 
	text-decoration: none;
	outline: none;
}
a:hover { color: #000000; 
	text-decoration: underline;
}
h1 { font-size: 11px;	
	font-weight: normal;
}
.hr{ display: block;
	height: 1px;
	line-height: 1px;
	background-color: #ccc;
	width: 758px;
	margin: 0px auto 0px auto;
	padding: 0;
}
.hr hr { display: none; }
.hrGrey{ display: block;
	height: 1px;
	line-height: 1px;
	background-color: #ccc;
	width: 100%;
	margin: 0px auto 0px 0px;
	padding: 0;
}
.hrGrey hr { display: none; }
p {
	font-size: 11px; 
}
td {
	font-size: 11px; 
}

td.headerTDGrey{
	padding:5px;
	font-weight: bold;
	background-color: #E3EAF2; 
	border-bottom: 1px solid #ccc; 
}

td.paddedTD {
	padding:5px;
}
td.mainContent {
	padding: 0px 0px 15px 15px;
	margin: 0px;
}
td.blacktext {
	color: #000000;
}
td.hrRule {
	background-color: #ccc;
	margin: 0px auto 0px auto;
	padding: 0;
}
span.boldtext { color: #587692;
	font-weight: bold; 
}
.borderedImage { padding: 0px;
	margin: 0px;
}
.errorArea { color: #990000 ;
	font-weight: bold;
}
/* 
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Styles for the left nav, this affects 
	the link styles only.
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
a.leftNav {
	color: #666; 
	text-decoration: none;
}
a.leftNav:hover {
	color: #666; 
	text-decoration: underline;
}
a.leftNavSelc {
	font-weight: bold;
	color: #587692; 
	text-decoration: none;
}
a.leftNavSelc:hover {
	font-weight: bold;
	color: #587692; 
	text-decoration: underline;
}

/* 
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Styles for the Breadcrumb links & Left Nav, this 
	affects the link styles only.
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
span.breadcrumbSelc {
	font-size: 10px;
	color: #666; 
	text-decoration: none;
}
a.breadcrumbSelc {
	font-size: 10px;
	color: #666; 
	text-decoration: none;
}
a:hover.breadcrumbSelc {
	font-size: 10px;
	color: #4276AA; 
	text-decoration: underline;
}
a.catNavLink {
	color: #666666; 
}
a:hover.catNavLink { 
	color: #666666; 
	text-decoration: none; 
}
a.catNavLinkSelc {
	color: #306799; 
	font-weight: bold;
	text-decoration: none; 
}
a.catNavLinkSelc:hover {
	color: #275880; 
	font-weight: bold;
	text-decoration: none; 
}
a.itemLink {
	color: #666666; 
}
a:hover.itemLink { 
	color: #666666;
}


span.CheckOutOn {
	color: #6699CC;
	font-weight: bold;
}
span.CheckOutOff { 
	color: #838383;
}
span.Separator { color: #838383; 
	padding: 0px 10px 0px 10px;
}
a.titleLink {
	color: #698DAF;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

a.titleLink:hover {
	color: #064267;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}
/* 
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Start error box properties for all pages. 
	This box will flow with any width.
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
div#ErrorBox {
	border: 2px solid #ADBBC8;
	padding: 5px;
	margin: 0px 0px 5px 0px;
}
div#ErrorBox a {
	color: #C5351A;
}
.textError {
	color: #C5351A;
}

/* 
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Start of properties specific to pages.
	All classes will start with the 
	corresponding page name.
	Note: Category Style are on category.aspx
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
td.shopIndexBox { padding: 5px;
}
.skuHeader 
{
	color: #587692;
	font-weight: bold;
	padding: 5px;
	border-top: 3px #cccccc solid;
	border-bottom: 1px #cccccc solid;
}
.catHeader { color: #7199B3;
	font-weight: bold;
	font-size: 16px;	
}
a.frontPageCat { color: #666; 
}

.highlightbox {background-color: #E3EAF2; 
	border-right: 2px solid #CFD9E4; border-bottom: 2px solid #CFD9E4; padding: 10px; 
}
span.siteIndexTitle { font-size: 14px; color: #587692; font-weight: bold;}
span.siteIndexTitle2 { font-size: 14px; color: #99CDCB; text-transform : uppercase; font-weight: bold;}
a.siteIndexTitle { font-size: 14px; color: #587692;font-weight: bold;}
a:hover.siteIndexTitle { font-size: 14px; color: #587692; font-weight: bold;}

a.siteIndexTitle2 { font-size: 14px; color: #99CDCB;font-weight: bold;}
a:hover.siteIndexTitle2 { font-size: 14px; color: #99CDCB; font-weight: bold;}

.tableHeader { padding: 5px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;	
	font-weight: bold;
	font-size: 10px;
}

a.greyLink { color: #666;}

#grMainRegTools {
	text-align: center;
	color: #cccccc;
	margin: 10px 0px 10px 10px;
	padding: 10px;
	background: #F8F7E2;
	border-right: 1px solid #c7e3f1;
	border-left: 1px solid #c7e3f1;
	border-bottom: 1px solid #c7e3f1;
	border-top: 1px solid #c7e3f1;
}

/* 
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Start of properties for all form objects, 
	let start with some basics...
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
form {
	padding: 0px;
	margin: 0px;
}
.submitbttn { font-size: 10px; 
	border: 1px Solid #999999; 
	color: #666666; 
	background-color: #fff; 
	height: 20px;
	padding: 2px;
	margin: 4px;
	cursor: pointer;
	font-weight: bold;
	text-transform : lowercase;
}

.EmailAdd { height: 20px;
	border: 1px Solid #999; 
	font-family: Arial; 
	font-size: 10px; 
	color: #666666; width: 170px; 
}
.normalField { font-family: Verdana;
	font-size: 11px;
	height: 20px;
}
.fieldNormal {
	padding: 0px 5px 0px 3px;
}

.fieldError { color:#cc0000;
	font-weight:bold;
	font-size:10px;
}
.fieldRequired 
{
	background-image: url(../assets/nav/buttons/ReqdFieldsIcon.gif);
	background-repeat: no-repeat;
	padding: 0px 5px 0px 3px;
}

.fieldError2 { color: #cc0000; background-color: #F4DFDF; }

.fieldError {
	background-image: url(../assets/nav/buttons/ReqdFieldsIcon_Error.gif);
	background-repeat: no-repeat;
	padding: 0px 5px 0px 3px;
}

.labelError { color: #990000;
	font-weight: bold;	
	font-size: 11px;
	padding-bottom: 3px;
	padding-top: 2px;	
}
.quantityField { width: 25px;
	font-family: Arial;
	font-size: 11px;
}

.mediumField{ width: 200px;
	font-family: Arial;
	font-size: 11px;
}

.mediumishField{ font-family: Arial;
	font-size: 11px;
}

.longField { width: 450px;
	font-family: Arial;
	font-size: 11px;
}

.smallField { width: 30px;
	font-family: Arial;
	font-size: 11px;
}

.smallishField { width: 45px;
	font-family: Arial;
	font-size: 11px;
}
.searchbox { width: 95px;
	border: 1px Solid #999; 
	font-family: Arial; 
	font-size: 10px; 
	color: #666666;
}
/* 
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Start of properties for Footer
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#navlist 
{
	font-family: Verdana;
	width: 760px;
	padding: 3px 0 3px 0;
	margin: 0;
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background: #E7EEEE;
	font-size: 9px;
}

#navlist li { list-style: none;
	margin: 0;
	padding: 0;
	display: inline;
}
#navlist li a { color: #747878;
	padding: 3px 12px 3px 12px;
	margin: 0;
	border-right: 1px solid #ccc;
	text-decoration: none;
}
#navlist li a.lastone {
	border: none;
	color: #747878;
	padding: 0px 10px 3px 12px;
	margin: 0px;
	text-decoration: none;
	width: auto;
}
#navlist li a:link { color: #747878; }
#navlist li a:visited { color: #747878; }
#navlist li a:hover { color: #4276AA; }

#emailFooterBox { margin: 0;
	padding: 10px 0 0 10px;
}
.EmailAddFooter { height: 20px;
	padding: 2px;
	border: 1px Solid #999; 
	font-family: Arial; 
	font-size: 10px; 
	color: #999; width: 210px; 
}
/* 
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Start of properties for GR Footer
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#navGRlist 
{
	font-family: Verdana;
	width: 760px;
	padding: 3px 0 3px 0;
	margin: 0;
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background: #E7EEEE;
	font-size: 9px;
}

#navGRlist li { list-style: none;
	margin: 0;
	padding: 0;
	display: inline;
}
#navGRlist li a { color: #747878;
	padding: 3px 25px 3px 25px;
	margin: 0;
	border-right: 1px solid #ccc;
	text-decoration: none;
}
#navGRlist li a.GRlastone {
	border: none;
	color: #747878;
	padding: 0px 25px 3px 22px;
	margin: 0px;
	text-decoration: none;
	width: auto;
}
#navGRlist li a:link { color: #747878; }
#navGRlist li a:visited { color: #747878; }
#navGRlist li a:hover { color: #4276AA; }

/* 
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Pagination Hack for IE Mac 
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
.spillTopArrows {
	position: absolute; left: 345px; top: 105px
}