/*	

Main Shurepets.com Style Sheet

version: 1.0
author: bryan lademann
email: bryan@bryanlademann.com
website: http://bryanlademann.com
media: screen



*/

/* original code */




				
.StyleList
{
	width:200px; 
	FONT-FAMILY:Arial Narrow; 
	color: #330099;
	background-color: #FFFFFF;
	padding-right: 0px;
	font-size: 8pt; 
	text-align:left 
	}
.homelinks
{
	background: #fff ;
	vertical-align:top;
}
input
{
	width:100px; 
	FONT-FAMILY: Arial; 
	color: #330099;
	background-color: lavender;
	font-size: 8pt; 
	}
#add
{
	width:75px; 
	FONT-FAMILY: Arial; 
	color: #330099;
	background-color: lavender;
	border:solid 2px #330099;
	font-size: 8pt; 
	}
#add:hover
{
	width:75px; 
	FONT-FAMILY: Arial; 
	color: lavender;
	background-color: #330099;
	border:solid 2px #330099;
	font-size: 8pt; 
	text-align:center 
}

select {
	font-family: Arial; 
	color: #330099;
	background-color: lavender;
	font-size: 8pt; 
	text-align:left 
	}


#CookieTrail
{
	font-style:italic 
	}
#ProdTitle
{
	FONT-SIZE: 24pt; 
	font-style:italic 
	}
.Emphasis
{
	font-weight:bold; 
	FONT-SIZE: 12pt; 
	font-style:italic 
	}
#fadebg
{
	background-image:url(2005_index_images/bgfade.jpg);
	background-repeat:no-repeat
}
.ProdPrice
{
	font-weight:bold; 
	font-style:italic 
	}
.ProdNumber
{
	font-style:italic 
	}
.ProdDesc
{
	font-size:12pt 
	}
#ProdForm
{
	FONT-FAMILY: Arial; 
	font-size: 10pt; 
	text-align:right;
	padding-right: 0
	}
#Terms
{
	FONT-FAMILY: Arial; 
	FONT-SIZE: 9pt;	
	clear:both;
	width:750px;
	text-align:center
	}
#HeaderLinks
{
	margin-top: -5px;
	width:750px;
	text-align:center
	}
#FooterLinks
{
	clear:both;
	width:750px;
	text-align:center
	}
	
#ProdPic
{ 
	float:left; 
	width:450; 
	height:450; 
	margin: 0 0 0 0px; 
	padding:0 
	}
.ProdImage
{ 
	position:relative; 
	border:0; 
	top:0; 
	left:0; 
	height:450; 
	width:450 
	}
#ProdDescAndOrder
{
	width:300; 
	margin: 0 0 0 450px; 
	padding:0; 
	text-align:justify 
	}
	


/* ------------------------------------------------------------ 
 
= reset.css	

With thanks to Eric Meyer:
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ 
------------------------------------------------------------ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, font, img, ins, kbd, q, s, samp,
small, strike, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, textarea,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	font-weight: inherit;
	line-height: inherit; 
	}

/* Eliminates outline on links in Mozilla browsers. Remove for accessibility compliance*/
:focus {outline: 0;}

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img, :link img, :visited img { border: none; }


/* ------------------------------------------------------------
	
= base.css
------------------------------------------------------------ */


html, body  { height: 100%; }

/* Prevents horizontal 'jump' issue in browser when content is 'above the fold' */
html        { overflow-y:scroll; } 

.right      { float:right; }
.left       { float:left; }
.center     { text-align:center; margin: 0 auto; }

.em         { font-style:italic; }

.text-up    { text-transform:uppercase; letter-spacing:0.1em; font-weight:normal; }
.text-down  { text-transform:lowercase; }

.hide       { position:absolute; text-indent:-9999px; display: none; }      

a           { display:inline; text-decoration:none; }	
a:hover,
a:focus     { text-decoration:none; }

.clear      { clear: both; }       

/* 
The New Clearfix Method                                       
http://perishablepress.com/press/2009/12/06/new-clearfix-hack/ 
*/
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/* Makes all 'clickable' elements respond as links on :hover */
input[type=submit],label,select,.pointer { cursor:pointer; } 


/* ------------------------------------------------------------ 

= Navigation
------------------------------------------------------------ */


/* Use for horizontal navs/lists */
.horizontal       { list-style: none; margin: 0; padding: 0; }
  .horizontal li  { float: left; display: inline; } 
		.horizontal a { display: block;  text-decoration: none; width: 100%; } 
		
		
#nav     { width: 100%; position: relative; }
#nav li  { width: auto; float: right; margin-right: 26px; _margin-right: 0;}
  #nav a {
    font-family: "Hoefler Text", Garamond, Baskerville, "Baskerville Old Face", "Times New Roman", serif;
    color: #7C4D80; 
    line-height: 34px;
    font-size: 15px; 
    font-size: 13px\9;
    font-variant: small-caps;
    border-top: 1px solid #fff;
    _width: 130px;
    }
    #nav a:hover { border-top: 1px solid #7C4D80; }
  
#nav-global {
  float: left;
  display: inline;
  font-family: "Hoefler Text", Garamond, Baskerville, "Baskerville Old Face", "Times New Roman", serif;
  margin: 0 7px 0 20px;
  _margin: 0 7px 0 0;
  width: 130px;
  list-style-type: none;
  height:333px;
  } 
  #nav-global a {
    display: block;
    background: #E9F0DB;
    width: 100%;
    line-height: 28px;
    color: #556B2E;
    text-align: left;
    padding-left: 6px;
    font-size: 14px;
    }
    #nav-global a:hover { background: #83C00C; color: #fff; }


#dsa { position: absolute; bottom: 0; left: 0;}
	#dsa:active {top:568px;}
		


/* --------------------------------------------------------------

= 	Layout 
-------------------------------------------------------------- */

body { 
  background: #EBF3FA;
  padding-top: 18px\9; 
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Helvetica, Arial, sans-serif; 
  }


a {
	text-decoration:none;
	color: #BB282E; 
	position: relative;
  }
#content-main a:hover {
	text-decoration:underline; 
	color: #BB282E;
	}
	a:active { top: 1px;}

.container {
  width:908px;
	background: #fff;
	margin: 18px auto 0;
	border: 3px #4D6780 double;
	position: relative;
  }
 

#header {
  padding: 9px 0 0;
  }

#header #branding-logo { float: left; }

/* Phone number 
------------------------------*/
#header h3 {
  display: inline; 
  margin: 34px 26px 0 0; 
  color: #666; 
  font: 14px "Hoefler Text", Garamond, Baskerville, "Baskerville Old Face", "Times New Roman", serif; 
  text-transform: uppercase;
  }
  #header h3 span {font-size: 13px;display: block; color: #999; text-align: right;}

#content { position: relative; }

#content-featured {
  display:inline;
  float: left;
  background: #D4E7F7;
  width:728px;
  height:336px;
  position: relative;
  /*border-radius: 8px;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  behavior: url(/styles/pie.htc); /* allows css3 styles in IE */
  margin-bottom:18px;
  }
  
  
#content-featured .feature { display: inline; float: left; margin: 0; position: relative;}
  
#content-featured #consultant { background: url(../images/consultant-callout.jpg); width:504px; height:336px;}
#content-featured #shop { background: url(../images/sp-2010catalog.jpg); width:224px; height:336px; }

#content-featured .callout {
  position: absolute;
  width: auto;
  top: 280px ;
  right: 21px;
  }
  #content-featured .callout span {margin: 0 -2px 0 -1px;}
  #content-featured .callout:active {top: 281px}
  
  
#content-main .section { width: 480px; float: left; margin:0 24px 0 160px; _margin-left:80px;}
			
#content-main .section p {
  font-size:12px; 
  line-height: 1.5;  
  margin: 18px 0 1.5em; 
  color: #444; 
  }	

#content-main .section p a { font-style: italic;}

#content-main .section .phone-number { color: #000; white-space: no-wrap;}  
  
#content-main .tagline {
  font-family: "Hoefler Text", Garamond, Baskerville, "Baskerville Old Face", "Times New Roman", serif;
  color: #849A32; 
  font-size: 21px; 
  line-height: 1.2;
  margin: 0;
  font-weight: normal;
  }
  
#content-main #aside {
  float: left; 
  width: 212px;
  font-size:11px; 
  position: relative;
  color: #333;
  padding-top: 18px;
  }
  
  
.spotlight         { font-size:13px; margin-bottom: 9px; }
.spotlight a       { display: block; color: #333; font-variant: small-caps;  height: 36px;  background: #efefef; width: 222px;}
.spotlight img     { float: left; height: 36px;width: 105px; margin-right: 9px;}
.spotlight p       { color: #333; font-variant: small-caps;  height: 36px; }
.spotlight a:hover { text-decoration: none!important; background:#ddd}
  
  
/* Callout Buttons 
------------------------------*/
a.callout {  
  font-family: "Hoefler Text", Garamond, Baskerville, "Baskerville Old Face", "Times New Roman", serif;
  display: block;
  color: #fff ; 
  padding: 6px;
  letter-spacing: 1px;
  font-variant: small-caps;
  width: 100%;
  text-align: center;
  border: 3px double #fff;
  margin: 0 0 36px;
  }
  a.callout:hover  { background: #fff; text-decoration: underline !important;} 
    a.callout span { font-variant: normal; font-weight: normal; font-style: italic; font-family: times, arial, sans-serif; font-size:13px; margin:0 -1px 0 -3px; } 


.consultant { background: #BB282E; font-size: 15px; }
  .consultant:hover  { color: #BB282E; border: 3px double #BB282E; }


.shop { background: #BB282E; font-size: 15px; }
  .shop:hover  { color: #BB282E; border: 3px double #BB282E; }

.catalog { background: #BB282E; font-size: 15px;  padding: 6px 2px !important; }
  .catalog:hover  { color: #BB282E; border: 3px double #BB282E; } 
   .catalog span { font-variant: normal; font-weight: normal; font-style: italic; font-family: times, arial, sans-serif; font-size:13px; margin:0 -2px 0 -4px; letter-spacing: -1px;} 




/*  Social Bookmarks 
------------------------------ */

#share {
  clear: both;
	margin: 36px 0 0 5px;
	list-style-type: none;
	font-family: "Hoefler Text", Garamond, Baskerville, "Baskerville Old Face", "Times New Roman", serif;
	}

#share li {
	margin:0 0 9px;
	}
#share a {
  color: #444;
  font-size: 13px;
	display: block;
	font-style: italic;
	}
	#share a:hover {color: #BB282E;}

#share .facebook {
	background: url(images/icons.gif) 0 -37px no-repeat;
	padding-left: 22px;
	height: 17px;
	}
#share .twitter	{
	background: url(images/icons.gif) 0 -90px no-repeat;
	padding-left: 22px;
	height: 17px;
	}
#share .shareThis	{
	margin-left: 2px;
	}
	#share .shareThis a:hover {background: #fff; background-image: inherit;}


	
/* ------------------------------------------------------------ 

= footer
------------------------------------------------------------ */	

#footer { font-size: 10px; padding: 9px 0 36px; width: 800px; margin: 0 auto;}
  #footer p {text-align: right;}
  
  

/* Slideshow styles */

#catalog #content-featured { 
	overflow: hidden; /* Allows the slides to be viewed using scrollbar if Javascript isn't available */
	position: relative; 
	height: 735px;
	background: #fff; 
	font-family: "Hoefler Text", Garamond, Baskerville, "Baskerville Old Face", "Times New Roman", serif;
	}

#nav-slideshow           { list-style-type:none; position: absolute; top: 39px; left: 495px; }
#nav-slideshow li        { float: left; display: inline; width: 96px; margin: 0 20px 18px 0; } 
#nav-slideshow a { 
  display: block; 
  padding: 6px;
  letter-spacing: 1px;
  font-variant: small-caps;
  text-align: center;
  border: 3px double #fff;
  background: #BB282E;  
  color: #fff;
  width: 96px;
  
  }
  #next { margin-right: 0;}

#nav-slideshow a:hover   { text-decoration: none; background: #D64046; border: 3px double #fff;}

#nav-slideshow a:active,
#nav-slideshow a.current { text-decoration: none; }