/*=======================================================
 CSS Document for Ritzi Poochi
=======================================================*/

@import url("global.css");
@import url("thickbox.css");

.hidden { display: none; }
.show { display: block; visibility: visible; }

/*=============================================================
	Main layout
=============================================================*/

#container { width: 980px; height: auto; margin: -250px auto 0 auto; display: block; background: none; position: relative; left: auto; z-index: 10; }
#container:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; }
.top-bg { position: relative; top: 0; left: auto; margin: 0; width: 100%; height: 250px; display: block; z-index: 5; background: url('../images/bg-top.gif') no-repeat 50% 0; }

/*=============================================================
	Header - nav + logo + banner
=============================================================*/

#header { width: 980px; height: 300px; display: block; float: left; clear: both; background: url('../images/bg-header.jpg') no-repeat 0 250px; }
#logo { width: 330px; height: 250px; display: inline; float: left; padding: 0; margin: 0; position: relative; left: 150px; }
/*popup*/ body.popup #logo { float: none; clear: both; background: #fff; width: 600px; height: 119px; display: block; margin: 0 auto; text-align: center; }
#flashbanner { width: 500px; height: 250px; float: right; display: inline; position: relative; z-index: 15;  }

/*navigation*/
ul#nav { width: 500px; height: 40px; float: left; display: inline; margin: 10px 0 0 15px; clear: both; }
ul#nav li { display: inline; margin-left: 5px; position: relative; z-index: 10; float: left; }
ul#nav a { height: 40px; overflow: hidden; text-indent: -999em; display: block; float: left; }
ul#nav a:hover { background-position: 0 -40px!important; }
/*ul#nav ul { width: 175px; height: auto; display: block; position: absolute; top: 100%; left: -9999em; }
ul#nav ul li { clear: both; margin: 0!important; border-bottom: 1px solid #181515; display: block; float: left; width: 175px; }
ul#nav li li { display: block; width: 145px; height: 24px; padding: 3px 15px; color: #fff; text-align: center; text-decoration: none; text-indent: 0; background-color: #fbc6d8; }
ul#nav li li:hover, ul#nav li li.subhover { background-color: #6f4a3c; text-decoration: none; color: #fff; }

ul#nav li:hover ul, ul#nav li.over ul { left: 0; }
ul#nav li:hover a, ul#nav li.over.onsection a { background-position: 0 -40px!important; }*/

a#navhome { background: url('../images/nav-home.gif') no-repeat 0 0; width: 80px; }
a#navprofile { background: url('../images/nav-profile.gif') no-repeat 0 0; width: 85px; }
a#navcatalogue { background: url('../images/nav-catalogue.gif') no-repeat 0 0; width: 175px; }
a#navcontact { background: url('../images/nav-contact.gif') no-repeat 0 0; width: 100px; }
/*on page state*/
body#homepage a#navhome, body#profile-page a#navprofile, body#product-catalogue a#navcatalogue, body#contact-us a#navcontact { background-position: 0 -80px!important; }

/*cart*/
#cart a { text-decoration: none; color: #fff; font-size: 1.1em; overflow: hidden; position: relative; z-index: 20; width: 150px; height: 33px; background: url('../images/bg-cart-off.gif') no-repeat 0 0; float: right; margin: -20px 20px -20px 0; padding: 37px 80px 0 10px; }
#cart a:hover { text-decoration: underline; color: #fff; background: url('../images/bg-cart-on.gif') no-repeat 0 0; }

/*=============================================================
	Main body - left + right
=============================================================*/

#mainpage { width: 950px; padding: 30px 15px; height: auto; float: left; display: block; background: #181515 url('../images/bg-body.gif') no-repeat 20px bottom; clear: both; }
#mainpage:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; }

/*catalogue nav*/
ul#catalogue-nav { width: 180px; height: auto; padding-bottom: 190px; float: left; padding-top: 45px; background: url('../images/heading-catalogue.gif') no-repeat 0 0; display: block; }
ul#catalogue-nav li { clear: both; margin-bottom: 5px; width: 145px; height: 26px; padding: 4px 5px 0 30px; float: left; color: #000; background: url('../images/bg-nav-off.gif') no-repeat 0 0; text-decoration: none; }
ul#catalogue-nav li h3 { margin: 0 !important; }
ul#catalogue-nav li:hover, ul#catalogue-nav li.over { color: #fff; text-decoration: none; background: url('../images/bg-nav-on.gif') no-repeat 0 0; }
ul#catalogue-nav li:hover h3 a:hover, ul#catalogue-nav li.over h3 a:hover  { color: #fff!important; }

/*contents*/
#contents { width: 750px; height: auto; float: right; margin: 0; padding: 0; display: block; }
.text { padding: 0 15px; }
/*popup*/ body.popup #text { width: 590px; height: auto; padding: 15px; clear: both; background: #181515; margin: 0 auto; display: block; }

/*general listing*/
ul.listing { width: auto; height: 310px; padding: 5px; margin: 0 0 20px 0; float: left; display: inline; }
ul.listing li.title { width: 240px; height: 40px; clear: both; display: block; background: none!important; padding: 0 5px; margin: 0;  }
ul.listing li.title h2 { margin: 0!important;}
ul.listing li { float: left; width: 165px; height: 210px; display: inline; margin: 5px; padding: 25px 30px; }
ul.listing li img { display: block; margin: 0 auto; text-align: center; clear: both; width:auto; max-height: 125px; _height:125px;} /* width: 165px; height: 125px; */ /* Remember that you can never put a fixed width and height on a dynamic image */
ul.listing li div.image { width:165px; height:125px; }
ul.listing li .info { width: 155px; height: 40px; margin: 0 auto; clear: both; display: block; padding: 10px 5px 5px 5px; text-align: center!important; font-size: 1.2em; }
ul.listing li .button { width: 155px; height: 25px; margin: 0 auto; padding: 5px; text-align: center!important; }
ul.listing li .info span { height: 20px; overflow: hidden; display: block; color: #000; }
ul.listing li .info span.txt { height: 20px; overflow: hidden; display: block; color: #000; font-size: 0.9em; }
ul.listing li .info span.price { font-weight: bold; }
ul.listing li .info span.saving { color: #cb265e; font-weight: bold; }
ul.listing li .info span a { color: #CC0000; text-decoration: none; }
ul.listing li .info span a:hover { color: #663300; text-decoration: underline; }
ul.listing li .button input { clear: none!important; }
ul.listing li .button input { font-family: "Arial"; font-size: 11px; border: none; width: 70px!important; height: 25px; text-align: center; margin: 0 auto; display: inline; color: #fff; background: url('../images/button-off.gif') no-repeat 0 0!important; text-decoration: none; }
ul.listing li .button input:hover, ul.listing li .info input.subhover { color: #fff; text-decoration: none; background: url('../images/button-on.gif') no-repeat 0 0!important; }

/*featured products*/
#featured { width: 470px; background: url('../images/bg-double.jpg') no-repeat 0 0; }
#featured li { background: url('../images/frame1.gif') no-repeat 0 0; }

/*special product*/
#special { width: 235px; background: url('../images/bg-onsale.gif') no-repeat 0 0; }
#special li.title { width: auto!important; position: relative; left: 130px; }
#special li .info span.price, #special li .info span.saving { float: left; }
#special li .info span.price { text-decoration: line-through; font-weight: normal; padding: 0 5px 0 10px; }

/*main listing - category and products*/
#category, #products { width: 750px; height: auto!important; padding: 0!important;}
#category img, #products img { width: 165px; height: 125px; }
#category li { width: 165px; height: 255px; padding: 5px 40px 20px 40px!important; margin: 0 0 5px 5px!important; background: url('../images/bg-category.gif') no-repeat 0 0; }
#products li { width: 165px; height: 295px; padding: 5px 40px 20px 40px!important; margin: 0 0 5px 5px!important; background: url('../images/bg-listing.gif') no-repeat 0 0; }
#products li.onsale { background: url('../images/bg-onsale.gif') no-repeat 0 0!important; }
#products li.onsale .info span.price { text-decoration: line-through; font-weight: normal; padding-right: 5px; }
#products li.onsale .info span.saving { color: #cb265e; font-weight: bold; }
#category li h2.ctitle, #products li h3.ptitle { width: 180px; padding: 0; height: 70px; margin: 0; position: relative; z-index: 80; margin-left: -15px; }
#category li .info { height: 30px; padding-top: 20px; }
#category li .info span { height: 30px; padding-bottom: 5px; }
#products li .info select { width: 150px; border: 1px solid #f786ab; height: 20px; padding: 2px 3px 2px 5px; margin: 0; background-color: #fff; color: #000; }

/*details*/
.details { background-color: #181515; width: 740px; float: right; height: auto; margin-bottom: 20px; clear: both; display: block; }
.sales .contents #post { display: block!important; position: absolute; z-index: 20; width: 150px; height: 100px; background: url('../images/bg-sale.gif') no-repeat 0 0; top: -70px; left: 350px; }
.sales .noimages #post { left: 555px !important; }
.details ul#image-box { list-style: none; width: 205px; height: auto; float: right; margin: 0 0 0 30px!important; display: inline; }
.details ul#image-box li { background: url('../images/bg-image.gif') no-repeat 0 0; width: 165px; height: 125px; overflow: hidden!important; margin: 0 auto 10px auto; padding: 15px; text-align: center; float: left;  }
.details ul#image-box li img { width: auto; max-height: 125px; _height:125px;  }
.details h2 { width: 400px; margin-bottom: 10px; }
.details h2.noimages { width: 605px !important; }
.details h4.saving b { color: #cb265e; font-weight: bold; }
.details h4.saving em { text-decoration: line-through; font-weight: normal; padding-right: 5px; }
.details .contents { width: 470px; float: left; height: auto; background-color: #000; padding: 15px; display: block; position: relative; z-index: 20; }
.details .noimages { width: 675px !important; }
.contents:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; }
.details .button { clear: both; display: block; float: none; }
.details .contents .button select, .details .contents .button input { display: inline;}
.details .contents .button select { margin-top: 2px; }
.details .contents #post { display: none; }
.details .contents h3 { margin-bottom: 5px; }
.details .contents ul { margin: 0 0 15px 30px!important; display: block; }
.details .contents li { list-style: square!important; font-size: 1.1em; }

.details table tr.headerrow {
	background-color:#f2b5ca;
}

/*=============================================================
	Footer
=============================================================*/ 

#footer { width: 940px; height: 40px; display: block; margin: 0 auto 15px auto; padding: 10px 20px 0 20px; background: url('../images/bg-footer.gif') no-repeat 0 0; clear: both; }
#footer ul li { display: inline; float: left; margin-right: 30px; width: auto; }
#footer ul li p { display: block; margin-bottom: 0; color: #fff; line-height: 16px; }
#footer ul li.wflogo { margin: 0!important; float: right; width: 90px; }
#footer ul li a { color: #fff; text-decoration: none;}
#footer ul li a:hover { color: #ef82a8; text-decoration: underline;}
#footer ul li span.safemail a { font-weight: bold; color: #ef82a8!important; text-decoration: underline; }
#footer ul li span.safemail a:hover { color: #efe182!important; text-decoration: underline; }

/*=======================================================
 End of CSS Document for Ritzi Poochi
=======================================================*/