/* Theme Name: O24(tm) Zone Theme URI: http://www.024zone.ca/ Description: O24(tm) Site Theme. Version: 1.0 */ /* = First we reset... ================================================================================================================== */ 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,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}:focus{outline:0;}body{line-height:1;color:black;background:white;}ol,ul{list-style:none;}table{border-collapse:separate;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"""";} /* = Global Parameters ================================================================================================================== */ body, html {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#222;} body {background-image:url(/assets/images/bg_main.jpg); background-repeat:no-repeat; background-position:center 90px; background-color:#FFA300;} body.hm {background-image:url(/assets/images/bg_home.jpg);} /* = Text and Links ===================================================================================================================== */ a {color:#036; text-decoration:underline;} a:hover {color:#FFF;} h1, h2, h3, h4, h5, h6 {font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:normal; color:#FFF;} h1 {font-size:24px; margin:0 0 5px 0; line-height:28px;} .hm h1 {font-size:30px;} .hm h2 {font-size:16px; color:#222;} .hm h2 a {color:#222;} h1 a, h2 a {text-decoration:none; color:#FFF;} h2, h3 {font-size:20px; line-height:26px; margin:0 0 15px 0;} h2 span {color:#C00;} .wd h3 {margin:10px 0;} h4, h5, h6 {font-size:16px; margin:10px 0 0 0;} hr {clear:both; height:0; border:0; border-bottom:1px dotted #FE6000; margin:10px 0 20px 0;} small {font-size:11px;} big {font-size:14px; line-height:22px;} .hm big {font-size:16px; line-height:26px;} p {margin:5px 0 15px 0;} strong {font-weight:bold;} em {font-style:italic; color:#333;} .redtext {color:#C00;} img.alignright, img.alignleft, img.aligncenter {border:4px solid #FFF; outline:1px solid #FE8300;} .noborder {border:none!important; outline:none!important;} .nomargin {margin:0!important;} .margin {margin:0 40px;} .nobullet {list-style:none!important;} .alignright {float:right; margin:5px 0 5px 20px;} .alignleft {float:left; margin:5px 15px 5px 0;} .alignnone {clear:both; margin:5px 0 5px 0;} .aligncenter {clear:both; margin:5px auto;} .cartutils li, .ftr, .social a, .clr-nav, .paytypes dd, .btn, .q, .print, .pdf {background-image:url(/assets/images/sprites.gif); background-repeat:no-repeat;} /* = Buttons ============================================================================================================================ */ .btn {display:block; padding:0; margin:0; font-family:Arial Helvetica, sans-serif; color:#FFF; text-align:center; font-weight:bold; text-decoration:none; border:none!important; background-color:transparent!important;} .btn:hover {color:#FEBF00;} .sm {width:87px; height:16px; line-height:16px; background-position:-240px -70px; font-size:10px;} .md {width:117px; height:26px; line-height:26px; background-position:left -92px; font-size:16px;} .lg {width:148px; height:26px; line-height:26px; background-position:-116px -92px; font-size:16px;} .orange {background-position:-328px -70px;} .red {width:94px; height:18px; line-height:18px; background-position:left -141px;} .blue {width:94px; height:18px; line-height:18px; background:url(/assets/images/btn_blue.gif) no-repeat left top;} .txt {border:none!important; background:transparent!important; padding:0!important; margin:0!important; font-family:Arial; font-weight:bold; color:#622700;} /* = Layout ============================================================================================================================= */ #topheader {position:absolute; width:100%; height:94px; top:0; background:url(/assets/images/bg_topshdw-int.gif) repeat-x left bottom #622700;} .hm #topheader {background:url(/assets/images/bg_topshdw.gif) repeat-x left bottom #622700;} #header {position:relative; width:980px; margin:0 auto;} .logo {display:block;} .hdr {position:absolute; left:-30px; top:0px; z-index:1000;} .cta-us {float:right; width:250px; height:30px; background:url(/assets/images/bg_ctatop.gif) no-repeat left top;} .cta-us a {display:block; line-height:19px; color:#FFF; padding:0 15px 0 0; margin:5px 0 0 0; font-size:11px; background:url(/assets/images/img_us-miniflag.gif) no-repeat left top; text-decoration:none; text-align:right;} .cta-us a:hover {color:#FEBF00;} #breadbar {position:absolute; top:90px; width:980px; height:40px; background:url(/assets/images/bg_bbar-int.gif) no-repeat center top;} .hm #breadbar {background:url(/assets/images/bg_bbar.gif) no-repeat center top;} .breadcrumb {margin:-15px 0 0px 0!important; list-style:none!important; float:left; width:100%; padding:0 0 5px 0; font-size:10px!important; font-weight:bold; color:#6f3700;} .breadcrumb li {float:left; margin:0 3px 0 0;} .breadcrumb a {text-decoration:none;} .cartutils {position:absolute; right:10px; width:400px; height:32px; color:#000; font-size:11px; font-weight:bold;} .cartutils li {float:left; margin:7px 0 0 10px; padding:2px 0 0 18px; height:13px; line-height:13px; } .cartutils a {color:#6f3700; text-decoration:none;} .cartutils a:hover {color:#FFF!important;} .checkout a {color:#239809!important;} .mycart {background-position:-264px -88px;} .pplsecure {margin:2px 0 0 10px!important; padding:0!important;} .cont-number {background:none!important; font-weight:normal; font-size:12px!important; margin-top:5px!important; padding-left:7px!important;} .cont-number strong {font-size:14px!important;} #nav {position:absolute; width:700px; height:25px; right:0px; top:50px; z-index:6000!important;} #nav li {float:left; margin:0 0 0 3px; width:auto;} #nav a {display:block; float:left; color:#FFF; line-height:25px; padding:0 15px; font-size:13px; font-weight:bold; text-decoration:none;} #nav .selected, #nav li:hover, #nav .over {background:url(/assets/images/nav_li.gif) no-repeat right top;} #nav a:hover, #nav .selected a, #nav .selected a:hover {background-image:url(/assets/images/nav_a.gif); background-repeat:no-repeat; background-position:left top; color:#622700;} #nav .selected li:hover,  #nav .selected .over, #nav li:hover li:hover, #nav .over .over {background-color:#FFBF00!important;} #nav li:hover a {color:#6F3700} /* Secondary Nav Styling */ #nav li ul {top:25px; padding:6px 0 0 0; position:absolute; clear:left!important; left:-999em; z-index:9000!important;} .mlast {height:3px!important; border:none!important;} .spacer {height:5px!important; width:268px!important; border-top:1px solid #FF9800;} .prd .mlast {width:270px!important; background:url(/assets/images/nav_250-bt.png) no-repeat left top!important;} .rsc .mlast {width:170px!important; background:url(/assets/images/nav_150-bt.png) no-repeat left top!important;} .prd ul {width:270px; background:url(/assets/images/nav_250-tp.png) no-repeat left 3px;} .rsc ul {width:170px; background:url(/assets/images/nav_150-tp.png) no-repeat left 3px;} #nav li ul li {background-image:none; background-color:#FFBF00!important; margin:0!important; padding:0!important; position:relative; z-index:2000; border-left:1px solid #FF9800; border-right:1px solid #FF9800;} #nav li ul li a {display:block; padding:0 5px 0 13px; height:24px; line-height:24px; font-size:12px; color:#6F3700!important; border-bottom:2px solid #FF9800; background:none!important;} .prd ul li a {width:250px;} #nav .clr-nav {padding-left:25px!important; color:red!important; width:238px!important; background:url(/assets/images/sprites.png) no-repeat 5px -159px!important;} #nav li ul li span {display:block; margin:0!important; line-height:22px; float:left; clear:both; padding:0!important; width:268px!important; font-size:11px!important; border-bottom:1px solid #FF9800;} #nav li ul li span a {padding-left:26px!important; border:0!important; font-size:11px; background:url(/assets/images/nav_arrow.gif) no-repeat 13px 9px!important; width:237px!important;} #nav li ul li span a:hover {background:url(/assets/images/nav_arrow-over.gif) no-repeat 13px 9px #6F3700!important;} .rsc ul li a, .selected .rsc ul li a {width:150px; background:none!important;} #nav li ul li a:hover {color:#FFFB91!important; background:#6F3700!important;} /* THE MAGIC */ #nav li:hover ul, #nav li.over ul {left:auto;} #heading {position:relative; width:100%; float:left; padding:150px 0 0 0; margin:0 0 20px 0; border-bottom:1px solid #FFDA6B; background-image:url(/assets/images/bg_tan.gif); line-height:22px;} #heading hr {border-bottom:1px solid #FE8300; margin:20px 0 0 0!important;} .wrap {position:relative; width:960px; margin:0 auto; font-size:14px; line-height:22px;} .content {float:left; width:960px; margin:0 auto; line-height:22px; padding:20px 0 60px 0;} .wide {width:680px!important;} .right {float:right!important;} .narrow {width:590px!important;} #left, #right {width:48%; /*width:460px;*/ padding:0 0 20px 0;} #left {float:left;} #right {float:right;} .lt, .rt {width:45%; padding:0 0 10px 0;} .lt {float:left; border-right:1px dotted #FE6000;} .rt {float:right;} .wrap ul {list-style:circle; margin:5px 0 10px 20px; font-size:12px;} .wrap ol {list-style:decimal; margin:5px 0 10px 30px; font-size:12px;} .list {width:200px; float:right; margin:0 0 0 20px;} .list dl {float:left; width:200px; margin:0 0 10px 0; clear:both; border-bottom:1px dotted #FE6000;} .list dt, .list .price {width:120px; float:left; font-weight:bold;} .list dt {font-size:11px; line-height:16px;} .list .img {width:80px; height:80px; float:right;} .cartfunctions {float:left; width:310px; margin:0 0 0 0;} .cartfunctions form {float:left; width:310px; margin:0 0 15px 0;} .cartfunctions big {font-size:36px; color:#C00; font-weight:bold;} .cartfunctions select {width:200px; margin:0 0 10px 0;} .productinfo {font-size:12px;} .blockquote {font-size:13px; font-style:italic; padding:20px 0; line-height:22px; text-align:justify;} .q {display:inline-block; position:relative; bottom:-5px; margin-top:-5px; width:22px; height:22px;} .f {background-position:left -118px; margin-right:5px;} .l {background-position:-22px -118px; margin-left:5px;} .blockquote strong {color:#000;} .answers dt {padding:20px 0 5px 0; font-weight:bold; font-size:14px;} .answers dt span {display:block; padding:0; width:20px; margin:0 5px 0 0; float:left;} .answers dd {padding:5px 0 10px 0; margin:0 0 0 25px;} .studies {float:right; width:400px;} .studies dt {font-size:13px;} .studies dd {font-size:12px; margin:0 0 15px 0;} .center {text-align:center;} .sitemap {float:left; width:200px; margin:0 40px 60px 0!important; list-style:none!important;} .sitemap li {font-size:13px; line-height:28px; clear:left; border-bottom:1px solid #FFDA6B;} .sitemap li li {font-size:12px; border:none; line-height:24px;} .sitemap li li li {font-size:11px;} .sitemap a {text-decoration:none; font-weight:bold;} .sitemap dt {border-bottom:1px solid #FFDA6B;} .sitemap dl dt {padding:15px 0 5px 0; border:none!important; font-size:13px;} .sitemap dd {width:230px!important; margin:0 20px 0 0; float:left;} .sitemap dd ul {margin:0!important; list-style:none!important;} .sitemap dd ul li {font-size:11px!important;} .prdmap {float:left; width:480px!important; margin:0 0 60px 0!important;} .pageutils {margin:10px 0!important; list-style:none!important; float:left; width:100%; border-bottom:1px dotted #FE6000;} .pageutils li {float:left; margin:0 20px 10px 0; font-size:11px;} .pageutils a {display:block; float:left; font-weight:bold; line-height:19px; padding:0 0 0 25px;} .print {background-position:-380px -118px;} .pdf {background-position:-56px -118px;} dl .pdf {padding:2px 0 5px 25px; font-size:12px;} #sidebar {width:240px; float:right; padding:17px 0 40px 0;} .wd {width:330px!important;} .ls {float:left!important; padding:0 0 40px 0!important;} .sidenav {float:left; width:240px; margin:20px 0 20px 0;} .sidenav dt {padding:4px 0; color:#FFF; font-size:18px;} .sidenav dd {border-bottom:1px dotted #FE6000; padding:4px 0 4px 2px;} .sidenav ul {margin:5px 0 10px 0; font-size:11px; list-style:none!important;} .sidenav ul li {padding-left:15px; background:url(/assets/images/li_bullet.gif) no-repeat left 6px;} .sidenav dd a {text-decoration:none;} .sidenav .current, .sidenav .current .current {font-weight:bold; background:url(/assets/images/li_arrow.gif) no-repeat left 8px; padding:2px 0 2px 15px;} .sidenav .current ul {margin-left:-15px!important;} .sidenav .current ul li {font-weight:normal;} #sidebar .list {width:240px; float:left; margin:20px 0 0 0;} #sidebar .list dl {width:240px;} #sidebar .list dt, #sidebar .list .price {width:160px;} .vid {width:330px; clear:left; float:left; margin:10px 0 20px 0;} .vid img {float:left; border:4px solid #FFF; outline:1px solid #FE8300;} .vid a:hover img {border-color:#FFE8C7;} .vid dl {width:190px; float:left; margin:5px 0 0 10px;} .vid dt {font-size:14px; font-weight:bold;} .vid dd {font-size:12px;} #hmtp {position:relative; width:100%; float:left; padding:130px 0 0 0; height:431px; border-bottom:1px solid #FF8300;} .home {position:absolute; width:480px; height:431px; left:0px; top:0; padding:20px 0 0 0; z-index:1000; line-height:24px!important; font-size:15px;} .home .btn {margin:10px 0 0 10px!important;} .home .noborder {margin-top:-10px!important;} #rotator {position:absolute; z-index:500; left:466px; top:0; width:502px; height:440px; color:#FFF; line-height:18px;} #rotator .item {position:absolute; right:5px; top:0;} #rotator a {text-decoration:none;} #rotator dl {position:absolute; top:332px; right:0; width:466px;} #rotator dt {position:absolute; top:13px; left:45px; font-size:15px;} #rotator .price {position:absolute; top:0; right:35px; width:97px; text-align:center; font-size:16px;} #rotator .price big {font-size:22px;} #rotator .btn {position:absolute; top:22px; right:150px;} #hmmiddle {position:relative; z-index:0; width:100%; height:143px; float:left; border-top:1px solid #FFDA6B; background-image:url(/assets/images/bg_tan.gif);} #hmmiddle hr {width:100%; border-bottom-color:#FFDA6B; margin:0 0 10px 0!important;} #hmctas {width:960px; margin:0 auto;} .hmcta, #hmctas .prod {position:relative; float:left; width:230px; padding:0 10px 0 0; margin:10px 0 0 0;} .hmcta {padding:0 0 0 0; width:230px;} .hmcta dt {font-size:18px; line-height:20px; color:#FFF; font-weight:bold;} .hmcta dt a {text-decoration:none; color:#FFF;} .hmcta dt a:hover {text-decoration:underline; color:#FFF;} .hmcta dd {font-size:12px;} .prod .price {font-size:14px; color:#C00;} .prod .price span {color:#000; font-weight:normal; font-size:12px;} #hmctas .prod {} #hmctas .prod dt {margin:10px 0 5px 0; font-size:12px!important;} #hmctas .prod dt, #hmctas .prod .price {float:left; width:130px; font-weight:bold; line-height:18px;} #hmctas .prod .btn {margin:5px 0 0 0;} #hmctas .prod .img {position:absolute; right:10px; top:0; width:100px; height:100px;} .scls {position:relative; padding:20px 0 0 0!important; margin:7px 0 0 5px; background:none!important;} .scls img {position:absolute; left:0; top:13px; z-index:9000;} .scls .fb {position:absolute; left:30px; top:20px; width:200px; overflow:hidden; z-index:1000;} #sidebar .scls .fb {left:20px;} .twitter {padding:13px 0 0 81px!important; margin:7px 0 0 5px; width:149px; background:url(/assets/images/bg_twitter.gif) no-repeat left 12px;} .twitter dt a {color:#005CB8;} .twitter dd {line-height:18px;} .clearance {padding:20px 0 0 81px!important; margin:7px 0 0 12px; width:149px; background:url(/assets/images/bg_save.gif) no-repeat left 12px;} .clearance dt {font-weight:normal; color:#000; font-size:14px;} .clearance .btn {margin:5px 0 10px 0;} .freeshipping {padding:20px 0 0 81px!important; margin:7px 0 0 12px; width:149px; background:url(/assets/images/bg_shipping.gif) no-repeat left 12px;} .freeshipping dt {font-weight:normal; color:#000; font-size:14px;} .freeshipping .btn {margin:5px 0 10px 0;} .newprods {position:relative; padding:20px 0 0 93px!important; margin:10px 0 0 0; width:137px; background:url(/assets/images/bg_newprods.gif) no-repeat left 5px;} .newprods dt {font-weight:normal; color:#000; font-size:13px;} .newprods .btn {margin:5px 0 10px 0; font-size:11px;} #hmbtm {position:relative; clear:both; width:100%; height:300px; padding:30px 0 43px 0; background:url(/assets/images/bg_green.jpg) no-repeat center top;} #hmbtm .wrap {font-size:16px; line-height:26px;} #hmbtm a {color:#FFF;} #hmbtm a:hover {color:#EAEAEA;} #footer {position:relative; clear:both; width:100%; height:154px; background:url(/assets/images/bg_ftrshdw.gif) repeat-x left top #622700; color:#FFF; font-weight:bold;} .hm #footer {background-image:none!important;} #footer a {color:#FEBF00; text-decoration:none;} #footer a:hover {color:#FFF; text-decoration:underline;} .ftrlinks {position:relative; width:980px; margin:0 auto; font-size:11px; z-index:1000;} .ftrlinks li {float:left;} .ftr a {position:absolute; width:152px; height:92px; top:-13px; left:-13px; background-position:left top; text-indent:-999em;} .hm .ftr {top:-17px; background-image:url(/assets/images/logo_ftr-ie.gif)!important;} .utl {float:left; padding:31px 0 0 190px;} .pbg {float:right!important; margin:8px 0 0 0;} .ftrbtm {position:relative; clear:both; width:980px; height:49px; margin:0 auto; padding:25px 0 0 0; background:url(/assets/images/bg_ftrbtm.jpg) no-repeat center 10px;} .ftrbtm dd, .ftrbtm dt {float:left;} .social {float:left;} .social dt {font-size:12px; padding:13px 0 0 0;} .social a {display:block; float:left; width:90px; height:35px; margin:0 10px 0 0; text-indent:-999em;} .twt {background-position:-240px top;} .fcb {background-position:-330px top;} .mys {background-position:-240px -35px;} .ytb {background-position:-330px -35px;} .paytypes {position:absolute; right:0; width:280px;} .paytypes dt {height:0; width:0; text-indent:-999em;} .paytypes dd {width:44px; height:30px; text-indent:-999em; margin-left:10px;} .visa {background-position:-152px top;} .mstc {background-position:-196px top;} .amex {background-position:-152px -30px;} .disc {background-position:-196px -30px;} .bank {background-position:-152px -60px;} /* = Tables ===================================================================================== */ table {margin:10px 0; width:100%; font-size:14px;} th, td {text-align:center;} th {border-bottom:2px solid #FE6000; font-weight:bold; color:#000;} td {border-bottom:1px dotted #FE6000; height:40px; line-height:80px;} .study {font-size:12px; background-color:#F9F9F9; border:2px solid #FE6000;} .study th {font-weight:bold; color:#000;} .study th, .study td {text-align:left; line-height:normal; padding:5px 10px;} .study .tborder {background-color:#FE6000; padding:0!important; height:3px;} .study .tborder-left {border-left:2px solid #FE6000;} /* = Forms ====================================================================================== */ form ol {margin:0!important; list-style:none!important;} form p {margin:0!important;} form label {font-size:12px; font-weight:bold; display:block; margin:10px 0 0 0;} form label em {color:#C00;} form input, form textarea {border:2px solid #FE9800;} #contactform {float:left; width:100%; margin:0 0 30px 0;} #contactform input, #contactform textarea {width:97%; padding:5px; font-family:Arial, Helvetica, sans-serif; color:#222; background-color:#F1F1F1; font-size:12px;} #contactform select {width:100%; padding:2px;} #contactform textarea {height:120px;} #contactform input.btn {border:none!important; background-color:transparent!important; width:148px!important; color:#FFF!important; font-size:14px!important; line-height:18px!important;} .error {float:left; width:98%; border:1px solid #F00; background-color:#FFDCDC; padding:10px; margin:5px 0; color:#F00;} .subscribe {width:440px; padding:10px; margin:0 0 30px 0; float:left; background-color:#FFBF00;} .r, .l {width:200px;} .l {float:left;} .r {float:right; padding:20px 0 0 0;} .subscribe label {margin:0!important; width:200px;} .subscribe input {margin:0 0 5px 0!important; width:188px; padding:5px; font-family:Arial, Helvetica, sans-serif; color:#222; background-color:#F1F1F1; font-size:12px;} .subscribe input.btn {border:none!important; background-color:transparent!important; width:117px!important; color:#FFF!important; font-size:12px!important; line-height:16px!important;} /* = Tooltips =================================================================================== */ .tipsy {padding:5px; font-size:11px; font-weight:bold; line-height:16px; background-repeat:no-repeat;} .tipsy-inner {padding:4px 5px; background-color:#622700; color:#FFF; max-width:180px; text-align:center;} .tipsy-north {background-image:url(/assets/images/tipsy/tipsy-north.gif); background-position:top center;} .tipsy-south {background-image:url(/assets/images/tipsy/tipsy-south.gif); background-position:bottom center;} .tipsy-east {background-image:url(/assets/images/tipsy/tipsy-east.gif); background-position:right center;} .tipsy-west {background-image:url(/assets/images/tipsy/tipsy-west.gif); background-position:left center;} /* 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;} /* ColorBox 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:#fff;} #colorBox{} #cboxTopLeft{width:25px; height:25px; background:url(/assets/images/colorbox/border1.png) 0 0 no-repeat;} #cboxTopCenter{height:25px; background:url(/assets/images/colorbox/border1.png) 0 -50px repeat-x;} #cboxTopRight{width:25px; height:25px; background:url(/assets/images/colorbox/border1.png) -25px 0 no-repeat;} #cboxBottomLeft{width:25px; height:25px; background:url(/assets/images/colorbox/border1.png) 0 -25px no-repeat;} #cboxBottomCenter{height:25px; background:url(/assets/images/colorbox/border1.png) 0 -75px repeat-x;} #cboxBottomRight{width:25px; height:25px; background:url(/assets/images/colorbox/border1.png) -25px -25px no-repeat;} #cboxMiddleLeft{width:25px; background:url(/assets/images/colorbox/border2.png) 0 0 repeat-y;} #cboxMiddleRight{width:25px; background:url(/assets/images/colorbox/border2.png) -25px 0 repeat-y;} #cboxContent{background:#fff;} #cboxLoadedContent{margin-bottom:20px;} #cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#999;} #cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;} #cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;} #cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;} #cboxNext{position:absolute; bottom:0px; left:63px; color:#444;} #cboxLoadingOverlay{background:url(/assets/images/colorbox/loading.gif) 5px 5px no-repeat #fff;} #cboxClose{position:absolute; bottom:0; right:0; display:block; color:#444;} /* 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=/assets/images/colorbox/internet_explorer/borderTopLeft.png, sizingMethod='scale');} .cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/assets/images/colorbox/internet_explorer/borderTopCenter.png, sizingMethod='scale');} .cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/assets/images/colorbox/internet_explorer/borderTopRight.png, sizingMethod='scale');} .cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/assets/images/colorbox/internet_explorer/borderBottomLeft.png, sizingMethod='scale');} .cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/assets/images/colorbox/internet_explorer/borderBottomCenter.png, sizingMethod='scale');} .cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/assets/images/colorbox/internet_explorer/borderBottomRight.png, sizingMethod='scale');} .cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/assets/images/colorbox/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');} .cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/assets/images/colorbox/internet_explorer/borderMiddleRight.png, sizingMethod='scale');}