/* blk_layout.css ***************************************************** * DO NOT EDIT THIS FILE * ***************************************************** This file contains the look and feel for the BlackRock iShares site widths and backgrounds. The styles declared here are minimal to avoid conflicts This file is part of the BlackRock Global CSS library * HTML Structure *****************************************************

*/ /* Site-specific page backgrounds * ***********************************/ .page-background { background: #ecedef; min-width: 980px; } #bodyWrapper { box-shadow: inset 0 5px 13px rgba(0, 0, 0, 0.11); -moz-box-shadow: inset 0 5px 13px rgba(0, 0, 0, 0.11); -webkit-box-shadow: inset 0 5px 13px rgba(0, 0, 0, 0.11); padding-bottom: 26px; position: relative; } #siteWrapper { margin: 0 auto; min-height: 509px; width: 1024px; } #mainWrapper ,#mainWrapper2{ margin-left: 22px; margin-right: 22px; } #mastheadWrapper, #footerWrapper { margin: 0 auto; width: 100%; } #mastheadWrapper { background: #fff; border-top: 7px solid #EEF1F3; } #navWrapper { margin: 0 auto; position: relative; /* This overrides the .site-width class until we can remove/update * the site-width class permanently */ width: 1024px; z-index: 8; } #breadcrumbWrapper { min-height: 26px; /* This overrides the .site-width class until we can remove/update * the site-width class permanently */ width: 1024px; } /* additional wrapper for the white background */ #footerWrapper #footerBottom { background: #fff; box-shadow: 0 -5px 13px rgba(0, 0, 0, 0.11); -moz-box-shadow: 0 -5px 13px rgba(0, 0, 0, 0.11); -webkit-box-shadow: 0 -5px 13px rgba(0, 0, 0, 0.11); } /* fluidWidthPopup layout used for popups; we don't need the bg image in the footerWrapper */ .fluidWidthPopup #footerWrapper { background: none; margin: 0; padding: 0; } /* The site-width class is a generic added to the masthead and footer FTLs ** so they are centered in the full width BGs */ .site-width { margin: 0 auto; width: 980px; } /* Ensures the space between content and footer */ .landingPage6 #mainWrapper { background: white; padding-bottom: 50px; } /* Base grid styles */ #columnLeft { float: left; width: 220px; } /* Content Page Narrow One ****************************** * MASTHEAD * ****************************** * MAIN NAVIGATION * ****************************** * 220px * 740px * * * * * * * * ********************** * * 480px *200px* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ****************************** * Footer * ******************************/ .contentPageNarrow1 #columnRight { margin-left: 220px; min-height: 700px; padding: 20px 20px 0; } .contentPageNarrow1 #columnLeft { float: left; padding: 20px 20px 0; width: 200px; } .contentPageNarrow1 #innerColumnLeft { float: left; width: 480px; } .contentPageNarrow1 #innerColumnLeft img { max-width: 480px; } .contentPageNarrow1 #innerColumnRight { margin-left: 500px; overflow: visible; } .contentPageNarrow1 #mainWrapper { background: white; } /* Content Page Narrow Two ****************************** * MASTHEAD * ****************************** * MAIN NAVIGATION * ****************************** * 280px * 280px * 280px * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ****************************** * Footer * ******************************/ .contentPageNarrow2 #columnLeft { float: left; padding: 20px 0 0 0; width: 300px; } .contentPageNarrow2 #columnMiddle { float: left; padding: 20px 0 0 20px; width: 300px; } .contentPageNarrow2 #columnRight { float: left; padding: 20px 0 0 20px; width: 300px; } .contentPageNarrow2 #columnFullWidth{ width:920px; padding:20px 20px 20px 0px; } .contentPageNarrow2 #mainWrapper #columnFullWidth{ padding:0 0 10px 0; width: 980px; } #landingRow2 #homeBottomLeft, .landingPage6 #landingRow1 #homeBottomCenter { float: left; margin-right: 20px; width: 300px; } .contentPageNarrow2 #pageBanner, .contentPageNarrow2 #mainWrapper2, .contentPageNarrow2 .videoparacomponent { padding-left:20px; padding-bottom:40px; background: white; overflow:hidden; } .contentPageNarrow2 #mainWrapper{ background: white; overflow:hidden; } /* Content Page Narrow Three ****************************** * MASTHEAD * ****************************** * MAIN NAVIGATION * ****************************** * BANNER (OPTIONAL) * * * ****************************** * * * * * * * * * * * * * * * * * * * * * * * * * * * ****************************** * Footer * ******************************/ .contentPageNarrow3 #columnRight { margin-left: 250px; min-height: 1000px; padding: 36px 20px 0; } .contentPageNarrow3 #columnLeft { float: left; padding: 36px 20px 0; width: 230px; } .contentPageNarrow3 #pageBanner, .contentPageNarrow3 #mainWrapper { background: white; } .contentPageNarrow3 #pageBanner { margin: 0 22px; } /* Home Page 3 ****************************** * MASTHEAD * ****************************** * MAIN NAVIGATION * ****************************** * * * * * * * 980px * * * * * * * ****************************** * Footer * *****************************/ .homePage3 #mainWrapper { background: white; padding: 20px; } /* Home Page 6 (a.k.a. Landing Page - Two Rows ) ****************************** * MASTHEAD * ****************************** * MAIN NAVIGATION * ****************************** * MAIN STAGE BANNER * * * ****************************** * * * * * * * * * * * * ****************************** * * * * * * * * * ****************************** * Footer * *****************************/ .landingPage6 #landingRow1, .landingPage6 #landingRow2 { overflow: auto; padding: 20px; } .landingPage6 #landingRow2 { padding-top: 0; } .landingPage6 #landingRow1 #homeBottomLeft, .landingPage6 #landingRow1 #homeBottomCenter { float: left; margin-right: 20px; width: 300px; } .landingPage6 #landingRow1 #homeBottomRight { margin-left: 640px; } .landingPage6 #landingRow2 #row5-col1 { float: left; width: 620px; } .landingPage6 #landingRow2 #row5-col2 { margin-left: 640px; } .landingPage6 #footerWrapper .article { background: white; margin: 0 auto; width: 938px; padding: 0 20px 10px; } /* Home Page 7 / 9 with optional full width banner ****************************** * MASTHEAD * ****************************** * MAIN NAVIGATION * ****************************** * OPTIONAL FULL WIDTH BANNER * * (home-page-9 only) * ****************************** * MAIN * FEATURE * * STAGE BANNER * * * * * ****************************** * * * * * * ****************************** * Footer * *****************************/ .home-page-7 #homeRow1, .home-page-7 #homeRow2, .home-page-9 #homeRow1, .home-page-9 #homeRow2 { margin-bottom: 26px; } .home-page-7 #homeRow1 #homeTopLeft, .home-page-7 #homeRow3 #homeBottomRow2Col1, .home-page-9 #homeRow1 #homeTopLeft, .home-page-9 #homeRow3 #homeBottomRow2Col1 { float: left; width: 650px; } .home-page-7 #homeRow1 #homeTopRight, .home-page-7 #homeRow3 #homeBottomRow2Col2, .home-page-9 #homeRow1 #homeTopRight, .home-page-9 #homeRow3 #homeBottomRow2Col2 { margin-left: 680px; } .home-page-7 .linkList { padding-bottom: 15px; background-color: #FFF; } /* Home Page 10 (a.k.a. iShares Knowledge Tree Layout) ***************************** * MASTHEAD * ***************************** * MAIN NAVIGATION * ***************************** * Home * Home * * Top * Top * * Left * Right * ***************************** * * * * ***************************** *Bottom*Bottom*Bottom*Bottom* * Area * Area * Area * Area * * 1 * 2 * 3 * 4 * ***************************** * Footer * ****************************/ .landingPage10 #landingRow1 { overflow: auto; } .landingPage10 #landingRow1 #homeTopLeft { background: white; float: left; padding: 0 25px; width: 440px; } .landingPage10 #landingRow1 #homeTopRight { background: white; margin-left: 490px; padding: 0 25px; width: 440px; } .landingPage10 #middleHeader { padding: 15px 0px; } .landingPage10 #landingRow2 #bottomArea1 { background: white; float: left; width: 234px; margin-right: 15px; } .landingPage10 #landingRow2 #bottomArea2 { background: white; float: left; width: 234px; margin-right: 14px; } .landingPage10 #landingRow2 #bottomArea3 { background: white; float: left; margin-right: 15px; width: 234px; } .landingPage10 #landingRow2 #bottomArea4 { background: white; float: left; width: 234px; } .landingPage10 #footerWrapper .article { background: white; margin: 0 auto; width: 938px; padding: 0 20px 10px; } /* Landing Page full height right column ****************************** * MASTHEAD * ****************************** * MAIN NAVIGATION * ****************************** * * * * * * * * * * * * ******************** * * * * * * * * * * * * * ****************************** * Footer * *****************************/ .landing-page-full-height-right-col #columnRight { float: right; padding: 18px 18px 0 0; width: 302px; } .landing-page-full-height-right-col #columnMain { margin-right: 340px; padding: 18px 0 0 18px; } .landing-page-full-height-right-col #columnMain #innerColumnLeft { margin-right: 320px; padding-top: 18px; } .landing-page-full-height-right-col #columnMain #innerColumnRight { float: right; padding-top: 18px; width: 298px; } /* Content Page wide 1 ****************************** * MASTHEAD * ****************************** * MAIN NAVIGATION * ****************************** * * * * * * ****************************** * 452px * 452px * * * * * * * * * * * * * * * * * * * * * * * * * ****************************** * Footer * ******************************/ .contentPageWide1 #pageHeader { background: white; padding: 18px 20px 15px; margin: 0 22px; } .contentPageWide1 #mainWrapper { background: white; } .contentPageWide1 #columnMain, .contentPageWide1 #columnMain2 { float: left; width: 452px; padding: 0px 36px 20px 20px; } .contentPageWide1 #columnRight, .contentPageWide1 #columnRight2 { margin-left: 508px; padding: 0px 20px 20px 0px; } /* Content Page wide 2 ****************************** * MASTHEAD * ****************************** * MAIN NAVIGATION * ****************************** * * * * * * ****************************** * 690px * 230px * * * * * * * * * * * * * * * * * * * * * * * * * ****************************** * Footer * ******************************/ .contentPageWide2 #pageHeader { background: white; margin: 0 22px; padding: 20px 20px 0; } .contentPageWide2 #columnMain { float: left; width: 690px; /* Fixed min-height for consistency */ min-height: 700px; /* Important declaration is a workaround for min-height in IE */ height: auto !important; padding: 20px; } .contentPageWide2 #columnRight { margin-left: 730px; padding: 20px 20px 20px 0; } .contentPageWide2 #mainWrapper { background: white; } /* Content Page wide 3 ****************************** * MASTHEAD * ****************************** * MAIN NAVIGATION * ****************************** * * * * * * ****************************** * 622px * 302px * * * * * * * * * * * * * * * * * * * * * * * * * ****************************** * Footer * ******************************/ .contentPageWide3 #pageHeader { background: white; margin: 0 22px; overflow: hidden; padding: 7px 20px 0; } .contentPageWide3 #columnMain { float: left; width: 605px; padding: 0 35px 20px 20px; /* Fixed min-height for consistency */ min-height: 700px; /* Important declaration is a workaround for min-height in IE */ height: auto !important; /*margin-top: 0px !important;*/ } .contentPageWide3 #mainWrapper { background: white; padding-top: 15px; } .contentPageWide3 #columnRight { margin-left: 660px; padding: 0 20px 0 0; } /* Content page wide 4 (a.k.a Home Page Layout) ****************************** * MASTHEAD * ****************************** * USER * * * TYPE * HERO SPOT * * SELECT- * * * ION * * ****************************** * BUTTONS * CTA * CTA * ****************************** * Footer * ******************************/ .contentPageWide4 #siteWrapper { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; width: 980px; } .contentPageWide4 #homepageTop, .contentPageWide4 #homepageBottom { margin: 0 auto; width: 928px; } .contentPageWide4 #homepageBottom { padding-bottom: 25px; } .contentPageWide4 #homepageTop #usertypeSelection { float: left; width: 338px; } .contentPageWide4 #homepageTop #mainBody { margin-left: 342px; } .contentPageWide4 #homepageBottom #columnLeft2 { float: left; width: 338px; } .contentPageWide4 #homepageBottom #columnMain2 { margin-left: 342px; } .contentPageWide4 #homepageBottom #leftBottom > div { background: white; float: left; width: 167px; } .contentPageWide4 #homepageBottom #rightBottom > div { float: left; width: 291px; } .contentPageWide4 #homepageBottom #leftBottom > #buttonImage1, .contentPageWide4 #homepageBottom #rightBottom > #homepageImage1 { margin-right: 4px; } .contentPageWide4 #footerWrapper { border-top: none; } /* Content page wide 5 (One wide row) ****************************** * MASTHEAD * ****************************** * WIDE WIDTH AREA * * 423px (h) X 928px (w) * * * * * * * ****************************** * Footer * ******************************/ .contentPageWide5 #siteWrapper { margin-bottom: 76px; min-height: 433px; width: 928px; } .contentPageWide5 #homepageWide { background: white; } /* Content Page wide 6 ****************************** * MASTHEAD * ****************************** * MAIN NAVIGATION * ****************************** * * * * * * ****************************** * 655px * 325px * * * * * * * * * * * * * * * * * * * * * * * * * ****************************** * Footer * ******************************/ .contentPageWide6 #siteWrapper { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } .contentPageWide6 #pageHeader { background: white; margin-bottom: 11px; padding: 0; *zoom: 1; } .contentPageWide6 #columnMain { float: left; width: 655px; /* Fixed min-height for consistency */ min-height: 700px; /* Important declaration is a workaround for min-height in IE */ height: auto !important; padding-bottom: 200px; border-right: 1px solid #ebe9e9; } .contentPageWide6 #mainWrapper { background-color: transparent; margin-top: 1px; } .contentPageWide6 #productWrapper { background: white; overflow: hidden; } .contentPageWide6 #columnRight { border-left: 1px solid #ebe9e9; margin-left: 655px; padding-bottom: 200px; } /* Content Page Wide 7 - full width - no padding ****************************** * MASTHEAD * ****************************** * MAIN NAVIGATION * ****************************** * * * * * * * 980px * * * * * * * ****************************** * Footer * *****************************/ .content-page-wide-7 #disclaimerWrapper { background: white; margin: 100px 22px 22px; padding: 20px; } /* Content Page Wide 8 - full width - 170px padding either side ****************************** * MASTHEAD * ****************************** * MAIN NAVIGATION * ****************************** * * * * * * * 640px * * * * * * * ****************************** * Footer * *****************************/ .contentPageWide8 #siteWrapper { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } .contentPageWide8 #pageHeader { background: white; margin: 0px 22px -1px; padding: 7px 20px 0px; *zoom: 1; } .contentPageWide8 #columnMain { background: white; /* Fixed min-height for consistency */ min-height: 700px; /* Important declaration is a workaround for min-height in IE */ height: auto !important; padding: 15px 170px 0px; } .contentPageWide8 #mainWrapper { background-color: transparent; margin-top: 1px; } /* Content page wide 9 (Product Screener) ****************************** * MASTHEAD * ****************************** * WIDE WIDTH AREA * * 423px (h) X 928px (w) * * * * * * * ****************************** * Footer * ******************************/ .content-page-wide-9 #siteWrapper { background: white; margin-bottom: 76px; min-height: 433px; width: 928px; } /* Content Page Wide 11 - Single Column 980px - New VI Layout ****************************** * MASTHEAD * ****************************** * MAIN NAVIGATION * ****************************** * * * * * * * 980px * * * * * * * ****************************** * Footer * *****************************/ .contentPageWide11 #disclaimerWrapper { background: white; margin: 100px 22px 22px; padding: 20px; } /* Content Page for Citi Portal ******************************* * MASTHEAD * ******************************* * * * * * * * * * ******************* * * * * * * * * * * * * * * ******************* * * * * * * * * * * * * ******************* * * * * * * * * * ******************************* * Footer * ******************************/ .contentPageNarrow4.page-background { background: none; filter: none; } .contentPageNarrow4 .body-background { background: none; } .contentPageNarrow4 #bodyWrapper { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; padding-bottom: 10px; } .contentPageNarrow4 #mainWrapper { margin-top: 10px; } .contentPageNarrow4 #mastheadWrapper { background: #fff; border-top: 10px solid #FFFFFF; } .contentPageNarrow4 #partnerMasthead, .contentPageNarrow4 #mainWrapper{ background: white; border: 1px solid #CCC; border-radius: 5px; box-shadow: 2px 2px 2px #E3E3E3; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#E3E3E3')"; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; } .contentPageNarrow4 #partnerMasthead { padding: 10px 0; } .contentPageNarrow4 #partnerMasthead .partner-links{ border: none; outline: none; padding: 0 12px; } .contentPageNarrow4 #footerWrapper { background: none; } .contentPageNarrow4 #footerWrapper #footerBottom { background: #fff; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } .contentPageNarrow4 #columnRight { margin-left: 220px; min-height: 500px; padding: 20px 20px 0; } .contentPageNarrow4 #columnLeft { float: left; padding: 20px 20px 0; width: 200px; } .contentPageNarrow4 #innerColumnLeft { float: left; width: 480px; } .contentPageNarrow4 #innerColumnLeft img { max-width: 480px; } .contentPageNarrow4 #innerColumnLeft #secondRowInnerColumnLeft { float: left; min-height: 92px; width: 160px; } .contentPageNarrow4 #innerColumnLeft #secondRowInnerColumnMiddle { float: left; min-height: 92px; width: 160px; } .contentPageNarrow4 #innerColumnLeft #secondRowInnerColumnRight { margin-left: 320px; min-height: 92px; } .contentPageNarrow4 #innerColumnLeft #thirdRowInnerColumnLeft { float: left; min-height: 92px; width: 240px; } .contentPageNarrow4 #innerColumnLeft #thirdRowInnerColumnRight { margin-left: 240px; min-height: 92px; } .contentPageNarrow4 #innerColumnRight { margin-left: 500px; overflow: visible; } .contentPageNarrow4 #partnerMasthead img.logo { margin-left: 10px; } /* IE Fixes *****************************************************/ .contentPageNarrow1 #columnRight, .contentPageNarrow3 #columnRight { /* Height fixed as a workaround for min-height - has to be set in case left nav is taller */ /*_height: 700px;*/ /* IE6 needs width set or right column appears below left nav */ _width: 719px; } /* don't add .contentPageNarrow3 #columnRight to this, see EBPLAT-4286 */ /* don't add .contentPageNarrow1 #columnRight to this, see EBPLAT-4488 */ .contentPageWide1 #mainWrapper, .contentPageWide2 #mainWrapper, .contentPageWide2 #columnMain, .contentPageWide3 #columnMain, .contentPageWide3 #mainWrapper { overflow: auto; } .landingPage6 #landingRow1 #homeBottomRight { *margin-left: 65%; } .contentPageNarrow1 #columnLeft, .contentPageNarrow4 #columnLeft, .contentPageNarrow3 #columnLeft { *padding-right: 0; } /* IE fixes for homepage alignment */ .contentPageWide4 #homepageBottom { *padding-right: 0; } .contentPageWide4 #columnMain2 { *width: 586px; } .contentPageWide4 #homepageTop, .contentPageWide4 #homepageBottom { *zoom: 1; } /* Styles for full bleed page layout starts */ #homePage11 { background: #FFF; } #homePage11 #mastheadWrapper { border-top: 0; } #homePage11 #bodyWrapper { background: #FFF; padding-bottom: 0; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } #homePage11 .body-wrapper .banner-wrapper { margin: 0 0 30px; } #homePage11 .body-wrapper .content-row-1, #homePage11 .body-wrapper .content-row-2, #homePage11 .body-wrapper .row3-col1-row2 { margin: 30px 0 0; box-sizing: border-box; } #homePage11 .body-wrapper .row2-col2-row1 { box-sizing: border-box; } #homePage11 .body-wrapper .row2-col1, #homePage11 .body-wrapper .row3-col1-row1-col1, #homePage11 .body-wrapper .row3-col1-row1-col2 { float: left; width: 300px; margin: 0 40px 0 0; box-sizing: border-box; } #homePage11 .body-wrapper .row2-col2, #homePage11 .body-wrapper .row3-col1, #homePage11 .body-wrapper .row3-col1-row2 { float: left; width: 640px; box-sizing: border-box; } #homePage11 .body-wrapper .row3-col1 { margin: 0 40px 0 0; } #homePage11 .body-wrapper .row3-col1-row1-col2 { margin: 0; } #homePage11 .body-wrapper .row3-col2 { float: left; width: 300px; box-sizing: border-box; } #homePage11 .body-wrapper .row2-col1-row1-area1 [data-componentname], #homePage11 .body-wrapper .row2-col2-row1-area1 [data-componentname], #homePage11 .body-wrapper .row3-col1-row1-col1-row1-area1 [data-componentname], #homePage11 .body-wrapper .row3-col1-row1-col2-row1-area1 [data-componentname], #homePage11 .body-wrapper .row3-col1-row1-col2-row1-area1 [data-componentname] { height: 242px; } #homePage11 .body-wrapper .row3-col1-row2-area1 [data-componentname] { height: 308px; } #homePage11 .body-wrapper .row3-col2-row1-area1 [data-componentname] { margin-bottom: 30px; } #homePage11 #footerWrapper { background: #FFF; margin: 0; padding: 0; border-top: 1px solid #DDD; } #homePage11 #footerWrapper #footerBottom { background: transparent; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } /* Styles for full bleed layout content page starts */ .content-page-wide-12 .row0, .content-page-wide-12 .row2 { width: 100%; } .content-page-wide-12 #mastheadWrapper { border-top-width: 0; } .content-page-wide-12 #siteWrapper { width: 100%; } .content-page-wide-12 #mainWrapper { margin: 0; } .content-page-wide-12 #bodyWrapper { border-top: 1px solid #C1C6C8; padding-bottom: 0; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } .content-page-wide-12 #footerWrapper #footerBottom { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* Styles for full bleed layout content page ends */ /* Styles for full bleed page layout ends */ /* Styles for the full bleed 2-column layout content page - start */ .fullBleedTwoColumn #siteWrapper { width: 100%; } .fullBleedTwoColumn #productWrapper { width: 980px; margin: 0 auto; } .fullBleedTwoColumn #columnMain { float: left; width: 70%; /* Fixed min-height for consistency */ min-height: 700px; /* Important declaration is a workaround for min-height in IE */ height: auto !important; } .fullBleedTwoColumn #columnRight { margin-left: 70%; } .fullBleedTwoColumn #footerWrapper #footerBottom { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; position:relative; clear:both; } .fullBleedTwoColumn #mainWrapper, .fullBleedTwoColumn #mainWrapper2 { margin-left: 0; margin-right: 0; } .fullBleedTwoColumn .body-background{ position:relative; clear:both; } /* Styles for the full bleed 2-column layout content page - end */ /******************************************************************** * RESPONSIVE OVERRIDES - All screens smaller than 767px ********************************************************************/ @media only screen and (max-width : 767px) { .blk-responsive .page-background { min-width: 0; } .blk-responsive .site-width { margin: 0 auto; width: auto; } .blk-responsive #siteWrapper, .blk-responsive #navWrapper { min-height: 0; width: auto; } .blk-responsive #breadcrumbWrapper { min-height: 0; height: 0; width: auto; } .blk-responsive #mastheadWrapper { border-top: none; } .blk-responsive #mainWrapper, .blk-responsive #navWrapper { margin: 0; } .blk-responsive #navWrapper { height: 0; z-index: auto; } .blk-responsive #bodyWrapper { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } .blk-responsive .body-background { background: none; } .blk-responsive #footerWrapper { background: none; margin: 0; padding: 0; } .blk-responsive #footerWrapper #footerBottom { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } /* Teamsite class hack override from blk-templates.css */ .blk-responsive #footerWrapper #footerBottom .ls-cmp-wrap { width: auto; } /* contentPageNarrow1 */ /* Stack left column on top of right column */ .blk-responsive .contentPageNarrow1 #columnLeft { float: none; padding: 0; width: 100%; } .blk-responsive .contentPageNarrow1 #columnRight { margin-left: 0; min-height: 0; padding: 10px; } .blk-responsive .contentPageNarrow1 #innerColumnLeft { float: none; width: 100%; } .blk-responsive .contentPageNarrow1 #innerColumnLeft img { max-width: 100%; } .blk-responsive .contentPageNarrow1 #innerColumnRight { margin-left: 0; } /* contentPageNarrow3 */ /* Stack left column on top of right column */ .blk-responsive .contentPageNarrow3 #columnLeft { float: none; padding: 10px; width: auto; } .blk-responsive .contentPageNarrow3 #columnRight { margin-left: 0; min-height: 0; padding: 10px; } .blk-responsive .contentPageNarrow3 #pageBanner { margin: 0; } /* homePage3 */ .blk-responsive .homePage3 #mainWrapper { padding: 10px; } /* landingPage6 */ .blk-responsive .landingPage6 #pageHeader { margin-bottom: 4px; } .blk-responsive .landingPage6 #landingRow1 #homeBottomLeft, .blk-responsive .landingPage6 #landingRow1 #homeBottomCenter, .blk-responsive .landingPage6 #landingRow1 #homeBottomRight, .blk-responsive .landingPage6 #landingRow2 #row5-col1, .blk-responsive .landingPage6 #landingRow2 #row5-col2 { float: none; margin: 0; width: auto; } .blk-responsive .landingPage6 #bannerStatic { margin: 0; } .blk-responsive .landingPage6 #footerWrapper .article { width: auto; } /* home-page-7 & 9 */ .blk-responsive .home-page-7 #homeRow1, .blk-responsive .home-page-9 #homeRow1 { margin-bottom: 0; } .blk-responsive .home-page-7 #homeRow1 #homeTopLeft, .blk-responsive .home-page-9 #homeRow1 #homeTopLeft { float: none; width: auto; } .blk-responsive .home-page-7 #homeRow1 #homeTopRight, .blk-responsive .home-page-9 #homeRow1 #homeTopRight { margin-left: 0; } /* contentPageWide1 */ .blk-responsive .contentPageWide1 #pageHeader, .blk-responsive .contentPageWide1 #mainWrapper2 { background: white; margin: 0; padding: 10px; } .blk-responsive .contentPageWide1 #columnMain, .blk-responsive .contentPageWide1 #columnMain2 { float: none; width: auto; padding: 10px 10px 0; } .blk-responsive .contentPageWide1 #columnRight, .blk-responsive .contentPageWide1 #columnRight2 { margin-left: 0; padding: 0 10px 10px; } /* contentPageWide2 */ .blk-responsive .contentPageWide2 #pageHeader { margin: 0; padding: 10px 10px 0; } .blk-responsive .contentPageWide2 #columnMain { float: none; min-height: 0; padding: 10px; width: auto; } .blk-responsive .contentPageWide2 #columnRight { margin-left: 0; padding: 0; } /* contentPageWide3 */ .blk-responsive .contentPageWide3 #pageHeader { margin: 0; padding: 10px 10px 0; } .blk-responsive .contentPageWide3 #columnMain { float: none; min-height: 0; padding: 10px; width: auto; } .blk-responsive .contentPageWide3 #mainWrapper { padding-top: 0; } .blk-responsive .contentPageWide3 #columnRight { margin-left: 0; padding: 0; } /* contentPageWide4 */ .blk-responsive .contentPageWide4 #siteWrapper { width: 100%; } .blk-responsive .contentPageWide4 #homepageTop, .blk-responsive .contentPageWide4 #homepageBottom { margin: 0 auto; width: 100%; } .blk-responsive .contentPageWide4 #homepageBottom { padding-bottom: 0; } .blk-responsive .contentPageWide4 #homepageTop #mainBody, .blk-responsive .contentPageWide4 #homepageBottom #columnMain2 { margin-left: 0; } .blk-responsive .contentPageWide4 #homepageTop #usertypeSelection, .blk-responsive .contentPageWide4 #homepageBottom #columnLeft2, .blk-responsive .contentPageWide4 #homepageBottom #rightBottom > div { float: none; overflow: hidden; width: auto; } .blk-responsive .contentPageWide4 #homepageBottom #leftBottom > div { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: none; width: 50%; } .blk-responsive .contentPageWide4 #homepageBottom #buttonImage1 { padding-right: 2px; } .blk-responsive .contentPageWide4 #homepageBottom #buttonImage2 { padding-left: 2px; } .blk-responsive .contentPageWide4 #homepageBottom #leftBottom > #buttonImage1, .blk-responsive .contentPageWide4 #homepageBottom #rightBottom > #homepageImage1 { margin: 0 0 4px 0; } /* contentPageWide5 */ .blk-responsive .contentPageWide5 #siteWrapper { margin-bottom: 0; min-height: 0; width: auto; } .blk-responsive .contentPageWide5 #footerBottom { padding-bottom: 50px; } /* contentPageWide6 - Product Page layout */ .blk-responsive .contentPageWide6 #pageHeader { margin-bottom: 0; } .blk-responsive .contentPageWide6 #columnMain { border-right: none; float: none; min-height: 0; padding-bottom: 0; width: auto; } .blk-responsive .contentPageWide6 #columnRight { border-left: none; margin-left: 0; padding-bottom: 0; } .blk-responsive .contentPageWide6 #productWrapper { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .blk-responsive .contentPageWide6 #columnRight { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; } .blk-responsive .contentPageWide6 #columnMain { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2; } /* contentPageWide8 */ .blk-responsive .contentPageWide8 #pageHeader { padding: 10px 10px 0; } .blk-responsive .contentPageWide8 #columnMain { padding: 10px; } .blk-responsive .contentPageWide8 #pageHeader, .blk-responsive .contentPageWide8 #columnMain { margin: 0; } /* landingPage10 */ .blk-responsive .landingPage10 #landingRow1 { padding: 0; } .blk-responsive .landingPage10 #landingRow1 #homeTopLeft, .blk-responsive .landingPage10 #landingRow1 #homeTopRight { float: none; margin: 0; padding: 10px; width: auto; } .blk-responsive .landingPage10 #middleHeader { background: white; padding: 15px 10px; } .blk-responsive .landingPage10 #landingRow2 { background: white; } .blk-responsive .landingPage10 #landingRow2 #bottomArea1, .blk-responsive .landingPage10 #landingRow2 #bottomArea2, .blk-responsive .landingPage10 #landingRow2 #bottomArea3, .blk-responsive .landingPage10 #landingRow2 #bottomArea4 { margin: 0 0 5px 2%; width: 47%; } /* Responsive styles for full bleed page layout starts */ .blk-responsive #homePage11 #bodyWrapper { padding-bottom: 0; } .blk-responsive #homePage11 .body-wrapper .banner-wrapper, .blk-responsive #homePage11 .body-wrapper .content-row-1, .blk-responsive #homePage11 .body-wrapper .content-row-2, .blk-responsive #homePage11 .body-wrapper .row3-col1-row2 { margin: 0; } .blk-responsive #homePage11 .body-wrapper .row2-col1, .blk-responsive #homePage11 .body-wrapper .row2-col2-row1, .blk-responsive #homePage11 .body-wrapper .row3-col1-row1-col1, .blk-responsive #homePage11 .body-wrapper .row3-col1-row1-col2, .blk-responsive #homePage11 .body-wrapper .row3-col1-row2, .blk-responsive #homePage11 .body-wrapper .row3-col2 { float: none; width: 100%; margin: 0; padding: 0 20px; } .blk-responsive #homePage11 .body-wrapper .row2-col1 .row2-col1-row1, .blk-responsive #homePage11 .body-wrapper .row2-col2 .row2-col2-row1-area1, .blk-responsive #homePage11 .body-wrapper .row3-col1-row1-col1 .row3-col1-row1-col1-row1, .blk-responsive #homePage11 .body-wrapper .row3-col1-row1-col2 .row3-col1-row1-col2-row1, .blk-responsive #homePage11 .body-wrapper .row3-col1-row2-area1, .blk-responsive #homePage11 .body-wrapper .row3-col2-row1 { padding: 30px 20px; border-top: 1px solid #DDD; } .blk-responsive #homePage11 .body-wrapper .row2-col1 .row2-col1-row1 { border-width: 0; } .blk-responsive #homePage11 .body-wrapper .row2-col2, .blk-responsive #homePage11 .body-wrapper .row3-col1, .blk-responsive #homePage11 .body-wrapper .row3-col1-row2 { float: none; width: 100%; } .blk-responsive #homePage11 .body-wrapper .row3-col1 { margin: 0; } .blk-responsive #homePage11 .body-wrapper .row2-col1-row1-area1 [data-componentname], .blk-responsive #homePage11 .body-wrapper .row2-col2-row1-area1 [data-componentname], .blk-responsive #homePage11 .body-wrapper .row3-col1-row1-col1-row1-area1 [data-componentname], .blk-responsive #homePage11 .body-wrapper .row3-col1-row1-col2-row1-area1 [data-componentname], .blk-responsive #homePage11 .body-wrapper .row3-col1-row1-col2-row1-area1 [data-componentname], .blk-responsive #homePage11 .body-wrapper .row3-col1-row2-area1 [data-componentname], .blk-responsive #homePage11 .body-wrapper .row3-col2-row1-area1 [data-componentname] { height: auto; } .blk-responsive #homePage11 .body-wrapper .row3-col2-row1-area1 [data-componentname] { margin-bottom: 0; } .blk-responsive #homePage11 #footerWrapper { margin: 0 20px; width: auto; border-width: 3px; } /* Responsive styles for full bleed page layout ends */ /* responsive styles for the full bleed 2-column layout content page - starts */ .blk-responsive .fullBleedTwoColumn #productWrapper{ width: 100%; } .blk-responsive .fullBleedTwoColumn #columnMain{ float:none; width:100% } .blk-responsive .fullBleedTwoColumn #columnRight{ margin:0; padding:0; width:100%; } /* responsive styles for the full bleed 2-column layout content page - end */ }