/* these styles deal with the products "splash" page */
#products_section_splash {
font-family: Arial;
font-size: 10px;
border: 0px solid black;
background-color: #FFFFFF;

padding: 0px;
margin: 10px;
margin-right: 0px;
text-align: left;

}

#products_section_splash a {
text-decoration: none;
}

#splash_content {
width: 330px;
border: 0px solid #000000;
height: 375px;
margin: 0px;
padding: 0px;
overflow: hidden;
float: left;
background-image: url(../images/tpl_images/products_title.gif);
background-repeat: no-repeat;
visibility: hidden;
}

#splash_content_text {
width: 135px;
position: relative;
left: 160px;
top: 123px;
border: 0px solid #000000;
overflow: auto;
line-height: 15px;
}

#splash_content_ns {
width: 100px;
border: 0px solid #000000;
height: 375px;
margin-left: 7px;
padding: 0px;
overflow: hidden;
float: left;
visibility: hidden;
}

#splash_content_basics {
width: 100px;
border: 0px solid #000000;
height: 375px;
margin-left: 7px;
padding: 0px;
overflow: hidden;
float: left;
visibility: hidden;
}

#splash_content_fashion {
width: 100px;
border: 0px solid #000000;
height: 375px;
margin-left: 7px;
padding: 0px;
overflow: hidden;
float: left;
visibility: hidden;
}

#splash_content_kids {
width: 100px;
border: 0px solid #000000;
height: 375px;
margin-left: 7px;
padding: 0px;
overflow: hidden;
float: left;
visibility: hidden;
}

/* this controls styles for the pop-up boxes on the splash page */
#teaser_pop_ns {
width: 80px;
height: 80px;
padding: 10px;
background-color: #bebd56;
opacity: .9;
margin-top: 375px;
line-height: 15px;
color: #000000;
}

#teaser_pop_basics {
width: 80px;
height: 80px;
padding: 10px;
background-color: #0079af;
opacity: .9;
margin-top: -100px;
line-height: 15px;
color: #FFFFFF;
}

#teaser_pop_fashion {
width: 80px;
height: 80px;
padding: 10px;
background-color: #e8a400;
opacity: .9;
margin-top: 375px;
line-height: 15px;
color: #000000;

}

#teaser_pop_kids {
width: 80px;
height: 80px;
padding: 10px;
background-color: #d34277;
opacity: .9;
margin-top: -100px;
line-height: 15px;
color: #000000;
}

/* STYLING FOR INDIVIDUAL PRODUCTS PAGES BEGINS HERE */

/* set the main bg image for each of the four products sections */
#ns_bg {
width: 798px;
height: 375px;

border: 0px dotted #000000;

margin: 0px;
margin-top: 5px;
/* background-image: url(../images/tpl_images/ns_girl.jpg); */
visibility: hidden;
color: #FFFFFF;
}

#basics_bg {
width: 798px;
height: 375px;

border: 0px dotted #000000;

margin: 0px;
margin-top: 5px;
/* background-image: url(../images/tpl_images/basics_girl.jpg); */
visibility: hidden;
color: #333333;
}

#fashion_bg {
width: 798px;
height: 375px;

border: 0px dotted #000000;

margin: 0px;
margin-top: 5px;
/* background-image: url(../images/tpl_images/fashion_girl.jpg); */
visibility: hidden;
color: #333333;
}

#kids_bg {
width: 798px;
height: 375px;

border: 0px dotted #000000;
overflow: hidden;
margin: 0px;
margin-top: 5px;
/* background-image: url(../images/tpl_images/girl_girls.jpg); */

color: #333333;
}

/* The main div that contains all of the product info that appears on the right */
#prods_right {
width: 305px;
float: right;
border: 0px dotted #000000;
margin: 10px;
margin-top: 20px;
height: 350px;
overflow: hidden;
}

/*The next blocks are responsible for styling the little products submenu */
/* each product submenu is styled a little differently. first, no slip */
#prods_submenu_ns {
width: 287px;
background-color: none /*#cccc66;*/
height: 10px;
float: left;
margin: 0px;
overflow: hidden;
text-align: left;
padding: 2px;
visibility: hidden;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding-left: 10px;
}

#prods_submenu_ns ul {
text-align: left;
text-decoration: none;
list-style: none;
font: bold .9em/1em arial, helvetica, sans-serif;
margin: 0px;
margin-left: 0px;
list-style-position: inside;
padding-left: 0px;
}

#prods_submenu_ns ul a {
text-decoration: none;
color: #FFFFFF;
}

/* styles for the basics submenu */
#prods_submenu_basics {
width: 287px;
background-color: none /* #2255ab; */
height: 10px;
float: left;
margin: 0px;
overflow: hidden;
text-align: left;
padding: 2px;
visibility: hidden;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding-left: 10px;
}

#prods_submenu_basics ul {
text-align: left;
text-decoration: none;
list-style: none;
font: bold .9em/1em arial, helvetica, sans-serif;
margin: 0px;
margin-left: 0px;
list-style-position: inside;
padding-left: 0px;
}

#prods_submenu_basics ul a {
text-decoration: none;
color: #333333;
}

/* styles for the fashion submenu */
#prods_submenu_fashion {
width: 287px;
background-color: none; /* #663300; */
height: 10px;
float: left;
margin: 0px;
overflow: hidden;
text-align: left;
padding: 2px;
visibility: hidden;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding-left: 5px;

}

#prods_submenu_fashion ul {
text-align: left;
text-decoration: none;
list-style: none;
font: bold .9em/1em arial, helvetica, sans-serif;
margin: 0px;
margin-left: 0px;
list-style-position: inside;
padding-left: 0px;
}

#prods_submenu_fashion ul a {
text-decoration: none;
color: #333333;
}

/* styles for the kids submenu */
#prods_submenu_kids {
width: 295px;
background-color: white; /* #b22850; */
height: 10px;
float: left;
margin: 0px;
overflow: hidden;
text-align: left;
padding: 2px;
visibility: hidden;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding-left: 2px;

}

#prods_submenu_kids ul {
text-align: left;
text-decoration: none;
list-style: none;
font: bold .9em/1em arial, helvetica, sans-serif;
margin: 0px;
margin-left: 0px;
list-style-position: inside;
padding-left: 0px;
}

#prods_submenu_kids ul a {
text-decoration: none;
color: #333333;
}

/* then a few styles that apply to all submenus */
#prods_submenu_ns ul li, #prods_submenu_basics ul li, #prods_submenu_fashion ul li, #prods_submenu_kids ul li
{
font-weight: bolder;
padding: 0px 4px;
display: inline;
margin: 0px;
margin-left: 0px;
}

#prods_submenu_ns ul a:hover, #prods_submenu_basics ul a:hover, #prods_submenu_fashion a:hover, #prods_submenu_kids ul li a:hover {
text-decoration: underline;
}
/*END submenu styling */


/* this is the div that contains the product image */
#prodsphoto {
float: left;
width: 298px;
height: 150px;
border: 1px solid #666666;
background-color: #666666;
color: #FFFFFF;
margin-top: 10px;
overflow: hidden;
display: inline;
visibility: hidden;
text-align: center;
}

/* styling added 2-09 to tweak the color of the photo boxes */
#kids_bg #prodsphoto {
background-color: #ffffff;
border: 1px solid #ffffff;
color: #b63b7e;
}

#basics_bg #prodsphoto {
background-color: #ffffff;
border: 1px solid #ffffff;
color: #7091ca;
}

#enlarge {
font-size: .8em;
font-weight: bold;
z-index: 2700;
margin: 0px;
padding: 2px;
}

/* the text information that appears on the left half below the image */
#prods_info {
text-align: left;
width: 160px;
height: 150px;
float: left;
background-color: none;/*#cccc99;*/
margin-top: 10px;
display: inline;
padding-right: 10px;
/*the next 4 lines are to compensate for the nifty corners feature, which pushes down in IE */
padding-top: 0px;
padding-bottom: 0px;
visibility: hidden;
}

/*added this to create a white background on the girls page MS 5/2011 */
#kids_bg #prods_info {
text-align: left;
width: 280px;
height: auto;
float: left;
background-image: url(../images/product_images/preview/semi_transparent_bg.png);
/*background-color: white; #FF99CC;#cccc99;*/
margin-top: 10px;
display: inline;
padding: 10px;
visibility: hidden;
/*-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black;*/
}

/*this style will put a CSS3 drop shadow behind the text on the No-Slip product information MS 1/27/10
#ns_bg #prods_info {
text-shadow: 2px 2px 2px #000;
} */

/*colors the background of the text box on just the No-Slip page
#ns_bg #prods_info {
background-color: #000000;
} */

#prods_info ul {
margin-left: -18px;
}

#prods_info h4 {
font-size: 1.1em;
font-weight: bold;
line-height: 14px;
margin-top: 0px;
}

#prods_info p {
margin-top: 10px;
}

#icons {
margin-top:10px;
}

/* the text information that appears on the right half below the image */
#prods_info_two {
text-align: left;
width: 107px;
height: 150px;
float: left;
background-color: none;/*#663333;*/
overflow: hidden;
/*the next lines are to compensate for the nifty corners feature, which pushes down in IE */
padding-left: 20px;
padding-bottom: 0px;
visibility: hidden;
margin-top: 10px;
border-left: 1px dotted #FFFFFF;
}

/*makes the links in the info section white instead of black */
#ns_bg #prods_info_two a {
color: #FFFFFF;
}
#prods_info_two h4 {
font-size: 1.1em;
font-weight: bold;
line-height: 14px;
margin-top: 0px;
}

#prods_info_two a {
color: #000000;
text-decoration: none;
}

#related_items {
list-style-type: none;
margin-left: 0;
padding-left: 0;
}

#related_items li {
margin-bottom: 10px;
}

#related_items li:before {
content: "\00BB \0020";
color: #333333;
margin-left: 0px;
}

/* for the scrolling menu at the bottom of the no slip page */
#prods_bottom_ns {
border: 0px solid black;
width: 778px;
height: 62px;
padding: 10px;
text-align: left;



margin-top: 0px;
margin-bottom: 5px;
background-color: #cccc66;
visibility: hidden;
}

/* for the scrolling menu at the bottom of the basics page */
#prods_bottom_basics {
border: 0px solid black;
width: 778px;
height: 62px;
padding: 10px;
text-align: left;



margin-top: 0px;
margin-bottom: 5px;
background-color: #2255ab;
visibility: hidden;
}

/* for the scrolling menu at the bottom of the fashion page */
#prods_bottom_fashion {
border: 0px solid black;
width: 778px;
height: 62px;
padding: 10px;
text-align: left;



margin-top: 0px;
margin-bottom: 5px;
background-color: #cc9933;
visibility: hidden;
}

/* for the scrolling menu at the bottom of the kids page */
#prods_bottom_kids {
border: 0px solid black;
width: 778px;
height: 62px;
padding: 10px;
text-align: left;


margin-top: 0px;
margin-bottom: 5px;
background-color: #b22850;
visibility: hidden;
}

/* styling added 2-09 to detail the borders around the product thumbs */
#prods_bottom_kids .prodbox {
background-color: #ff99cc;
}

/* global styles for all scroll bars */
#prods_marquiswrapper {
width: 672px !important; 
/* Be Careful !! This number HAS to reflect this equation in order for Mootools to work. 
 * FORMULA : {Number of Products p/page} x {.prodbox width + .prodbox margin-left + .prodbox margin-right} 
 * i.e. 7 x (76+10+10), = 7 x 96 = 672px; 
 */

height: 62px;
border: 0px solid #000000;
overflow: hidden;
float: left;
margin: 0px;
}

#prods_marquis {
width: 6000px;  /* Really big value to make sure products are all on one line */
height: 62px;
border: 0px solid #000000;
clear: both;
float: left;
padding: 0px;
margin: 0px;
}

/* formatting for the l/r arrow buttons in each scroll bar */
#prods_leftarrow, #basics_leftarrow {
margin-left: 5px;
margin-right: 10px;
float: left;
}

#prods_rightarrow, #basics_rightarrow {
margin-right:5px;
float: right;
}

/* the little product images in the scrolly bar */
.prodbox {
padding: 1px;
height: 58px;
width: 76px;
background-color: #666666;
margin-left: 10px;
margin-right: 10px;
/*position: relative;*/
float: left;
}

/* styling for the border around the magnify zoom feature */
.moognifyBorder {
font-family: verdana, arial, sans serif;
background-color: #666666;
border: 0px solid #000000;
color: #FFFFFF;
font-size: 12px;
font-weight: bolder;
text-align: center;
margin-bottom: 10px;
z-index: 99,000;
}