/*********************** CSS for the new page-layout ********************/

/*******************************************************************/
/*************************** PAGE BASEMENT *************************/
/* The html-body */
body {
	margin: 3px 0 10px 0;
	padding: 0; 
	margin-left: auto;
	margin-right: auto;
	text-align:center;	
	background-image: url(/images/q-s/shadow.gif);
	background-repeat: repeat-y;
	background-position: center;
}

/* The page-content */ 
#main {
	position:relative;
	margin-left: auto;
	margin-right: auto;
}

/* Container for centering the page */
#page_margins {
	width:1004px;
	margin-top: 0pt;
	margin-left: auto;
	margin-right: auto;
}

/* Container for page-styles */
#page {
	color:#333333;
	font-family:Arial,Verdana,Helvetica,Sans-Serif;
	font-size:12px;
	font-weight:normal;
	line-height:normal;
	text-align:left;
	text-decoration:none;
}

/* Navigation on top */
#navigation {
	width: 1004px;
}

/* OPTIONAL: A special header at top */
#header {
	width:658px;
	margin: 0 173px 10px;
	text-align:center;
	padding: 8px 0 0 0;
}

/* Left side column */
#left-col {
	float:left;
	margin:0pt;
	padding-top:0pt;
	width:157px;
	z-index:1;
	height:100%;
	position:absolute;
}

/* Middle column */
#middle-col {
	margin:0pt 0 0 173px;
	padding-top:4px;
	position:absolute;
 	width:658px; 
	z-index:3;
}

/* Right side column */
#right-col {
	border:0pt none;
	float:right;
	left:847px;
	position:absolute;
	top:0px;
	width:157px;
	z-index:2;
}

/* Footer at the bottom */
#footer {
	width: 658px;
	margin: 0;
	padding: 0;
	font-family:Arial,Verdana,Helvetica,Sans-Serif;
	font-size:11px;
	font-weight:normal;
	text-decoration:none;
}
/*******************************************************************/
/****************************** NAVIGATION **********'**************/
/* Div for Cart */
    .cart{
        text-align:right;
        height:61px;
        margin:0;
        padding:0 5px 0 0;
        float:right;
    }
	.cart div{
		margin-top:13px;
	}
	
   .checkout_link{
        text-align:center;
        height:15px;
        width:150px;
        margin:0;
        padding:0;
        float:right;
    }
   /* Div for Sub-Links */
   .sublinks{
        text-align:center;
        height:15px;
        width:485px;
        margin:0;
        padding:0;
        font-family : Arial, Verdana, Helvetica, Sans-Serif;
	    color : #ffffff;
	    font-weight : bold;
	    font-size : 12px;
	    text-decoration : none;
	    line-height : normal;
        vertical-align:bottom;
   }
    /*  Div for Navigation-Background */
    .navibox {
        background-image:url(/images/navigation/navi_top_background.gif);
        background-repeat: no-repeat;
        width:1004px;
        height:79px;
     }
    /* Div for Logo */
    .navilogo{
        text-align:left;
        height:79px;
        width:200px;
        margin:0;
        padding:0;
        padding-left: 3px;
        margin-right:70px;
        float:left;
    }
  
    /* Divs f?r Pics */
   .navicontainer {
       width:485px;
       height:79px;
       float:left;
   }
   .navipiccontainer {
       width:486px;
       height:63px;
       float:left;
   }
   .navidiv{
		margin-top:0;
		margin-left:0;
		float:left;
    }
	
	/* use sprite-image with css positioning to improve performance  */
	div.navidiv a{
		background: url(/images/navigation/navigation_sprite.gif) no-repeat;
		float:left;
	}
    /* sprite positioning for Navigation images */
    div.navidiv a.navi_top_dogs {	background-position: 0 -666px;}
    div.navidiv a.navi_top_dogs_grey {background-position: 0 -777px;}
    div.navidiv a.navi_top_dogs:hover, div.navidiv a.navi_top_dogs_grey:hover {background-position: 0 -888px;}
    div.navidiv a.navi_top_cats {background-position: 0 -333px;}
    div.navidiv a.navi_top_cats_grey {background-position: 0 -444px;}
    div.navidiv a.navi_top_cats:hover, div.navidiv a.navi_top_cats_grey:hover {background-position: 0 -555px;}
    div.navidiv a.navi_top_rodents { background-position: -128px 0; }
    div.navidiv a.navi_top_rodents_grey {background-position: -128px -111px;}
    div.navidiv a.navi_top_rodents:hover, div.navidiv a.navi_top_rodents_grey:hover {background-position: -128px -222px;}
    div.navidiv a.navi_top_fish {background-position: 0 -999px;}
    div.navidiv a.navi_top_fish_grey {background-position: 0 -1110px;}
    div.navidiv a.navi_top_fish:hover, div.navidiv a.navi_top_fish_grey:hover {background-position: 0 -1221px;}
    div.navidiv a.navi_top_birds {background-position: 0 0;}
    div.navidiv a.navi_top_birds_grey {background-position: 0 -111px;}
    div.navidiv a.navi_top_birds:hover, div.navidiv a.navi_top_birds_grey:hover {background-position: 0 -222px;}
    div.navidiv a.navi_top_reptiles {background-position: 0 -1665px;}
    div.navidiv a.navi_top_reptiles_grey {background-position: 0 -1776px;}
    div.navidiv a.navi_top_reptiles:hover, div.navidiv a.navi_top_reptiles_grey:hover {background-position: 0 -1887px; }
    div.navidiv a.navi_top_horses {background-position: 0 -1332px;}
    div.navidiv a.navi_top_horses_grey {background-position: 0 -1443px;}
    div.navidiv a.navi_top_horses:hover, div.navidiv a.navi_top_horses_grey:hover {background-position: 0 -1554px;}
	
	/* spacer for topnav */
	div.navidiv a img{height:61px;}
	#dog_topnav img, #cat_topnav img{width:68px;}
	#rodent_topnav img{width:64px;}
	#fish_topnav img{width:69px;}
	#bird_topnav img{width:62px;}
	#reptile_topnav img{width:78px;}
	#horse_topnav img{width:74px;}
	
    /* Link-Styles for the Navigation */
    a.navi_link, .navi_link, a.navi_link:visited, .navi_link:visited {
        font-family : Arial, Verdana, Helvetica, Sans-Serif;
	    color : #ffffff;
	    font-weight : bold;
	    font-size : 12px;
	    text-decoration : none;
	    line-height : normal;
        vertical-align:bottom;
    }
   a.navi_link:hover, .navi_link:hover {
          font-family : Arial, Verdana, Helvetica, Sans-Serif;
          color : #ffed00;
          font-weight : bold;
          font-size : 12px;
          text-decoration : none;
          line-height : normal;
      }
     /* Font-Styles for the Cart */
    .cart_title {
          font-family : Arial, Verdana, Helvetica, Sans-Serif;
          color : #3c9700;
          font-weight : bold;
          font-size : 16px;
          text-decoration : none;
          line-height : normal;
    }


/*******************************************************************/
/****************************** FOOTER ****************************/
/* Copyright */
.footercopyright {
	width:491px; 
	float: left;
	text-align:left;
	margin: 0;
	padding: 0;
	color:#A4A4A4;
	font-family:Arial,Verdana,Helvetica,Sans-Serif;
	font-size:10px;
	font-weight:normal;
	text-decoration:none;
}
/* Date-Display */
.footerdate {
	width:157px;
	float:right; 
	text-align:right;
	margin: 0;
	padding: 0;
	color:#A4A4A4;
	font-family:Arial,Verdana,Helvetica,Sans-Serif;
	font-size:10px;
	font-weight:normal;
	text-decoration:none;
}
/* footer rows */
.footerrow_1, .footerrow_2, .footerrow_3, .footerrow_4{
	float: left;
	position:relative;
	width: 122px;
	margin: 0;
	padding: 0;
}
.footerrow_1 {left:35px;}
.footerrow_2 {left:86px;}
.footerrow_3 {left:132px;}
.footerrow_4 {left:184px;}