/* new css difference between new and old grids -- new grids divided into sections, old grids use rowstart both are using .main_grid_container within new template */ /* CSS for old grid structure extracted from cms main-sgf.css (not new build) */ /* from line 649 through 665 in main-sgf.css */ /* have not used Inset - .grid_inner was eliminated with migration from WebPress to Modern Campus section.Inset, div.Inset { -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 30px; padding-right: 30px; } section.Inset .Rowstart.grid_fourth > .grid_inner, section.Inset .Rowstart.grid_half > .grid_inner, section.Inset .Rowstart.grid_third > .grid_inner, section.Inset .Rowstart.grid_threefourths > .grid_inner, section.Inset .Rowstart.grid_twothirds > .grid_inner, section.Inset .Rowstart.grid_whole > .grid_inner, div.Inset .Rowstart.grid_fourth > .grid_inner, div.Inset .Rowstart.grid_half > .grid_inner, div.Inset .Rowstart.grid_third > .grid_inner, div.Inset .Rowstart.grid_threefourths > .grid_inner, div.Inset .Rowstart.grid_twothirds > .grid_inner, div.Inset .Rowstart.grid_whole > .grid_inner { margin-left: 0; } section.Inset .grid_fourth:last-of-type > .grid_inner, section.Inset .grid_half:last-of-type > .grid_inner, section.Inset .grid_third:last-of-type > .grid_inner, section.Inset .grid_threefourths:last-of-type > .grid_inner, section.Inset .grid_twothirds:last-of-type > .grid_inner, section.Inset .grid_whole:last-of-type > .grid_inner, div.Inset .grid_fourth:last-of-type > .grid_inner, div.Inset .grid_half:last-of-type > .grid_inner, div.Inset .grid_third:last-of-type > .grid_inner, div.Inset .grid_threefourths:last-of-type > .grid_inner, div.Inset .grid_twothirds:last-of-type > .grid_inner, div.Inset .grid_whole:last-of-type > .grid_inner { margin-right: 0; } */ section.Shaded, section.Bordered, section.Shaded.Bordered, div.Shaded, div.Bordered, div.Shaded.Bordered { padding: 2rem; } section.Bordered, section.Shaded.Bordered, div.Bordered, div.Shaded.Bordered { border: 1px solid #c2c2c2; } /* removed .grid_inner with migration -- VDB 5/12/26 section.Bordered > .grid_inner, section.Shaded > .grid_inner, div.Bordered > .grid_inner, div.Shaded > .grid_inner { margin-left: 0; margin-right: 0; } */ .grid_whole.Inset:last-child { margin-bottom: 0; } .Shaded { background-color: #f0f0f0; } .shadow { -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } /* have not use .Columns2 or .Columns3 much VDB 5/7/26 */ /* from line 673 through 687 .Columns2, .Columns3 { -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } .Columns2 div, .Columns2 li, .Columns2 ol, .Columns2 ul, .Columns3 div, .Columns3 li, .Columns3 ol, .Columns3 ul { -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid; page-break-inside: avoid; } .Columns2 div, .Columns2 ol, .Columns2 ul, .Columns3 div, .Columns3 ol, .Columns3 ul { margin-top: 0; margin-bottom: 2rem; } .Columns2 .alt h1, .Columns2 .alt h2, .Columns2 .alt h3, .Columns2 .alt h4, .Columns2 .alt h5, .Columns2 .alt h6, .Columns3 .alt h1, .Columns3 .alt h2, .Columns3 .alt h3, .Columns3 .alt h4, .Columns3 .alt h5, .Columns3 .alt h6 { -webkit-column-span: all; -moz-column-span: all; column-span: all; } .Columns2 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .Columns3 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } ul.Columns2, ul.Columns3 { padding-left: 0; } ul.Columns2 li, ul.Columns3 li { list-style-type: none; } */ /* from line 705 through 741 - .grid_container updated to .main_grid_container - interim template uses .main_grid_container - VDB 5/4/26 */ /* no longer needed VDC 5726 .main_grid_container { margin: 0 auto; width: 100%; position: relative; } */ .main_grid_container .grid_fourth { width: 25%; } .main_grid_container .grid_third { width: 33.3333%; } .main_grid_container .grid_half { width: 50%; } .main_grid_container .grid_twothirds { width: 66.6666%; } .main_grid_container .grid_threefourths { width: 75%; } .main_grid_container .grid_whole { width: 100%; position: relative; } .main_grid_container .grid_fourth, .main_grid_container .grid_half, .main_grid_container .grid_third, .main_grid_container .grid_threefourths, .main_grid_container .grid_twothirds, .main_grid_container .grid_whole { float: left; overflow-x: visible; overflow-y: visible; position: relative; } /* no longer needed .grid .main_grid_container .grid_fourth > .grid_inner, .main_grid_container .grid_half > .grid_inner, .main_grid_container .grid_third > .grid_inner, .main_grid_container .grid_threefourths > .grid_inner, .main_grid_container .grid_twothirds > .grid_inner, .main_grid_container .grid_whole > .grid_inner { margin-left: 30px; margin-right: 30px; } /* remove left and right margin -- VDB 5626 */ .main_grid_container .grid_fourth hr, .main_grid_container .grid_half > hr, .main_grid_container .grid_third > hr, .main_grid_container .grid_threefourths > hr, .main_grid_container .grid_twothirds > hr, .main_grid_container .grid_whole > hr { border-top: 12px solid #c2c2c2; clear: both; margin: 0 0 3rem; } .main_grid_container .grid_fourth.Inset > hr, .main_grid_container .grid_half.Inset > hr, .main_grid_container .grid_third.Inset > hr, .main_grid_container .grid_threefourths.Inset > hr, .main_grid_container .grid_twothirds.Inset > hr, .main_grid_container .grid_whole.Inset > hr { margin-left: 0; margin-right: 0; } .main_grid_container .grid_fourth .expand, .main_grid_container .grid_half .expand, .main_grid_container .grid_third .expand, .main_grid_container .grid_threefourths .expand, .main_grid_container .grid_twothirds .expand, .main_grid_container .grid_whole .expand { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .main_grid_container .grid_fourth .expand .grid_inner, .main_grid_container .grid_half .expand .grid_inner, .main_grid_container .grid_third .expand .grid_inner, .main_grid_container .grid_threefourths .expand .grid_inner, .main_grid_container .grid_twothirds .expand .grid_inner, .main_grid_container .grid_whole .expand .grid_inner { margin: 0 auto; max-width: calc(1440px - 270px); } .clear { clear: both; display: block; height: 0; overflow: hidden; visibility: hidden; width: 0; } .Rowstart { clear: left; } .MainContent { padding: 6rem 0; position: static; } /* no longer needed -- VDB 5/6/26 .MainContent > .grid_whole, .MainContent > .grid_half, .MainContent > .grid_third, .MainContent > .grid_fourth, .MainContent > .grid_twothirds, .MainContent > .grid_threefourths { margin-bottom: 6rem; } */ .MainContent > .grid_whole:last-child, .MainContent > .grid_half:last-child, .MainContent > .grid_third:last-child, .MainContent > .grid_fourth:last-child, .MainContent > .grid_twothirds:last-child, .MainContent > .grid_threefourths:last-child { margin-bottom: 0; } #PageInnerWrapper::after, .ContentColumn::after, .clearfix::after, .main_grid_container::after, .grid_fourth::after, .grid_half::after, .grid_third::after, .grid_threefourths::after, .grid_twothirds::after, .grid_whole::after, form dd::after, section.Bordered::after, section.Shaded::after, div.Bordered::after, div.Shaded::after, .ContentBlock::after { clear: both; content: " "; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; } /* from line 745 through 759 */ .grid_whole, .grid_half, .grid_third, .grid_fourth, .grid_twothirds, .grid_threefourths { margin-bottom: 0; } .ContentColumn > .grid_whole, .ContentColumn > .grid_half, .ContentColumn > .grid_third, .ContentColumn > .grid_fourth, .ContentColumn > .grid_twothirds, .ContentColumn > .grid_threefourths { margin-bottom: 6rem; } .ContentColumn > .grid_whole:last-child, .ContentColumn > .grid_half:last-child, .ContentColumn > .grid_third:last-child, .ContentColumn > .grid_fourth:last-child, .ContentColumn > .grid_twothirds:last-child, .ContentColumn > .grid_threefourths:last-child { margin-bottom: 0; } /* no longer needed VDB 5/11/25 .ContentColumn > .grid_whole .grid_whole, .ContentColumn > .grid_whole .grid_half, .ContentColumn > .grid_whole .grid_third, .ContentColumn > .grid_whole .grid_fourth, .ContentColumn > .grid_whole .grid_twothirds, .ContentColumn > .grid_whole .grid_threefourths, .ContentColumn > .grid_half .grid_whole, .ContentColumn > .grid_half .grid_half, .ContentColumn > .grid_half .grid_third, .ContentColumn > .grid_half .grid_fourth, .ContentColumn > .grid_half .grid_twothirds, .ContentColumn > .grid_half .grid_threefourths, .ContentColumn > .grid_third .grid_whole, .ContentColumn > .grid_third .grid_half, .ContentColumn > .grid_third .grid_third, .ContentColumn > .grid_third .grid_fourth, .ContentColumn > .grid_third .grid_twothirds, .ContentColumn > .grid_third .grid_threefourths, .ContentColumn > .grid_fourth .grid_whole, .ContentColumn > .grid_fourth .grid_half, .ContentColumn > .grid_fourth .grid_third, .ContentColumn > .grid_fourth .grid_fourth, .ContentColumn > .grid_fourth .grid_twothirds, .ContentColumn > .grid_fourth .grid_threefourths, .ContentColumn > .grid_twothirds .grid_whole, .ContentColumn > .grid_twothirds .grid_half, .ContentColumn > .grid_twothirds .grid_third, .ContentColumn > .grid_twothirds .grid_fourth, .ContentColumn > .grid_twothirds .grid_twothirds, .ContentColumn > .grid_twothirds .grid_threefourths, .ContentColumn > .grid_threefourths .grid_whole, .ContentColumn > .grid_threefourths .grid_half, .ContentColumn > .grid_threefourths .grid_third, .ContentColumn > .grid_threefourths .grid_fourth, .ContentColumn > .grid_threefourths .grid_twothirds, .ContentColumn > .grid_threefourths .grid_threefourths { margin-bottom: 3rem; }*/ /* removed .grid_inner with migration from WebPress to Modern Campus -- VDB 5/7/26 .ContentColumn .grid_inner + .grid_whole, .ContentColumn .grid_inner + .grid_threefourths, .ContentColumn .grid_inner + .grid_fourth, .ContentColumn .grid_inner + .grid_twothirds, .ContentColumn .grid_inner + .grid_twothirds + .grid_third, .ContentColumn .grid_inner + .grid_half, .ContentColumn .grid_inner + .grid_half + .grid_half, .ContentColumn .grid_inner + .grid_third, .ContentColumn .grid_inner + .grid_third + .grid_third, .ContentColumn .grid_inner + .grid_third + .grid_third + .grid_third, .ContentColumn .grid_inner + .grid_third, .ContentColumn .grid_inner + .grid_third + .grid_twothirds, .ContentColumn .grid_inner + .grid_fourth, .ContentColumn .grid_inner + .grid_fourth + .grid_fourth, .ContentColumn .grid_inner + .grid_fourth + .grid_fourth + .grid_fourth, .ContentColumn .grid_inner + .grid_fourth + .grid_fourth + .grid_fourth + .grid_fourth, .ContentColumn .grid_inner + .grid_threefourths + .grid_fourth, .ContentColumn .grid_inner + .grid_fourth + .grid_threefourths { margin-top: 3rem; } */ .ContentColumn section > .Rowstart:nth-last-child(1), .ContentColumn section > .Rowstart.grid_threefourths:nth-last-child(2), .ContentColumn section > .Rowstart.grid_twothirds:nth-last-child(2), .ContentColumn section > .Rowstart.grid_half:nth-last-child(2), .ContentColumn section > .Rowstart.grid_third:nth-last-child(2), .ContentColumn section > .Rowstart.grid_fourth:nth-last-child(2), .ContentColumn section > .Rowstart.grid_third:nth-last-child(3), .ContentColumn section > .Rowstart.grid_fourth:nth-last-child(4), .ContentColumn div > .Rowstart:nth-last-child(1), .ContentColumn div > .Rowstart.grid_threefourths:nth-last-child(2), .ContentColumn div > .Rowstart.grid_twothirds:nth-last-child(2), .ContentColumn div > .Rowstart.grid_half:nth-last-child(2), .ContentColumn div > .Rowstart.grid_third:nth-last-child(2), .ContentColumn div > .Rowstart.grid_fourth:nth-last-child(2), .ContentColumn div > .Rowstart.grid_third:nth-last-child(3), .ContentColumn div > .Rowstart.grid_fourth:nth-last-child(4) { margin-bottom: 0; } /* removed .grid_inner from migration VDB 5/12/26 .grid_inner > :first-child { margin-top: 0; } .grid_inner > :last-child { margin-bottom: 0; } */ /* from 1735 through 1737 */ .grid_half .ProfileAbstract .ContactInfoContainer, .grid_half .ProfileAbstract .AbstractContainer { width: 100%; } .grid_half .ProfileAbstract .AbstractContainer { margin-top: 0.25rem; } /* from 1855 through 1865 Scholarship lists */ .main_grid_container .ScholarshipList div > .Rowstart.grid_half:nth-last-child(2) { margin-bottom: 0; } .main_grid_container .ScholarshipList > .grid_whole { padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid #c2c2c2; } .main_grid_container .ScholarshipList > .grid_whole:first-of-type { padding-top: 1.5rem; border-top: 1px solid #c2c2c2; } .main_grid_container .ScholarshipList > .grid_whole:last-child { margin-bottom: 0; } .main_grid_container .ScholarshipList .grid_whole > .grid_inner, .main_grid_container .ScholarshipList .grid_half > .grid_inner { margin-left: 0; margin-right: 0; } .main_grid_container .ScholarshipList .grid_inner + .grid_half, .main_grid_container .ScholarshipList .grid_inner + .grid_half + .grid_half { margin-top: 0; } /* from 2075 through 2076 */ /* .grid_inner removed at migration VDB 5/12/16 .grid_inner + .grid_whole, .grid_inner + .grid_threefourths, .grid_inner + .grid_fourth, .grid_inner + .grid_twothirds, .grid_inner + .grid_twothirds + .grid_third, .grid_inner + .grid_half, .grid_inner + .grid_half + .grid_half, .grid_inner + .grid_third, .grid_inner + .grid_third + .grid_third, .grid_inner + .grid_third + .grid_third + .grid_third, .grid_inner + .grid_third, .grid_inner + .grid_third + .grid_twothirds, .grid_inner + .grid_fourth, .grid_inner + .grid_fourth + .grid_fourth, .grid_inner + .grid_fourth + .grid_fourth + .grid_fourth, .grid_inner + .grid_fourth + .grid_fourth + .grid_fourth + .grid_fourth, .grid_inner + .grid_threefourths + .grid_fourth, .grid_inner + .grid_fourth + .grid_threefourths { margin-top: 1.5rem; } */ /* from 2139 through 2143 more scholarship list css */ .main_grid_container .ScholarshipList .grid_half { width: 50%; } .main_grid_container .ScholarshipList .Rowstart.grid_half > .grid_inner { margin-right: 30px; } .main_grid_container .ScholarshipList .grid_half + .grid_half > .grid_inner { margin-left: 30px; } /* 2157 through 2165 */ /* .grid_inner removed at migration -- VDB 5/12/26 @media screen and (max-width: 1023px) { section.Inset .grid_fourth > .grid_inner, section.Inset .grid_half > .grid_inner, section.Inset .grid_third > .grid_inner, section.Inset .grid_threefourths > .grid_inner, section.Inset .grid_twothirds > .grid_inner, section.Inset .grid_whole > .grid_inner, div.Inset .grid_fourth > .grid_inner, div.Inset .grid_half > .grid_inner, div.Inset .grid_third > .grid_inner, div.Inset .grid_threefourths > .grid_inner, div.Inset .grid_twothirds > .grid_inner, div.Inset .grid_whole > .grid_inner { margin-left: 0; margin-right: 0; } */ /* .main_grid_container { max-width: calc(100% - 60px * 2); } */ .main_grid_container .grid_fourth, .main_grid_container .grid_half, .main_grid_container .grid_third, .main_grid_container .grid_threefourths, .main_grid_container .grid_twothirds, .main_grid_container .grid_whole { width: 100%; } /* original grids used margin-bottom: 6rem and new grids use section for adding bottom margin at 1024px -- less margin css is assigned to tablet view -- VDB 5/7/26 .MainContent > .grid_whole, .MainContent > .grid_half, .MainContent > .grid_third, .MainContent > .grid_fourth, .MainContent > .grid_twothirds, .MainContent > .grid_threefourths { margin-bottom: 4rem; } .ContentColumn > .grid_whole, .ContentColumn > .grid_half, .ContentColumn > .grid_third, .ContentColumn > .grid_fourth, .ContentColumn > .grid_twothirds, .ContentColumn > .grid_threefourths { margin-bottom: 4rem; }*/ } /* from 2254 through 2258 */ @media screen and (max-width: 959px) { #PageInnerWrapper { margin-top: 50px; } #ContentColumn { width: 100%; } .main_grid_container { max-width: 720px; } /*from 2264 through 2268 */ .main_grid_container .MainNav { bottom: 0; -webkit-box-sizing: border-box; box-sizing: border-box; left: -240px; overflow-x: auto; padding: 0 0 3rem 0; position: absolute; top: 50px; -webkit-transition: left 0.6s ease; transition: left 0.6s ease; width: 240px; z-index: 102; } .main_grid_container .MainNav.Shown { left: 0; } } .main_grid_container .MainNav > .grid_inner { z-index: 0; } /* from 2352 through 2368 */ #ContentColumn { width: 100%; } /* no longer needed VDB 5/7/26 .main_grid_container { max-width: none; } */ /* .main_grid_container .grid_fourth, .main_grid_container .grid_half, .main_grid_container .grid_third, .main_grid_container .grid_threefourths, .main_grid_container .grid_twothirds, .main_grid_container .grid_whole { width: 100%; } */ /* no longer needed VDB 5/7/26 .MainContent { padding: 3rem 0; }*/ /* update bottom margin from 2 to 3rem to resolve spacing at tablet view VDB 1926 .MainContent > .grid_whole, .MainContent > .grid_half, .MainContent > .grid_third, .MainContent > .grid_fourth, .MainContent > .grid_twothirds, .MainContent > .grid_threefourths { margin-bottom: 3rem; } */ /* .grid_inner removed at migration VDB 5/12/26 .grid_inner + .grid_whole, .grid_inner + .grid_threefourths, .grid_inner + .grid_fourth, .grid_inner + .grid_twothirds, .grid_inner + .grid_twothirds + .grid_third, .grid_inner + .grid_half, .grid_inner + .grid_half + .grid_half, .grid_inner + .grid_third, .grid_inner + .grid_third + .grid_third, .grid_inner + .grid_third + .grid_third + .grid_third, .grid_inner + .grid_third, .grid_inner + .grid_third + .grid_twothirds, .grid_inner + .grid_fourth, .grid_inner + .grid_fourth + .grid_fourth, .grid_inner + .grid_fourth + .grid_fourth + .grid_fourth, .grid_inner + .grid_fourth + .grid_fourth + .grid_fourth + .grid_fourth, .grid_inner + .grid_threefourths + .grid_fourth, .grid_inner + .grid_fourth + .grid_threefourths { margin-top: 1.5rem; } */ section > .Rowstart:nth-last-child(1), section > .Rowstart.grid_threefourths:nth-last-child(2) + .grid_fourth, section > .Rowstart.grid_twothirds:nth-last-child(2) + .grid_third, section > .Rowstart.grid_half:nth-last-child(2) + .grid_half, section > .Rowstart.grid_third:nth-last-child(2) + .grid_twothirds, section > .Rowstart.grid_fourth:nth-last-child(2) + .grid_threefourths, section > .Rowstart.grid_third:nth-last-child(3) + .grid_third + .grid_third, section > .Rowstart.grid_fourth:nth-last-child(4) + .grid_fourth + .grid_fourth + .grid_fourth, div > .Rowstart:nth-last-child(1), div > .Rowstart.grid_threefourths:nth-last-child(2) + .grid_fourth, div > .Rowstart.grid_twothirds:nth-last-child(2) + .grid_third, div > .Rowstart.grid_half:nth-last-child(2) + .grid_half, div > .Rowstart.grid_third:nth-last-child(2) + .grid_twothirds, div > .Rowstart.grid_fourth:nth-last-child(2) + .grid_threefourths, div > .Rowstart.grid_third:nth-last-child(3) + .grid_third + .grid_third, div > .Rowstart.grid_fourth:nth-last-child(4) + .grid_fourth + .grid_fourth + .grid_fourth { margin-bottom: 0; } /* from 2376 through 2380 */ .main_grid_container .MainNav { -webkit-box-sizing: border-box; box-sizing: border-box; height: 100%; left: -240px; overflow-y: scroll; padding: 0; position: fixed; top: 0; -webkit-transition: left 0.6s ease; transition: left 0.6s ease; width: 240px; z-index: 102; } .main_grid_container .MainNav.Shown { left: 0; } /* .grid_inner removed at migration VDB 5/12/26 .main_grid_container .MainNav > .grid_inner { margin: 3rem 10px; z-index: 0; } */ /* from 2508 through 2512 */ /* .grid_inner removed at migration .main_grid_container .ScholarshipList .Rowstart.grid_half > .grid_inner { margin-right: 0; } .main_grid_container .ScholarshipList .grid_half + .grid_half > .grid_inner { margin-left: 0; } */ .main_grid_container .ScholarshipList .grid_inner + .grid_half + .grid_half { margin-top: 1.5rem; } /* 2568 */ #ContentColumn { width: 100%; } /* css from migration.css old file from cms */ .grid_container > .grid_col > :not(.grid_col):not(.Shaded):not(.Bordered) img:not(.image), .grid_container > .grid_col > .grid_col > :not(.grid_col):not(.Shaded):not(.Bordered) img:not(.image), .grid_container > #ContentColumn.grid_col > .grid_col > .Shaded img:not(.image), .grid_container > #ContentColumn.grid_col > .grid_col > .Bordered img:not(.image) { max-width: 100%; height: auto; } .Rowstart.grid_whole.grid_col img:not(.image):not(.ProfilePicture) { min-width: 100%; } .Rowstart.grid_whole.grid_col .Loading img { min-width: auto; } /* -- sizing of images outside of ContentBlock RichText div -- VDC 1/25/22 -- */ main#ContentColumn.grid_twothirds.ContentColumn.grid_col > p img { max-width: 100%; height: auto; } /* -- sizing of images within the first column (and others) when an img is without the .image style -- VDC 12623 -- */ .Rowstart.grid_third.grid_col p img, .grid_third.grid_col p img { width: 100%; height: auto; } .Rowstart.grid_twothirds.grid_col p img, .grid_twothirds.grid_col p img { max-width: 100%; height: auto; } .Rowstart.grid_half.grid_col p img, .grid_half.grid_col p img { max-width: 100%; height: auto; } .Rowstart.grid_fourth.grid_col p img, .grid_fourth.grid_col p img { max-width: 100%; height: auto; } .Rowstart.grid_threefourths.grid_col p img, .grid_threefourths.grid_col p img { max-width: 100%; height: auto; } /* resolve issue with exclusion of margin-left when p is present and it contains img -- VDC 42924 -- conflicting style */ .Rowstart.grid_whole.grid_col .Shaded .Rowstart.grid_third.grid_col + .grid_twothirds.grid_col > p > img { margin-left: 30px; } /* -- problem with image filling the first column - example Provost/FacultyAffairs/foundation-award-for-research-b.htm -- VDC 1/11/22 -- */ .Shaded .Rowstart.grid_third.grid_col article.ContentBlock.RichText p img { width: 100% !important; } /* retain captcha img size */ fieldset div.captcha img.captcha__image { max-width: 220px !important; } /* following trys to not have margin for consecutive degree types, and instead add top margin to the block that follows the degree types; will replace single spec in main.sgf (around line 1369): .DegreeDesignation {margin-bottom: 1rem;} BDH 01/06/23 */ .DegreeDesignation { margin-bottom: 0; } .program-opening { margin-top: 1rem; } /* end DegreeDesignation updated specs */ /* -- two-column-tout pattern in OMNI does not have the ContentBlock class so does not get the margin spacing -- Remove 5/14/26 testing VDB .two-column-tout { margin-bottom: 6rem; } */ /* -- added to resolve an override from .Rowstart.grid_whole.grid_col img -- */ .campaign-promo__image { min-width: 0% !important; } /* -- reassigned styles to account for the removal of .grid_inner on MainNav -- */ .MainNav > .NavWrapper { max-width: calc(1440px - 270px); margin: 0 auto; padding: 0 2rem 0; position: relative; } .MainNav > .SkipNav { margin-top: 0; } /* -- resolve spacing issue that occurs when a two column layout grid, that starts with an h2 tag, is nested within a one column layout grid -- VDC 6/17/22 -- */ .Shaded > h2 { margin-top: 0; margin-bottom: 1rem; } /* -- resolve top margin on h3 when nested within the .Shaded div -- VDC 8/3/22 -- */ .Shaded > h3 { margin-top: 0; } /* -- resolve bottom margin issue when accordion is placed within div with .Shaded class -- VDC 8/2/22 -- */ .Shaded .ContentBlock.accordion { margin-bottom: 0px; } /* -- resolve bottom margin issue when featured-news is placed within div with .Shaded class -- VDC 8/3/22 -- */ .Shaded .featured-news { margin-bottom: 0px; } /* -- resolve bottom margin issue when two column grid is nested within div with .Shaded class -- VDC 8/3/22 -- no longer needed 3/5/24 -- .Shaded .Rowstart.grid_half.grid_col { margin-bottom:0px; } .Shaded .grid_half.grid_col { margin-bottom:0px; } */ /* -- resolve bottom margin issue when a featured image container is within a div with .Shaded class -- VDC 8/3/22 -- */ .Shaded .ContentBlock.feature-image-container { margin-bottom: 0px; } /* -- resolve issue with 33/66 grid within shaded area -- VDC 11/30/22 -- ex: https://outreach.missouristate.edu/offcampus/Nevada/EdAdminNevada.htm -- no longeer needed -- VDC 7/30/23 .Shaded .Rowstart.grid_third.grid_col+.grid_twothirds.grid_col { width: 66%; margin-right: -17px; }*/ /* -- increase height of accordion panel to accommodate CTA above touts in WebDS -- VDC 8/11/22 -- */ div#panel-d72d28e728 { height: 1500px; } /* -- styles conflicting with the new grid styles for main#ContentColumn.grid_twothirds.ContentColumn.grid_col -- */ .grid_container .grid_fourth .expand, .grid_container .grid_half .expand, .grid_container .grid_third .expand, .grid_container .grid_threefourths .expand, .grid_container .grid_twothirds .expand, .grid_container .grid_whole .expand { width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } /* -- margin between a p tag and the charts -- VDC 9/27/21 */ p ~ article.ContentBlock.chart { margin-top: 6rem; } /* -- margin between the featured news component and paragraph following -- VDC 9/27/21 */ .featured-news { margin-bottom: 6rem; } .ProfileAbstract .Contact { margin-top: 0px; } /* -- added horizontal margin above Facebook component -- VDC 9/27/21 -- no longer needed p ~ article.ContentBlock.facebook { margin-top: 6rem; } */ /* -- corrected margins on scholarship block - plans to develop this later as an asset -- VDC 9/27/21 -- */ .Rowstart.grid_whole.Inset.Shaded { margin-left: 30px; margin-right: 30px; } /* -- corrected left margin on h2 within scholarship block - plans to later develop this as an asset -- VDC 9/27/21 -- */ .Rowstart.grid_whole.Inset.Shaded .grid_inner { margin-left: 0px; } /* -- Contact details component -- flexbox css to place map on the right -- VDC 10/21/21 -- */ .ContentBlock.contact-info { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; } /* -- Carousel image resizing to fit space -- VDC 11/15/21 -- */ .Slides .Slide .Wrap img { display: block; margin: 0 auto; /* -- image width not filling space. Conflict with element.style -- VDC 7/29/24 -- */ width: 100% !important; height: 100%; object-fit: cover; } /* -- YouVisit videos resize to fit full-page width -- VDC 4/26/22 -- Remove page id after migrated -- VDC 8/11/22 -- */ div#hero.hero.expand.DynamicContent > .container { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); /*padding-bottom: 0; margin-bottom: 6rem;*/ } div#hero.hero.expand.DynamicContent > .container > div.cta-container { margin-bottom: 2rem; } .ContentBlock.call-to-action.DynamicContent.cta { margin-bottom: 2rem; } /* -- resolve margin-top on headings when appearing as first element within bordered column -- VDC 10/27/22 -- */ .Bordered > h2, .Bordered > h3, .Bordered > h4, .Bordered > h5, .Bordered > h6 { margin-top: 0px; } /* -- resolve margin-top on headings when appearing as first element within shaded column -- VDB 6426 -- */ .Shaded > h2, .Shaded > h3, .Shaded > h4, .Shaded > h5, .Shaded > h6 { margin-top: 0px; } /* -- add bottom margin to the related content component -- not within a grid layout -- VDC 10/28/22 -- */ .related-content { margin-bottom: 6rem; } /* -- resolve issue with no margin between stacked Important Links at page bottom -- example: https://www.missouristate.edu/MarCom/Web/standard-websites.htm -- VDC 8/1/23 -- */ @media screen and (max-width: 1023px) { .Rowstart.grid_half.grid_col > .ContentBlock.important-link { margin-bottom: 3rem; } } /* ----- New grid styles main#ContentColumn.grid_twothirds.ContentColumn.grid_col----- */ .grid_container > .grid_col > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col > .grid_col > :not(.grid_col):not(.Shaded):not(.Bordered):not(.expand), .grid_container > #ContentColumn.grid_col > .grid_col > .Shaded, .grid_container > #ContentColumn.grid_col > .grid_col > .Bordered, .grid_container > .grid_col > .grid_col > .grid_col > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col > .grid_col > .grid_col > .grid_col > :not(.grid_col):not(.Shaded):not(.Bordered) { margin-left: 30px; margin-right: 30px; clear: both; } .grid_container .grid_col > hr, .grid_container .Shaded .grid_col > hr, .grid_container .Bordered .grid_col > hr, .grid_container #ContentColumn.grid_col .grid_col.Inset > hr { margin-left: 0; margin-right: 0; } .grid_container .grid_col .grid_col > hr, .grid_container .Shaded .grid_col .grid_col > hr, .grid_container .Bordered .grid_col .grid_col > hr { margin-left: 30px; margin-right: 30px; } .grid_container .grid_col > :first-child { margin-top: 0; } .grid_container .grid_col > :last-child { margin-bottom: 0; } /* .grid_container>.grid_col .Shaded .grid_col:not(.grid_col), .grid_container>.grid_col .Shaded .grid_col>:not(.grid_col):not(.Shaded), .grid_container>.grid_col .Bordered .grid_col:not(.grid_col), .grid_container>.grid_col .Bordered .grid_col>:not(.grid_col):not(.Shaded) { margin-left: 0; margin-right: 0; } */ /* modified conflicts -- VDB 5/6/26 */ /*.Rowstart.grid_threefourths+.grid_fourth>:not(.grid_col):not(.Shaded):not(.Bordered), .Rowstart.grid_twothirds+.grid_third>:not(.grid_col):not(.Shaded):not(.Bordered), .Rowstart.grid_half+.grid_half>:not(.grid_col):not(.Shaded):not(.Bordered), .Rowstart.grid_fourth+.grid_threefourths>:not(.grid_col):not(.Shaded):not(.Bordered), */ /* -- fix margin from applying to feature-image-container within .Rowstart.grid_fourth and var -- VDC 42924 -- */ /* .Rowstart.grid_fourth+.grid_fourth>:not(.grid_col):not(.Shaded):not(.Bordered):not(div.ContentBlock.feature-image-container), .main_grid_container>.grid_col .Shaded>.Rowstart.grid_fourth+.grid_fourth+.grid_fourth>:not(.grid_col):not(.Shaded):not(.Bordered):not(div.ContentBlock.feature-image-container), .main_grid_container>.grid_col .Shaded>.Rowstart.grid_fourth+.grid_fourth+.grid_fourth+.grid_fourth>:not(.grid_col):not(.Shaded):not(.Bordered):not(div.ContentBlock.feature-image-container), */ /* resolve issue with blockquote and p margin-left:30 in a multi-column grid -- VDC 12623 -- */ /* removed :not(p) causing issues with two col 33 66 nested within shaded grid -- VDC 5324 -- */ /*.grid_container>.grid_col .Shaded>.Rowstart.grid_third+.grid_twothirds>:not(.grid_col):not(.Shaded):not(.Bordered):not(p.Intro):not(blockquote),*/ /* -- Exclude margin-left:30 from third column if contains ContentBlock.feature-image-container to prevent double margins -- VDC 42924 -- */ /*.main_grid_container>.grid_col .Shaded>.Rowstart.grid_third+.grid_third+.grid_third>:not(.grid_col):not(.Shaded):not(.Bordered):not(div.ContentBlock.feature-image-container), .main_grid_container>.grid_col .Shaded>.Rowstart.grid_fourth+.grid_threefourths>:not(.grid_col):not(.Shaded):not(.Bordered), .main_grid_container>.grid_col .Bordered>.Rowstart.grid_threefourths+.grid_fourth>:not(.grid_col):not(.Shaded):not(.Bordered), .main_grid_container>.grid_col .Bordered>.Rowstart.grid_twothirds+.grid_third>:not(.grid_col):not(.Shaded):not(.Bordered), .main_grid_container>.grid_col .Bordered>.Rowstart.grid_half+.grid_half>:not(.grid_col):not(.Shaded):not(.Bordered), .main_grid_container>.grid_col .Bordered>.Rowstart.grid_fourth+.grid_threefourths>:not(.grid_col):not(.Shaded):not(.Bordered), .main_grid_container>.grid_col .Bordered>.Rowstart.grid_fourth+.grid_fourth>:not(.grid_col):not(.Shaded):not(.Bordered), .main_grid_container>.grid_col .Bordered>.Rowstart.grid_fourth+.grid_fourth+.grid_fourth>:not(.grid_col):not(.Shaded):not(.Bordered), .main_grid_container>.grid_col .Bordered>.Rowstart.grid_fourth+.grid_fourth+.grid_fourth+.grid_fourth>:not(.grid_col):not(.Shaded):not(.Bordered), .main_grid_container>.grid_col .Bordered>.Rowstart.grid_third+.grid_twothirds>:not(.grid_col):not(.Shaded):not(.Bordered), .main_grid_container>.grid_col .Bordered>.Rowstart.grid_third+.grid_third+.grid_third>:not(.grid_col):not(.Shaded):not(.Bordered), .main_grid_container>.grid_col .Bordered>.Rowstart.grid_fourth+.grid_threefourths>:not(.grid_col):not(.Shaded):not(.Bordered) { margin-left: 30px; }*/ .main_grid_container>.grid_col .Shaded>.Rowstart.grid_threefourths>:not(.grid_col):not(.Shaded):not(.Bordered), .grid_container>.grid_col .Shaded>.Rowstart.grid_twothirds>:not(.grid_col):not(.Shaded):not(.Bordered), .grid_container>.grid_col .Shaded>.Rowstart.grid_half>:not(.grid_col):not(.Shaded):not(.Bordered), /* ----- Fix margin from applying to p tag or feature-image-container within .Rowstart.grid_third VDC 42924 ----- */ .grid_container>.grid_col .Shaded>.Rowstart.grid_third>:not(.grid_col):not(.Shaded):not(.Bordered):not(p):not(div.ContentBlock.feature-image-container), /* ----- Fix margin from applying to feature-image-container within .Rowstart.grid_fourth and var -- VDC 42924 ----- */ .main_grid_container>.grid_col .Shaded>.Rowstart.grid_fourth>:not(.grid_col):not(.Shaded):not(.Bordered):not(div.ContentBlock.feature-image-container), .main_grid_container>.grid_col .Shaded>.Rowstart.grid_fourth+.grid_fourth>:not(.grid_col):not(.Shaded):not(.Bordered):not(div.ContentBlock.feature-image-container), .main_grid_container>.grid_col .Shaded>.Rowstart.grid_fourth+.grid_fourth+.grid_fourth>:not(.grid_col):not(.Shaded):not(.Bordered):not(div.ContentBlock.feature-image-container), /* ----- Fix margin from applying to feature-image-container within .Rowstart.grid_fourth VDC 42924 ----- */ .main_grid_container>.grid_col .Shaded>.Rowstart.grid_fourth>:not(.grid_col):not(.Shaded):not(.Bordered):not(div.ContentBlock.feature-image-container), .grid_container>.grid_col .Bordered>.Rowstart.grid_threefourths>:not(.grid_col):not(.Shaded):not(.Bordered), .grid_container>.grid_col .Bordered>.Rowstart.grid_twothirds>:not(.grid_col):not(.Shaded):not(.Bordered), .grid_container>.grid_col .Bordered>.Rowstart.grid_half>:not(.grid_col):not(.Shaded):not(.Bordered), .grid_container>.grid_col .Bordered>.Rowstart.grid_third>:not(.grid_col):not(.Shaded):not(.Bordered), .grid_container>.grid_col .Bordered>.Rowstart.grid_fourth>:not(.grid_col):not(.Shaded):not(.Bordered), .grid_container>.grid_col .Bordered>.Rowstart.grid_fourth+.grid_fourth>:not(.grid_col):not(.Shaded):not(.Bordered), .grid_container>.grid_col .Bordered>.Rowstart.grid_fourth+.grid_fourth+.grid_fourth>:not(.grid_col):not(.Shaded):not(.Bordered), .grid_container>.grid_col .Bordered>.Rowstart.grid_fourth>:not(.grid_col):not(.Shaded):not(.Bordered) { margin-right: 30px; } .grid_container > .grid_col .Inset .Shaded > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Inset .Bordered > :not(.grid_col):not(.Shaded):not(.Bordered) { padding: 0; margin-right: 30px; } .Shaded article.ContentBlock { margin-left: 0px; } @media screen and (max-width: 1023px) { #MastheadControls .BearPass, #MastheadControls .Search, #MastheadControls .SiteIndex { vertical-align: top; } .grid_container.MainContent > .grid_col > nav.navigation-side { margin-left: 30px; margin-right: 30px; width: auto; } .grid_container > #ContentColumn.grid_col > .grid_col.Inset > .Shaded > .Inset { margin-bottom: 0; } .grid_container > .grid_col .Shaded > .Rowstart.grid_threefourths + .grid_fourth > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Shaded > .Rowstart.grid_twothirds + .grid_third > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Shaded > .Rowstart.grid_half + .grid_half > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Shaded > .Rowstart.grid_fourth + .grid_threefourths > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Shaded > .Rowstart.grid_fourth + .grid_fourth > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Shaded > .Rowstart.grid_fourth + .grid_fourth + .grid_fourth > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Shaded > .Rowstart.grid_fourth + .grid_fourth + .grid_fourth + .grid_fourth > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Shaded > .Rowstart.grid_third + .grid_twothirds > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Shaded > .Rowstart.grid_third + .grid_third + .grid_third > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Shaded > .Rowstart.grid_fourth + .grid_threefourths > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Bordered > .Rowstart.grid_threefourths + .grid_fourth > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Bordered > .Rowstart.grid_twothirds + .grid_third > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Bordered > .Rowstart.grid_half + .grid_half > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Bordered > .Rowstart.grid_fourth + .grid_threefourths > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Bordered > .Rowstart.grid_fourth + .grid_fourth > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Bordered > .Rowstart.grid_fourth + .grid_fourth + .grid_fourth > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Bordered > .Rowstart.grid_fourth + .grid_fourth + .grid_fourth + .grid_fourth > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Bordered > .Rowstart.grid_third + .grid_twothirds > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Bordered > .Rowstart.grid_third + .grid_third + .grid_third > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Bordered > .Rowstart.grid_fourth + .grid_threefourths > :not(.grid_col):not(.Shaded):not(.Bordered) { margin-left: 0px; } .grid_container > .grid_col .Shaded > .Rowstart.grid_threefourths > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Shaded > .Rowstart.grid_twothirds > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Shaded > .Rowstart.grid_half > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Shaded > .Rowstart.grid_third > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Shaded > .Rowstart.grid_fourth > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Shaded > .Rowstart.grid_fourth + .grid_fourth > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Shaded > .Rowstart.grid_fourth + .grid_fourth + .grid_fourth > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Shaded > .Rowstart.grid_fourth > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Bordered > .Rowstart.grid_threefourths > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Bordered > .Rowstart.grid_twothirds > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Bordered > .Rowstart.grid_half > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Bordered > .Rowstart.grid_third > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Bordered > .Rowstart.grid_fourth > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Bordered > .Rowstart.grid_fourth + .grid_fourth > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Bordered > .Rowstart.grid_fourth + .grid_fourth + .grid_fourth > :not(.grid_col):not(.Shaded):not(.Bordered), .grid_container > .grid_col .Bordered > .Rowstart.grid_fourth > :not(.grid_col):not(.Shaded):not(.Bordered) { margin-right: 0px; } .grid_container > .grid_col .Shaded > .Rowstart.grid_fourth > p { margin-right: 0px; } .grid_container > .grid_col > .grid_col > .grid_col > .Inset > .Shaded, .grid_container > .grid_col > .grid_col > .Bordered > .grid_col > .grid_col > .Inset > .Shaded { margin-bottom: 1rem; } .grid_container > .grid_col > .grid_col .Inset .Shaded { margin-bottom: 0rem; } } @media screen and (max-width: 767px) { .utility { width: 50%; } #MastheadControls .Search label { height: 0; position: absolute; width: 0; } .Search input#Keywords { display: inline-block; padding: 0 0.75rem; margin-left: 0.5rem; } #MastheadControls .ac-renderer { background: #fff; border: 1px solid #c2c2c2; -webkit-box-shadow: 0 0 2px rgb(0 0 0 / 30%); box-shadow: 0 0 2px rgb(0 0 0 / 30%); color: #0a0a0a; font-size: 0.85rem; margin-top: -50px; padding: 0.25rem; position: absolute; right: 0; z-index: 999; } #MastheadControls .ac-active { background-color: #f0f0f0; } } /* ----- End new grid styles ----- */ /* -- style for direct edit -- */ a#de { text-decoration: none; } /* -- end of style for direct edit --*/ /* -- form fieldset and legend overrides -- for fieldset had to use .ou-form and !important to override Omni styles default form styles. Missing the class style fieldset from OpenText-- VDC 12/13/21-- */ .ou-form fieldset { border: 1px solid #c2c2c2 !important; clear: both !important; margin: 0 0 1.5rem !important; padding: 0.75rem !important; } .ou-form fieldset legend { color: #0a0a0a; font-family: proxima-nova, Helvetica, Arial, sans-serif; font-size: 1rem; line-height: 1.5; border-bottom: none; width: auto; padding-left: 0.25rem; padding-right: 0.25rem; font-weight: 700; } /* -- override border radius on text fields within ldp-forms.ldp-forms.css -- VDC 5/25/22 -- */ .ou-form .form-group .form-control { border-radius: 0px; } /* -- override button styles within ldp-forms.ldp-forms.css -- VDC 5/25/22 -- */ .ou-form button.btn.btn-primary.ldp-hide-on-submit { background-color: transparent; border: 1px solid #c2c2c2; border-width: 2px; border-color: #eb002b; color: #0a0a0a; cursor: pointer; display: inline-flex; border-radius: 0px; justify-content: center; align-items: center; font-family: alternate-gothic-no-3-d, "Helvetica Neue Condensed", "Arial Narrow", Impact, sans-serif; font-size: 1rem; font-weight: 700; line-height: 1; text-transform: uppercase; margin: 0.5rem 0.5rem 0.5rem 0; padding: 0.5rem 1rem; } .ou-form button.btn.btn-primary:hover { background-color: #eb002b; border-color: #eb002b; color: #fff; text-decoration: none; } .ou-form button.btn.btn-primary:focus { color: #fff; background-color: #eb002b; border-color: #eb002b; } .ou-form button.btn.btn-primary:active { color: #fff; background-color: #eb002b; border-color: #eb002b; } .ou-form button.btn.btn-primary:active:focus { outline: 2px dotted #949494; outline-offset: 3px; z-index: 1000; border-color: #ffffff; -webkit-box-shadow: none; box-shadow: none; } /* -- fix standalone navigation component within content area - VDC 9/8/21 -- */ ouc\:div.ContentColumn nav.navigation div.nav-section a { margin-bottom: 1rem; line-height: 2rem; } /* -- fix full column featured image component - VDC 9/8/21 -- */ .ContentBlock.feature-image-container > img.image { width: 100%; display: block; -webkit-box-shadow: 0.75rem 0.75rem #bfced6; box-shadow: 0.75rem 0.75rem #bfced6; margin-bottom: 1.5rem; } /* -- fix size of videos when placed directly from OMNI - Different markup needed to appear as in OpenText -- VDC 9/10/21 -- */ video { width: 100%; height: auto; } /* -- fix issue with first instance of h2 within the left nav displaying correctly (wp) -- VDC 12/2/21 -- */ div.nav-section.loc h2 { font-family: alternate-gothic-no-3-d, "Helvetica Neue Condensed", "Arial Narrow", Impact, sans-serif; text-transform: uppercase; font-size: 1rem; line-height: 1; margin: 0 0 1rem 0; } .grid_container > #ContentColumn .course img { height: 44px; } /* -- fix left margin of Calendar Feed (wp) -- VDC 1/5/22 -- */ article.ContentBlock.CalendarFeed { margin-left: 0px; } /* -- fix student organization registration form (wp) -- VDC 1/5/22 -- */ div#StuOrgRegForm { margin-left: 30px; } /* -- fix h3 headings within tables under University Advancement auctions (wp) -- VDC 1/6/22 -- */ table.TableOverride h3 { margin-top: 0px; } /* -- fix right margin of second column tout within shaded area. Example wp.missouristate.edu/about/ -- VDC 1/11/22 -- */ .Shaded > .Rowstart.grid_half.grid_col + .grid_half.grid_col > .ContentBlock.tout > .image-container { margin-right: 15px; width: 100%; } /* -- reduce space under hero with call to action when quick links are omitted (link bar not present) (wp) -- VDC 6/9/22 -- */ .cta-container :not(.link-bar) { margin-bottom: 0; } /* -- reduce space under hero with call to action when quick links are omitted (link bar not present) (spfld) -- VDC 9/6/23 -- */ .call-to-action div.link-bar:empty { margin-top: 0rem; } /* -- fix issues with images within a ContentBlock.RichText third column. Example /Provost/FacultyAffairs/foundation-award-for-service-a.htm -- VDC 1/12/22 -- */ .Rowstart.grid_whole.grid_col > .Shaded > .Rowstart.grid_third.grid_col > .ContentBlock.RichText { margin-right: -30px; } .navigation .nav-section h2 { font-family: alternate-gothic-no-3-d, "Helvetica Neue Condensed", "Arial Narrow", Impact, sans-serif; text-transform: uppercase; font-size: 1rem; line-height: 1; margin: 0 0 1rem 0; } /* -- fix sizing with captcha buttons in old OpenText forms -- VDC 1/19/22 -- */ .captcha__buttons { width: 250px !important; } /* -- add line above h2 headings within local navigation -- VDC 4/13/22 -- */ .local .navigation .nav-section h2 ~ h2 { border-top: 1px solid #c2c2c2; padding: 1rem 0 0; } /* -- remove 1em right and left padding from background color for shaded / expanded blockquotes -- VDC 5/27/22 -- */ div.Shaded.expand { padding-left: 0; padding-right: 0; } /* -- fix catalog icon sizing during edit -- BDH 7/5/22 -- */ .catalog-icon { margin-left: 0.5rem; } .icon-legend, .catalog-icon { width: 24px; height: 24px; position: relative; top: 7px; } /* -- duplicate & edit scholarship styles to address adding a new scholarships container in scholarship lists -- PNB 7/22/22 -- */ .grid_container .ScholarshipList .Scholarships div > .Rowstart.grid_half:nth-last-child(2) { margin-bottom: 0; } .grid_container .ScholarshipList > .Scholarships > .grid_whole { padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid #c2c2c2; } .grid_container .ScholarshipList > .Scholarships > .grid_whole:first-of-type { padding-top: 1.5rem; border-top: 1px solid #c2c2c2; } .grid_container .ScholarshipList > .Scholarships > .grid_whole:last-child { margin-bottom: 0; } .grid_container .ScholarshipList .Scholarships .grid_half, .grid_container .ScholarshipList .Scholarships .grid_half + .grid_half { margin-top: 0; } /* -- add media queries for layouts with shaded / expanded blockquotes -- VDC 5/27/22 -- */ @media screen and (max-width: 767px) { .Shaded.expand .grid_inner figure { margin-left: 30px; margin-right: 30px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .Shaded.expand .grid_inner figure { margin-left: 50px; margin-right: 50px; } } @media screen and (min-width: 959px) and (max-width: 1023px) { .Shaded.expand .grid_inner figure { margin-left: 150px; margin-right: 150px; } } @media screen and (min-width: 1024px) and (max-width: 2560px) { .Shaded.expand .grid_inner figure { margin-left: 30px; margin-right: 30px; } } /* -- styles for removal of anchor tag within Springfield homepage logo -- VDC 7/15/22 -- */ #Masthead .Logo h1 { display: block; overflow-x: hidden; overflow-y: hidden; position: relative; } @media screen and (min-width: 768px) { #Masthead .Logo h1 { margin: 13px 10px 13px 10px; height: 24px; width: 201px; } } @media screen and (max-width: 959px) { #Masthead .Logo h1 { margin: 13px 10px 13px 10px; height: 24px; width: 219px; } } /* -- styles to account for removal of anchor tag in Foundation homepage logo -- VDC 7/15/22 -- */ #Masthead .Logo h1 { display: block; overflow: hidden; position: relative; } #Masthead .Logo h1 { margin: 13px 10px 13px 10px; height: 24px; width: 400px; } @media screen and (min-width: 960px) { #Masthead .Logo h1 { width: 400px; } } @media screen and (max-width: 959px) { #Masthead .Logo h1 { margin: 13px 10px 13px 10px; height: 24px; width: 400px; } } @media screen and (max-width: 767px) { #Masthead .Logo h1 { margin: 17px 0 18px 10px; height: 15px; width: 148px; } } @media screen and (max-width: 767px) { #MastheadControls a { display: none; } } /* -- add top margin to .GlobalNav on slide out navigation in mobile view -- VDC 7/26/22 -- */ @media screen and (max-width: 959px) { .MainNav .GlobalNav h2 { padding-top: 20px; } } /* -- resolve issue with wrapping of three column touts within a div with .Shaded class on mobile device -- VDC 8/11/22 -- */ @media screen and (max-width: 767px) { .ContentColumn div.Shaded .Rowstart.grid_third.grid_col { margin-right: 0px; width: 100%; margin-bottom: 3rem; } .Shaded .Rowstart.grid_third.grid_col + .grid_col { margin-right: 0px; width: 100%; margin-bottom: 3rem; } /* -- resolve issue with 33 66 -- second column has 3rem bottom margin when stacked -- VDC 1/8/24 -- */ .Shaded .Rowstart.grid_third.grid_col + .grid_twothirds.grid_col { margin-bottom: 0rem; } .Shaded .Rowstart.grid_third.grid_col + .grid_col + .grid_col { margin-left: 0px; width: 100%; margin-bottom: 3rem; } } /* -- add margin bottom to the last p tag within .Rowstart.grid_half.grid_col -- issue presented on this page https://webds.missouristate.edu/Elements-Patterns-Guide.htm -- VDC 10/20/22 -- Updated 7/24/24 from 3rem to 1rem -- */ @media screen and (max-width: 959px) { .Rowstart.grid_half.grid_col > p:last-child { margin-bottom: 1rem; } } /* -- Nested Grids -- all updated VDC 8/2/23 ------------------------------------ */ /* -- 25 25 25 25 -- */ /* -- 25 25 25 25 nested in 1 grid no .Bordered or .Shaded bottom margin -- main sgf not catching the rowstart -- in mobile view -- */ @media screen and (max-width: 1023px) { .ContentColumn .grid_whole.grid_col .Rowstart.grid_fourth, .ContentColumn .grid_whole.grid_col .Rowstart.grid_fourth + .grid_fourth, .ContentColumn .grid_whole.grid_col .Rowstart.grid_fourth + .grid_fourth + .grid_fourth, .ContentColumn .grid_whole.grid_col .Rowstart.grid_fourth + .grid_fourth + .grid_fourth + .grid_fourth { margin-bottom: 3rem; } } /* -- 25 25 25 25 nested in 1 grid col each col -- */ /* -- .Bordered -- */ main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_fourth.grid_col > .Bordered, main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col > .Bordered, main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col > .Bordered, main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col > .Bordered { max-width: calc(100% - 60px); margin-left: 30px; margin-right: 30px; } /* -- .Shaded -- no longer needed VDB 5/6/26 .Rowstart.grid_fourth.grid_col > .Shaded, .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col > .Shaded, .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col > .Shaded, .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col > .Shaded { max-width: calc(100% - 60px); margin-left: 30px; margin-right: 30px; } */ /* -- 25 25 25 25 add bottom margin in mobile view in full width column .Shaded or .Bordered -- */ /* -- .Shaded -- */ @media screen and (max-width: 1023px) { #ContentColumn .Shaded .Rowstart.grid_fourth.grid_col, #ContentColumn .Shaded .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col, #ContentColumn .Shaded .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col, #ContentColumn .Shaded .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col { margin-bottom: 3rem; } /* -- .Bordered -- */ #ContentColumn .Bordered .Rowstart.grid_fourth.grid_col, #ContentColumn .Bordered .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col, #ContentColumn .Bordered .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col, #ContentColumn .Bordered .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col { margin-bottom: 3rem; } } /* -- 25 25 25 25 remove bottom margin in desktop view when cols are within .Shaded or .Bordered -- VDC 8/2/23 -- */ /* -- .Shaded -- */ .Shaded .Rowstart.grid_fourth.grid_col, .Shaded .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col, .Shaded .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col, .Shaded .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col { margin-bottom: 0; } /* -- .Bordered -- */ .Bordered .Rowstart.grid_fourth.grid_col, .Bordered .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col, .Bordered .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col, .Bordered .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col { margin-bottom: 0; } /* -- 25 25 25 25 remove bottom margins from .Shaded or .Bordered individual cols in desktop view -- */ /* -- .Shaded -- */ .Rowstart.grid_fourth.grid_col > .Shaded, .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col > .Shaded, .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col > .Shaded, .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col > .Shaded { margin-bottom: 0; } /* -- .Bordered -- */ .Rowstart.grid_fourth.grid_col > .Bordered, .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col > .Bordered, .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col > .Bordered, .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col > .Bordered { margin-bottom: 0; } .ContentColumn > .grid_whole .grid_fourth .Bordered { margin-bottom: 0; } /* -- resolve display issues within 1 col .Shaded and .Bordered -- only temporary until new grid system can be developed -- */ @media screen and (min-width: 1023px) { /* no longer needed for migration to flexgrids VDB 5626 .Rowstart.grid_whole.grid_col > .Bordered { max-width: calc(100% - 2rem); box-sizing: border-box; } */ main#ContentColumn.grid_twothirds.ContentColumn.grid_col .grid_whole.grid_col > .Bordered .Rowstart.grid_fourth.grid_col { padding-left: 15px; padding-right: 15px; box-sizing: border-box; margin-left: -15px; } main#ContentColumn.grid_twothirds.ContentColumn.grid_col .grid_whole.grid_col > .Bordered .Rowstart.grid_fourth.grid_col > p { margin-right: 0px; margin-left: 0px; box-sizing: border-box; } main#ContentColumn.grid_twothirds.ContentColumn.grid_col .grid_whole.grid_col > .Bordered .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col { padding-left: 15px; padding-right: 15px; box-sizing: border-box; margin-left: 10px; } main#ContentColumn.grid_twothirds.ContentColumn.grid_col .grid_whole.grid_col > .Bordered .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col > p { margin-left: 0px; margin-right: 0px; box-sizing: border-box; } main#ContentColumn.grid_twothirds.ContentColumn.grid_col .grid_whole.grid_col > .Bordered .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col { padding-left: 15px; padding-right: 15px; box-sizing: border-box; margin-left: 10px; } main#ContentColumn.grid_twothirds.ContentColumn.grid_col .grid_whole.grid_col > .Bordered > .Rowstart.grid_fourth + .grid_fourth + .grid_fourth > p { margin-right: 0px; margin-left: 0px; box-sizing: border-box; } main#ContentColumn.grid_twothirds.ContentColumn.grid_col .grid_whole.grid_col > .Bordered > .Rowstart.grid_fourth + .grid_fourth + .grid_fourth > :not(.grid_col):not(.Shaded):not(.Bordered):not(p) { margin-right: 15px; margin-left: 15px; box-sizing: border-box; } main#ContentColumn.grid_twothirds.ContentColumn.grid_col .grid_whole.grid_col > .Bordered .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col { margin-right: -15px; padding-left: 15px; padding-right: 15px; box-sizing: border-box; float: right; position: relative; } main#ContentColumn.grid_twothirds.ContentColumn.grid_col .grid_whole.grid_col > .Bordered .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col > p { margin-left: 0px; margin-right: 0px; box-sizing: border-box; } /* no longer needed for migration to flex grids VDB 5626 .Rowstart.grid_whole.grid_col > .Bordered { max-width: calc(100% - 2rem); box-sizing: border-box; } */ main#ContentColumn.grid_twothirds.ContentColumn.grid_col .grid_whole.grid_col > .Shaded .Rowstart.grid_fourth.grid_col { padding-left: 15px; padding-right: 15px; box-sizing: border-box; margin-left: -15px; } main#ContentColumn.grid_twothirds.ContentColumn.grid_col .grid_whole.grid_col > .Shaded .Rowstart.grid_fourth.grid_col > p { margin-right: 0px; margin-left: 0px; box-sizing: border-box; } main#ContentColumn.grid_twothirds.ContentColumn.grid_col .grid_whole.grid_col > .Shaded .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col { padding-left: 15px; padding-right: 15px; box-sizing: border-box; margin-left: 10px; } main#ContentColumn.grid_twothirds.ContentColumn.grid_col .grid_whole.grid_col > .Shaded .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col > p { margin-left: 0px; margin-right: 0px; box-sizing: border-box; } main#ContentColumn.grid_twothirds.ContentColumn.grid_col .grid_whole.grid_col > .Shaded .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col { padding-left: 15px; padding-right: 15px; box-sizing: border-box; margin-left: 10px; } main#ContentColumn.grid_twothirds.ContentColumn.grid_col .grid_whole.grid_col > .Shaded > .Rowstart.grid_fourth + .grid_fourth + .grid_fourth > p { margin-right: 0px; margin-left: 0px; box-sizing: border-box; } /* -- exclude div.ContentBlock.feature-image-container to eliminate double margins -- VDC 42924 -- */ main#ContentColumn.grid_twothirds.ContentColumn.grid_col .grid_whole.grid_col > .Shaded > .Rowstart.grid_fourth + .grid_fourth + .grid_fourth > :not(.grid_col):not(.Shaded):not(.Bordered):not(p):not( div.ContentBlock.feature-image-container ) { margin-right: 15px; margin-left: 15px; box-sizing: border-box; } main#ContentColumn.grid_twothirds.ContentColumn.grid_col .grid_whole.grid_col > .Shaded .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col { margin-right: -15px; padding-left: 15px; padding-right: 15px; box-sizing: border-box; float: right; position: relative; } main#ContentColumn.grid_twothirds.ContentColumn.grid_col .grid_whole.grid_col > .Shaded .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col > p { margin-left: 0px; margin-right: 0px; box-sizing: border-box; } } /* -- 25 75 -- */ /* -- 25 75 nested in 1 grid col, each col -- */ /* -- .Shaded -- */ main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_fourth.grid_col > div.Shaded { max-width: calc(100% - 60px); margin-right: 30px; margin-left: 30px; } main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_fourth.grid_col + .grid_threefourths.grid_col > div.Shaded { max-width: calc(100% - 60px); margin-right: 30px; margin-left: 30px; } /* -- .Bordered -- */ main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_fourth.grid_col > div.Bordered { max-width: calc(100% - 60px); margin-right: 30px; margin-left: 30px; } main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_fourth.grid_col + .grid_threefourths.grid_col > div.Bordered { max-width: calc(100% - 60px); margin-right: 30px; margin-left: 30px; } /* -- 25 75 add bottom margin in mobile view -- */ /* -- .Shaded -- */ @media screen and (max-width: 1023px) { #ContentColumn .Shaded .Rowstart.grid_fourth.grid_col { margin-bottom: 3rem; } /* -- .Bordered -- */ #ContentColumn .Bordered .Rowstart.grid_fourth.grid_col { margin-bottom: 3rem; } } /* -- 25 75 remove bottom margin in desktop view when cols are within .Shaded or .Bordered -- VDC 8/2/23 */ /* -- .Shaded -- */ .Shaded .Rowstart.grid_fourth.grid_col, .Shaded .Rowstart.grid_fourth.grid_col + .grid_threefourths.grid_col { margin-bottom: 0; } /* -- .Bordered -- */ .Bordered .Rowstart.grid_fourth.grid_col, .Bordered .Rowstart.grid_fourth.grid_col + .grid_threefourths.grid_col { margin-bottom: 0; } /* -- 75 25 -- */ /* -- 75 25 nested in 1 grid col, each col Shaded and Bordered -- */ /* -- .Shaded -- */ main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_threefourths.grid_col > div.Shaded, main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_threefourths.grid_col + .grid_fourth.grid_col > div.Shaded { max-width: calc(100% - 60px); margin-right: 30px; margin-left: 30px; } /* -- .Bordered -- */ main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_threefourths.grid_col > div.Bordered, main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_threefourths.grid_col + .grid_fourth.grid_col > div.Bordered { max-width: calc(100% - 60px); margin-right: 30px; margin-left: 30px; } /* no longer needed VDB 5/11/26 .grid_whole.grid_col .Rowstart.grid_threefourths.grid_col { margin-bottom: 3rem; }*/ /* -- 75 25 -- add bottom margin when cols are within .Shaded and .Bordered block in mobile view -- */ /* -- .Shaded -- */ @media screen and (max-width: 1023px) { .ContentColumn .Shaded .Rowstart.grid_threefourths.grid_col { margin-bottom: 3rem; } } /* -- .Bordered -- */ @media screen and (max-width: 1023px) { .ContentColumn .Bordered .Rowstart.grid_threefourths.grid_col { margin-bottom: 3rem; } } /* -- 75 25 -- add bottom margin when cols are within .Shaded and .Bordered block -- */ /* -- .Shaded -- */ @media screen and (max-width: 1023px) { .Rowstart.grid_whole.grid-col > .Rowstart.grid_threefourths.grid_col + .grid_fourth.grid_col > div.Shaded { margin-bottom: 3rem; } } /* -- .Bordered -- */ @media screen and (max-width: 1023px) { .Rowstart.grid_whole.grid-col .Rowstart.grid_threefourths.grid_col > div.Bordered, .Rowstart.grid_whole.grid-col .Rowstart.grid_threefourths.grid_col + .grid_fourth.grid_col > div.Bordered { margin-bottom: 3rem; } } /* -- 50 50 -- */ /* -- live view not displaying correctly -- need margins between two columns -- example: https://www.missouristate.edu/Recreation/Aquatics/default.htm -- VDC 9/5/23 -- css taken from edit-mode.css -- */ /* -- grid half -- this applies to 50 50 without border or shade main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_half.grid_col { max-width:calc(50% - 15px); margin-right: 15px; } main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_half.grid_col+.grid_half.grid_col { max-width:calc(50% - 15px); margin-left:15px; } */ /* -- 50 50 nested in 1 grid col Shaded and Bordered -- */ /* -- .Shaded -- */ /* -- no longer need margins VDB 5626 -- main#ContentColumn.grid_twothirds.ContentColumn.grid_whole .Rowstart.grid_half.grid_col > div.Shaded, main#ContentColumn.grid_twothirds.ContentColumn.grid_whole .Rowstart.grid_half.grid_col + .grid_half.grid_col > div.Shaded { margin-left: 30px; margin-right: 30px; } */ /* -- .Bordered -- */ main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_half.grid_col > div.Bordered, main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_half.grid_col + .grid_half.grid_col > div.Bordered { margin-left: 30px; margin-right: 30px; } /* -- 50 50 -- fix bottom margin between stacked bordered or shaded -- */ @media screen and (max-width: 1023px) { main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_half.grid_col > div.Bordered, main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_half.grid_col > div.Shaded { margin-bottom: 3rem; } } /* -- 33 33 33 -- */ /* -- live view not displaying correctly -- need margins between three columns -- example: https://www.missouristate.edu/Recreation/Aquatics/default.htm -- VDC 9/5/23 -- css taken from edit-mode.css -- */ /* -- 33 33 33 -- this no longer working -- causing double margins -- VDC 42924 -- */ /* -- 33 33 33 -- this ensures touts and images within three column display right in live mode main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_third.grid_col { max-width:calc(33.3333% - 30px); margin-right:30px; } main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_third.grid_col+.grid_third.grid_col { max-width:calc(33.3333% - 30px); margin-right: 15px; margin-left:15px; } main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_third.grid_col+.grid_third.grid_col+.grid_third.grid_col { max-width:calc(33.3333% - 30px); margin-left: 30px; } -- */ /* -- 33 33 33 nested in 1 grid col each col -- */ /* -- .Shaded -- */ main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_third.grid_col > div.Shaded, main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_third.grid_col + .grid_third.grid_col > div.Shaded, main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col > div.Shaded { margin-right: 30px; margin-left: 30px; } /* -- 33 33 33 nested in 1 grid col each col -- */ /* -- .Bordered -- */ main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_third.grid_col > div.Bordered, main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_third.grid_col + .grid_third.grid_col > div.Bordered, main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col > div.Bordered { margin-right: 30px; margin-left: 30px; } /* -- 33 33 33 add bottom margin in mobile view -- */ /* -- .Shaded -- */ @media screen and (max-width: 1023px) { .Shaded .Rowstart.grid_third.grid_col, .Shaded .Rowstart.grid_third.grid_col + .grid_third.grid_col, .Shaded .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { margin-bottom: 3rem; } } /* -- .Bordered -- */ @media screen and (max-width: 1023px) { .Bordered .Rowstart.grid_third.grid_col, .Bordered .Rowstart.grid_third.grid_col + .grid_third.grid_col, .Bordered .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { margin-bottom: 3rem; } } @media screen and (max-width: 1023px) { .ContentColumn .grid_whole.grid_col .Rowstart.grid_third, .ContentColumn .grid_whole.grid_col .Rowstart.grid_third + .grid_third { margin-bottom: 3rem; } } /* -- 33 33 33 remove bottom margin from each col within .grid_whole.grid_col if .Bordered or .Shaded in desktop view */ /* -- .Shaded -- */ @media screen and (min-width: 1023px) { .grid_whole.grid_col .Shaded .Rowstart.grid_third.grid_col, .grid_whole.grid_col .Shaded .Rowstart.grid_third.grid_col + .grid_third.grid_col, .grid_whole.grid_col .Shaded .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { margin-bottom: 0; } } /* -- .Bordered -- */ @media screen and (min-width: 1023px) { .grid_whole.grid_col .Bordered .Rowstart.grid_third.grid_col, .grid_whole.grid_col .Bordered .Rowstart.grid_third.grid_col + .grid_third.grid_col, .grid_whole.grid_col .Bordered .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { margin-bottom: 0; } } /* -- 33 33 33 remove bottom margin from each .Bordered col within .grid_whole.grid_col in desktop view */ @media screen and (min-width: 1023px) { .ContentColumn > .grid_whole .grid_third > .Bordered { margin-bottom: 0; } } /* -- 33 33 33 remove bottom margin from last child (.grid_third.grid_col) when stacked in mobile view -- */ /* -- .Shaded -- */ @media screen and (max-width: 1023px) { .Shaded .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { margin-bottom: 0; } } /* -- .Bordered -- */ @media screen and (max-width: 1023px) { .Bordered .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { margin-bottom: 0; } } /* -- fix issue with three column grid not expanding to 100% when below 480px -- caused by css above -- add to pattern library -- VDC 33123 -- */ @media screen and (max-width: 1023px) { main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_whole.grid_col .Rowstart.grid_third.grid_col, main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_whole.grid_col .Rowstart.grid_third.grid_col + .grid_third.grid_col, main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_whole.grid_col .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { min-width: 100%; margin-left: 0px; margin-right: 0px; } } /* -- fix issue with three column grid rowstart not expanding to 100% when below 480px without a .Rowstart.grid_whole.grid_col wrapper -- add to pattern library -- VDC 42423 -- */ @media screen and (max-width: 480px) { main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_third.grid_col, main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_third.grid_col + .grid_third.grid_col, main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { min-width: 100%; margin-left: 0px; margin-right: 0px; } } /* -- fix issue with three column column grid -- conflict with sgf main css -- .ContentColumn div>.Rowstart.grid_third:nth-last-child(3) margin: 0 -- Add to pattern library -- VDC 42423 -- */ @media screen and (max-width: 480px) { .ContentColumn div > .Rowstart.grid_third:nth-last-child(3) { margin-bottom: 3rem; } } /* -- fix conflict with three column grid conflicting with sgf main css .ContentColumn div>.Rowstart.grid_third:nth-last-child(3) margin: 0 -- */ @media screen and (max-width: 480px) { .Rowstart.grid_third.grid_col:nth-of-type(3), .Rowstart.grid_third.grid_col:nth-of-type(4), .Rowstart.grid_third.grid_col:nth-of-type(5), .Rowstart.grid_third.grid_col:nth-of-type(6), .Rowstart.grid_third.grid_col:nth-of-type(7), .Rowstart.grid_third.grid_col:nth-of-type(8) { margin-bottom: 3rem !important; } } @media screen and (max-width: 480px) { main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_whole.grid_col .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { min-width: 100%; margin-left: 0px !important; margin-right: 0px; } } /* -- 33 33 33 -- .Bordered override default styles to achieve even margins and columns -- VDC 8/8/23 */ /* no longer needed for migration to flexgrids VDB 5626 .Rowstart.grid_whole.grid_col .Bordered { box-sizing: border-box; max-width: calc(100% - 20px); } */ .ContentColumn .Rowstart.grid_whole.grid_col > .Bordered > .Rowstart.grid_third.grid_col { margin-right: 20px; max-width: calc(33.3333% - 20px); } .ContentColumn .Rowstart.grid_whole.grid_col > .Bordered > .Rowstart.grid_third.grid_col > p { margin-right: 0px; } .ContentColumn .Rowstart.grid_whole.grid_col .Bordered .Rowstart.grid_third.grid_col + .grid_third.grid_col { margin-right: 10px; margin-left: 10px; max-width: calc(33.3333% - 20px); } .ContentColumn .Rowstart.grid_whole.grid_col > .Bordered > .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { margin-left: 20px; max-width: calc(33.3333% - 20px); } .ContentColumn .Rowstart.grid_whole.grid_col > .Bordered > .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col > p { margin-left: 0px; } @media screen and (max-width: 959px) { .ContentColumn .Rowstart.grid_whole.grid_col > .Bordered > .Rowstart.grid_third.grid_col, .ContentColumn .Rowstart.grid_whole.grid_col .Bordered .Rowstart.grid_third.grid_col + .grid_third.grid_col, .ContentColumn .Rowstart.grid_whole.grid_col > .Bordered > .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { width: 100%; } } /* -- 33 33 33 .Shaded override default styles to achieve even margins and columns -- VDC 8/8/23 --> */ /* no longer needed -- VDB 5/6/26 .Rowstart.grid_whole.grid_col .Shaded { box-sizing: border-box; max-width: calc(100% - 20px); } */ .ContentColumn .Rowstart.grid_whole.grid_col > .Shaded > .Rowstart.grid_third.grid_col { margin-right: 30px; max-width: calc(33.3333% - 30px); } .ContentColumn .Rowstart.grid_whole.grid_col > .Shaded > .Rowstart.grid_third.grid_col > p { margin-right: 0px; } .ContentColumn .Rowstart.grid_whole.grid_col > .Shaded .Rowstart.grid_third.grid_col + .grid_third.grid_col { margin-right: 15px; margin-left: 15px; max-width: calc(33.3333% - 30px); } .ContentColumn .Rowstart.grid_whole.grid_col > .Shaded > .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { margin-left: 30px; max-width: calc(33.3333% - 30px); } .ContentColumn .Rowstart.grid_whole.grid_col > .Shaded > .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col > p { margin-left: 0px; } @media screen and (max-width: 959px) { .ContentColumn .Rowstart.grid_whole.grid_col > .Shaded > .Rowstart.grid_third.grid_col, .ContentColumn .Rowstart.grid_whole.grid_col > .Shaded .Rowstart.grid_third.grid_col + .grid_third.grid_col, .ContentColumn .Rowstart.grid_whole.grid_col > .Shaded > .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { width: 100%; } } /* -- 33 33 33 within 1 col .Shaded and touts -- override default styles to display properly -- .grid_container>.grid_col .Shaded>.Rowstart.grid_third + .grid_third + .grid_third>:not(.grid_col):not(.Shaded):not(.Bordered), -- conflict with middle tout wider than others -- VDC 2/8/24 -- updated 2525 */ .Shaded .Rowstart.grid_third + .grid_third + .grid_third + .ContentBlock.tout { margin-left: 0px; } .grid_container > .grid_col .Shaded .Rowstart.grid_third.grid_col .ContentBlock.tout { margin-right: 0px; } .grid_container > .grid_col .Shaded > .Rowstart.grid_third + .grid_third + .grid_third div.ContentBlock.tout { margin-left: 0px !important; } .ContentColumn div.Rowstart.grid_whole.grid_col > .Shaded div.Rowstart.grid_third.grid_col div.ContentBlock.tout { margin-right: 0px; } /* -- 33 66 -- */ /* -- 33 66 nested in 1 grid col -- */ /* -- .Shaded -- */ main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_third.grid_col > div.Shaded, main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_third.grid_col + .grid_twothirds.grid_col > div.Shaded { margin-left: 30px; margin-right: 30px; } /* -- .Bordered -- */ main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_third.grid_col > div.Bordered, main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_third.grid_col + .grid_twothirds.grid_col > div.Bordered { margin-left: 30px; margin-right: 30px; } /* -- 33 66 add bottom margin within 1 grid col .Shaded and .Bordered in mobile view -- */ /* -- .Shaded -- */ @media screen and (max-width: 1023px) { #ContentColumn .Shaded .Rowstart.grid_third.grid_col { margin-bottom: 3rem; } /* -- this conflicts with line 293 .grid_container>.grid_col .Shaded>.Rowstart.grid_third + .grid_twothirds>:not(.grid_col):not(.Shaded):not(.Bordered):not(p.Intro):not(blockquote):not(p), -- VDC186 2/8/24 -- */ .grid_container > .grid_col .Shaded > .Rowstart.grid_third + .grid_twothirds > .ContentBlock.tout { margin-left: 0px !important; } } /* -- .Bordered -- */ @media screen and (max-width: 1023px) { #ContentColumn .Bordered .Rowstart.grid_third.grid_col { margin-bottom: 3rem; width: 100%; } } /* -- 33 66 nested in 1 grid no .Bordered or .Shaded bottom margin -- main sgf not catching the rowstart -- in mobile view -- */ @media screen and (max-width: 1023px) { .ContentColumn .grid_whole.grid_col .Rowstart.grid_third { margin-bottom: 3rem; min-width: 100%; } } /* -- 33 66 in 1 grid col .Shaded second col not getting left margin in desktop view -- conflict with other migration styles -- .grid_container>.grid_col .Shaded .grid_col>:not(.grid_col):not(.Shaded) -- VDC 8/4/23 -- */ /* -- no longer displaying correctly -- VDC 1/8/23 -- */ /* .grid_whole.grid_col .Shaded .Rowstart.grid_third.grid_col + .grid_twothirds.grid_col { margin-left:30px; width: calc(66.6666% - 30px) }*/ /* -- 33 66 in 1 grid col .Shaded second col remove left margin in mobile view -- VDC 8/4/23 -- */ @media screen and (max-width: 1023px) { .ContentBlock.RichText .grid_whole.grid_col .Shaded .Rowstart.grid_third.grid_col + .grid_twothirds.grid_col { margin-left: 0px; width: 100%; } } /* -- 66 33 -- */ /* -- 66 33 nested in 1 grid col -- */ /* -- .Shaded -- */ main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_twothirds.grid_col > div.Shaded, main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_twothirds.grid_col + .grid_third.grid_col > div.Shaded { margin-left: 30px; margin-right: 30px; } /* -- .Bordered -- */ main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_twothirds.grid_col > div.Bordered, main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_twothirds.grid_col + .grid_third.grid_col > div.Bordered { margin-left: 30px; margin-right: 30px; } /* -- 66 33 -- remove double margin from last child when stacked -- */ @media screen and (max-width: 1023px) { div.Bordered .Rowstart.grid_twothirds.grid_col + .grid_third { margin-bottom: 0px; } div.Shaded .Rowstart.grid_twothirds.grid_col + .grid_third { margin-bottom: 0px; } } /* -- 66 33 -- fix margin between col when stacked within 1 col shade and bordered -- */ @media screen and (max-width: 1023px) { .Rowstart.grid_whole.grid_col .Shaded > .Rowstart.grid_twothirds.grid_col + .grid_third { margin-bottom: 0px; } .Rowstart.grid_whole.grid_col .Bordered > .Rowstart.grid_twothirds.grid_col { margin-bottom: 3rem; } /* -- 66 33 -- fix margin between divs when stacked -- */ .Rowstart.grid_whole .Rowstart.grid_twothirds.grid_col { margin-bottom: 3rem; } } /* -- issue with two column grid containing ContentBlock touts without image -- VDC 12/12/23 -- */ .Rowstart.grid_half.grid_col .ContentBlock.tout { margin-right: 30px; } .Rowstart.grid_half.grid_col + .grid_half.grid_col .ContentBlock.tout { margin-left: 30px; } /* -- issue with 2 col within 1 col - second col stacking with indent and a top margin on mobile -- VDC 2/7/24 -- */ @media screen and (max-width: 1023px) { .ContentBlock.RichText .Rowstart.grid_half.grid_col + .grid_half.grid_col .ContentBlock.tout { margin-left: 0px; margin-top: 3rem; } } /* -- Acalog css -- eliminate top margin from first h2 within connector wrapper -- VDC 5/12/24 -- */ section.Shaded h2[data-el="program-title"], section.Bordered h2[data-el="program-title"], section.Shaded h2[data-el="course-title"], section.Bordered h2[data-el="course-title"], section.Shaded h2#areas-of-study-toc, section.Bordered h2#areas-of-study-toc { margin-top: 0; } /* -- Degree plan semester block -- VDB 6426 */ .DPSemBlock h3 { margin-top: 0; } table.DPSemester.TableOverride { margin-bottom: 0; } /* -- from main-sgf-new-build.css -- VDB 5/5/26 */ /* -- Nested Grids -- all updated VDC 8/2/23 ------------------------------------ */ /* -- remove main#ContentColumn.grid_twothirds so examples will extend full screen -- VDC 9/19/23 -- */ /* -- 25 25 25 25 -- */ /* -- 25 25 25 25 nested in 1 grid no .Bordered or .Shaded bottom margin -- main sgf not catching the rowstart -- in mobile view -- */ @media screen and (max-width: 1023px) { .ContentColumn .grid_whole.grid_col .Rowstart.grid_fourth, .ContentColumn .grid_whole.grid_col .Rowstart.grid_fourth + .grid_fourth, .ContentColumn .grid_whole.grid_col .Rowstart.grid_fourth + .grid_fourth + .grid_fourth, .ContentColumn .grid_whole.grid_col .Rowstart.grid_fourth + .grid_fourth + .grid_fourth + .grid_fourth { /* margin-bottom: 3rem; */ width: 100%; } } /* -- 25 25 25 25 nested in 1 grid col each col -- */ /* -- .Bordered -- */ .ContentColumn.grid_col .Rowstart.grid_fourth.grid_col > .Bordered, .ContentColumn.grid_col .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col > .Bordered, .ContentColumn.grid_col .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col > .Bordered, .ContentColumn.grid_col .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col > .Bordered { max-width: calc(100% - 60px); margin-left: 30px; margin-right: 30px; } /* no longer needed -- VDB 5/6/26 */ /* -- .Shaded -- .Rowstart.grid_fourth.grid_col > .Shaded, .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col > .Shaded, .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col > .Shaded, .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col > .Shaded { max-width: calc(100% - 60px); margin-left: 30px; margin-right: 30px; } */ /* -- 25 25 25 25 add bottom margin in mobile view in full width column .Shaded or .Bordered -- */ /* -- .Shaded -- */ @media screen and (max-width: 1023px) { /* #ContentColumn .Shaded .Rowstart.grid_fourth.grid_col, #ContentColumn .Shaded .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col, #ContentColumn .Shaded .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col, #ContentColumn .Shaded .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col { margin-bottom: 3rem; } */ /* -- .Bordered -- #ContentColumn .Bordered .Rowstart.grid_fourth.grid_col, #ContentColumn .Bordered .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col, #ContentColumn .Bordered .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col, #ContentColumn .Bordered .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col { margin-bottom: 3rem; } */ /* -- 25 25 25 25 remove bottom margin in desktop view when cols are within .Shaded or .Bordered -- VDC 8/2/23 -- */ /* -- .Shaded -- */ .Shaded .Rowstart.grid_fourth.grid_col, .Shaded .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col, .Shaded .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col, .Shaded .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col { margin-bottom: 0; } /* -- .Bordered -- */ .Bordered .Rowstart.grid_fourth.grid_col, .Bordered .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col, .Bordered .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col, .Bordered .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col { margin-bottom: 0; } } /* -- 25 25 25 25 remove bottom margins from .Shaded or .Bordered individual cols in desktop view -- */ /* -- .Shaded -- */ .Rowstart.grid_fourth.grid_col > .Shaded, .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col > .Shaded, .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col > .Shaded, .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col > .Shaded { margin-bottom: 0; } /* -- .Bordered -- */ .Rowstart.grid_fourth.grid_col > .Bordered, .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col > .Bordered, .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col > .Bordered, .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col > .Bordered { margin-bottom: 0; } .ContentColumn > .grid_whole .grid_fourth .Bordered { margin-bottom: 0; } /* -- resolve display issues within 1 col .Shaded and .Bordered -- only temporary until new grid system can be developed -- */ @media screen and (min-width: 1024px) { /* no longer needed for migration to flex grids VDB 5626 .Rowstart.grid_whole.grid_col > .Bordered { max-width: calc(100% - 2rem); box-sizing: border-box; } */ .ContentColumn.grid_col .grid_whole.grid_col > .Bordered .Rowstart.grid_fourth.grid_col { padding-left: 15px; padding-right: 15px; box-sizing: border-box; margin-left: -15px; margin-top: 0; margin-bottom: 0; } .ContentColumn.grid_col .grid_whole.grid_col > .Bordered .Rowstart.grid_fourth.grid_col > p { margin-right: 0; margin-left: 0; box-sizing: border-box; } .ContentColumn.grid_col .grid_whole.grid_col > .Bordered .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col { padding-left: 15px; padding-right: 15px; box-sizing: border-box; margin-top: 0; margin-left: 10px; margin-bottom: 0; } .ContentColumn.grid_col .grid_whole.grid_col > .Bordered .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col > p { margin-left: 0; margin-right: 0; box-sizing: border-box; } .ContentColumn.grid_col .grid_whole.grid_col > .Bordered .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col { padding-left: 15px; padding-right: 15px; box-sizing: border-box; margin-left: 10px; margin-top: 0; margin-bottom: 0; } .ContentColumn.grid_col .grid_whole.grid_col > .Bordered > .Rowstart.grid_fourth + .grid_fourth + .grid_fourth > p { margin-right: 0; margin-left: 0; box-sizing: border-box; } .ContentColumn.grid_col .grid_whole.grid_col > .Bordered > .Rowstart.grid_fourth + .grid_fourth + .grid_fourth > :not(.grid_col):not(.Shaded):not(.Bordered):not(p) { margin-right: 15px; margin-left: 15px; box-sizing: border-box; } .ContentColumn.grid_col .grid_whole.grid_col > .Bordered .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col { margin-right: -15px; padding-left: 15px; padding-right: 15px; box-sizing: border-box; float: right; position: relative; margin-top: 0; margin-bottom: 0; } .ContentColumn.grid_col .grid_whole.grid_col > .Bordered .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col > p { margin-left: 0; margin-right: 0; box-sizing: border-box; } /* no longer needed for migration to flex grids VDB 5626 .Rowstart.grid_whole.grid_col > .Bordered { max-width: calc(100% - 2rem); box-sizing: border-box; } */ .ContentColumn.grid_col .grid_whole.grid_col > .Shaded .Rowstart.grid_fourth.grid_col { padding-left: 15px; padding-right: 15px; box-sizing: border-box; margin-left: -15px; margin-top: 0; margin-bottom: 0; } .ContentColumn.grid_col .grid_whole.grid_col > .Shaded .Rowstart.grid_fourth.grid_col > p { margin-right: 0; margin-left: 0; box-sizing: border-box; } .ContentColumn.grid_col .grid_whole.grid_col > .Shaded .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col { padding-left: 15px; padding-right: 15px; box-sizing: border-box; margin-left: 10px; margin-top: 0; margin-bottom: 0; } .ContentColumn.grid_col .grid_whole.grid_col > .Shaded .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col > p { margin-left: 0; margin-right: 0; box-sizing: border-box; } .ContentColumn.grid_col .grid_whole.grid_col > .Shaded .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col { padding-left: 15px; padding-right: 15px; box-sizing: border-box; margin-left: 10px; margin-top: 0; margin-bottom: 0; } .ContentColumn.grid_col .grid_whole.grid_col > .Shaded > .Rowstart.grid_fourth + .grid_fourth + .grid_fourth > p { margin-right: 0; margin-left: 0; box-sizing: border-box; } .ContentColumn.grid_col .grid_whole.grid_col > .Shaded > .Rowstart.grid_fourth + .grid_fourth + .grid_fourth > :not(.grid_col):not(.Shaded):not(.Bordered):not(p) { margin-right: 15px; margin-left: 15px; box-sizing: border-box; } .ContentColumn.grid_col .grid_whole.grid_col > .Shaded .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col { margin-right: -15px; padding-left: 15px; padding-right: 15px; box-sizing: border-box; float: right; position: relative; margin-top: 0; margin-bottom: 0; } .ContentColumn.grid_col .grid_whole.grid_col > .Shaded .Rowstart.grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col > p { margin-left: 0; margin-right: 0; box-sizing: border-box; } } /* -- 100 col -- resolve issue with .expand style not applying -- VDC32724 -- */ .ContentBlock.featured-content.expand.shaded { width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } /* -- 25 75 -- */ /* -- 25 75 nested in 1 grid col, each col -- */ /* -- .Shaded -- */ .ContentColumn.grid_col .Rowstart.grid_fourth.grid_col > div.Shaded { max-width: calc(100% - 60px); margin-right: 30px; margin-left: 30px; } /* .ContentColumn.grid_whole .Rowstart.grid_fourth.grid_col + .grid_threefourths.grid_col > div.Shaded { max-width: calc(100% - 60px); margin-right: 30px; margin-left: 30px; }*/ /* -- .Bordered -- */ .ContentColumn.grid_col .Rowstart.grid_fourth.grid_col > div.Bordered { max-width: calc(100% - 60px); margin-right: 30px; margin-left: 30px; } .ContentColumn.grid_col .Rowstart.grid_fourth.grid_col + .grid_threefourths.grid_col > div.Bordered { max-width: calc(100% - 60px); margin-right: 30px; margin-left: 30px; } /* -- 25 75 add bottom margin in mobile view -- */ /* -- .Shaded -- */ @media screen and (max-width: 1023px) { /*#ContentColumn .Shaded .Rowstart.grid_fourth.grid_col { margin-bottom: 3rem; }*/ } .ContentColumn.grid_col .grid_whole.grid_col > .Shaded .Rowstart.grid_fourth.grid_col + .grid_threefourths.grid_col { padding-left: 15px; padding-right: 15px; margin-right: -15px; margin-top: 0; margin-bottom: 0; } .ContentColumn.grid_col .grid_whole.grid_col > .Shaded .Rowstart.grid_fourth.grid_col + .grid_threefourths.grid_col p { margin-left: 0; margin-right: 0; box-sizing: border-box; } /* -- .Bordered -- #ContentColumn .Bordered .Rowstart.grid_fourth.grid_col { margin-bottom: 3rem; } */ .ContentColumn.grid_col .grid_whole.grid_col > .Bordered .Rowstart.grid_fourth.grid_col + .grid_threefourths.grid_col { padding-left: 15px; padding-right: 15px; margin-right: -15px; margin-top: 0; margin-bottom: 0; } .ContentColumn.grid_col .grid_whole.grid_col > .Bordered .Rowstart.grid_fourth.grid_col + .grid_threefourths.grid_col p { margin-left: 0; margin-right: 0; box-sizing: border-box; } /* -- 25 75 shaded stacked -- */ @media screen and (max-width: 1023px) { .ContentColumn.grid_col .grid_whole.grid_col > .Shaded .Rowstart.grid_fourth.grid_col + .grid_threefourths.grid_col { padding-left: 0; padding-right: 0; margin-right: 0; margin-top: 30px; margin-bottom: 0; width: 100%; } .ContentColumn.grid_col .grid_whole.grid_col .Rowstart.grid_fourth.grid_col + .grid_threefourths.grid_col { width: 100%; } } /* -- 25 75 remove bottom margin in desktop view when cols are within .Shaded or .Bordered -- VDC 8/2/23 */ /* -- .Shaded -- */ .Shaded .Rowstart.grid_fourth.grid_col, .Shaded .Rowstart.grid_fourth.grid_col + .grid_threefourths.grid_col { margin-bottom: 0; } /* -- .Bordered -- */ .Bordered .Rowstart.grid_fourth.grid_col, .Bordered .Rowstart.grid_fourth.grid_col + .grid_threefourths.grid_col { margin-bottom: 0; } /* -- 75 25 -- */ /* -- 75 25 nested in 1 grid col, each col Shaded and Bordered -- */ /* -- .Shaded -- */ .ContentColumn.grid_col .Rowstart.grid_threefourths.grid_col > div.Shaded, .ContentColumn.grid_col .Rowstart.grid_threefourths.grid_col + .grid_fourth.grid_col > div.Shaded { max-width: calc(100% - 60px); margin-right: 30px; margin-left: 30px; } .ContentColumn.grid_col .grid_whole.grid_col > .Shaded .Rowstart.grid_threefourths.grid_col { padding-left: 15px; padding-right: 15px; margin-left: -15px; margin-top: 0; margin-bottom: 0; } .ContentColumn.grid_col .grid_whole.grid_col > .Shaded .Rowstart.grid_threefourths.grid_col + .grid_fourth.grid_col { margin-right: -15px; padding-left: 15px; padding-right: 15px; box-sizing: border-box; float: right; position: relative; margin-top: 0; margin-bottom: 0; } .ContentColumn.grid_col .grid_whole.grid_col > .Shaded .Rowstart.grid_threefourths.grid_col p { margin-left: 0; margin-right: 0; box-sizing: border-box; } .ContentColumn.grid_col .grid_whole.grid_col > .Shaded .Rowstart.grid_threefourths.grid_col + .grid_fourth.grid_col p { margin-left: 0; margin-right: 0; box-sizing: border-box; } /* -- .Bordered -- */ .ContentColumn.grid_col .grid_whole.grid_col > .Bordered .Rowstart.grid_threefourths.grid_col { padding-left: 15px; padding-right: 15px; margin-left: -15px; margin-top: 0; margin-bottom: 0; } .ContentColumn.grid_col .grid_whole.grid_col > .Bordered .Rowstart.grid_threefourths.grid_col + .grid_fourth.grid_col { margin-right: -15px; padding-left: 15px; padding-right: 15px; box-sizing: border-box; float: right; position: relative; margin-top: 0; margin-bottom: 0; } .ContentColumn.grid_col .grid_whole.grid_col > .Bordered .Rowstart.grid_threefourths.grid_col + .grid_fourth.grid_col p { margin-left: 0; margin-right: 0; box-sizing: border-box; } .ContentColumn.grid_col .grid_whole.grid_col > .Bordered .Rowstart.grid_threefourths.grid_col p { margin-left: 0; margin-right: 0; box-sizing: border-box; } /* -- .Bordered stacked -- */ @media screen and (max-width: 1023px) { .ContentColumn.grid_col .grid_whole.grid_col > .Bordered .Rowstart.grid_fourth.grid_col + .grid_threefourths.grid_col { padding-left: 0; padding-right: 0; margin-right: 0; margin-top: 30px; margin-bottom: 0; width: 100%; } } /* .grid_whole.grid_col .Rowstart.grid_threefourths.grid_col { margin-bottom: 3rem; } */ /* -- 75 25 -- add bottom margin when cols are within .Shaded and .Bordered block in mobile view -- */ /* -- .Shaded -- */ @media screen and (max-width: 1023px) { .ContentColumn .Shaded .Rowstart.grid_threefourths.grid_col { margin-bottom: 3rem; } } /* -- .Bordered -- */ @media screen and (max-width: 1023px) { .ContentColumn .Bordered .Rowstart.grid_threefourths.grid_col { margin-bottom: 3rem; } } /* -- 75 25 -- add bottom margin when cols are within .Shaded and .Bordered block -- */ /* -- .Shaded -- */ @media screen and (max-width: 1023px) { .Rowstart.grid_whole.grid-col > .Rowstart.grid_threefourths.grid_col + .grid_fourth.grid_col > div.Shaded { margin-bottom: 3rem; } } /* -- .Bordered -- */ @media screen and (max-width: 1023px) { .Rowstart.grid_whole.grid-col .Rowstart.grid_threefourths.grid_col > div.Bordered, .Rowstart.grid_whole.grid-col .Rowstart.grid_threefourths.grid_col + .grid_fourth.grid_col > div.Bordered { margin-bottom: 3rem; } } /* -- 75 25 .Bordered stacked -- */ @media screen and (max-width: 1023px) { .ContentColumn.grid_col .grid_whole.grid_col > .Bordered .Rowstart.grid_threefourths.grid_col { min-width: 100%; } .ContentColumn.grid_col .grid_whole.grid_col > .Bordered .Rowstart.grid_threefourths.grid_col + .grid_fourth.grid_col { min-width: 100%; margin-right: 0; padding-right: 0; padding-left: 0; margin-top: 30px; } } /* -- 75 25 .Shaded stacked -- */ @media screen and (max-width: 1023px) { .ContentColumn.grid_col .grid_whole.grid_col > .Shaded .Rowstart.grid_threefourths.grid_col { min-width: 100%; } .ContentColumn.grid_col .grid_whole.grid_col > .Shaded .Rowstart.grid_threefourths.grid_col + .grid_fourth.grid_col { min-width: 100%; margin-right: 0; padding-right: 0; padding-left: 0; margin-top: 30px; } } /* -- 75 25 No treatment stacked -- */ @media screen and (max-width: 1023px) { .grid_whole.grid_col .Rowstart.grid_threefourths.grid_col { margin-left: 0; min-width: 100%; } .grid_whole.grid_col .Rowstart.grid_threefourths.grid_col + .grid_fourth.grid_col { margin-left: 0; min-width: 100%; } } /* -- 50 50 -- */ /* -- 50 50 nested in 1 grid col Shaded and Bordered -- */ /* -- .Shaded -- */ .ContentColumn.grid_col .Rowstart.grid_half.grid_col > div.Shaded, .ContentColumn.grid_col .Rowstart.grid_half.grid_col + .grid_half.grid_col > div.Shaded { margin-left: 30px; margin-right: 30px; } /* -- .Bordered -- */ .ContentColumn.grid_col .Rowstart.grid_half.grid_col > div.Bordered, .ContentColumn.grid_col .Rowstart.grid_half.grid_col + .grid_half.grid_col > div.Bordered { margin-left: 30px; margin-right: 30px; } /* -- 50 50 -- resolve problem with bordered 50/50 columns appearing without gutter -- revised for new grids 5/5/26 VDB -- */ #ContentColumn .Rowstart.grid_half.grid_col { max-width: calc(50% - 30px); margin-right: 30px; } #ContentColumn .Rowstart.grid_half.grid_col + .grid_half.grid_col { max-width: calc(50% - 30px); margin-left: 30px; /* margin-bottom: 0; */ } /* -- 50 50 .Bordered stacked -- */ @media screen and (max-width: 1023px) { #ContentColumn .Bordered .Rowstart.grid_half.grid_col { min-width: 100%; margin-right: 15px; } #ContentColumn .Bordered .Rowstart.grid_half.grid_col + .grid_half.grid_col { min-width: 100%; margin-left: 0; } } /* -- 50 50 .Shaded stacked -- */ @media screen and (max-width: 1023px) { #ContentColumn .Shaded .Rowstart.grid_half.grid_col { min-width: 100%; margin-right: 15px; } #ContentColumn .Shaded .Rowstart.grid_half.grid_col + .grid_half.grid_col { min-width: 100%; margin-left: 0; } } /* -- 50 50 No treatment stacked -- */ @media screen and (max-width: 1023px) { #ContentColumn .Rowstart.grid_half.grid_col { min-width: 100%; margin-right: 0; } #ContentColumn .Rowstart.grid_half.grid_col + .grid_half.grid_col { min-width: 100%; margin-left: 0; } } /* -- 50 50 -- remove bottom margin when nested in 1 column bordered or shaded -- */ .ContentColumn.grid_col > div.Bordered .Rowstart.grid_half.grid_col, .ContentColumn.grid_col > div.Shaded .Rowstart.grid_half.grid_col { margin-bottom: 0; } /* -- 50 50 -- fix bottom margin between stacked bordered or shaded cols -- */ @media screen and (max-width: 1023px) { .ContentColumn.grid_col .Rowstart.grid_half.grid_col > div.Bordered, .ContentColumn.grid_col .Rowstart.grid_half.grid_col > div.Shaded { margin-bottom: 3rem; } } /* -- 33 33 33 nested in 1 grid col each col -- */ /* -- .Shaded -- */ .ContentColumn.grid_col .Rowstart.grid_third.grid_col > div.Shaded, .ContentColumn.grid_col .Rowstart.grid_third.grid_col + .grid_third.grid_col > div.Shaded, .ContentColumn.grid_col .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col > div.Shaded { margin-right: 30px; margin-left: 30px; } /* -- 33 33 33 nested in 1 grid col each col -- */ /* -- .Bordered -- */ .ContentColumn.grid_col .Rowstart.grid_third.grid_col > div.Bordered, .ContentColumn.grid_col .Rowstart.grid_third.grid_col + .grid_third.grid_col > div.Bordered, .ContentColumn.grid_col .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col > div.Bordered { margin-right: 30px; margin-left: 30px; } /* -- 33 33 33 add bottom margin in mobile view -- */ /* -- .Shaded -- @media screen and (max-width: 1023px) { .Shaded .Rowstart.grid_third.grid_col, .Shaded .Rowstart.grid_third.grid_col + .grid_third.grid_col, .Shaded .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { margin-bottom: 3rem; } }*/ /* -- .Bordered -- @media screen and (max-width: 1023px) { .Bordered .Rowstart.grid_third.grid_col, .Bordered .Rowstart.grid_third.grid_col + .grid_third.grid_col, .Bordered .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { margin-bottom: 3rem; } }*/ /* @media screen and (max-width: 1023px) { .ContentColumn .grid_whole.grid_col .Rowstart.grid_third, .ContentColumn .grid_whole.grid_col .Rowstart.grid_third + .grid_third { margin-bottom: 3rem; } }*/ /* -- 33 33 33 remove bottom margin from each col within .grid_whole.grid_col if .Bordered or .Shaded in desktop view */ /* -- .Shaded -- */ @media screen and (min-width: 1023px) { .grid_whole.grid_col .Shaded .Rowstart.grid_third.grid_col, .grid_whole.grid_col .Shaded .Rowstart.grid_third.grid_col + .grid_third.grid_col, .grid_whole.grid_col .Shaded .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { margin-bottom: 0; } } /* -- .Bordered -- */ @media screen and (min-width: 1023px) { .grid_whole.grid_col .Bordered .Rowstart.grid_third.grid_col, .grid_whole.grid_col .Bordered .Rowstart.grid_third.grid_col + .grid_third.grid_col, .grid_whole.grid_col .Bordered .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { margin-bottom: 0; } } /* -- 33 33 33 remove bottom margin from each .Bordered col within .grid_whole.grid_col in desktop view */ @media screen and (min-width: 1023px) { .ContentColumn > .grid_whole .grid_third > .Bordered { margin-bottom: 0; } } /* -- 33 33 33 remove bottom margin from last child (.grid_third.grid_col) when stacked in mobile view -- */ /* -- .Shaded -- */ @media screen and (max-width: 1023px) { .Shaded .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { margin-bottom: 0; } } /* -- .Bordered -- */ @media screen and (max-width: 1023px) { .Bordered .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { margin-bottom: 0; } } /* -- fix issue with three column grid not expanding to 100% when below 480px -- caused by css above -- add to pattern library -- VDC 33123 -- */ @media screen and (max-width: 480px) { .ContentColumn.grid_col .Rowstart.grid_whole.grid_col .Rowstart.grid_third.grid_col, .ContentColumn.grid_col .Rowstart.grid_whole.grid_col .Rowstart.grid_third.grid_col + .grid_third.grid_col { min-width: 100%; margin-left: 0; margin-right: 0; margin-bottom: 0; } } /* -- fix issue with three column grid rowstart not expanding to 100% when below 480px without a .Rowstart.grid_whole.grid_col wrapper -- add to pattern library -- VDC 42423 -- */ @media screen and (max-width: 480px) { .ContentColumn.grid_col .Rowstart.grid_third.grid_col, .ContentColumn.grid_col .Rowstart.grid_third.grid_col + .grid_third.grid_col, .ContentColumn.grid_col .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { min-width: 100%; margin-left: 0; margin-right: 0; } } /* -- fix issue with three column column grid -- conflict with sgf main css -- .ContentColumn div>.Rowstart.grid_third:nth-last-child(3) margin: 0 -- Add to pattern library -- VDC 42423 -- */ @media screen and (max-width: 480px) { .ContentColumn div > .Rowstart.grid_third:nth-last-child(3) { margin-bottom: 3rem; } } /* -- fix conflict with three column grid conflicting with sgf main css .ContentColumn div>.Rowstart.grid_third:nth-last-child(3) margin: 0 -- */ @media screen and (max-width: 480px) { .Rowstart.grid_third.grid_col:nth-of-type(3), .Rowstart.grid_third.grid_col:nth-of-type(4), .Rowstart.grid_third.grid_col:nth-of-type(5), .Rowstart.grid_third.grid_col:nth-of-type(6), .Rowstart.grid_third.grid_col:nth-of-type(7), .Rowstart.grid_third.grid_col:nth-of-type(8) { margin-bottom: 3rem !important; } } @media screen and (max-width: 480px) { main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_whole.grid_col .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { min-width: 100%; margin-left: 0 !important; margin-right: 0; } } /* -- 33 33 33 -- .Bordered override default styles to achieve even margins and columns -- VDC 8/8/23 -- */ /* -- no longer needed with flexbox -- VDC 52224 -- */ /* no longer needed for migration to flex grids VDB 5526 .Rowstart.grid_whole.grid_col .Bordered { box-sizing: border-box; max-width: calc(100% - 20px); } */ .ContentColumn .Rowstart.grid_whole.grid_col > .Bordered > .Rowstart.grid_third.grid_col { margin-right: 20px; max-width: calc(33.3333% - 20px); } .ContentColumn .Rowstart.grid_whole.grid_col > .Bordered > .Rowstart.grid_third.grid_col > p { margin-right: 0; } .ContentColumn .Rowstart.grid_whole.grid_col .Bordered .Rowstart.grid_third.grid_col + .grid_third.grid_col { margin-right: 10px; margin-left: 10px; max-width: calc(33.3333% - 20px); } .ContentColumn .Rowstart.grid_whole.grid_col > .Bordered > .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { margin-left: 20px; max-width: calc(33.3333% - 20px); } .ContentColumn .Rowstart.grid_whole.grid_col > .Bordered > .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col > p { margin-left: 0; } @media screen and (max-width: 1023px) { .ContentColumn .Rowstart.grid_whole.grid_col > .Bordered > .Rowstart.grid_third.grid_col, .ContentColumn .Rowstart.grid_whole.grid_col .Bordered .Rowstart.grid_third.grid_col + .grid_third.grid_col, .ContentColumn .Rowstart.grid_whole.grid_col > .Bordered > .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { min-width: 100%; margin-left: 0; } } @media screen and (max-width: 1023px) { .ContentColumn .Rowstart.grid_whole.grid_col .grid_third.grid_col { min-width: 100%; margin-left: 0; } } @media screen and (max-width: 1023px) { .ContentColumn .Rowstart.grid_whole.grid_col > .Bordered > .Rowstart.grid_third.grid_col { margin-bottom: 0; } .ContentColumn .Rowstart.grid_whole.grid_col > .Bordered .Rowstart.grid_third.grid_col + .grid_third.grid_col, .ContentColumn .Rowstart.grid_whole.grid_col > .Bordered > .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { min-width: 100%; margin-left: 0; margin-top: 30px; } } */ /* -- 33 33 33 .Shaded override default styles to achieve even margins and columns -- VDC 8/8/23 -- */ /* .Rowstart.grid_whole.grid_col .Shaded { box-sizing: border-box; max-width: calc(100% - 20px); }*/ .ContentColumn .Rowstart.grid_whole.grid_col>.Shaded>.Rowstart.grid_third.grid_col { margin-right: 20px; max-width: calc(33.3333% - 20px); } .ContentColumn .Rowstart.grid_whole.grid_col > .Shaded > .Rowstart.grid_third.grid_col > p { margin-right: 0; } .ContentColumn .Rowstart.grid_whole.grid_col > .Shaded .Rowstart.grid_third.grid_col + .grid_third.grid_col { margin-right: 10px; margin-left: 10px; max-width: calc(33.3333% - 20px); } .ContentColumn .Rowstart.grid_whole.grid_col > .Shaded > .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { margin-left: 20px; max-width: calc(33.3333% - 20px); } .ContentColumn .Rowstart.grid_whole.grid_col > .Shaded > .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col > p { margin-left: 0; } @media screen and (max-width: 1023px) { .ContentColumn .Rowstart.grid_whole.grid_col > .Shaded > .Rowstart.grid_third.grid_col { margin-top: 0; } .ContentColumn .Rowstart.grid_whole.grid_col > .Shaded .Rowstart.grid_third.grid_col + .grid_third.grid_col, .ContentColumn .Rowstart.grid_whole.grid_col > .Shaded > .Rowstart.grid_third.grid_col + .grid_third.grid_col + .grid_third.grid_col { min-width: 100%; margin-left: 0; margin-top: 30px; } } /* -- 33 66 -- */ /* -- 33 66 nested in 1 grid col -- */ /* -- .Shaded -- */ main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_third.grid_col > div.Shaded, main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_third.grid_col + .grid_twothirds.grid_col > div.Shaded { margin-left: 30px; margin-right: 30px; } /* -- .Bordered -- */ main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_third.grid_col > div.Bordered, main#ContentColumn.grid_twothirds.ContentColumn.grid_col .Rowstart.grid_third.grid_col + .grid_twothirds.grid_col > div.Bordered { margin-left: 30px; margin-right: 30px; } /* -- 33 66 add bottom margin within 1 grid col .Shaded and .Bordered in mobile view -- */ /* -- .Shaded -- @media screen and (max-width: 1023px) { #ContentColumn .Shaded .Rowstart.grid_third.grid_col { margin-bottom: 3rem; } }*/ /* -- .Bordered -- @media screen and (max-width: 1023px) { #ContentColumn .Bordered .Rowstart.grid_third.grid_col { margin-bottom: 3rem; } }*/ /* -- 33 66 nested in 1 grid no .Bordered or .Shaded bottom margin -- main sgf not catching the rowstart -- in mobile view -- */ /*@media screen and (max-width: 1023px) { .ContentColumn .grid_whole.grid_col .Rowstart.grid_third { margin-bottom: 3rem; } }*/ /* -- 33 66 in 1 grid col .Shaded second col not getting left margin in desktop view -- conflict with other migration styles -- .grid_container>.grid_col .Shaded .grid_col>:not(.grid_col):not(.Shaded) -- VDC 8/4/23 -- */ .grid_whole.grid_col .Shaded .Rowstart.grid_third.grid_col + .grid_twothirds.grid_col { margin-left: 30px; max-width: calc(66.6666% - 30px); } /* -- 33 66 in 1 grid col .Bordered second col not getting left margin in desktop view -- VDC 9/18/23 -- */ .grid_whole.grid_col .Bordered .Rowstart.grid_third.grid_col + .grid_twothirds.grid_col { margin-left: 30px; max-width: calc(66.6666% - 30px); } /* -- 33 66 in 1 grid col .Shaded second col remove left margin in mobile view -- VDC 8/4/23 -- */ @media screen and (max-width: 1023px) { .grid_whole.grid_col .Shaded .Rowstart.grid_third.grid_col { margin-left: 0; min-width: 100%; } .grid_whole.grid_col .Shaded .Rowstart.grid_third.grid_col + .grid_twothirds.grid_col { margin-left: 0; min-width: 100%; } } /* -- 33 66 .Bordered stacked -- */ @media screen and (max-width: 1023px) { .grid_whole.grid_col .Bordered .Rowstart.grid_third.grid_col { margin-left: 0; min-width: 100%; } .grid_whole.grid_col .Bordered .Rowstart.grid_third.grid_col + .grid_twothirds.grid_col { margin-left: 0; min-width: 100%; } } /* -- 33 66 No treatment stacked -- */ @media screen and (max-width: 1023px) { .grid_whole.grid_col .Rowstart.grid_third.grid_col { margin-left: 0; min-width: 100%; } .grid_whole.grid_col .Rowstart.grid_third.grid_col + .grid_twothirds.grid_col { margin-left: 0; min-width: 100%; } /* -- 66 33 -- */ /* -- 66 33 nested in 1 grid col -- */ /* -- .Shaded -- */ /* .ContentColumn.grid_col .Rowstart.grid_twothirds.grid_col > div.Shaded, .ContentColumn.grid_col .Rowstart.grid_twothirds.grid_col + .grid_third.grid_col > div.Shaded { margin-left: 30px; margin-right: 30px; }*/ .grid_whole.grid_col .Shaded .Rowstart.grid_twothirds.grid_col + .grid_third.grid_col { margin-left: 30px; max-width: calc(33.3333% - 30px); margin-bottom: 0; } .ContentColumn.grid_col .grid_whole.grid_col > .Shaded .Rowstart.grid_twothirds.grid_col + .grid_third.grid_col p { margin-left: 0; margin-right: 0; box-sizing: border-box; } /* -- .Bordered -- */ .ContentColumn.grid_col .Rowstart.grid_twothirds.grid_col > div.Bordered, .ContentColumn.grid_col .Rowstart.grid_twothirds.grid_col + .grid_third.grid_col > div.Bordered { margin-left: 30px; margin-right: 30px; } .grid_whole.grid_col .Bordered .Rowstart.grid_twothirds.grid_col + .grid_third.grid_col { margin-left: 30px; max-width: calc(33.3333% - 30px); margin-bottom: 0; } .ContentColumn.grid_col .grid_whole.grid_col > .Bordered .Rowstart.grid_twothirds.grid_col + .grid_third.grid_col p { margin-left: 0; margin-right: 0; box-sizing: border-box; } } /* -- 66 33 -- remove double margin from last child when stacked -- */ @media screen and (max-width: 1023px) { div.Bordered .Rowstart.grid_twothirds.grid_col + .grid_third { margin-bottom: 0; } div.Shaded .Rowstart.grid_twothirds.grid_col + .grid_third { margin-bottom: 0; } } /* -- 66 33 -- fix margin between col when stacked within 1 col shade, bordered and no treatment -- */ @media screen and (max-width: 1023px) { .Rowstart.grid_whole.grid_col .Shaded > .Rowstart.grid_twothirds.grid_col + .grid_third { margin-bottom: 0; } .grid_whole.grid_col .Bordered .Rowstart.grid_twothirds.grid_col { margin-right: 0; margin-bottom: 0; min-width: 100%; } .grid_whole.grid_col .Bordered .Rowstart.grid_twothirds.grid_col + .grid_third.grid_col { margin-left: 0; max-width: calc(33.3333% - 30px); margin-bottom: 0; min-width: 100%; } .grid_whole.grid_col .Shaded .Rowstart.grid_twothirds.grid_col { margin-right: 0; margin-bottom: 0; min-width: 100%; } .grid_whole.grid_col .Shaded .Rowstart.grid_twothirds.grid_col + .grid_third.grid_col { margin-left: 0; max-width: calc(33.3333% - 30px); margin-bottom: 0; min-width: 100%; } #ContentColumn .Rowstart.grid_twothirds.grid_col { min-width: 100%; margin-right: 0; } #ContentColumn .Rowstart.grid_twothirds.grid_col + .grid_third.grid_col { min-width: 100%; margin-left: 0; } } /* new css for migration to flex grids */ /* 50 50 */ #ContentColumn .Rowstart.grid_half.grid_col { max-width: calc(50% - 30px); margin-right: 30px; } #ContentColumn .Rowstart.grid_half.grid_col + .grid_col { max-width: calc(50% - 30px); margin-left: 30px; } @media screen and (max-width: 1023px) { #ContentColumn .Rowstart.grid_half.grid_col { margin-bottom: 3rem; } } /* 33 66 */ #ContentColumn .Rowstart.grid_third.grid_col { max-width: calc(33% - 30px); margin-right: 30px; } #ContentColumn .Rowstart.grid_third.grid_col + .grid_twothirds { max-width: calc(66% - 30px); margin-left: 30px; } /* 33 66 stacking under 1024px VDB 5/7/26 */ @media screen and (max-width: 1023px) { #ContentColumn .Rowstart.grid_third.grid_col + .grid_twothirds { min-width: 100%; margin-left: 0px; } } /* 66 33 */ #ContentColumn .Rowstart.grid_twothirds.grid_col { max-width: calc(66% - 30px); margin-right: 30px; } #ContentColumn .Rowstart.grid_twothirds.grid_col + .grid_third { max-width: calc(33% - 30px); margin-left: 30px; } /* 75 25 */ #ContentColumn .Rowstart.grid_threefourths.grid_col { max-width: calc(75% - 30px); margin-right: 30px; } #ContentColumn .Rowstart.grid_threefourths.grid_col + .grid_fourth { max-width: calc(25% - 30px); margin-left: 30px; } /* 75 25 stacking below 1024px VDB 6726 */ @media screen and (max-width: 1023px){ #ContentColumn .Rowstart.grid_threefourths.grid_col { min-width: 100%; margin-right: 0px; margin-bottom: 3rem; } #ContentColumn .Rowstart.grid_threefourths.grid_col + .grid_fourth { min-width: 100%; margin-left: 0px; } } /* 25 75 */ #ContentColumn .Rowstart.grid_fourth.grid_col { max-width: calc(25% - 30px); margin-right: 30px; } #ContentColumn .Rowstart.grid_fourth.grid_col + .grid_threefourths.grid_col { max-width: calc(75% - 30px); margin-left: 30px; } /* 25 75 stacking below 1024px VDB 6726 */ @media screen and (max-width: 1023px){ #ContentColumn .Rowstart.grid_fourth.grid_col { min-width: 100%; margin-right: 0px;} } @media screen and (max-width: 1023px){ #ContentColumn .Rowstart.grid_fourth.grid_col + .grid_threefourths.grid_col { min-width: 100%; margin-left: 0px; } } /* 33 33 33 */ #ContentColumn .Rowstart.grid_third.grid_col:has(+ .grid_third.grid_col + .grid_third.grid_col), #ContentColumn .Rowstart.grid_third.grid_col:has(+ .grid_third.grid_col + .grid_third.grid_col) + .grid_third.grid_col, #ContentColumn .Rowstart.grid_third.grid_col:has(+ .grid_third.grid_col + .grid_third.grid_col) + .grid_third.grid_col + .grid_third.grid_col { box-sizing: border-box; float: left; clear: none; width: calc((100% - 120px) / 3); max-width: calc((100% - 120px) / 3); margin-left: 0; margin-right: 0; } #ContentColumn .Rowstart.grid_third.grid_col:has(+ .grid_third.grid_col + .grid_third.grid_col), #ContentColumn .Rowstart.grid_third.grid_col:has(+ .grid_third.grid_col + .grid_third.grid_col) + .grid_third.grid_col { margin-right: 60px; } /* 25 25 25 25 */ #ContentColumn .Rowstart.grid_fourth.grid_col:has(+ .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col), #ContentColumn .Rowstart.grid_fourth.grid_col:has(+ .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col) + .grid_fourth.grid_col, #ContentColumn .Rowstart.grid_fourth.grid_col:has(+ .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col) + .grid_fourth.grid_col + .grid_fourth.grid_col, #ContentColumn .Rowstart.grid_fourth.grid_col:has(+ .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col) + .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col { box-sizing: border-box; float: left; clear: none; width: calc((100% - 180px) / 4); max-width: calc((100% - 180px) / 4); margin-left: 0; margin-right: 0; } #ContentColumn .Rowstart.grid_fourth.grid_col:has(+ .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col), #ContentColumn .Rowstart.grid_fourth.grid_col:has(+ .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col) + .grid_fourth.grid_col, #ContentColumn .Rowstart.grid_fourth.grid_col:has(+ .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col) + .grid_fourth.grid_col + .grid_fourth.grid_col { margin-right: 60px; } /* 25 25 25 25 stacking below 1024px VDB 6726 */ @media screen and (max-width: 1023px){ #ContentColumn .Rowstart.grid_fourth.grid_col:has(+ .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col), #ContentColumn .Rowstart.grid_fourth.grid_col:has(+ .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col) + .grid_fourth.grid_col, #ContentColumn .Rowstart.grid_fourth.grid_col:has(+ .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col) + .grid_fourth.grid_col + .grid_fourth.grid_col, #ContentColumn .Rowstart.grid_fourth.grid_col:has(+ .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col) + .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col { min-width: 100%; margin-left: 0; margin-right: 0; } #ContentColumn .Rowstart.grid_fourth.grid_col:has(+ .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col), #ContentColumn .Rowstart.grid_fourth.grid_col:has(+ .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col) + .grid_fourth.grid_col, #ContentColumn .Rowstart.grid_fourth.grid_col:has(+ .grid_fourth.grid_col + .grid_fourth.grid_col + .grid_fourth.grid_col) + .grid_fourth.grid_col + .grid_fourth.grid_col { margin-right: 0px; } } /* old grids have 6rem spacing full width; 4rem stacked -- can modify -- no css conflict with new grids -- new grids use section VDB 5/7/26 */ /* default spacing - if standalone columns (no .grid_whole wrapper) apply bottom spacing -- VDB 5/7/26 No longer necessary VDB 5/11/26 #ContentColumn .grid_col { margin-bottom: 6rem; } */ /* if a column is within a .grid_whole then .grid_whole (wrapper) applies the spacing otherwise bottom spacing is on the individual elements -- VDB 5726 */ #ContentColumn .grid_whole:has(> .grid_col) { margin-bottom: 6rem; } /* Remove column spacing off individual columns when within a .grid_whole wrapper -- VDB 5/7/26 when on columns when within a .grid_whole #ContentColumn .grid_whole:has(> .grid_col) > .grid_col { margin-bottom: 0; }*/ /* update bottom margin from 2 to 3rem to resolve spacing at tablet view VDB 1926 */ /* update so bottom margin is 3rem at tablet view VDB 5/7/26 */ @media screen and (max-width: 768px) { /* default spacing - if standalone columns (no .grid_whole wrapper) apply bottom spacing -- VDB 5/7/26 #ContentColumn .grid_col { margin-bottom: 3rem; } */ /* if a column is within a .grid_whole then .grid_whole (wrapper) applies the spacing -- VDB 5726 */ #ContentColumn .grid_whole:has(> .grid_col) { margin-bottom: 6rem; } /* if a column is within a wrapper reduce the margin bottom to 3rem on mobile */ @media screen and (max-width: 1023px) { #ContentColumn .grid_whole:has(> .grid_col) { margin-bottom: 3rem; } } /* Remove column spacing off individual columns when within a .grid_whole wrapper -- VDB 5/7/26 when on columns when within a .grid_whole #ContentColumn .grid_whole:has(> .grid_col) > .grid_col { margin-bottom: 0; }*/ } /* missing from main sgf build -- VDB 5/11/26 */ @media screen and (max-width: 1023px) { .ContentColumn>.grid_whole, .ContentColumn>.grid_half, .ContentColumn>.grid_third, .ContentColumn>.grid_fourth, .ContentColumn>.grid_twothirds, .ContentColumn>.grid_threefourths { margin-bottom: 3rem; } } section section { margin-top: 0; margin-bottom: 0; } /* if a ContentBlock (component) is nested within a new grid with a section, remove the bottom margin section adds a 2rem padding around what is inside -- VDB 5/12/26 */ section .ContentBlock { margin-bottom: 0; } /* section .accordion, section .article.tabs-edit.ContentBlock, section .call-to-action, section .contact-info, section .featured-news, section .related-content, section .ContentBlock.tout, section .two-column-tout { margin-bottom: 0; }*/ /* no longer needed -- VDB 5/14/26 section .tout .headline { margin-top: 2rem; } */