body {font-size:76%; font-family: arial, verdana, sans-serif; word-wrap:break-word;color:#484849; } /*These formats are hereaditory from previous style sheet and are likely to be used by product listings*/ .sml{font-size: 9px;line-height: 10px;text-align:right} .sml2{font-size: 11px;line-height: 12px;font-weight:bold} .sml3{font-size: 11px;line-height: 12px;font-weight:normal} .med1{font-size: 12px;line-height: 20px;font-weight:bold} .med2{font-size: 12px;line-height: 20px;font-weight:normal} .lrg1{font-size: 17px;line-height: 20px} .lrg2{font-size: 15px;line-height: 20px} .hideme {display: none;} .showme {display: block;} li.paw {list-style-image: url(bullet.gif);} ul.paw {list-style-image: url(bullet.gif);} p {font-size:12px;line-height:17px} li{font-size:12px;line-height:17px} td {font-size:12px;line-height:17px;vertical-align:top} a{text-decoration:none} a:link{text-decoration:none} a:hover{font-weight:bold;text-decoration:underline} .cats{font-size:11px;line-height:14px} .ad{text-decoration: none;color: #000000} .al{text-decoration: none;color: #ffffff;} .ag{text-decoration: none;color:#006600} h1 {font-size:15px;margin:1px;color:#000000} h2 {font-size:13px;margin:1px;line-height: 15px} h3 {font-size:13px;margin:1px;line-height: 15px} .col1{color:#0000ff} .col2{color:#F48134} .col3{color:#ffffff} .col4{color:#ff9000} .col5{color:#FF0018} .col6{color:#f7baee} .col7{color:#000000} table.simple {border: 1px outset gray;border-collapse: collapse;border-spacing: 2px;} table.simple td {border: 1px inset gray;padding: 1px;-moz-border-radius: 0px;} /*These styles are for embedded elements of the site*/ #header-image {font-weight:bold; line-height:20px; color:#ffffff; margin:0px 0 0 14px; padding:0px 0px 0 25px; font-size: 12px; height:28px; width:220px; background:url(head_image.gif) 0 100% no-repeat;z-index:4;} .hideme {display: none;} /*email a friend feature*/ .showme {display: block;} .click_for_details{color:grey;font-size: 9px;line-height: 10px;text-align:center;} /*text under product images*/ .cat_header {font-size: 14px;line-height: 20px;font-weight:bold;color:#9600ff;} /*category header: ste_cat_desc.txt*/ .prod_name_catpage {font-size: 13px;line-height: 15px;font-weight:bold;color:#000000;} /*product names: ste_prodsm_dsimg */ .prod_name_detailpage {font-size: 16px;line-height: 20px;font-weight:bold;color:#000000;} /*product names: ste_prdlg_ph2-8 */ .prod_short_desc {font-size: 12px;line-height: 15px;font-weight:normal;color:#484849;} /*category header: ste_cat_desc.txt*/ .prod_long_desc {font-size: 12px;line-height: 13px;font-weight:normal;color:#484849;} /*category header: ste_cat_desc.txt*/ #dog-guides {padding:20px;} #dog-guides p {margin-bottom:10px;margin-top:10px;} *html, body {margin 0; padding: 0;} /*this is the main framework of the ste_layout*/ #layout{position:relative; max-width:1000px; padding:0 0 0 20px; margin: 0 auto 0;min-width:800px;} #logo {position:absolute; top:5px; left:5px;z-index:10;} #maincontent{padding:10px;position:absolute; top:160px; left:180px;z-index:1; right:175px;} * html #maincontent {position:absolute; top:160px; width:600px;z-index:1;} /*Handles the image map at the top right of screen*/ #top_banner {postion:absolute; height:180px; width:760px; position:absolute; right:10px; top:0px; background:url(image_map_banner_3.gif);} *html #top_banner {postion:absolute; height:180px; width:760px; left:200px; top:0px; background:url(image_map_banner_3.gif);} .header{position:relative;width:900px;z-index:1;} #right-head-image {height:180px; width:760px; position:absolute; right:10px; top:5px; background: url(head-image.png) 0 100% no-repeat;z-index:1} .nav-container{position:relative; top:80px; height:75px;background:url(nav-container.png) 0 100% no-repeat;z-index:4;} /*this handles the horizontal top menu (dogs - cats */ #menutop {position:absolute;top:3px; left:20px; height:32px; padding:0; margin:8px;list-style:none; background:url(ulback.gif) repeat-x;} #menutop li {float:left;} #menutop li a {display:block; height:32px; line-height:28px; padding:0 20px 0 0; float:left; color:#fff; text-decoration:none;} #menutop li a b {display:block; height:32px; float:left; padding:0 0 0 20px; cursor:pointer;} #menutop li a:hover, .dogs #menutop li#dogs a, .cats #menutop li#cats a{background:url(tab_a.gif) no-repeat right top; line-height:28px;} #menutop li a:hover b, .dogs #menutop li#dogs a b, .cats #menutop li#cats a b{background:url(tab_b.gif) no-repeat left top; line-height:28px;} /*this style handles the search boz*/ #search_box {position:relative;left:300px; top:5px; width: 180px;height: 36px;background: url(dog-crate-search.gif);z-index:1;} #search_form #s {position:absolute;left:5px;padding: 0;margin: 10px 0 0 4px;border: 0;width: 159px;background: none;} #search_form #go {position:absolute;left:140px;margin: 3px 4px 0 0;z-index:10;height:36px;width:36px;} /*this handles the horiz sub menu - the first line governs location of menu*/ #nav {position:absolute;padding:0px;margin:0px; top:42px;left:15px; margin-top:0px;} #nav ul {margin:0 auto 0px auto; padding:0px; list-style:none; display:table; white-space:nowrap; font-family: arial, verdana, sans-serif; font-size:11px;} #nav li {line-height:10px; display:table-cell; margin:0; padding:0; font-size:11px;} #nav a {float:left; color:#fff; background: #c373f2 url(left2.gif) no-repeat left bottom; margin:0 2px 0 0; padding:0 0 0 2px; text-decoration:none; letter-spacing:1px;} #nav a b {float:left; display:block; background:transparent url(right2.gif) no-repeat right bottom; padding:4px 16px 4px 12px;} #nav a:hover {background-color:#ff9000; cursor:pointer;} #nav #current a {background-color:#ff9000;} #nav {padding:1px 0 0 0; background:#edceff; border-top:2px solid #ff9000;} #login{position:absolute; top:7px;left:530px;color:#575655;z-index:100;} /*Handles the 'any questions' menu */ #questions{position:absolute; top:35px;left:740px;color:#575655;z-index:100;} #qmenu {list-style-type:none; margin:0 0 30px 0; padding:0;} #qmenu li {display:block; float:left; position:relative; z-index:100; margin-right:1px;} #qmenu li span {display:block; z-index:100; padding: 5px 10px;font-size:1.1em;} #qmenu li a, #qmenu li a:visited {display:block; padding:0; white-space:nowrap;} #qmenu dl {position:absolute; top:0; left:0; margin: 0; padding: 0; background:transparent url(opaque.png);z-index:100} * html #qmenu dl {background:transparent url(opaque.gif);} #qmenu dt {margin:0; font-size: 1.1em; float:left;z-index:100} #qmenu dd {display:none; background: transparent; clear:left; margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;} #qmenu dt a, #qmenu dt a:visited {display:block; color:#000; padding: 5px 10px; text-decoration:none;} #qmenu dd a, #qmenu dd a:visited {color:#000; text-decoration:none; display:block; padding: 5px 10px;} #qmenu li a:hover {border:0; background:#f4b35e; color: #fff; } #qmenu li:hover dd, #qmenu li a:hover dd {display:block;z-index:100} #qmenu li:hover dl, #qmenu li a:hover dl {padding-bottom:15px;} #qmenu li:hover dt a, q#menu li a:hover dt a, #qmenu dd a:hover {color:#ffffff;} /*currencu and shopping cart panel*/ select {font: normal 13px Arial, SansSerif, Verdana; color: black;} .dropdown_container {border: 0px; position: relative; margin:3px 7px; width: 32px; height: 18px; overflow: hidden;} .dropdown_opt {color: black; background: #ffffff; position: absolute; width: 35px; height: 22px; top: -2px; left: -2px;} #shopping_cart_box {position:absolute; padding:5px 2px 0 50px;top:30px; left:640px;width: 50px; height:40px;background: url(dog-crate-basket.png) no-repeat; cursor:pointer;} #wrapper {overflow:hidden;} /*This handles the LEFT panel*/ #cat_list {position:relative;top:75px;float:left; width:160px; height:700px; padding:5px; z-index:10;background: url(category-back.gif) no-repeat;} /*this handles the vertical catagory menu */ #flyout {float:left; padding:0; margin:2px 0px 0px 0px; list-style:none; width:240px;z-index:9;} #flyout ul {list-style:none; height:auto; background: url(trans.gif); position:absolute; left:-9999px; top:0px;} #flyout table {border-collapse:collapse; width:0; height:0; margin:-1px -10px;} #flyout li {float:left; margin-bottom:1px;} /*the width/height= menu button*/ #flyout li a {border-top:1px solid #ffffff;display:block; float:left; width:150px; height:20px; background:#edceff; color:#000; line-height:20px; font-family: Arial, Helvetica, sans-serif ; text-decoration:none; text-indent:5px;font-size: 12px} #flyout li a.fly {background:#edceff url(right-arrow.gif) no-repeat right center;} #flyout li:hover {position:relative;} #flyout li a:hover {position:relative; background-color:#ff9000; color:#fff;} /*flyout hover color*? #flyout li:hover > a {background-color:#ff9000; color:#fff;}/*hover color*/ #flyout ul li a {background:#db9ffe;} #flyout ul li a.fly {background:#aaa url(right-arrow.gif) no-repeat right center;} #flyout ul ul li a {background:#ccc;} #flyout ul ul li a.fly {background:#ccc url(right-arrow.gif) no-repeat right center;} #flyout ul ul ul li a {background:#ddd;} #flyout li a.current, #flyout ul li a.current, #flyout ul ul li a.current, #flyout ul ul ul li a.current {background-color:#c40; color:#fff;} #flyout :hover ul, #flyout :hover ul :hover ul, #flyout :hover ul :hover ul :hover ul {left:100px;} /*flyout distance*/ #flyout :hover ul ul, #flyout :hover ul :hover ul ul {left:-9999px;} #flyout ul li:hover > a {background-color:#e60; color:#fff;} #flyout ul ul li:hover > a {background-color:#e60; color:#fff;} #currency_box {position:relative; top:1px;left:1px; width: 67px;height: 25px;background: url(curr_chg.gif) no-repeat;z-index:100;} #currency_box #cgo {border:0px; width: 23px;height: 25px;float: right;background: url(curr_chg_go.gif) no-repeat;cursor: pointer;} /*This handles the right banner panel*/ /*this style handles the mailist boz*/ #maillist-wrapper {position: relative; left:0px; height: 200px; width:150px;background: url(dog-maillist.gif) no-repeat left top;} #maillist {text-align:center;position:absolute;left:15px; top:80px} #maillist .input_text {margin: 0px; padding: 5px 6px 0px 6px; color: #758384;margin-bottom: 5px;display: block;padding: 4px;border: solid 1px #9600ff;background-color: #edceff; } #maillist .button { margin-bottom: 5px;display: block;padding: 4px;border: solid 1px #9600ff;background-color: #edceff;border:none; background: url(button-signup.gif) no-repeat left top; margin: 0px; padding:0px; cursor: pointer; height: 80px; width: 80px; text-indent: -300em;} #right_banner {position:absolute;top:160px;left:830px; right:0px; width:150px; padding:10px; } * html #right_banner {position:absolute;top:100px;left:800px; width:150px; padding:10px; } #footer {text-align:center;position:absolute; padding:5px;clear;both;font-size: 12px;line-height: 20px;font-weight:normal} /*test section to see if we can get tabs in product detail*/ /* ######### Style for Tabs ######### */ ul.TickList {padding:5px 0px 5px 15px;list-style-image: url("tick.gif")} .domContent {clear:both;padding:20px 25px 0px 25px;height: 100%;margin-bottom: 2px;background-repeat: repeat-x; background-position: top;border-top-width: 1px;border-top-style: solid;border-top-color: #687074;} div.domtab{padding:0;margin: 0px;background-image: url("tab_background1.gif");background-repeat: repeat-x;} ul.domtabs{float:left;list-style:none;margin: 0px;padding: 17px 0px 0px 10px;} ul.domtabs li{float:left;padding:0;} ul.domtabs a:link, ul.domtabs a:visited, ul.domtabs a:active{width:130px;padding:0px;display:block;background:url("tab_background_off1.gif") no-repeat;color:#999999; height:19px;font-weight:bold;text-decoration:none;font-family: Tahoma;font-size: 10px;text-align: center;} ul.domtabs a:hover{background:url("tab_background_on1.gif") no-repeat;} ul.domtabs li.active a:link, ul.domtabs li.active a:visited, ul.domtabs li.active a:active, ul.domtabs li.active a:hover{background:url("tab_background_on1.gif") no-repeat;color:#000000;} #domtabprintview{} #domtabprintview a:link, #domtabprintview a:visited, #domtabprintview a:active{font-family: Tahoma;font-size: 11px;font-weight: normal;text-decoration: none;} #domtabprintview a:hover{text-decoration: underline;} /*-------------------------------------------------- REQUIRED to hide the non-active tab content. But do not hide them in the print stylesheet! --------------------------------------------------*/ .tabberlive .tabbertabhide { display:none;} /*-------------------------------------------------- .tabber = before the tabber interface is set up .tabberlive = after the tabber interface is set up --------------------------------------------------*/ .tabber {} .tabberlive { margin-top:1em;} /*-------------------------------------------------- ul.tabbernav = the tab navigation list li.tabberactive = the active tab --------------------------------------------------*/ ul.tabbernav{ margin:0; padding: 3px 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif;} ul.tabbernav li{ list-style: none; margin: 0; display: inline;} ul.tabbernav li a{padding:3px 0.5em;margin-left:3px;border:1px solid #778;border-bottom:none;background:#ecd6ef;text-decoration: none;} ul.tabbernav li a:link { color: #448; } ul.tabbernav li a:visited { color: #667; } /*The colour below is the background colour when hovering over tab*/ ul.tabbernav li a:hover{color: #000;background: #ce93d7;border-color: #227;} ul.tabbernav li.tabberactive a{background-color: #fff;border-bottom: 1px solid #fff;} ul.tabbernav li.tabberactive a:hover{color: #000;background: white;border-bottom: 1px solid white;} /*-------------------------------------------------- .tabbertab = the tab content Add style only after the tabber interface is set up (.tabberlive) --------------------------------------------------*/ .tabberlive .tabbertab {padding:5px;border:1px solid #aaa;border-top:0;} /* If desired, hide the heading since a heading is provided by the tab */ .tabberlive .tabbertab h2 { display:none;} .tabberlive .tabbertab h3 { display:none;} /* Example of using an ID to set different styles for the tabs on the page */ .tabberlive#tab1 {} .tabberlive#tab2 {} .tabberlive#tab2 .tabbertab { height:200px; overflow:auto;} /* The hint to Hide and Show */ .hint { display: none; position: absolute; text-align: left; margin-top: 30px; border: 1px solid #c93; padding: 10px 12px; background: #ffc url(pointer.gif) no-repeat -20px -10px; } /* The pointer image is hadded by using another span */ .hint .hint-pointer { position: absolute; left: 20px; top: -10px; width: 19px; height: 10px; background: url(pointer.gif) left top no-repeat; }