/* TOMATO STALL CSS © Alex Ball 2008 */ /* Regular HTML stuffs */ body { font-size:1em; background:#868171; font-family: Arial, Helvetica, sans-serif; } img { border:none; } a { color:#a6b72b; text-decoration:underline; } a:hover { color:#bf2e1a; text-decoration:none; } /* One div to control them all.... */ #wrapper { width:953px; margin: 40px auto; background-position: top left; background-repeat: no-repeat; } body.bg1 #wrapper { background-image:url(/images/backgrounds/tomato-stall-background-1.jpg); } body.bg2 #wrapper { background-image:url(/images/backgrounds/tomato-stall-background-2.jpg); } body.bg3 #wrapper { background-image:url(/images/backgrounds/tomato-stall-background-3.jpg); } body.bg4 #wrapper { background-image:url(/images/backgrounds/tomato-stall-background-4.jpg); } body.bg5 #wrapper { background-image:url(/images/backgrounds/tomato-stall-background-5.jpg); } body.bg6 #wrapper { background-image:url(/images/backgrounds/tomato-stall-background-6.jpg); } body.bg7 #wrapper { background-image:url(/images/backgrounds/tomato-stall-background-7.jpg); } body.bg8 #wrapper { background-image:url(/images/backgrounds/tomato-stall-background-8.jpg); } body.bg9 #wrapper { background-image:url(/images/backgrounds/tomato-stall-background-9.jpg); } body.bg10 #wrapper { background-image:url(/images/backgrounds/tomato-stall-background-10.jpg); } /* The bar above the header */ #pre-header { width:953px; height:32px; } #pre-header span { display:none; } /* The header bar, and the menu on the right.. */ #fake_header { display:none; } #header { width:100%; background:white; overflow:hidden; } #header a { float:left; } #menu { width:450px; float:right; overflow:hidden; } #menu ul { font-size:0.7em; margin:18px 40px 0px 0px; list-style:none; overflow:hidden; } #menu ul.sub1 { margin-top:0px; } #menu ul.sub2 { margin-top:20px; clear:both; } #menu ul li { float:right; margin-left:5px; margin-bottom:5px; } #menu ul li a { height:18px; background-position:top left; text-indent:-1000px; overflow:hidden; } #menu ul li a:hover { background-position:bottom left; } #menu ul li a.active { background-position:bottom left; } #menu ul.sub2 li a:hover { color:#c1d72e; } #menu ul li .home { background-image:url(/images/menu/home.gif); width:72px; } #menu ul li .about { background-image:url(/images/menu/about.gif); width:82px; } #menu ul li .gallery { background-image:url(/images/menu/gallery.gif); width:108px; } #menu ul li .contact { background-image:url(/images/menu/contact.gif); width:109px; } #menu ul li .shop { background-image:url(/images/menu/shop.gif); width:64px; } #menu ul li .blog { background-image:url(/images/menu/blog.gif); width:64px; } #menu ul li .events { background-image:url(/images/menu/events.gif); width:94px; } #menu ul li .links { background-image:url(/images/menu/links.gif); width:73px; } #menu ul li .stockists { background-image:url(/images/menu/stockists.gif); width:128px; } #menu ul li .recipes { background-image:url(/images/menu/recipes.gif); width:102px; } /* Shop Bits */ #menu ul li .login, #menu ul li .account, #menu ul li .view-basket, #menu ul li .checkout { text-transform:uppercase; color:#bfbbae; display:inline; width:auto; height:auto; text-indent:0px; font-weight:bold; text-decoration:none; padding-left:10px; } /*The big below the Header and Menu*/ #submenu { height:215px; } /* Not quite the footer.. */ #subfooter { background:white url(/images/sub-nav-bg.jpg) top left no-repeat; height:30px; padding-top:20px; } #subfooter ul { font-size:0.7em; list-style:none; overflow:hidden; width:620px; margin:0 auto; } #subfooter ul li { float:left; margin-left:5px; margin-bottom:5px; text-transform:uppercase; background:url(/images/menu/sub-menu-spacer.gif) top right no-repeat; padding:0px 9px 0px 5px; } #subfooter ul li.last { background:none; } #subfooter ul li a { color:#ceccc1; text-decoration:none; } #subfooter ul li a:hover { color:#a6b829; } #subfooter ul li a.active { color:#a6b829; } /* Footer */ #footer { background:#5e584b url(/images/footer-bg.jpg) top left no-repeat; padding:20px; width:913px; overflow:hidden; } #footer p { font-size:0.65em; color:white; margin:0px; } #footer a { color:#bbb7aa; text-decoration:none; } #footer a:hover { color:#c1d72e; text-decoration:underline; } #footer .left { height:64px; float:left; margin-right:20px; } #footer .left-text { height:26px; padding-top:38px; float:left; margin-right:20px; } #footer .right { height:64px; float:right; margin-left:20px; } #footer .right-text { height:26px; float:right; padding-top:38px; margin-left:20px; } /* The main content */ #main { background:white; width:873px; padding:40px; overflow:hidden; } #main h1 { font-size:2.2em; color:#c1d72e; font-family:georgia, serif; text-transform:uppercase; margin:0px 0px 10px 0px; padding:0px; } #main h2 { margin:0px 0px 4px 0px; padding:0px; font-size:0.9em; color:#616264; } #main h1 a, #main h2 a, #main h3 a { color:#616264; text-decoration:none; } #main h3 { margin:0px 0px 5px 0px; padding:0px; font-size:0.7em; color:#a4b727; text-transform:uppercase; } #main h4 { margin:0px 0px 5px 0px; padding:0px; font-size:1.2em; color:#a4b727; text-transform:uppercase; } #main p { font-size:0.75em; color:#616363; margin:0px 0px 10px 0px; padding:0px; line-height:1.4; } #main .large-left { float:left; margin-right:30px; } #main .large-right { float:right; margin-left:30px; } #main .large-right-col { float:right; margin-left:30px; padding-bottom:29px; background:url(/images/col_right_top_bg.gif) bottom right no-repeat ; width:271px; } #main .large-right-col-shop { float:right; margin-left:30px; background:url(/images/col_right_top_bg_full.gif) top right no-repeat ; width:271px; } #main .from-the-blog { position:relative; width:241px; height:240px; float:right; margin-left:30px; overflow:hidden; background:url(/images/latest-from-blog.jpg) top left no-repeat; padding:67px 15px 0px 15px; } #main .from-the-blog h2 { margin:0px 0px 4px 0px; padding:0px; font-size:0.9em; color:#616264; } #main .from-the-blog h3 { margin:0px 0px 18px 0px; padding:0px; font-size:0.7em; color:#a4b727; text-transform:uppercase; } #main .from-the-blog p { color:#606463; } #main .from-the-blog .read-the-article { position:absolute; bottom:0px; right:0px; padding:0px 19px 8px 0px; } #main .from-the-blog .read-the-article a { color:#a6b72b; padding-top:4px; display:block; font-size:0.85em; padding-right:30px; background:url(/images/read-the-article.jpg) top right no-repeat; height:19px; text-decoration:none; } #main .from-the-blog .read-the-article a:hover { background-position:bottom right; color:#bf2e1a; } #main .fullcolumn { float:right; margin-left:30px; position:relative; height:100%; } #main .fullcolumn .footer { position:absolute; bottom:0px; right:0px; width:100%;border:1px solid black; } #main .col-right { background:url(/images/col_right_bg.gif) bottom right no-repeat; } #main .back-link { float:right; text-decoration:none; font-size:0.9em; font-weight:bold; text-transform:uppercase; } #main .hr { background-position:top center; height:25px; background-repeat:no-repeat; background-image:url(/images/page-seperator.jpg); } #main .hr-small { background-position:top center; height:25px; background-repeat:no-repeat; background-image:url(/images/page-seperator-75.jpg); } #main .hr-green { border-top: 1px solid #c0d72f; margin-bottom:5px; } #main hr { display:none; } #main .pagination { float:right; width:450px; text-align:right; margin-bottom:10px; } #main .pagination p { text-transform:uppercase; font-size:0.7em; color:#a4b727; font-weight:bold; margin-bottom:0px; } #main .pagination a { text-decoration:none; color:#dbd8c9; margin-right:1px; margin-left:1px; } #main .pagination a.current { color:#a6b72b; text-decoration:underline; } #main .pagination .pages { padding-top:4px; display:block; clear:both; text-align:right;} #main .pagination .shop-bits { margin-left:5px; display:block; clear:both; } #main .pagination { float:right; width:50%; } #main .pagination a { text-decoration:none; color:#dbd8c9; margin-right:1px; margin-left:1px; } #main .pagination a.current { color:#a6b72b; text-decoration:underline; } #main .gallery { width:100%; } #main .gallery td { padding:0px; margin:0px; text-align:center; height:215px; } #main .gallery td.spacer { background:url(/images/page-seperator.jpg) top center no-repeat; height:25px; } #main .gallery td img { border:2px solid white; } #main .gallery td a { } #main .gallery td a:hover img { border:2px solid #c1d72d; } #main .content { overflow:hidden; } #main .blogs { margin-left:5px; width:885px; } #main .blog-entry { float:left; margin-right:24px; margin-bottom:30px; width:271px; height:250px; } #main .blog-entry img { margin-bottom:10px; } #main .blog-entry a { float:left; width:271px; border-bottom:1px solid #c1d72d; padding-bottom:5px; text-decoration:none; } #main .blog-entry a .heading-2 { padding:0px; font-size:0.9em; color:#616264; font-weight:bold; } #main .blog-entry a .heading-3 { padding:0px; font-size:0.7em; color:#a4b727; text-transform:uppercase; font-weight:bold; } #main .blog-entry a:hover { border-bottom:1px solid #bf2e1a; } #main .blog-entry a:hover .heading-2 { color:#bf2e1a; } #main .blog-entry a:hover .heading-3 { color:#616264; } #main .blog-image { margin-bottom:20px; } #main .shop-items { margin-left:25px; width:885px; } #main .shop-item { float:left; margin-right:24px; margin-bottom:30px; width:271px; border-bottom:1px solid #c1d72d; padding-bottom:5px; overflow:hidden; height:310px; position:relative; } #main .shop-item img { margin-bottom:10px; } #main .shop-item a { float:left; width:271px; text-decoration:none; } #main .shop-item a .heading-2 { display:block; width:230px; padding:0px; font-size:0.9em; color:#a4b727; font-weight:bold; float:left; } #main .shop-item a .price { display:block; width:35px; padding:0px; font-size:0.9em; color:#a4b727; font-weight:bold; float:right; } #main .shop-item a .desc { display:block; width:271px; padding:0px; font-size:0.7em; color:#616264; text-transform:none; font-weight:normal; clear:both; } #main .shop-item a:hover { } #main .shop-item a:hover .heading-2 { color:#616264; } #main .shop-item a:hover .price { color:#616264; } /*#main .shop-item a:hover .desc { color:#bf2e1a; }*/ #main .shop-image { margin-bottom:20px; } #main .shop-item .form_wrap { position:absolute; bottom:5px; right:5px; width:200px; overflow:hidden; height:32px; } #main .shop-item form { float:right margin:0px; padding:0px; width:200px; padding-top:8px; padding-bottom:5px; } #main .shop-item form.mini { float:none; } #main .shop-item form label { float:right; width:50px; color:#616363; display:block; margin-top:4px; font-size:0.7em; font-weight:normal; } #main .shop-item form input { float:right; width:22px; height:16px; display:block; padding-top:2px; font-size:0.8em; text-align:center; font-weight:normal; color:#616363; } #main .shop-item form button { float:right; width:95px; display:block; margin-top:4px; font-size:0.7em; border:0px; background-color:white; color:#a4b727; cursor:pointer; } #main .shop-item form button:hover { color:#bf2e1a; } #main .shop-item-bar { margin-top:5px; margin-bottom:15px; width:100%; height:32px; overflow:hidden; background-color:#f6f4ec; } #main .shop-item-bar h4 { float:right; margin-top:5px; margin-bottom:0px; margin-right:10px; } #main .shop-item-form { margin:0px; padding:0px; margin-top:5px; margin-left:10px; } #main .shop-item-form label { float:left; width:55px; display:block; margin-top:4px; font-size:0.7em; font-weight:normal; color:#616363; } #main .shop-item-form input { float:left; width:22px; height:16px; display:block; padding-top:2px; font-size:0.8em; text-align:center; font-weight:normal; color:#616363; } #main .shop-item-form button { float:left; margin-left:5px; width:110px; display:block; margin-top:4px; font-size:0.7em; border:0px; background-color:#f6f4ec; color:#a4b727; cursor:pointer; font-weight:normal; text-align:left;} #main .map { background:url(/images/gmap.jpg) top left no-repeat; height:345px; width:572px; float:right; margin-left:20px; } #main .green { color:#a4b727; } sup { font-size:0.6em; color:#CCCCCC; } form.basket table { width: 100%; margin-bottom: 10px;font-size:0.8em; } form.basket table.text { font-size: 0.75em; line-height: 1.5em; } form.basket table th { font-size: 1.1em; color: #a4b727; text-align: left; padding: 18px 6px 6px; font-weight: normal; } form.basket table th sup { font-size: 0.65em; text-transform: uppercase; } form.basket table.text th { font-size: 1.4em; } form.basket table td { padding: 6px; border-bottom: 1px solid #e0dfdd; background: #f8f7f3; color: #878782; } form.basket table td span.price { display: block; font-size: 1.6em; letter-spacing: -1px; margin-top: 9px; color: #bf2e1a; } form.basket table td span.price sup { font-size: 0.7em; letter-spacing: normal; } form.basket table td span.desc { font-size: 0.85em; display: block; margin-top: 7px; } form.basket table td strong { text-transform: uppercase; } form.basket table.text td strong { color: #bf2e1a; } form.basket table td input.text { display: block; width: 30px; margin-top: 6px; padding: 2px; font-size: 0.95em; } form.basket table td input.checkbox { display: block; margin-top: 8px; } form.basket table td a { font-size: 1.4em; color: #bf2e1a; } form.basket table td strong.bold { display: block; font-size: 1.1em; margin-top: 8px; } form { width:100%; } form legend { display:none; } form fieldset { border:1px dashed #EFEFEF; padding:0px; margin-bottom:5px; } form ul { width:100%; overflow:hidden; padding:0px; margin:10px; } form ul li { width:100%; margin-bottom:5px; overflow:hidden; } form ul li.header { font-weight:bold; margin-top:10px; } form ul li.first { margin-top:0px; } form label { width:200px; float:left; display:block; } form select { width:400px; } form textarea { width:400px; } form input.text { width:400px; } form input.width2 { width:150px; } form .buttons { margin:10px; } .tright { text-align:right; }