/***
single column stylesheet
Use this for all pages displaying a single 629px-wide container
1 + 629 + 1 = 631
border + col 1 + border
Last modified: 2/4/2009 by CLG
***/

/**************************************************************************************************************************************
To change many of the widths/heights requires that other certain values must also be changed at the same time. For this reason, beside these critical
attributes (or nearby if comment hacks do not allow) are comments with the calculations as to how to adjust them. You can delete these if you want, but do not 
delete MAC Hack comments (see below). To change the width of the entire layout, adjust the columns that make up the total, remembering the borders. 
Remember, even one small mistake will degrade or even break the layout, so be very careful!

For spacing within the cols, it's best to apply margins on content elements inserted into the cols, because padding directly on those col elements will
change their widths, breaking the layout.

Certain hiding hacks have been used extensively in this layout, so here is a quick explanation of them.

The Safari escape tab hack:
***************************
 (used on wrapper, and the 3 backgrounds for Moz and Opera).

Puts an escape in front of a valid number in the style name to replace a letter in that name, e.g. \65 is an e. A tab is then inserted (not a space).
The purpose of this hack is to hide some code from Safari. Unfortunately, some other browsers (like IE) see it for what it should be (but NOT Safari),
and so we must undo the code for those browsers by other hacks.

The Tan hack:
*************

* html .anyelement {rules read only by IE/Win and IE/Mac}

The MAC hack:
*************

(first the active comment you are reading now must be
closed...) ***/

/* \*/

/* */

/***...Back in comment mode now. Anything between those two comment lines will be hidden from IE/Mac. Don't use any comments within this hack or it will
close prematurely and IE/Mac will begin reading before it should.

The above two hacks are combined so as to feed rules only to IE/Win.

The Holly Hack:
***************

Proper use of backslash escape characters inside property names used in the Holly hack can further segregate rules to be read by only IE6 from rules for
IE5.x/Win.

If enabled, the 100% height in the html and body styles makes the design full height. It also breaks Moz because you should use min-height,
but that doesn't work! Note how these 100% heights are hidden from IE Mac with the MAC Hack, otherwise they break it.

XXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXX ***/

/******************************************************************************************************************************************/
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 

  margin:0; /*** Do NOT set anything other than a left margin for the page as this will break the design ***/
  padding:0;
  border:0;
/* \*/
  height:auto;
/* Last height declaration hidden from Mac IE 5.x */
}

body { 

	background:#EEEEEE url(../images/site/skinstripebkgrd.gif) repeat;

	font-family: Verdana, Helvetica, "Lucida Grande", Arial, sans-serif;

	voice-family: "\"}\"",inherit; /*Scalable font sizes for IE*/

	font-size:100.1%; /*** Don't change this setting. Make all other font-sizes in % (preferred) or ems ***/

	color:#66c;

	text-align: center;

	min-width:631px; /*** This is needed for moz. Otherwise, the header and footer will slide off the left side of the page if 
	the screen width is narrower than the design. Not seen by IE. Left Col + Right Col + Center Col + Both Inner Borders + Both Outer Borders ***/
	
	
}


body#Pets a#petsnav,body#Footwear a#footnav,body#forTheHome a#homenav,body#Accessories a#accnav,body#Apparel a#appnav,body#Gifts a#giftnav,body#Specials a#specnav,body#Books a#booknav	{
color:#003;
border-top:1px double #ccc;
border-bottom:1px solid #ccc;
background:#ffc;
font-weight: 400;
}


ul {
	margin-top: 1.0em;
	margin-bottom: 1.0em; 
	}
td {
	font-size: 75%;
	}
hr {
	margin-top: 2.0em;
	margin-bottom: 2.0em;
	}
img {
	border: 0;
	}
div,p{margin:0;
}
p.copyright{
font-size:65%;
}

.clear{
  clear:both;
/*** these next attributes are designed to keep the div
height to 0 pixels high, critical for Safari and Netscape 7 ***/
  height:1px;
  overflow:hidden;
  line-height:1%;
  font-size:0px;
  margin-bottom:-1px;
}
* html .clear{height:auto;margin-bottom:0} /*** stops IE browsers from displaying
the clear div/br in the page, as these are for Moz/Opera and
Safari only. If IE 5.x Win DID display these, the page is too high ***/

#fullheightcontainer{
  margin-left:auto; /*** Mozilla/Opera/Mac IE 5.x alignment of page ***/
  margin-right:auto; /*** Mozilla/Opera/Mac IE 5.x alignment of page ***/
  text-align:left; /*** IE Win re-alignment of page if page is centered ***/
  position:relative; /*** Needed for IE, othewise header and footer aren't contained directly above and below the body ***/
  width:631px; /*** Needed for Moz/Opera to keep page from sliding to left side of page when it calculates auto margins above. 
  Can't use min-width. Note that putting width in #fullheightcontainer shows it to IE and causes problems, so IE needs a hack
to remove this width. Left Col + Right Col + Center Col + Both Inner Border + Both Outer Borders ***/

/* \*/
  min-height:100%;
/* Last height declaration hidden from Mac IE 5.x */
/*** Needed for Moz to give full height design if page content is too small to fill the page ***/
background:#EEEEEE url(../images/site/lt-skinstripebkgrd.gif) repeat;
}
.clear{
  clear:both;
/*** these next attributes are designed to keep the div height to 0 pixels high, critical for Safari and Netscape 7 ***/
  height:1px;
  overflow:hidden;
  line-height:1%;
  font-size:0px;
  margin-bottom:-1px;
}
#wrapper{
  min-height:100%; 
  
  /*** moz uses this to make full height design. As this #wrapper is inside the #fullheightcontainer which
 is 100% height, moz will not inherit heights further into the design inside this container, which you should be able to do with
use of the min-height style. Instead, Mozilla ignores the height:100% or min-height:100% from this point inwards to the center of the design - a nasty bug.
If you change this to height:100% moz won't expand the design if content grows. Aaaghhh. I pulled my hair out over this for days. ***/

/* \*/
  height:auto;
/* Last height declaration hidden from Mac IE 5.x */
/*** Fixes height for non moz browsers, to full height ***/

  border-right:1px hidden #000000; /*** Sets the external right side border. ***/
  border-left:1px hidden #000000; /*** Sets the external left side border. ***/
  background:#EEEEEE url(../images/site/lt-skinstripebkgrd.gif) repeat;/*** Set background color for side columns for Safari & IE ***/
}

#wrapp\65r{ /*** for Opera and Moz (and some others will see it, but NOT Safari) ***/
background:#EEEEEE url(../images/site/lt-skinstripebkgrd.gif) repeat;
  height:auto; /*** For moz to stop it fixing height to 100% ***/
}

/* \*/
* html #wrapper{
  height:100%;
}
/* Last style with height declaration hidden from Mac IE 5.x */
/*** Fixes height for IE, back to full height, from esc tab hack moz min-height solution ***/

#outer{
  z-index:1; /*** Critical value for Moz/Opera Background Column colors fudge to work ***/
  position:relative; /*** IE needs this or the contents won't show outside the parent container. ***/
  margin-left:1px; /*** Critical left col dimension value = left col width ***/
  width:627px; /*** Critical left and right col/divider dimension value (moves inversly) = center col width ***/
  border-left:1px hidden #000000; /*** Sets the internal left side border. ***/
  background:#EEEEEE url(../images/site/lt-skinstripebkgrd.gif) repeat; /*** Sets background of center col***/
/* \*/
  height:100%;
/* Last height declaration hidden from Mac IE 5.x */
/*** Needed for full height inner borders in Win IE ***/
}

/*** The next style hack for widths are NOT needed if no internal side borders are needed ***/
* html #outer{ /*** IE5.x/win box model fix ***/
  background:#EEEEEE url(../images/site/lt-skinstripebkgrd.gif) repeat;
  width:628px; /*** Critical left and right col/divider dimension value
(moves inversly) = Center Col Width + Both Inner Borders ***/
  w\idth:627px; /*** Critical left and right col/divider dimension value (moves inversly) = Center Col Width ***/
}

#left{
  width:3px; /*** Critical left col/divider dimension value = Left Col Width + 1px + One Internal Border Width ***/
  float:left;
  display:inline;
  position:relative; /*** IE needs this or the contents won't show
outside the parent container. ***/
  margin-left:-2px; /*** Critical left col/divider dimension value = left col width + one internal border width ***/
background:#EEEEEE url(../images/site/lt-skinstripebkgrd.gif) repeat;
}

*>html #left{width:2px;} /*** Fix only for IE/Mac = left col width + one internal border width ***/
#container-left{
  width:0px; /*** Critical left col dimension value = left col width - 1px ***/
}

/*** Static fixes ***/

/*** a Note on the Holly hack: if IE/Win shows bugs it's a good idea to apply the height:1% hack to different elements and see if that fixes the problem. Sometimes it may be
     necessary to use "position: relative;" on certain elements, but it's hard to tell in advance which elements will need such fixes. ***/
/*** This is a STATIC fix for IE5/Win at the largest text size setting. ***/
/* \*/
* html #left{margin-right:-3px;}
/* Above style hidden from Mac IE */
/*** All the IE fixes that are inside separate "Mac-hacks" may be grouped within just one Mac-hack for convenience if desired. However, each fix must come
     later than the rule it is fixing or the fix itself will be overridden. ***/
	 
#center{
  width:627px; /*** Set to = center col width ***/
  float:right;
  display:inline;
/* \*/
  margin-left:-1px;
/* Hidden from IE-mac */
height: 100%;
}

#clearheadercenter{
  height:125px; /*** needed to make room for header in center column ***/
  overflow:hidden;
}

#clearheaderleft{
  height:125px; /*** needed to make room for header in left column ***/
  overflow:hidden;
}

#clearfootercenter{
  height:52px; /*** needed to make room for footer in center column ***/
  overflow:hidden;
}

#clearfooterleft{
  height:52px; /*** needed to make room for footer in left column ***/
  overflow:hidden;
}

/******Header styles ***********/

#header{
  z-index:1; /*** Critical value for Moz/Opera Background Column colors fudge to work ***/
  position:absolute;
  top:0px;
  width:631px; /*** Set to Left Col (not if left sidebar fully intrudes into header or left sidebar is off) + Right Col (not if right sidebar 
  fully intrudes into header or right sidebar is off) + Center Col + Both Inner Borders (not if any sidebar intrudes into header or footer, or Inner 
  Borders are off) + Both External Borders (not if external borders are off) ***/
  height:125px; /*** = Top Margin + One Outer Border + header to body divider depth + subheader1 height + any other subheader heights ***/
  overflow:hidden;
}

#header a.nav, #header a.nav:link, #header a.nav:visited, #header.chosen {
display:block;
width:88px;
height:16px;
padding: 0 0 4px 0;
margin: 1px 1px 1px 0;
text-align: center;
text-decoration: none;
font-family: Verdana, Helvetica, "Lucida Grande", Arial, sans-serif;
font-size: 65%;
color:#66c;
line-height:14px;
overflow:hidden;
float:left;
}
#header a.nav:hover {
color:#003;
background:#ffc;
font-weight: 600;
}
#header a.nav:active {
color:#03c;
background:transparent;
}
#header .chosen {
font-weight:600;
color:#03c;
background:transparent;
}
#header .top-test, #header .top-test-side {
font-weight:600; 
font-size: 80%;
line-height: 0.8em;
margin-top: 2px;
margin-bottom: 3px; 
padding: 3px 10px 3px 0;
}

#header ul	{
border: 0;
margin: 1px 1px 1px 0;
padding: 0 0 4px 0;
text-align: center;
list-style-type: none;
}

#header ul li	{
display: block;
float: left;
}

#header ul li a	{
width:88px;
height:18px;
text-decoration: none;
font-family: Verdana, Helvetica, "Lucida Grande", Arial, sans-serif;
font-size: 65%;
color:#66c;
line-height:14px;
overflow:hidden;
}

#header ul li a:hover	{
color:#003;
background:#ffc;
font-weight: 600;
}


 .lightup {
color:#003;
background:#ffc;
font-weight: 600;
}
/**************************Subheader styles ***********************/


#subheader1{
 background:#EEEEEE url(../images/site/lt-skinstripebkgrd.gif) repeat; /*** Background Color of Sub-header #1 ***/
  text-align:center;
  margin:0 1px; /*** Margin to show left and right External Borders - all sub-headers and sub-footers ***/
  height:100px; /*** sub-header row height ***/
}

#subheader1 form {
margin: 0;
font-size: 75%;
font-weight:600;
color:#03c;
}

#subheader1 #search_box {
	float: right;
    width: 120px;
    height: 18px;
	font-size: 75%;
	color:#66c;
    background: url(../images/site/bg-search_box_01.gif) no-repeat;
	padding: 0 25px 0 0;
}

#subheader1 #search_box #s {
    float: left;
    padding: 0;
    margin: 3px 0 3px 3px;
    border: 0;
    width: 110px;
    background: none;
	font-size: 110%;
	color:#66c;
}
#subheader1 input {  
 margin: 0;
 padding: 0;
 color:#66c;
}
#subheader1 input:focus, select:focus, textarea:focus {

}
#subheader1 p {
	font-size: 65%;
	line-height: 1.1em;
	margin-top: 1.3em;
	margin-bottom: 1.3em; 
	}
	
#subheader1 a       {
	font-size: 70%;
	color:#66c;
	text-decoration: none;
	font-weight: 600;
	outline: none;
	}
#subheader1 a:visited {
	}
#subheader1 a:active {
	}
#subheader1 a:hover {
        color:#003;
        background:#ffc;
        text-decoration: none;
	}
#subheader1 strong, b {
	font-weight: bold;
	}
#subheader1 hr {
	margin: 0px; /* fixes xhtml N6 bug where the hr sits to the left*/
	color: #ccc; /* for ie */
	background-color: #ccc; /* for everyone else */
	height: 1px;
	}


/***** Container Center styles *********/
div.breadcrumb {
text-align:left;
font-family: Verdana, Helvetica, "Lucida Grande", Arial, sans-serif;
font-size: 65%;
color:#ccc;
font-weight:300;
margin-bottom:10px;
padding-left: 93px;
}
div.breadcrumb a {
font-weight:300;
color:#ccc;
padding-left: 93px;
}
div.breadcrumb a:hover {
color:#003;
background:#ffc;
font-weight: 600;
padding-left: 93px;
}
	
#container-center{
width:627px; /*** Set to = center col width ***/
  float:right;
  display:inline;
/* \*/
  margin-left:-1px;
/* Hidden from IE-mac */
height: 100%;
font-size: 70%;
}

#container-center a   {
	font-size: 95%;
	color:#66c;
	text-decoration: underline;
	font-weight: 400;
	outline: none;
	}

#container-center a:visited {
	}
#container-center a:active {
	}
#container-center a:hover {
        color:#003;
        background:#ffc;
        text-decoration: none;
		font-weight: 600;
	}
#container-center strong, b {
	font-weight: bold;
	}
#container-center hr {
	margin: 0px; /* fixes xhtml N6 bug where the hr sits to the left*/
	color: #ccc; /* for ie */
	background-color: #ccc; /* for everyone else */
	height: 1px;
	}
#container-center p {
	font-size: 100%;
	line-height: 1.1em;
	margin-top: 1.3em;
	margin-bottom: 1.3em; 
	}
#container-center ul {
    margin: 0 auto;
}

/* The wider the #list_wrapper is, the more columns will fit in it */
#list_wrapper{
    width: 630px
}

/* The wider this li is, the fewer columns there will be */
    ul.multiple_columns li{
        text-align: left;
		font-size: 90%;
		color:#ccc;
        float: left;
        list-style: square;
        height: 20px;
        width: 105px;
		color:#ccc;
    }
	ul.multiple_columns_admin li{
        text-align: left;
		font-size: 110%;
		color:#ccc;
        float: left;
        list-style: square;
        height: 20px;
        width: 225px;
}

#container-center .product {
	font-size: 120%;
	}
#container-center .productfeatures {
	float: right;
	width: 100%;
	font-size: 120%;
	text-align: right;
	vertical-align: top;
	}	
	
#container-center .productfeatures input{
	align: right;	
}
	
#container-center img {
	border: 0;
	}
	
#container-center li {
	line-height: 1.1em;
	margin-top: 0.3em;
	margin-bottom: 0.2em;
	margin-left: 2em;
	margin-right: 2em;
	padding-left: 1em;
	}
	#container-center .product li {
	font-size: 110%;
	line-height: 1.1em;
	margin-top: 0.3em;
	margin-bottom: 0.2em;
	margin-left: 2em;
	padding-left: 1em;
	}
#container-center h4 {
	color:#003;
	background:#ffc;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	margin:2px 0 2px 0;
	padding:5px 10px;
	font-size:130%;
	font-weight:700;
	text-align: center;
	}
#container-center h5 {
	color:#66c;
	border-bottom:1px solid #ccc;
	margin:2px 0 2px 0;
	padding:5px 10px;
	font-size:130%;
	font-weight:500;
	text-align: left;
	}
#container-center .prose-test, .prose-test-side {
font-weight:500; 
font-size: 80%;
line-height: 1.1em;
margin-top: 0.3em;
margin-bottom: 0.2em; 
}
#container-center .italics-test, #container-center a.italics-test{
font-style: italic;
font-weight: 400;
font-size: 80%;
line-height: 1.1em;
margin-top: 0.3em;
margin-bottom: 0.2em; 
text-align: right;
}
#container-center .makesmaller  {
font-size: 60%;
}

#container-center .makelarger  {
font-size: 130%;
}

#container-center .menuhdr {
	font-family: Verdana, Helvetica, "Lucida Grande", Arial, sans-serif;
	background-color : #ccf;
	color : #ffc;
	font-size :85%;
	font-weight : 500;
	padding : 3px 5px;
	text-align : left;
}

#container-center td, .vm al {
	vertical-align:center;
	text-align:left;
	color:#66c;
	font-size: 90%;
	font-weight: 500;
}


#container-center input, select, textarea {
	border: 1px solid #ccf;
}



/* standard table display */
#container-center.std_table {
	border:1px solid #CCCCCC !important;
	margin:0;
	padding:10px;
	text-align:left;
	vertical-align:top;
	line-height: 1.1em;
	font-size:70%;
	font-weight:550; 
}

#container-center.std_table table { 
	border-collapse:collapse;
}

#container-center.std_table th { 
	vertical-align:top;
	text-align:right;
	padding:0px 10px 0px 0px;
	font-weight:600;
}
#container-center.std_table td {
	padding:0px 5px 0px 0px;
}

#container-center .bt .imgbtn {
	position: relative;
	top: -130px;
	left: 500px
}

#container-center .imgbtn-ch {
	position: relative;
	top:-24px;
	left: 412px
}

/* shopcustomer.asp form */

#container-center table.tbl_customer{
	font-size: 75%;
	font-weight: 500;
}

#container-center table.tbl_customer th {
	vertical-align:top;
	text-align:right;
	font-weight:normal;
}

#container-center table.tbl_customer td, .txtfield {
	vertical-align:top;
	text-align:left;
	font-weight: 500;
	color:#33c;
}

#container-center table.tbl_customer td, .al .vt{
	vertical-align:top;
	text-align:left;
	color:#66c;
	font-size: 100%;
	font-weight: 400;
}

#container-center table.tbl_customer iframe {	/* refer to shoplicense.htm for changing license styles */ 
	width:100%;
}

#container-center table.tbl_subproduct {
	border-collapse:collapse;
	margin-right:2px;
	margin-bottom:2px;
	border:1px solid #ddd;
	background:#F7F7F7;
	text-align:center;
	width:100px;
	float:left;
}

#container-center table.tbl_subproduct td {
	padding:3px 5px;
}

#container-center .top-test {
font-weight:700; 
font-size: 90%;
line-height: 1.2em;
margin-top: 2px;
margin-bottom: 3px; 
padding: 3px 10px 3px 0;
}

/*******Checkout Table ************/

#container-center.std_table_check {
	border:1px solid #CCCCCC !important;
	margin:0;
	padding:10px;
	text-align:right;
	vertical-align:top;
	line-height: 1.1em;
	font-size:40%;
	font-weight:550; 
}

#container-center.std_table_check table { 
	border-collapse:collapse;
}

#container-center.std_table_check th { 
	vertical-align:top;
	text-align:right;
	padding:0px 10px 0px 0px;
	font-weight:600;
}
#container-center.std_table_check td {
	padding:0px 5px 0px 0px;
}
#container-center .std_table_check  .al .vt{
	vertical-align:top;
	text-align:right;
	color:#33c;
	font-size: 70%;
	font-weight: 400;
}

#container-center table .std_table_check td, .txtfield {
	vertical-align:top;
	text-align:left;
	font-weight: 500;
	color:#33c;
}
.txtfielddropdown{
	color: #33c;
	font-size:120%;
	font-style: normal;
	font-weight: 500;
	border:1px solid #66c;
}


/********Footer styles ************/

#footer{
  z-index:1; /*** Critical value for Moz/Opera Background Column colors fudge to work ***/
  position:absolute;
  clear: both;
  width:631px; /*** Set to Left Col + Right Col + Center Col + Both Inner Borders + Both External Borders ***/
  height:62px; /*** = Bottom Margin + One Outer Border + body to footer divider depth + subfooter1 height + any other subfooter heights ***/
  overflow:hidden;
  margin-top:-62px; /*** negative height ***/
}

#footer a.nav, #footer a.nav:link, #footer a.nav:visited, #footer.chosen {
display:block;
width:88px;
height:22px;
padding: 0 0 4px 0;
margin: 1px 1px 1px 0;
text-align: center;
text-decoration: none;
font-family: Verdana, Helvetica, "Lucida Grande", Arial, sans-serif;
font-size: 65%;
color:#66c;
line-height:14px;
overflow:hidden;
float:left;
}
#footer a.nav:hover {
color:#003;
background:#ffc;
font-weight: 600;
}
#footer a.nav:active {
color:#03c;
background:transparent;
}
#footer .chosen {
font-weight:600;
color:#03c;
background:transparent;
}




/***************Subfooter styles ***************/


#subfooter1{
  background:#EEEEEE url(../images/site/lt-skinstripebkgrd.gif) repeat; /*** Background Color of Sub-footer #1 ***/
  text-align:center;
  margin:0 1px; /*** Margin to show left and right External Borders - all sub-headers and sub-footers ***/
  height:40px; /*** sub-footer row height ***/
}




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

.outer_horiz_border, .sb_outer_horiz_border{
  background:#EEEEEE url(../images/site/lt-skinstripebkgrd.gif) repeat;
  height:1px;
  overflow:hidden;
  font-size:0px
}

#gfx_bg_middle{
  top:0px;
  position:absolute;
  height:100%;
  overflow:hidden;
  width:627px; /*** = Center Col Width ***/
  margin-left:1px; /*** = Left Col Width ***/
  background:transparent; /*** Set background color for center column for Mozilla & Opera ***/
  border-left:1px hidden #000000;
  border-left:1px hidden #000000;
}

* html #gfx_bg_middle{
  display:none; /*** Hides the moz fix from IE ***/
}