/*============================================================== Version : 2009.08.10 ==============================================================*/ /* @group BASE */ /* @group FRIENDLY SETTINGS */ img, a img { border:0; } /* nobody likes default border around images */ .clear { display: inline-block; } .clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html .clear { height: 1%; } .clear { display: block; } /* @end */ /* based on YUI 2.3 base.css */ /* Idioms */ ul.mod { list-style-image:none; list-style-position: outside; list-style-type: none; list-style: none; margin: 0; padding: 0; } ul.mod li { list-style: none; } /* @end */ /* @group Web Form */ ul.form { margin: 0; padding: 0; } ul.form li { list-style: none; margin: 0 0 18px 0; } ul.form li label { color: #888; display: block; } div.form div.item, div.webform div.item { padding: 9px; } cat_button {} input.cat_textbox, textarea.cat_listbox, select.cat_dropdown, select.cat_listbox { width: 300px; } .cat_dropdown_small { width: 200px; } .cat_dropdown_smaller { width: 150px; } .cat_textbox_small, .cat_listbox_small { width: 200px; /* DON'T TOUCH THIS */ } .cat_listbox { height: 120px; width: 300px; } table.webform, table.reporting { border-collapse:collapse; border-spacing:0; width: 100%; } table.webform td { line-height: 24px; padding: 6px; } .form label, .webform label { font-size: 11px; } .form input, .webform input { margin-right: 3px; } /* @end */ /* @group System Message */ .system-message, .system-error-message { background-color: #f9f9f9; border: 1px solid #eee; color: #666; margin: 18px; min-height: 110px; height: auto !important; height: 110px; padding: 36px 36px 36px 180px; } /*.system-message { background: #f9f9f9 url(/CatalystImages/ok.png) no-repeat 29px 18px; } .system-error-message { background: #f9f9f9 url(/CatalystImages/error.png) no-repeat 26px 26px; }*/ .system-message h1, .system-error-message h1 { color: #000; margin: 0 0 18px 0; } .system-message a:link, .system-error-message a:link { color: #1969bc; } .ok { background: #E9FBE3; color: #21A347; margin-bottom: 18px; } .error { background: #FBE3E4; color: #D12F19; margin-bottom: 18px; } /* @end */ /* @group Announcement */ .announcement-list { font-size: 11px; } .announcement-list h2 { font-size: 14px; margin: 0 0 3px 0; } .announcement-list span.date { font-size: 10px; font-weight: normal; margin: 0 0 0 6px; } .announcement-details span.date { display: block; font-size: 10px; font-weight: normal; margin-bottom: 18px; } /* @end */ /* @group Blog */ /* NOTE: div.post-list exists in FORUMS as well */ .blog-list { background: #f9f9f9; border: 1px solid #eee; color: #000; font-size: 11px; margin: 0 0 18px; padding: 18px; } .blog-list h2 { font-size: 18px; margin: 0 0 3px 0; } .blog-list span { color: #888; } .blog-container h1 { font-size: 36px; line-height: 40px; margin: 0 0 6px 0; } .blog-container p.description { margin: 0 0 36px; } .blog-post h2.post-title { border-bottom: 1px solid #ccc; font-size: 18px; margin: 0; padding: 0 0 3px 0; } .blog-post .post-details { color: #888; font-size: 11px; margin: 0 0 18px; } .blog-container .post-list { float: left; width: 69%; } .blog-post .post-body { margin: 0 0 36px; } .comment-list { background: #f9f9f9; border: 1px solid #eee; margin-bottom: 36px; padding: 18px; } .comment-list h5 { font-size: 14px; margin: 0 0 18px; } .comment-list input#Captcha { width: 300px; } .comment-list textarea.cat_listbox_small { height: 120px; width: 100%; } .blog-comment-container { border: 1px solid #e9e9e9; margin: 0 0 18px; } .blog-comment-container .comment-details { background: #eee; font-size: 11px; padding: 6px; } .blog-comment-container .comment { background: #fff; padding: 9px; } span.flag { margin: 0 6px; vertical-align: middle; } input#fullname, input#website, input#emailaddress { width: 300px; } textarea.comment { height: 160px; width: 100%; } .forum-registration textarea.comment { height: 70px; width: 270px; } .post-body .links { font-size: 11px; } .blog-container .side-panel { float: right; width: 27%; } .side-panel h4 { font-size: 12px; margin: 0 0 9px; } .BlogTagCloud { margin: 0 0 18px; } .BlogRecentPost ul, .BlogTagList ul, .BlogPostArchive ul { margin: 0; padding: 0; } .BlogRecentPost li, .BlogTagList li, .BlogPostArchive li { font-size: 11px; list-style: none; margin: 0 0 9px; } p.page-nav { text-align: center; } p.page-nav a { margin: 0 9px; } .blog-post dl { background: #f9f9f9; border: 1px solid #eee; margin: 0 0 18px; padding: 18px; } .blog-post dt { color: #000; } .blog-post dd { margin: 0 0 9px; } /* @end */ /* @group Booking */ .booking-list { margin: 0 0 9px; } .booking-list span.date { margin: 0 9px 0 0; } .booking-container h1, .form-container h2 { margin: 0 0 18px; } .form-container { background: #f9f9f9; border: 1px solid #eee; padding: 18px; } .form-container input#FirstName, .form-container input#LastName, .form-container input#EmailAddress, .form-container input#Company, .form-container input#WorkPhone { width: 260px; } .go-back { margin: 18px 0; } /* @end */ /* @group Calendar */ div.select-month-year { padding: 9px 0; } table.module-calendar { border: 1px solid #888; border-collapse: collapse; table-layout: fixed; width: 100%; } table.module-calendar td { border: 1px solid #d7d7d7; font-size: 11px; height: 80px; overflow: hidden; padding: 0; vertical-align: top; } table.module-calendar td span { background: #f7f7f7; color: #333; display: block; font-size: 11px; padding: 0 2px; text-align: right; } tr.day-of-week td { background: #d7d7d7; color: #000; font-size: 12px; font-weight: bold; height: 18px; text-align: center; vertical-align: middle; } table.module-calendar td.events span { background: #2BABFA; color: #fff; font-weight: bold; } table.module-calendar td.events { background: #EEF5FA; } table.module-calendar td ul { margin: 9px 0; padding-left: 24px; } table.module-calendar td.last-month { background: #eee; } table.module-calendar td.next-month { background: #eee; } /* @end */ /* @group Catalogue and Products */ .shop-catalogue { background: #fff; border: 1px solid #ccc; float: left; height: 180px; margin: 0 6px 6px 0; overflow: hidden; width: 180px; } .shop-catalogue h4 { font-size: 12px; height: 27px; line-height: 27px; margin: 0; text-indent: 9px; } .shop-catalogue h4 a { color: #1969bc; text-decoration: none; } .shop-catalogue .image { /* Image size should be 150px by 120px */ height: 120px; margin: 0 auto; overflow: hidden; padding: 15px; text-align: center; } .shop-main { margin-top: 18px; } .shop-main .header { border-bottom: 1px solid #eee; height: 27px; line-height: 27px; margin: 0 0 18px; } .shop-main .breadcrumbs { float: left; width: 40%; } .shop-main .cart-summary { float: right; width: 40%; } .shop-main .description ul { margin: 0 0 0 18px; padding: 0; } .shop-main .description li { list-style: square; } table.cartSummaryTable { border-collapse:collapse; border-spacing:0; font-size: 12px; float: right; } td.cartSummaryItem { padding: 0; } a.cartSummaryLink { margin: 0 0 0 18px; } .shop-main ul { margin: 0; padding: 0; } .shop-main li { list-style: none; } table.catalogueTable { border-collapse:collapse; border-spacing:0; width: 100%; margin: 0 0 18px; } table.catalogueTable td { padding: 0; } table.productTable { border-collapse:collapse; border-spacing:0; table-layout: fixed; width: 100%; } table.productTable td { padding: 3px; } .shop-product-small { background: #fff; border: 1px solid #ddd; color: #666; } .shop-product-small h5 { font-size: 12px; font-weight: normal; margin: 0; min-height: 36px; padding: 18px 18px 6px; } .shop-product-small h4 a { color: #1969bc ; } .shop-product-small h5 a { text-decoration: none; } .shop-product-small ul { background: #f9f9f9; padding: 18px; } .shop-product-small ul li { font-size: 11px; margin: 0 0 6px; } .shop-product-small li.price { font-size: 11px; } .shop-product-small li.price strong { font-size: 14px; margin-left: 6px; } .shop-product-small li.stock { font-size: 11px; } .shop-product-small li.stock strong { color: #666; margin-left: 3px; } .shop-product-small .image { height: 120px; margin: 0 auto 9px; overflow: hidden; width: 120px; text-align: center; } .image a, td.actions a { border: none !important; } .shop-product-small li.quantity { line-height: 30px; } li.quantity img { position: relative; top: 8px; /* or vertical-align: middle; */ } .shop-product-small li.quantity input.productTextInput { width: 50px; } .shop-product-small li.quantity input.productSubmitInput { } .shop-product-large { background: #fff; border: 1px solid #eee; color: #666; margin: 0 0 18px; min-width: 240px; overflow: hidden; } .shop-product-large h1 { color: #000; font-size: 14px; } .shop-product-large .image { margin-left: 36%; min-height: 360px; height: auto !important; /* for modern browsers */ height: 360px; /* for IE5.x and IE6 */ padding: 18px; text-align: center; } .shop-product-large .shop-product-small .image { margin: 0; min-height: 160px; height: auto !important; /* for modern browsers */ height: 160px; /* for IE5.x and IE6 */ padding: 18px; text-align: center; width: auto; } .shop-product-large .shop-product-small ul { padding: 9px; } .shop-product-large .shop-product-small ul, .shop-product-large .shop-product-small li { margin: 0; } .shop-product-large li.price { font-size: 14px; } .shop-product-large li.instock { font-size: 10px; } .shop-product-large li.quantity input.productTextInput { width: 50px; } td.productItem .comment-form input#Captcha { width: 300px; } .poplets { border-top: 1px solid #eee; margin-top: 36px; padding: 9px 0; } .poplets img { border: 1px solid #ddd; } table.productPoplets { border-collapse:collapse; border-spacing:0; margin: 0 auto; } .shop-product-large .details { background: #f9f9f9; float: left; min-height: 360px; height: auto !important; /* for modern browsers */ height: 360px; /* for IE5.x and IE6 */ padding: 18px; width: 30%; } .shop-product-large ul { margin: 0 0 36px; padding: 0; } .shop-product-large li { margin: 9px 0; } .shop-cart .breadcrumbs { margin: 0 0 18px; } table.cart { background: #fff; border-collapse:collapse; border-spacing:0; border: 1px solid #ddd; font-size: 11px; width: 100%; } table.cart td { vertical-align: top; /*to make sure the div stack line up at the top */ } table.cart a { color: #1969bc; } table.cart th, table.cart td { color: #666; padding: 9px; } tr.val td { border-bottom: 1px solid #eee; } tr.shipping td { border-bottom: 1px solid #ddd; } tr.discount td.quantity, tr.shipping td.quantity { text-align: right; } td.quantity input.update { margin: 0 0 0 3px; } table.cart th { background: #f9f9f9; border-bottom: 1px solid #eee; color: #000; font-size: 11px; font-weight: normal; text-align: left; } input.cartInputText { width: 70px; } input#DiscountCode, input#GiftVoucher { width: 70px; } select.shippingDropDown { width: 150px; } table.cart th.quantity { text-align: right; } table.cart td.quantity { text-align: right; } .productitemcell { height: 23px; line-height: 20px; margin: 0 0 3px 0; overflow: hidden; } table.cart td.actions { text-align: right; } table.cart td.actions a { font-size: 12px; font-weight: bold; margin: 0 18px 0 0; text-decoration: none; } a#catshopclear { font-size: 10px; font-weight: normal; } table.cart strong { font-size: 14px; } .shop-form { margin: 0 0 18px; } .shop-form ul.form { background: #f9f9f9; border: 1px solid #eee; padding: 18px; } .shop-form label { font-size: 11px; } .shop-form ul.form li { margin: 0; padding: 9px 0; } .shop-form li.last { border-top: 1px solid #eee; } /*.shop-form .checkboxes { line-height: 27px; }*/ input.PaymentMethodType { margin: 0 6px 0 0; } .shop-form ul.form input.cat_textbox, .shop-form ul.form select.cat_dropdown, .shop-form ul.form textarea.cat_listbox { width: 260px; } .shop-form textarea.cat_listbox { height: 100px; } .shop-receipt, .shop-quote-receipt { background: #f9f9f9; border: 1px solid #eee; margin: 18px; padding: 18px; } .shop-receipt h1, .shop-quote-receipt h1 { border-bottom: 1px solid #ccc; padding: 0 0 3px; } .shop-receipt h2, .shop-quote-receipt h2 { font-size: 12px; font-weight: normal; } /* @end */ /* @group Customer Cases */ table.case-list { border-collapse:collapse; border-spacing:0; margin: 0; width: 100%; } table.case-list td { padding: 6px; } table.case-list td.subject, table.case-list td.category { width: 40%; } table.case-list td.status { width: 20%; } table.case-details { background: #f9f9f9; border-collapse:collapse; border-spacing:0; border: 1px solid #eee; width: 100%; } table.case-details td { padding: 6px; } table.case-details tr.odd td { background: #fff; } table.case-details td.var { color: #888; text-align: right; width: 130px; } table.case-details td.val { color: #000; } /* @end */ /* @group Customer Orders */ table.border { border-collapse:collapse; border-spacing:0; border-right: 1px solid #eee; border-bottom: 1px solid #eee; } table.border td { border-top: 1px solid #eee; border-left: 1px solid #eee; } table.border span { color: #888; } table.order-list { border-collapse:collapse; border-spacing:0; width: 100%; } table.order-list td { border: 1px solid #eee; } table.order-list a { margin: 0 9px 0 0; } table.order-list span.number { font-size: 11px; } /* @end */ /* @group Comment */ .comment-container { background: #f9f9f9; border: 1px solid #eee; margin: 0 0 18px; } .comment-container .header { background: #eee; font-size: 11px; padding: 6px 18px; } .comment-container span.name { color: #000; } .comment-container span.rating { margin: 0 9px; vertical-align: middle; } .comment-container .content { padding: 18px; } .comment-form { background: #f9f9f9; border: 1px solid #eee; color: #666; margin: 0 0 18px; padding: 18px; } .comment-form h3 { font-size: 14px; margin: 0 0 18px; } .comment-form h5 { color: #666; font-size: 14px; margin: 0 0 18px; } /*.comment-form li.rating div { font-size: 10px; }*/ /*.comment-form li.rating div input { margin: 0 3px; }*/ .comment-form input.cat_textbox_small, .comment-form textarea { width: 300px; } .comment-form textarea { height: 120px; } /* @end */ /* @group FAQ */ table.faq-search { background: #f9f9f9; border-collapse:collapse; border-spacing:0; border: 1px solid #eee; margin: 0 0 18px 0; width: 100%; } table.faq-search label { color: #888; } table.faq-search td { border-collapse:collapse; border-spacing:0; padding: 9px; } table.faqresultstable { background: #fff; border-collapse:collapse; border-spacing:0; border: 1px solid #eee; width: 100%; } table.faqresultstable td { color: #666; padding: 9px; } table.faqresultstable a { color: #1969bc; } table.faqresultstable td.faqresultstableinfo { background: #f9f9f9; color: #888; font-size: 10px; padding: 3px 18px; text-align: right; } table.faqresultstable td.faqresultstablecount { padding-left: 18px; width: 10px; } td.faqresultstablehead { background: #fff; border-collapse:collapse; border-spacing:0; border-bottom: 1px solid #eee; color: #000; font-weight: bold; } /* @end */ /* @group Forums */ /* NOTE: div.post-list exists in BLOG as well */ .forum-container h1 { font-size: 24px; } table.topic-list, div.forum-posts-container div.post-list, div.forum-registration { color: #666; } div.forum-posts-container div.post-list a, div.forum-registration a { color: #1969bc; } div.forum-registration h2 { color: #000; } table.forum { background: #f9f9f9; border-collapse:collapse; border-spacing:0; border: 1px solid #eee; margin: 0; width: 100%; } table.forum td { font-size: 11px; padding: 9px; vertical-align: top; } table.forum td.topics { border-left: 1px solid #eee; border-right: 1px solid #eee; width: 90px; } table.forum td.posts { border-right: 1px solid #eee; width: 90px; } table.forum td.lastpost { border-left: 1px solid #eee; width: 180px; } table.forum .icon { float: left; width: 50px; } table.forum .forum { margin: 0 0 0 50px; } table.forum h3 { margin: 0; } table.forum h3 a { text-decoration: none; } ul.cap-top, ul.cap-bottom { font-size: 11px; height: 30px; margin: 0 0 18px; padding: 0; } ul.cap-bottom { margin: 18px 0 0; } ul.cap-top li, ul.cap-bottom li { display: block; line-height: 30px; list-style: none; } ul.cap-top li.user, ul.cap-bottom li.nav-page { float: left; width: 200px; } ul.cap-top li.actions, ul.cap-bottom li.actions { float: right; font-size: 12px; text-align: right; width: 350px; } ul.cap-top li.actions a, ul.cap-bottom li.actions a{ float: right; margin: 0; padding: 0 9px; } table.topic-list { background: #f9f9f9; border-collapse:collapse; border-spacing:0; border-left: 1px solid #eee; border-right: 1px solid #eee; width: 100%; } table.topic-list th { background: #ddd; border: 1px solid #ddd; color: #000; font-size: 10px; padding: 6px; text-align: left; } table.topic-list .name { font-weight: bold; width: 60%; } table.topic-list .name .icon { float: left; width: 30px; } table.topic-list .replies, table.topic-list .views { font-size: 10px; text-align: center; width: 10%; } table.topic-list .date { font-size: 10px; text-align: right; width: 20%; } table.topic-list td { padding: 0; } table.topic-list a { color: #1969bc; } table.topic { border-collapse:collapse; border-spacing:0; border-bottom: 1px solid #eee;; margin: 0; width: 100%; } table.topic td { padding: 9px; } table.topic td.name, table.topic td.replies, table.topic td.views { border-right: 1px solid #eee; vertical-align: middle; } .forum-registration { border: 1px solid #eee; background: #f9f9f9; padding: 18px; } .forum-registration input.cat_textbox, .forum-registration textarea.cat_textbox { width: 260px; } .forum-registration input.cat_button { margin: 0 6px 0 0; } .forum-posts-container .breadcrumb { font-size: 11px; padding: 6px; } .forum-posts-container h1 { font-size: 18px; margin: 18px 0; } .forum-posts-container h2 { background: #eee; border: 1px solid #eee; color: #888; font-size: 10px; font-weight: normal; margin: 0; padding: 3px 18px; } .forum-posts-container table.container { border-collapse:collapse; border-spacing:0; width: 100%; } .forum-posts-container td { background: #f9f9f9; border: 1px solid #ddd; padding: 18px; vertical-align: top; } .forum-posts-container td.author { font-size: 11px; width: 160px; } .forum-posts-container h3.name { color: #000; font-size: 12px; font-weight: bold; } .forum-posts-container tr.sub td { height: 30px; padding: 0 18px; } .forum-posts-container td.action a { float: right; line-height: 30px; } /* @end */ /* @group Literature */ p.literature-container img { vertical-align: middle; } p.literature-container span.icon, p.literature-container span.name { margin: 0 3px 0 0; } /* @end */ /* @group Secure Zone Markup */ .case-search { background: #f9f9f9; border: 1px solid #eee; margin: 0 0 18px; padding: 18px; } .secure-lost-password { background: #f9f9f9; border: 1px solid #eee; padding: 18px; } .secure-lost-password input.cat_textbox_small { width: 210px; } .secure-update-details { background: #f9f9f9; border: 1px solid #eee; margin: 0 0 18px; padding: 18px; } .secure-update-details input.cat_textbox, .secure-update-details select.cat_dropdown { width: 260px; } /* @end */ /* @group Form Modules */ .product-form h3 { padding-left: 9px; } .secure-login, .newsletter-form { border: 0px solid #f2f2f2; margin-bottom: 18px; } .secure-login h3, .newsletter-form h3 { background: #eee; border-bottom: 1px solid #eee; font-size: 14px; margin: 0; padding: 6px 18px; } .secure-login div.form, .newsletter-form div.form { padding-left: 9px; } /* @end */ /* @group Search */ .search-box { padding: 6px; } .search-box input.cat_textbox_small { margin: 0 3px 0 0; } /* @end */ /* @group Photo Gallery */ #imageContainer img { margin: 0; } table.photogalleryTable td { padding: 9px; } /* @end */ /* @group Affiliate Program */ table.affiliate-stats { border: 1px solid #d7d7d7; border-collapse: collapse; } table.affiliate-stats td { border: 1px solid #d7d7d7; padding: 6px; } table.affiliate-stats td.var { color: #888; } /* @end */ /* @group Tell a Friend */ .tell-a-friend { border: 2px solid #333; background-color: #fff; color: #666; padding: 18px; } .tell-a-friend form { padding: 0 0 0 36px; } .tell-a-friend h1 { border-bottom: 1px solid #ccc; color: #222; font-size: 18px; margin: 0; padding: 0 0 6px; } .tell-a-friend h2 { border-bottom: 1px dotted #ccc; color: #222; font-size: 12px; margin: 18px 0 9px; } .tell-a-friend td.var { text-align: right; width: 130px; } .tell-a-friend td { font-size: 11px; vertical-align: top; } .tell-a-friend label { color: #888; font-size: 11px; } .tell-a-friend input.cat_textbox_small { height: 21px; } .tell-a-friend input.cat_textbox_small, .tell-a-friend textarea.cat_listbox { font-size: 11px; width: 300px; } /* @end */ /* @group Favourites */ .favourite-registration { border: 1px solid #eee; background: #f9f9f9; padding: 18px; } .favourite-registration input.cat_textbox, .favourite-registration textarea.cat_textbox { width: 260px; } .favrourite-registration input.cat_button { margin: 0 6px 0 0; } /* @end */ /* @group eCommerce Browse Panel */ .browse-panel { border: 1px solid #d7d7d7; } .browse-panel h5 { background: #eee url(/CatalystImages/shop_bg-browse-panel.png) repeat-x; border-bottom: 1px solid #d7d7d7; font-size: 14px; margin: 0; padding: 9px; } .browse-panel h6 { background: #f7f7f7; font-size: 11px; font-weight: bold; margin: 0; padding: 3px 9px; } .browse-panel ol { background: #fff; border-bottom: 1px solid #e7e7e7; margin: 0; padding: 9px; } .browse-panel ol.browse-catalogue { border-bottom: none; } .browse-panel li { list-style: none; padding: 3px 9px; } .browse-panel li span { display: inline; font-weight: bold; } /* @end */ /* @group eCommerce Image Zoom Slider */ img.drag { position: relative; padding: 0.5em; /*margin: 0 0 0.5em 1.5em;*/ margin: 0; cursor: move; } .slidertrack { background-color: #d7d7d7; color: #333; float: left; margin: 0; line-height: 0px; font-size: 0px; text-align: left; padding: 4px; border: 1px solid; border-color: #ccc #aaa #aaa #ccc; } .slidertrack .sliderslit { background-color: #333; color: #ccc; height: 2px; margin: 4px 4px 2px 4px; line-height: 0px; position: absolute; z-index: 1; border: 1px solid; border-color: #999 #ddd #ddd #999; } .slidertrack .slider { width: 16px; background-color: #555; color: #333; position: relative; margin: 0; height: 8px; z-index: 1; line-height: 0px; font-size: 0px; text-align: left; border: 2px solid; border-color: #999 #222 #222 #999; } #zoomcontainer{ overflow: hidden; position: relative; } #zoomcontainer img{ position: absolute; } /* @end */ /* @group Web Apps */ /*pagination*/ ul.pagination { margin: 0; padding: 0; } ul.pagination li { display: inline; list-style: none; margin: 0 2px; } /* @end */