/* Global */



* { margin: 0; padding: 0; }

body { font-size: 62.5%; }

h1, h2, h3, h4, h5, h6, p, ul, li, ol { margin: 0; padding: 0; }

.clear { clear: both; }

.italic { font-style: italic; }



.img-right { float: right; width: auto; }

.img-left { float: left; width: auto; }



/* Fonts & Colours*/



body { background-color: #733824; color: #fff; font-family: Arial, Helvetica, sans-serif; }



/* Layout */



#container { width: 730px; margin: 10px auto; padding: 0; font-size: 1.3em; }

#header { width: 100%; height: 145px; background: transparent url(../images/header.gif) no-repeat center top; }

#header h1, #header h2 { display: none; }



#navigation { width: 700px; height: 35px; margin: 0 auto; padding-top: 4px; background: #461f10 url(../images/nav/nav-background.gif) bottom repeat-x; color: #fff;  z-index: 99; }

#navigation ul { list-style: none; padding-left: 15px; margin: 0; }

#navigation ul li { float: left; margin-right: 10px; text-indent: -9000px; display: block; }



li a.home { background-image: url(/images/nav/home_off.gif); width: 42px; height: 18px; display: block; }

li a.home:hover { background-image: url(/images/nav/home_on.gif); width: 42px; height: 18px; display: block; }

li a.about { background-image: url(/images/nav/about_off.gif); width: 47px; height: 18px; display: block; }

li a.about:hover { background-image: url(/images/nav/about_on.gif); width: 47px; height: 18px; display: block; }

li a.our-products { background-image: url(/images/nav/our-products_off.gif); width: 89px; height: 18px; display: block; }

li a.our-products:hover { background-image: url(/images/nav/our-products_on.gif); width: 89px; height: 18px; display: block; }

li a.gallery { background-image: url(/images/nav/gallery_off.gif); width: 53px; height: 18px; display: block; }

li a.gallery:hover { background-image: url(/images/nav/gallery_on.gif); width: 53px; height: 18px; display: block; }

li a.locate-a-supplier { background-image: url(/images/nav/locate-a-supplier_off.gif); width: 110px; height: 18px; display: block; }

li a.locate-a-supplier:hover { background-image: url(/images/nav/locate-a-supplier_on.gif); width: 110px; height: 18px; display: block; }

li a.supplier-registration { background-image: url(/images/nav/supplier-registration_off.gif); width: 133px; height: 18px; display: block; }

li a.supplier-registration:hover { background-image: url(/images/nav/supplier-registration_on.gif); width: 133px; height: 18px; display: block; }

li a.contact { background-image: url(/images/nav/contact-us_off.gif); width: 77px; height: 18px; display: block; }

li a.contact:hover { background-image: url(/images/nav/contact-us_on.gif); width: 77px; height: 18px; display: block; }



li#current a { padding-bottom: 5px; background-repeat: no-repeat; cursor: default; }

li.show-image { background: url(../images/nav/current-image.gif) bottom center no-repeat; height: 35px; display: block }

li#current a.home { background-image: url(/images/nav/home_on.gif); width: 42px; height: 18px; display: block; }

li#current a.about { background-image: url(/images/nav/about_on.gif); width: 47px; height: 18px; display: block; }

li#current a.our-products { background-image: url(/images/nav/our-products_on.gif); width: 89px; height: 18px; display: block; }

li#current a.gallery { background-image: url(/images/nav/gallery_on.gif); width: 53px; height: 18px; display: block; }

li#current a.locate-a-supplier { background-image: url(/images/nav/locate-a-supplier_on.gif); width: 110px; height: 18px; display: block; }

li#current a.supplier-registration { background-image: url(/images/nav/supplier-registration_on.gif); width: 133px; height: 18px; display: block; }

li#current a.contact { background-image: url(/images/nav/contact-us_on.gif); width: 77px; height: 18px; display: block; }



#content { width: 700px; margin: 0 auto; padding: 10px 0 25px 0; clear: both; background: #b2725d url(../images/content_bottom.gif) bottom center no-repeat; color: #000; }

#content-text { width: 678px; margin: 0 auto; text-align: justify; font-weight: normal; }

#content-text p { margin-bottom: 8px; }

#content-text strong { font-weight: bold; }

#content-text a.content-links { color: #f2d8d0; background-color: transparent; padding-bottom: 3px; text-decoration: none; }

#content-text a.content-links:hover { color: #522517; background-color: transparent; }





#content h3 { text-indent: -9000px; margin-left: 10px; margin-bottom: 5px; }

#content-text h3 { text-indent: -9000px; margin-left: 0px; margin-bottom: 5px; }

h3.heading-home { background: url(../images/headings/home.gif) left center no-repeat; width: auto; height: 38px; }

h3.heading-about { background: url(../images/headings/about.gif) left center no-repeat; width: auto; height: 38px; }

h3.heading-our-products { background: url(../images/headings/our-products.gif) left center no-repeat; width: auto; height: 38px; }

h3.heading-gallery { background: url(../images/headings/gallery.gif) left center no-repeat; width: auto; height: 38px; }

h3.heading-locate-a-supplier { background: url(../images/headings/locate-a-supplier.gif) left center no-repeat; width: auto; height: 38px; }

h3.heading-supplier-registration { background: url(../images/headings/supplier-registration.gif) left center no-repeat; width: auto; height: 38px; }

h3.heading-contact-us { background: url(../images/headings/contact-us.gif) left center no-repeat; width: auto; height: 38px; }

h3.heading-copyright { background: url(../images/headings/copyright.gif) left center no-repeat; width: auto; height: 48px; }

h3.heading-our-artists { background: url(../images/headings/our-artists.gif) left center no-repeat; width: auto; height: 48px; }

h3.heading-supplier-search { background: url(../images/headings/supplier-search.gif) left center no-repeat; width: auto; height: 48px; }

h3.heading-product-search { background: url(../images/headings/product-search.gif) left center no-repeat; width: auto; height: 48px; }

h3.heading-work-in-progress { background: url(../images/headings/work-in-progress.gif) left center no-repeat; width: auto; height: 48px; }



#content h4 { text-indent: -9000px; margin-left: 0px; margin-bottom: 5px; clear: both; }

h4.sub-heading-western-cape { background-image: url(../images/headings/sub-western-cape.gif); width: auto; height: 20px; background-repeat: no-repeat; }

h4.sub-heading-gauteng { background-image: url(../images/headings/sub-gauteng.gif); width: auto; height: 20px; background-repeat: no-repeat; }

h4.sub-heading-north-west { background-image: url(../images/headings/sub-north-west.gif); width: auto; height: 20px; background-repeat: no-repeat; }

h4.sub-heading-northern-cape { background-image: url(../images/headings/sub-northern-cape.gif); width: auto; height: 20px; background-repeat: no-repeat; }

h4.sub-heading-eastern-cape { background-image: url(../images/headings/sub-eastern-cape.gif); width: auto; height: 20px; background-repeat: no-repeat; }

h4.sub-heading-kwazulu-natal { background-image: url(../images/headings/sub-kwazulu-natal.gif); width: auto; height: 20px; background-repeat: no-repeat; }

h4.sub-heading-limpopo { background-image: url(../images/headings/sub-limpopo.gif); width: auto; height: 20px; background-repeat: no-repeat; }

h4.sub-heading-mpumalanga { background-image: url(../images/headings/sub-mpumalanga.gif); width: auto; height: 20px; background-repeat: no-repeat; }

h4.sub-heading-free-state { background-image: url(../images/headings/sub-free-state.gif); width: auto; height: 20px; background-repeat: no-repeat; }



.content-left { float: left; width: 460px; padding-right: 10px; border-right: 1px solid #a16652; }

.content-right { float: left; width: 190px; text-align: right; }

.content-right h3 { font-size: 1.1em; line-height: 1.2em;  margin-bottom: 10px; }



#contact-form { width: 450px; margin-top: 20px; }

.form-label { float: left; width: 160px; font-weight: bold; text-align: right; padding: 4px 10px 0 0; display: block; font-size: 0.9em; }

.form-input { float: left; width: 236px; padding: 2px; color: #461f10; background-color: #dab3a5; border: 1px solid #fff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.1em; }

.form-input-highlight-error { float: left; width: 236px; padding: 2px; color: #461f10; background-color: #e79b80; border: 1px solid #bc5733; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.1em; }

.form-spacer { display: block; clear: both; height: 10px; }

.error-container { background-color: #bc5733; color: #fff; font-weight: bold; width: 100%; margin: 5px 0; padding: 5px; }

.error-image { float: left; width: 16px; display: block; padding-top: 1px; }

.captcha-image { border: 1px solid #bc5733; margin-bottom: 6px; }

.captchainfo { font-weight: normal; font-size: 0.9em; }

#captcha-input { width: 100px; display: block; } 

.contact-details-container { margin-bottom: 4px; }

.contact-details-text { position: relative; width: 190px; display: block; text-align: right; margin-bottom: 3px; font-size: 0.8em; }

.contact-details-text-heading { text-align: right; margin-bottom: 3px; font-size: 0.8em; text-transform: capitalize; font-weight: bold; }

.contact-image { position: absolute; right: 0; }



#category-links { list-style: none; margin: 0; font-family: Geneva, Arial, Helvetica, sans-serif; }

#category-links li { float: left; display: block; text-align: center; position: relative; margin: 0 5px 0 0; }

.category-top-left-corner { background: url(../images/cat-top-left.gif) no-repeat top left; width: 5px; height: 5px; position: absolute; top: 0; left: 0; }

.category-top-right-corner { background: url(../images/cat-top-right.gif) no-repeat top right; width: 5px; height: 5px; position: absolute; top: 0; right: 0; } 

.category-bottom-left-corner { background: url(../images/cat-bottom-left.gif) no-repeat bottom left; width: 5px; height: 5px; position: absolute; bottom: 0; left: 0; }

.category-bottom-right-corner { background: url(../images/cat-bottom-right.gif) no-repeat bottom right; width: 5px; height: 5px; position: absolute; bottom: 0; right: 0; }

#category-links li a span { display: block; text-align: center; }

#category-links li a img { border: none; }

#category-links li a { text-decoration: none; display: block; float: left; padding: 5px 15px; background-color: #c17f6a; color: #000; margin: 0; }

#category-links li a:hover { background-color: #8e5542; color: #fff; } 

#category-links li a:hover .category-top-left-corner { background: url(../images/cat-top-left-hov.gif) no-repeat top left; width: 5px; height: 5px; position: absolute; top: 0; left: 0; }

#category-links li a:hover .category-top-right-corner { background: url(../images/cat-top-right-hov.gif) no-repeat top right; width: 5px; height: 5px; position: absolute; top: 0; right: 0; } 

#category-links li a:hover .category-bottom-left-corner { padding: 0; background: url(../images/cat-bottom-left-hov.gif) no-repeat bottom left; width: 5px; height: 5px; position: absolute; bottom: 0; left: 0; }

#category-links li a:hover .category-bottom-right-corner { padding: 0; background: url(../images/cat-bottom-right-hov.gif) no-repeat bottom right; width: 5px; height: 5px; position: absolute; bottom: 0; right: 0; }



#breadcrumb-container { width: auto; height: 18px; color: #fff; background-color: #a66a57; margin: 10px 0 15px 0px; font-size: 0.9em; position: relative; }

#breadcrumb-top-left-corner { background: url(../images/breadcrumb-top-left.gif) no-repeat top left; width: 4px; height: 4px; position: absolute; top: 0; left: 0; }

#breadcrumb-top-right-corner { background: url(../images/breadcrumb-top-right.gif) no-repeat top right; width: 4px; height: 4px; position: absolute; top: 0; right: 0; } 

#breadcrumb-bottom-left-corner { background: url(../images/breadcrumb-bottom-left.gif) no-repeat bottom left; width: 4px; height: 4px; position: absolute; bottom: 0; left: 0; }

#breadcrumb-bottom-right-corner { background: url(../images/breadcrumb-bottom-right.gif) no-repeat bottom right; width: 4px; height: 4px; position: absolute; bottom: 0; right: 0; }

#breadcrumb-text { padding: 2px 0 0 5px; }

.breadcrumb-link { text-decoration: none; background-color: transparent; color: #33160c; }

.breadcrumb-link:hover { background-color: transparent; color: #982500; }



#search-form { width: 400px; color: #fff; background-color: #a66a57; margin: 15px 0 15px 0; padding: 10px; font-size: 0.9em; position: relative; }

#search-top-left-corner { background: url(../images/breadcrumb-top-left.gif) no-repeat top left; width: 4px; height: 4px; position: absolute; top: 0; left: 0; }

#search-top-right-corner { background: url(../images/breadcrumb-top-right.gif) no-repeat top right; width: 4px; height: 4px; position: absolute; top: 0; right: 0; } 

#search-bottom-left-corner { background: url(../images/breadcrumb-bottom-left.gif) no-repeat bottom left; width: 4px; height: 4px; position: absolute; bottom: 0; left: 0; }

#search-bottom-right-corner { background: url(../images/breadcrumb-bottom-right.gif) no-repeat bottom right; width: 4px; height: 4px; position: absolute; bottom: 0; right: 0; }

.search-input { float: left; width: 236px; height: 14px; padding: 2px; color: #461f10; background-color: #dab3a5; border: 1px solid #fff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.1em; }

.search-button { padding: 0; margin-left: 10px; }



.thumbnails { border: none; }

#thumbnail-container { text-align: center; margin: 15px auto; display: block; }

#large-image-container { text-align: center; margin: 15px auto; display: block; }



#meta-container { width: auto; height: 18px; color: #fff; background-color: #a66a57; margin: 10px 0 5px 0px; font-size: 0.9em; position: relative; }

#meta-top-left-corner { background: url(../images/breadcrumb-top-left.gif) no-repeat top left; width: 4px; height: 4px; position: absolute; top: 0; left: 0; }

#meta-top-right-corner { background: url(../images/breadcrumb-top-right.gif) no-repeat top right; width: 4px; height: 4px; position: absolute; top: 0; right: 0; } 

#meta-bottom-left-corner { background: url(../images/breadcrumb-bottom-left.gif) no-repeat bottom left; width: 4px; height: 4px; position: absolute; bottom: 0; left: 0; }

#meta-bottom-right-corner { background: url(../images/breadcrumb-bottom-right.gif) no-repeat bottom right; width: 4px; height: 4px; position: absolute; bottom: 0; right: 0; }

#meta-text { padding: 2px 0 0 0px; }

#previous { float: left; width: 70px; display: block; padding-left: 5px; text-align: left; }

#total-images { float: left; width: 520px; display: block; text-align: center; }

#next { float: left; display: block; width: 70px; padding-right: 5px; text-align: right; }

.next-prev-link { text-decoration: none; background-color: transparent; color: #33160c; }

.next-prev-link:hover { background-color: transparent; color: #982500; }

.inactive { color: #a66a57; background-color: transparent; width: 70px; }

.thumbnails { padding: 2px; border: 1px solid #986352; background-color: #c28571; color: #fff; }

#large-image { padding: 3px; border: 1px solid #986352; background-color: #c28571; color: #fff; }



.list-links { list-style: none; margin-left: 20px; }

.list-links li a { background: url(../images/link-bullet.gif) no-repeat left center; padding-left: 18px; height: 16px; }

.list-links li a { text-decoration: none; color: #000; background-color: transparent; display: block; width: 200px; }

.list-links li a:hover { background: url(../images/link-bullet-over.gif) no-repeat left center; padding-left: 18px; }

.list-links li a:hover { color: #60372a; background-color: transparent; }



#suppliers-container { padding: 10px 0; }

#suppliers-container p { padding: 0; margin-bottom: 0; }

#suppliers-container p span { float: left; display: block; width: 120px; font-weight: bold; }

#suppliers-container h5.supplier-name { color: #523329; background-color: transparent; text-transform: uppercase; display: block; margin-bottom: 6px; }

#suppliers-container p.supplier-address { color: #6a4539; background-color: transparent; }

#suppliers-container p.supplier-town { color: #6a4539; background-color: transparent; }

#suppliers-container p.supplier-contact-person { color: #6a4539; background-color: transparent; }

#suppliers-container p.supplier-telephone { color: #6a4539; background-color: transparent; }

#suppliers-container p.supplier-mobile { color: #6a4539; background-color: transparent; }

#suppliers-container p.supplier-email { color: #6a4539; background-color: transparent; }



a.locate-link { display: block; margin-top: 10px; background-color: transparent; color: #fff; text-decoration: none; }

a.locate-link:hover { color: #60372a; background-color: transparent; }



.suppliers-subcontainer-odd { margin: 4px 0; padding: 4px; background-color: #c5836e; color: #000; }

.suppliers-subcontainer-even { margin: 4px 0; padding: 4px; background-color: #bb7862; color: #000; }



.product-container { display: block; height: 130px; margin: 8px 15px; clear: both; }

.product-info { float: left; display: block; height: 80px; width: 490px; margin-left: 15px; margin-top: 19px; padding: 5px; position: relative; background-color: #a66a57; color: #000; }

.product-img { float: left; display: block; width: 118px; }

.product-top-left-corner { background: url(../images/breadcrumb-top-left.gif) no-repeat top left; width: 4px; height: 4px; position: absolute; top: 0; left: 0; }

.product-top-right-corner { background: url(../images/breadcrumb-top-right.gif) no-repeat top right; width: 4px; height: 4px; position: absolute; top: 0; right: 0; } 

.product-bottom-left-corner { background: url(../images/breadcrumb-bottom-left.gif) no-repeat bottom left; width: 4px; height: 4px; position: absolute; bottom: 0; left: 0; }

.product-bottom-right-corner { background: url(../images/breadcrumb-bottom-right.gif) no-repeat bottom right; width: 4px; height: 4px; position: absolute; bottom: 0; right: 0; }

.product-name { display: block; font-size: 1.4em; font-weight: bold; width: 70%; text-align: left; color: #5a3124; background-color: transparent; }

.product-size { font-size: 0.9em; color: #623c30; background-color: transparent; display: block; }

.product-description { display: block; margin-top: 5px; color: #40271f; background-color: transparent; }



#meta-products-left { float: left; width: 350px; margin-left: 5px; margin-top: 5px; }

#meta-products-right { float: right; width: 290px; text-align: right; margin-right: 5px; margin-top: 8px; }

#meta-container-products { color: #fff; background-color: #a66a57; font-size: 0.9em; position: relative; height: 30px; }

#search-form-products { color: #fff; background-color: #a66a57; font-size: 0.9em; }



#footer { background: #fff url(../images/footer_bottom.gif) bottom center no-repeat; color: #000; margin: 0 auto; height: 60px; text-align: right; width: 700px; font-size: 0.9em; }

#footer p { padding-right: 25px; }

#footer a { color: #733824; background-color: #fff; text-decoration: none; font-weight: bold; }



#meta-main { text-align: center; color: #000; background-color: transparent; margin: 0 auto; width: 200px; }

#meta-main ul { list-style: none; }

#meta-main ul li { float: left; display: block; padding: 0 2px; }

#meta-main ul li a { color: #000; background-color: transparent; text-decoration: none; }

#meta-main ul li a:hover { color: #955844; background-color: transparent; }