/* ----------------------------------------------- Hay Festival v1.0 - Shop Stylesheet Author: Finn Beales - hello@madebyfinn.com Version: 02/2011 CONTENTS: 1 Button colours 2 Navigation colour styles 3 Header logo 4 Picture boxes on right hand side of homepage 5 Homepage sales image 6 Standard content page ----------------------------------------------- */ /* 1 Shop buttons (Light Blue) ----------------------------------------------- */ /*.button, .CartDeleteButton, .UpdateCartButton, .ContinueShoppingButton, .CheckoutNowButton, .AddToCartButton, .PaymentPageContinueCheckoutButton, .ReviewPageContinueCheckoutButton, .ContinueCheckoutButton, .normalButtons, .SelectAddressButton, .EditAddressButton, .AccountPageContinueCheckoutButton, .UpdateAccountButton, .CreateAccount, .EditAddressButton, .button-standard, .btn, .button-big, .back, .prev, .next, .ProductNavLink { */ .button, .button-big, .button-standard, .btn, .AddToCartButton, .checkout, .UpdateCartButton, .ContinueShoppingButton, .ContinueCheckoutButton, .CartDeleteButton, .ContinueShoppingButton, .CheckoutNowButton, .PaymentPageContinueCheckoutButton, .ReviewPageContinueCheckoutButton, .normalButtons, .SelectAddressButton, .EditAddressButton, .AccountPageContinueCheckoutButton, .UpdateAccountButton, .CreateAccount, .EditAddressButton, .back, .prev, .next, .ProductNavLink, input.btn-login { color: #fff; border: solid 1px #0076b3; background: #008ed8; background: -webkit-gradient(linear, left top, left bottom, from(#008ed8), to(#007fc1)); background: -moz-linear-gradient(top, #008ed8, #007fc1); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#008ed8', endColorstr='#007fc1'); } .button:hover, .button-big:hover, .button-standard:hover, .btn:hover, .AddToCartButton:hover, .checkout:hover, .UpdateCartButton:hover, .ContinueShoppingButton:hover, .ContinueCheckoutButton:hover, .CartDeleteButton:hover, .ContinueShoppingButton:hover, .CheckoutNowButton:hover, .PaymentPageContinueCheckoutButton:hover, .ReviewPageContinueCheckoutButton:hover, .normalButtons:hover, .SelectAddressButton:hover, .EditAddressButton:hover, .AccountPageContinueCheckoutButton:hover, .UpdateAccountButton:hover, .CreateAccount:hover, .EditAddressButton:hover, .back:hover, .prev:hover, .next:hover, .ProductNavLink:hover, input.btn-login:hover { background: #007fc1; background: -webkit-gradient(linear, left top, left bottom, from(#007fc1), to(#0073af)); background: -moz-linear-gradient(top, #007fc1, #0073af); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#007fc1', endColorstr='#0073af'); } .button:active, .button-big:active, .button-standard:active, .btn:active, .AddToCartButton:active, .checkout:active, .UpdateCartButton:active, .ContinueShoppingButton:active, .ContinueCheckoutButton:active, .CartDeleteButton:active, .ContinueShoppingButton:active, .CheckoutNowButton:active, .PaymentPageContinueCheckoutButton:active, .ReviewPageContinueCheckoutButton:active, .normalButtons:active, .SelectAddressButton:active, .EditAddressButton:active, .AccountPageContinueCheckoutButton:active, .UpdateAccountButton:active, .CreateAccount:active, .EditAddressButton:active, .back:active, .prev:active, .next:active, .ProductNavLink:active, input.btn-login:active { color: #fff; background: -webkit-gradient(linear, left top, left bottom, from(#0073af), to(#007fc1)); background: -moz-linear-gradient(top, #0073af, #007fc1); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0073af', endColorstr='#007fc1'); } /* 2 Navigation colour styles ----------------------------------------------- */ #nav .active span, #nav a:hover span, #nav li:hover a span, #nav li.hover a span, .add-nav .active a, .add-nav .active span, .add-nav a:hover span, .add-nav li:hover a span, .add-nav li.hover a span { background:url(images/arrow-shop.png) no-repeat; } #nav .active a, #nav a:hover, #nav li:hover a, #nav li.hover a, .add-nav a:hover, .add-nav li:hover a, .add-nav li.hover a { background:#008ed8; } #nav ul { border-bottom:5px solid #008ed8; } #main { border-top:3px solid #008ed8; /*font-family: 'TradeGothicLTStdRegular';*/ } .add-nav ul { border-bottom:5px solid #008ed8; } .title { border-bottom:5px solid #008ed8; } /* 3 Logo ----------------------------------------------- */ .logo { display:block; text-indent:-9999px; overflow:hidden; background:url(images/logo-shop.gif) no-repeat; width: 586px; height: 53px; margin:4px 0 0; } /* 4 Picture boxes on right hand side of homepage ----------------------------------------------- */ .text-box a { color:#fff; display:block; background:url(images/bg-text-box-shop.png); width:211px; padding:10px 5px 8px 10px; cursor:pointer; } .text-box a:hover { background:url(images/bg-text-box-shop-hover.png); text-decoration:none; } .box:hover .text-box-holder, .aside .hover .text-box-holder { background:url(images/bg-text-box-shop-hover.png); } /* 5 Homepage sales image ----------------------------------------------- */ .sales-block { width:100%; border-bottom:1px solid #ccc; padding:0 0 29px; margin:0 0 32px; } .sales-block:after { content:""; display:block; clear:both; } .sales-block img { float:right; } .text-block { float:left; width:460px; padding:18px 0 0; line-height:18px; color:#010101; vertical-align:top; } .text-block h1 { margin:0 0 16px -5px; position:relative; z-index:2; text-indent:-9999px; line-height:0; font-size:0; overflow:hidden; background:url(images/img-sales.gif) no-repeat; width: 442px; height: 175px; } .text-block h2 { font-size:18px; line-height:24px; font-weight:normal; margin:18px 0; padding:0; text-transform:none; border-bottom:none; } /* 6 Standard content page ----------------------------------------------- */ h2 { border-bottom:5px solid #008ed8; margin:0 0 20px 0; padding:0 0 15px 0; position:relative; } .col-2 { margin-right:8px; } /* 7 Weblingo colour changes ----------------------------------------------- */ #tabnav A.active:link, #tabnav A.active:visited { background-color:#008ed8; color:#fff; } #tabnav A:hover { background-color:#008ed8; color:#fff; } table#calendar_of_events td.session { background-color:#ecfdfe; border-bottom-color:#008ed8; } table#calendar_of_events td.session:hover { background-color:#e2feff; } /* 8 IE Specific styles ----------------------------------------------- */ * html #nav a:hover span, * html #nav li:hover a span, * html #nav li.hover a span, * html .add-nav a:hover span, * html .add-nav li:hover a span, * html .add-nav li.hover a span { background-position:-9999px -9999px; filter: progid:dximagetransform.microsoft.alphaimageloader(src='images/arrow-shop.png', sizingmethod='crop'); } * html .text-box a { background:none; filter: progid:dximagetransform.microsoft.alphaimageloader(src='images/bg-text-box-shop.png', sizingmethod='scale'); } * html .text-box a:hover { background:none; filter: progid:dximagetransform.microsoft.alphaimageloader(src='images/bg-text-box-shop-hover.png', sizingmethod='scale'); } /* 9 Category ----------------------------------------------- */ .slideshow { float:left; width:337px; height:350px; } .slideshow ul.slideset { height:337px; } .slideshow ul.slideset img { border:1px solid #ccc; } .shop-pitch { float:left; width:569px; margin-left:10px; min-height:340px; } .shop-pitch h1 { font-family:'Trade Gothic W02 Bold 2'; text-transform:uppercase; font-size:24px; margin-bottom:10px; margin-left:10px; } .shop-pitch h3 { font-size:14px; margin-bottom:10px;} .block1 { float:left; width:207px; padding:0 10px; } .shop-pullquotes { margin-bottom:24px; } .shop-blurb { font-size:12px; margin-bottom:20px; } .shop-prices { background:#f2f1f1; border:1px solid #c5c5c5; width:181px; padding:13px 13px 3px 13px; margin-bottom:18px; } .shop-prices li { font-size:12px; margin-bottom:9px; } .shop-prices li span { font-size:20px; color:#008ed8; padding-right:2px; } .shop-prices li input { margin:0 10px 10px 0; top:-5px; } .addtocart { padding-top:20px; } .block2 { float:left; width:320px; padding:0 10px; } #product-table { clear:both; padding-top:30px; } #product-table a { text-decoration:none; } .product-container { height: 225px; overflow: ; position: relative; width: 227px;} .product-container img { position:absolute; top:5px; left:5px; vertical-align:top; } #product-table td { padding-right:15px; padding-bottom:20px; vertical-align:top; } #product-table td .overlay { background: url(images/product-overlay.png) no-repeat; display: block; height: 225px; position: absolute; top: 0px; width: 227px; z-index: 2; } #product-table td .overlaynp { background: url('images/product-overlay-no-price.png') no-repeat; display: block; height: 225px; position: absolute; top: 0px; width: 227px; z-index: 2; } #product-table td strong { bottom:28px; display:block; font-size:16px; /*margin-left:10px;*/ margin-left:160px; width:60px; text-align:center; letter-spacing:-1px; position:absolute; /* right:10px; */ z-index:3; color:#fff; } #product-table h2 { font-size:12px; color:#000; border:none; margin:0; padding:0; } #product-table p { font-size:12px; color:#000; border:none; margin:0; padding:0; } #shop { overflow:hidden; margin-bottom:20px; } #cross-selling-table { clear:both; float:left; width:337px; } #cross-selling-table h3 { font-size:14px; margin-bottom:9px; } #cross-selling-table td, #nav-inpage td { padding-right:15px; padding-bottom:20px; } #nav-inpage { float:right; padding-top:37px; } p.entity-summary { color:#666; margin:0; } p.entity-description { padding-top:0; } /* added 15/10/11 - Finn to check */ #relateditems td { vertical-align:top; } #relateditems td a { display:block; padding-top:10px; font-size:12px; } #nav-inpage a { margin-right:15px; } .price { background:#f2f1f1; border:1px solid #c5c5c5; width:181px; padding:13px 13px 3px 13px; font-size:12px; } table#relateditems img { border:5px solid #C5C5C5; } #bookshelf { background:url('images/bookshelf.jpg') no-repeat; height:682px; } /* over ride global */ /* .main-holder { padding-top:0; } .sub-nav { margin-bottom:0; } #shop {margin-top:33px;} */ .jcarousel-skin-tango .jcarousel-container { /* -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background: #F0F6F9; border: 1px solid #346F97; */ background:none; } .jcarousel-skin-tango .jcarousel-direction-rtl { direction: rtl; } .jcarousel-skin-tango .jcarousel-container-vertical { width:224px; height:600px; padding: 40px 55px; } .jcarousel-skin-tango .jcarousel-clip { overflow: hidden; } .jcarousel-skin-tango .jcarousel-clip-vertical { width:226px; height:600px; } .jcarousel-skin-tango .jcarousel-item { width:300px; height:150px; } .jcarousel-skin-tango .jcarousel-item img { border:1px solid #666; } .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal { margin-left: 10px; margin-right: 0; } .jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom: 10px; } .jcarousel-skin-tango .jcarousel-item-placeholder { /* background: #fff; */ background:none; color:#000; } /** * Vertical Buttons */ .jcarousel-skin-tango .jcarousel-next-vertical { position:absolute; bottom:5px; left:150px; width:32px; height:32px; cursor:pointer; background:transparent url(images/next-vertical.png) no-repeat 0 0; } .jcarousel-skin-tango .jcarousel-next-vertical:hover, .jcarousel-skin-tango .jcarousel-next-vertical:focus { background-position: 0 -32px; } .jcarousel-skin-tango .jcarousel-next-vertical:active { background-position: 0 -64px; } .jcarousel-skin-tango .jcarousel-next-disabled-vertical, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:focus, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:active { cursor: default; background-position: 0 -96px; } .jcarousel-skin-tango .jcarousel-prev-vertical { position: absolute; top:5px; left:150px; width:32px; height:32px; cursor:pointer; background:transparent url(images/prev-vertical.png) no-repeat 0 0; } .jcarousel-skin-tango .jcarousel-prev-vertical:hover, .jcarousel-skin-tango .jcarousel-prev-vertical:focus { background-position: 0 -32px; } .jcarousel-skin-tango .jcarousel-prev-vertical:active { background-position: 0 -64px; } .jcarousel-skin-tango .jcarousel-prev-disabled-vertical, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:focus, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active { cursor: default; background-position: 0 -96px; }