/* Mobile first Vision Australia WebSilk green #0d6826 || test: ffd300 purple #55009d || test: 55009d */ html { font-size:0.875em; /* set font base here @ 14/16 */} html.lt-ie9 { font-size: 0.895em; } #VA { background: #e3e3e3; color: #252525; } #VA, #VA > body { min-width: 100%;} #VA body { font: 100%/120% sans-serif; /*keeps font at a base of 16px for any adjustments */ } /* !removed #VA body.home { overflow-x: hidden; }*/ /* class added via jQ onClick of nav expander ctrl */ .scrolledRemoved { overflow: hidden!important; } /* icon loading placeholder all icons will use the background call for the sprite, use the triangle as a placeholder until said sprite is built jQ adds a span, some icons are in the markupd */ .phoneNumber a:before, .btn:before, .sfsearchSubmit, #hd .globalNav .rmRootGroup .rmFirst a.rmRootLink span, .auxNav li a:before, .breadcrumb .separator, .donateInfo h2:before, .sfforumThreadsList .forumThreadImage, .accordion .js-toggle:before, .accordion .js-toggle:after, .productsListWrap .productIcon, .minorNav li, .socMediaShareItem .email a:before, .sfforumThreadPostUser .sfforumUserAvatarWrp, .giantErrorIcon, .rss:before, .ie7Before, .socMedText:before, a.image:before, .storeSupportWrap h3:before, .acceptIcons .icon, .sfcartSummaryWrp .sflnkToggleCart:before, .removeWrap a:before, .checkoutProgress li .step, .speaker a .linkText:before, .breadcrumb li + li:before { content: ""!important; background: url("../../global/va-icons.png") no-repeat; } .phoneNumber a:before, .btn:before, .auxNav li a:before, .donateInfo h2:before, .accordion .js-toggle:before, .accordion .js-toggle:after, .productsListWrap .productIcon, .socMediaShareItem .email a:before, .rss:before, .ie7Before, .socMedText:before, .dynamicBtnHolder .image:before, .storeSupportWrap h3:before, .acceptIcons .icon, .sfcartSummaryWrp .sflnkToggleCart:before, .removeWrap a:before, .speaker a .linkText:before, .breadcrumb li + li:before { display: block; position: absolute; } .dynamicBtnHolder a.icon, .auxNav li a, .donateInfo h2, .phoneNumber a, .removeWrap a { position: relative; padding-left: 30px; } /* iconography!!!! link is wrapped in '.dynamicBtnHolder' for styling, also has class of what icon it should use (if any) link has btn type ({colour}, grad-{colour}) link will have '.icon' if it needs refernce the icon spritesheet var1 = purple var2 = green var3 = dark grey var4 = grey grad var5 = felix link (library landing) var6 = section nav guy */ .triangle .btn:before { width: 0; height: 0; left: 9px; top: 10px; border-left: 5px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .triangle .btn:hover:before, .triangle .btn:focus:before, .triangle .btn:active:before { border-left-color: #55009d; } /* need #bd to override lt-ie9 setting back to inline*/ #bd .dynamicBtnHolder .image { height:43px; padding:4px 80px 4px 10px; display:block; } .dynamicBtnHolder .image { border: none!important; } .dynamicBtnHolder .image:before, .dynamicBtnHolder .image .ie7Before { width:71px; height:52px; top:0; right:0; } /*#region icons ========================================= */ .radioSmall .icon:before, .radioSmall .icon .ie7Before { width: 17px; height: 15px; background-position: -320px 0; left: 7px; top: 4px; } .radio .icon:before, .radio .icon .ie7Before { width: 26px; height: 23px; background-position: -256px 0; left: 14px; top: 10px; } .radio .icon:hover:before, .radio .icon:focus:before { background-position: -384px -128px; } .donate .icon:before, .donate .icon .ie7Before { width: 15px; height: 11px; background-position: -192px 0; left: 7px; top: 5px; } .makeDonate .icon:before, .makeDonate .icon .ie7Before { width: 17px; height: 20px; background-position: -128px -64px; left: 7px; top: 5px; } .makeDonate .icon:hover:before, .makeDonate .icon:focus:before { background-position: -384px -64px; } .regDonate .icon:before, .regDonate .icon .ie7Before { width: 19px; height: 21px; background-position: -192px -64px; left: 7px; top: 5px; } .regDonate .icon:hover:before, .regDonate .icon:focus:before { background-position: -448px -64px; } .signup .icon:before, .signup .icon .ie7Before { width: 23px; height: 23px; background-position: -256px -64px; left: 7px; top: 5px; } .signup .icon:hover:before, .signup .icon:focus:before { background-position: -448px -128px; } .donateInfo h2:before, .donateInfo h2 .ie7Before { width: 23px; height: 20px; background-position: -128px 0; left: 7px; top: 7px; } /* Changed this for web-access :p */ /* #hd .phoneNumber a:before, #hd .phoneNumber a .ie7Before { width: 19px; height: 22px; background-position: 0 -448px; left: 6px; top: 6px; } */ #hd .phoneNumber a .hc-img { width: 19px; height: 22px; left: 6px; top: 6px; position:absolute; display:block; } ._Telerik_IE9 #hd .phoneNumber a .hc-img { position: relative; margin-left: -30px; margin-top: -25px; margin-bottom: -12px; } #hd .phoneNumber a .hc-img img { top: -448px; left: 0; } .socMedia a { width: 21px; height: 21px; display: block; } /* icons as imgs for high-contrast wrap in a element then offset the */ #VA .hc-img { position: relative; display: block; overflow: hidden; } .hc-img img { position: absolute; display:block; -webkit-user-drag: none; -moz-user-drag:none; } .socMedia .hc-img { width: 21px; height: 21px; } .socMedia .fb img { top:-576px; left: 0; } .socMedia .tw img { top:-576px; left: -64px; } .socMedia .yt img { top:-576px; left: -128px; } .socMedia .linkd img { top:-576px; left: -192px; } .socMedia .pint img { top:-576px; left: -256px; } /* new 'light a candle' call to action button */ .lightACandle .icon:before, .lightACandle .icon .ie7Before { top: -8px; left: 0; width: 61px; height: 64px; background-position: -128px -704px; } /*added radio here now*/ .auxNav .radio a:before, .auxNav .radio a .ie7Before { top: 8px; left: 8px; background-position: -192px -704px; } .auxNav .heart a:before, .auxNav .heart a .ie7Before { background-position: 0 0; left: 10px; top: 6px; } .auxNav .dollar a:before, .auxNav .dollar a .ie7Before { background-position: 0 -64px; left: 13px; top: 6px; } .auxNav .basket a:before, .auxNav .basket a .ie7Before { background-position: 0 -128px; left: 10px; top: 6px; } .auxNav .globe a:before, .auxNav .globe a .ie7Before { background-position: 0 -192px; left: 10px; top: 6px; } .auxNav .paw a:before, .auxNav .paw a .ie7Before { background-position: 0 -256px; left: 10px; top: 6px; } .auxNav .people a:before, .auxNav .people a .ie7Before { background-position: 0 -320px; left: 10px; top: 6px; } .auxNav .tick a:before, .auxNav .tick a .ie7Before { background-position: 0 -384px; left: 10px; top: 6px; } .auxNav .radio a:hover:before, .auxNav .radio a:hover .ie7Before, .auxNav .radio a:focus:before, .auxNav .radio a:focus .ie7Before { background-position: -192px -731px; } .auxNav .heart a:hover:before, .auxNav .heart a:focus:before, .auxNav .heart a:hover .ie7Before, .auxNav .heart a:focus .ie7Before { background-position: -64px 0; } .auxNav .dollar a:hover:before, .auxNav .dollar a:focus:before, .auxNav .dollar a:hover .ie7Before, .auxNav .dollar a:focus .ie7Before { background-position: -64px -64px; } .auxNav .basket a:hover:before, .auxNav .basket a:focus:before, .auxNav .basket a:hover .ie7Before, .auxNav .basket a:focus .ie7Before { background-position: -64px -128px; } .auxNav .globe a:hover:before, .auxNav .globe a:focus:before, .auxNav .globe a:hover .ie7Before, .auxNav .globe a:focus .ie7Before { background-position: -64px -192px; } .auxNav .paw a:hover:before, .auxNav .paw a:focus:before, .auxNav .paw a:hover .ie7Before, .auxNav .paw a:focus .ie7Before { background-position: -64px -256px; } .auxNav .people a:hover:before, .auxNav .people a:focus:before, .auxNav .people a:hover .ie7Before, .auxNav .people a:focus .ie7Before { background-position: -64px -320px; } .auxNav .tick a:hover:before, .auxNav .tick a:focus:before, .auxNav .tick a:hover .ie7Before, .auxNav .tick a:focus .ie7Before { background-position: -64px -384px; } .socMedText:before, .socMedText .ie7Before { background-position:-256px -512px; top:5px; left:0; width:53px; height:43px; } .donateFacebookWrap .socMedText:before, .donateFacebookWrap .socMedText .ie7Before { background-position:-192px -512px; top:0; left:0; width:52px; height:53px; } .giantErrorIcon { background-position: -834px -852px; width: 190px; height: 175px; } /* quicklinks w imgs rather than icons */ .eyeCheckup .image:before, .eyeCheckup .image .ie7Before { background-position:-512px 0;} .eyeCheckup2 .image:before, .eyeCheckup2 .image .ie7Before { background-position:-512px -64px; } .womanEyesLookingLeft .image:before, .womanEyesLookingLeft .image .ie7Before { background-position:-512px -128px; } .smilingWomanAndYoungGirl .image:before, .smilingWomanAndYoungGirl .image .ie7Before { background-position:-512px -192px; } .headphones .image:before, .headphones .image .ie7Before { background-position:-512px -256px; } .womanOnPhone .image:before, .womanOnPhone .image .ie7Before { background-position:-512px -320px; } .tabletComputerWithGraph .image:before, .tabletComputerWithGraph .image .ie7Before { background-position:-512px -384px; } .businessmenShakingHands .image:before, .businessmenShakingHands .image .ie7Before { background-position:-512px -448px; } .libraryShelves .image:before, .libraryShelves .image .ie7Before { background-position:-512px -512px; } .peopleReadingLibraryBooks .image:before, .peopleReadingLibraryBooks .image .ie7Before { background-position:-512px -576px; } .readingNewspaper .image:before, .readingNewspaper .image .ie7Before { background-position:-512px -640px; } .fingersReadingBraille .image:before, .fingersReadingBraille .image .ie7Before { background-position:-512px -704px; } .volunteeringHandshake .image:before, .volunteeringHandshake .image .ie7Before { background-position:-512px -768px; } .smilingBusinessMan .image:before,.smilingBusinessMan .image .ie7Before { background-position:-512px -832px; } .questionMarks .image:before, .questionMarks .image .ie7Before { background-position:-512px -896px; } .storeSupportWrap .info1 h3:before, .storeSupportWrap .info1 h3 .ie7Before { background-position: -64px -448px; width: 36px; height: 46px; left: 5px; top: 30px; } .storeSupportWrap .info2 h3:before, .storeSupportWrap .info2 h3 .ie7Before { background-position: -192px -192px; width: 48px; height: 46px; left: 5px; top: 30px; } /* black sheep, assss hole */ .acceptIcons .icon { position: static; width: 46px; height: 27px; margin-top: 2px; } .acceptIcons .visa { background-position: -384px -256px; } .acceptIcons .master { background-position: -448px -256px; } .contactDetailsWrap li .hc-img { width: 53px; height: 53px; } .fb-large .hc-img img { top: -512px; left: -192px; } .tw-large .hc-img img { top: -512px; left: -256px; } .yt-large .hc-img img { top: -512px; left: -320px; } .yourDonationsHelpUsRotator .yourDonationsPrevSlide .hc-img img { top: 0; left: -64px; } .yourDonationsHelpUsRotator .yourDonationsNextSlide .hc-img img { top: -32px; left: -64px; } .yourDonationsHelpUsRotator a:active img { left: -92px; } .sfcartSummaryWrp .sflnkToggleCart:before, .sfcartSummaryWrp .sflnkToggleCart .ie7Before { width: 32px; height:30px; top: 15px; left: 15px; background-position: -128px -192px; } .sfcartSummaryWrp .sflnkToggleCart .ie7Before { margin-left: 0; } .sfcartSummaryWrp .sflnkToggleCart:hover:before, .sfcartSummaryWrp .sflnkToggleCart:focus:before, .sfcartSummaryWrp .sflnkToggleCart:hover .ie7Before { background-position: -256px -128px; } .checkoutAuxInfo .versign { width: 72px; height: 37px; } .checkoutAuxInfo .versign img { top: -256px; left: -128px; } .checkoutAuxInfo .securepay { width: 86px; height: 33px; } .checkoutAuxInfo .securepay img { top: -256px; left: -256px; } .removeWrap a:before { top: 1px; left: -20px; background-position: -125px -317px; width: 16px; height: 16px; background-color:#999; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; } .removeWrap a:hover:before, .removeWrap a:focus:before { background-color: #333; } .checkoutProgress li .step { display: block; width: 43px; height: 43px; background-position: -192px -320px; } .checkoutProgress li.current .step { background-position: -256px -320px; } .checkoutProgress li.current ~ li .step { background-position: -320px -320px; } .speaker a .linkText:before { background-position: 0 -638px; top: -2px; left: -15px; width: 11px; height: 19px; } /* breadcrumb separator!! */ .breadcrumb li + li:before { height: 5px; width: 7px; background-position: -128px -128px; top: 5px; left: 7px; } /*#endregion */ #hd .radioSmall a:hover:before, #hd .radioSmall a:focus:before, #hd .radioSmall a:hover .ie7Before, #hd .radioSmall a:focus .ie7Before { background-position: -320px -128px; } #hd .donate a:hover:before, #hd .donate a:focus:before, #hd .donate a:hover .ie7Before, #hd .donate a:focus .ie7Before { background-position: -192px -128px; } .email .icon:before, .email .icon .ie7Before { background-position: -320px -64px!important; width: 17px; height: 11px; left: 4px; top: 4px; } .rss:before, .rss .ie7Before { width: 21px; height: 21px; background-position: -320px -576px; left: 0; top: 4px; } .productsListWrap .productIcon { width: 43px; height: 40px; background-position: -256px -192px; left: -8px; top: -10px; padding: 16px 0 0 9px; color: #fff; text-transform: uppercase; -webkit-transform: rotate(-22.5deg); -moz-transform: rotate(-22.5deg); -ms-transform: rotate(-22.5deg); -o-transform: rotate(-22.5deg); transform: rotate(-22.5deg); } .productsListWrap .pawSmall { width: 22px; height: 23px; background-position: -320px -192px; } .productsListWrap .paw { width: 48px; height: 51px; background-position: -380px -192px; } /*============================ oO Css ============================*/ /*screen reader hide text*/ .screenReaderHide, .home h1, .sfVatIncluded, .headingInternalSlider, .landing-alternate .divSectionNav h2, .checkoutOnePagerWrap .expiry div label { position: absolute; left: -100%; text-indent: -500px; overflow: hidden; font-size:0; line-height:0; padding:0!important; } .socMedia a { text-indent: -500px; overflow: hidden; } /* hoverflow on s w a span to hide, can still be seen if :focus can break images w.in an a though, todo */ a:focus { overflow: hidden; } #VA a:focus .screenReaderHide { outline: none; } /* remove stuff we cannot */ body.checkout .sfcheckoutTitle, body.checkout .sfcheckoutTabstrip, .hiddenDiv { display: none; } /* init page widths */ #hd { background: #fbfbfb; } #hd, #bd, #ft, .pgWidth { margin: 0 auto; } #hd .pgWidth { max-width: 990px; } #bd .pgWidth { max-width: 990px; } #ft .pgWidth { max-width: 960px; } /* give some gutter for smaller, remove on > 1024 */ #VA .pgWidth { padding: 0 10px; } /*clearfix*/ .sectionSummary:after, .productsListWrap:after, .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } /*floated li's */ #VA .minorNav ul { overflow: auto; float: none;} #VA .minorNav li { float: left; } #hd, #bd, #ft, #hd .phoneNumber, #hd .globalNav, .sfsearchBox, .sectionSummary + .socMedia, .footerContent { clear: both; } .btn, .sfcommentsSubmitBtn, .sfforumReplyBtn, .sfSubmitBtnWrp .sfSubmitBtn, .sfCancel, .sfQuote, article.storeProductDescription .sfAddToCartBtn, .sfforumPostTitle .sfforumPostTitleEdit, .sfforumPostTitle .sfforumPostTitleSaveEdit, .sfforumPostTitle .sfforumPostTitleSaveEdit + span, .caseStudyFilterWrap input, .sfcheckoutMulitPage .sfcheckoutBtnsWrp input, .sfcartSummaryWrp .sfcartSummaryBtnsWrp *, .sfFormsEditor .sfFormSubmit input { display: inline-block; padding: 8px 10px; /*text-align: center;*/ position: relative; font: 0.9285714285714286em/1em sans-serif; /*13/14*/ font-weight: bold; cursor:pointer; } #VA .btn, .sfcommentsSubmitBtn, .sfSubmitBtnWrp a, .sfregisterLnkWrp input, .sfforumReplyBtn, .sfSubmitBtnWrp .sfSubmitBtn, .sfQuote, article.storeProductDescription .sfAddToCartBtn, .sfforumPostTitle .sfforumPostTitleEdit, .sfforumPostTitle .sfforumPostTitleSaveEdit, .sfforumPostTitle .sfforumPostTitleSaveEdit + span, .caseStudyFilterWrap input, .sfcheckoutMulitPage .sfcheckoutBtnsWrp input, .sfcartSummaryWrp .sfcartSummaryBtnsWrp *, .sfFormsEditor .sfFormSubmit input { color: #fff; } .triangle .btn { padding-left: 20px; } .icon { } .radioSmall {} .radioSmall .icon {} .var1 .btn, .sfcommentsSubmitBtn, .sfSubmitBtnWrp a, .sfregisterLnkWrp input, .sfforumReplyBtn, .sfSubmitBtnWrp .sfSubmitBtn, .sfQuote, .sfforumPostTitle .sfforumPostTitleEdit, .sfforumPostTitle .sfforumPostTitleSaveEdit + span, article.storeProductDescription .sfAddToCartBtn, .caseStudyFilterWrap input, .sfcheckoutMulitPage .sfcheckoutBtnsWrp input, .sfcartSummaryWrp .sfcartSummaryBtnsWrp a, .sfshoppingCartBtnsWrp input, .purchaseLotteryWrap .btn, .purchaseMonthWrap .btn, .sfcheckoutMulitPage .sfSubmitBtn input, .sfFormsEditor .sfFormSubmit input { border:1px solid #784A9d; background: #582e8f; background: -webkit-linear-gradient(top, #55009d 0%, #400077 100%); background: -moz-linear-gradient(top, #55009d 0%, #400077 100%); background: -ms-linear-gradient(top, #55009d 0%, #400077 100%); background: -o-linear-gradient(top, #55009d 0%, #400077 100%); background: linear-gradient(top, #55009d 0%, #400077 100%); } .var2 .btn, .donateInfo h2,.event h2, .sfforumNewThreadWrp .sfSubmitBtn, .sfforumPostReplyContainer .sfSubmitBtn, .yourDonationsHelpUsRotator h2,.sfcartSummaryWrp .sfcartSummaryBtnsWrp input, .headerType2 h2 { background: #0d6826; background: -webkit-linear-gradient(top, #0d6826 0%, #0a541f 100%); background: -moz-linear-gradient(top, #0d6826 0%, #0a541f 100%); background: -ms-linear-gradient(top, #0d6826 0%, #0a541f 100%); background: -o-linear-gradient(top, #0d6826 0%, #0a541f 100%); background: linear-gradient(top, #0d6826 0%, #0a541f 100%); } .var3 .btn { text-align: left; background: #474747; border:1px solid #784A9d; background: -webkit-linear-gradient(top, #474747 0%, #353535 100%); background: -moz-linear-gradient(top, #474747 0%, #353535 100%); background: -ms-linear-gradient(top, #474747 0%, #353535 100%); background: -o-linear-gradient(top, #474747 0%, #353535 100%); background: linear-gradient(top, #474747 0%, #353535 100%); } .var4 .btn,.accordion h3, .sfforumReplyPostWrp .sfforumReplyBtn,.taxonomyWrap input.btn, .sfforumPostTitle .sfforumPostTitleSaveEdit { text-align: left; border: 1px solid #b7b7b7; background: #878687; background: -webkit-linear-gradient(top, #878687 0%, #464646 100%); background: -moz-linear-gradient(top, #878687 0%, #464646 100%); background: -ms-linear-gradient(top, #878687 0%, #464646 100%); background: -o-linear-gradient(top, #878687 0%, #464646 100%); background: linear-gradient(top, #878687 0%, #464646 100%); } .var5 .btn { background: #fd9b20; background: -webkit-linear-gradient(top, #fd9b20 0%, #cc7d18 100%); background: -moz-linear-gradient(top, #fd9b20 0%, #cc7d18 100%); background: -ms-linear-gradient(top, #fd9b20 0%, #cc7d18 100%); background: -o-linear-gradient(top, #fd9b20 0%, #cc7d18 100%); background: linear-gradient(top, #fd9b20 0%, #cc7d18 100%); } #VA .var6 .btn, .js-globalNavCtrl { background: #ededed; color: #55009d; font-size: 1em; display: block; background: -webkit-linear-gradient(top, #ededed 0%, #dadada 100%); background: -moz-linear-gradient(top, #ededed 0%, #dadada 100%); background: -ms-linear-gradient(top, #ededed 0%, #dadada 100%); background: -o-linear-gradient(top, #ededed 0%, #dadada 100%); background: linear-gradient(top, #ededed 0%, #dadada 100%); } #VA .var6 .btn:hover, #VA .var6 .btn:focus, #VA .var7 .btn:hover, #VA .var7 .btn:focus { background: #555; color: #fff; text-shadow: none; background: -webkit-linear-gradient(top, #555555 0%, #4c4c4c 100%); background: -moz-linear-gradient(top, #555555 0%, #4c4c4c 100%); background: -ms-linear-gradient(top, #555555 0%, #4c4c4c 100%); background: -o-linear-gradient(top, #555555 0%, #4c4c4c 100%); background: linear-gradient(top, #555555 0%, #4c4c4c 100%); } #VA .var7 .btn { background: #ededed; color: #0d6826; font-size: 1em; display: block; background: -webkit-linear-gradient(top, #ededed 0%, #dadada 100%); background: -moz-linear-gradient(top, #ededed 0%, #dadada 100%); background: -ms-linear-gradient(top, #ededed 0%, #dadada 100%); background: -o-linear-gradient(top, #ededed 0%, #dadada 100%); background: linear-gradient(top, #ededed 0%, #dadada 100%); } /* new light a candle styles */ #bd .lightACandle .btn { background: #cacaca; border: 1px solid #fff; color: #502f8e; display: block; background: -webkit-linear-gradient(top, #ececec 0%, #cacaca 100%); background: -moz-linear-gradient(top, #ececec 0%, #cacaca 100%); background: -ms-linear-gradient(top, #ececec 0%, #cacaca 100%); background: -o-linear-gradient(top, #ececec 0%, #cacaca 100%); background: linear-gradient(top, #ececec 0%, #cacaca 100%); -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.25); -moz-box-shadow: 0 0 5px rgba(0,0,0,0.25); -ms-box-shadow: 0 0 5px rgba(0,0,0,0.25); -o-box-shadow: 0 0 5px rgba(0,0,0,0.25); box-shadow: 0 0 5px rgba(0,0,0,0.25); } #bd .lightACandle .btn:hover, #bd .lightACandle .btn:focus { background: #404040; border: 1px solid #959595; color:#fff; text-shadow: none; background: -webkit-linear-gradient(top, #555555 0%, #404040 100%); background: -moz-linear-gradient(top, #555555 0%, #404040 100%); background: -ms-linear-gradient(top, #555555 0%, #404040 100%); background: -o-linear-gradient(top, #555555 0%, #404040 100%); background: linear-gradient(top, #555555 0%, #404040 100%); -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.25); -moz-box-shadow: 0 0 5px rgba(0,0,0,0.25); -ms-box-shadow: 0 0 5px rgba(0,0,0,0.25); -o-box-shadow: 0 0 5px rgba(0,0,0,0.25); box-shadow: 0 0 5px rgba(0,0,0,0.25); } /* SF, y u no make these the same objects >< */ .sfSubmitBtnWrp a, .sfregisterLnkWrp input, .sfforumReplyBtn, .sfforumReplyPostWrp .sfforumReplyBtn, .sfSubmitBtnWrp .sfSubmitBtn, .sfCancel, .sfQuote, article.storeProductDescription .sfAddToCartBtn, .sfforumPostTitle .sfforumPostTitleEdit, .sfforumPostTitle .sfforumPostTitleSaveEdit, .sfforumPostTitle .sfforumPostTitleSaveEdit + span, .sfcartSummaryWrp .sfcartSummaryBtnsWrp input, .purchaseLotteryWrap .btn, .purchaseMonthWrap .btn .sfcheckoutMulitPage .sfSubmitBtn input { padding: 8px 10px; border: 1px solid #ccc; } .sfsearchSubmit:hover, .sfsearchSubmit:focus { background-color: #9e66cc; } /* todo: active removes border? */ /*NB: element :hover is there for a reason, need to to get either the a or submit OR span, yeh*/ #VA .btn:hover, #VA .btn:focus, #VA .slideTxt a:hover, #VA .slideTxt a:focus, #VA .taxonomyWrap .btn:hover, #VA .taxonomyWrap .btn:focus, .sfcartSummaryWrp a.sflnkToggleCart:hover, .sfcartSummaryWrp a.sflnkToggleCart:focus, .caseStudyFilterWrap input:hover, .caseStudyFilterWrap input:focus, .sfforumReplyBtn:hover, .sfforumReplyBtn:focus, .sfforumNewThreadWrp .sfSubmitBtnWrp :hover, .sfforumNewThreadWrp .sfSubmitBtnWrp :focus, .sfforumPostReplyForm .sfQuote:hover, .sfforumPostReplyForm .sfQuote:focus, .sfforumPostTitleEdit:hover, .sfforumPostTitleEdit:focus, #VA .sfSubmitBtnWrp :hover, #VA .sfSubmitBtnWrp :focus, .sfforumPostTitleSaveEdit:hover, .sfforumPostTitleSaveEdit:focus, .sfforumPostTitle .sfforumPostTitleCancelEdit:hover, .sfforumPostTitle .sfforumPostTitleCancelEdit:focus, .sfcheckoutMulitPage .sfcheckoutBtnsWrp input:hover, .sfcheckoutMulitPage .sfcheckoutBtnsWrp input:focus, .sfcartSummaryWrp .sfcartSummaryBtnsWrp :hover,.sfcartSummaryWrp .sfcartSummaryBtnsWrp :focus, .sfFormsEditor .sfFormSubmit input:hover, .sfFormsEditor .sfFormSubmit input:focus, #VA .sfAddToCartBtn:hover, #VA .sfAddToCartBtn:focus, .sfcheckoutMulitPage #errorWrapDiv a:hover, .sfcheckoutMulitPage #errorWrapDiv a:focus { color:#55009d; border-color:#b7b7b7; text-shadow:1px 1px 0 #fff; background:#ececec; background: -webkit-linear-gradient(top, #ececec 0%, #d5d5d5 100%); background: -moz-linear-gradient(top, #ececec 0%, #d5d5d5 100%); background: -ms-linear-gradient(top, #ececec 0%, #d5d5d5 100%); background: -o-linear-gradient(top, #ececec 0%, #d5d5d5 100%); background: linear-gradient(top, #ececec 0%, #d5d5d5 100%); -webkit-box-shadow: inset 0 1px 0 #fff; -moz-box-shadow: inset 0 1px 0 #fff; -ms-box-shadow: inset 0 1px 0 #fff; -o-box-shadow: inset 0 1px 0 #fff; box-shadow: inset 0 1px 0 #fff; } /* || button ! */ #VA .btn, #VA .sfforumReplyBtn, .sfSubmitBtnWrp .sfSubmitBtn, .caseStudyFilterWrap input, .sfcheckoutMulitPage .sfcheckoutBtnsWrp input, .sfcartSummaryWrp .sfcartSummaryBtnsWrp *, .sfshoppingCartBtnsWrp .proceedWrap input { cursor: pointer; } #VA .btn:active, #VA .sfforumReplyBtn:active, .socMedia li a:active, .sfSubmitBtnWrp .sfSubmitBtn:active, .sfforumPostReplyForm .sfQuote:active, .storeProductDescription .sfAddToCartBtn:active, #VA .sfSubmitBtnWrp :active, .sfforumPostTitle .sfforumPostTitleEdit:active, .sfforumPostTitle .sfforumPostTitleSaveEdit:active, .sfforumPostTitle .sfforumPostTitleSaveEdit + span:active, .caseStudyFilterWrap input:active, .sfcheckoutMulitPage .sfcheckoutBtnsWrp input:active, .sfcartSummaryWrp .sfcartSummaryBtnsWrp :active, .sfFormsEditor .sfFormSubmit input:active { position: relative; top: 1px; -webkit-box-shadow: inset 0 1px 3px #c5c5c5; -moz-box-shadow: inset 0 1px 3px #c5c5c5; -ms-box-shadow: inset 0 1px 3px #c5c5c5; -o-box-shadow: inset 0 1px 3px #c5c5c5; box-shadow: inset 0 1px 3px #c5c5c5; } /* tabContent */ .tabContent { outline: 0; } /* Buttons on multi tab form */ .tabContent .button .sf_colsIn { display: inline-block; } .tabContent .back.btn, .tabContent .next.btn {margin: 2px;} .tabContent .next.btn { float: right;} .tabContent .back.btn { float: left; } .tabContent .multiTabFormSbmt { float: right; } /* rss has not btnWrap so need to change the active as it's already pos ab, TODO mQ > 768? */ #VA .btn.rss:active { position:absolute; top:35px; } a[href^="tel: "]:hover, a[href^="tel: "]:focus { color: #8b8b8b; text-shadow: -1px -1px 0 #fff; } .btn small { display:block; margin-top:5px; font-size:0.7857142857142857em; /*11*/ } .largerBtn .btn { display: block; padding: 14px 30px; text-align: center; font-size: 1em; } /* * read more || green arrow link * needs to be defined for the news item page first as it doesn't have any hock =[ */ .readMore, .gotoForums a { font-weight: bold; display: inline-block; padding: 10px 5px 10px 15px; } .readMore:before { left: 1px; top: 14px; } .newsList .readMore:before { left: 10px; } /* green triangle!!! */ .readMore, .divSectionNav nav ul .expanded li a, .fancyLinksList li, .blogList + .RadDataPager a.prev, .blogList + .RadDataPager a.next, #VA .evilPager .evilPager a[id*="cmdPrev"], #VA .evilPager .evilPager a[id*="cmdNext"], .gotoForums a, .volunteerList li a, .backToLinkWrap a { position: relative; } .readMore:before, .divSectionNav nav ul .expanded li a:before, .fancyLinksList li:before, .blogNav .prev a:before, .blogNav .next a:before, .blogList + .RadDataPager a.prev:before, .blogList + .RadDataPager a.next:before, #VA .evilPager .evilPager a[id*="cmdPrev"]:before, #VA .evilPager .evilPager a[id*="cmdNext"]:before, .gotoForums a:before, .volunteerList li a:before, .backToLinkWrap a:before, .shopDepartments li li a:before { content: ""; width: 0; height: 0; display: block; position: absolute; border: 5px solid transparent; border-right: none; border-left-color: #0d6826; } /* remove shadows if they have been added */ article header h1, h1.inContent, .childSummaryBoxWrap ul li .imgWrap, .blogList .imgWrap, .boxWithImage .imgWrap, .sfforumNewThreadWrp h1, .linksList .imgWrap, .productsListWrap .imgWrap, article.storeProductDescription .imgWrap, .sfContentBlock h1, #VA .productAlt .item .imgWrap, .wsShoppingCart table .imgWrap, .sfcheckoutMulitPage header h1, .sfshoppingCartWrp h1, .boxShadow1.volunteerMonth, .store .shopHeader ~ h1 { -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } /* grey outline w white inner border, dont use outline, breake bound box */ article.storeProductDescription .imgWrap, .productsListWrap article.item .imgWrap { -webkit-box-shadow: 1px 1px 0 #ccc, -1px -1px 0 #ccc; -moz-box-shadow: 1px 1px 0 #ccc, -1px -1px 0 #ccc; -ms-box-shadow: 1px 1px 0 #ccc, -1px -1px 0 #ccc; -o-box-shadow: 1px 1px 0 #ccc, -1px -1px 0 #ccc; box-shadow: 1px 1px 0 #ccc, -1px -1px 0 #ccc; } .lt-ie9 .storeProductDescription .imgWrap, .lt-ie9 .productsListWrap article.item .imgWrap { border: 6px solid #fff; outline: 1px solid #ccc; } .boxShadow1, .divSectionNav nav > ul, #hd .globalNav .rmRootGroup, .auxNav, .imgWrap, .childSummaryBoxWrap ul li, .sectionSummary.linkContentVar2, #VA .shopDepartments, #bd .boxWithImage.storyContent .imgWrap, .divSectionNav .dynamicBtnHolder { border:1px solid #fff; -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5); -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5); -ms-box-shadow: 0 0 5px rgba(0,0,0,0.5); -o-box-shadow: 0 0 5px rgba(0,0,0,0.5); box-shadow: 0 0 5px rgba(0,0,0,0.5); } .boxShadow1 { margin-bottom: 10px; padding: 1px; background: #fff; } .gradient1 { background: -webkit-linear-gradient(top, #ffffff 0%, #f1f1f1 100%); background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 100%); background: -ms-linear-gradient(top, #ffffff 0%, #f1f1f1 100%); background: -o-linear-gradient(top, #ffffff 0%, #f1f1f1 100%); background: linear-gradient(top, #ffffff 0%, #f1f1f1 100%); } .gradient2 { background: #dbdbdb; background: -webkit-linear-gradient(top, #fefefe 0%, #dbdbdb 100%); background: -moz-linear-gradient(top, #fefefe 0%, #dbdbdb 100%); background: -ms-linear-gradient(top, #fefefe 0%, #dbdbdb 100%); background: -o-linear-gradient(top, #fefefe 0%, #dbdbdb 100%); background: linear-gradient(top, #fefefe 0%, #dbdbdb 100%); } .boxWithImage { position: relative; padding: 11px 0 141px; background: #f1f1f1; border: 1px solid #fff; } /* forms and form element widgeys */ input[type="text"], .sfreContentArea .threadTitleText, input.sfTxt, textarea, select, .reContentArea { width: 100%; height: 25px; margin: 0; padding: 0 7px; /* need to leave colors to user agents. high-contrast be a harsh mistress color:#252525; background: #fff; border: 1px solid #cdcdcc; */ } /* box sizing*/ input[type="text"], .sfreContentArea .threadTitleText, input.sfTxt, textarea, .sfreContentArea, select { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .sfreContentArea, textarea { overflow:auto; min-height:100px; resize:vertical; font-family:inherit; padding: 0 7px; } select { padding-right:0; } input[placeholder]:not(:focus) { color:#898989; } .sfreContentArea { height: 200px; font-family:sans-serif; } .socMedia ul { height:25px; } /* give links hidden border to aviod jump when adding to hover/focus */ .socMedia ul a { padding:2px; border:2px solid transparent; opacity:0.8; filter:alpha(opacity=80); } .socMedia ul a:hover, .socMedia ul a:focus { border-color:#d89e2d; opacity:1; filter:alpha(opacity=100);} .socMedia ul a:active { border-color:transparent; } #VA .socMedia li { margin: 0 3px; } #VA .socMedia li:first-child { margin-left: 0 } .imgWrap { overflow: hidden;} .imgWrap img { max-width: 100%; display: block; } .lt-ie9 .imgWrap img { width: 100%; max-width: none; } /*.lt-ie8 .imgWrap img { width: auto; }*/ .lt-ie9 .photoGallery .imgWrap img { width: auto; } #bd .donateInfo .btn, #bd .radio .btn { display: block; border: 1px solid #784a9d; } .dynamicBtnHolder.radio, .dynamicBtnHolder.lightACandle{ width: 223px; } .dynamicBtnHolder.radio .btn, .dynamicBtnHolder.lightACandle .btn { padding-left: 50px; } #VA #bd ul.fancyLinksList, .wsForumLoginWrap, .loggedIn { margin: 0 0 15px; padding: 5px; background: #f0f0f0; border: 1px solid #d7d7d7; } .taxonomyWrap li .selected { pointer-events: none; } /*#region ws dotted borders! */ /* bottom border*/ .listType1 li, .listType1 .item, .caseStudySmallListWrap .item, .caseStudyListWrap .item, .titleWithDate ul li, .listHolder .item, .productReviewList li,.sfforumThreadPostList li.sfforumThreadPost, .wsForm li.sfBlogField, .sfforumNewThreadWrp .sfforumNewThreadFormList .sfforumNewThreadName, .sfcheckoutMulitPage .sfcheckoutFormWrp li, .purchaseMonthWrap .item { padding: 10px 0; border-bottom: 1px dotted #b7b7b7; } .listType1 li:first-child, .listType1 .item:first-child, .caseStudySmallListWrap .item:first-child, .caseStudyListWrap .item:first-child, .listHolder .item:first-child, .productReviewList li:first-child, .purchaseMonthWrap .item:first-child { border-top: 1px dotted #b7b7b7; } /* top border */ .listType2 ul li, .sfeventsList .item, .sfJobsList .item, .peopleList .item, .checkoutOnePagerWrap li { padding: 10px 0; border-top: 1px dotted #b7b7b7; } .listType2 ul li:first-child, .sfeventsList .item:first-child, .sfJobsList .item:first-child, .checkoutOnePagerWrap li:first-child { border-top: none; } /* green dot */ #VA .bulletType1 li { color: #0d6826; padding-left: 5px; list-style: disc inside; } /*#endregion */ /* double border effect */ article.sfeventDetails ~ .dynamicBtnHolder, .caseStudyFilterWrap, .purchaseMonthWrap { position: relative; margin: 0; padding: 10px 0; } article.sfeventDetails ~ .dynamicBtnHolder:before, article.sfeventDetails ~ .dynamicBtnHolder:after, .regDonateWrap h2:after, .caseStudyFilterWrap:before, .caseStudyFilterWrap:after, .whyIsThisNotOneControl:before,.purchaseMonthWrap:before, #VA .linkContentVar3:before { content: ""; position: absolute; display: block; width: 100%; height: 1px; background: #c2c2c2; border-top: 1px solid #e2e2e2; } /* box thingies */ .wsErrorWrap, .sfErrorWrap, .sfforumNewThreadWrp, .sfforumNewThreadWrp .sfforumNewThreadFormList .sfforumNewThreadContent, .sfforumPostReplyContainer, .donationWrapper, .checkoutOnePagerWrap .paymentDetialsWrap, .regDonateWrap { padding: 10px 15px; background: #f0f0f0; color: #333; border: 1px solid #d8d8d8; } /*================================================= * templates (hd, bd, sidebar and ft) * */ /* space for fixed mobile nav ctrl */ .js #hd { padding-top: 44px; -webkit-transition: padding 0.4s ease-in-out; -moz-transition: padding 0.4s ease-in-out; transition: padding 0.4s ease-in-out; } /* sit the logo first, it is 2nd in DOM as we need skip-to as the first TAB object this gets reset > 1024 */ #hd .sf_2cols_1_50 { position: relative; padding: 100px 0 10px; /* height of logo*/ } .logo { position: absolute; top: 7px; left: 5px; } #VA .logo a { display: inline-block;} #VA .logo a:hover, #VA .logo a:focus { -webkit-box-shadow: 0 0 6px #572C8E; -moz-box-shadow: 0 0 6px #572C8E; -ms-box-shadow: 0 0 6px #572C8E; -o-box-shadow: 0 0 6px #572C8E; box-shadow: 0 0 6px #572C8E; } .logo img { display: block; margin: 0 auto; } #hd .sf_colsOut .sf_2cols_2in_50 { margin: 0; } #hd .phoneNumber { text-align: center; padding: 10px 0; overflow: hidden; } .lt-ie8 #hd .phoneNumber { margin: 10px 0 5px; } #hd .sfsearchBox { width: 225px; margin: 0 auto 10px; } #hd .sfsearchBox input[type="text"] { width: 145px; } html:not(.lt-ie9) #hd .sfsearchBox input[type="text"] { height: 21px;} #hd .radioSmall a:hover,#hd .radioSmall a:focus { color:#55009d; } #hd .donate a:hover,#hd .donate a:focus { color:#0d6826; } #hd .globalNav { z-index: 8000; outline:0 none; } #hd .globalNav .rmRootGroup { float: none; border: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } #hd .RadMenu { float: none; } .lt-ie9 #hd .globalNav .rmRootGroup > li { border-left: 1px solid #9b9b9b; } /*!remove .lt-ie8 #hd .globalNav li.rmFirst { width: 44px; }*/ .noScroll, .noScroll body { overflow: hidden; } #hd .globalNav li { width: 100%; font-size: 0.85714285714285714285714285714286em; line-height:1.6em; /* 12 | 20 */ } /* stop recursive smallening of font */ #hd .globalNav li li { font-size: 1em; } #hd .globalNav .rmFirst { padding-left: 0; border: none; } /*overflow rounded corner issue, need to apply to the li and a */ #hd .globalNav .rmRootGroup > .rmFirst, #hd .globalNav .rmRootGroup > .rmFirst > a { -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -ms-border-radius: 5px 0 0 5px; -o-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; } #hd .globalNav .rmRootGroup > .rmLast, #hd .globalNav .rmRootGroup > .rmLast > a { -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; -ms-border-radius: 0 5px 5px 0; -o-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; } #hd .globalNav li a { float: none; display: block; color: #fff; text-align: center; padding: 8px 20px; cursor: pointer; background: #535353; background: -webkit-linear-gradient(top, #707070 0%, #363636 100%); background: -moz-linear-gradient(top, #707070 0%, #363636 100%); background: -ms-linear-gradient(top, #707070 0%, #363636 100%); background: -o-linear-gradient(top, #707070 0%, #363636 100%); background: linear-gradient(top, #707070 0%, #363636 100%); } #hd .globalNav li .rmExpanded, #hd .globalNav li a:hover, #hd .globalNav li a:focus { background: #dfdfdf; color: #0d6826; background: -webkit-linear-gradient(top, #dfdfdf 0%, #f8f8f8 100%); background: -moz-linear-gradient(top, #dfdfdf 0%, #f8f8f8 100%); background: -ms-linear-gradient(top, #dfdfdf 0%, #f8f8f8 100%); background: -o-linear-gradient(top, #dfdfdf 0%, #f8f8f8 100%); background: linear-gradient(top, #dfdfdf 0%, #f8f8f8 100%); } /* also does the top lvl of a select page */ #hd .globalNav li .rmSelected, #hd .globalNav .rmRootLink.rmFocused { color: #252525; background: #cbcbcb; background: -webkit-linear-gradient(top, #ececec 0%, #b2b2b2 100%); background: -moz-linear-gradient(top, #ececec 0%, #b2b2b2 100%); background: -ms-linear-gradient(top, #ececec 0%, #b2b2b2 100%); background: -o-linear-gradient(top, #ececec 0%, #b2b2b2 100%); background: linear-gradient(top, #ececec 0%, #b2b2b2 100%); } #hd .globalNav span { float: none; border: 0; line-height: 20px; } #hd .globalNav .rmLevel1 { border: 1px solid #d7d7d7; border-top: none; background: #f6f6f6; padding: 10px; } #hd .globalNav .rmLevel1 li { border-bottom: 1px dotted #bdbdbd; background: none; } #hd .globalNav .rmLevel1 li:first-child { border-top: 1px dotted #bdbdbd; } #hd .globalNav .rmLevel1 a { background: none; color: #252525; font-weight: bold; margin: 0; padding: 10px 10px 10px 5px!important; text-align: left; } #hd .globalNav .rmLevel1 a:hover,#hd .globalNav .rmLevel1 a:focus { background: #0d6826; color: #fff; } /*#hd .globalNav .rmSlide li a.rmSelected, #hd .globalNav .rmSlide li a.rmFocused { background: #b8bdb9; }*/ #hd .globalNav .rmLevel1 a .rmText {position: relative; padding-left: 0; } /* SP - 12-09-13 - VA want to remove bullet points in drop down top nav - they suck again! */ /*#hd .globalNav .rmLevel1 .rmText:before { content: ""; display: block; width: 6px; height: 6px; background: #0d6826; position: absolute; left: 0; top: 6px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } #hd .globalNav .rmLevel1 a:hover .rmText:before, #hd .globalNav .rmLevel1 a:focus .rmText:before { background: #fff; }*/ /* home high contrast, jQ injects the image we need, style it too*/ #hd .globalNav .rmRootGroup .rmFirst .rmRootLink span, #hd .globalNav .rmRootGroup .rmFirst .rmRootLink .hc-img { display: block!important; width: 20px; height: 20px; margin: 0 auto; background-position: 0 -512px; text-indent: 100%; overflow: hidden; } #hd .globalNav .rmRootGroup .rmFirst .rmRootLink .hc-img img { top: -512px; left: 0; } #hd .globalNav .rmRootGroup .rmFirst .rmRootLink:hover .rmText, #hd .globalNav .rmRootGroup .rmFirst .rmRootLink:focus .rmText { background-position: -128px -512px; } #hd .globalNav .rmRootGroup .rmFirst .rmRootLink:hover .hc-img img, #hd .globalNav .rmRootGroup .rmFirst .rmRootLink:focus .hc-img img { left: -128px; } #hd .globalNav .rmRootGroup .rmFirst .rmRootLink.rmSelected .rmText { background-position: -64px -512px; } #hd .globalNav .rmRootGroup .rmFirst .rmRootLink.rmSelected .hc-img img { left: -64px; } /*js global nav ctrl*/ .js #hd .globalNav { position: fixed; left: -150%; top: 0; width: 100%; -webkit-transition: left 0.2s ease-in-out; -moz-transition: left 0.2s ease-in-out; transition: left 0.2s ease-in-out; } .js #hd .globalNav.visible { left: 0; } /* need important on the border as #hd a beats it, don't know what changing it will do */ .js .js-globalNavCtrl { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; height: 44px; border-bottom: 1px solid #b3b3b5!important; line-height: 44px; text-align: center; text-shadow: 1px 1px 0 #fff; } /*this guy be an arrow, needs to be inline as we cannot pos-ab center with the text*/ .js .js-globalNavCtrl i { position: relative; top: 13px; left: -5px; width: 0; height: 0; border: 10px solid transparent; border-top-color: #784a9d;} /* when open, face up */ .globalNav.visible .js-globalNavCtrl i { border-top: none; border-bottom-color: #784a9d; top: -13px; } .js .js-globalNavCtrl:hover, .js .js-globalNavCtrl:focus { } .js .js-globalNavCtrl:hover i, .js .js-globalNavCtrl:focus i { } .js .visible .js-globalNavCtrl { position: absolute; left: 0; top: 100%; bottom: -1024px; height: auto; z-index: 5000; } /* need to override this if the jQ kicks on th auto calc the width*/ .js .visible .rmLast .rmRootlink { width: 100%!important; } /*not needed at this res*/ #hd .minorNav { display: none; } #hd .dynamicBtnHolder { } #hd a, #hd a:focus, .sfContentBlock div[tabindex="-1"], #vaContent, #divSectionNav { outline: 0px none; border: none; } /*region checkout && donate header */ #VA .checkout #hd, #VA .donate #hd { background: #f7f7f7; padding-top: 20px; } .checkout #hd .pgWidth, .donate #hd .pgWidth { position: relative; background: #fff; z-index: 10; } .checkout #hd .logo, .donate #hd .logo { padding-left: 15px; float: left; } .checkout #hd .phoneNumber, .donate#hd .phoneNumber { padding: 35px 15px 0 0; } .checkoutMain { float: left; height: 25px; margin: 7px 0 0 20px; padding:40px 0 25px 25px; border-left: 1px solid #d1d1d1; } .checkoutMain span { font-size: 23px; } #VA .internal.checkout #bd, #VA .internal.donate #bd { padding-top: 0; } /*#endregion */ #bd { background: #d9d9d9; outline:0 none;} .home #bd .breadcrumb { margin: 0!important; display: none;} #bd .sf_cols .vaGrid.main { padding-top: 20px; z-index: 2; position: relative; } #bd .homeContentHolder { position: relative; z-index: 10; padding-top: 20px!important; } #bd .bodyShadow, #bd .homeContentHolder { width: auto; background: #fff; } #bd .homeContentHolder, .internal #bd .bodyShadow { padding-bottom: 50px; } .internal #bd .bodyShadow { min-height: 550px; padding-top: 20px; } .homeContentHolder .sectionSummary { margin: 0 0 40px; } /* The z-index & pos-rel is for the rotator sometimes makes the page-title flicker... */ h1, .fauxH1 { z-index:2; position:relative; clear: both; padding: 10px 0; background: #e3e3e3; color: #252525; font-size: 1.857142857142857em; line-height: 0.9230769230769231em; font-weight:normal; /* 26 | 24 */ text-shadow: 1px 1px 0 #fff; background: -webkit-linear-gradient(top, #e3e3e3 0%, #e6e6e6 100%); background: -moz-linear-gradient(top, #e3e3e3 0%, #e6e6e6 100%); background: -ms-linear-gradient(top, #e3e3e3 0%, #e6e6e6 100%); background: -o-linear-gradient(top, #e3e3e3 0%, #e6e6e6 100%); background: linear-gradient(top, #e3e3e3 0%, #e6e6e6 100%); -webkit-box-shadow: 0 -2px 6px rgba(0,0,0,0.35); -moz-box-shadow: 0 -2px 6px rgba(0,0,0,0.35); -ms-box-shadow: 0 -2px 6px rgba(0,0,0,0.35); -o-box-shadow: 0 -2px 6px rgba(0,0,0,0.35); box-shadow: 0 -2px 6px rgba(0,0,0,0.35); } /* Stephen */ h1 span, .fauxH1 span { text-shadow: none; } /* carols landing*/ /*.pageId-66de6b5c-1107-4acf-bc4d-3970c6c13e5c h1 { background:#55009d; color:#fff; text-shadow: 1px 1px 0 #997fc6; } .pageId-66de6b5c-1107-4acf-bc4d-3970c6c13e5c .divSectionNav h2 { color: #fff; } .pageId-66de6b5c-1107-4acf-bc4d-3970c6c13e5c .optInMain h2 { color: #55009d; } .pageId-66de6b5c-1107-4acf-bc4d-3970c6c13e5c .sectionSummary .imgWrap { } */ /* home grids */ #bd .homeContentHolder .homePush { float: none; clear: both; width: 100%!important; } #bd .homeContentHolder .homePush .sf_colsIn { margin: 0; } /*#region black sheep*/ #VA .landing-alternate .bodyShadow { } /* need for socMedia to sit in the h1 */ #VA .landing-alternate h1 { padding-left: 15px; position:static; } #VA .landing-alternate .socMedia { top: 360px; right: 250px; } #VA .pageId-cbed3ec1-8521-4812-9adc-b95acb0d6324 .socMedia { top: 320px; right: 20px; } .landing-alternate #bd .divHomepageSlider { position: relative; } .landing-alternate #bd .divHomepageSlider li { overflow: hidden; } .landing-alternate #bd .divHomepageSlider img { display: block; position: static; } .landing-alternate #bd .divHomepageSlider li .slideTxt { position: static; padding: 10px 10px 40px; background: rgba(0,0,0,0.75); color: #fff; } .landing-alternate #bd .divHomepageSlider .slideTxt h2{ } .landing-alternate #bd .divHomepageSlider .slideTxt p { } .landing-alternate #bd .divHomepageSlider .slideTxt .dynamicBtnHolder { } /*#endregion */ /* TODO page heading thingy oO #bd > .pgWidth:first-child { border-top: 45px solid #e2e2e2; }*/ #ft { background: #e3e3e3; } #ft:before { content: ""; display: none; height: 36px; width: 100%; background: #464646; border-bottom: 1px solid #fff; margin-bottom: -36px; } #ft .pgWidth { padding: 0; } #ft .nonLinkLogo img { max-width: 100%; } #ft .phoneNumber { margin: 20px 0 20px; text-align: center; } #ft .phoneNumber a { font: 1.9em/1em sans-serif; /*30 */ padding: 0;} #ft .wsSignature { text-align: right; border-top: 1px solid #fff; color: #959595; font-size: 11px; padding-bottom: 10px; } #ft .wsSignature a { color: #959595; } #ft .wsSignature:before { content: ""; border-top: 1px solid #b2b2b2; display: block; width: 100%; padding-bottom: 5px; } #VA .footerContent { padding: 25px 10px 0; width: auto; } #VA .footerContent .sf_colsOut { float: none; width: 100%; } #VA .footerContent .sf_colsIn { margin: 0; } /* force logo col as 100% til last mQ */ #VA .footerContent .sf_5cols_5_20 { width: 192px!important; float: none!important; clear: both; margin: 0 auto; } /* widgeys, widgetos & widgeottos */ .skip-to { text-align: center; } .skip-to a { color:#252525; border-bottom:1px solid #8e8e8e!important; margin:0 10px; } .skip-to a:focus {} /* !print btn, only shows up on larger screens? */ .js_PrintWrap { width: 66px; height: 24px; } .js_PrintWrap, .no-js .js_PrintWrap, /* hide from lib landing*/ .pageId-e980bacb-f9c1-4432-a12a-86bad7aff800 .js_PrintWrap { display: none; } .js_PrintWrap a { display: block; padding: 2px; float: left; } .js_PrintWrap a + a { margin-left: 10px; } .js_PrintWrap .hc-img { width: 24px; height: 20px; } .js_PrintWrap .hc-img img { left: -64px; } .js_PrintWrap a:hover .hc-img img, .js_PrintWrap a:focus .hc-img img { left: -96px; } .js_PrintWrap .js_Print img { top: -730px; } .js_PrintWrap .js_PrintLarge img { top: -704px; } /* slideshow hidden toggle */ .startPaused { position: absolute; top: 20px; left:0; overflow: hidden; z-index: 9999999; background: #000; color: #fff; line-height: 40px; } .ftProductRotator .startPaused { top: 60px; left: 10px; } .startPaused input, .startPaused label { position: absolute; left: -200%; } .startPaused input:focus { position: static; } .startPaused input:focus + label { position: static; } /*force skip to as always visible*/ .lt-ie8 .skip-to { position: static; left: 230px; top: 10px; line-height: 18px; } .lt-ie8 .skip-to a { position: static; display: inline; } .lt-ie8 .skip-to br { display: block!important; } /* remove it from checkout progress*/ body.donate .skip-to, body.checkout .skip-to { display: none!important; } .dynamicBtnHolder { margin: 10px 0; } .dynamicBtnHolder a { display: block; } #VA.lt-ie8 .dynamicBtnHolder a { display: block; } .socMedia li { float: left; } .socMedia li a {} nav a , .divSectionNav nav a { font-size: 0.9285714285714286em; line-height: 1.076923076923077em; /* 13 | 14 */} .auxNav { width: 100%; margin: 0 0 10px; } #VA .auxNav li, .navSectionNav li, #VA .shopDepartments li { border-top: 1px solid #cdcdcd; border-bottom: 1px solid #ededed; } #VA .auxNav li { background: #fffefe; padding: 0 2px; } #VA .auxNav ul li:first-child { border-top: none; } #VA .auxNav ul li:last-child { border-bottom: none; } nav a { display: block; padding: 10px; color: #252525;} .auxNav li a { padding: 10px 10px 10px 45px; } .auxNav li a:hover, .auxNav li a:focus { color: #0d6826; background: #dcdcdc; background: -webkit-linear-gradient(top, #faf9f9 0%, #dcdcdc 100%); background: -moz-linear-gradient(top, #faf9f9 0%, #dcdcdc 100%); background: -ms-linear-gradient(top, #faf9f9 0%, #dcdcdc 100%); background: -o-linear-gradient(top, #faf9f9 0%, #dcdcdc 100%); background: linear-gradient(top, #faf9f9 0%, #dcdcdc 100%); } .auxNav li a:before, .auxNav li a .ie7Before { left: 12px; top: 12px; width: 23px; height: 23px;} .auxNav li a:active { background: #c2c2c2; } .sfsearchBox input[type="text"] { padding-right: 0; border-right: 0; width: auto; } .sfsearchBox input { float: left; } /* Changed this so High Contrast mode does it thing */ .sfsearchSubmit { color:#FFF; background: #55009d /* url("../../global/va-icons.png") -439px 4px */; border: 0; cursor: pointer; /* text-indent: -400px; width: 34px; */ height: 21px; } .rss { clear: both; } #VA .rss, #VA .rss a { color: #2a2a2a; padding: 0 20px 0 30px; } #VA .rss:hover, #VA .rss:focus, #VA .rss a:hover, #VA .rss a:focus { color:#572C8e!important; background:#e7dff2; } /*#region section nav */ .divSectionNav { margin-bottom: 20px; } /* this is the btn guy that appears above the section nav to go the parent page*/ .divSectionNav .dynamicBtnHolder { margin: 0; border: none; } .divSectionNav .dynamicBtnHolder a { } .divSectionNav nav ul {} .divSectionNav nav ul li {} .divSectionNav nav > ul > li:first-child, #VA .shopDepartments .rtsFirst { border-top: none; } .divSectionNav nav a, #VA .shopDepartments li a { color: #242424; font-weight: bold; padding: 10px 7px; } #bd .divSectionNav nav a:hover, #bd .divSectionNav nav a:focus, #VA .shopDepartments li a:hover, #VA .shopDepartments li a:focus { background:#b8bdb9; text-shadow:1px 1px 0 #ededed; } #VA .divSectionNav nav a:active, #VA .shopDepartments li a:active { background:#363636 ; text-shadow:-1px -1px 0 #525252; color:#fff; } .divSectionNav nav .current > a, .divSectionNav nav .expanded > a, /* SPforMC */ /* there is no expanded state, use the rtMinus span that indicates an expanded state*/ #VA .shopDepartments .rtMinus + a, /* stupid general css :p it's all Telerik's fault. This makes a parent category, that has no children do the white on green colour scheme */ #VA .shopDepartments .RadTreeView > ul > li > div.rtSelected > a { background: #0d6826; color: #fff; } .divSectionNav nav .expanded > a:hover, .divSectionNav nav .expanded > a:focus, #VA .shopDepartments .rtSelected a:hover, #VA .shopDepartments .rtSelected a:focus { text-shadow:none; color:#242424; } .divSectionNav nav ul li ul {} .divSectionNav nav li.expanded li { border-top: 1px dotted #cdcdcc; border-bottom: 1px dotted #cdcdcc; } .divSectionNav nav ul .expanded li a {} .divSectionNav nav ul .expanded li a:before, .shopDepartments li li a:before { left: 12px; top: 12px; } .divSectionNav nav .nestedPages li a { background: #e4ebe6; padding: 10px 5px 10px 30px; } .divSectionNav nav .nestedPages .current a { background: #b8bdba; color: #252525; } .divSectionNav nav { padding: 1px; /* background: #fff; */} #VA .divSectionNav nav > ul, #VA .shopDepartments ul { border: 1px solid #fff; background: #fafafa; background: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); background: -ms-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); background: -o-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); background: linear-gradient(top, #ffffff 0%, #f2f2f2 100%); } #VA.lt-ie9 .divSectionNav nav > ul, #VA.lt-ie9 .divSectionNav .dynamicBtnHolder, #VA.lt-ie9 .shopDepartments ul { border: 1px solid #ccc; } /* shop nav */ #VA .shopDepartments li.rtFirst { border-top: none; } #VA .shopDepartments li a { display: block; padding: 8px; text-align: left; white-space: normal; font-size: 16px; line-height: 20px; } #VA .shopDepartments li span { display: none!important; } #VA .shopDepartments li ul { padding: 0; background: #dee8e1; } #VA .shopDepartments li ul a { position: relative; padding: 10px 5px 10px 30px } #VA .shopDepartments li ul .rtSelected a { background: #b8bdb9; } /* fix rad styles */ #VA .shopDepartments div { display: block; } #VA .shopDepartments * { float: none; font-family: Sans-Serif; } #VA .shopDepartments a, #VA .shopDepartments .rtHover, #VA .shopDepartments .rtHover * { border: none; } /*#endregion */ /*#region accordion */ .accordion { padding: 10px 10px 0; border-bottom: 1px solid #c2c2c2; } .accordion:after { content: ""; display: block; width: 100%; height: 1px; background: #e1e1e1; } #VA .accordion ol { margin-bottom: 15px; } #VA .accordion li { color: #fff; clear: both; margin-bottom: 5px; } .accordion h3 { border: 0; } .accordion h3 a { padding: 5px 35px 10px 5px; } .accordion h3 a:hover, .accordion h3 a:focus { color:#55009d; } .accordion .imgWrap img { min-width:100%; } /* a:focus has hidden overflow, nope */ #VA .accordion a { overflow:visible; } #VA .accordion .accordionContent a:focus { outline:none; } .accordion .js-accordionControl { color: #fff; display: block; position: relative; } .accordion p { float: right; width: 270px; margin-bottom:1em; } .accordion .imgWrap { float: left; width: 157px; height: 114px;} .accordion .accordionContent { color: #252525; padding: 15px 10px; font-weight: normal; border-bottom: 1px dotted #b7b7b7; overflow:auto; } /* le js a*/ .accordion .accordionContent a { clear: both; display: block; text-indent:10px; } .js .accordion .accordionContent .imgWrap { margin-top:-80px; } /*get forked! */ .js .accordion .js-toggle { float: right; font-weight: normal; margin-top: 3px; font-size: 0.7857142857142857em; /* 11 */} .js .accordion .js-toggle:before { right: 10px; top: 6px; width: 16px; height: 16px; background: #fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; } .js .accordion .js-toggle:after { right: 15px; top: 13px; width: 0; height: 0; background: none; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top : 4px solid #404041; } .js .accordion .selected h3 { background: #0d6826; } .js .accordion .selected .js-toggle:after { top: 12px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid #404041; border-top : none; } .no-js .accordion {} .no-js .accordion .js-toggle{ display: none; } /*#endregion */ .minorNav {} .minorNav ul {} #hd .minorNav li, #ft .footerNav ul li { padding-left: 17px; background-position: 8px -763px; } #hd .minorNav li:first-child, #ft .footerNav .rtsUL .rtsLI:first-child { padding: 0; background: none!important; } .minorNav .rtsLI .rtsLink { color: #4d4d4d; } .breadcrumb { overflow: auto; padding: 5px 0 10px; font-size: 0.8571428571428571em; /* 12 / 14 */color: #464646; } .breadcrumb strong { float: left; font-size: 11px; font-weight: bold; } .breadcrumb ul { float: left;} .breadcrumb li { float: left; position:relative; } .breadcrumb li + li { padding-left: 20px; } .breadcrumb .separator { background-position: -122px -123px; padding: 0 10px; } .breadcrumb a { color: #464646; padding:2px; } .breadcrumb .current{} /* library*/ .landings .breadcrumb, .landing-alternate .breadcrumb, .pageId-e980bacb-f9c1-4432-a12a-86bad7aff800 .breadcrumb { position: absolute; z-index: 10; background: #dadada; padding-left: 10px; padding-right: 100px; background: -webkit-linear-gradient(left, #dadada 80%, rgba(218,218,218,0) 100%); background: -moz-linear-gradient(left, #dadada 80%, rgba(218,218,218,0) 100%); background: -ms-linear-gradient(left, #dadada 80%, rgba(218,218,218,0) 100%); background: -o-linear-gradient(left, #dadada 80%, rgba(218,218,218,0) 100%); background: linear-gradient(left, #dadada 80%, rgba(218,218,218,0) 100%); } /* library fixes*/ .default-internals---two-columns #bd .libQuickLinks { position: absolute; z-index: 400; width: 225px; top: 25px; } .readingNewspaper { font-size: 0.85em; } .pageId-e980bacb-f9c1-4432-a12a-86bad7aff800 .sectionSummary .imgWrap { float: none; margin-bottom: 10px; } .lt-ie8 .libQuickLinks .dynamicBtnHolder a { display: block; } /* faux double border on the sf col, cant use content as they have a clear fix */ .sf_cols.doubleBorder { margin: 0 0 20px; padding: 0 0 20px; border-bottom: 2px solid #c2c2c2; } #ft .footerContent .sf_5cols_5_20 { float: right; } .nonLinkLogo { display: block; } /*#region carols targeting */ /* todo, better hook for this to not inherit with a slider */ .pageId-66de6b5c-1107-4acf-bc4d-3970c6c13e5c .divSectionNav { position: relative!important; top:-55px!important; left:0!important; } .carolsLogo { position: absolute; top: 40px; padding:15px 0; border: 2px solid #fff; z-index: 100; background: #fff; background: -webkit-linear-gradient(top, #fff 0, #f1f1f1 100%); background: -moz-linear-gradient(top, #fff 0, #f1f1f1 100%); background: -ms-linear-gradient(top, #fff 0, #f1f1f1 100%); background: -o-linear-gradient(top, #fff 0, #f1f1f1 100%); background: linear-gradient(top, #fff 0, #f1f1f1 100%); -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5); -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5); -ms-box-shadow: 0 0 5px rgba(0,0,0,0.5); -o-box-shadow: 0 0 5px rgba(0,0,0,0.5); box-shadow: 0 0 5px rgba(0,0,0,0.5); } .pageId-66de6b5c-1107-4acf-bc4d-3970c6c13e5c .divInternalSlider { } #VA .pageId-66de6b5c-1107-4acf-bc4d-3970c6c13e5c .divInternalSlider .slideTxt { display: block; width: 400px; background: #e7e7e7; background: rgba(255,255,255,0.85); color: #55009d; z-index: 10; line-height: 22px; } /* todo move to control style and update w home css - these are all to do with carols by candleleighteitght */ #VA .pageId-66de6b5c-1107-4acf-bc4d-3970c6c13e5c .internalSliderSlides, #VA .pageId-66de6b5c-1107-4acf-bc4d-3970c6c13e5c .internalSliderSlides li { height: 278px; } .pageId-66de6b5c-1107-4acf-bc4d-3970c6c13e5c .internalSliderSlides li { overflow: hidden; } .pageId-66de6b5c-1107-4acf-bc4d-3970c6c13e5c .internalSliderSlides li img { } /*#endregion */ .featuredProducts {} .featuredProducts ul { overflow:hidden; min-height:180px; } .featuredProducts li { float: left; width: 48.04804804804805%; /* 160 / 333 */ margin-left: 3.003003003003003%; /* 10 / 333 */ } .featuredProducts li:first-child { margin-left: 0; } .featuredProducts a {} .featuredProducts .imgWrap { /*max-width: 160px;*/ height:115px; margin: 2px 2px 10px ; padding: 1px; } .featuredProducts h2 { border: none; } .featuredProducts + * { clear: both; } .childSummaryBoxWrap {} .childSummaryBoxWrap ul { overflow: auto; margin: 10px -11px 0;} .childSummaryBoxWrap ul li { margin: 11px; padding: 5px; min-height: 190px; } .lt-ie9 .childSummaryBoxWrap ul li { border: 1px solid #ccc; } .childSummaryBoxWrap ul li h3 {} .childSummaryBoxWrap ul li .imgWrap { padding: 1px; border: 1px solid #cccccc; margin: 8px auto; max-width: 216px; } .childSummaryBoxWrap ul li p {} .childSummaryBoxWrap ul li a {} .newsList { clear: both; padding: 15px 0 5px; border-bottom: 1px solid #ccc; } .newsList ul { margin: 5px 0;} .newsList li { padding: 10px 5px; } .newsList.titleWithDate li span { display:block; margin-top: 5px; } .newsList p {} .newsList .readMore { padding-left: 23px; } .newsList.titleWithSummary { border: 0; } .newsList.titleWithDate .item { padding-left: 5px; } #bd .newsList.titleWithDate .itemDate { margin-top: 5px; font-weight: normal; } .newsList.single {} /* remove padding for ladning page */ body.landings .newsList { padding-top:0; } .blogList {} .blogList article { position: relative; padding: 15px 0; border-top: 1px dotted #ccc; } .blogList article:first-child { padding-top: 0; border-top: none; } .blogList .sfpostAuthorAndDate { margin: 0 0 20px;} /* todo, no html. ummm*/ /* le imgWrap sits pos ab, so need to make sure we have enough space for him (at this res) */ .blogList p { min-height: 130px; padding-top: 160px; /* space for the sqaure img to sit*/ } .blogList article.noImage p { margin-left: 0; min-height:100%; } .blogList .imgWrap { position: absolute; top: 75px; left: 19.37984496124031%; /* 75 (half of 150) / 387, should center align*/ width: 150px; max-height:150px; } /*not sure why the first child has this ???*/ .blogList article:first-child .imgWrap { top: 65px; } .taxonomyWrap { } .taxonomyWrap h2 { margin-bottom: 5px; } .taxonomyWrap ul { margin-left: 10px; } .taxonomyWrap li { margin: 7px 0; } .taxonomyWrap input.btn {} .taxonomyWrap li a {} .taxonomyWrap li span {} .taxonomyWrap + .taxonomyWrap { border-top: 1px dashed #ccc; padding-top: 10px; margin-top: 20px;} article.sfContentBlock header { min-height: 60px; margin-bottom: 10px; padding: 10px 0; border-top: 1px solid #ccc; border-bottom: 1px dotted #ccc; } #bd article header h1 { margin-bottom:5px; } article.sfnewsDetails { padding-bottom:15px; border-bottom:1px solid #ccc; } /* todo: rebuild, has changed soc med share for items live in a .sfContent, so heads up for lists as they are default styles */ #VA .socMediaShareItem { margin: 0!important; overflow: auto; padding:10px 0; border-bottom:1px solid #ccc; } #VA .socMediaShareItem li { list-style: none; float: left; } #VA .socMediaShareItem li:first-child { margin: 0; } #VA .socMediaShareItem .email { margin: 0; } #VA .socMediaShareItem .email .icon { font-size: 11px; color: #020300; background: #fbfbfb; padding: 3px 10px 3px 23px; border: 1px solid #ccc; background: -webkit-linear-gradient(top, #fbfbfb 0%, #dfdfdf 100%); background: -moz-linear-gradient(top, #fbfbfb 0%, #dfdfdf 100%); background: -ms-linear-gradient(top, #fbfbfb 0%, #dfdfdf 100%); background: -o-linear-gradient(top, #fbfbfb 0%, #dfdfdf 100%); background: linear-gradient(top, #fbfbfb 0%, #dfdfdf 100%); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } /* sod off facebook comment box */ .fb_edge_comment_widget.fb_iframe_widget { display: none!important; } /* pager || blag nav */ #VA .RadDataPager, .evilPager .evilPager, #VA ul.blogNav { padding: 10px; background: none; border: 1px solid #ccc; border-left: none; border-right: none; text-align: right; } .RadDataPager .rdpWrap.rdpNumPart {} #VA .RadDataPager *, #VA .evilPager .evilPager * { display: inline!important; float: none; padding: 0; font-size:13px; line-height:22px; /* 13 | 22 */ } #VA .RadDataPager .screenReaderHide, #VA .evilPager .evilPager .screenReaderHide { font-size: 0; line-height: 0; } #VA .RadDataPager .rdpWrap a, #VA .RadDataPager .rdpWrap a span { background: none; } #VA .RadDataPager .rdpWrap a, #VA .evilPager .evilPager a { margin-left: 4px; padding: 0 2px; } .RadDataPager .rdpWrap > span { padding-left: 5px; } /* news pager override */ /* sneaky left, middle, right alignment */ #VA ul.blogNav { text-align:center; } ul.blogNav li { display:inline; } ul.blogNav li.prev { float:left; } ul.blogNav li.prev a { margin-left: 10px; } ul.blogNav li.next { float:right; } ul.blogNav li.next a { margin-right:10px; } ul.blogNav li a { position:relative; } #VA ul.blogNav li a.nolink { background:none; border:none; color:#ccc!important; } #VA ul.blogNav li a.nolink:before { display:none; } /* tweak to the green triangle, also neads list pager to do this */ .blogNav .prev a:before, .blogNav .next a:before, .blogList + .RadDataPager a.next:before, .blogList + .RadDataPager a.prev:before, #VA .evilPager .evilPager a[id*="cmdPrev"]:before, #VA .evilPager .evilPager a[id*="cmdNext"]:before { top:3px; } .blogNav .prev a:before, .blogList + .RadDataPager a.prev:before, #VA .evilPager .evilPager a[id*="cmdPrev"]:before { border-left:none; border-right:6px solid #0d6826; left:-10px; } .blogNav .next a:before, .blogList + .RadDataPager a.next:before, #VA .evilPager .evilPager a[id*="cmdNext"]:before{ right:-10px; } .blogList + .RadDataPager a.prev { margin-left:10px; } .blogList + .RadDataPager a.next { margin-right:10px; } /* le old pager? .sf_pagerNumeric { padding: 10px 0; border: 1px solid #ccc; border-left: none; border-right: none; text-align: right; } .sf_pagerNumeric a { padding-left: 5px; } .sf_pagerNumeric .sf_PagerCurrent {}*/ .boxWithImage h3, .storyContent p { margin: 0 10px; } .boxWithImage .imgWrap { position: absolute; right: 0; bottom: 0; max-height:141px; border: none; max-width: 210px; } /* blagosphere*/ #bd .sfBlogPost header { padding-bottom:0; border-top:none; } .blogMakeComment { } /*todo move to typo*/ .blogMakeComment h3 { margin:20px 0 10px; font-size:1em; font-weight:bold; } .sfpostCommentWrap { margin-bottom:15px; padding: 10px 15px; background: #f0f0f0; color: #333; border: 1px solid #d8d8d8; } .sfpostCommentWrap ol.postCommentList { } .sfpostCommentWrap .postCommentList li { } /* cheat for not first child? */ .sfpostCommentWrap .postCommentList li label { width:160px; margin-bottom: 10px; } .sfpostCommentWrap .postCommentList li .sfFieldWrp { width:265px; } .sfpostCommentWrap .postCommentList .sfblogComment { overflow:visible; } .sfpostCommentWrap .postCommentList .sfblogComment label, .sfpostCommentWrap .postCommentList .sfblogComment .sfFieldWrp { display:block; width:100%; } .sfpostCommentWrap .postCommentList .sfblogComment .sfFieldWrp { margin-top:10px; } ul.blogComments { border-bottom:1px solid #ccc; } .blogComments li { padding:15px 5px; border-top:1px dotted #ccc; } .blogComments li .commentAuthorDate { margin-bottom:10px; } .blogComments li .commentAuthorDate * { display:inline; } .blogComments li .commentAuthor { font-weight:bold; } /* error // approved */ .commmentError, .success { margin:10px 0 5px; } .wsErrorWrap span { display:inline; } .wsErrorWrap > span, .sfSuccess { font-size:1.4em; line-height:1.2em; font-style:italic; color: #0d6826; } .wsErrorWrap ul { margin:5px 0 0 20px; } .wsErrorWrap ul li { list-style:disc outside; margin:0 0 10px; } .wsErrorWrap ul li span { font-weight:bold; } .success { display:block; } /* todo better wrap for non empty*/ .sfregisterFormWrp .sfSuccess:not(:empty) { /*padding:10px; border:1px solid #0d6826;*/ background:#cbedd9; color:#0d6826; } .noCommentsAllowed {} .noCommentsAllowed span { } /*sf BS rich editor for comments */ #VA .sfcommentEditor .reContentCell, #VA .sfcommentEditor .reContentCell iframe, .sfcommentEditor td { border: none!important; background: none; } /*TODO remove this format editor from the ctrl */ #VA .sfcommentEditor .reToolCell { display: none!important; } .sfreContentArea { height: 100%!important; padding-top: 5px; padding-bottom: 5px;} #VA .sfcommentEditor .RadEditor { min-height: auto!important; height: auto!important; min-width: auto!important;} /* border guy isnt added till > 480, use bg col for these guys*/ #VA .footerNav, #ft .copywrite { background: #464646; } #VA .footerNav ul { float: none; margin: 0 auto; display: block; } #VA .footerNav ul li { display: block; float: none; width: 100%; padding-left: 0; text-align: center; } /* states for lower, see > 480 mQ for 'tabed' style*/ #VA .footerNav li a { color: #fff; display: inline; padding: 5px; } #VA .footerNav li a span { display: inline; } #VA .footerNav li a:hover, #VA .footerNav li a:focus { color: #55009d; background: #e3e3e3; } /*todo move to typo? */ #ft .megaFooterSummary a, #ft .wsSignature a { border-bottom:1px solid transparent; } #ft .megaFooterSummary a:hover, #ft .megaFooterSummary a:focus, #ft .wsSignature a:hover, #ft .wsSignature a:focus { color:#55009d; border-color:#9e6fc7; } .donateInfo h3, .donateInfo p, .donateInfo .dynamicBtnHolder { margin-left: 6px; margin-right: 6px; } #bd div.donateInfo h2 {padding-left: 40px; } .donateInfo p { border-bottom: 1px solid #ccc; } .donateInfo p .locInfo { display: block; font-size: 0.9230769230769231em; /* 12 / 13, in a size 13 p */ } .phoneNumber a { position: relative; font-size: 2.2142857142857142857142857142857em; /*31*/ color: #252525; cursor: text; } .megaFooterSummary, .megaFooterSummary a { color: #252525; } .megaFooterSummary h5 { font-weight: bold; margin: 0;} #VA .megaFooterSummary ul { margin: 0 0 30px 8px; } #VA .megaFooterSummary li { margin: 2px 0; } #VA .megaFooterSummary li:first-child { margin: 0 0 2px; } .megaFooterSummary a { font-size: 12px; position:relative; } /* "-" is no good as reads as "dash" for SR, use a box */ /* SP - 12-09-14 - VA wants dashes removed... they suck */ /*.megaFooterSummary li a:before { content: ""; position:absolute; top: 7px; left: -7px; display:block; width:4px; height:1px; background:#252525; }*/ /* Links and Content awesomeness widgeot*/ section.sectionSummary { margin-bottom: 20px; } .sectionSummary p { margin-bottom: 1em; } .sectionSummary ul {} .sectionSummary li p { margin: 5px 0 0; color: #212121 } #VA .sectionSummary li { padding: 10px 0 10px 5px; clear: both;} #VA .sectionSummary li:first-child { border-top: 1px dotted #b7b7b7; } #VA .sectionSummary li.featured { list-style: none; overflow: auto; padding: 0 0 10px; border-top: none; } .sectionSummary li a { border-bottom: 1px solid #55009d;} .sectionSummary li.featured p { margin: 5px 0; line-height: 18px; } .sectionSummary li .imgWrap { float: left; margin-right: 15px; width: 117px; height: 77px; } /* header sits outside of the box on this one */ .sectionSummary.linkContentVar1, .whyIsThisNotOneControl { position: relative; margin-top: 32px; padding: 10px; background: #f3f3f3; border: 1px solid #d7d7d7; } .sectionSummary.linkContentVar1 header { position: absolute; top: -27px; left: 0; } .sectionSummary.linkContentVar1 h2 { border: none; margin: 0; } .sectionSummary.linkContentVar2 { margin: 0 0 10px; padding: 1px; } /* green header w white h2*/ .sectionSummary.linkContentVar2 h2 { margin: 0; padding: 4px; background: #0d6826; color: #fff; font: 18px/18px sans-serif; border: 0; } /*todo move to universal li styles for this ctrl */ /* we cannot get the disc in the right spot, push the UL then -ve on the li */ #VA .sectionSummary.linkContentVar2 ul { margin-left: 30px; padding-right: 5px;} #VA .sectionSummary.linkContentVar2 li { margin-left: -10; border: none; padding: 5px 0; margin-left: -5px; list-style-position: outside; } /* this guy is imgs w text link as caption, overrides all styles*/ #VA .linkContentVar3 { position: relative; margin: 0 0 40px; clear:both; } #VA .linkContentVar3:before { bottom: -20px; } #VA .linkContentVar3 ul {} #VA .linkContentVar3 li { position:relative; list-style:none; } /*#VA .linkContentVar3 li:first-child { margin:0; border:none; } */ #VA .linkContentVar3 li a { } #VA .linkContentVar3 li a .linkText { position:absolute; right: 1px; bottom: 1px; left: 1px; padding:5px 10px; background: #333; background:rgba(0,0,0,0.6); -webkit-transition: background 0.3s linear; -moz-transition: background 0.3s linear; -ms-transition: background 0.3s linear; -o-transition: background 0.3s linear; transition: background 0.3s linear; } /* padded box http://daverupert.com/2012/04/uncle-daves-ol-padded-box/ technique*/ #VA .linkContentVar3 li a .imgWrap { float: none; margin: 0; width: 100%; height:0; padding-bottom: 60.44444444444444%; /* 225/136 */ } #VA .linkContentVar3 .imgWrap img { width: 100%; } /*region L&C variants */ #VA .linkContentWithBorder li { border-bottom: 1px dotted #b7b7b7; } #VA .linkContentWithBullet li { list-style: disc inside; } /*#endregion */ /* $our stories / $case study */ .caseStudyFilterWrap { text-align: right; } .caseStudyFilterWrap * { display: inline-block; margin-left: 10px; } .caseStudyFilterWrap option { display: block; } .caseStudyFilterWrap label { margin: 0; } .caseStudyFilterWrap select { width: 210px; } .caseStudyFilterWrap input { } .caseStudyListWrap { margin: 10px 0 0; max-width: 480px; } .caseStudyListWrap article, .caseStudySmallListWrap article { position: relative; min-height: 100px; } /* <9 doesnt understand teh padded box =[ */ .lt-ie9 .caseStudyListWrap article .imgWrap, .lt-ie9 .caseStudySmallListWrap article .imgWrap { height: 102px; width:138px; padding-bottom:0; } .caseStudyListWrap article h3,.caseStudySmallListWrap article h3 { margin-bottom: 5px; } /*todo: make imgwrap max-width as just width 100% ?*/ .caseStudyListWrap article .imgWrap img, .caseStudySmallListWrap article .imgWrap img { width: 100%; } /* todo: rem .caseStudyListWrap article h3, .caseStudyListWrap article .category, .caseStudyListWrap article p { margin-left: 160px; }*/ .caseStudyListWrap article .category { font-weight: bold; display: block; margin-bottom: 5px; } .caseStudyListWrap article p { } /* remove teh padding if there is no pos-ab img*/ .caseStudyListWrap article.item.noImage, .caseStudySmallListWrap article.item.noImage { padding-left: 10px; } .caseStudySmallListWrap { } .caseStudySmallListWrap article .imgWrap { width: 83px; height: 80px; } .caseStudySmallListWrap article h3, .caseStudySmallListWrap article p { margin-left: 93px; } .caseStudySmallListWrap article p { font-size: 12px; } .caseStudyListWrap ~ .evilPager, .caseStudySmallListWrap ~ .evilPager { margin-top: 20px; } .copywrite { height: 19px; padding: 8px 0; color: #fff; text-align: center; border-top: 1px dashed #fff; font-size: 0.7857142857142857em; /* 11*/ } .radio a, .lightACandle a { padding-top: 15px; padding-bottom: 15px; } .event { padding-bottom: 11px; margin-bottom: 10px; } .event a { display:block; } .event .contentWrapper { margin: 0 10px; } .event a .imgWrap { margin: 0 0 10px; } .event a img { border:none!important; outline:0 none!important; } .event span.linkText, .yourDonationsHelpUsRotatorWrap span.linkText { line-height: 1.3em; } .yourDonationsHelpUsRotatorWrap img { max-height:160px; } .sfeventDetails { } .sfeventDetails header {margin: 10px 0; padding: 10px 0; border-top: 1px dotted #b6b6b6; border-bottom: 1px dotted #b6b6b6; } .sfeventDetails .eventInformationWrap { position: relative; overflow: auto; padding: 10px; background: #f0f0f0; border: 1px solid #d7d7d7; } .sfeventDetails .eventInformationWrap:after { content: ""; position: absolute; display: block; top: 10px; bottom: 10px; left: 50%; width: 1px; background:#fff; border-left: 1px solid #d7d7d7; } .sfeventDetails .eventInformationWrap div { width:45%; } .sfeventDetails .eventInformationWrap .info1 { float: left; } .sfeventDetails .eventInformationWrap .info2 { float: right; } .sfeventDetails .eventInformationWrap .infoLabel, .sfeventDetails .eventInformationWrap h4 { margin-top: 10px; } .sfeventDetails .eventInformationWrap .infoLabel span { display: block; margin-top: 5px; } .sfeventDetails .eventInformationWrap { } .sfeventDetails .sfeventContent { clear: both; } #VA .sfeventDetails .sfeventContent h2 { font-weight: bold; margin-top: 20px; } article.sfeventDetails ~ .dynamicBtnHolder:before, .caseStudyFilterWrap:before { top: 0; } article.sfeventDetails ~ .dynamicBtnHolder:after, .caseStudyFilterWrap:after { bottom: 0; } .whyIsThisNotOneControl:before { top: -35px; } /*#region career & volunteer lists / items */ .jobListWrap { } #VA .jobListWrap h2 { margin-top: 30px; } .jobListWrap li a { display: block; margin-left: 20px; } .jobListWrap li a span { display: inline; } .jobListWrap li a, .jobListWrap li a .itemCount { color: #252525; } .jobItemWrap header, .caseStudyItemWrap header { border-bottom: 1px dotted #ccc; margin-bottom: 20px; padding-bottom: 5px; } .jobItemWrap .jobInfo , .jobItemWrap .jobClose { display: block; margin:10px 0; } .volunteerList ul { margin: 0 0 20px; } /* make last child go solid rather than a border on the ul, giving a double effect */ .volunteerList ul li:last-child { border-bottom-style: solid; } .volunteerList li a .itemCount { margin-left: 5px; } .volunteerList li a:before { top: 3px; left: -10px; } .backToLinkWrap { margin:0 0 10px; padding:10px 0; border: 1px solid #ccc; border-left: none; border-right: none; } .backToLinkWrap a { margin-left: 20px; } .backToLinkWrap a:before { top: 3px; left: -10px; } #VA .careersByStateList h2 { margin: 0 0 10px; } #VA .careersByStateList li a { display: inline; margin-left: 0; } #VA .careersByStateList .linkText { font-weight: bold; } /*#endregion */ /*#region people list and item */ .peopleItem .imgWrap, .personItemPage .imgWrap { width: 109px; height: 144px; } .peopleList article { position: relative; min-height: 155px; } .peopleList header, .peopleList .qualifications, .peopleList .personSummary { display: block; margin-left: 130px; } .peopleList .qualifications { margin-top: 8px; margin-bottom: 8px;} .peopleList .personSummary { } .peopleList h2 { padding-top: 5px; } .peopleList .imgWrap { position: absolute; top: 15px; left: 5px; } /*item page */ .personItemPage { } .personItemPage .qualifications { display: block; margin: 0 0 10px; padding: 0 0 15px; border-bottom: 1px dotted #ccc; } .aboutPersonWrap { } .aboutPersonWrap .imgWrap { float: right; margin:0 0 15px 15px; } .aboutPersonWrap .personDetail {} /*#endregion */ .yourDonationsHelpUsRotator { position: relative; } .yourDonationsHelpUsRotator h2 { padding-left: 15px; } .yourDonationsHelpUsRotator article a { display: block; margin: 0 10px 5px; } .yourDonationsHelpUsRotator article .imgWrap { margin: 0 0 5px; } .yourDonationsHelpUsRotator article .linkText { display: inline; /*width: 160px;*/ } .yourDonationsHelpUsRotator .controlsWrap { position: absolute; right: 19px; bottom: 5px; width: 25px; height: 15px; } .yourDonationsHelpUsRotator .controlsWrap a { float: left; } .yourDonationsHelpUsRotator .controlsWrap .yourDonationsNextSlide { float: right; } .yourDonationsHelpUsRotator .controlsWrap a, .yourDonationsHelpUsRotator .controlsWrap .hc-img { display: block; width: 7px; height: 12px; } .yourDonationsHelpUsRotator .controlsWrap a:hover .hc-img img, .yourDonationsHelpUsRotator .controlsWrap a:focus .hc-img img { left: -96px; } #VA .whyIsThisNotOneControl { margin: 50px 0 20px; } #VA .whyIsThisNotOneControl .info1 { padding: 10px 0 10px 10px; } #VA .whyIsThisNotOneControl .info2 { padding: 10px 10px 10px 0; } .whyIsThisNotOneControl section header { position: absolute; top: -27px; width: 100%; } .whyIsThisNotOneControl header h2 { margin: 0; padding: 0; border: none; } .whyIsThisNotOneControl .imgWrap { width: 194px; height: 141px; } .whyIsThisNotOneControl .audioBooksList { } .whyIsThisNotOneControl .audioBooksList { } .whyIsThisNotOneControl .audioBooksList { } .whyIsThisNotOneControl .btn { font-size: 0.8571428571428571em; /*12*/ } .docList li, .docList li a { color: #252525; } .checkoutAuxInfo { padding: 8px; } .checkoutAuxInfo h2 { margin-bottom: 5px; } .checkoutAuxInfo .info1 { } #VA .checkoutAuxInfo .info1 .hc-img { display: inline-block; } #VA .checkoutAuxInfo .info1 p { padding-left: 2px; padding-right: 2px; border-bottom: 1px dotted #ccc; font-size: 12px; } .checkoutAuxInfo .info2 { margin: 15px 0 40px; } .checkoutAuxInfo .info2 h2 + p { margin: 0 0 20px; } .checkoutAuxInfo .info1 p, .checkoutAuxInfo .info2 h2 + p, .checkoutAuxInfo .info3 h2 + p { font-weight: bold; } .checkoutAuxInfo .info2 a { font-weight: normal; } .checkoutAuxInfo .securepay { margin-left: 40px; } .checkoutAuxInfo .imgWrap { width: 204px; height: 136px; margin: 10px 0; } .checkoutAuxInfo .imgWrap + p { font-weight: bold; } .purchaseLotteryInfoWrap { clear: both; margin: 0 0 20px; } .purchaseLotteryInfoWrap header { margin: 10px 0; padding-bottom: 5px; border-bottom: 1px dotted #b7b7b7; } .purchaseLotteryInfoWrap header h2 { } .purchaseLotteryInfoWrap .imgWrap { float: left; width: 208px; height: 148px; } .purchaseLotteryInfoWrap .dynamicBtnHolder { margin: 35px 0 10px; } .purchaseLotteryInfoWrap .sfContentBlock { text-align: center; } .purchaseLotteryInfoWrap .sfContentBlock span { display: block; font-style: italic; font-size: 13px; } .purchaseLotteryInfoWrap .dynamicBtnHolder, .purchaseLotteryInfoWrap .sfContentBlock { width: 170px; margin-left: 250px; } .purchaseLotteryWrap { } .purchaseLotteryWrap fieldset { } .purchaseLotteryWrap fieldset ul { margin: 10px 0; } .purchaseLotteryWrap fieldset ul li { padding: 10px 5px; font-size: 13px; } .purchaseLotteryWrap fieldset ul li:nth-child(odd) { background: #f4f4f4; } #VA .purchaseLotteryWrap li .sfTxt, #VA .purchaseMonthWrap article .sfTxt { width: 40px; margin-right: 10px; } .purchaseMonthWrap { margin-top: 20px; padding-top: 20px; } .purchaseMonthWrap:before { top: 0; } .purchaseMonthWrap .listWrap { margin: 10px 0 0; } .purchaseMonthWrap .listWrap article { position: relative; clear: both; } .purchaseMonthWrap .listWrap header { margin: 0 0 10px ; } .purchaseMonthWrap .listWrap .item .imgWrap { width: 113px; height: 94px; margin: 0 auto 10px; line-height: 91px; text-align: center; } .purchaseMonthWrap .listWrap .item .imgWrap img { max-height: 100%; display: inline-block; } .purchaseMonthWrap .listWrap article .btn { display: block; margin-top: 10px; } .purchaseMonthWrap article.anyAmount input { width: 160px; } .landingChildrenLinks li { padding-left:10px; list-style: disc inside; } .contactDetailsWrap header ~ * { padding: 0 10px; } .contactDetailsWrap h3 { margin-bottom: 10px; font-weight: bold; } .contactDetailsWrap span { display: block; margin-bottom: 10px; font-size: 0.9285714285714286em; /* 13 */ } .contactDetailsWrap span + span { margin-bottom: 15px; } .contactDetailsWrap acronym { font-weight: bold; } .contactDetailsWrap ul { margin-bottom: 10px; } .contactDetailsWrap li { display: inline-block; } .contactDetailsWrap li + li { margin-left: 15px; } .contactDetailsWrap li a { display: block; } .lt-ie8 .contactDetailsWrap ul { overflow: auto; } .lt-ie8 .contactDetailsWrap li { float: left; } #bd .hearThisBox { padding: 0; } #bd .hearThisBox a { padding: 10px; } #bd .hearThisBox p { margin: 0 0 10px; font-weight: bold; color:#0d6826; } #bd .hearThisBox a span { position: relative; display: inline-block; margin-left: 15px; } .eNewsSubWrap label { width: 150px; } .eNewsSubWrap .sfFieldWrp { width: 90%; max-width: 300px; } .eNewsSubWrap .checkboxWrap label { width: auto; } .vaContent .shopHeader { margin: 0 0 10px; border-bottom: 1px dotted #b7b7b7; position: relative; } .vaContent .shopHeader fieldset { margin-bottom: 60px; } .shopHeader .sfsearchSubmit { height: 25px; } /* Generic landing links */ .landingLinks { margin: 0 0 20px; } .sfContentBlock ~ .landingLinks { padding-top: 10px; } .productsWidgey { clear: both; } .productsWidgey h2 { margin: 20px 0 10px; } .productsListWrap { padding-top:1px; } .productsListWrap h3 a .linkText { font-weight: bold; /*text-decoration:underline!important; border: none!important; */} /* JJ wont let me use li's anymoar =[ */ .productsListWrap article.item { position: relative; margin-bottom: 20px; } .productsListWrap article.item:first-child { margin-left: 0; padding-left: 1px; border-left: none; } .productsListWrap .itemWrap { position: relative; margin: 0 7px; } .productsListWrap .imgWrap { width:153px; height:153px; margin-bottom: 10px; border: 4px solid #fff; } .productsListWrap h3 { height: 220px; margin: 0 0 10px; } .productsListWrap h3 a { display: block; } .productsListWrap h3 a img { width: 100%; } /*.productsListWrap h3 a .linkText { display: block; height: 48px; }*/ .productsListWrap .item .itemDescWrap { height: 220px; overflow: hidden; font-size: 16px; line-height: 20px;} /* low stock span, removes from flow, saves having to adjust fixed heights etc */ .productsListWrap .lowstock { float: left; font-weight: bold; } .productsListWrap .productInfo span { font-weight: bold; } /* Handles SPECIALS */ .productsListWrap .productInfo .sfNewPrice { display: block; } /* 20px bottom padding for pos:ab "item added to cart*/ .productsListWrap .item .productInfo { position: relative; margin: 25px 0 0; padding: 8px 8px 5px; border-top: 1px dotted #ccc; border-bottom: 1px solid #ccc; background:#f2f2f2; min-height: 38px; background: -webkit-linear-gradient(top, #fff 0, #f2f2f2 100%); background: -moz-linear-gradient(top, #fff 0, #f2f2f2 100%); background: -ms-linear-gradient(top, #fff 0, #f2f2f2 100%); background: -o-linear-gradient(top, #fff 0, #f2f2f2 100%); background: linear-gradient(top, #fff 0, #f2f2f2 100%); } .productsListWrap .productInfo .priceWrap, .productsListWrap .productInfo .addToWrap { display: inline-block; } .productsListWrap .productInfo .addToWrap { float: right; } .productsListWrap.bestSellerList .addToWrap { float: none; } .productsListWrap .derp { position: absolute; top: 6px; right: 5px; } /* IE7 fix*/ /*.lt-ie8 .productsListWrap .productInfo { overflow: auto; }*/ .lt-ie8 .productsListWrap .productInfo .addToWrap { float: right; } .lt-ie8 .productsListWrap .productInfo .addedToCart { margin-left: 10px; } .lt-ie8 .productAlt .productInfo .addToWrap, .lt-ie8 .productsListWrap .productInfo .priceWrap { float: left; } .productsListWrap.inCatList { overflow: visible; } .productsListWrap.inCatList h3 { margin-bottom: 20px; } /* fix product list full*/ .productsListWrap.inCatList article { height: 520px; margin-bottom: 30px; } .productsListWrap.inCatList article:first-child { border-left: 1px solid #e6e6e6; margin-left: 10px; padding-left: 10px; } /*======================== store support =========================*/ .storeSupportWrap { clear: both; background:#edeaf1; margin-top: 20px; padding: 10px; border: 1px solid #433477; } .storeSupportWrap .info1, .storeSupportWrap .info2 { margin-bottom: 20px; } .storeSupportWrap h3 { position: relative; font-size: 18px; margin-bottom: 10px; } .storeSupportWrap .info1 p { margin-left: 55px; } .storeSupportWrap .info1 p strong { text-transform:uppercase; } .storeSupportWrap .info2 ul { margin-left: 65px; } .storeSupportWrap .info2 ul li { margin: 3px 0; } .storeSupportWrap small { display: block; clear: both; font-size: 0.9em; } /* todo: move article.item to oO Css and look at article header issues */ article.item {} article.item header { margin-bottom: 5px; } article.item .itemDate { display: block; margin-bottom: 5px; font-weight: bold; font-size: 1em; line-height: 1.4em; } /* to err is human as to arr is to pirate */ #VA .sfError, .sfErrorSummary, #VA .sfFormsEditor .sfContentBlock.errorPanel, #VA .sfContentBlock.errorPanel h2, .lt-ie8 div[class^="violationMessage"] { color: #C00!important; clear: both; } /*#region product description page */ .sfproductDetailsWrp { } .storeProductDescription { overflow: visible;/*auto*/ } .storeProductDescription header { margin: 0 0 10px; } .storeProductDescription header h1 { } .storeProductDescription .productInfoWrap .imgWrap { margin-bottom: 10px; } .storeProductDescription .productInfoWrap img { margin: 0 auto; } .lt-ie9 .storeProductDescription .productInfoWrap img { width: auto!important; } .storeProductDescription .imgWrap { float: left; width: 205px; height: 205px; margin-right: 20px; border: 6px solid #fff; } .storeProductDescription .imgWrap a[rel="fancybox"] { display: block; } .storeProductDescription .productInfoWrap .sfproductDescription { clear: left; margin-bottom: 10px; } .storeProductDescription .productInfoWrap .lowstock { display: block; margin: 5px 0; font-weight: bold; } .storeProductDescription .prodPrice { float: left; width: 85px; font-size: 18px; } .storeProductDescription .prodPrice .sfRegPrice { font-weight: bold; line-height: 25px; } .storeProductDescription .sfAddToCartWrp { float: right; width:125px; margin-right: 10px; text-align: right; } .storeProductDescription .sfAddToCartWrp label { float: left; height: 25px; line-height: 25px; text-transform: uppercase; } .storeProductDescription .sfAddToCartWrp .sfTxt { float: right; width: 50px; text-align: right; } .storeProductDescription .sfAddToCartWrp .sfAddToCartBtn { clear: both; margin:10px 0; } /* product varients */ .sfproductDetailsWrp .sfproductOptions { clear: both; } .sfproductOptions .sfproductOptionsList { margin: 10px 0; } .sfproductOptions .sfproductOption { margin-bottom: 10px; } .sfproductOptions .sfproductOptionsList label { width: 100px; } .sfproductOptions .sfproductOptionsList select { max-width: 300px; } /* also on checkout sidebar*/ .storeProductDescription .cartInfoWrap p, .checkoutAuxInfo .info1 p { clear: both; border-top: 1px dotted #ccc; padding:8px 5px; } .storeProductDescription .cartInfoWrap p ~ p, .checkoutAuxInfo .info1 p { font-size: 13px; } .storeProductDescription .cartInfoWrap .icon, .checkoutAuxInfo .info1 p .icon{ float: left; margin-right: 5px; } /* group smaller var */ #VA .productAlt article.item { padding: 3px; border: 1px solid #cecece; background: #fff; } #VA .productAlt article .productInfo { position: absolute; bottom: 4px; margin: 0; padding: 0; background: none; border: none; } #VA .productAlt article .linkText { height: auto; } #VA .productAlt article .productInfo .priceWrap { display: block; width: 100%; } #VA .productAlt article .lowstock { float: none; margin-left: 105px; display: block; margin-bottom: 5px; } .productsListWrap.productAlt imgWrap { margin-bottom: 0; } .productsWidgey .bestSellerList { overflow: visible; padding: 5px; margin: 0; border: 1px solid #cecece; background: #f2f2f2; } #VA .productsWidgey .bestSellerList article.item { float: none; width: auto; min-height:92px; margin:10px 0 0; } #VA .productsWidgey .bestSellerList article.item:first-child { margin: 0; } /* border guy b/w the articles */ #VA .productsWidgey .bestSellerList article:before { content: ""; position: absolute; display: block; top: -6px; left: 0; width: 100%; height: 0; border-bottom: 1px dotted #cecece; } #VA .productsWidgey .bestSellerList article.item:first-child:before { display: none; } #VA .bestSellerList .item .imgWrap { position: absolute; top: 0 ; left: -0px; width: 90px; height: 90px; padding: 4px; background: #fff; border: none; border-right: 1px solid #cecece; } .bestSellerList article h3 { margin-left: 105px; } /* todo : make fixed height? */ .productsListWrap.productAlt article h3 { height: auto; } /* put back into normal flow if we have a long heading, don't care about bottom alignment */ #VA .bestSellerList article .productInfo { position: static; margin-left: 105px; } #VA .alsoBoughtList { margin: 0 0 15px; } #VA .alsoBoughtList article { width: 102px; height: 260px; } #VA .alsoBoughtList article .imgWrap { width: 97px; height: 97px; border-bottom: 1px solid #cecece; } #VA .alsoBoughtList article .linkText { margin-top: 5px; } #VA .alsoBoughtList article .productInfo { bottom: 0; } #VA .alsoBoughtList.productAlt article .lowstock { margin-left: 0; } /* item added to cart, thanks for no style hooks there SF >< need to overlay in a padding for x4 folks */ .productsListWrap .productInfo .addToWrap span { color: #0d6826; text-align: right; } /* cannot have offsets and then remove them, so only apply to the non-sidebar guys*/ .vaContent .productsListWrap .productInfo .addToWrap span { position: absolute; right: 15px; bottom: 0; left: 0; } /* return flow, -ve mar to push out over img */ .vaSidebar .productsListWrap .productInfo .addToWrap span { position: relative; display: block; margin: 5px 15px 0 -100px; z-index: 10; } /*#endregion */ ul.productReviewList { margin-top: 10px; } /*.shopHeader is his rel offset */ .sfcartSummaryWrp.sfcartSummaryExpandableWrp { top: 0; right: 10px; max-width: 320px; z-index: 40; } .sfcartSummaryWrp .sflnkToggleCartWrp { } .sfcartSummaryWrp a.sflnkToggleCart { position: relative; display: block; width: 260px; height: 63px; padding: 0 0 20px; color: #fff; background:#55009d; border: 2px solid transparent; border-top: none; background: -webkit-linear-gradient(top, #55009d 0%, #462474 100%); background: -moz-linear-gradient(top, #55009d 0%, #462474 100%); background: -ms-linear-gradient(top, #55009d 0%, #462474 100%); background: -o-linear-gradient(top, #55009d 0%, #462474 100%); background: linear-gradient(top, #55009d 0%, #462474 100%); -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -ms-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } a #js-toggleState { position: absolute; right: 35px; bottom: 15px; display: block; margin: 0; text-align: right; } /* hover states swap when expaned oO */ .sfcartSummaryExpanded a #js-toggleState { bottom: 11px; } .sfcartSummaryWrp a.sflnkToggleCart:hover, .sfcartSummaryWrp a.sflnkToggleCart:focus { border-color: #55009d; } .sfcartSummaryWrp .sflnkToggleCart:after { content:""; position: absolute; right: 10px; bottom: 10px; display: block; width: 0; height: 0; border: 8px solid transparent; border-top-color: #fff; } .sfcartSummaryExpanded .sflnkToggleCart:after { border-bottom-color: #fff; border-top:none; bottom: 15px; } /* swap color of triangle on hover */ .sfcartSummaryWrp .sflnkToggleCart:hover:after, .sfcartSummaryWrp .sflnkToggleCart:focus:after { border-top-color:#55009d;} .sfcartSummaryExpanded .sflnkToggleCart:hover:after, .sfcartSummaryExpanded .sflnkToggleCart:focus:after { border-bottom-color:#55009d; } .sfcartSummaryWrp a.sflnkToggleCart * { display: block; margin: 0 0 0 60px; } .sfcartSummaryWrp .sflnkToggleCart .sflnkToggleCartLbl { margin-top: 15px; } a.sflnkToggleCart .sfcartSummaryItemsCount { } .sfcartSummaryWrp .sfcartSummaryDetailsWrp { position: relative; padding:10px; background: #fff; border: 2px solid #55009d; z-index: 10; } /* when open */ .sfcartSummaryExpanded h2 { margin: 0 0 5px; } .sfcartSummaryExpanded a.sflnkToggleCart { position: absolute; right: 0; bottom: -83px; } .sfcartSummaryDetailsWrp .sfminiShoppingCart td { padding: 10px 5px; vertical-align: top; } .sfcartSummaryDetailsWrp .sfminiShoppingCart td , .sfcartSummaryDetailsWrp .sfPriceTotal { border-top: 1px dotted #ccc; } .sfcartSummaryDetailsWrp .sfminiShoppingCart .sfItmPriceCol { font-weight: bold; width: 80px; } .sfcartSummaryDetailsWrp .sfPriceTotal { padding: 10px 0; border-bottom:1px dotted #ccc; text-align: right; font-weight: bold; } .sfcartSummaryDetailsWrp .sfPriceTotal strong { color: #252525; } .sfcartSummaryDetailsWrp .sfcartSummaryBtnsWrp { margin: 10px 0 0; } /* was inline-block, need to float*/ .lt-ie8 .sfcartSummaryDetailsWrp .sfcartSummaryBtnsWrp { overflow: auto; } .lt-ie8 .sfcartSummaryDetailsWrp .sfcartSummaryBtnsWrp .sflnkToCart { float: left; } .sfcartSummaryDetailsWrp .sfcartSummaryBtnsWrp input { float: right; } .sfcartSummaryDetailsWrp span.sfDisplayNone { display: none; } /*#region shopping cart */ .wsShoppingCart { margin: 10px 0 0; border-top: 1px dotted #b7b7b7; } .sfshoppingCartWrp h1.sfshoppingCartTitle { display: inline-block; margin: 0 10px 0 0; padding: 0; background: none; color: #0d6826; font-size: 1.428571428571429em; /* 20 */ text-shadow: none; } .sfshoppingCartWrp .sfProductsInCart { display: inline-block; font-weight: bold; } #bd .wsShoppingCart tr th { padding-top: 15px; border-bottom: 1px solid #cecece; } .wsShoppingCart table tr td { padding: 10px 5px; border-bottom: 1px dotted #b7b7b7; text-align: right; vertical-align: top; } .wsShoppingCart table th { font-weight: bold; } /* img is forced dims from thumbnail*/ .wsShoppingCart table .imgWrap { width: 100px; height: 100px; padding: 4px; background: #fff; border: 1px solid #cecece; } .wsShoppingCart table .sfItmTmbCol { width: 110px; padding: 5px 0; } .wsShoppingCart table .sfItmTitleCol { width: 360px; text-align: left; } .wsShoppingCart table th.sfItmTitleCol { padding-left: 15px; } .wsShoppingCart table .sfItmQuantityCol { width: 40px; } .wsShoppingCart table .sfItmQuantityCol input { text-align: right; } .wsShoppingCart table .sfItmTitleWrp { margin:0 0 20px 10px; font-weight: bold; } .wsShoppingCart table .removeWrap { margin-left: 30px; } .wsShoppingCart .removeWrap a { padding: 0; } .sfShoppingCartCouponEntryField { display: none; } .sfshoppingCartBtnsWrp { overflow: auto; } .sfshoppingCartBtnsWrp .dynamicBtnHolder { float: left; } .sfshoppingCartBtnsWrp .proceedWrap { float: right; } .sfShoppingCartGridFooter .sfTotalRowWrp { margin: 20px 20px 10px 0; text-align: right; font-weight: bold; } .sfShoppingCartGridFooter .sfTotalRowWrp .sfPriceTotal { font-size: 17px; } /*#endregionn*/ /*#region checkout stages */ .sfcheckoutMulitPage header { } .sfcheckoutMulitPage header h1, .sfcheckoutMulitPage header h2 { margin-bottom: 10px; padding: 20px 0 10px 10px; border-bottom: 1px dotted #b7b7b7; background: none; font-size: 20px; text-shadow: none; } .sfcheckoutMulitPage header span { font-weight: bold; } /* align w step heading */ .sfcheckoutMulitPage section > fieldset, .sfStep2Wrp section > h3, .sfStep2Wrp .sfcheckoutFormItmCheckboxList, .sfStep4Wrp .sfcheckoutPreviewWrp .sfcheckoutPreviewAddress { padding-left: 10px; } .sfcheckoutMulitPage .sfcheckoutFormList, .checkoutOnePagerWrap fieldset { width:450px; display: block; } .sfcheckoutMulitPage .sfcheckoutBtnsWrp { clear: both; margin: 10px 0 0; } .sfcheckoutFormWrp .sfcheckoutFormList li label { width: 110px; } .sfcheckoutFormWrp .sfcheckoutFormList li input { width: 320px; } .sfcheckoutFormWrp .sfcheckoutFormList .sfError { display: block; width: 440px; } .sfcheckoutFormWrp .sfcheckoutFormList .sfPaymentMethodList li input { width: 15px; } .sfcheckoutFormWrp .sfcheckoutFormList .securityCode .sfTxt { width: 70px; } /*SF, y u no consistant! >< */ .sfcheckoutMulitPage .sfStep2Wrp { } /* pos ab as they aren't siblings. why these aren't the same level of nesting is beyond me */ .sfcheckoutMulitPage .sforderSummary, .sfcheckoutPreviewProduct { padding-left: 10px; border-left: 1px solid #ccc; } /* todo: MQ*/ .sfcheckoutMulitPage .orderSummaryWrap { width: 210px; float: right; } /* bs summary table */ .sfcheckoutMulitPage .sfClearfix { position: relative; } .sforderSummaryTable { width: 100%; } .sforderSummaryTable th, .sfStep2Wrp .sforderSummaryTable td, .sfStep4Wrp .sfcheckoutTotalPriceWrp li { padding: 8px 4px; } .sforderSummaryTable th { text-align: left; } .sforderSummaryTable td { text-align: right; font-weight:bold; } .sforderSummaryTable .sforderSummaryTotal th, .sforderSummaryTable .sforderSummaryTotal td, ul .sfcheckoutTotal { border-top: 1px solid #666; } .sforderSummaryTotal th { font-size: 15px; font-weight: bold; } .sforderSummaryTotal .sfPrice, ul .sfcheckoutTotal { font-size: 20px; } .sfStep1Wrp section header { position: relative; } .sfStep1Wrp section header .sfcheckoutFormItmCheckbox { position: absolute; top: 18px; left: 170px; } .sfStep2Wrp .sfcheckoutFormItmCheckboxList li { margin:10px 0; } .sfStep2Wrp .sfcheckoutFormItmCheckboxList label { font-weight: bold; } .sfStep2Wrp .sfcheckoutFormItmCheckboxList .servicePrice { font-weight: normal; } .sfcheckoutMulitPage ol.sfPaymentMethodList li { padding: 0; border: none;} li .sfCreditCardExpirationMonth { margin-right: 10px; } .sfcheckoutPaymentFormWrp .sfCreditCardExpirationMonth, .sfcheckoutPaymentFormWrp .sfCreditCardExpirationYear { width: 80px!important; } .sfStep4Wrp .sfcheckoutPreviewAddress { margin-bottom: 40px; float: left; font-size: 0.9em; /* reduce everything slightly, thankyou relative sizing of children! */ } .sfStep4Wrp .sfcheckoutPreviewAddress h2 { clear: both; } .sfStep4Wrp .sfcheckoutPreviewAddress h2 ~ h2 { margin-top: 50px; } .sfStep4Wrp .sfcheckoutPreviewAddress h2 + * { font-weight: bold; } .sfStep4Wrp h2 { margin-bottom: 18px; font-size: 1.285714285714286em; /*18*/font-weight: bold; } .sfStep4Wrp .sfcheckoutPreviewAddress address { float: left; margin: 0 0 50px; } .sfStep4Wrp .sfcheckoutPreviewAddress address + address { margin-left:10px; } .sfStep4Wrp .sfcheckoutPreviewAddress address span { display: block; } .sfStep4Wrp .sfcheckoutPreviewAddress h2 ~ div { display: inline; } /* the table is now not a table, wtf */ .sfStep4Wrp .sfcheckoutPreviewProduct { margin: 0 0 70px; float: right; width: 350px; } .sfStep4Wrp .sfcheckoutBtnsWrp { clear: none; } .sfcheckoutPreviewProduct table { } .sfcheckoutPreviewProduct table th { padding: 5px; color: #0d6826; font-weight: bold; } .sfcheckoutPreviewProduct table td { padding: 5px; text-align: right; font-size: 0.8571428571428571em; /*12*/} .sfcheckoutPreviewProduct table .sfItmTitleCol { text-align: left; } /* not sure how to remove*/ .sfcheckoutPreviewProduct table .sfItmTitleCol + *, .sfcheckoutPreviewProduct table .sfItmQuantityCol + * { display: none; } .sfStep4Wrp ul.sfcheckoutTotalPriceWrp { font-weight: bold; } .sfStep4Wrp .sfcheckoutTotalPriceWrp li { } .sfStep4Wrp .sfcheckoutTotalPriceWrp li span { } .sfStep4Wrp .sfcheckoutTotalPriceWrp li .sfAmount, .sfStep4Wrp .sfcheckoutTotalPriceWrp li .sfPrice { float: right; color: green; font-weight: normal; } .sfStep4Wrp .sfcheckoutTotalPriceWrp .sfcheckoutTotal .sfPrice { font-weight: bold; } .sfStep4Wrp .sfcheckoutTotalPriceWrp li.sfcheckoutDiscounts { display: none; } /* fake step 5 which is actually a custom ctrl*/ .ws-thank-you { } .ws-thank-you + div { display: none; } .ws-thank-you .sfcheckoutPreviewAddress { margin: 0; } .no-js .wsStep5 .dynamicBtnHolder { display: none; } .wsStep5 .dynamicBtnHolder { margin: 0 0 30px; } /* make call to action after details sit to the side */ .wsStep5 ~ span .sectionSummary { float: left; } /* progress indicator */ .progressWrap { } ul.checkoutProgress { position: relative; overflow: auto; margin-bottom: 10px; padding: 10px 0; border-top: 1px dotted #b7b7b7; border-bottom: 1px solid #b7b7b7; } ul.checkoutProgress:before { content: ""; position: absolute; display: block; top: 30px; right: 165px; left: 30px; height: 2px; background: #d9d9d9; } .threeSteps .checkoutProgress:before { right: 425px; } .checkoutProgress li { position: relative; float: left; width: 95px; margin-left: 5%; color: #6a6a6a; text-align: center; z-index: 2; } .checkoutProgress li:first-child { margin-left: 0; } .checkoutProgress li.current { } .checkoutProgress .current .stepName { color: #0d6826; } .checkoutProgress .current ~ li { color: #333; } .checkoutProgress li span { display: block; margin: 0 auto; font-weight: bold; } .checkoutProgress li .step { color: #fff; line-height: 43px; font-size: 20px; } .checkoutProgress li .stepName { } .regDonateWrap { margin: 0 0 20px; } .regDonateWrap h2 { position: relative; margin: 0 0 20px; font-size : 1.285714285714286em; /* 18*/ font-weight: bold; } .regDonateWrap h2:after { bottom: -15px; background: #fff; border-color: #d9d9d9; } .regDonateWrap fieldset { } .regDonateWrap .sfcheckoutFormList { padding-left: 100px; width: auto; } .regDonateWrap .sfcheckoutFormList li { display: inline-block; width: 55px; margin: 0 15px 0 0; padding: 0; border-bottom: none; } .lt-ie8 .regDonateWrap .sfcheckoutFormList li { float: left; } .regDonateWrap .sfcheckoutFormList li label { width: auto; } .regDonateWrap .sfcheckoutFormList li input { width: 15px; margin-right: 0; } .regDonateWrap li.otherAmountWrap { width: 320px; } /* these guys dont line up / sit side by side*/ #VA.lt-ie8 .regDonateWrap li { line-height: 20px; display: inline; float: none; vertical-align: middle; } #VA.lt-ie8 .regDonateWrap .otherAmountWrap > *, #VA.lt-ie8 .regDonateWrap .otherAmountWrap .other > *{ line-height: 20px; vertical-align: middle; display: inline; } .regDonateWrap .otherAmountWrap .other { display: inline-block; } .regDonateWrap .otherAmountWrap .other input { width: 65px; } .regDonateWrap .otherAmountWrap .other label { color: #333; } .regDonateWrap .sfcheckoutFormList li .sfSubmitBtn { } /*#endregion */ /*#region one-pager donate/lottery */ .checkoutOnePagerWrap {} .checkoutOnePagerWrap .sfcheckoutFormList label, .checkoutOnePagerWrap .sfcheckoutFormList .sfFieldWrp, .checkoutOnePagerWrap li.expiry label ~ div { display: inline-block; } .lt-ie8 .checkoutOnePagerWrap .sfcheckoutFormList li { clear: both; } .lt-ie8 .checkoutOnePagerWrap .sfcheckoutFormList label, .lt-ie8 .checkoutOnePagerWrap .sfcheckoutFormList .sfFieldWrp, .lt-ie8 .checkoutOnePagerWrap li.expiry label ~ div { float: left; } #VA .checkoutOnePagerWrap li { border-bottom: none; } /* incase nested borks us as now both the fieldset and UL inherit 450 witdh */ .paymentDetialsWrap ul.sfcheckoutFormList { width: 100%; } .checkoutOnePagerWrap header h1 { margin: 0; border: none; } .checkoutOnePagerWrap .thanksAmountWrap { margin-bottom: 20px; padding:0 0 30px 10px; border-bottom: 1px dotted #b7b7b7; font-size: 1.285714285714286em; /* 18 */ } .checkoutOnePagerWrap .thankYouForDonation { font-weight: bold; } .checkoutOnePagerWrap footer .sfcheckoutFormWrp input { width: auto; vertical-align: top;} .checkoutOnePagerWrap footer .sfcheckoutFormWrp label { width: 400px; } .thankYouDonating, .thankYouLottery { margin: 20px 0; font-size: 1.142857142857143em;/* 16 */ } .thankYouLottery { margin: 10px 0 0 0; } .thankYouDonating span, .thankYouLottery span { font-weight: bold; } /* add border b/w thanks and social share */ .threeSteps ~ .sfContentBlock { margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px dotted #b7b7b7; } /*#endregion*/ #bd .RadSiteMap li { padding: 5px 0; } #bd .RadSiteMap li a { display: inline; padding: 0; margin: 0; font-weight: bold; } #bd .RadSiteMap li li { } #bd .RadSiteMap li li a { font-size: 1.1em; font-weight: normal; } .sfsearchResultStatistics { margin-bottom: 1em; font-size: 1em; line-height: 1.2em; } .sfsearchResultsWrp { margin: 0 0 10px 20px; } .sfsearchResultsWrp li { margin: 5px 0; list-style: decimal outside; } .sfsearchResultsWrp li a { } .sfsearchResultsWrp p.highlight { margin: 5px 0; } .storyContent { padding-bottom: 160px; } .storyContent .imgWrap { margin: 5px; } .storyContent .imgWrap img { } .storyContent.sidebarStoryNoImage { padding-bottom: 15px; } /* this guy doesnt have a pos:ab img, also no box shadow */ .storyContent.volunteerMonth { position: static; margin: 0 0 20px; padding:0; } .storyContent.volunteerMonth h3 { font-weight: bold; margin-bottom: 10px; } .storyContent.volunteerMonth .imgWrap { height: 130px; margin: 0 0 10px; border-width: 4px; } .storyContent.volunteerMonth p { margin: 0 0 1em; font-weight: normal; } /* Need to center the images, if they pick a shit one */ .storyContent.volunteerMonth .imgWrap img { margin: 0 auto; } .workshopWrap h3 { margin-top: 10px; } .workshopWrap header ~ * { margin-right: 10px; margin-left: 10px; } .sfeventsList { } .sfeventsList header { margin-bottom: 10px; } .sfeventsList .sfeventMetaInfo span { display: inline; } .sfeventsList .withSummary .sfeventMetaInfo { margin-bottom: 10px; } /* Store content pages the H1 looked ugly */ .store #bd .shopHeader ~ h1 { color: #0D6826; border-top: 0; margin: 0 0 10px; } /* Forms now have error panels */ /* These must be 0 height by default, jQuery will make the height: auto when it sees errors on submit */ #VA .sfFormsEditor .sfContentBlock.errorPanel { display: none; } #VA .sfFormsEditor .sfContentBlock.errorPanel h2 { margin-bottom: 0; } #VA .sfFormsEditor .sfContentBlock.errorPanel ul { margin-top: 0; } /* Some margin under single item view for Viostream */ #VA .sfitemDetails.viostreamVideo { margin-bottom: 20px; } /* Stuff to do with Careers & Careers by state */ .sfContentBlock p.intro.standout { margin-bottom: 0; } .featuredJob .jobContent { margin-top: 5px; } #bd div.addedToCart { padding-top: 5px; clear: both; } .cartInfoWrap .sfErrorWrap { background-color: #FFF; margin-bottom: 10px; } .cartInfoWrap .addedToCart { width: 150%; margin-left: -50%; margin-bottom: 10px; } /* B & W - all the things black & white */ .black-white-committee .sectionSummary h2, .black-white-committee .navSectionNav h2, .black-white-committee .donateInfo h3 { color: Black; } #VA .black-white-committee .navSectionNav a.parentLink, #VA .black-white-committee .navSectionNav a.grandParentLink { margin: 1px; } #VA .black-white-committee .navSectionNav a.parentLink, #VA .black-white-committee .navSectionNav a.grandParentLink, .black-white-committee .navSectionNav li.current { color: White; } .black-white-committee .navSectionNav li { background-color: White; } #VA .black-white-committee .navSectionNav a.parentLink, #VA .black-white-committee .navSectionNav a.grandParentLink, .black-white-committee .navSectionNav li.current a, .black-white-committee .donateInfo h2, .black-white-committee #bd .donateInfo a.btn { background: Black; } .black-white-committee #bd .donateInfo a.btn { border: 1px solid Black; } #VA .black-white-committee .navSectionNav a.parentLink:hover, #VA .black-white-committee .navSectionNav a.parentLink:focus, #VA .black-white-committee .navSectionNav a.grandParentLink:hover, #VA .black-white-committee .navSectionNav a.grandParentLink:focus { background: #B8BDB9; color: Black; text-shadow: 1px 1px 0 #EDEDED; } .black-white-committee #bd .donateInfo a.btn:hover, .black-white-committee #bd .donateInfo a.btn:focus { background: White; color: Black; } .black-white-committee .sfimageWrp { margin-bottom: 10px; padding: 5px 5px 5px 0; border: 1px solid white; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5); -ms-box-shadow: 0 0 5px rgba(0,0,0,0.5); -o-box-shadow: 0 0 5px rgba(0,0,0,0.5); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } /* Events filtering */ .sf_cols.eventFilterWrap { margin-bottom: 10px; } .sf_cols.eventFilterWrap h2 { margin: 10px 0 5px; font: 1.142857142857143em/1.125em sans-serif; color: black; font-weight: bold; } .sf_cols.eventFilterWrap select { width: 50%; } .noEvents { display: none; } ._Telerik_IE9 .navSectionNav .dynamicBtnHolder { border: 1px solid #D0D0D0; } .shippingOption { margin: 10px 0 0 10px; } .productSku { margin-bottom: 10px; } .productSku label { font-weight: bold; margin-right: 5px; } .sfcheckoutMulitPage #errorWrapDiv h2, .sfcheckoutMulitPage .errorWrapDiv h2 { font: 1.142857142857143em/1.125em sans-serif; color: black; font-weight: bold; } .sfcheckoutMulitPage .errorWrapDiv h2 { padding-top: 10px; } .sfcheckoutMulitPage #errorWrapDiv li, .sfcheckoutMulitPage .errorWrapDiv li { list-style: disc inside; border: 0 none; padding: 5px 0; } .sfcheckoutMulitPage #errorWrapDiv ul, .sfcheckoutMulitPage .errorWrapDiv ul { padding-left: 10px; border-bottom: 1px dotted #B7B7B7; } .sfcheckoutMulitPage #errorWrapDiv:focus, .sfcheckoutMulitPage .errorWrapDiv:focus { outline: 0; } /* new styles */ /*#region std form elements, side by side and styles*/ .sfforumThreadPostList li.sfforumThreadPost, .wsForm li.sfBlogField {overflow: auto; } .sfforumThreadPostList li.sfforumThreadPost:first-child { border-top: 1px dotted #ccc; } /*todo, clean up with ONE class, derp */ .wsForm label, .wsForm .sfFieldWrp, .sfLoginFieldsWrp label, .sfregisterFieldsList label, .sfLoginFieldsWrp .sfFieldWrp, .sfregisterFieldsList .sfFieldWrp, .sfpostCommentWrap .postCommentList li label, .sfpostCommentWrap .postCommentList li .sfFieldWrp, .sfforumNewThreadWrp .sfforumNewThreadFormList li label, .sfforumNewThreadWrp .sfforumNewThreadFormList li input, .sfcheckoutFormWrp .sfcheckoutFormList li label, .sfcheckoutFormWrp .sfcheckoutFormList li input, .sfproductOptions .sfproductOptionsList label, .sfproductOptions .sfproductOptionsList select { display: inline-block; } .wsForm label, .sfFormsEditor label, .sfLoginFieldsWrp label, .sfregisterFieldsList label, .sfpostCommentWrap .postCommentList li label, .sfforumNewThreadWrp .sfforumNewThreadFormList li label, .sfcheckoutFormWrp .sfcheckoutFormList li label, .sfproductOptions .sfproductOptionsList label { margin-left: 5px; font-weight: bold; } ol.sfLoginFieldsWrp, .sfregisterFieldsList, #VA .sfforumReplyPostWrp .sfforumReplyBtn, .wsForm, .sfproductOptions .sfproductOptionsList { font-size: 13px; line-height: 13px; } .wsForm fieldset li { padding: 10px 0 10px 10px; } /* comments form doesnt line up*/ .wsForm .triangle a:before { top:8px; } #VA .sfsearchTxt:focus { outline:none; -webkit-box-shadow: 0 0 4px #572C8E; -moz-box-shadow: 0 0 4px #572C8E; -ms-box-shadow: 0 0 4px #572C8E; -o-box-shadow: 0 0 4px #572C8E; box-shadow: 0 0 4px #572C8E; } /*#endregion*/ /* sf content forms */ .sfFormsEditor h2 { margin: 10px 0; font-size: 1.142857142857143em; /*16*/; font-weight: bold; } .sfFormsEditor h3 { margin: 10px 0; } .sfFormsEditor .sfExample { font-size: 0.7857142857142857em; /* 11*/ font-style: italic; } .sfFormsEditor .sfFormInstructions { margin: 10px 0; } /* no wrapper for a label-field pair*/ .sfFormsEditor .sfFormBox, .sfFormsEditor .sfFormDropdown { padding: 5px 0; } .sfFormsEditor label { display: block; margin: 0 0 5px; } .sfFormsEditor .sfTxtBoxMedium input { max-width: 250px; } .sfFormsEditor .sfTxtBoxSmall input { max-width: 60px; } .sfFormsEditor select { width: 210px; } /* headings for radio list */ .sfFormsEditor .sfFormRadiolist .sfTxtLbl { font-weight: bold; } .sfFormsEditor .sfFormRadiolist input, .sfFormsEditor .sfFormRadiolist label { display: inline-block; } .sfFormsEditor .sfFormRadiolist input { margin:0 5px 0 15px; } .sfFormsEditor .sfFormRadiolist label { font-weight: normal; } /* headings for checkbox list */ .sfFormsEditor .sfFormCheckboxlist .sfTxtLbl { font-weight: bold; } /* just no SF, just no */ /*.sfFormsEditor .sfFormRadiolist br { display: none; }*/ /*reg / log in for forums */ ol.sfLoginFieldsWrp, .sfregisterFieldsList, #VA .sfforumReplyPostWrp .sfforumReplyBtn, .sfforumPostTitle .sfforumPostTitleEdit, .sfforumPostTitle .sfforumPostTitleSaveEdit, .sfforumPostTitle .sfforumPostTitleSaveEdit + span, article.storeProductDescription .sfAddToCartBtn { font-size: 13px; line-height: 13px; } .wsForumLoginWrap .dynamicBtnHolder , .sfregisterLnkWrp { text-align: right; padding-right: 7px; } .wsForumLoginWrap .login .dynamicBtnHolder { clear:none; float:right; } .wsForumLoginWrap .sfSubmitBtnWrp a { display: inline-block; } .sfLoginFieldsWrp label, .sfregisterFieldsList label { width: 115px; } .sfLoginFieldsWrp .sfError, .sfregisterFieldsList .sfError { margin-left: 5px; } .sfLoginFieldsWrp .sfFieldWrp, .sfregisterFieldsList .sfFieldWrp { } .sfLoginWidgetWrp .sfSubmitBtn, .sfregisterLnkWrp input { padding: 10px; font-size: 16px; } /*#VA .sfforumReplyPostWrp .sfforumReplyBtn { padding: 8px 10px;}*/ .wsForumLoginWrap { padding: 5px 10px; } .sfLoginFieldsWrp li { padding: 7px 0; } .sfLoginFieldsWrp .sfFieldWrp { width: 316px; } .sfLoginFieldsWrp .rememberMe { float: left; margin-left: 120px; } /*todo add ".checkbox" to class & merge into ol in markup*/ .sfLoginFieldsWrp .rememberMe .checkbox {} .sfLoginFieldsWrp .rememberMe label { width: 220px; font-weight: normal; } .sfregisterFieldsList { margin-bottom: 15px; } .sfregisterFieldsList li { padding: 10px 0 10px 10px; border-bottom: 1px dotted #ccc; } .sfregisterFieldsList li:first-child { border-top: 1px dotted #ccc; } .sfregisterFieldsList .sfFieldWrp { width: 327px; } .donationWrapper { overflow: auto; margin: 0 0 10px; padding: 10px 15px 10px 30px; } /*.donationWrapper > div { float: left; width: 340px; padding: 10px 30px 10px 0; border-right: 1px solid #d7d7d7; } .donationWrapper .donationMessage { width: auto; padding: 10px 0 10px 20px; border-right: none; border-left: 1px solid #fff; }*/ .donationWrapper fieldset { position: relative; margin: 0 0 15px; } .donationWrapper ol { width: 225px; margin-left: 30px; } .donationWrapper ol .makeDonateField { display:block; width:100%; margin:10px 0 0; clear: left; } .donationWrapper ol .makeDonateField label, .donationWrapper .makeDonateList .makeDonateField .sfFieldWrp { display:block; width:100%; } .donationWrapper ol .makeDonateField label { } .donationWrapper ol .makeDonateField .sfFieldWrp { } .donationWrapper ol .wsDonationAmount {} .donationWrapper ol .wsDonationAmount label { float: left; margin: 6px 0 0 -55px; width:auto; font-size: 18px; } .donationWrapper ol .wsDonateWhere { clear: both; } .donationWrapper ol .wsDonateWhere .sfFieldWrp { margin: 5px 0 0; width: 180px; /*needed to set width, firefox issue*/ } /* todo move? */ .donationWrapper fieldset .dynamicBtnHolder input { height:25px; margin: 0; padding:0 14px; font-size: 1.166666666666667em; /* 14 / 12 */ line-height:25px; } .donationWrapper .sfErrorWrap { margin-bottom: 10px; background: #fff; border-color: #f00; } .donationWrapper + em { display: block; margin: 0 0 20px; padding: 0 0 15px; border-bottom: 1px solid #e2e2e2; } /* todo: move into default imgWrap rule */ .donationWrapper .imgWrap img { width: 100%; } #VA .donationWrapper h2, #VA .donationWrapper p.alt2 { line-height:1em; border:none; } /* todo reset inher styles from p */ .donationWrapper .donationMessage .donationText { display:block; margin-top:10px; font-size:14px; /* 14 / 22 */ line-height:16px; color:#252525; margin-bottom: 10px; } /* todo set heigh */ .donationWrapper .donationMessage {} .donationWrapper .donationMessage .imgWrap { width:270px; height:123px; border:1px solid #fff; } /*#region forum */ .loggedIn { position:relative; padding:15px; margin-bottom:40px; } .loggedIn:after { content:""; display:block; height:1px; background:#ccc; position:absolute; left:-5px; bottom:-20px; right:-5px; } .loggedIn .loginName span { display:inline; font-size:0.9285714285714286em; /*13*/ font-weight:bold; } .breadcrumb.sfforumPostBreabcrumbWrp { margin: 10px 0; border: 1px solid #ccc; border-left: none; border-right: none; } table.sfforumsList {} /*todo: better merge w green arrow and dotted? */ .gotoForums { border:1px dotted #ccc; border-left:none; border-right:none; } .gotoForums a { padding-left: 23px; } .gotoForums a:before { top: 14px; left:10px; } .sfforumsList .forumHeadings th:first-child, .sfforumThreadsList .sfforumThreadWrp { padding-left: 15px; text-align: left; } .sfforumsList .sfforumTitleWrp { width: 350px; } .sfforumsList .sfforumLastPostWrp { width: 120px; } .sfforumsList {} .sfforumsList {} .sfforumsList {} /* list of threads */ .sfforumThreadsList .forumThreadImage, .sfforumThreadPostUser .sfforumUserAvatarWrp { width: 71px; height: 71px; background-color: #c9bfd7; border: 1px solid #ccc;} .sfforumThreadsList { width:715px; } .sfforumThreadsList .sfforumThreadWrp { width: 350px; padding-left: 8px; } .sfforumThreadsList .forumThreadImage { float: left; margin-right: 30px; background-position: -250px -378px; } .sfforumThreadsList .sfforumThreadPostsWrp { width:60px; } .sfforumThreadsList .sfforumThreadViewsWrp { width:62px; } table.sfforumsList tr td, table.sfforumThreadsList tr td { text-align:center; } table.sfforumsList tr td:first-child, table.sfforumThreadsList tr td:first-child { text-align:left; } .sfforumThreadsList .sfforumThreadTitleAndAgeWrp { margin: 15px 0 0 90px; } /* list of posts */ .sfforumThreadPostList {} .sfforumReplyPostWrp .sfforumReplyBtn { margin-bottom:0!important; } .sfforumSocialShareWrp { margin-top:10px; } .sfforumThreadPostList li.sfforumThreadPost { overflow: auto; border-bottom: 1px dotted #ccc; padding: 10px 0; } .sfforumThreadPostList li.sfforumThreadPost:first-child { border-top: 1px dotted #ccc; } /* front end admin ctrls */ .sfforumThreadPost .sfforumThreadPostContentWrp { margin-left: 160px; } /* user bio */ .sfforumThreadPostUser { float: left; width: 150px; } .sfforumThreadPostUser .sfforumUser {} .sfforumThreadPostUser .sfforumUserAvatarWrp { overflow: hidden; margin-top: 5px; background-position: -179px -376px; } .sfforumThreadPostUser .sfforumUserAvatarWrp img { max-width: 100%; } .lt-ie9 .sfforumThreadPostUser .sfforumUserAvatarWrp img { height: 100%; } .sfforumThreadPostUser .sfforumUserAvatarWrp img[src*=".png"] { background: #c9bfd7; } .sfforumThreadPostUser .sfforumUserPostsInfo { } /* aux post into */ .sfforumThreadPost .sfforumPostIsFeaturedWrp, .sfforumThreadPost .sfEditBtn { float: right; } .sfforumThreadPost .sfEditBtn { margin-right: 15px; } .sfforumThreadPost .sfforumPostAge, .sfforumThreadPost .sfforumPostPermalink { display: inline; } .sfforumThreadPost .sfforumPostAge { padding-right: 20px; } .sfforumThreadPost .sfforumPostPermalink {} /* le post content */ .sfforumThreadPost .sfforumThreadPostContent { margin: 5px 0 20px; padding-top: 5px; border-top: 1px dashed #ccc;} /* todo, ALL the things */ /* forum reply */ .sfforumReplyPostWrp .sfforumReplyBtn { margin: 10px 0; /* needed as other gutter is created from dynamicBtn but this one has input, gargh */ } .sfforumReplyThreadContent {} .sfforumReplyThreadContent h2.sfforumsReplyToTitle { margin-bottom:8px; } .sfforumReplyThreadContent .sfQuote .sfforumReplyThreadContent .sfSubmitBtnWrp .sfforumReplyThreadContent .sfSubmitBtnWrp .sfSubmitBtn {} .sfforumReplyThreadContent .sfSubmitBtnWrp .sfCancel {} /* WTF, tiny height by default? */ #VA #bd .sfforumReplyThreadContent > div { float: left; width: 555px; } #VA #bd .reWrapper, #VA #bd .sfMoreTools, #VA .sfforumPostReplyContainer { height: 100%!important;} #VA #bd .reWrapper, #VA #bd .sfMoreTools { width: auto!important; min-width: 100%!important; } /* new thread front end*/ .sfforumNewThreadWrp { background: none; padding: 0; border: none; } .sfforumNewThreadWrp h1 { margin:12px 0; padding:0; background:none; } .sfforumNewThreadWrp .sfforumNewThreadFormList { margin-bottom:10px; } .sfforumNewThreadWrp .sfforumNewThreadFormList li {} .sfforumNewThreadWrp .sfforumNewThreadFormList li label { margin-right:30px;} .sfforumNewThreadWrp .sfforumNewThreadFormList li input { width:450px; } .sfforumNewThreadWrp .sfforumNewThreadFormList .sfforumNewThreadName { border-top:1px dotted #ccc; } .sfforumNewThreadWrp .sfforumNewThreadFormList .sfforumNewThreadContent { margin-top:10px; } #VA td.reContentCell { border: none; } /* add reply to */ .sfforumPostReplyContainer { position:relative;} .sfforumPostReplyContainer .sfforumReplyThreadContent {} #VA #bd .sfforumReplyThreadContent > div { width:525px; } .sfforumNewThreadWrp .sfSubmitBtn, .sfforumPostReplyContainer .sfSubmitBtn { background:#0d6826; } .sfforumNewThreadWrp .sfSubmitBtnWrp .sfCancel { } .sfCancel { } .sfforumLastModified { font-size:small; font-style:italic; margin-bottom:1em; } /* moderator edit title */ h1 #threadTitleText { display:block; } h1 .sfforumPostTitleEdit { float:left; margin:10px 10px 0 0; } h1 .sfTxt { margin-bottom:10px ;} /*#endregion*/ /* donate page last step twitter share*/ .donationSocialShare { overflow:auto; } .donateTwitterWrap, .donateFacebookWrap { float:left; width:47%;} .donationSocialShare .socMedText { position:relative; height:40px; padding:8px 0 8px 65px; font-size:1.230769230769231em; /*16*/} .donateTwitterWrap {} .donateTwitterWrap .tweetBubble { position:relative; margin-top:8px; padding:10px; border:1px solid #bcbcbc; background:#fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } .donateTwitterWrap .tweetBubble span {} .donateTwitterWrap .tweetBubble a {} /* bubble arrow callout thingy*/ .donateTwitterWrap .tweetBubble:before, .donateTwitterWrap .tweetBubble:after { content:""; position:absolute; display:block; width:0; height:0; border:7px solid transparent; border-top:none; top:-7px; left:15px; } .donateTwitterWrap .tweetBubble:before { top:-8px; left:14px; border-bottom-color:#bcbcbc; border-width:8px; } .donateTwitterWrap .tweetBubble:after { border-bottom-color:#fff;} .donateFacebookWrap { margin-left:20px; } .donateFacebookWrap p + p { margin-top:10px; } .linksList { padding-bottom:80px; } .linksList ul { margin:0 0 0 10px; position:relative; z-index:10;/* so it sits on top of the img*/ } .linksList ul li { margin: 9px 0; } .linksList ul li a { } .phoneNumberList {} .phoneNumberList p { margin-bottom:22px; } .phoneNumberList .contactNumbers {} .phoneNumberList dl dt, .phoneNumberList dl dd { display:block; width:100%; } .phoneNumberList dl dt { padding: 10px 5px; border-bottom:none; } .phoneNumberList dl dd { padding: 0 5px 10px; border-bottom: 1px dotted #ccc; } /*#region opt-in typopgraphy and content elements*/ /* NOTE WELL: if we set html at 0.875em (14 / 16), then we can do all calcs based from this adjusted 14 read more http://csswizardry.com/2011/05/font-sizing-with-rem-could-be-avoided/ */ /* TODO update all font-size / line-height to be % values rather than px */ /* VA green colour on txt */ .checkoutMain span, .sfContentBlock h1, article header h1, h1.inContent, .sfContentBlock h2, .sectionSummary h2, .featuredProducts h2, .sfContentBlock h2.alt , .divSectionNav h2, .childSummaryBoxWrap h3, .donateInfo h3, .boxWithImage h3, .sfforumSocialShareWrp, .sfContentBlock .standout, .standout, .sfContentBlock th, .success, .sfforumNewThreadWrp h1, .phoneNumberList h2, .phoneNumberList dt, .donationSocialShare h2, .donationWrapper h2, p.alt2, .sfeventDetails .eventInformationWrap h3, .sfeventDetails .sfeventContent h2, .featuredJob header h2, .jobListWrap h2, h2.main, .sfcartSummaryDetailsWrp .sfPriceTotal, .caseStudyFilterWrap label, .forumPostsList h2, .checkoutAuxInfo h2, header.optInMain h2, .sfStep2Wrp .sforderSummaryTable td,.sforderSummaryTable td, .sfcheckoutMulitPage header h1, .sfcheckoutMulitPage header h2, .wsShoppingCart table td.sfItmPriceCol, .sfShoppingCartGridFooter .sfTotalRowWrp .sfPriceTotal, h3.main, .regDonateWrap .sfcheckoutFormList label { color: #0d6826; } /* VA purple colour on txt */ /*
  • */ #VA .sfContentBlock ul { margin: 5px 0 10px 25px; /*border: 1px solid #ccc; border-left: none; border-right: none;*/ padding: 10px 0 0;} #VA .sfContentBlock ul li { margin: 0 0 5px; list-style: disc outside; } #VA .sfContentBlock ol { margin: 5px 0 10px 25px; padding-left: 10px 0 6px; } #VA .sfContentBlock ol ul li { list-style: disc inside; } #VA .sfContentBlock ol li { margin: 0 0 5px; list-style: decimal outside; } #VA .sfContentBlock ol ol li { list-style: upper-alpha inside; } /* forum post or thread style*/ #VA .reContentCell .reContentArea ol, #VA .reContentCell .reContentArea ul { margin-left:20px; } #VA .reContentCell .reContentArea il { list-style-position: outside; } #VA .reContentCell .reContentArea ol li { list-style-type: decimal; } #VA .reContentCell .reContentArea ul li { list-style-type: disc; } #VA .sfContentBlock ol.alpha li { list-style-type: lower-alpha; } #VA .sfContentBlock p + ul, #VA .sfContentBlock p + ol { margin-top: 0; padding-top:0; } /* zomg css counter */ :not(.lt-ie9) #bd ol.listType1 { margin: 0 0 10px; padding: 0; counter-reset: listNumber; } :not(.lt-ie9) #bd ol.listType1 li { position: relative; margin: 0; padding: 10px 10px 10px 25px; list-style: none; } :not(.lt-ie9) #bd ol.listType1 li:before { counter-increment: listNumber; content: counter(listNumber) "."; position: absolute; top: 15; left: 7px; color: #0d6826; font-weight: bold; } /*

    */ #VA .sfContentBlock h1, #VA article header h1, h1.inContent, .store h1 { font: 22px/24px sans-serif; padding: 0; margin: 0; background: none; } /* think this gets a border from a page ctrl, cant tell */ .lt-ie9 .store h1 { border: 0!important; } article h1 { margin: 0 120px 10px 0;} /*

    */ .sfContentBlock h2 { margin: 20px 0 10px; font: 1.142857142857143em/1.125em sans-serif; /* 16 | 18 */color: #000; font-weight: bold;} /* sod off the top margin if a h2 is the first element */ .sfContentBlock > h2:first-child { margin-top:0; } /* box w green heading and white text, note green bg see var2 definition */ #bd .headerType2 h2 { color: #fff; padding: 8px 10px; margin-bottom: 10px; font-size:1.285714285714286em; /* 18*/ } .checkoutAuxInfo h2, .event h2 { font-size: 18px; } .sectionSummary h2, .featuredProducts h2, .phoneNumberList h2, .donationSocialShare h2, .donationWrapper h2, .donationWrapper p.alt2, .featuredJob header h2, .jobListWrap h2, .forumPostsList h2 { /*todo, where does this border live!???? */ /*border-bottom: 2px solid #cac9c9;*/ } .home .sectionSummary h2 { padding-bottom: 8px; border-bottom: 2px solid #cac9c9; } header.optInMain h2 { margin: 0 0 8px; font-size: 1.571428571428571em; line-height:1em; /* 22 | ? */ font-weight: normal; } .newsList h2 { color: #2a2a2a; font-weight: bold; } .event h2 { padding-left: 8px; padding-right: 8px; } .accordion h2 { color: #252525; font-size: 20px; margin: 10px 0 5px; } .divSectionNav h2 { font-weight: bold; font-size: 14px; margin-bottom: 5px; } .blogList h3 { font: bold 16px/18px sans-serif; margin-bottom: 5px; } .taxonomyWrap h2 { color: #2a2a2a; font: bold 16px/18px sans-serif; } .donationSocialShare h2 { border-bottom-width: 1px; } .jobListWrap h2, .donationWrapper h2 { font-size:1.285714285714286em ; /* 18 */ } h2.main, h3.main { font-size:1.428571428571429em; /*20*/ } /*

    */ .sfContentBlock h3 { font: bold 14px/16px sans-serif; color: #252525; margin: 15px 0 5px; } .donateInfo h3 { font-weight: bold; font-size: 14px; margin-bottom: 5px; } .childSummaryBoxWrap h3 { font-size: 22px; } .accordion h3, .accordion li { font-size: 1em; font-weight: bold; } .boxWithImage h3, .sfContentBlock h2.alt { font: 24px/26px sans-serif; margin-bottom: 8px; } .boxWithImage h3 { font-size:1.642857142857143em; line-height:1.130434782608696em; /* 23 | 26 */ } .sfeventDetails .eventInformationWrap h3 { font-weight: bold; } .sfcheckoutMulitPage h3, .sfFormsEditor h3 { color: #333; font-size: 18px; /*18*/ font-weight: bold;} /*

    */ .sfContentBlock h4 { margin: 0 0 5px; font-weight: bold; font-size: 0.8571428571428571em /*12*/ } .sfeventDetails .eventInformationWrap h4 {font-size: 1em; font-weight: bold; } /*

    */ /*
    */ /*

    and standard text */ .sfContentBlock, .sfContentBlock p { font-size: 1em; line-height: 1.4em; } /* reset font size to 13px if already being set as 13px to avoid relative recursive loop */ .sfpostContent, .sfpostContent p { font-size:100%; } .sfContentBlock p { margin-bottom: 1em; } /*todo needs work: color size*/ .standout { font-size: 1.571428571428571em; line-height:1.090909090909091em; /* 22 | 24*/} .slideTxt strong { font: normal 206.25%/100% sans-serif; /* 33 | 30/33 */ text-shadow: 1px 1px 0 #848484; } /* bold font*/ .sfContentBlock strong, b, strong, .itemDate, .sfeventMetaInfo , .sfforumsList .sfforumTitleWrp a, .taxonomyWrap .selected, .sfforumThreadsList .sfforumThreadTitleAndAgeWrp a.sfforumThreadTitle, .sfforumSocialShareWrp, .RadDataPager .rdpWrap > span, .RadDataPager .rdpWrap .rdpCurrentPage, .sf_pagerNumeric > span, .sf_pagerNumeric a.sf_PagerCurrent, .sfforumReplyThreadContent h2, .phoneNumberList dt, article.storeProductDescription .cartInfoWrap p, .eventInformationWrap .infoLabel, .featuredJob a, .sfJobsList article .jobDetailsWrap, article.jobItemWrap .jobInfo, article.jobItemWrap .jobClose, article .qualifications, .checkoutMain span, .wsShoppingCart table th, .wsShoppingCart table td.sfItmPriceCol { font-weight: bold; } em, i, .success { font-style: italic; } .sfcommentsField label em { font-size: 0.7857142857142857em; /* 11/14 */} .sfContentBlock p + p {} .storyContent p { font-size: 13px; line-height: 16px; font-weight: bold; } .storyContent p strong, .eventInformationWrap .infoLabel span { font-weight: normal; } .sectionSummary p, .phoneNumberList p { color: #5a5a5a; } /* size 13 font */ .childSummaryBoxWrap p, .sectionSummary li.featured p, .megaFooterSummary h5, .donateInfo p, .sfforumThreadPost .sfforumPostIsFeaturedWrp, .sfforumThreadPostUser, .eventInformationWrap .infoLabel, .sfforumThreadPost .sfEditBtn, .sfforumThreadPost .sfforumPostAge, .sfforumThreadPost .sfforumPostPermalink, .sfforumSocialShareWrp, #VA .RadDataPager, .blogComments li, .sfforumReplyThreadContent h2 { font-size: 0.9285714285714286em; line-height: 1.4em; /*13/14 | ?? */} /* inconsistant headings and others */ /* large, default colour text, generally at the top of a page*/ .intro, p.intro { font-size:1.428571428571429em; /* 20/14 */ line-height:1.2em; } /* i am just green text for no reason */ /* i am a fake h2 that is large AND green */ .alt { } .standout { } .main { } /* std links */ /*todo: clean up this giant selector w .defaultUnderline? */ .sfContentBlock a, .sectionSummary a, .item header a, .taxonomyWrap a, .blogList a, .childSummaryBoxWrap a, #VA .minorNav a:hover, #VA .minorNav a:focus, .readMore, .sfforumPostBreabcrumbWrp li a, .item .addToWrap a, .titleWithDate li a, .sfforumPostIsFeaturedWrp a, .sfforumThreadPost .sfEditBtn, .sfforumThreadPost .sfforumPostPermalink, .RadDataPager a, .blogNav a, .event a span, .featuredProducts a, .accordionContent a span, .donateTwitterWrap a, .newsList .item a, .donateFacebookWrap a, .linksList li a, .storeSupportWrap a, a .linkText, .backToLinkWrap a, .docList a .docName, .audioBooksList a, .sfStep4Wrp .sfcheckoutPreviewAddress a, .wsShoppingCart .sfItmTitleCol a, .concurWrap a { color: #572c8e; } .sfContentBlock a[href]:hover, .sectionSummary a[href]:hover, .item header a:hover, .taxonomyWrap a[href]:hover, .blogList a[href]:hover, .childSummaryBoxWrap a[href]:hover, .event a:hover span, .featuredProducts a:hover span, #VA .minorNav a[href]:hover, .readMore:hover, .sfContentBlock a[href]:focus, .sectionSummary a[href]:focus, .item header a:focus, .taxonomyWrap a[href]:focus, .blogList a[href]:focus, .childSummaryBoxWrap a[href]:focus, .event a:focus span, .featuredProducts a:focus span, #VA .minorNav a[href]:focus, .readMore:focus, .sfforumPostIsFeaturedWrp a[href]:hover, .sfforumThreadPost .sfEditBtn:hover, .sfforumThreadPost .sfforumPostPermalink:hover, #VA .RadDataPager a[href]:hover, .blogNav a[href]:hover, .accordion h3 a:hover, .storeSupportWrap a:hover, .sfforumPostIsFeaturedWrp a[href]:focus, .sfforumThreadPost .sfEditBtn:focus, .sfforumThreadPost .sfforumPostPermalink:focus, #VA .RadDataPager a[href]:focus, .blogNav a[href]:focus, .accordion h3 a:focus, .storeSupportWrap a:focus, .gotoForums a:hover, .accordionContent a:hover span, #VA .sfforumPostBreabcrumbWrp li a:hover, .donateTwitterWrap a:hover, .donateFacebookWrap a:hover, .linksList li a:hover, a:hover .linkText, .backToLinkWrap a:hover, .gotoForums a:focus, .accordionContent a:focus span, #VA .sfforumPostBreabcrumbWrp li a:focus, .donateTwitterWrap a:focus, .donateFacebookWrap a:focus, .linksList li a:focus, a:focus .linkText, .backToLinkWrap a:focus, .item .addToWrap a:hover, .titleWithDate li a:hover, .docList a:hover .docName, .audioBooksList a:hover, .sfStep4Wrp .sfcheckoutPreviewAddress a:hover, .wsShoppingCart .sfItmTitleCol a:hover, .concurWrap a:hover, .item .addToWrap a:focus, .titleWithDate li a:focus, .docList a:focus .docName, .audioBooksList a:focus, .sfStep4Wrp .sfcheckoutPreviewAddress a:focus, .wsShoppingCart .sfItmTitleCol a:focus, .concurWrap a:focus, .newsList .item a:hover, .newsList .item a:focus { background-color: #e7dff2; outline: none; } /* underline */ .sfContentBlock a, .blogList h2 a, .sfpostCommentsCount, .childSummaryBoxWrap a, .item header a, .event a span, .featuredProducts a span, .sfforumPostBreabcrumbWrp li a, .storeSupportWrap a, .backToLinkWrap a, .sfforumPostIsFeaturedWrp a, .sfforumThreadPost .sfEditBtn, .sfforumThreadPost .sfforumPostPermalink, .blogNav a, .accordionContent a span, .donateTwitterWrap a, .donateFacebookWrap a, .linksList li a, a .linkText, .newsList .item a, .item .addToWrap a, .titleWithDate li a, .docList a .docName, .audioBooksList a, .sfStep4Wrp .sfcheckoutPreviewAddress a, .wsShoppingCart .sfItmTitleCol a, .concurWrap a { border-bottom: 1px solid #572c8e; } .sfContentBlock a[href]:hover, .sectionSummary a[href]:hover, .blogList h2 a[href]:hover, .sfpostCommentsCount:hover, .childSummaryBoxWrap a[href]:hover, .item header a:hover, .event a:hover span, .featuredProducts a:hover span, .sfforumPostBreabcrumbWrp li a[href]:hover, .sfContentBlock a[href]:focus, .sectionSummary a[href]:focus, .blogList h2 a[href]:focus, .sfpostCommentsCount:focus, .childSummaryBoxWrap a[href]:focus, .item header a:focus, .event a:focus span, .featuredProducts a:focus span, .sfforumPostBreabcrumbWrp li a[href]:focus, .sfforumPostIsFeaturedWrp a[href]:hover, .sfforumThreadPost .sfEditBtn:hover, .sfforumThreadPost .sfforumPostPermalink:hover, .blogNav a[href]:hover, .accordionContent a:hover span,.donateTwitterWrap a:hover, .donateFacebookWrap a:hover, .sfforumPostIsFeaturedWrp a[href]:focus, .sfforumThreadPost .sfEditBtn:focus, .sfforumThreadPost .sfforumPostPermalink:focus, .blogNav a[href]:focus, .accordionContent a:focus span,.donateTwitterWrap a:focus, .donateFacebookWrap a:focus, .linksList li a:hover, .storeSupportWrap a:hover, a:hover .linkText, .backToLinkWrap a:hover, .item .addToWrap a:hover, .titleWithDate li a:hover, .docList a:hover .docName, .audioBooksList a:hover, .sfStep4Wrp .sfcheckoutPreviewAddress a:hover, .linksList li a:focus, .storeSupportWrap a:focus, a:focus .linkText, .backToLinkWrap a:focus, .item .addToWrap a:focus, .titleWithDate li a:focus, .docList a:focus .docName, .audioBooksList a:focus, .sfStep4Wrp .sfcheckoutPreviewAddress a:focus, .wsShoppingCart .sfItmTitleCol a:hover, .concurWrap a:hover, .newsList .item a:hover, .wsShoppingCart .sfItmTitleCol a:focus, .concurWrap a:focus, .newsList .item a:focus { border-bottom: 1px dotted #572c8e; outline: none; } /* better targeted links, clean up above */ .standardLink a, .defaultUnderline a, a .linkText, .sfItmTitleCol a { color: #572c8e; } .standardLink a:hover, .standardLink a:focus, .defaultUnderline a:hover, .defaultUnderline a:focus, .sfItmTitleCol a:hover, .sfItmTitleCol a:focus { background-color: #e7dff2; outline: none; } #bd .defaultUnderline a, .sfItmTitleCol a { border-bottom: 1px solid #572c8e; } #bd .defaultUnderline a:hover, #bd .defaultUnderline a:focus, .sfItmTitleCol a:hover, .sfItmTitleCol a:focus { border-bottom: 1px dotted #572c8e; outline: none; } #bd .defaultUnderline a:visited, .defaultUnderline a:visited span, .sfContentBlock a:visited { color: #363492!important; } /* other a's */ a.sfpostCommentsCount { color: #333; font-weight: bold; border-bottom-color: #333; } .breadcrumb ul a:hover, .breadcrumb ul a:focus { color:#55009d; background:#e7dff2; } .blogList h3 a { border-bottom-width: 2px!important; } .dynamicBtnHolder .btn.image { font-size:1.285714285714286em; line-height:1.111111111111111em; /*18 | 20*/ font-weight:normal; } #VA .linkContentVar3 li a .linkText { color: #fff; } #VA .linkContentVar3 li a:hover .linkText, #VA .linkContentVar3 li a:focus .linkText { background: #0d6826; } .storeSupportWrap .info2 a { } .storeSupportWrap .info2 a:hover, .storeSupportWrap .info2 a:focus { } /*remove the link styles if it is a thumbnail img holder */ a[href^="/images/"] { display: inline-block; } a[href^="/images/"], a[href^="/images/"]:hover, a[href^="/images/"]:focus { background: none!important; border: none!important;} a[href^="/images/"] img { display: block; } /* */ .sfContentBlock table { } .sfContentBlock table tr {} .sfContentBlock table tr:nth-child(even) td { background: #f7f7f7; } .sfContentBlock table th { font: bold 14px/16px sans-serif; padding:5px; border: 1px solid #b7b7b7; border-bottom-width: 2px; vertical-align: bottom;} .sfContentBlock table td { padding: 5px 15px; border: 1px dashed #d4d4d4; border-left-style: solid; border-right-style: solid; color: #333; vertical-align: middle; } /* give top and bottom of le table solid lines from le td */ .sfContentBlock table tbody tr:first-child td { border-top-style: solid; } .sfContentBlock table tbody tr:last-child td { border-bottom-style: solid; } /* todo responsive table??? T_T .sfContentBlock table { width: 100%; overflow: scroll; display: block;} .sfContentBlock table tbody { width: 130%; display: block; } */ /* widgey in a content as drop down styles */ #VA ul.fancyLinksList li { list-style: none; padding: 5px 0 5px 15px; border-top: 1px solid #fefefe; border-bottom: 1px solid #d8d8d8; } #VA ul.fancyLinksList li:first-child { border-top: none; } #VA ul.fancyLinksList li:last-child { border-bottom: none; } #VA ul.fancyLinksList li:before { left: 4px; top: 10px; } #VA ul.fancyLinksList li a { } .event a, .featuredProducts a { font: 13px/1em sans-serif; } hr { border:none; border-top:1px solid #ccc; } .sfContentBlock blockquote { position: relative; margin: 0 0 2.5em 1.5em; } .sfContentBlock blockquote:before { content:"\201C"; position: absolute; display: block; top: 2px; left: -14px; font-family: Georgia; font-size: 24px; } .sfContentBlock q:before, .sfContentBlock q:after { font-family: Georgia;} .sfContentBlock q:before { content: '\201C'; } .sfContentBlock q:after { content: '\201D'; } /*better paragraph spacing in quotes (mainly for long ones or a blockquote > p situation*/ .sfContentBlock blockquote p, .sfContentBlock q p { margin-bottom:0; } .sfContentBlock blockquote p ~ p, .sfContentBlock q p ~ p { margin-top: 1em; } /* */ code { font-family: Monaco, Courier, MonoSpace; font-size: 12px; color: #000; word-wrap: break-word; } acronym { border-bottom: 1px dotted #333; cursor: help; font-style: oblique; } acronym:hover { border-bottom-style: dashed; } acronym:after { content: "?"; padding: 0 0 0 5px; font-size: 11px; } /*#endregion*/ /*