/*---------------------------------------------------- SCREEN.CSS SITE: www.paini.co.uk CREATED: Wed 16.06.10 @ 10:28 AUTHOR: Kean Richmond ----------------------------------------------------*/ @import url("reset.css"); /*--- 00. Common Elements ---------------------------------------------------------------------------*/ body {background:url(/img/_bkg.jpg) repeat-x #FFFFFF; color:#666666; font-family:Arial, Helvetica, sans-serif; font-size:62.5%;} a {color:#333333;} a:hover {color:#666666; text-decoration:none;} /*--- 01. Heading ---------------------------------------------------------------------------*/ h1 {color:#333333; font-size:2.2em; font-weight:bold; margin:20px 0 3px 0;text-transform:capitalize} h2 {color:#333333; font-size:1.8em; font-weight:bold; margin:20px 0 3px 0;} /*--- 02. Main Layout ---------------------------------------------------------------------------*/ #main-container {margin:0px auto; position:relative; width:990px;} #content-container {background:#FFFFFF; height:100%; overflow:hidden; margin:177px 0 0 0; padding:20px; position:relative; z-index:2;} #index #content-container {margin:480px 0 0 0;} /*--- 03. Header ---------------------------------------------------------------------------*/ #header {left:0; position:absolute; top:-177px; width:100%;} #index #header {top:-480px;} #logo {display:block; float:left; margin:33px 20px 33px 20px;} #index #logo {margin-bottom:0;} #nav {float:right; margin:0 10px 0 0;} #nav li {float:left; height:84px; margin:0 10px 0 0; width:110px;} #nav a {background:url(/img/_nav.png) 23px 46px no-repeat; color:#999999; display:block; height:100%; text-decoration:none; text-indent:-9999px;} #nav li.current {background:#514D4D; background:rgba(255,255,255,0.2);} #nav a#nav-about {background-position:-87px 46px;} #nav a#nav-shop {background-position:-197px 46px;} #nav a#nav-contact {background-position:-307px 46px;} #nav a#nav-home:hover, .current #nav-home {background-position:-417px 46px;} #nav a#nav-about:hover, .current #nav-about {background-position:-527px 46px;} #nav a#nav-shop:hover, .current #nav-shop {background-position:-637px 46px;} #nav a#nav-contact:hover, .current #nav-contact {background-position:-747px 46px;} #banner {background:url(/img/_banner_img.png) no-repeat right -4px; clear:both; margin:0 20px; padding:79px 0 0 0; height:257px; width:950px; -moz-box-shadow:0 1px 0 rgba(255,255,255,0.1); -webkit-box-shadow:0 1px 0 rgba(255,255,255,0.1); } #banner p {background:url(/img/_banner_text.png) no-repeat; height:195px; text-indent:-9999px; width:595px;} #hdr-container {border-top:1px solid rgba(255,255,255,0.1); clear:both; margin:0 20px; -moz-box-shadow:0 -1px 0 #000000; -webkit-box-shadow:0 -1px 0 #000000; box-shadow:0 -1px 0 #000000;} #header form {float:left; padding:16px 0;} #header form label {display:none;} #header form input {float:left;} #header form input[type='text'] {background:url(/img/_spyglass.png) 6px 5px no-repeat #FFFFFF; border:0; margin:0 10px 0 0; padding-left:25px; width:240px;} #hdr-container .twitter {float:left;width:200px;margin:15px 0 0 180px} #hdr-basket {color:#FFFFFF; float:right; font-size:1.1em; margin:8px 0 0 0;} #hdr-basket span {float:left; font-size:3.1em; font-weight:bold;} #hdr-basket p {float:left; font-weight:bold; padding:13px 0 0 10px; text-transform:uppercase;} #hdr-basket a {float:left; margin-left:10px; margin-top:8px;} /*--- 04. Navigation ---------------------------------------------------------------------------*/ #side-column {border-right:1px solid #E5E5E5; float:left; padding:0 24px 0 0; width:190px;} #side-column h6 {background:url(/img/_gradient_lightgrey.png) repeat-x #E9E8E8; color:#787878; font-size:1.4em; font-weight:bold; padding:8px 10px; text-shadow:#FFFFFF 1px 1px 0;} #side-column ul {font-size:1.2em;} #side-column li {border-top:1px solid #E3E3E3;} #side-column li.title {color:#434343; font-weight:bold; padding:7px 5px 7px 15px;} #side-column li.brochure a {background:#002D54; color:#FFF; font-weight:bold; padding-left:15px;} #side-column li.brochure a:hover {background:#000;} #side-column li:first-child {border-color:#CFCFCF;} #side-column a {background:url(/img/_bullets.png) 15px -390px no-repeat; color:#434343; display:block; padding:7px 5px 7px 26px; text-decoration:none;} #side-column a:hover {background:url(/img/_colorbands.png) no-repeat right top #CCCCCC; color:#FFFFFF;} #side-column a[title='Contemporary'] {background-position:15px -173px;} #side-column a[title='Contemporary']:hover {background-color:#92CA76; background-position:right top;} #side-column a[title='Freedom'] {background-position:15px -359px;} #side-column a[title='Freedom']:hover {background-color:#2AA9E1; background-position:right top;} #side-column a[title='Minimal'] {background-position:15px -49px;} #side-column a[title='Minimal']:hover {background-color:#C7DC62; background-position:right top;} #side-column a[title='Piccolo'] {background-position:15px -111px;} #side-column a[title='Piccolo']:hover {background-color:#782A8A; background-position:right top;} #side-column a[title='Pure Water'] {background-position:15px -204px;} #side-column a[title='Pure Water']:hover {background-color:#FAAA42; background-position:right top;} #side-column a[title='Rinse'] {background-position:15px -142px;} #side-column a[title='Rinse']:hover {background-color:#2079BE; background-position:right top;} #side-column a[title='The Farmhouse Kitchen'] {background-position:15px -266px;} #side-column a[title='The Farmhouse Kitchen']:hover {background-color:#129896; background-position:right top;} #side-column a[title='The Master Chef'] {background-position:15px -18px;} #side-column a[title='The Master Chef']:hover {background-color:#FBB332; background-position:right top;} #side-column a[title='The Utility Room'] {background-position:15px -328px;} #side-column a[title='The Utility Room']:hover {background-color:#DEE44C; background-position:right top;} #side-column a[title='Traditional Classics'] {background-position:15px -297px;} #side-column a[title='Traditional Classics']:hover {background-color:#E11E6C; background-position:right top;} #side-column a[title='Safe and Eco Friendly'] {background-position:15px -235px;} #side-column a[title='Safe and Eco Friendly']:hover {background-color:#F5D835; background-position:right top;} #side-column a[title='Urban'] {background-position:15px -80px;} #side-column a[title='Urban']:hover {background-color:#12BCE4; background-position:right top;} #side-column a[title='Wow !'] {background-position:15px 13px;} #side-column a[title='Wow !']:hover {background-color:#EF4941; background-position:right top;} /*--- 05. Content ---------------------------------------------------------------------------*/ #content {float:right; font-size:1.2em; position:relative; width:710px;} #content p {padding:6px 0;} #breadcrumb {border-bottom:1px solid #E5E5E5; font-size:0.9em; height:100%; margin:0 0 12px 0; overflow:hidden; padding:8px 0 9px 0;} #breadcrumb li {background:url(/img/_arrow_breadcrumb.gif) 0 5px no-repeat; float:left; padding:0 8px 0 15px;} #breadcrumb li:first-child {background:0; padding-left:0;} #breadcrumb a {color:#666666; text-decoration:none;} #breadcrumb a:hover {color:#333333;} /*--- 06. Index ---------------------------------------------------------------------------*/ #columns {clear:both; font-size:0.9em; -moz-column-count:3; -moz-column-gap:22px; -moz-column-rule:1px solid #E5E5E5; -webkit-column-count:3; -webkit-column-gap:22px; -webkit-column-rule:1px solid #E5E5E5; column-count:3; column-gap:22px; column-rule:1px solid #E5E5E5;} .key {background:#CCCCCC; float:left; height:173px; margin:30px 0 0 0; padding:6px 10px;} #key-colors {margin-right:10px; width:290px;} #key-tech {width:370px;} .key h6 {color:#787878; font-size:1.8em; font-weight:bold; text-shadow:rgba(255,255,255,0.4) 1px 1px 0;} .key ul {} .key li {float:left; padding:2px 5% 2px 0; width:45%;} .key span {background:url(/img/_key.png) no-repeat; display:block; float:left; height:29px; margin:0 5px 0 0; text-indent:-9999px; width:29px;} #key-tech ul {float:left; padding:0 5% 0 0; width:45%;} #key-tech li {float:none; line-height:1.2em; padding:11px 5% 7px 0; width:auto;} #key-colors ul {margin-top:8px;} #key-colors li {line-height:2.4em;} .key span.twotap {background-position:0 -29px;} .key span.threetap {background-position:0 -58px;} .key span.high {background-position:0 -87px;} .key span.low {background-position:0 -116px;} .key span.antiquegold {background-position:-29px 0;} .key span.bronze {background-position:-29px -30px;} .key span.brushsteel {background-position:-29px -60px;} .key span.champagne {background-position:-29px -90px;} .key span.chrome {background-position:-29px -120px;} .key span.mocha {background-position:-29px -150px;} .key span.silver {background-position:-29px -180px;} .key span.white {background-position:-29px -210px;} /*--- 07. Categories ---------------------------------------------------------------------------*/ #category-spares {background:url(/img/_category_spares.jpg) no-repeat; display:block; float:right; height:560px; text-indent:-9999px; width:70px;} #category-spares:hover {background-position:-70px 0;} #categories {margin:0 0 20px 0;} #index #categories {float:left; width:640px;} #categories li {float:left; margin:0 10px 10px 0; width:150px;} #categories li a {text-decoration:none;} #categories li img {border:1px solid #EDEDED; height:148px; width:148px;} #categories li span {background:url(/img/_colorbands.png) no-repeat right top #CCCCCC; color:#FFFFFF; display:block; font-size:1.2em; font-weight:bold; height:17px; letter-spacing:-1px; padding:11px 0 0 4px; text-shadow:rgba(0,0,0,0.3) 1px 1px 0;} #categories li[title='Freedom'] span, #shop-products h1[title='freedom'] {background-color:#2AA9E1;} #categories li[title='Wow !'] span, #shop-products h1[title='wow'] {background-color:#EF4941;} #categories li[title='The Master Chef'] span, #shop-products h1[title='the-master-chef'] {background-color:#FBB332;} #categories li[title='Minimal'] span, #shop-products h1[title='minimal'] {background-color:#C7DC62;} #categories li[title='Urban'] span, #shop-products h1[title='urban'] {background-color:#12BCE4;} #categories li[title='Piccolo'] span, #shop-products h1[title='piccolo'] {background-color:#782A8A;} #categories li[title='Rinse'] span, #shop-products h1[title='rinse'] {background-color:#2079BE;} #categories li[title='Contemporary'] span, #shop-products h1[title='contemporary'] {background-color:#92CA76;} #categories li[title='Pure Water'] span, #shop-products h1[title='pure-water'] {background-color:#FAAA42;} #categories li[title='Safe and Eco Friendly'] span, #shop-products h1[title='safe-and-eco-friendly'] {background-color:#F5D835;} #categories li[title='The Farmhouse Kitchen'] span, #shop-products h1[title='the-farmhouse-kitchen'] {background-color:#129896;} #categories li[title='Traditional Classics'] span, #shop-products h1[title='traditional-classics'] {background-color:#E11E6C;} #categories li[title='The Utility Room'] span, #shop-products h1[title='the-utility-room'] {background-color:#DEE44C;} #categories li[title='Wow !'] a:hover span {background-color:#BF3A34;} #categories li[title='Freedom'] a:hover span {background-color:#2AA9E1;} #categories li[title='The Master Chef'] a:hover span {background-color:#C98F28;} #categories li[title='Minimal'] a:hover span {background-color:#9FB04E;} #categories li[title='Urban'] a:hover span {background-color:#0E96B6;} #categories li[title='Piccolo'] a:hover span {background-color:#60226E;} #categories li[title='Rinse'] a:hover span {background-color:#1A6198;} #categories li[title='Contemporary'] a:hover span {background-color:#75A25E;} #categories li[title='Pure Water'] a:hover span {background-color:#C88835;} #categories li[title='Safe and Eco Friendly'] a:hover span {background-color:#C4AD2A;} #categories li[title='The Farmhouse Kitchen'] a:hover span {background-color:#0E7A78;} #categories li[title='Traditional Classics'] a:hover span {background-color:#B41856;} #categories li[title='The Utility Room'] a:hover span {background-color:#B2B63D;} /*--- 08. Product List ---------------------------------------------------------------------------*/ #shop-products h1 {background:url(/img/_colorbands.png) no-repeat right top #CCCCCC; color:#FFFFFF; display:block; font-size:2em; font-weight:bold; height:30px; letter-spacing:-1px; margin:0 0 1px 0; padding:8px 0 0 4px; text-shadow:rgba(0,0,0,0.3) 1px 1px 0;} #cat-text {margin-bottom:37px;} .product-list {background:#E5E5E5; color:#999999; float:left; font-size:0.9em; height:250px; margin:0 0 10px 10px; padding:10px; width:330px;} .product-list.special {background:#e1e1e1} #content .product-list:nth-child(odd) {margin-left:0;} .product-list-left {float:left; width:120px;} .product-list-right {float:right; width:200px;} .product-list h2 {font-size:1.4em; margin:0;} .product-list h2 a {text-decoration:none;} .product-list h2 a:hover {color:#000000;} #content .product-list p.stock-num {padding:4px 0 10px 0;} #content .product-list p.thumb {position:relative;background:#FFFFFF; height:120px; overflow:hidden; padding:0; text-align:center; width:120px;} #content .product-list p.thumb .offer {position:absolute;top:0;right:0} .product-list ul {padding:5px 7px;} .product-list li {background:url(/img/_bullets.png) 0 -426px no-repeat; padding:2px 0 2px 8px;} .product-list .price {font-size:1.4em; font-weight:bold;} .product-list .price strong {color:#000000; display:block;} .product-list .price span {color:#999999; font-size:0.7em; font-weight:normal;} img[alt='Pressure'] {margin-left:2px} #paging {background:#F1F1F1; border-bottom:1px solid #E1E1E1; clear:both; color:#999999; font-weight:bold; height:100%; overflow:hidden; padding:12px 10px;} #content #paging p {float:left; padding:3px 0; width:30%;} #paging ul {float:right;} #paging li {float:left;} #paging a {color:#333333; display:block; height:15px; padding:3px 0; text-align:center; text-decoration:none; width:20px;} #paging a:hover {color:#999999;} #paging a.current {background:#F7F7F7; border:1px solid #C4C3C4; color:#999999; padding:2px 0; width:18px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;} #paging span {display:block; padding:3px 7px 3px 0;} /*--- 09. Product ---------------------------------------------------------------------------*/ #product-imgs {float:right; margin:20px 0 20px 20px; width:50%} #main-image {position:relative;text-align:center; width:100%;} #main-image .offer {position:absolute;top:0;right:0} #thumbnails {border-top:3px double #CCCCCC; margin:10px 0 0 0;} #thumbnails li {float:left; margin:5px 5px 5px 0;} #thumbnails a {border:1px solid #CCCCCC; display:block; padding:1px;} #thumbnails a:hover {border:1px solid #000000;} #thumbnails img {height:50px; width:50px;} #product-bullets {padding:10px 7px;} #product-bullets li {background:url(/img/_bullets.png) 0 -426px no-repeat; padding:2px 0 2px 8px;} #shop-product .price {font-size:1.4em; font-weight:bold;} #shop-product .price strong {color:#000000; font-size:1.8em; display:block;} #shop-product .price span {color:#999999; font-size:0.35em; font-weight:normal;} #shop-product .quantity input[type='text'] {width:50px;} #shop-product .addtobasket-lg {background-image:url(/img/_btn_grey40.png); font-size:1.4em; font-weight:bold; height:40px; padding:5px 20px;} #shop-product .addtobasket-lg:hover {background-position:0 -40px;} #product-spares {clear:both;} #product-spares input[type='text'] {margin:0 5px 0 0;width:50px;} /*--- 10. Shopping Basket ---------------------------------------------------------------------------*/ #shopcart #content, #checkout #content {float:none; width:auto;} #shopcart table input {width:50px;} #shopcart table th, #checkout table th, #shopcart table td, #checkout table td {text-align:center;} #shopcart table th.td_primary, #shopcart table td.td_primary, #checkout table th.td_primary, #checkout table td.td_primary {text-align:left;} #shopcart table th.td_alignright, #shopcart table td.td_alignright, #checkout table th.td_alignright, #checkout table td.td_alignright {text-align:right;} #shopcart table td.td_delete {border-right:0; padding-right:0; width:14px;} #shopcart table tr:nth-child(odd) {background:0;} #shopcart #content input[type='button'], #shopcart #content input[type='submit'] {margin:5px 5px 5px 0;} #shopcart .btn-checkout {float:right;} #shopcart table td.td_alignright strong span {color:#900} #uk {position:absolute;left:-250px;width:220px;border:1px #ccc solid;background:#900;top:96px;font-size:13px;line-height:18px} #uk p {font-weight:bold;color:#fff;margin:10px;text-align:justify} #uk p strong {margin-right:5px;} /*--- 11. Checkout ---------------------------------------------------------------------------*/ #checkout {} #checkout fieldset {float:left; width:50%;} label.address {height:75px;} #checkout input[type='text'] {float:left;} #checkout #content input[type='submit'] {margin:5px 5px 20px 0;} /*--- 49. Table ---------------------------------------------------------------------------*/ table {border-left:1px solid #E3E3E3; border-top:1px solid #E3E3E3; color:#666666; margin:10px 0 20px 0; width:100%;} table th {background:url(/img/_th_bkg.png) repeat-x #E4E4E4; color:#333333; font-weight:bold; padding:7px 10px 9px 10px;} table th, table td {border-bottom:1px solid #E3E3E3; border-right:1px solid #E3E3E3; font-size:1em; text-align:left;} table td {padding:10px 10px 15px 10px;} table a {text-decoration:none;} table tr:nth-child(odd) {background:#FAFAFA;} /*--- 50. Footer ---------------------------------------------------------------------------*/ #footer-container {background:url(/img/_bkg_footer.png) repeat-x; margin:-103px 0 0 0; padding:103px 0 0 0;} #footer {color:#969696; font-size:1.1em; height:100%; overflow:hidden; margin:0px auto; padding:20px 20px 25px 20px; width:950px;} #footer div {float:left; width:50%;} #footer strong, #footer a {color:#CCCCCC; text-decoration:none;} #footer a:hover {color:#FFFFFF;} #ftr-contact {background:url(/img/_ftrcontact.png) no-repeat; height:58px; margin:10px 0 25px 0; text-indent:-9999px; width:488px;} #ftr-address {line-height:1.65em;} #ftr-links, #copyright, #bronco {text-align:right;} #ftr-links {margin:14px 0 22px 0;} #bronco {margin:2px 0 33px 0;} #bronco a, #ftr-address a {color:#969696;} #footer .in-link {background:url(/img/_arrow_up.gif) 0 4px no-repeat; display:block; float:right; padding:0 0 0 8px;} /*--- 51. Form Elements ---------------------------------------------------------------------------*/ #content form p {clear:both; padding-bottom:0;} fieldset {margin:40px 0 20px 0;} legend {color:#333333; font-size:1.4em; font-weight:bold; padding:0 0 20px 0;} legend span {color:#666666; display:block; font-size:0.65em; font-weight:normal;} label {float:left; margin:3px 10px 0 0; width:100px;} input[type='text'], textarea.enquiry, select.country {border:1px solid #999;color:#999;font:normal 12px Arial,Helvetica,sans-serif;margin:0 0 5px 0;padding:5px; width:200px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px} select.country {width:212px} input[type='text']:focus {color:#666666;} input[type='submit'], input[type='button'] {background:url(/img/_btn_grey.png) repeat-x #838383; border:0; color:#FFFFFF; cursor:pointer; font-family:Arial, Helvetica, sans-serif; font-size:12px; height:25px; padding:0 5px; text-shadow:#666666 0 -1px 0; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;} input[type='button'].e {margin-left:2px} input[type='submit']:hover, input[type='button']:hover {background-position:0 -25px; color:#333333; text-shadow:#FFFFFF 0 -1px 0;} input[type='text'].input-100 {width:100px;} input[type='text'].input-150 {width:150px;} input[type='text'].input-200 {width:200px;} input[type='text'].input-250 {width:250px;} input[type='text'].input-300 {width:300px;} .required {background:url(/img/icon_required.gif) no-repeat; display:block; float:left; height:13px; margin:6px 0 0 6px; text-indent:-9999px; width:53px;} #p-security {clear:both; display:none; height:0px; visibility:hidden;} #p-security label {float:none; padding:0 0 4px 0; text-align:left; width:auto;} #p-security input[type="text"] {display:block; float:none;} /*--- 52. Response Elements ---------------------------------------------------------------------------*/ #msg-response {background:url(/img/response_bkg.jpg) #FFFFFF repeat-x; border:1px solid #CCCCCC; clear:both; cursor:pointer; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; line-height:1.3em; margin:20px 0; padding:1px; position:relative; zoom:1; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;} #msg-response a {color:#333333;} #msg-response a:hover {text-decoration:none;} #msg-response span {background:url(/img/response_close.gif) no-repeat; height:11px; position:absolute; right:10px; top:8px; width:10px;} #msg-response div {padding:6px 46px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;} .msg-error {background:url(/img/response_error.jpg) left center no-repeat; color:#B7220A;} .msg-success {background:url(/img/response_success.jpg) left center no-repeat; color:#0F8915;} /*--- 53. Skip Link ---------------------------------------------------------------------------*/ #skip-link {float:left; margin:0 0 0 -9999px; text-decoration:none;} #skip-link:focus {background:#333333; border-bottom:1px solid #FFFFFF; border-right:1px solid #FFFFFF; color:#FFFFFF; font-size:11px; margin:0; padding:3px 7px 3px 5px; position:relative; z-index:1000;} /*--- 54. Links & Buttons ---------------------------------------------------------------------------*/ .link-button {background:url(/img/_btn_grey.png) repeat-x #838383; color:#FFFFFF; cursor:pointer; font-size:12px; padding:5px 10px; text-decoration:none; text-shadow:#666666 0 -1px 0; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;} .link-button:hover {background-position:0 -25px; color:#333333; text-shadow:#FFFFFF 0 -1px 0;} .link-delete {background:url(/img/icon_delete.jpg) -14px 0 no-repeat; border:0; color:#FFFFFF; display:block; height:15px; line-height:15px; overflow:hidden; text-indent:-9999px; width:14px;} .link-delete:hover {background-position:0 0; color:#FFFFFF;} /*--- 55. Shop ---------------------------------------------------------------------------*/ #lastpage {display:none} p.options input {margin-right:10px} /*--- 56. Contact ---------------------------------------------------------------------------*/ img.captcha {border:1px #999 solid;margin:5px 0;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;padding:5px} label.sec {height:75px} /*--- 57. terms ---------------------------------------------------------------------------*/ #middle.terms ol li {list-style:decimal;margin:20px 0 20px 20px} #middle.terms ol li ul.alpha li {list-style:lower-alpha} /*--- 58. downloads ---------------------------------------------------------------------------*/ #downloads #middle ul li {background:url(/images/pdf.png) no-repeat;padding:15px 0 15px 50px;margin-bottom:10px} /* 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(/img/overlay.png) 0 0 repeat;} #colorbox{} #cboxTopLeft{width:21px; height:21px; background:url(/img/controls.png) -100px 0 no-repeat;} #cboxTopRight{width:21px; height:21px; background:url(/img/controls.png) -129px 0 no-repeat;} #cboxBottomLeft{width:21px; height:21px; background:url(/img/controls.png) -100px -29px no-repeat;} #cboxBottomRight{width:21px; height:21px; background:url(/img/controls.png) -129px -29px no-repeat;} #cboxMiddleLeft{width:21px; background:url(/img/controls.png) left top repeat-y;} #cboxMiddleRight{width:21px; background:url(/img/controls.png) right top repeat-y;} #cboxTopCenter{height:21px; background:url(/img/border.png) 0 0 repeat-x;} #cboxBottomCenter{height:21px; background:url(/img/border.png) 0 -29px repeat-x;} #cboxContent{background:#fff;} #cboxLoadedContent{margin-bottom:28px;} #cboxTitle{position:absolute; bottom:3px; left:0; text-align:center; width:100%; color:#949494;} #cboxCurrent{position:absolute; bottom:3px; left:58px; color:#949494;} #cboxSlideshow{position:absolute; bottom:3px; right:30px; color:#0092ef;} #cboxPrevious{position:absolute; bottom:0; left:0px; background:url(/img/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(/img/controls.png) -50px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;} #cboxNext.hover{background-position:-50px -25px;} #cboxLoadingOverlay{background:url(/img/loading_background.png) center center no-repeat;} #cboxLoadingGraphic{background:url(/img/loading.gif) center center no-repeat;} #cboxClose{position:absolute; bottom:0; right:0; background:url(/img/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 /img are relative to the CSS document. */ .cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/internet_explorer/borderTopLeft.png, sizingMethod='scale');} .cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/internet_explorer/borderTopCenter.png, sizingMethod='scale');} .cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/internet_explorer/borderTopRight.png, sizingMethod='scale');} .cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/internet_explorer/borderBottomLeft.png, sizingMethod='scale');} .cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/internet_explorer/borderBottomCenter.png, sizingMethod='scale');} .cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/internet_explorer/borderBottomRight.png, sizingMethod='scale');} .cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');} .cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/internet_explorer/borderMiddleRight.png, sizingMethod='scale');}