/* 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; height:655px ;} #cboxWrapper {height:680px !important; -moz-border-radius: 5px; -khtml-border-radius: 5px; -opera-border-radius: 5px;-webkit-border-radius: 5px; border-radius: 5px;} #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:655px; 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(http://static.ewg.org/reports/2010/chrome6/images/overlay.png) 0 0 repeat;} #colorbox{height: 655px;} #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(http://static.ewg.org/reports/2010/chrome6/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(http://static.ewg.org/reports/2010/chrome6/images/controls.png) -50px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;} #cboxNext.hover{background-position:-50px -25px;} #cboxLoadingOverlay{background:url(http://static.ewg.org/reports/2010/chrome6/images/loading_background.png) center center no-repeat;} #cboxLoadingGraphic{background:url(http://static.ewg.org/reports/2010/chrome6/images/loading.gif) center center no-repeat;} #cboxClose{position:absolute; top:0; right:0; background:url(http://static.ewg.org/reports/2010/chrome6/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=http://static.ewg.org/reports/2010/chrome6/images/internet_explorer/borderTopLeft.png, sizingMethod='scale');} .cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://static.ewg.org/reports/2010/chrome6/images/internet_explorer/borderTopCenter.png, sizingMethod='scale');} .cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://static.ewg.org/reports/2010/chrome6/images/internet_explorer/borderTopRight.png, sizingMethod='scale');} .cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://static.ewg.org/reports/2010/chrome6/images/internet_explorer/borderBottomLeft.png, sizingMethod='scale');} .cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://static.ewg.org/reports/2010/chrome6/images/internet_explorer/borderBottomCenter.png, sizingMethod='scale');} .cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://static.ewg.org/reports/2010/chrome6/images/internet_explorer/borderBottomRight.png, sizingMethod='scale');} .cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://static.ewg.org/reports/2010/chrome6/images/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');} .cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://static.ewg.org/reports/2010/chrome6/images/internet_explorer/borderMiddleRight.png, sizingMethod='scale');} /* Easy Tooltip */ #easyTooltip{ padding:5px 10px; border:1px solid #195fa4; background:#195fa4 url(http://static.ewg.org/reports/2011/food_price_map/images/bg.gif) repeat-x; width: 300px; color:#fff; z-index: 99999; } /* // Easy Tooltip */ /* navigation */ #mainContentCol h1 {display: none;} #nav { background:#aa2901; border-bottom:1px solid #4D130D; height:156px; width:845px; } #nav ul { width:600px; margin:0 auto; } h2 {color: #882101; font-size: 23px} .h4header {color: #882101; font: normal normal normal 19px Georgia, 'Times New Roman', Times, serif; margin-bottom: 0px; margin-top: 12px; text-align: left !important; text-transform: none !important;} .h4header a {color: #882101} #nav li { float:left; padding-left:1px; width:175px; list-style-type:none; text-align:center; margin-top:0px; } #nav a { color: white; background:url(http://static.ewg.org/reports/2011/food_price_map/images/up_large1.jpg); display:block; padding:17px; position:relative; word-spacing:-2px; font-size:11px; height:122px; text-decoration:none; } #nav a.current { background:url(http://static.ewg.org/reports/2011/food_price_map/images/down_large1.jpg); } #nav img { margin: 3px 0px 0px 2px; padding:4px; display:block; } #nav strong { display:block; font-size:13px; } /* panes */ #panes { border-width:1px 1px 0; width:843px; height:485px; margin-bottom:-20px; padding-bottom:20px; /* must be relative so the individual panes can be absolutely positioned */ position:relative; } /* crossfading effect needs absolute positioning from the elements */ #panes div { display:none; position:absolute; top:20px; left:20px; font-size:13px; color:#444; width:800px; } #panes img { float:left; margin-right:20px; } #panes p.more { color:#000; font-weight:bold; font-size:13px; } #panes h3 { margin:0 0 -5px 0; font-size:22px; font-weight:normal; } .overlay { display:none; width:500px; padding:20px; background-color:#ddd; }