/******************************************** GENERAL STYLES **********************************************/ /* RESET */ * {	margin: 0; padding: 0; } img { border: none 0; margin: 0; } body, h1, h2, h3, h4, h5, h6, div, hr, form, img, ul, li, p, li li, p p { margin: 0; padding: 0; font-size: 1em; } html { height: 100%; } body { width: 100%; height: 100%; font-size: 76%; } /* GENERAL STYLES */ body { font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center; color: #979797; background: #7B003B url(../images/background.gif) 0 0 repeat; } h1 { font-size: 26px; font-weight: normal; color: #7B003B; } h2, h3 { font-weight: normal; } p { line-height: 1.4em; font-size: 1em; margin-bottom: .9em; } strong { color: #7B003B; } ul { list-style: none; } li { font-size: 1em; } li li { font-size: 1em; } a:link, a:visited { color: #7B003B; background-color: transparent; text-decoration: none; } a:hover, a:active { color: #979797; background-color: transparent; text-decoration: none; } .left { float: left; } .right { float: right; } .fill { clear: both; width: 100%; display: block;} .clear { clear: both; width: 100%; height: 1px; font-size: 1px; visibility: hidden;} /* LAYOUT */ .body { width: 768px; height: 100%; margin: 0 auto 0 auto; text-align: left; } .body .header { width: 100%; height: 6%; } .body .page { width: 100%; min-height: 90%; background-color: #ffffff; } .body .footer { height: 4%; background-color: #ffffff; } .body .page .left { width: 140px; height: 660px; margin-left: 38px; margin-top: 20px; display: inline; } .body .page .right { width: 532px; margin-right: 58px; margin-top: 20px; display: inline; } .body .page .right .r1 { height: 60px; } .body .page .right .r2 { height: 50px; border-bottom: 1px solid #E5E5E5; } .body .page .right .r3 { margin-top: 24px; } .body .page .right .r3 .left { width: 360px; margin: 0; display: inline; } .body .page .right .r3 .right { width: 172px; margin: 0; display: inline; } /* OBJECTS */ #logo { width: 100px; height: 100px; margin-bottom: 30px; background: transparent url(../images/logo.gif) 0 0 no-repeat; } #contact { text-align: right; font-size: .9em; } #contact a { color: #888888; } #contact a:hover { color: #7B003B; } #page-title { text-align: right; width: 100%; height: 50px; } #page-title h1 { padding-top: 7px; font-family: Arial, Helvetica, sans-serif; } #page-title img { margin-top: 7px; } #menu { } #menu ul li { width: 98px; border-top: 1px solid #E5E5E5; text-transform: uppercase; font-size: .8em; } #menu ul li.first { border-top: 0; } #menu ul li a { width: 100%; display: block; padding-top: 14px; padding-bottom: 8px; } #menu ul li.on a { color: #979797; } #menu ul li a span { visibility: hidden; } #menu ul li.index {			background: transparent url(../images/menu_index.gif) 0 0 no-repeat;	} #menu ul li.index-on, #menu ul li.index a:hover  {		background: transparent url(../images/menu_index_on.gif) 0 0 no-repeat;	} #menu ul li.products {		background: transparent url(../images/menu_products.gif) 0 0 no-repeat;	} #menu ul li.products-on, #menu ul li.products a:hover {	background: transparent url(../images/menu_products_on.gif) 0 0 no-repeat;	} #menu ul li.shops-cafes {			background: transparent url(../images/menu_shops-cafes.gif) 0 0 no-repeat;	} #menu ul li.shops-cafes-on, #menu ul li.shops-cafes a:hover  {		background: transparent url(../images/menu_shops-cafes_on.gif) 0 0 no-repeat;	} #menu ul li.special-offers {		background: transparent url(../images/menu_special-offers.gif) 0 0 no-repeat;	} #menu ul li.special-offers-on, #menu ul li.special-offers a:hover  {		background: transparent url(../images/menu_special-offers_on.gif) 0 0 no-repeat;	} #menu ul li.jobs {			background: transparent url(../images/menu_jobs.gif) 0 0 no-repeat;	} #menu ul li.jobs-on, #menu ul li.jobs a:hover  {		background: transparent url(../images/menu_jobs_on.gif) 0 0 no-repeat;	} #menu ul li.wholesale {		background: transparent url(../images/menu_wholesale.gif) 0 0 no-repeat;	} #menu ul li.wholesale-on, #menu ul li.wholesale a:hover  {	background: transparent url(../images/menu_wholesale_on.gif) 0 0 no-repeat;	} #menu ul li.links {			background: transparent url(../images/menu_links.gif) 0 0 no-repeat;	} #menu ul li.links-on, #menu ul li.links a:hover  {		background: transparent url(../images/menu_links_on.gif) 0 0 no-repeat;	} #menu ul li.contact {		background: transparent url(../images/menu_contact.gif) 0 0 no-repeat;	} #menu ul li.contact-on, #menu ul li.contact a:hover  {	background: transparent url(../images/menu_contact_on.gif) 0 0 no-repeat;	} #sub-nav { width: 100%; background-color: #ACCA57; height: 30px; } #sub-nav ul { padding: 0 0 0 10px; } #sub-nav ul li { text-transform: uppercase; font-size: .8em; display: inline; line-height: 30px; padding: 0 0 0 8px; background: transparent url(../images/pipe.gif) 3px 50% no-repeat; } #sub-nav ul li.item-1 { padding-left: 0px; background: transparent;} #sub-nav ul li.item-2 { padding-left: 13px; background-image: url(../images/arrow-right.gif);} #sub-nav ul li a { width: 100%; color: #ffffff; } #sub-nav ul li a:hover { color: #7B003B; } #sub-nav ul li.on a { color: #7B003B; } body.page-products #sub-nav ul li.item-0 { padding-left: 0px; background: transparent;} body.page-products #sub-nav ul li.item-1 { padding-left: 13px; background: transparent url(../images/arrow-right.gif) 3px 50% no-repeat; } body.page-products #sub-nav ul li.item-2 { padding-left: 8px; background: transparent url(../images/pipe.gif) 3px 50% no-repeat; } #sub-nav ul.on-0 li.item-1 a, #sub-nav ul.on-1 li.item-2 a, #sub-nav ul.on-2 li.item-3 a, #sub-nav ul.on-3 li.item-4 a { color: #7B003B; } #body p { margin-top: 1.6em; font-size: .9em; margin-left: 10px; } .page-index #body p { margin-left: 0px; } #body img.right { width: auto; margin: 0; float: right; margin-left: 8px; margin-bottom: 4px; } #body img.left { width: auto; margin: 0; float: left; margin-right: 8px; margin-bottom: 4px; } #photo-2 { margin: 0; float: right; margin-left: 8px; margin-bottom: 4px; } #menu-grid { height: 360px; } #menu-grid .item { width: 174px; height: 174px; float: left; margin-right: 5px; margin-top: 5px; } #menu-grid #item-3, #menu-grid #item-6 { margin-right: 0; } #menu-grid .item a { display: block; width: 100%; height: 100%; } #instructions { margin-top: 10px; } #instructions p { font-size: .9em; } #product-grid { } #product-grid .item { width: 174px; /*	height: 260px; */ float: left; display: inline; margin-right: 5px; margin-top: 5px; } #product-grid #item-3, #product-grid #item-6, #product-grid #item-9 { margin-right: 0; } #product-grid #item-4, #product-grid #item-7, #product-grid #item-10 { clear: left; } #product-grid .item .btn-buy { position: absolute; width: 60px; height: 22px; margin-top: -24px; margin-left: 114px; background-color: #7B003B; line-height: 22px; text-transform: uppercase; font-size: .8em; text-align: center; } #product-grid .item .btn-buy a { width: 100%; height: 100%; display: block; color: #ffffff; } #product-grid .item .title { padding: 8px 8px 0 8px; } #product-grid .item .details { padding: 0 8px 0 8px; } #product-grid .item .details p { font-size: .8em; line-height: 1.2em; } #product-grid .item .title { font-size: .8em; } #product-grid .item .title span { color: #7B003B; text-transform: uppercase; font-size: 1.2em; } /* FORMS */ form { margin: 0; } form fieldset { padding: 1em; border: 1px solid #E5E5E5; } form div { margin-top: 1em; } form input.field { width: 250px; } form textarea { width: 250px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; } form select { width: 160px; } form div.button { text-align: center; } label { width: 120px; display: block; float: left; margin-top: .5em; font-size: .9em; } span.text_options { font-size: .9em; } /* TABLES */ table { width: 100%; background-color: #E5E5E5; margin: 4px 0 1em 0; border-width: 1px; } tr { border: 0; } th { background-color: #e7e8ea; padding-top: 1em; padding-bottom: 1em; text-align: center; text-transform: uppercase; font-size: .8em; font-weight: normal; } td { background-color: #ffffff; padding-left: .4em; padding-right: .4em; padding-top: 1em; padding-bottom: 1em; font-size: .9em; vertical-align: top; } th.col1 { width: 30%; } th.col2 { width: 60%; } th.col3 { width: 10%; } #map { margin-top: 6px; margin-bottom: 6px; } #location-list { width: 100%; } #location-list .item { width: 100%; margin-bottom: 1em; } #location-list .item img { float: left; margin-right: 1.2em; } #location-list .item .title { color: #7B003B; text-transform: uppercase; font-size: .8em; margin-bottom: 1em; } #location-list .item .summary { font-size: .9em; } .body .page .right .r3 .left { width: 360px; margin: 0; display: inline; } .body .page .right .r3 .right { width: 172px; margin: 0; display: inline; } #product-title h1 { text-transform: uppercase; font-size: 1em; font-weight: normal; text-align: left; margin-top: 10px; } #product-photo { margin-top: 6px; } #product-size, #product-code, #product-details { font-size: .9em; margin: 0; padding: 0; margin-bottom: 1em; } #product-price { color: #7B003B; font-size: 1em; } #frmadd, #frmbasket { margin-left: 0; margin-top: 1em; } #frmadd fieldset, #frmbasket fieldset { padding: 0; border: 0; } form input.button, form .button input { border: 0; margin: 0; width: 120px; height: 22px; background-color: #7B003B; line-height: 22px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .8em; color: #ffffff; text-transform: uppercase; text-align: center; cursor: pointer; } #success-message { margin-top: 1.6em; font-size: .9em; margin-left: 10px; font-style: italic; } .footer { padding-left: 178px; font-size: .9em; }