/* ---------------------------------------------------------- Clinton Bush Haiti Fund CSS Managed by: Blue State Digital Last Update: June 2011 TABLE OF CONTENT 01 - GLOBAL BROWSER RESET 02 - COMMON STYLE 03 - LAYOUT 04 - HOMEPAGE 05 - SUBPAGES 06 - FRAMEWORK 07 - UTILITY 08 - COLORBOX COLOR GUIDE (Main Site Colors and their Hex Codes) ---------------------------------------------------------- */ /* 01 =GLOBAL BROWSER RESET ---------------------------------------------------------- */ /* YUI Reset version: 2.7.0 */ html { color: #000; background: #FFF; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; } address,caption,cite,code,dfn,em,strong,th,var,optgroup { font-style: inherit; font-weight: inherit; } del,ins { text-decoration: none; } li { list-style: none; } caption, th { text-align: left; } h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; } q:before, q:after { content: ''; } abbr,acronym { border: 0; font-variant: normal; } sup { vertical-align: baseline; } sub { vertical-align: baseline; } /*because legend doesn't inherit in IE */ legend { color: #000; } input,button,textarea,select,optgroup,option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; } /*@purpose To enable resizing for IE */ /*@branch For IE6-Win, IE7-Win */ input,button,textarea,select { *font-size: 100%; } /* 02 =COMMON STYLE ---------------------------------------------------------- */ html { background: transparent; } body { font-size: 62.5%; font-family: Helvetica, Arial, sans-serif; background: #123605 url(/page/-/cbhf-new/site-images/site-bg-new.jpg) no-repeat center top; } .base { } .base h1 { font-size: 3.0em; margin: .5em 0 0 0; font-weight: bold; color: #666666; } .base h2 { font-size: 2.2em; margin: 1em 0 .5em 0; font-weight: bold; color: #242626; } .base h3 { font-size: 1.7em; margin: 1em 0 .5em 0; font-weight: bold; color: #242626;} .base h4 { font-size: 1.4em; margin: 1em 0 .5em 0; font-weight: bold; } .base p { font-size: 1.3em; margin: 1em 0; color: #242626; line-height: 1.4em; } a { text-decoration: none; color: #335791; font-weight: bold; } a:hover { color: #0044b1; } blockquote { background: #c9d7e6; padding: 1.5em 1.5em .5em; font-size: 1.3em; margin: 2em; font-style: italic;} blockquote p { font-size: 1.0em;} .base ul, .base ol { font-size: 1.3em; padding-left: 1.5em; margin: 1em 0; } .base ul { } .base ol { } .base ul li { list-style-type: disc; } .base ol li { list-style-type: decimal; } .base ul li, .base ol li { font-size: 1.0em; margin: 0 0 .3em 0; color: #242626; /*list-style-position: inside;*/ } .base li ol, .base li ul { font-size: 1.0em; margin: .5em; } .base li ol { } .base li ul { } .dotted { border-bottom: 1px dotted #c9c8c3; color: #626160; } .dotted span { background: #fbfaf4; position: relative; top: 5px; padding-right: 12px;} /* 03 =LAYOUT ---------------------------------------------------------- */ #wrapper { width: 980px; background: #fff; margin: 20px auto 0; } .cssgradients #wrapper{ background: -webkit-gradient( linear, left top, left bottom, from(rgba(255,255,255,0.0)), to(rgba(240,239,233,1.0)), color-stop(0.1,rgba(255,255,255,0.0)), color-stop(0.3,rgba(255,255,255,.9))); background: -moz-linear-gradient(top, rgba(255,255,255,0.0), rgba(255,255,255,0.0) 10%, rgba(255,255,255,0.9) 30%, rgba(240,239,233,1.0)); } #header, #content { background-color: #fbfaf4; } #header { width: 960px; margin: 0 10px; padding: 30px 0 0 0; position: relative; height: 120px;} #content { display: block; width: 960px; margin: 0 10px; clear: both; } .full-width #content { width: 940px; padding: 1px 10px 10px 10px; } #main-content { width: 720px; float: left;} .interior #main-content{ width: 660px; margin: 10px 0 20px; padding: 0 19px 0 20px; border-right: 1px solid #dadada;} #main-content.no-sidebar { width: 920px; border: none; } /* =================== */ /* = Header Contents = */ /* =================== */ #logo { background: transparent url(/page/-/cbhf-new/site-images/cbhf-logo.png) left top no-repeat; text-indent: -9999em; margin: 0 0 0 20px; height: 38px; width:457px; padding: 0;} #logo a { display: block; } #tagline { margin: 5px 0 0 20px; font-size: 1.4em; color: #335791; margin-bottom: 20px; } #language { position: absolute; top: 30px; right: 20px; margin: 0; padding: 0; } #language li { float: left; text-transform: uppercase; font-size: .8em; padding: 0; list-style-type: none; } #language li a { border-left: 1px solid #666666; color: #666666; line-height: 1.0em; padding: 0 5px; display: block; } #language li.first-lang a { border-left: none; } #quick-signup { position: absolute; right: 10px; top: 60px; } #quick-signup label { display: none; } #quick-signup input { font-size: 1.4em; margin-right: 3px; padding: 3px; float: left; } #quick-signup input.submit { margin: 0; } #quick-signup #quick-email { width: 140px; } #quick-signup #quick-zip { width: 80px; } #quick-email, #quick-zip { margin-top: 5px; } /* =========== */ /* = Sidebar = */ /* =========== */ #sidebar { float: right; margin: 20px 15px 20px 0; width: 217px;} #sidebar .action-button { background: transparent url(/page/-/cbhf-new/site-images/cbhf-sprite.png) no-repeat; height: 51px; margin: 0 0 2px 0; padding: 0; width: 217px; line-height: 51px; text-align: center; font-size: 1.7em;} #sidebar .action-button a { display: block; } #sidebar .action-button a{ color: #fff; } #sidebar #action-donate { background-position: 0 -67px } #sidebar #action-tell { background-position: 0 -120px; } #sidebar #action-join { background-position: 0 -173px; } .creole #sidebar #action-tell, .creole #sidebar #action-join { line-height: 1; } .creole #sidebar #action-tell a, .creole #sidebar #action-join a { height: 47px; padding-top: 4px; } #large-action { margin-top: 20px; } #large-action img { display: block; } #sb-kids { background: transparent url(/page/-/cbhf-new/site-images/kids-helping-kids.png) left top no-repeat; margin: 0; font-size: 1.5em; text-align: center; height: 62px; } .creole #sb-kids, .french #sb-kids { font-size: 1.3em; } #sb-kids a { color: white; margin: 0; display: block; padding: 12px 0 14px; } .creole #sb-kids a { padding: 8px 10px; } .kids-sidebar .kids-sub-header { font-size: 14px; margin: .7em 0;} /* ========== */ /* = Footer = */ /* ========== */ #footer { background: transparent url(/page/-/cbhf-new/site-images/footer-bg.jpg) left top no-repeat; } #footer #flag { margin: 10px; float: left; } /* ========================== */ /* = Global and Utility Nav = */ /* ========================== */ #global-nav { font-size: 1.6em; background: #460202; display: block; width: 960px; margin: 0 auto; padding: 0;} .french #global-nav {font-size: 1.4em;} #global-nav li { float: left; display: block; margin-bottom: 0; } #global-nav li a{ color: white; display: block; line-height: 45px; padding: 0 43px; font-weight: normal;} .french #global-nav li a { padding: 0 10px; } #global-nav li a:hover, #global-nav #gn-home a:hover{ background-color: #830008; } #global-nav li.active a { color: #8a8a8a; } #global-nav #gn-home { text-indent: -9999em; padding-left: 0px; height: 45px; width: 46px; } #global-nav #gn-home a { background: transparent url(/page/-/cbhf-new/site-images/home-icon.png) center 13px no-repeat; display: block; position: relative; } #utility-nav { float: left; margin: 120px 0 0 20px; padding-left: 0;} #utility-nav li { list-style-type: none; } #utility-nav li.un-sub { display: block; float: left; text-transform: uppercase; font-weight: bold; } #utility-nav a { color: #d6c5b3; } #utility-nav li ul { margin: 15px 0 0 0; padding-left: 0; } #utility-nav li ul li { font-weight: normal; margin: 0 0 2px 0; padding: 0; list-style-position: outside;} #utility-nav li ul li a { color: #8a7a6c; font-weight: normal; } #utility-nav #un-about { width: 105px; border-right:1px solid black} #utility-nav #un-get-involved, #utility-nav #un-give { border-right: 1px solid #000; margin-left: 20px; height: 100%;} #utility-nav #un-get-involved ul, #utility-nav #un-give ul { margin-left: 0; } #utility-nav #un-get-involved { width: 90px; } #utility-nav #un-give { width: 70px; } #utility-nav .un-contact { margin-left: 20px; } #utility-nav li ul { text-transform: none; } #utility-nav li * li { float: none; } /*IE 6 Fix*/ .french #utility-nav ul li, .creole #utility-nav ul li { font-size: .9em; } .french #utility-nav ul, .creole #utility-nav ul { margin-top: 8px; } #gn-projects {margin-left:28px} /* =========================== */ /* = Social Networking Icons = */ /* =========================== */ #utility-nav .un-contact ul li, #kids-soc-net li { float: left; text-indent: -9999em; margin: 0 1px; list-style-type: none; } #utility-nav .un-contact ul li a, #kids-soc-net li a { display: block; position: relative; height: 100%;} .un-fb, .un-tw, .un-yt, .un-li { background: url(/page/-/cbhf-new/site-images/cbhf-sprite.png) no-repeat; height: 26px; width: 27px; } .un-fb { background-position: -91px top; } .un-tw { background-position: -91px -27px; } .un-yt { background-position: -118px top; } .un-li { background-position: -118px -27px; } #utility-nav .un-contact ul li#contact-more { text-indent: 0; float: none; clear: left; padding-top: 10px;} #kids-soc-net { position: absolute; bottom: 30px; left: 95px;} #kids-soc-net li { margin-right: 13px; } /* 04 =HOMEPAGE ---------------------------------------------------------- */ .homepage #main-content h3{ font-size: 1.6em; margin-top: -15px; color: #666666; background: #fbfaf4; float: left; padding: 0 .5em 0 0; z-index: 20; } #rotator-wrapper { background: transparent; width: 940px; height: 280px; border-left: 10px solid #460202; border-right: 10px solid #460202; border-bottom: 10px solid #460202; position: relative; clear: both; overflow: hidden; z-index: 9;} #rotator-wrapper-inner { width: 1400px; position: relative; top: 0; left: -235px; } #rotator-wrapper-inner .jcarousel-clip { width: 1400px;} .js #rotator-wrapper-inner.loading { visibility: hidden !important;} #rot-next, #rot-prev { position: absolute; top: 100px; color: white; text-indent: -9999em; height: 63px; width: 30px; z-index: 120; cursor: pointer;} #rot-next { background: url(/page/-/cbhf-new/site-images/cbhf-sprite.png) -32px top no-repeat; right: 0; } #rot-prev { background: url(/page/-/cbhf-new/site-images/cbhf-sprite.png) left top no-repeat; left: 0; } #rotator { position: relative; width: 940px; margin: 0 10px; height: 280px; overflow: hidden; background: #460202; padding-bottom: 10px;} #rotator li { float: left; margin: 0 1px; width: 465px; height: 280px; position: relative; overflow: hidden;} #rotator li p { position: absolute; left: 10px; bottom: 10px; width: 415px; padding: 25px 15px; margin: 0; font-weight: bold; background: rgba(38,0,0,0.7); z-index: 100; color: white; font-size: 1.4em; display: none;} #rotator li p.active-no-js, #rotator li p.active { display: block; } .no-rgba #rotator li p { background: url(/page/-/cbhf-new/site-images/bg-trans-57-red.png) left top repeat; } #rotator li p a { color: #fff; } .hp-section { float: left; padding: 0; margin: 30px 20px 0; border-top: 1px dotted #dadada; } #hp-video, #hp-news, #hp-stat { width: 320px; } #hp-news { margin-top: 30px; margin-bottom: 20px; } #hp-news h4 { margin-bottom: 5px; } #hp-news p { margin: 0 0 10px} #hp-news p.read-more { margin-top: 0; } #hp-news p.read-more a { font-weight: normal; } #hp-video { margin-bottom: 15px; padding-bottom: 15px; } #mission { color: #460202; font-size: 2.4em; font-weight: bold; line-height: 1.3em;} #video-container { margin-top: 15px; } #hp-stat .stat { color: #335791; font-weight: bold; font-size: 40px; margin-top: .2em; clear: left;} #hp-stat p { margin-bottom: 0; } /* ================================ */ /* = Front Page and Sidebar Touts = */ /* ================================ */ #hp-touts { clear: left; margin: 0 20px 20px 20px; width: 680px; padding: 0; position: relative;} #hp-touts #next { background: transparent url(/page/-/cbhf-new/site-images/program-hero-next.png) left top no-repeat; position: absolute; top: 12px; left: 649px; } #hp-touts #prev { background: transparent url(/page/-/cbhf-new/site-images/program-hero-prev.png) left top no-repeat; position: absolute; top: 12px; left: 7px; } #next, #prev { text-indent: -9999em; width: 24px; height: 147px; cursor: pointer; } #hp-touts #tout-wrapper { margin: 15px 0; padding: 10px 20px; height: 147px; overflow: hidden; background: url(/page/-/cbhf-new/site-images/projects_hero_bg.png) top left no-repeat; } #hp-touts #tout-wrapper .jcarousel-clip { width: 621px; overflow: hidden; margin: 0 auto; } #hp-touts ul { margin: 0 auto; padding: 0; width: 621px; } #hp-touts ul li { list-style-type: none; float: left; position: relative; overflow: hidden; margin: 0 1px; font-size: .9em; width: 205px; height: 147px; } #hp-touts ul li img { display: block; } #hp-touts ul li p { position: absolute; top: 107px; text-align: center; height: 100%; width: 100%; background: url(/page/-/cbhf-new/site-images/brown-bg-85.png); color: white; font-weight: bold; line-height: 40px; margin: 0; } .rgba #hp-touts ul li p { background: rgba(55,37,20,0.85); } #hp-touts ul li p a, .sidebar-tout li p a { color: #fff; display: block; height: 100%;} #hp-touts ul li p span{ color: #ab9b88; line-height: normal; display: block; margin: 10 0 0 0; padding: 0 10px; font-size: 0.8em; } #hp-touts ul li:hover p, #sidebar .sidebar-tout li:hover p { top: 0; } #sidebar .sidebar-tout { margin: 15px 0; padding: 0; } #sidebar .sidebar-tout li { list-style-type: none; float: left; position: relative; overflow: hidden; margin: 0 1px; font-size: .9em; } #sidebar .sidebar-tout li img { display: block; } #sidebar .sidebar-tout li p { position: absolute; top: 115px; text-align: center; width: 100%;background: url(/page/-/cbhf-new/site-images/brown-bg-85.png) left top repeat; height: 100%; color: white; font-weight: bold; line-height: 40px; margin: 0; } .rgba #sidebar .sidebar-tout li p { background: rgba(55,37,20,0.85); } #sidebar .sidebar-tout li p span { color: #ab9b88; line-height: normal; display: block; margin: 10px 0 0 0; padding: 0 10px; font-size: 0.9em; } .csstransitions #hp-touts ul li p, .csstransitions #hp-touts ul li:hover p, .csstransitions #sidebar .sidebar-tout li p, .csstransitions #sidebar .sidebar-tout li:hover p { -webkit-transition: top 0.5s ease-out; -moz-transition: top 0.5s ease-out; } /* 05 =SUBPAGES ---------------------------------------------------------- */ .base h1.page-title { margin-top: 0; background-color: #690203; color: #fff; font-size: 1.8em; height: 50px; line-height: 50px; padding-left: 20px; } .base .page-summary/*, #main-content > p:first-child*/ { font-size: 1.8em; line-height: 1.3em; border-bottom: 1px dotted #c9c8c3; padding-bottom: 1.2em; margin-bottom: 1em; clear: both;} .page-summary p { font-size: 1.0em; margin-bottom: 1em; } #programs .page-summary { font-size: 1.3em; padding: 1em; background: #c7c4ac; border: none; border: 1px solid #99936f; } /*.base p + ul { margin-top: -1.5em; }*/ /*About Pages*/ #about-subnav { width: 100%; border-bottom: 1px dotted #dadada; overflow: auto; padding: 7px 0 10px 0; margin: 0 0 25px 0;} #about-subnav li { list-style-type: none; list-style-position: outside; float: left; padding-right: 17px;} #about-subnav li a:hover { text-decoration: underline; } #about-subnav li.current { font-weight: bold; color: #012257; } /*Projects Pages*/ .thumb-wrapper{ width: 160px; overflow: auto; float: left; margin: 10px 20px 15px 0; padding: 10px; } .thumb-wrapper img { margin: 5px auto 0; display: block; } .entry p.has-thumb { margin-left: 200px; } #projects-facts { width: 160px; float: left; padding: 24px; background: #f6f5ef; border: 1px solid #e5d4df; margin: 20px 15px 20px 0; min-height: 217px;} #projects-facts h3 { font-size: 1.6em; margin-top: -15px; color: #666666; float: left; padding: 0 1em 0 0; } #projects-facts img { display: block; margin: 3px auto; clear: left;} #projects-facts p { margin: .5em 0; } #photos-wrap { float: right; width: 432px; height: 275px; margin: 20px 0; background: url(/page/-/cbhf-new/site-images/project-ss-bg-new.png) left top no-repeat; position: relative;} #projects-photos { margin: 0 auto; padding: 0; width: 310px; height: 275px; overflow: hidden; position: relative; background: transparent; } #projects-photos li { background: transparent !important; list-style-type: none; display: block; width: 310px; height: 245px; overflow: hidden; position: relative; margin-top: 20px;} #projects-photos li img { border: 10px solid #ffffff; display: block; } #projects-photos li p { font-size: 1.0em; margin: .5em 0 0 0; color: #ffffff; } #project-next, #project-prev { position: absolute; text-indent: -9999em; width: 0; height: 0; margin: 0 auto; cursor: pointer;} #project-next { border-bottom: 12px solid transparent; border-left: 12px solid #ffffff; border-top: 12px solid transparent; top: 117px; left: 395px; } #project-prev { border-bottom: 12px solid transparent; border-right: 12px solid #ffffff; border-top: 12px solid transparent; top: 117px; left: 27px; } #video-wrap { margin-top: 20px; } .program-photo { display: block; margin: 0 auto; } #programs-content { clear: both; } ol.program-summary-categories li { font-size: .75em; } #testimonials-wrap { float: left; width: 200px; margin: 0 20px 0 0; position: relative; } #testimonials-wrap h3 { font-size: 2.0em; margin: 0; } #projects-testimonials { width: 155px; margin: 15px auto; height: 198px; overflow: hidden; color: #550009; } #projects-testimonials .cite { color: #8b8b8a; font-style: italic; font-size: .8em; } #projects-testimonials li { list-style-type: none; font-size: 1.4em; } #quote-prev, #quote-next { position: absolute; top: 100px; text-indent: -9999em; height: 0; width: 0; } #quote-prev { left: -12px; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 15px solid #3a5490; } #quote-next { right: -5px; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #3a5490;} /*Videos & Photos */ #videos #main-content > h1:first-child { margin: .5em 0; } #video-wrapper { margin: 20px 20px 20px 0; float: left; } #video-thumbs { background: #d5d6d0; clear: both; padding: 10px 14px 0; overflow: hidden; } #video-thumbs .jcarousel-clip { width: 632px; overflow: hidden; } #video-pager { text-align: right; font-size: 1.1em; margin: 10px 0; text-transform: uppercase;} #video-pager a { padding: 0 10px; cursor: pointer; } .vt-wrap { float: left; text-align:center; margin: 5px; overflow: hidden; } #video-thumbs .vt-wrap { margin: 0 auto; padding: 0; } #video-thumbs .vt-wrap li { width: 210px; list-style-type: none; float: left; } .vt-wrap p { font-size: 1.0em; } .photoset { position: relative; } .photoset .slides { width: 500px; height: 425px; margin: 0 auto; overflow: hidden; } .photoset .photo { width: 500px; } .photoset .photo img { display: block; margin-left: auto; margin-right: auto; } .photoset .cycle-prev, .photoset .cycle-next { position: absolute; top: 195px; text-indent: -9999em; width: 0; height: 0; margin: 0 auto; cursor: pointer; border-bottom: 12px solid transparent; border-top: 12px solid transparent; } .photoset .cycle-prev { border-right: 12px solid #460202; left: 30px;} .photoset .cycle-next { border-left: 12px solid #460202; right: 30px;} /*News*/ .entry { clear: left; margin: 10px 0 20px 0; border-top: 1px dotted #d6d5d3;} .entry h2 { margin-top: 1em; } .entry.first { margin-top: 10px; border-top: none; } .entry.first h2 { margin-top: 0; padding-top: 0; } .entry img.thumb { float: left; margin: 0 20px 15px 0; padding: 10px; border: 1px solid #dadada;} .entry .post-meta { color: #666666; text-transform: none; font-size: 1.1em; font-weight: bold;} .entry .social { margin-top: 1.5em; } /*Kids*/ .kids-landing #main-content { padding-left: 8px; } #rotator-wrapper-kids { margin-top: 5px;background: url(/page/-/cbhf-new/site-images/kids-hero-comp-bg.jpg) left top no-repeat; display: block; height: 340px; position: relative; padding: 105px 0 0 40px;} #rotator-kids-title { width: 425px; height: 35px; position: absolute; bottom: 373px; left: 135px;} #rotator-wrapper-kids .kids-title, #rotator-wrapper-kids .kids-subtitle { position: absolute; bottom: 0; margin: 0; padding: 0; line-height: 1.0em} #kids-landing .kids-title { font-family: AmityJackRegular; font-size: 4.4em; color: #ec731d; } #kids-landing .kids-subtitle { font-family: HandwrittenCrystal; color: #1d5005; font-weight: normal; letter-spacing: 1px; text-transform: uppercase; font-size: 2.5em; left: 195px; } #rotator-inner-kids { width: 210px; padding: 5px; } #rotator-inner-kids h3 { color: #fff; font-size: 2.2em;} #rotator-inner-kids p { font-weight: bold; font-size: 1.5em; } #rotator-kids { position: absolute; width: 413px; height: 275px; overflow: hidden; margin: 0; padding: 0; top: 97px; left: 264px;} #rotator-kids li { list-style-type: none; margin: 0; padding: 0; width: 413px; } #rotator-kids li img { display: block; } #rotator-kids li p { position: absolute; top: 215px; background: #265811; width: 100%; text-indent: 10px; font-size: 1.2em; height: 53px; line-height: 53px; margin: 0; } .rgba #rotator-kids li p { background: rgba(38,88,17,0.9); } .no-rgba #rotator-kids li p { } #rotator-kids li p a { color: white; } #rotator-kids-pager { position: absolute; top: 320px; right: 65px; z-index: 101; color: white; } #rotator-kids-pager a{ color: #fff; margin-right: 8px; float: left; font-size: 2.0em; font-weight: bold; line-height: 2.0em;} #rotator-kids-pager a.activeSlide { color: #d5ac4d; } #kids-resource-wrapper { padding: 0 20px; margin-top: 20px; background: url(/page/-/cbhf-new/site-images/kids-resources-border.png) center 28px no-repeat; } .kids.landing h2 { font-size: 2.2em; font-family: AmityJackRegular; font-weight: normal; color: #eb4e1b; margin-top: 0; margin-bottom: 20px; } .kids-resources { width: 320px; float: left; padding: 0 20px 0 0; background: transparent; } .kids-resources h3 { font-family: AmityJackRegular; font-weight: normal; font-size: 2em; margin: 0; text-transform: uppercase; background: url(/page/-/cbhf-new/site-images/cbhf-sprite.png) -146px top no-repeat; height: 55px; line-height: 50px; padding-left: 20px; color: #265811;} .no-fontface .kids-resources h3 { font-size: 2.6em; font-weight: bold; } .kids-resources p { font-weight: bold; margin-left: 12px; margin-right: 10px; } .kids-resources p a { color: #f14d01; } .kids-resources p a[href$=".pdf"]:before{ content: " " url(/page/-/cbhf-new/site-images/pdf-icon.gif); float: left; margin: -4px 5px 0 0; } /*Kids Projects*/ .kids #photos-wrap { float: left; } #kids-np-wrap { float: right; width: 200px; margin-top: 65px;} #kids-np-wrap p { background: #6c0001; text-align: center; padding: 10px;} #kids-np-wrap p a { color: white; padding: 1em 0; display: block;} /* ------------ */ /* Kids Letters */ /* ------------ */ #letter-wrapper { background: transparent; width: 660px; height: 512px; overflow: auto; position: relative; } #letter-wrapper .cycle-prev, #letter-wrapper .cycle-next { position: absolute; top: 235px; text-indent: -9999em; width: 0; height: 0; margin: 0 auto; cursor: pointer; border-bottom: 12px solid transparent; border-top: 12px solid transparent; } #letter-wrapper .cycle-prev { border-right: 12px solid #460202; left: 0px;} #letter-wrapper .cycle-next { border-left: 12px solid #460202; right: 0px;} #letter-wrapper .cycle-prev:focus, #letter-wrapper .cycle-next:focus {outline: none !important; } .letter-slide { background: url(/page/-/cbhf-new/site-images/kids-letters-bg.jpg) left top no-repeat; width: 510px; height: 360px; padding: 45px; margin: 20px auto 20px; } .letter-slide h2 { text-align: center; font-size: 2.8em; color: #de651e; margin: 20px 0;} .letter-slide img { -webkit-box-shadow: 0 0 25px #aaa; -moz-box-shadow: 0 0 35px #ccc; } #letter-wrapper .text-left img { float: right; -webkit-transform: rotate(3deg); } .letter-slide p { font-size: 1.3em; color: #482f19; font-weight: bold; width: 230px; margin: 2.5em 1.5em; } #letter-wrapper .text-left p { float: left; } #letter-wrapper .text-right p { float: right; } #letter-wrapper .text-right img { float: left; -webkit-transform: rotate(-3deg)} #letter-wrapper .letter-answer p { width: auto; } #kids-letters-slide-1 { background: url(/page/-/cbhf-new/site-images/kids-letters-start.jpg) left top no-repeat;} #kids-letters-slide-1 h2 { color: #fff; } #kids-letters-18 { position: relative; background: url(/page/-/cbhf-new/site-images/kids-letter-end.jpg) left top no-repeat;} #kids-letters-18 h2 { color: #27457b; position: absolute; top: 75px; left: 99px;} #kids-letters-18 p { position: absolute; left: 100px; top: 155px; font-size: 1.2em; font-weight: normal; margin: 0; padding: 0;} #kids-letters-18 h4 { position: absolute; top: 120px; left: 100px; color: #482f19;} #kids-letters-18 h3 { position: absolute; top: 270px; left: 250px; width: 250px; text-align: center; color: #505050; font-size: 1.6em; } /* ============= */ /* = Kids Quiz = */ /* ============= */ #quiz .cycle-next, #quiz .cycle-prev { position: absolute; top: 235px; text-indent: -9999em; width: 0; height: 0; margin: 0 auto; cursor: pointer; border-bottom: 12px solid transparent; border-top: 12px solid transparent; } #quiz .cycle-prev { border-right: 12px solid #460202; left: 0px;} #quiz .cycle-next { border-left: 12px solid #460202; right: 0px;} #quiz-wrapper { margin: 0 auto; width: 600px; position: relative; padding: 0 30px;} #quiz-wrapper .quiz-slide { width: 600px; height: 450px; } #quiz-wrapper .question { background: transparent url(/page/-/cbhf-new/kids-quiz/kids-quiz-bg.jpg) left top no-repeat; display: table-cell; vertical-align: middle;} #quiz-wrapper .question h2 { padding: 0 50px 0; margin: 0; text-align: center; font-size: 2.8em; line-height: 1.5em; color: #27457b; } /* ================ */ /* = Kids Sidebar = */ /* ================ */ .kids #sidebar #action-donate { background-position: -221px -67px } .kids #sidebar #action-tell { background-position: -221px -120px; } .kids #sidebar #action-join { background-position: -221px -173px; } .kids #sidebar h2 { margin: 40px 0 0px; } .kids #sidebar .sidebar-tout li { margin-bottom: 20px; } .kids #sidebar .sidebar-tout li img { display: block; } .kids #sidebar .sidebar-tout li p { font-family: HandwrittenCrystal; font-weight: normal; font-size: 1.8em; line-height: 1.8em; } .kids #sidebar .sidebar-tout li p a { color: #fff; font-weight: normal; } .kids #sidebar .sidebar-tout li p span { font-family: Helvetica, Arial, sans-serif; font-size: .7em; font-weight: bold;} /*Get Involved*/ .gi-action-row { width: 630px; margin: 15px 0; padding-bottom: 15px; border-bottom: solid 6px #40669F; } .gi-action-row img { float: left; } .gi-action-row .right { float: right; width: 500px; } .gi-action-row .right h2 { margin-top: 5px; } .gi-action-row .right p { margin: .5em 0; } p.gi-header { font-size: 1.6em; } /* Staff */ .staff-entry { margin-bottom: 15px; } .staff-entry .floatl { margin-top: 15px; } .staff-entry .right { float: right; width: 480px; } /* 06 =FRAMEWORK ---------------------------------------------------------- */ #framework #main-content { font-size: 100%; } #framework .bsd-contribForm-wrap #contribution { font-size: 135%; } #framework #main-content p { margin-bottom: 1em; } #framework #main-content label, #framework #main-content input, .full-width #signup { font-size: 1.4em; } #framework #main-content input { margin: .3em 0 1em 0; padding: 2px;} .error, .signuperror { color: red; } .error { display: block; } #framework td.field, #unsub_form { font-size: 1.3em; } /* SKIN OVERRIDES Last Update: AUGUST 18, 2010 NOTE: These definitions assume that framework elements have been wrapped in a div with the id "framework". For the YUI styles to work the body id should be "bsd" */ /*=TYPOGRAPHY ---------------------------------------------------------- */ #framework #SKIN h1, /*If you change the font-soze for h1 or it's top margin or padding properties be sure to change the top margin property for "#SKIN #account_actions" such that the base line for the elements within line up with h1 in control_set div*/ #framework #SKIN .basic .main #eventdetail .title, /*Event Title*/ #framework #profiledetail #sectionheader, #framework #stdheader #title /*Page title on Outreach pages*/ { font-size: 24px; font-weight: bold; line-height: 30px; margin-bottom: 6px; } /*if using cufon or typekit for headers be sure to target the following header ids/classes #titletext - header for Outeach pages .headertitle ? header for Comunity pages */ #framework #contribution .contribheader, /*Section headers on Contribute form*/ #framework #SKIN h2, #framework #sectionheader, #framework #SKIN .widget_header, #framework #SKIN .widget_title, #framework #community .communitypostinlist .title, /*Blog post title on community web page*/ #framework #community .header, /*Community page headers */ #framework #community .communitypostfull .title, /*Community title for full blog post*/ #framework #community .journaltitle, #framework #community .journalarchive .journalarchivetitle, #framework a#host-button, #framework #loginform .logintitle, #framework #signupform .signuptitle, #framework #outreach_content #loginform .logintitle, #framework #outreach_content #signupform .signuptitle, #framework #manageform .managetitle, #framework #forgotpw .header { font-size: 18px; font-weight: bold; line-height: 24px; margin-bottom: 6px; } #framework #SKIN h3, #framework #SKIN .basic .main .typedescheader, #framework #community .postlist table.head .text, /*Table heading on Community Dashboard page*/ #framework #community .subheader, /*Subheader on the Community Blog Entry Preview page*/ #framework #community .profileteaser .title, /* Profile teaser title on Blog home page*/ #framework #odgettingstarted .odsechead, #framework #odprogress .odsechead, #framework #odyourpage .odsechead, #framework #odstats .odsechead, #framework #odaddress .odsechead, #framework #odgroup .odsechead, #framework #outreach_content .omhead { font-size: 14px; font-weight: bold; line-height: 20px; margin-bottom: 6px; } #framework #SKIN h4, #framework #SKIN h5 { font-size: 12px; font-weight: bold; line-height: 18px; } /*HEADERS WITH BOTTOM BORDERS*/ #framework #contribution .contribheader, /*Section headers on Contribute form*/ #framework #sectionheader, #framework .sectionheader, #framework #SKIN .header, #framework #SKIN .basic .main .typedescheader, #framework #community .header /*Community page headers */ #framework #community .communitypostfull .title, /*Community title for full blog post*/ #framework #community .journaltitle, #framework #community .journalarchive .journalarchivetitle, #framework #stdheader, /*Header for Outreach pages*/ #framework #community .profileteaser .title, /* Profile teaser title on Blog home page*/ #framework #odgettingstarted .odsechead, #framework #odprogress .odsechead, #framework #odyourpage .odsechead, #framework #odstats .odsechead, #framework #odaddress .odsechead, #framework #odgroup .odsechead, #framework #outreach_content .omhead, #framework #manageform .managetitle, #framework #forgotpw .header { border-bottom: 1px solid #ddd; padding-bottom: 3px; } /*WIDGET HEADERS*/ #framework #SKIN .widget_header { background: #eee; border-bottom: 1px solid #ddd; margin-bottom: 6px; padding: 5px 10px; position: relative; } /*SUB-HEADERS*/ #framework #SKIN .widget_subheader, /*Widget Subheader on the dashboard*/ #framework #community .subheader /*Subheader on the Community Blog Entry Preview page*/ { background: #F2F7F7; border-bottom: 1px solid #ddd; padding: 5px 10px; } /*=FORM ELEMENTS ---------------------------------------------------------- */ #framework #content .checkbox, #framework #content .radiobutton, #framework #content .label, #framework #content .text { margin: 0 .5em 0 0; } /*=BUTTONS ---------------------------------------------------------- */ /*INPUT BUTTONS*/ #framework input[type=button], #framework input[type=submit], #framework .submit, #framework #invitationpage #submit_button, #framework #date-filter, #framework .loginbutton input, #framework .signupbutton input, #framework #community input[type=submit], #framework .utils_search button { cursor: pointer; } /*Targets most Buttons*/ /*INPUT HOVER STATES Note this will only work for modern browsers*/ #framework input[type=button]:hover, #framework input[type=submit]:hover, #framework input:hover.submit, #framework #invitationpage input:hover#submit_button, #framework button:hover#date-filter, #framework .loginbutton input:hover, #framework .signupbutton input:hover, #framework #community input[type=submit]:hover, #framework .utils_search button:hover { } /*RSVP and DETAILS BUTTONS*/ #framework #event_results .event_footer .links { float: left; } #framework #event_results .event_footer .links .detail_button, #framework #event_results .event_footer .links .rsvp_button { float: right; } #framework #event_results .event_footer .links .detail_button a, #framework #event_results .event_footer .links .rsvp_button a { display: block; margin-left: 10px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding: 2px 10px; } #framework #event_results .event_footer .links .detail_button a { background: #eee; border: 1px solid #ccc; padding: 2px 10px 1px; } #framework #event_results .event_footer .links .rsvp_button a { background: #555; color: #fff; padding: 3px 10px 2px; } #framework #event_results .event_footer .links .detail_button a:hover, #framework #event_results .event_footer .links .rsvp_button a:hover { background: #33; border-color: #333; color: #eee; } /*Hover state for RSVP and Details buttons*/ /*CONTACT IMPORTER BUTTOM FOR SHARE AND INVITE FORMS*/ #framework #contact_importer_button { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: 12px !important; } /*You can change the background color to match your other input button styles*/ /*SEARCH BUTTON*/ #framework .search_form button { } /*=TEXT INPUT FIELDS AND TEXTAREAS ---------------------------------------------------------- */ #framework input.text, #framework textarea { } /*Use this definition to target most of the text input fields*/ #framework #content textarea { padding: 5px; } /*=TABS NOTE If the background color for your page is not white you will have to update the bottom border color for the active tabs for Framework, Events and Friends i.e. #framework #SKIN #blue_hat .blue_hat_active { background: none; border-bottom: 1px solid #fff; font-weight: bold; } #framework ul#event_order li.active { background: none; border-bottom: 1px solid #fff; font-weight: bold; } #framework #SKIN #friends_tabs ul li.active_tab { background: none; border: 1px solid #ddd; border-bottom: 1px solid #fff; } ---------------------------------------------------------- */ /*FRAMEWORK TABS*/ #framework #SKIN #blue_hat { background: none; border-bottom: 1px solid #ddd; height: 43px; } #framework #SKIN #blue_hat ul { display: inline; float: right; height: auto; margin: 0 5px; padding: 18px 0 0 0; } #framework #SKIN #blue_hat li { background: #eee; border: 1px solid #ddd; border-top-left-radius: 3px; display: inline; float: right; padding: 5px 10px 4px; text-decoration: none; } #framework #SKIN #blue_hat li a { color: #888; text-decoration: none; } #framework #SKIN #blue_hat .blue_hat_active { background: none; border-bottom: 1px solid #fff; font-weight: bold; } #framework #SKIN #blue_hat .blue_hat_active a { color: #555; } #framework #SKIN #blue_hat li a:hover { background: none; color: #555; } /*EVENT TABS*/ #framework ul#event_order { border-bottom: 1px solid #ddd; clear: both; float: left; list-style-type: none; margin: 0 0 10px 0; top: 0; width: 100%; } #framework ul#event_order li { background: #eee; border: 1px solid #ddd; color: #888; display: inline; float: left; margin: 0 0 -1px 5px; padding: 5px 10px 4px; text-decoration: none; } #framework ul#event_order li a { color: #888; } #framework ul#event_order a:hover { color: #555; } #framework ul#event_order li.active { background: none; border-bottom: 1px solid #fff; font-weight: bold; } #framework ul#event_order li.active a { color: #555; } /*WIDGET TABS*/ /*Note that the active tab background color should be the same as the .widget_header background color under the WIDGET HEADERS category above*/ #framework #SKIN .widget_tabs { margin: 0; padding: 0; } #framework #SKIN .widget_tabs li { border-top-left-radius: 3px; float: left; list-style: none; padding: 5px 10px 4px 10px; margin: 0 5px 0 0; list-style-type: none; } #framework #SKIN .widget_tabs li.active_tab { background: #eee; font-weight: bold; } #framework #SKIN .widget_tabs li.inactive_tab { background: #ddd; } /*FRIENDS TABS*/ #framework #SKIN #friends_tabs { border-bottom: 1px solid #ddd; margin: 18px 0 6px 0; } #framework #SKIN #friends_tabs ul { margin: 0; padding: 5px 0 0 0; list-style: none; } #framework #SKIN #friends_tabs li { border-top-left-radius: 3px; border-top-right-radius: 3px; display: inline; float: left; margin: 0 0 -1px 5px; list-style-type: none; padding: 5px 10px 4px; } #framework #SKIN #friends_tabs ul li.active_tab { background: none; border: 1px solid #ddd; border-bottom: 1px solid #fff; } #framework #SKIN #friends_tabs ul li.active_tab a { color: #555; font-weight: bold; } #framework #SKIN #friends_tabs ul li.inactive_tab { background: #eee; border: 1px solid #ddd; } /*=SPEAKOUT TABS*/ #framework #speakout #tabs { margin-top: 18px; } #framework #speakout #nav-tabs { border-bottom: 1px solid #ddd; clear: both; float: left; list-style-type: none; margin: 0 0 18px 0; top: 0; width: 100%; } #framework #speakout #nav-tabs li { background: #eee; border: 1px solid #ddd; color: #888; display: inline; float: left; margin: 0 5px -1px 0; padding: 5px 10px 4px; text-decoration: none; } #framework #speakout #nav-tabs li.tab-on { background: none; border-bottom: 1px solid #fff; color: #555; font-weight: bold; } /*YUI POP OVER This controls the style of the pop over opened after clicking the contact importer button As noted above, in order for this to work the body id should be "bsd" ---------------------------------------------------------- */ #bsd .yui-panel { border: 1px solid #ccc; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #bsd .yui-panel-container.shadow .underlay { display: none; } #bsd .yui-panel .container-close { right: 10px; } /*This targets the close button in the popover. You can replace the default image with one of your choosing. Image dimensions should be 12px square*/ #bsd .yui-panel .hd { background: #eee; color: #333; border: none; border-bottom: 1px solid #ddd; font-size: 18px; font-weight: bold; line-height: 24px; margin-bottom: 6px; padding: 10px; } #bsd .yui-panel .bd { font-size: 12px; line-height: 18px; padding: 6px; } #bsd #contact_importer_wrapper { margin: 0; } #bsd #contact_importer_wrapper #contact_importer_error { margin: 18px 0 0 0; } #bsd #contact_importer_dialog .button-group button { background: #eee; border: 1px solid #ddd; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; cursor: pointer; padding: 3px 10px; } /*Contact Listings*/ #bsd #contact_importer_wrapper #results_table_header { background: #eee; } #bsd #contact_importer_wrapper #results_table_outer { border: 1px solid #ddd; } /*=LAYOUT ---------------------------------------------------------- */ /*SOCIAL NET WIDGET COLUMNS*/ #framework #SKIN #widget_group_1 { float: left; width: 49%; } /*Left column*/ #framework #SKIN #widget_group_2 { float: right; width: 49%; } /*Right column*/ /*SPEAKOUT*/ #framework #speakout table { clear: left; margin: 0 20px 18px 0; } /*=PLEASE DO NOT DELETE OR MODIFY ANY OF THE STYLES BELOW ---------------------------------------------------------- */ #framework #SKIN #widget_directory_search_groups_by_keyword { float: none !important; } /* 07 =UTILITY ---------------------------------------------------------- */ .stretcher { clear: both; height: 1px; visibility: hidden; } .nomargin { margin-bottom: 0px; } .floatl {float: left; margin: 0; padding: 0 10px 10px 0;} .floatr {float: right; margin: 0; padding: 0 0 10px 10px;} .floatl-nomargin { float: left; margin: 0; padding: 0;} .floatr-nomargin { float: right; margin: 0; padding: 0;} .clear {clear:both; height:0; margin:0; font-size: 1px; line-height: 0;} .required { color: red; } .upper { text-transform: uppercase; } .one_col { width: 938px; margin: 24px auto 24px; } /* single col, no left, right */ .content_right { width: 413px; height: auto; float: right; margin: 0 0 24px;} .content_left {width:521px; float: left; margin: 12px 0 24px 16px; } .full-width .content_left, .full-width .content_right { width: 97%; } .bar { height: 12px; background: url(/page/-/cbhf-new/site-images//page/-/images/bg_grad_hbar.png) #D4D4D4 repeat-x bottom left; margin: 0; } .vspacer { display: block; height: 8px; } .hidden { display: none; } i, em { font-style: italic; } b, strong { font-weight: bold; } sup, sub { height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative;} sup { bottom: 1ex; } sub { top: .5ex; } .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix {display:inline-block;} .clearfix {display:block;} .clear-left { clear: left; } /* Generated by Font Squirrel (http://www.fontsquirrel.com) on January 3, 2011 */ @font-face { font-family: 'AmityJackRegular'; src: url('/page/-/cbhf-new/fonts/amity_jack-webfont.eot'); src: local('?'), url('/page/-/cbhf-new/fonts/amity_jack-webfont.woff') format('woff'), url('/page/-/cbhf-new/fonts/amity_jack-webfont.ttf') format('truetype'), url('/page/-/cbhf-new/fonts/amity_jack-webfont.svg#webfontGOcKB46v') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'HandwrittenCrystal'; src: url('/page/-/cbhf-new/fonts/handwritten_crystal_v2-webfont.eot'); src: local('?'), url('/page/-/cbhf-new/fonts/handwritten_crystal_v2-webfont.woff') format('woff'), url('/page/-/cbhf-new/fonts/handwritten_crystal_v2-webfont.ttf') format('truetype'), url('/page/-/cbhf-new/fonts/handwritten_crystal_v2-webfont.svg#webfontxAqxWamq') format('svg'); font-weight: normal; font-style: normal; } /* 08 =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;} /* 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(/page/-/images/colorbox/border1.png) 0 0 no-repeat;} #cboxTopCenter{height:25px; background:url(/page/-/images/colorbox/border1.png) 0 -50px repeat-x;} #cboxTopRight{width:25px; height:25px; background:url(/page/-/images/colorbox/border1.png) -25px 0 no-repeat;} #cboxBottomLeft{width:25px; height:25px; background:url(/page/-/images/colorbox/border1.png) 0 -25px no-repeat;} #cboxBottomCenter{height:25px; background:url(/page/-/images/colorbox/border1.png) 0 -75px repeat-x;} #cboxBottomRight{width:25px; height:25px; background:url(/page/-/images/colorbox/border1.png) -25px -25px no-repeat;} #cboxMiddleLeft{width:25px; background:url(/page/-/images/colorbox/border2.png) 0 0 repeat-y;} #cboxMiddleRight{width:25px; background:url(/page/-/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(/page/-/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=/page/-/images/colorbox/internet_explorer/borderTopLeft.png, sizingMethod='scale');} .cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/page/-/images/colorbox/internet_explorer/borderTopCenter.png, sizingMethod='scale');} .cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/page/-/images/colorbox/internet_explorer/borderTopRight.png, sizingMethod='scale');} .cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/page/-/images/colorbox/internet_explorer/borderBottomLeft.png, sizingMethod='scale');} .cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/page/-/images/colorbox/internet_explorer/borderBottomCenter.png, sizingMethod='scale');} .cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/page/-/images/colorbox/internet_explorer/borderBottomRight.png, sizingMethod='scale');} .cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/page/-/images/colorbox/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');} .cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/page/-/images/colorbox/internet_explorer/borderMiddleRight.png, sizingMethod='scale');}