/* Emergency */ .emergency_Wrapper { background-color: #FFD200; text-align: center; font-size: 16px; font-family: greycliff-light; padding: 12px; } .emergency_Wrapper a { color: #3379b7; } /* Accessibility */ #HPHeader { display: none; } a:focus { outline: 1px dotted #888888 !important; } /* Google Fix for Broken CSWP for People */ div.CSWPGoogleFix { display: none; } html.ms-isBot div.CSWPGoogleFix { display: block; } body.authenticated div.CSWPGoogleFix { display: block; background-color: #DEDEDE; padding: 10px; margin-bottom: 20px; } body.authenticated div.CSWPGoogleFix::before { content: "PersonForGoogle: This is what Google Sees"; font-size: 20px; margin-bottom: 20px; color: #FF2222; } /* ==================================================================================== */ /* ========================= CAS SharePoint 2013 Template CSS ========================= */ /* ================================== Master Page ===================================== */ /* ==================================================================================== */ /* */ /* Base / Starter Design Values: */ /* */ /* Foreground Color (Black): rgb(0, 0, 0) or #000000 */ /* Background Color (White): rgb(255, 255, 255) or #FFFFFF */ /* Body / Standard Font: 'Tahoma', 'Arial', sans-serif */ /* Header / Flair Font: 'Tahoma', 'Verdana', sans-serif */ /* Link Color (UD Blue, Primary): rgb(0, 83, 159) or #00539F */ /* Link Hover Color: (UD Blue, Secondary): rgb(0, 38, 99) or #002663 */ /* */ /* ==================================================================================== */ /* Hide Nav on WWW */ body.www #suiteBarButtons, body.www #s4-ribbonrow { display: none; } body.HomePageEditors.www #suiteBarButtons, body.HomePageEditors.www #s4-ribbonrow { display: inline-block; } /* Accessibilty */ #SkipNav a { left:-999px; position:absolute; top:auto; width:1px; height:1px; overflow:hidden; z-index:-999; } #SkipNav a:focus, #SkipNav a:active { color: #fff; background-color:#000; left: auto; top: auto; width: 30%; height: auto; overflow:auto; margin: 10px 35%; padding:5px; border-radius: 15px; border:4px solid yellow; text-align:center; font-size:1.2em; z-index:999; } .HiddenForAccessibility { display: block; height: 0px; width: 0px; overflow: hidden; } /* New Google Search CSS Overrides */ #udbBanner .cse .gsc-control-cse, #udbBanner .gsc-control-cse { background-color: transparent; border: none; padding: 0px; } #udbBanner .gsc-control-cse { width: 240px; } #udbBanner .gsc-input { padding: 0px; } #udbBanner input.gsc-input { font-size: 13px; } #udbBanner table.gsc-search-box td { vertical-align: top; } #udbBanner .gsc-input-box { height: 16px; } #udbBanner .gsib_a { padding: 0px; } #udbBanner .gsst_a { padding-top: 2px; } #udbBanner #gsc-i-id1 { height: 16px !important; } #udbBanner input.gsc-search-button, #udbBanner input.gsc-search-button:hover, #udbBanner input.gsc-search-button:focus { background-color: #ffd200; } #udbBanner .cse .gsc-search-button input.gsc-search-button-v2, #udbBanner input.gsc-search-button-v2 { padding: 2.4px; margin: 0px 1px; border: none; border-radius: 0px; } /* Still deciding if I really want to customize the search results #udbBanner .gsc-results-wrapper-overlay { background-color: rgba(237, 233, 224, 1); } #udbBanner .gsc-results .gsc-cursor-box .gsc-cursor-current-page { color: #283E66; padding: 5px; } #udbBanner .gsc-url-top { padding-left: 20px; } #udbBanner .gs-fileFormat { padding-left: 10px; padding-top: 5px; } #udbBanner .gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType { padding-left: 20px; padding-top: 5px; }*/ /* FONT DECLARATIONS - OLD STYLE */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: local('Montserrat-Regular'), url(//fonts.gstatic.com/s/montserrat/v6/zhcz-_WihjSQC0oHJ9TCYBsxEYwM7FgeyaSgU71cLG0.woff) format('woff'); } @font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400; src: local('Cinzel-Regular'), url(//fonts.gstatic.com/s/cinzel/v4/mLL0ZqnXRx3m16FnBy9gcg.woff) format('woff'); } /* ==================================================================================== */ /* ---------- CSS Baseline /* ==================================================================================== */ /* CSS Reset */ html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, a, em, img, strong, b, i, ol, ul, li, form, input, label, table, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; vertical-align: baseline; } body { line-height: 1; } ol, ul { list-style: none; list-style-type: none; } table { border-collapse: collapse; border-spacing: 0; } p { margin-bottom: 16px; } a:hover { cursor: pointer; } /* Default Color and Style */ /* Since SharePoint adds its own code and elements, we cannot apply default styles */ /* to the entire HTML tree without breaking SharePoint's interface. So, we apply */ /* default styling using a class, .defaultStyleOverride, that is placed on a div */ /* element, #pageContainer, placed directly after the ctl00_DeltaPlaceHolderMain */ /* element, which is the SharePoint structure surrounding the page layout. */ /* Font Style */ .defaultStyleOverride { font-family: 'Open Sans', 'Tahoma', 'Arial', sans-serif; font-size: 12px; line-height: 140%; color: rgba(0, 0, 0, .7); } .defaultStyleOverride a { color: rgba(16, 16, 48, .8); } /* Link Style */ /* We apply the link styles directly to the elements that will contain page-level */ /* text content. If we applied it to #pageContainer, it would apply to both menus, */ /* the footer, etc. which all normally deviate from the base text style. */ .opBody a, .opMediaCap a, .ms-webpart-zone a, .opBody a:link, .opMediaCap a:link, .ms-webpart-zone a:link, .opBody a:visited, .opMediaCap a:visited, .ms-webpart-zone a:visited { color: rgba(45, 100, 115, 0.88); } .opBody a:hover, .opMediaCap a:hover, .ms-webpart-zone a:hover, .opBody a:active, .opMediaCap a:active, .ms-webpart-zone a:active { color: rgba(0, 38, 99, .72); } .opBody a, .opMediaCap a { font-weight: 600; } /* BAD CSS :not[.opBody] .ms-webpart-zone a { font-weight: normal; } *//* Web Parts outside of OmniPage should not automatically get bolded. */ /* Page Background Color */ #s4-bodyContainer { background-color: rgb(255, 255, 255); } /* Forms Elements */ .defaultStyleOverride input[type="password"], .defaultStyleOverride input[type="text"], .defaultStyleOverride input[type="file"] { padding: 2px 5px; } .defaultStyleOverride input, .defaultStyleOverride select, .defaultStyleOverride label, .defaultStyleOverride textarea, .defaultStyleOverride button, .defaultStyleOverride option { font-family: inherit; } .defaultStyleOverride textarea { padding: 5px; resize: none; } /* Headers */ h1, #header { margin-bottom: 30px; } h1, #header, #header input { max-height: 32px; font-size: 20px; line-height: 160%; color: rgba(0, 0, 0, 0.85); } h2, .opSubTitle, .opSubTitle input { font-size: 17px; padding: 0; margin: 12px 0 10px 0; line-height: 160%; color: rgba(0, 0, 0, .45); } /* ==================================================================================== */ /* ---------- SharePoint Functionality / Design / Security Overrides and Extensions /* ==================================================================================== */ /* SharePoint 2013 comes with a button called "Focus on Content" that, when clicked, */ /* would hide the global and current nav (top and left nav). We have no use for this. */ #fullscreenmodebox { display: none; } /* Remove the Public-Side Login Button. All logins should be from the Publish extend. */ .ms-signInLink { display: none !important; } /* By default, SharePoint puts an "Edit Menu" button next to each Menu. We do not want */ /* our users editing either menu using that interface. */ #currentNavigation .ms-listMenu-editLink, #globalNavigation .ms-listMenu-editLink { display: none !important; } /* SharePoint adds its ribbon on to the page by disabling the browser's normal */ /* scrollbar and creating a homegrown scroll bar for the part of the page that is under */ /* the ribbon. This keeps the Ribbon always on top, but it's super-glitchy, especially */ /* in mobile view. Since we don't use the ribbon in Display Mode, what we can do is */ /* restore the normal scrollbar for all site visitors - effectively solving the issue, */ /* albeit not in Edit Mode. The default for the overflow property is 'visible'. However */ /* SharePoint also adds a height and width value on the #s4-workspace element, probably */ /* tied to some JavaScript function, that constantly updates those values as the window */ /* is resized, and we need to undo that as well, using auto and !important since SP */ /* uses in-line styles for that. */ body.unauthenticated { overflow: visible !important; } body.unauthenticated #s4-workspace { overflow: visible !important; height: auto !important; width: auto !important; } /* We add a few of our own buttons to the SharePoint Ribbon. This sets the glyph color. */ .ms-promotedActionButton .fa { color: rgba(0, 0, 0, .7); } /* SharePoint web parts and web part zones come with margin. We set it back to 0. */ #pageContainer .dfwp-column { margin: 0; } #pageContainer .ms-webpartzone-cell { margin: 0; } /* Users, matter how well trained, universally try to edit a page containing a web part */ /* by clicking one of the 'Edit Page' buttons in the ribbon / context menu instead of */ /* going to the appropriate list to modify the list data. Bad things can sometimes */ /* happen if a web part page is left checked-out (like, not grabbing 'fresh' data), so */ /* we've created a user group called 'WebPartEditors', and for people not in this group */ /* we remove the buttons in the ribbon. */ body.HomePageEditorsOnly:not(.HomePageEditors) #Ribbon\.WikiPageTab\.EditAndCheckout #Ribbon\.WikiPageTab\.EditAndCheckout\.SaveEdit-Large, body.HomePageEditorsOnly:not(.HomePageEditors) #Ribbon\.WikiPageTab\.EditAndCheckout #Ribbon\.WikiPageTab\.EditAndCheckout\.Checkout-Large, body.HomePageEditorsOnly:not(.HomePageEditors) li#Ribbon\.WikiPageTab\.Manage, body.HomePageEditorsOnly:not(.HomePageEditors) a#mp1_0_3_Anchor, body.HomePageEditorsOnly:not(.HomePageEditors) a#mp1_0_4_Anchor, body.HomePageEditorsOnly:not(.HomePageEditors) a#mp1_0_5_Anchor, body.HomePageEditorsOnly:not(.HomePageEditors) a[id*="PageStateActionButton"], body.WebPartEditorsOnly:not(.WebPartEditors) #Ribbon\.WikiPageTab\.EditAndCheckout #Ribbon\.WikiPageTab\.EditAndCheckout\.SaveEdit-Large, body.WebPartEditorsOnly:not(.WebPartEditors) #Ribbon\.WikiPageTab\.EditAndCheckout #Ribbon\.WikiPageTab\.EditAndCheckout\.Checkout-Large, body.WebPartEditorsOnly:not(.WebPartEditors) li#Ribbon\.WikiPageTab\.Manage, body.WebPartEditorsOnly:not(.WebPartEditors) a#mp1_0_3_Anchor, body.WebPartEditorsOnly:not(.WebPartEditors) a#mp1_0_4_Anchor, body.WebPartEditorsOnly:not(.WebPartEditors) a#mp1_0_5_Anchor, body.WebPartEditorsOnly:not(.WebPartEditors) a[id*="PageStateActionButton"], body:not(.WebPartEditors) #showWebPartButton { display: none; } /* If a page has the class seedPage we want to hide the controls for adding a sibling page */ body.seedPage #Ribbon\.WikiPageTab\.EditAndCheckout\.Controls\.NewPublishingPage\.Menu\.MainSection\.Controls\.CreateAsSibling-Menu { display: none } body.seedPage #Ribbon\.WikiPageTab\.EditAndCheckout\.Controls\.NewPublishingPage-Large a:first-of-type { pointer-events: auto; cursor: default; } /* Hide the Approve/reject buttons that are intended for non-worfklow-based-approval */ /* MAY NOT NEED ANYMOER - #Ribbon\.PublishTab\.Publishing-LargeMedium-1 { display: none; } */ /* Hide Mobile-Only stuff in Non-Mobile Modes */ @media only screen and (min-width: 970px) { .hideInDesktopMode { display: none; } } /* Hide Share and Follow Icons in gray bar */ #RibbonContainer-TabRowRight #ctl00_ctl00_ctl52_site_share_button, #RibbonContainer-TabRowRight #site_follow_button { display: none !important; } /* ==================================================================================== */ /* ---------- Site-Wide Reusable Elements /* ==================================================================================== */ /* CSS Tooltips */ .hasTooltip .tooltip { z-index: 10; background-color: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, .3); display: none; margin-top: 30px; margin-left: -120px; width: 240px; max-width: 240px; min-width: 240px; text-align: center; cursor: default; } .hasTooltip:hover .tooltip { display: inline-block; position: absolute; } .hasTooltip .tooltip h6 { background-color: rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.8); font-size: 13px; font-weight: 600; padding: 0 14px; line-height: 40px; text-transform: uppercase; } .hasTooltip .tooltip p { background-color: rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.75); font-size: 10px; line-height: 140%; padding: 0 14px 14px 14px; margin: 0; } /* Formatting Helpers */ .hidden, body.displayMode .hiddenInDisplayMode, body.editMode .hiddenInEditMode { display: none !important; } .clearFloat:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } /* FontAwesome Glyphs */ #custom .fa { font-family: "FontAwesome"; } /* ==================================================================================== */ /* ---------- Managed-Metadata Applied CSS Styling /* ==================================================================================== */ /* We use Managed Metadata to add custom properties to a specific page/url. Our JS then */ /* adds those properties as classes to the element, such as */ /* . This allows us to apply styles on individual pages. */ /* Removes All Styling on the Page, Leaving Just Raw SharePoint Objects and Content. */ .unskinned #currentNavigation, .unskinned #banner, .unskinned #MobileBar, .unskinned #globalNavigation, .unskinned #powerFooter, .unskinned #udbBannerContainer, .unskinned #udbFooterContainer, .unskinned #toolBar, .unskinned #suiteBar, .unskinned #s4-ribbonrow { display: none !important; } .unskinned #pageContent, .unskinned #pageLayout, .unskinned #pageContainer, .unskinned .opBody { width: 100% !important; padding-bottom: 0 !important; margin: 0 !important; left: 0 !important; } /* ==================================================================================== */ /* ---------- Page Layout (Top / Supra-Menu) /* ==================================================================================== */ /* The Master Page controls the layout and styling of the parts of the page that don't */ /* live within a particular page layout. This is normally the supra-banner UD branding, */ /* the banner, the primary horizontal navigation, the power footer navigation, the */ /* standard footer, and if applicable, the sub-footer UD branding. */ /* Page Layout */ #s4-bodyContainer { padding-bottom: 50px; } #pageContainer { margin: 0 auto; padding: 0; width: 970px; } #pageLayout { margin-top: 42px; padding-bottom: 42px; width: 970px; max-width: 970px; min-height: 380px; } /* The Banner */ #banner { height: 140px; width: 970px; overflow: hidden; position: relative; } #bannerTitle { height: 60px; width: 700px; display: block; padding: 10px; margin: 30px 25px 30px 25px; color: rgba(0, 0, 0, 0.85); } #bannerTitleText:before { content: "Department of"; text-transform: uppercase; font-size: 16px; font-family: 'Montserrat'; letter-spacing: 2px; display: block; } #bannerTitleText:after { content: "SharePoint Templatology"; text-transform: uppercase; font-size: 46px; font-family: 'Cinzel'; padding-top: 15px; display: block; } /* This is the Banner Image shown in the mobile view. It should be hidden here and */ /* will be revealed later. */ .mobileBanner { display: none; } /* Quick Links - The Home, Sitemap, etc. buttons in the top right-hand corner of */ /* the Banner. */ #quickLinks { float: right; position: relative; top: -128px; right: 12px; } #quickLinks li { float: left; } #quickLinks li .fa-sitemap { font-size: 20px; } #quickLinks li .fa-home { font-size: 21px; } #quickLinks li span { display: none; } #quickLinks li span.fa { display: block; color: rgba(0, 0, 0, 0.35); } #quickLinks li span.fa:hover { color: rgba(0, 0, 0, 0.75); } #quickLinks li:not(:last-child) { margin-right: 12px; padding-right: 22px; } #quickLinks li:not(:last-child):after { height: 8px; width: 8px; border-radius: 5px; content: " "; display: inline-block; position: relative; top: -20px; right: -33px; background-color: rgba(0, 0, 0, 0.12); } /* ==================================================================================== */ /* ---------- Primary Horizontal (Global) Navigation /* ==================================================================================== */ #globalNavigation { text-align: right; background-color: rgba(0, 0, 0, 1); } #dtMobileMenuButton { float: left; font-size: 21px; width: 48px; margin-right: 4px; color: rgba(255, 255, 255, 0.9); text-align: center; cursor: pointer; } #dtMobileMenuButton:after { float: right; content: " "; width: 1px; height: 30px; position: relative; top: 6px; background-color: rgba(255, 255, 255, .08); } #dtMobileMenuButton, #globalNavigation ul.static, #globalNavigation li.static, #globalNavigation a.static, #globalNavigation a.static span { height: 42px; line-height: 42px; display: inline-block; } /* We are hiding the Mobile Nav dropdown in Desktop mode, perhaps temporarily, as */ /* we haven't yet implemented anything that would bring additional value to desktop */ /* mode, save for the native ability to navigate more than one level down (the */ /* primary horizontal menu shows only one branch depth). Other things we may */ /* include in future builds are a search box, navigation glyphs (home, for example) */ /* and so on. */ #o1 #dtMobileMenuButton { display: none; } #o1 #globalNavigation { text-align: center; } /* Static Menu Items (Top Level) */ #globalNavigation ul.static { margin: 0 auto 0 auto; display: block; max-width: 918px; float: right; } #globalNavigation li.static { list-style: none; list-style-type: none; float: left; } #globalNavigation a.static { border: 0 none; padding: 0 18px 0 16px; margin-right: 6px; } #globalNavigation a.static, #globalNavigation a.static span { cursor: auto; } #globalNavigation a.static:after { content: " "; display: inline-block; height: 5px; width: 9px; position: relative; top: -2px; left: 7px; opacity: 0.25; background: url("//code.art-sci.udel.edu/code/core/images/arrowIcons.png") no-repeat scroll -3px -3px transparent; } #globalNavigation a.static span.menu-item-text, #globalNavigation span.static span.menu-item-text { font-size: 16px; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); } #globalNavigation li.static:hover, #globalNavigation li.static.hover { background-color: rgba(255, 255, 255, 0.08); } #globalNavigation .ms-core-listMenu-horizontalBox .dynamic-children.additional-background { padding-right: 0; background: transparent none; } /* Drop-Down Menu Items (Second Level) */ #globalNavigation ul.dynamic { padding: 12px; border: 0 none; box-shadow: none; margin-top: -6px; left: 0 !important; width: auto !important; min-width: 200px !important; border: 0 none; border-top: 1px solid rgba(255, 255, 255, 0.15); } #globalNavigation ul.dynamic { background-color: rgb(51, 51, 51); } /* There's no solid color beneath the drop-down menu, so opacity/transparency can't work. */ #globalNavigation a.dynamic { padding: 5px 10px; text-align: left; line-height: 160%; color: rgba(255, 255, 255, 0.9); } #globalNavigation a.dynamic span { text-align: left; } /* ==================================================================================== */ /* ---------- Power Footer Navigation /* ==================================================================================== */ #powerFooter { clear: both; margin-top: 30px; background-color: rgba(0, 0, 0, 1); } #powerFooter .cbq-layout-main ul.PowerFooterHeader { display: block; padding: 15px 15px 45px 15px; } #powerFooter div.cbq-layout-main > ul { margin: 0 auto 0 auto; padding: 0; display: inline-block; } #powerFooter div.cbq-layout-main > ul > li { float: left; padding: 5px 8px 0 8px; } #powerFooter div.cbq-layout-main > ul > li > a { font-weight: 600; text-transform: uppercase; font-size: 14px; } #powerFooter ul ul { margin: 0; display: block; height: auto; padding-top: 8px; } #powerFooter li a { color: rgba(255, 255, 255, 0.9); } #powerFooter li a:hover { color: rgba(255, 255, 255, 0.95); border-bottom: 2px solid rgba(255, 255, 255, 0.1); } #powerFooter li li, #powerFooter li li a { margin: 0; padding: 0; border: 0 none; font-size: 12px; font-weight: normal; line-height: 132%; } #powerFooter li li { margin-bottom: 6px; max-width: 200px; overflow: hidden; float: none; } #powerFooter li li a { color: rgba(255, 255, 255, 0.5); } #powerFooter li li a:hover { color: rgba(255, 255, 255, 0.9); } /* The Power Footer Divider lives under the Power Footer, and is hidden by default. */ /* For sites that don't want the Power Footer, we can enable and style the divider. */ #powerFooterDivider { display: none; clear: both; height: 0; line-height: 0; font-size: 0; overflow: hidden; margin: 45px 0 35px 0; border-top: 2px solid rgba(0, 0, 0, 0.08); } /* ==================================================================================== */ /* ---------- Page Layout (Bottom / Sub-Content) /* ==================================================================================== */ /* The footer area underneath the Power Footer is comprised of two sections: */ /* deptInfoFooter (containing the unit's contact info, social media links, affiliates) */ /* and finalFooter (containing the UD logo, copyright, and privacy, etc. links) */ #deptInfoFooter { margin: 30px 20px 20px 20px; position: relative; } #footerInfo, #footerInfo li { width: 500px; overflow: hidden; } #footerInfo li { line-height: 20px; height: 20px; color: rgba(0, 0, 0, 0.55); } #footerInfo li:first-of-type { font-size: 14px; line-height: 23px; height: 23px; font-weight: 700; text-transform: uppercase; color: rgba(0, 0, 0, 0.85); } #footerInfo li a, #footerInfo div#sitemaplink a { font-size: 13px; font-weight: 600; color: rgba(0, 0, 0, 0.75); } #footerSocial { position: absolute; top: 0; right: 30px; } #footerSocial:before { content: "Visit Us On"; font-family: 'Montserrat'; color: rgba(0, 0, 0, 0.5); text-transform: uppercase; line-height: 20px; font-size: 10px; } #footerSocial:after { content: " "; background: url("//code.art-sci.udel.edu/code/core/images/arrowIcons.png") no-repeat scroll -20px -23px transparent; display: inline-block; bottom: 56px; left: 67px; opacity: 0.3; position: relative; width: 4px; height: 7px; } #footerAffiliates { position: absolute; bottom: 0; right: 0; } #footerSocial, #footerSocial li, #footerAffiliates, #footerAffiliates li { display: inline-block; line-height: 0; font-size: 0; } #footerSocial li:not(:first-child) a, #footerAffiliates li:not(:first-child) a { display: inline-block; margin-left: 15px; } #finalFooter { height: 104px; padding: 10px 20px 0 20px; border-top: 1px solid rgba(0, 0, 0, 0.08); } #finalFooterLogo { height: 79px; width: 136px; opacity: 0.75; display: inline-block; float: right; background: url("//code.art-sci.udel.edu/code/core/images/UDDareLogoBlack.png") no-repeat 0 0; } #finalFooterMid { height: 104px; width: 210px; display: inline-block; text-align: center; } #finalFooterRight { height: 104px; width: 330px; display: inline-block; float: left; text-align: left; margin-right: 30px; } #finalFooterMid, #finalFooterRight { font-size: 0; line-height: 18px; } /*