/* http://meyerweb.com/eric/tools/css/reset/ */ /* v1.0 | 20080212 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;} body {line-height: 1;} ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;} /* remember to define focus styles! */ :focus {outline: 0;} /* remember to highlight inserts somehow! */ ins {text-decoration: none;} del {text-decoration: line-through;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: collapse;border-spacing: 0;} /*////////////////////////// client: BBS version: v1.0 author: tom greenhill agency: www.maketimetodesign.com notes: just in case you're reading this, because of OsCommerce the site templates are very ugly with nexted tables everywhere, i've tried to strip them out as uch as possible! so this is not my usual standard of work! /////////////////////////*/ html, body, #wrapper {height:100%;} body > #wrapper {height: auto; min-height: 100%;} body {background: #2f72e2 url(../images/bg-page-thorpe.jpg) top center no-repeat; color: #000; margin:0; padding:0; font: normal 11px/1 Arial, Helvetica, sans-serif;} #wrapper {width:960px; margin: 0 auto -250px;} #header {height:200px;background-color:#fff;} #header h1 {display:none} #header h1 a {display:block;text-indent:-9999em;} #header ul {position:relative;height:200px;} #header ul li {position:absolute; top:0;left:0;right:0;bottom:0;height:200px;width:960px;} h1, h2, h3, h4, h5, h6 {color: #333;text-transform: uppercase; font-family:Helvetica, Arial, sans-serif/*Tahoma,Arial,Helvetica,sans-serif*/;font-weight: normal;} h2, .pageHeading, .archive .post h3 {font: 22px Helvetica, Arial, sans-serif;border-bottom: 1px dotted #777; padding: 0 10px 5px 0; margin:0 10px 20px 0;} h4.featured {font-size: 14px; margin:0 0 5px;} h4.featured a {font-weight:normal;} .featured .image {margin: 0 0 10px;} p {font-size: 12px;margin: 0 0 10px;line-height:1.4} p.actions {text-align:right;} a {color: #999; text-decoration: none; font-weight:bold;} a:hover { color: #0398ff;} a.headerNavigation { color: #000;} a.headerNavigation:hover {color: #999;} a.pageResults { color:#666;} a.pageResults:hover {color: #0398ff;} hr.sep {height:1px; margin: 10px 0; background: none; border: none; border-top: 1px dotted #777;} #content {clear: both; padding-bottom: 250px/* must be same height as the footer */;} #content #background { background:url(../images/bg-content.gif) top left repeat-y; position:relative; } .store #content #background { background:url(../images/bg-content-store.gif) top left repeat-y; } #sidebar {float:left; width: 150px; background-color:#f7f7f7; border-right: 1px solid #dedbd6;padding: 20px 0 50px;} #sidebar-right {float:right; width: 210px; background-color:#f7f7f7; border-left: 1px solid #dedbd6;padding: 20px 0;} #w3counter {position:absolute; bottom:10px; left: 10px;} #w3counter a {background: none;} .sidebar h2 {border-bottom: 1px solid #b1b1b1; padding:1px 10px 9px; margin:2px 1px 10px;font-weight:bold;font-size: 11px; color: #333;} .sidebar form {display:block;} .sidebar #quick_find {margin: 0 0 15px 10px;} .sidebar label {float:left;} .sidebar #keywords {width: 70px;margin:0 5px 0 0} .sidebar #btn_go {padding:0} .sidebar p.actions {text-align:left;padding: 2px 0 0;} .sidebar .section {margin: 0 0 15px 10px;} .widget ul {margin: 0 10px;} .sidebar .section img.icon {margin: 0;} .sidebar .section img.left {margin: 0 5px 5px 0;} .sidebar .section #verified {display: block; margin: 10px 0 0;} .sidebar ul {} .sidebar ul li {padding: 0 0 8px;line-height:12px;} .sidebar ul li.navLevel0 a {display:block;} .sidebar ul li.navLevel1 a {margin: 0 0 0 10px;color: #555;display:block;} .sidebar .store-categories ul li.navLevel1 {display:none;} .sidebar ul li.last {} .sidebar a#specials {text-transform:uppercase;} .sidebar ul li a, .sidebar a#specials {font-size: 11px; color: #333;background: url(../images/bullet.gif) no-repeat 0 2px; padding: 0 0 0 12px;display:block;} .sidebar ul li.widget_adrotate_widgets a { background: none; } .sidebar ul li a:hover, .sidebar a#specials:hover {color:#111;background-position:0 -48px;} .sidebar li.store-categories div.categories {margin:0 0 0 10px} .sidebar div.categories {margin: 0 0 15px 10px;} .sidebar div.categories ul {margin: 10px 0 0;} .sidebar #cart-contents {margin: 0;} .sidebar li.cart-item a {background:none;padding:0;} .sidebar li.cart-item a:hover {color:#fe153f;background:none; } .sidebar #w3counter-tracker {text-align:right !important;} .sidebar #w3counter-tracker a {padding:0;background:none;margin:0 10px;} #inner {margin:20px 20px 25px 0; width:770px;float:right} .ie6 #inner {margin: 20px 10px 0 0;} .blog #inner {width:540px;float:left;margin: 20px 0 0 21px} #inner h2 {margin: 0 0 10px;} ul#columns li h3, h3#featured {font-size: 22px; font-family:Helvetica,Arial,sans-serif; color:#fe153f; padding:0 0 5px 0;margin: 20px 0 0 0;} #footer {height:250px; margin:-250px auto 0; /* negative value of footer height */width:960px;position: relative;clear:both;background: url(../images/bg-footer.png) top center no-repeat; color:#fff;} #footer .wrap {padding: 15px 15px 10px 26px} #footer .wrap a {color: #fff;} #footer .wrap a:hover, #footer .wrap a:focus {color:#d3d4d6;} #footer .column {float:left; margin:0 12px 0 0;} #footer .column h6 {color:#adf9eb; font:20px Arial, Helvetica, sans-serif;border-bottom: 1px solid #629ec1; padding:0 0 4px; text-transform:none;margin:0 0 5px;} #footer .column p, #footer .column ul {} #footer .column ul {float:left;} #footer .column ul li {font-size:12px; line-height:1.4} #footer #footer-links {margin: 0;} #footer #footer-brands {width:388px;} #footer #footer-brands .wrap {padding:0;} #footer #footer-brands ul {margin:0 12px 0 0;} #footer #footer-brands ul.last {margin:0;} #footer #footer-team ul {margin:0 10px 0 0;} #footer #footer-findus p {padding:0 10px 0 0;} #footer #footer-findus #skypecall img {margin:8px 0 0;} #footer #footer-links ul {margin:0 20px 0 0;} #footer ul#powered {position:absolute;bottom:10px;right:10px;} #footer ul#powered li {float:left; padding:0 5px 0 0; margin: 0 5px 0 0; border-right: 1px solid #ccc} #footer ul#powered li {line-height: 1.2;} #footer ul#powered li.last {border:none;} ul#navigation {background-color: #F7F7F7; border-bottom: 1px solid #DEDBD6; height: 40px; line-height: 40px; padding: 0 15px;} ul#navigation li {border-right: 1px solid #fbdae0; height: 40px; float: left; line-height: 40px; margin:0 15px 0 0; padding: 0 15px 0 0;} ul#navigation li a {color: #0398ff; display: block; float:left; font-size: 14px; line-height: 40px;text-transform: uppercase;} ul#navigation li a span {color: #f7f7f7;} ul#navigation li a:hover {color: #FE153F; font-style: italic;} ul#navigation li a:hover span {color: #FE153F;} div#google_map {margin: 20px 0; height: 400px; width:715px;} iframe#google {margin: 20px 0; height: 400px; width:100%; padding: 20px 0; border-bottom: 1px dotted #ccc;border-top:1px dotted #ccc;} ol#breadcrumbs {margin:1px 0 5px; padding: 0 0 7px;border-bottom: 1px solid #ccc;} ol#breadcrumbs li {font-size: 11px; line-height: 18px;font-weight:bold;float:left; margin:0 8px 0 0; text-transform:uppercase; } ol#breadcrumbs li.active {color: #fff;background:url(../images/breadcrumb-active.gif) left center no-repeat;padding:0 0 0 5px;} ol#breadcrumbs li.active span.text {float:left;} ol#breadcrumbs li.active span.cap {background: url(../images/breadcrumb-active-cap.gif) right center no-repeat; display: block; width:3px; height:18px;margin:0;padding:0 0 0 2px;float:right;} ol#breadcrumbs li span.sep {margin:0 0 0 8px; color:#797878} ol#breadcrumbs li a {color: #fe153f;text-decoration: none; text-transform:uppercase;} ol#breadcrumbs li a:hover {color:#333;} /* --/ form elements */ checkbox, input, radio, select {font-size: 11px; vertical-align:middle} input.text, input[type=text], input[type=password], textarea {padding: 5px;} textarea {width: 99%;font-size: 11px;} label.block {display:block;position:relative;} label.block span {position:absolute;top: 7px; left: 5px;color:#777;cursor:text;font-size:11px;} .ie7 label.block span, .ie6 label.block span {top: 8px;} input.text, input[type=text], input[type=password], textarea {border: 1px solid #dadada;} input[type=text]:focus, input[type=password]:focus, textarea:focus, input.focus, textarea.focus {border-color: #666} input#adv_keywords {width: 400px; margin:0 0 5px;} fieldset.nolegend legend {display:none;} ol.form li label {font-weight:bold;line-height:20px;} ol.form li.left {width: 48%; float:left;} ol.form li.right {width: 48%; float:right;text-align:right;} ol.form li.textarea {clear:both; margin: 10px 0;} ol.form li.textarea label {margin: 0 0 5px;} ol.form li label {display:block; float: left; width:33%; font-size: 12px;} ol.form li input {width: 60%} /* --/ product details */ #product {padding:10px 0 0;} #product #image {float:left; margin: 0 10px 10px 0; border: 1px dotted #888; position:relative;} #image .banner, .image .banner {width:75px;height:75px;position:absolute;top:-15px; left:-22px;} #image .banner {top:-10px;left:-8px;} .prodnew {background:url(../images/bbs-new.png) center center no-repeat;} .prodsale {background:url(../images/bbs-sale.png) center center no-repeat;} .prodpreorder {background:url(../images/bbs-preorder.png) center center no-repeat;} .prod10 {background:url(../images/bbs-10per.png) center center no-repeat;} .prod15 {background:url(../images/bbs-15per.png) center center no-repeat;} .prod20 {background:url(../images/bbs-20per.png) center center no-repeat;} .prod25 {background:url(../images/bbs-25per.png) center center no-repeat;} .prod30 {background:url(../images/bbs-30per.png) center center no-repeat;} .prod35 {background:url(../images/bbs-35per.png) center center no-repeat;} .prod40 {background:url(../images/bbs-40per.png) center center no-repeat;} .prod45 {background:url(../images/bbs-45per.png) center center no-repeat;} .prod50 {background:url(../images/bbs-50per.png) center center no-repeat;} #product h3 {font-size: 20px;color:#544f4c; margin:0 10px 10px 0; padding:10px 0 0;} #product h4 {border-top:1px dotted #ccc;color:#544F4C;font-size:16px;margin:10px 0 8px 10px;padding:10px 0 0;text-transform:capitalize; display:none} #product #barcode {margin: 0 0 5px;color: #444;} #product #barcode span, #product ul span {font-weight:bold; color:#333} #product ul {margin:0 0 15px;color: #444;} #product ul li {font-size: 12px;margin:0 15px 6px; 0; line-height:15px;} #product ul li#regular {display:inline; margin:0 10px 6px 0;} #product ul li#special {display:inline; margin:0 0 6px 0;} #product ul#features { border-bottom: 1px dotted #ccc; border-top:1px dotted #ccc; padding:10px 0;margin-bottom:15px;} #product p.desc {} #product p.desc span {font-weight:bold;} #product #images {clear:both; margin: 10px 0;} #product #images li {float:left; margin:0 10px 0 0;} #product #images img {width: 100px; height: auto; border: 1px dotted #ccc;cursor:pointer;} #product #images img.over {border-color:#10a8ff} #product #details p.actions {text-align:left;margin:0 0 30px;} ul#columns {margin:0;} ul#columns li {width:50%;float:left;} ul#columns li .image img {margin:0 0 10px} ul#columns li#col_bestseller, ul#columns li#col_new {display: none;} #product-listing {margin: 10px 0;} #product-listing h2, ul#columns li h4 {font-size: 11px; border: none; padding:0; margin:0 0 6px;text-transform:none} #product-listing h2 a, ul#columns li h4 a {font-weight:normal;} #product-listing .row {margin: 0 0 15px;} #product-listing .row li {float: left;width: 185px; margin:0 10px 0 0;} #product-listing .row li .wrap, ul#columns li .wrap {border:1px dotted #ccc; padding:5px 10px;} ul#columns li .wrap {width:165px;} #product-listing .row li.last {margin: 0;} #product-listing .row li.brand {text-align:center;} #product-listing .row li.brand a {display:block;margin:0 0 5px;} #product-listing .row li.brand p {text-align:center;} #product-listing .featuredrow .prices {font-size:12px} #product-listing .featuredrow h2 {margin:0 0 2px; font-size:12px;} #product-listing .image, ul#columns li .image {margin:0 auto 10px;padding:7px;width:143px;position:relative;} #product-listing .image a, ul#columns li .image a {display:block;width:150px;} #product-listing .image a:hover {} #product-listing .prices, ul#columns li .prices {margin: 0 0 5px;} #product-listing .prices .price, ul#columns li .prices .price {font-weight:bold;margin:0 4px 0 0;} #product-listing tr.actions-row td {padding: 5px 0; vertical-align:middle;} #product-listing tr.actions-row td select {margin: 0 5px 0 0; padding:3px 1px;} td.logo {width: 150px;border-bottom:1px dotted #777;} div.centerpage { width: 770px; margin: 0 auto;} .boxText, .errorBox, .stockWarning, .orderEdit { font-size: 12px; } .message {padding:10px 15px;} .errorBox { background: #fe153f; font-weight: bold; } .stockWarning { color: #fe153f; } .stockWarning p { font-size:13px; padding:15px; border: 1px dashed #fe153f; font-weight: bold; text-align:center;} form {display: inline;} tr.header { background: #fff;} tr.headerNavigation { background: #bbc3d3;} td.headerNavigation { font-size: 10px; background: #bbc3d3; color: #fff; font-weight: bold;} tr.headerError {background: #ff0000;} td.headerError {font-size: 12px;background: #ff0000;color: #fff;font-weight: bold;text-align: center;} tr.headerInfo { background: #00ff00;} td.headerInfo { font-size: 12px; background: #00ff00; color: #fff; font-weight: bold;text-align: center;} tr.footer { background: #bbc3d3;} td.footer { font-size: 10px; background: #bbc3d3; color: #fff; font-weight: bold;} .infoBox {} .infoboxContents {} .cartPlainContents {background: #f8f8f9;font-size: 10px;} .PlainContents {padding: 2px;} .PlainContents .PlainContents .boxText {padding: 3px 0;} .PlainContents .PlainContents .actions {margin:0;} .PlainContents hr.sep {border-color:#ccc; margin:5px 0;} .historyPlainContents {background: #f8f8f9;font-size: 10px;} .infoBoxNotice {background: #ff8e90;} .infoBoxNoticeContents { background: #ffe6e6; font-size: 10px;} td.infoBoxHeading {font-size: 11px; font-weight: bold; background: #ccc; color: #fff; padding: 5px;} td.infoBox, span.infoBox { font-size: 10px;} tr.accountHistory-odd, tr.addressBook-odd, tr.alsoPurchased-odd, tr.payment-odd, tr.productListing-odd, tr.upcomingProducts-odd, tr.shippingOptions-odd { background: #f8f8f9; } tr.top table {margin:0 0 10px;} tr.top td {vertical-align:top;} table.productListing {margin: 15px 0 0 0;} .productListing-heading {font-size: 12px; background: #eee; color: #333; font-weight: bold;padding:8px; vertical-align: middle;border-bottom: 1px dotted #555} .productListing-heading td {padding: 8px;} td.productListing-data {font-size: 12px; padding:5px;} div.pageHeading { font-size: 24px; color: #189eff;} tr.subbar { background: #f4f7fd;} td.subbar {font-size: 10px; color: #000;} td.main {font-size: 12px;line-height: 1.5;padding:10px 2px;} tr.productListing-heading td.main {padding: 5px 10px;} p.main {font-size: 12px;line-height: 1.5;padding:0 0 10px;} td.main, td.main2 {vertical-align:top} td.main2, p.main2 {font-size: 12px; line-height: 1.4;} #welcometext {padding: 20px 0 20px;} td.smalltext, span.smalltext, p.smalltext { font-size: 10px;} td.accountCategory { font-size: 13px; color: #aabbdd;} td.fieldKey { font-size: 12px; font-weight: bold; padding: 10px 0;} td.fieldValue { font-size: 12px;} td.tableHeading { font-size: 12px; font-weight: bold;} td.formAreaTitle { font-size: 12px; font-weight: bold;} span.newItemInCart { font-size: 10px;color: #ff0000;} span.greetUser {font-size: 12px;color: #FE153F; font-weight: bold;} table.formArea {background: #f1f9fe;border: 1px solid #7b9ebd;} #product ul li#special span.markProductOutOfStock, span.markProductOutOfStock {font-size: 12px;color: #c76170;font-weight: bold; padding:0 0 0 2px;} #product ul li#special span.productSpecialPrice, span.productSpecialPrice { color: #fe153f; font-weight:bold;font-size:14px;} span.errorText { color: #fe153f;} .modulerow { } .modulerowover { background-color: #d7e9f7; cursor: pointer; cursor: hand; } .modulerowselected { background-color: #e9f4fc; } .checkoutbarfrom, .checkoutbarto { font-size: 10px; color: #8c8c8c; } .checkoutbarcurrent { font-size: 10px; color: #000; } .messagebox { font-size: 10px; } .messageStackWarning { font-size: 11px; border: 1px solid #ffb3b5;padding: 10px; } .messageStackSuccess { font-size: 11px; border: 1px solid #99ff00;padding: 10px; } .messageStackError { font-size: 11px; border: 1px solid #ff363b; padding: 10px;} .inputrequirement { font-size: 10px; color: #ff0000; } #product ul li#convert {margin-top:5px;} #product ul select#to {margin:0 0 0 5px} /* --/ blog specific */ br.clear {clear:both;} .navigation {width:100%;margin:4px 0 5px; padding: 0 0 10px;border-bottom: 1px solid #ccc; text-transform:uppercase;font-size:1.1em;height:12px;} .navigation .alignleft {float:left;} .navigation .alignright {float:right;} #respond {padding: 10px 0; margin: 25px 0 0;border-top: 1px dotted #ccc;} #respond h3 {margin:0 0 10px; font-size: 1.4em} #respond input {padding: 10px; text-transform: lowercase; cursor:pointer;} .addthis_container {margin:25px 0 7px;} .page .addthis_container {display:none;} .post small {margin:0 0 8px;display:block;color:#a9afb6} .sidebar ul li.adrotate_widget {padding:0 0 10px} .sidebar ul li.adrotate_widget a {background-image:none;padding:5px; background-color: #e4e5e5; display: block; width:125px;height:125px; margin:0 7.5px 5px;line-height:125px;} .sidebar ul li.adrotate_widget a:hover {background-color:#c4c5c5} #sidebar-right ul li.adrotate_widget a {width:180px; height:150px;margin: 0 10px 0;} #sidebar-right ul li.adrotate_widget a.blank {height:150px; line-height:150px;} #sidebar #searchform {margin: 0 10px 10px;} #sidebar #searchform label {margin:0 0 5px;display:none;} #sidebar #searchform input {margin:0 0 5px;} #sidebar #searchform input#s {width:120px;} #inner .post {padding: 0 0 5px 0;margin:0 0 20px; border-bottom:1px dotted #ccc;} #inner .post h2 { font-size:18px;border:none;padding:0;margin:0 0 6px;} .page #inner .post h2 {border-bottom:1px solid #ccc;padding:0 0 4px;margin:0 0 20px;} #inner .post h2 a {color:#544F4C;font-weight:normal;} #inner .post h2 a:hover {color:#0398ff} #inner .post .entry p {line-height: 1.5; color:#404040;} #inner .post p.postmetadata {padding:25px 0 0;color:#706d6b;font-size:11px;clear:both;} #inner .post p.postmetadata a {color:#706d6b;} #inner .post p.postmetadata a:hover {color:#0398ff} #inner .post ul.team {margin:0 0 20px; padding:0 0 20px; border-bottom: 1px dotted #ccc;} #inner .post ul.team li {line-height:1.2;margin:0 0 6px;font-size:12px; } #inner .post ul.team li.name {font-size:14px;} #inner .post ul.team li span.question {margin:0 5px 0 0; font-weight:bold;} .contactform label {display:block; text-transform:uppercase;margin:0 0 4px; font-weight:bold;} .contactform label span.random {color:#ff3737; font-size:13px;} .contactform input {margin:0 0 15px;} .contactform label#ccme {float:left; margin:0 10px 0 0;} .contactform textarea {width:535px;height:80px;margin:0 0 15px;} p#address {float:left;margin:0 70px 10px 0;} p#address span {font-size:13px;font-weight:bold;} p#opening {clear: both; margin: 10px 0;} p#opening span {font-size:13px;font-weight:bold;} p#phone {} p#fax {} p#email {} p.contact-detail {margin:0 0 1px;} p.contact-detail span {font-weight:bold;} p#pgoogle {clear:both;} #facebook-fan {width:180px;padding:5px;background-color:#E4E5E5; margin:0 0 15px 10px} #facebook-fan a.link {} #plug, #plugged {background:url(../images/plug.png) center center no-repeat;width:24px;height:24px;position:absolute;z-index:1;right:0; top:0;cursor:move;} #board { width:320px; height: 524px; position:relative; } #cboxLoadedContent p.first {margin:0 0 10px;} #cboxLoadedContent p.actions {text-align:left;} #cboxLoadedContent p.actions #plug-continue {margin:0 20px 0 0} #cboxLoadedContent p.actions #plug-cancel {} #cboxLoadedContent p.actions span {font-size:10px} .page-id-6 table {margin:0 0 30px} .page-id-6 table th {background-color:#eaeaea} .page-id-6 table th, .page-id-6 table td {border:1px dotted #ccc;padding:5px 0} .page-id-6 table th.size {text-align:left;padding-left:5px} .page-id-6 table th {font-weight:bold;font-size:11px;} .page-id-6 table tr.over td, .page-id-6 table tr.over th {background-color:#eaeaea} .page-id-6 table#sizing td.size {padding-left:5px} .page-id-6 table td.height {text-align:center} .page-id-6 table td.weight {text-align:center} .page-id-34 .entry ul {padding:0 0 0 25px;margin:25px 0 0;} .page-id-34 .entry ul li {margin:0 0 15px;font-size:12px;color:#404040;list-style:disc outside;line-height:1.5;} table#finsizing td.size {text-align:center;} .page #inner h3, .main h3, #cboxLoadedContent h3 {font-size:15px;margin:0 0 10px} .main h3.higlight {color:#FE153F} .wp-caption {} .aligncenter {text-align:center;} .alignleft {text-align:left;} .alignright {text-align:right;} #colourcodes {margin:0 0 30px;} #colourcodes td {padding:6px;font-size:10px;border:1px dotted #ccc;width:200px;} #colourcodes td.space {border:none;} #colourcodes #c-blank {background-color:#fff;} #colourcodes #c-bk {background-color:#000;} #colourcodes #c-wt {background-color:#fff;} #colourcodes #c-rd {background-color:#ff0000;} #colourcodes #c-lb {background-color:#0099ff} #colourcodes #c-gb {background: url(../images/bg-c-gb.gif) center center no-repeat} #colourcodes #c-bl {background-color:#0066ff} #colourcodes #c-gr {background-color:#666} #colourcodes #c-mr {background-color:#800000} #colourcodes #c-sl {background-color:#d2d2d2} #colourcodes #c-lg {background-color:#24e744} #colourcodes #c-pr {background-color:#6600cc} #colourcodes #c-or {background-color:#ff9900} #colourcodes #c-gn {background-color:#009900} #colourcodes #c-yl {background-color:#ffff00} #colourcodes #c-sb {background: url(../images/bg-c-sb.gif) center center no-repeat} #colourcodes #c-gd {background-color:#eed37c} #colourcodes #c-pk {background-color:#ff66ff} #colourcodes #c-rk {background: url(../images/bg-c-rb.gif) center center no-repeat} #colourcodes #c-db {background-color:#003399} #colourcodes #c-dg {background-color:#006600} #colourcodes #c-ch {background-color:#666} #colourcodes #c-rb {background-color:#4169E1} #colourcodes #c-tg {background-color:#f28500} /*### colorbox */ /* ColorBox Core Style The following rules are the styles that are consistant between themes. Avoid changing this area to maintain compatability with future versions of ColorBox. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative; overflow:hidden;} #cboxLoadedContent{overflow:auto;} #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} /* Example user style The following rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML, so that the structure easier to understand. */ #cboxOverlay{background:url(../images/overlay.png) 0 0 repeat;} #colorbox{} #cboxTopLeft{width:21px; height:21px; background:url(../images/controls.png) -100px 0 no-repeat;} #cboxTopRight{width:21px; height:21px; background:url(../images/controls.png) -129px 0 no-repeat;} #cboxBottomLeft{width:21px; height:21px; background:url(../images/controls.png) -100px -29px no-repeat;} #cboxBottomRight{width:21px; height:21px; background:url(../images/controls.png) -129px -29px no-repeat;} #cboxMiddleLeft{width:21px; background:url(../images/controls.png) left top repeat-y;} #cboxMiddleRight{width:21px; background:url(../images/controls.png) right top repeat-y;} #cboxTopCenter{height:21px; background:url(../images/border.png) 0 0 repeat-x;} #cboxBottomCenter{height:21px; background:url(../images/border.png) 0 -29px repeat-x;} #cboxContent{background:#fff;} #cboxLoadedContent{margin-bottom:28px;} #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;} #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;} #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;} #cboxPrevious{position:absolute; bottom:0; left:0px; background:url(../images/controls.png) -75px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;} #cboxPrevious.hover{background-position:-75px -25px;} #cboxNext{position:absolute; bottom:0; left:27px; background:url(../images/controls.png) -50px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;} #cboxNext.hover{background-position:-50px -25px;} #cboxLoadingOverlay{background:url(../images/loading_background.png) center center no-repeat;} #cboxLoadingGraphic{background:url(../images/loading.gif) center center no-repeat;} #cboxClose{position:absolute; bottom:0; right:0; background:url(../images/controls.png) -25px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;} #cboxClose.hover{background-position:-25px -25px;} /* The following fixes png-transparency for IE6. It is also necessary for png-transparency in IE7 & IE8 to avoid 'black halos' with the fade transition Since this method does not support CSS background-positioning, it is incompatible with CSS sprites. Colorbox preloads navigation hover classes to account for this. !! Important Note: AlphaImageLoader src paths are relative to the HTML document, while regular CSS background images are relative to the CSS document. */ .cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopLeft.png, sizingMethod='scale');} .cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopCenter.png, sizingMethod='scale');} .cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopRight.png, sizingMethod='scale');} .cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderBottomLeft.png, sizingMethod='scale');} .cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderBottomCenter.png, sizingMethod='scale');} .cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderBottomRight.png, sizingMethod='scale');} .cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');} .cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderMiddleRight.png, sizingMethod='scale');} /* ----/ utility classes */ .cboth {clear:both;} .hide {display: none;} .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */