/********************************************************************************************** Title: Website Author: XHTMLized Date: December 2007 *********************************************************************************************** 1. GENERAL 1.1 Headings and paragraphs 1.2 Forms 1.3 Links 1.4 Miscellaneous 2. GENERAL ELEMEMENTS 3. LAYOUT 3.1 Header 3.2 Content 3.3 Sidebar 3.4 Footer ***********************************************************************************************/ /* 1. GENERAL ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* Global reset */ 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, em, font, img, ins, kbd,q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } body /* default red */{line-height: 1; background: #333333;color: #ffffff;font-family: Helvetica, Arial, Helvetica, sans-serif; font-size: 62.5%; /* 1em = 10px \ 1.1em = 11px \ 1.2em = 12px */ text-align: center; /* Centers the layout */ } /* green */ body.green div.header-wrap { background: #6b8e23 url(../images/bg.gif) repeat-x top left;} body.green #header {background: url(../images/green.gif) no-repeat top left;} /* blue */ body.blue div.header-wrap { background: #539bbc url(../images/bg.gif) repeat-x top left;} body.blue #header {background: url(../images/blue.gif) no-repeat top left;} /* beige */ body.beige div.header-wrap { background: #d8d8be url(../images/bg.gif) repeat-x top left;} body.beige #header {background: url(../images/beige.gif) no-repeat top left;} /* misc */ ol, ul {list-style: none; } table {border-collapse: separate; border-spacing: 0; /* tables still need 'cellspacing="0"' in the markup */ } caption, th, td { text-align: left; font-weight: normal;} /* 1.1 Headings and paragraphs -----------------------------------------------------------------------------------------------*/ h2 {font-size: 1.9em;padding-bottom: 19px;} h2 span {color: #6b8e23;background: inherit;} p {font-size: 1.2em; line-height: 210%;padding-bottom: 18px;} /* 1.2 Forms -----------------------------------------------------------------------------------------------*/ input, textarea, select { font: 1.2em Helvetica, Arial, Helvetica, sans-serif;} /* 1.3 Links -----------------------------------------------------------------------------------------------*/ a:link, a:visited, a:active {color: #333333; background: inherit; text-decoration: none;} a:hover {text-decoration: underline;} /* 1.4 Miscellaneous -----------------------------------------------------------------------------------------------*/ hr { display: none;} strong {font-weight: bold; } em {font-style: italic; } abbr, acronym {border-bottom: 1px dotted #999999;cursor: help;} /* 2. GENERAL ELEMENTS ----------------------------------------------------------------------------------------------- ===============================================================================================*/ .hide {position: absolute;left: -9999px;} .clear { clear: both; font-size: 0; height: 0; line-height: 0; position: relative; } .right {text-align: right;} .indent {padding-left: 25px;} .indent2 {padding-left: 18px; } /* 3. LAYOUT ----------------------------------------------------------------------------------------------- ===============================================================================================*/ div.container {width: 890px; position: relative;margin: 0 auto;background: transparent;text-align: left;color: #333333;} /* Two columns layout */ #header {width: 870px; overflow: hidden; padding-left: 20px; padding-top: 20px; height: 128px; position: relative; margin: 0 auto; text-align: left; color: #333333; background: url(../images/red.gif) no-repeat top left;} #content { float: left; width: 650px; margin-left: 10px; position: relative; overflow: hidden; } #sidebar { width: 220px;float: right; color: #ffffff; background: #333333;position: relative; } #footer {clear: left; float: left;margin-left: 10px; width: 650px; background: white;} .left200 {width: 200px; float: left; text-align: center;} .right200 {width: 200px; float: right; text-align: center;} .right400 {width: 395px; float: right;} .left300 {width: 280px; text-align: left; font-size: 13px; float: left; margin-right: 20px;} /* 3.1 Header -----------------------------------------------------------------------------------------------*/ div.header-wrap { background: #b51c1c url(../images/bg.gif) repeat-x top left;} /* Navigation */ div.nav {float: left; width: 630px;} div.nav ul li {float: left; } div.nav ul li a {display: block;width: 150px;height: 87px;text-indent: -9999px;margin-left: 10px;margin-bottom: 17px;overflow: hidden; background: url(../images/nav.gif) no-repeat top left;} div.nav ul li a.hom {background-position: 0 0; margin-left: 0;} div.nav ul li a.hom:hover { background-position: 0 -87px;} div.nav ul li a.sho {background-position: -150px 0;} div.nav ul li a.sho:hover {background-position: -150px -87px;} div.nav ul li a.abo {background-position: -300px 0;} div.nav ul li a.abo:hover {background-position: -300px -87px;} div.nav ul li a.con {margin-right: 0;background-position: -450px 0;} div.nav ul li a.con:hover {background-position: -450px -87px;} /* tabbed navigation */ #tab_list { width: 629px; height: 52px; overflow: hidden; background: url(../images/tabs.gif) 0 0 no-repeat; margin: 0 auto; margin-left: -10px; padding: 0; position: relative; text-indent: -99999px;} #tab_list li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} #tab_list li, #tab_list a { height: 52px; display: block;} #bakeware {left: 0; width: 69px;} #barware {left: 73px; width: 61px;} #food_preparation {left: 138px; width: 77px;} #kitchen_accessories {left: 219px; width: 82px;} #knives {left: 305px; width: 52px;} #pots_and_pans {left: 361px; width: 53px;} #tableware {left: 418px; width: 71px;} #tea_and_coffee {left: 493px; width: 52px;} #kitchen_appliances {left: 550px; width: 79px;} #tab_list li#bakeware a:hover, #tab_list li#bakeware a.tab_active {background: transparent url(../images/tabs.gif) 0 -52px no-repeat;} #tab_list li#barware a:hover, #tab_list li#barware a.tab_active {background: transparent url(../images/tabs.gif) -73px -52px no-repeat;} #tab_list li#food_preparation a:hover, #tab_list li#food_preparation a.tab_active {background: transparent url(../images/tabs.gif) -138px -52px no-repeat;} #tab_list li#kitchen_accessories a:hover, #tab_list li#kitchen_accessories a.tab_active {background: transparent url(../images/tabs.gif) -219px -52px no-repeat;} #tab_list li#knives a:hover, #tab_list li#knives a.tab_active {background: transparent url(../images/tabs.gif) -305px -52px no-repeat;} #tab_list li#pots_and_pans a:hover, #tab_list li#pots_and_pans a.tab_active {background: transparent url(../images/tabs.gif) -361px -52px no-repeat;} #tab_list li#tableware a:hover, #tab_list li#tableware a.tab_active {background: transparent url(../images/tabs.gif) -418px -52px no-repeat;} #tab_list li#tea_and_coffee a:hover, #tab_list li#tea_and_coffee a.tab_active {background: transparent url(../images/tabs.gif) -493px -52px no-repeat;} #tab_list li#kitchen_appliances a:hover, #tab_list li#kitchen_appliances a.tab_active {background: transparent url(../images/tabs.gif) -550px -52px no-repeat;} /* Logo -> Image replacement. */ div.logo {float: right; width: 220px;position: relative;} div.logo h1, div.logo h1 a, div.logo h1 a span { display: block; width: 174px;height: 87px;overflow: hidden;} div.logo h1 {position: absolute; top: 0;left: 21px;} div.logo h1 a { background: transparent;font-weight: bold;color: #333333;} div.logo h1 a span {position: absolute; cursor: pointer; top: 0;left: 0;z-index: 10;background: url(../images/logo.gif) no-repeat;} /* View Cart - Checkout Bar */ div.bars {height: 20px;clear: left;} div.leftbar {float: left;width: 630px; height: 20px; overflow: hidden;} div.leftbar ul li {float: right;font-size: 1.2em;padding: 3px 0 6px; margin: 0 6px 0 2px;} div.leftbar ul li a, div.leftbar ul li a:link, div.leftbar ul li a:visited, div.leftbar ul li a:active, div.rightbar ul li a, div.rightbar ul li a:link, div.rightbar ul li a:visited, div.rightbar ul li a:active { color: white; background: transparent; font-weight: bold;text-decoration: underline; } div.leftbar ul li a:hover, div.rightbar ul li a:hover { text-decoration: none; } div.rightbar { float: left;color: white;background: transparent; font-size: 1.1em;margin-top: -4px;font-weight: bold;padding-left: 28px;margin-left: 10px; } /* 3.2 Content -----------------------------------------------------------------------------------------------*/ #content a, #content a:link, #content a:visited, #content a:active { color: #6b8e23; background: inherit;} #content div.text { background: white; padding: 0px 20px 11px 20px;margin: 0;} #content div.colwrap {clear: left; padding-top: 20px;} #content div.col1 { float: left;margin-right: 10px; width: 220px;} #content div.col2 {float: right;width: 376px;} /* featured products */ ul.featured-products li {float: left; text-align: center; padding-top: 30px; margin-left: 20px;width: 128px;padding-bottom: 23px; height: 195px; overflow: hidden; } ul.shorter_list li {float: left; text-align: center; padding-top: 10px; margin-left: 20px;width: 128px;padding-bottom: 13px; height: 115px; overflow: hidden; } ul.featured-products li.home {width: 183px; height: 233px;} ul.featured-products li .img_holder { background: url(../images/shadow.gif) no-repeat bottom center;padding: 0 1px 7px;margin-bottom: 5px; width: 181px; height: 150px;} ul.featured-products li h2 {font-size: 1.3em;padding-bottom: 10px;} div.constrained {height: 95px; overflow: hidden;} ul.featured-products li a, ul.featured-products li a:link, ul.featured-products li a:visited, ul.featured-products li a:active { color: #333333 !important; background: inherit; } ul.featured-products li h3, div.product_list h3 {font-weight: bold;font-size: 1.4em;} ul.featured-products li p {font-size: 1.1em; line-height: 150%;padding-bottom: 0;} div.product_list p {font-size: 13px; line-height: 20px; padding: 8px 0;} div.product_list {width: 600px;} div.product_list .left200 { background: url(../images/shadow.gif) no-repeat bottom center;padding: 0 1px 10px;margin-bottom: 25px;} #content .text a.number_active:link, #content .text a.number_active:visited, #content .text a.number_active:hover, #content .text a.number_active:active {color: #fff; padding: 0 3px; background-color: #6b8e23;} div.faqs {margin: 15px 0 0 30px; border-top: 1px solid #333;} div.faqs p {font-size: 12px;} ul.body_list {margin-left: 30px;} ul.body_list li {margin: 10px 0; font-size: 12px;} /* product detail */ div.prod_detail div.img_holder {text-align: center; background: url(../images/shadow.gif) no-repeat bottom center;padding: 0 1px 7px;margin-bottom: 5px; width: 181px; height: 150px;} div.caption {text-align: center; width: 183px; padding: 20px 0; float: left;} div.product_desc {float: right; width: 380px; margin-right: 20px;} div.additional_images {clear: both; margin-top: 10px; text-align: left;} div.product_desc li, div.additional_images li {font-size: 1.2em; line-height: 110%; padding-bottom: 8px; list-style-type: disc; margin-left: 20px;} sup {vertical-align: super;} /* 3.3 Sidebar -----------------------------------------------------------------------------------------------*/ #sidebar div.text { padding: 11px 0 11px 18px; margin: 0;} /* sidebar -> browse */ div.browse { border: 3px solid #6b8e23; background: #d8d8be;padding: 10px;color: #333333; margin-bottom: 20px;} div.browse h3, div.browse label {font-size: 1.3em;font-weight: bold;padding-bottom: 15px;display: block;} div.browse ul li {font-size: 1.3em;padding-left: 10px;padding-bottom: 15px; font-weight: bold;} div.browse ul li a.cat_active {text-decoration: underline;} div.browse input, div.browse select {float: left; border: 1px solid #000000; color: #000000;font-weight: bold;padding: 3px 5px 3px;width: 115px;margin-right: 5px;} div.browse form fieldset { margin-bottom: 15px;} div.browse select {padding: 2px 2px 2px 5px;width: 126px;} div.browse input.go {background: #6b8e23; padding: 2px 5px;width: auto; color: #ffffff; cursor: pointer;font-weight: bold; } #sidebar blockquote {background: url(../images/quotes.gif) no-repeat top left;} #sidebar blockquote p.quote {padding-top: 17px;text-align: right;padding-bottom: 0; font-size: 1.8em;line-height: 160%;} #sidebar blockquote p.cite { text-align: right;font-size: 1.3em;} /* 3.4 Footer -----------------------------------------------------------------------------------------------*/ #footer div.text { background: white;padding: 60px 20px 0; color: #999999; text-align: center;} #footer ul { font-size: 1.2em;} #footer ul li {display: inline;padding: 0 5px;line-height: 150%;} #footer ul li a, #footer ul li a:link, #footer ul li a:visited, #footer ul li a:active { color: #999999; text-decoration: underline } #footer ul li a:hover {text-decoration: none;} #footer p {color: #cccccc; clear: left; font-size: 1.1em; padding-top: 8px;} #footer p a, #footer p a:link, #footer p a:visited, #footer p a:active { color: #cccccc; } /* SHOPPING CART */ .right_cart_49 {width: 40%; float: right;} .left_cart_49 {width: 58%; float: left;} td {font-size: 12px; line-height: 21px;} button {cursor: pointer; background: none; border: none;} .sale_price {color: #ff0000;} #uk_options, #irish_options, #eur_options, #row_options {display: none; padding-top: 10px;} #uk_options select, #eur_options select, #row_options select, #irish_options select {width: 300px;} /* ----------- stylized ----------- */ .myform{margin: 3px 10px; width:200px; padding:10px;} #stylized{border:solid 2px #b7ddf2; background:#ebf4fb;} #stylized h1 {font-size:13px;font-weight:bold; margin-bottom:8px;} #stylized label{font-size: 13px; display:block; font-weight:bold; width:180px; float:left;} #stylized .small{color:#666666;display:block;font-size:11px;font-weight:normal;text-align:left; width:180px;} #stylized input, #stylized select, #stylized textarea {float:left;font-size:1.1em;padding:2px;border:solid 1px #aacfe4;width:170px;margin:3px 0 12px 10px;} #stylized textarea {height: 130px; width: 240px;} #stylized select {margin-left: 10px;} #stylized select.short_sel {display: inline; width: 80px;} .form_right200, .form_left200 {float: left; text-align: left; width: 250px;} .form_right200 {float: right;} .form_left400 {float: left; text-align: left; width: 420px;} #stylized input.check {border: none;} a.button_link {background: #bbd147!important; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border-radius: 10px; padding: 10px 15px; cursor: pointer; color: #ffffff!important;} a.button_link:hover {color: #ffffff;} a.button_link:hover {background: #6E7433;} #gotoPayPal {margin-left: 40px;} .promoH2 {text-decoration: underline;} .promoH2:hover {cursor: pointer; text-decoration: none;} #gv_form, #pc_form {display: none;} #gv_form input, #pc_form input {font-size: 20px; padding: 6px; height: 20px; font-weight: bold; width: 300px; margin: 10px 0;} #pc_form label, #gv_form label {font-size: 14px;}