/* Theme Name: Dartmouth Green Author: Dartmouth Web Services Author URI: https://tech.dartmouth.edu/its/services-support/people-groups/web-services Description: The Dartmouth Green theme is a child theme of the Tiny Framework, and encompasses all the best features of the default WordPress themes in one place, adds full accessibility and Schema.org microdata format support. Dartmouth Green features elegant responsive mobile-first design of Twenty Twelve, HTML5 ready structure of Underscores, many improvements from Twenty Fifteen, custom per-post headers, three footer widgets, FontAwesome icon webfont and Google Fonts support. Web developers will enjoy integrated Theme Hook Alliance custom action hooks. Template: tiny-framework Version: 2.3.1.10 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, gray, white, one-column, two-columns, right-sidebar, fluid-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, accessibility-ready Text Domain: dartmouthgreen This theme, like WordPress, is licensed under the GPL. 2.3.0 2017-02-18 Modified for Tiny Framework 2.3.0 2.3.1 2017-10-13 Minor adjustments for Tiny Framework 2.3.1 / WordPress 4.8.2 Removed icon for links opening in new window 2.3.1.1 2018-01-30 Modified for new Dartmouth logo Adjustments for mobile phone view 2.3.1.2 2018-02-28 updated for CampusPress Migration - static Dartmouth universal header/footer instead of dynamic 2.3.1.3 2019-08-27 made Dartmouth universal header/footer dynamic with 1 week cache changed mouse pointer to hand for clickable images 2.3.1.4 2020-02-24 change of standard fonts from Apex to Ruzicka and Kilm slight fix to hover color on site title in mobile view 2.3.1.5 2020-07-07 correction to focus on main menu and blockquote style 2.3.1.6 2020-11-10 correction to menu item borders when menu wraps on 2 lines 2.3.1.7 2021-01-28 menu changed to centered flex for improved layout especially when wrapping to 2 lines 2.3.1.8 2021-07-14 pull content from ws.dartmouth.edu due to change in header 2.3.1.9 2022-08-28 footer format minor changes 2.3.1.10 2025-04-09 updated to use latest version of ws.dartmouth.edu footer and X logo for Twitter */ /* Notes -------------------------------------------------------------- This stylesheet uses rem values with a pixel fallback. The rem values (and line heights) are calculated using two variables: $rembase: 16; $line-height: 24; We use rem for: font-size, margin, padding, width, max-width when using in px. For easy calculation you may use this tool, set "Choose your font-size (px)" to 16: @link https://offroadcode.com/prototypes/rem-calculator/ ---------- Examples padding: 5px 0; padding: 0.3125rem 0; (5 / $rembase) * Set a font-size and then set a line-height based on the font-size: font-size: 16px font-size: 1rem; (16 / $rembase) line-height: 1.5; ($line-height / 16) ---------- Vertical spacing Vertical spacing between most elements should use 24px or 48px to maintain vertical rhythm: .my-new-div { margin: 24px 0; margin: 1.5rem 0; ( 24 / $rembase ) } ---------- Further reading http://snook.ca/archives/html_and_css/font-size-with-rem http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/ To calculate golden ratio for font size and line height you will need these tools: http://www.pearsonified.com/typography/ Sizes in rem units for quick reference: 1px: 0.0625rem 2px: 0.125rem 3px: 0.1875rem 4px: 0.25rem 5px: 0.3125rem 6px: 0.375rem 7px: 0.4375rem 8px: 0.5rem 9px: 0.5625rem 10px: 0.625rem 11px: 0.6875rem 12px: 0.75rem 13px: 0.8125rem 14px: 0.875rem 15px: 0.9375rem 16px: 1rem 17px: 1.0625rem 18px: 1.125rem 19px: 1.1875rem 20px: 1.25rem 21px: 1.3125rem 22px: 1.375rem 23px: 1.4375rem 24px: 1.5rem 25px: 1.5625rem 26px: 1.625rem 27px: 1.6875rem 28px: 1.75rem 29px: 1.8125rem 30px: 1.875rem 31px: 1.9375rem 32px: 2rem 33px: 2.0625rem 34px: 2.125rem 35px: 2.1875rem 36px: 2.25rem 37px: 2.3125rem 38px: 2.375rem 39px: 2.4375rem 40px: 2.5rem 41px: 2.5625rem 42px: 2.625rem 43px: 2.6875rem 44px: 2.75rem 45px: 2.8125rem 46px: 2.875rem 47px: 2.9375rem 48px: 3rem */ /* Accessibility: Colors * All major background and text colors are recorded here. * Border and shadow colors are defined using rgba values. * Color contrast must meet a minimum of 4.5:1 luminosity ratio, or 3:1 for text rendered larger than 18pt/14pt bold * * For links: * A 4.5:1 contrast between the link text color and the background. * A 3:1 contrast between the link text color and the surrounding non-link text color. * More info at: http://webaim.org/blog/wcag-2-0-and-link-colors/ */ /* Site colors Green for icon-font: #6ba420 Green for blockquote: #6ba420 Orange for widget titles and hover link state: #ff6111 Body text color: #222 Content links: Link: #0066df Visited: #800080 Hover, active: #dd3811 Headings: #333 Entry title: In mobile view: #333 Link, visited: #000 Hover, active: #ff6111 Meta, comment links: Link, visited: #555 Hover, active: #dd3811 Sidebar and footer links: Link, visited: #555 Hover, active: #dd3811 Current and parent categories: #dd3811 */ /* Table of Contents: * * 1.0 - Normalize * 2.0 - Typography * 3.0 - Elements * 3.1 - FontAwesome webfont * 4.0 - Forms * 4.1 - General styles first * 4.2 - Buttons * 4.3 - Twitter Bootstrap style button * 5.0 - Navigation * 5.1 - Links * 5.2 - Menus * 5.3 - Post, archive navigation * 6.0 - Accessibility * 7.0 - Alignments * 8.0 - Clearings * 9.0 - Widgets * 9.1 - General widget styles * 9.2 - Specific widget styles * 9.3 - Footer widget styles * 10.0 - Header * 10.1 - Site Header * 11.0 - Content * 11.1 - Posts and pages * 11.2 - Post Formats * 11.3 - Comments * 11.4 - Page templates * 12.0 - Footer * 13.0 - Media * 13.1 - Images * 13.2 - Captions * 13.3 - Galleries * 14.0 - Other styles * 14.1 - Twitter Bootstrap style alerts * 14.2 - Misc. styles * 15.0 - Media queries * 15.0a - Maximum width of 800 pixels * 15.0b - Maximum width of 782 pixels - it only affects the mobile view * 15.0c - Maximum width of 320 pixels - it only affects the mobile view * 15.1 - Minimum width of 783 pixels (small screens - mobile phones, small tablets in portrait view mode) * 15.2 - Minimum width of 1100 pixels (average size screens - monitors, small tablets in landscape view mode, larger tablets) * 15.3 - Minimum width of 1240 pixels (big screens - widescreen monitors, high resolution tablets) * 15.4 - Retina-specific styles. This style cannot be processed by LESS * 16.0 - Print * 16.1 - Comments * * ---------------------------------------------------------------------------- */ /* 1.0 Normalize -------------------------------------------------------------- */ /* 2.0 Typography -------------------------------------------------------------- */ body, button, input, select, textarea { color: #424242; /* Improving font rendering in Linux, in case default Open Sans font is disabled */ font-family: National2Web, Arial, sans-serif; font-size: 16px; font-size: 1rem; font-weight: normal; font-style: normal; line-height: 1.4; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body.custom-font-enabled { /* Improving font fallback in Linux */ font-family: National2Web, Arial, sans-serif; } /* Tip37 - automatically style author's name in a blockquote. Author's name should be enclosed in . * * The symbol list for content: @link http://www.w3schools.com/charsets/ref_utf_punctuation.asp */ /*--------------------------------SE edits-------------------------------- */ .der-style-smodern .der-item { border:none !important; border-radius: 0 !important; background:none !important; } /* 2.5.1.5 formatting to match Dartmouth quotes */ blockquote { color: #424242; font-family: National2Web, Arial, sans-serif; border-left: 1px solid #333333; font-style: italic; font-size: 16px; font-size: 1rem; margin: 2.4em 0; padding-left: 40px; padding-right: 40px; clear: both; } blockquote cite:before { content: "\2012\00a0"; } /* 2.3.1.5.3 disable quote symbol */ blockquote p:first-child:before { content: ""; font: inherit; margin-left: 0; padding-right: 0; color: inherit; } textarea { color: #424242; /* Improving font rendering in Linux, in case default Open Sans font is disabled */ font-family: National2Web, Arial, sans-serif; font-size: 16px; font-size: 1rem; line-height: 1.4; text-rendering: optimizeLegibility; } h1 { font-family: DartmouthRuzicka, Georgia, serif; font-size: 3.0rem; line-height: 1; } h2, h3, h4, h5 { font-family: National2Web, Arial, sans-serif; } h6 { clear: both; margin: 0; text-align: left; font-weight: normal; font-family: National2WebMedium, Arial, sans-serif; } p { line-height: 1.6; } caption, td, th { font-weight: normal; text-align: left; font-size: 16px !important; } /*--------------------------------SE edits remove title icons-------------------------------- */ .author .page-title:before { content: none; } .category .page-title:before { content: none; } .date .page-title:before { content: none; } .error-404 .page-title:before, .search-no-results .page-title:before { content: none; } .search-results .page-title:before { content: none; } .sticky .page-title:before{ content: none; } .tag .page-title:before { content: none; } .post-password-required .entry-title:before { content: none; } .status-private .entry-title:before { content: none; } /* 3.0 Elements -------------------------------------------------------------- */ /* 3.1 FontAwesome webfont */ /* Tip21 - Icon webfont support implementation and examples * * All icon webfont related styles (except for Tip21 and Tip05) are in this section so it would be easy to change them * in case of migration to another icon webfont. */ /* These are general styles that should be aplied for all elements that are using webfont icons, you do not need to change anything here. * You can add here all your elements that will use webfont icons. */ /* .your-custom-element-1:before, .your-custom-element-2:after { display: inline-block; font-family: FontAwesome; font-size: 14px; font-size: 0.875rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; speak: none; text-align: center; text-decoration: inherit; text-rendering: auto; text-transform: none; } */ /* Once element got general webfont icon styles, next you can style it to your needs */ /* .your-custom-element-1:before { content: "\f007"; font-size: 28px; font-size: 1.75rem; padding-right: 10px; padding-right: 0.625rem; vertical-align: middle; } .your-custom-element-2:after { content: "\f007"; font-size: 28px; font-size: 1.75rem; padding-right: 10px; padding-right: 0.625rem; vertical-align: middle; } */ /* Tip23 - Mark links to documents with corresponding icons for PDF, Word, Excel, PowerPoint and archive documents. * * You can always invoke document icons with classes: icon-pdf, icon-word, icon-excel, icon-powerpoint, icon-archive-file * * To activate automatic icon placement on links to the documents, uncomment next block of CSS rules. * * 7z extension was non added because it produces error, most likelly because of lack of MIME type support on some servers: * https://stackoverflow.com/questions/18562580/possible-to-add-mime-type-to-web-config-without-possibly-breaking-the-site */ /* .content-area a[href$=gz]:before, .content-area a[href$=doc]:before, .content-area a[href$=docx]:before, .content-area a[href$=pdf]:before, .content-area a[href$=ppt]:before, .content-area a[href$=pptx]:before, .content-area a[href$=rar]:before, .content-area a[href$=xls]:before, .content-area a[href$=xlsx]:before, .content-area a[href$=zip]:before { font-size: 18px; font-size: 1.125rem; padding-right: 5px; padding-right: 0.3125rem; vertical-align: baseline; } .content-area a[href$=pdf]:before { color: #bb0706; content: "\f1c1"; } .content-area a[href$=doc]:before, .content-area a[href$=docx]:before { color: #2a5699; content: "\f1c2"; } .content-area a[href$=xls]:before, .content-area a[href$=xlsx]:before { color: #207245; content: "\f1c3"; } .content-area a[href$=ppt]:before, .content-area a[href$=pptx]:before { color: #d24625; content: "\f1c4"; } .content-area a[href$=zip]:before, .content-area a[href$=rar]:before, .content-area a[href$=gz]:before { color: #428f27; content: "\f1c6"; } */ /* Do not add file type icon to buttons */ /* .content-area a.btn[href$=pdf]:before, .content-area a.btn[href$=doc]:before, .content-area a.btn[href$=docx]:before, .content-area a.btn[href$=xls]:before, .content-area a.btn[href$=xlsx]:before, .content-area a.btn[href$=ppt]:before, .content-area a.btn[href$=pptx]:before, .content-area a.btn[href$=zip]:before, .content-area a.btn[href$=rar]:before, .content-area a.btn[href$=gz]:before { content: none; } */ /* 4.0 Forms -------------------------------------------------------------- */ /* 4.1 General styles first */ /* 4.2 Buttons */ /* Make button text bold */ .btn-custom-black, .btn-custom-blue, .btn-custom-green, .btn-custom-orange, .btn-custom-red { /* font-weight: bold; */ font-family: National2WebBold; } /* Change button font*/ .btn, .menu-toggle, input[type="submit"], input[type="button"], input[type="reset"], article.post-password-required input[type=submit], .bypostauthor cite .post-author-label { /* Twitter Bootstrap .btn style */ font-family: National2WebMedium, Arial, sans-serif; /* End - Twitter Bootstrap .btn style */ } /* 4.3 Twitter Bootstrap style buttons */ /* 5.0 Navigation -------------------------------------------------------------- */ /* 5.1 Links */ a { color: #00693e; text-decoration: underline; } a:visited { color: #00713a; } a:hover, a:active, a:focus { color: #00713a; text-decoration: underline; } a:hover, a:active { outline: 0; } a:focus { outline: thin dotted; } /* 5.2 Menus */ /* Small (mobile) menu */ .main-navigation { position: inherit; /* change to be below Dartmouth menu and header */ box-shadow: none; } body.admin-bar .main-navigation { margin-top: 0; } /* From Expound css/expound.css */ .site-header .menu-toggle { background: #00693C; color: #fff; font-family: National2WebMedium, Arial, sans-serif; font-size: 16px; /* font-weight: 300; */ padding: 10px 20px; padding: 0.625rem 1.25rem; float: left; /* change to left side */ } .site-header .menu-toggle:hover, .site-header .menu-toggle:focus { background: #00341E; } .site-header .menu-toggle:before { content: "\2261"; font-size: 20px; font-size: 1.25rem; margin-right: 7px; margin-right: 0.4375rem; } .main-navigation { background: #00693C; font-family: National2WebMedium, Arial, sans-serif; } .main-navigation.toggled .menu-toggle { background: #00693C; } .main-navigation.toggled a { color: #fff; padding: 10px 40px; padding: 0.625rem 2.5rem; text-decoration: none; } .main-navigation.toggled li a { background: #00693C; } .main-navigation.toggled li a:hover { background: #00341E; } .main-navigation.toggled ul > .current_page_item > a, .main-navigation.toggled ul > .current-menu-item > a { background: #00341E; } /* Tip10 - Add Twenty Thirteen search form to WordPress nav menu */ .menu-item.menu-item-search { float: right; border-right: 0 none; margin: 0; /* 2.3.1.7 disable margin around search icon - was 10px 8px 0 0 */ } .site-header input[type="search"] { -webkit-appearance: textfield; padding-right: 2px; /* Don't cut off the webkit search cancel button */ padding-right: 0.125rem; /* Don't cut off the webkit search cancel button */ width: 270px; width: 19.285714286rem; } .site-header input[type="search"]:-webkit-search-decoration { -webkit-appearance: none; } .site-header .search-form [type="search"], .site-header .search-form [type="text"] { background-image: url(images/icon-search-white.png); background-color: transparent; border: none; cursor: pointer; height: 28px; margin: 3px 0; margin: 0.1875rem 0; padding: 0 0 0 34px; padding: 0 0 0 2.125rem; position: relative; -webkit-transition: width 400ms ease, background 400ms ease; transition: width 400ms ease, background 400ms ease; width: 0; } .site-header .search-form [type="search"]:focus, .site-header .search-form [type="text"]:focus { background-image: url(images/icon-search.png); background-color: #f5f5f5; border: 1px solid #bbb; cursor: text; outline: 0; width: 230px; width: 16.428571429rem; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .site-header .search-form [type="submit"] { display: none; } /* Hide top menu search in child themes for the mobile menu */ .menu-item.menu-item-search { display: none; } /* Search form for mobile menu */ .site-header .search-container-mobile .search-form [type="search"], .site-header .search-container-mobile .search-form [type="text"] { float: right; margin-right: 5px; width: 0; background-image: url(images/icon-search-white.png); background-color: transparent; } .site-header .search-container-mobile .search-form [type="search"]:focus, .site-header .search-container-mobile .search-form [type="text"]:focus { background-color: #f5f5f5; background-image: url(images/icon-search.png); border: 0; width: 50%; } /* Tip85 - Add Social Media Menu. Read more: http://justintadlock.com/archives/2013/08/14/social-nav-menus-part-2 */ /* change icon color to white and smaller size */ #menu-social li a:before { content: "\f1e0"; /* mark unsupported links with generic "share" icon */ color: #fff; font-size: 28px; font-size: 1.75rem; line-height: 1.1; padding: 12px 14px; /*@@@ added */ } .social-navigation a:hover:before, .social-navigation a:focus:before { opacity: initial; /*@@@ added*/ } #menu-social li a[href*="mailto:"]:before { content: "\f003"; } #menu-social li a[href*="behance.net"]:before { content: "\f1b4"; } #menu-social li a[href*="codepen.io"]:before { content: "\f1cb"; } #menu-social li a[href*="digg.com"]:before { content: "\f1a6"; } #menu-social li a[href*="dribbble.com"]:before { content: "\f17d"; } #menu-social li a[href*="dropbox.com"]:before { content: "\f16b"; } #menu-social li a[href*="facebook.com"]:before { content: "\f082"; } #menu-social li a[href*="flickr.com"]:before { content: "\f16e"; } #menu-social li a[href*="foursquare.com"]:before { content: "\f180"; } #menu-social li a[href*="plus.google.com"]:before { content: "\f0d4"; } #menu-social li a[href*="github.com"]:before { content: "\f09b"; } #menu-social li a[href*="instagram.com"]:before { content: "\f16d"; } #menu-social li a[href*="last.fm"]:before { content: "\f202"; } #menu-social li a[href*="linkedin.com"]:before { content: "\f08c"; } #menu-social li a[href*="pinterest.com"]:before { content: "\f0d2"; } /* #menu-social li a[href*="polldaddy.com"]:before { content: "\f"; } */ /* #menu-social li a[href*="getpocket.com"]:before { content: "\f"; } */ #menu-social li a[href*="reddit.com"]:before { content: "\f1a1"; } #menu-social li a[href*="skype.com"]:before, #menu-social li a[href*="skype:"]:before { content: "\f17e"; } #menu-social li a[href*="soundcloud.com"]:before { content: "\f1be"; } #menu-social li a[href*="spotify.com"]:before { content: "\f1bc"; } #menu-social li a[href*="stumbleupon.com"]:before { content: "\f1a4"; } #menu-social li a[href*="tumblr.com"]:before { content: "\f173"; } #menu-social li a[href*="twitch.tv"]:before { content: "\f1e8"; } #menu-social li a[href*="twitter.com"]:before { content: "\f099"; } #menu-social li a[href*="vimeo.com"]:before { content: "\f194"; } #menu-social li a[href*="vk.com"]:before { content: "\f189"; } #menu-social li a[href*="wordpress.org"]:before, #menu-social li a[href*="wordpress.com"]:before { content: "\f19a"; } #menu-social li a[href*="xing.com"]:before { content: "\f168"; } #menu-social li a[href*="youtube.com"]:before { content: "\f167"; } #menu-social li a[href$="/feed/"]:before { content: "\f143"; } /* change the hover color to match the official icon color */ #menu-social li a:hover:before { background-color: #00341e; } /* default dark green */ #menu-social li a:hover[href*="dribbble.com"]:before { background-color: #ea4c89; } #menu-social li a:hover[href*="dropbox.com"]:before { background-color: #007ee5; } #menu-social li a:hover[href*="facebook.com"]:before { background-color: #3e7bd7; } #menu-social li a:hover[href*="flickr.com"]:before { background-color: #ff0084; } #menu-social li a:hover[href*="foursquare.com"]:before { background-color: #f84777; } #menu-social li a:hover[href*="plus.google.com"]:before { background-color: #dd4b39; } #menu-social li a:hover[href*="github.com"]:before { background-color: #4183c4; } #menu-social li a:hover[href*="instagram.com"]:before { background-color: #3f729b; } #menu-social li a:hover[href*="last.fm"]:before { background-color: #d51007; } #menu-social li a:hover[href*="linkedin.com"]:before { background-color: #0e76a8; } #menu-social li a:hover[href*="pinterest.com"]:before { background-color: #c8232c; } /* #menu-social li a:hover[href*="polldaddy.com"]:before { color: #bc0b0b; } */ /* #menu-social li a:hover[href*="getpocket.com"]:before { color: #ee4056; } */ #menu-social li a:hover[href*="reddit.com"]:before { background-color: #336699; } #menu-social li a:hover[href*="skype.com"]:before, #menu-social li a:hover[href*="skype:"]:before { background-color: #00aff0; } #menu-social li a:hover[href*="soundcloud.com"]:before { background-color: #ff4700; } #menu-social li a:hover[href*="spotify.com"]:before { background-color: #a9d03f; } #menu-social li a:hover[href*="stumbleupon.com"]:before { background-color: #ff2618; } #menu-social li a:hover[href*="tumblr.com"]:before { background-color: #34526f; } #menu-social li a:hover[href*="twitch.tv"]:before { background-color: #6542a6; } #menu-social li a:hover[href*="twitter.com"]:before { background-color: #33ccff; } #menu-social li a:hover[href*="vimeo.com"]:before { background-color: #1ab7ea; } #menu-social li a:hover[href*="vk.com"]:before { background-color: #4c75a3; } #menu-social li a:hover[href*="wordpress.org"]:before, #menu-social li a:hover[href*="wordpress.com"]:before { background-color: #21759b; } #menu-social li a:hover[href*="xing.com"]:before { background-color: #015a60; } #menu-social li a:hover[href*="youtube.com"]:before { background-color: #cc181e; } #menu-social li a:hover[href$="/feed/"]:before { background-color: #fb9f3b; } /* Tip86 - Style social icons manualy added in the sidebar. Check also media queries for additional styles. */ .widget-area .widget .social-link { font-size: 30px; font-size: 1.875rem; /* Increasing spacing for tap targets */ line-height: 1.2; margin: 0 24px 24px 0; margin: 0 1.5rem 1.5rem 0; vertical-align: middle; } .widget-area .widget a.social-link, .widget-area .widget a .social-link, .widget-area .widget a:visited.social-link, .widget-area .widget a:visited .social-link { color: #777; } .widget-area .widget a:hover.social-link, .widget-area .widget a:hover .social-link, .widget-area .widget a:active.social-link, .widget-area .widget a:active .social-link, .widget-area .widget a:focus.social-link, .widget-area .widget a:focus .social-link { color: #00713a; } nav#social-navigation { float: right; margin-right: 0px; /*@@@ was 15px; */ margin-top: 0px; /*@@@ was 15px; */ } ul#menu-social-items { margin-bottom: 0px; } .social-navigation a[href*="facebook.com"]:before { color: #ffffff; } /* 5.3 Post, archive navigation */ /* Tip27 - Uncomment next code line to disable "previous article - next article" navigation below the content of a post */ /* .post-navigation { display: none; } */ /* Tip88 - Customize color scheme: Navigation links for archive and single views (Previous, Next page of articles and article) */ .mav-links { font-size: 1rem; } .nav-links a, .nav-links a:visited { color: #00693e; -webkit-tap-highlight-color: rgba(0, 105, 62, 1); font-weight: normal; } .nav-links a:focus { color: #fff !important; background-color: #00693e; } /* 6.0 Accessibility -------------------------------------------------------------- */ /* Text meant only for screen readers */ .show-for-sr { display:none; } /* 7.0 Alignments -------------------------------------------------------------- */ /* 8.0 Clearings -------------------------------------------------------------- */ /* 9.0 Widgets -------------------------------------------------------------- */ /* 9.1 General widget styles */ .widget-area .widget { padding: 20px; padding: 1.25rem; /*background: #E2E2E2; */ border-bottom: 1px solid #aaaaaa; margin-bottom: 8px; margin-bottom: 0.5rem; } .widget-area .widget a:hover, .widget-area .widget a:active, .widget-area .widget a:focus { color: #00713a; text-decoration: underline; } .der-title { font-weight:bold; } .widget-title { font-family: National2WebBold,"Arial Black",sans-serif; font-size: 20px; font-size: 1.25rem; font-weight: normal; line-height: 1.15rem; text-transform: none; color: #333333; } /* 9.2 Specific widget styles */ /* Tip53 - Change vertical spacing between lines in Recent Posts widget. If your post titles are rather short, 12px will be a good choice */ .widget_rss .widget-title a, .widget_rss .widget-title a:visited { color: #00713a; } .widget-area .textwidget a:hover, .widget-area .textwidget a:active, .widget-area .textwidget a:focus { color: #00713a; text-decoration: underline; } .widget-area .widget_categories ul li, .widget-area .widget_nav_menu ul li { /* font-size: 16px; */ font-size: 0.9rem; text-transform: none; } .widget-area .widget li { /* font-size: 16px; */ font-size: 0.9rem; } .widget-area .widget p { font-size: 16px; font-size: 1rem; } .widget-area .widget .textwidget { font-size: 16px; font-size: 1rem; } .widget-area .widget_categories a:hover, .widget-area .widget_categories a:focus, .widget-area .widget_nav_menu a:hover, .widget-area .widget_nav_menu a:focus, .widget-area .widget .children li.cat-item a:hover, .widget-area .widget .children li.cat-item a:focus, .widget-area .widget .children li.page_item a:hover, .widget-area .widget .children li.page_item a:focus, .widget-area .widget .current-cat-parent a, .widget-area .widget .current-cat-parent a:visited, .widget-area .widget .current_page_parent a, .widget-area .widget .current_page_parent a:visited { color: #00713a; } .widget-area .widget .current-cat-parent .current-cat, .widget-area .widget .current-cat-parent .current-cat a, .widget-area .widget .current-cat-parent .current-cat a:visited, .widget-area .widget .current_page_parent .current_page_item, .widget-area .widget .current_page_parent .current_page_item a, .widget-area .widget .current_page_parent .current_page_item a:visited, .widget-area .widget .current-cat, .widget-area .widget .current-cat a, .widget-area .widget .current-cat a:visited, .widget-area .widget .current_page_item, .widget-area .widget .current_page_item a, .widget-area .widget .current_page_item a:visited { color: #00713a; } /* .widget_recent_entries li { margin-bottom: 12px; margin-bottom: 0.75rem; } */ /* Styles for Categories and Pages widgets */ /* 9.3 Footer widget styles */ #footer-widgets a:hover, #footer-widgets a:active, #footer-widgets a:focus { color: #00713a; text-decoration: underline; } /* Four footer widget areas. Additional styles at 15.0 Media queries */ #footer-widgets .textwidget, #footer-widgets.textwidget li,#footer-widgets.textwidget p { color: #424242 !important; font-size: 0.9375rem !important; line-height: 1.3rem; font-family: National2WebMedium, Arial, sans-serif; padding: 16px 0; /* text-transform: uppercase; */ font-weight: normal; } #footer-widgets .textwidget p { padding-bottom:16px; border-bottom: 1px solid #999 !important; } .textwidget a, .textwidget li a { color: #00693e !important; font-size: 0.9375rem !important; line-height: 1.3rem; font-family: National2WebMedium, Arial, sans-serif; padding: 16px 0; font-weight: normal; } /* 10.0 Header -------------------------------------------------------------- */ /* 10.1 Site Header */ /* Tip88 - Customize color scheme: Site Title and Description - can also be changed via Admin > Appearance > Customizer */ .site-header .site-title { font-weight: normal; } .site-header .site-title a, .site-header .site-description a { color: #ffffff; } /*.site-header .site-title a:hover, .site-header .site-description a:hover { color: #ffffff; }*/ .site-header .site-title a:hover, .site-header .site-title a:focus, .site-header .site-description a:hover, .site-header .site-description a:focus { color: #ffffff; text-decoration: none; } .nav-links a:visited { color: #00693e; -webkit-tap-highlight-color: rgba(0, 105, 62, 1); text-decoration: none; } .site-header .site-title { color: #ffffff; font-size: 2.8rem; line-height: 1.375; font-family: DartmouthRuzicka, Georgia, serif; } .site-header .site-description { font-weight: normal; font-size: 14px; font-size: 0.875rem; color: #ffffff; font-family: National2WebMedium, Arial, sans-serif; } /* Tip14 - Custom logo feature support. Check: inc/template-tags.php for more details. */ /* Enable custom logo in mobile view */ /* .site-branding { margin-top: 12px; margin-top: 0.75rem; } .site-logo-link, .custom-logo-link { display: block; float: left; margin: 5px 24px 0 0; margin: 0.3125rem 1.5rem 0 0; } #site-title-wrapper { padding: 12px 0 12px 12px; padding: 0.75rem 0 0.75rem 0.75rem; } .site-header .site-title, .site-header .site-title a { clear: none; display: inline; } .site-header .site-description, .site-header .site-title { text-align: left; } */ .site-header .site-title, .site-header .site-description { text-align: center; } .site-branding { background: #005338; min-height: 90px; min-height: 5.625rem; padding: 60px 0px 60px; /* was 34 0 20 */ margin-top: 0; overflow: visible; } /* Tip06 - Custom headers for posts and pages. Uncomment following CSS rules to disable border and shadow on main header: */ img.header-image, .site-header img.wp-post-image { border-radius: 0; box-shadow: none; margin-top: 0; } /* Tip12 - Uncomment following CSS rules to have classic Twenty Twelve front page look - disable header image for the Front Page Templ.: */ /* .template-front-page img.header-image, .template-front-page .site-header img.wp-post-image { display: none; } */ /* 11.0 Content -------------------------------------------------------------- */ body { margin-top: 0px; font-family: National2Web, Arial, sans-serif; } .site { padding: 0; margin-bottom: 0; box-shadow: none; } /* 11.1 Posts and pages */ /* Tip25b - Disable special icons, that marks the links that will open in a new window */ .entry-content .fa-external-link { display: none; } /* Tip26b - Uncomment next CSS rule to Print HTML bellow post title with meta information (date/time and author) * for the index/archive views in MOBILE view. */ .entry-content .more-link:after, .entry-summary .more-link:after { content: "\f178"; /* fa-long-arrow-right */ } .entry-content a.more-link, .entry-summary a.more-link { text-decoration: none; } .entry-content a:hover.more-link , .entry-summary a:hover.more-link { text-decoration: underline; } /* .home .entry-header .entry-meta, .archive .entry-header .entry-meta { display: block; } */ /* use thinner darker separator line */ .content-area article, .content-area section { /* section is for 404.php and content-none.php */ border-bottom: 1px solid #aaaaaa; } .entry-header .entry-meta { font-family: National2WebMedium, Arial, sans-serif; font-size: 14px; font-size: 0.875rem; color: #666666; } .entry-header .entry-meta .byline { font-family: National2Web, Arial, sans-serif; } .entry-header .entry-meta .byline:before { content: "by"; padding-left: 3px; color: #666666; } .entry-header .entry-meta .posted-on { font-family: National2WebMedium, Arial, sans-serif; } .entry-header .entry-meta .posted-on::before { content: ""; margin: 0; } /* don't display any comment stuff at top of post */ .entry-header .entry-meta .comments-link { display: none; } /* disable date and author meta at bottom of post */ footer.entry-meta { font-family: National2WebMedium, Arial, sans-serif; font-size: 12px; font-size: 0.75rem; color: #333333; } footer.entry-meta .posted-on, footer.entry-meta .byline, footer.entry-meta .edit-link { display: none; } /* use word instead of icon */ footer.entry-meta .cat-links:before { content: "Categories:"; font-family: National2WebBold, Arial, sans-serif; color: #333333; } footer.entry-meta .tags-links:before { content: "Tags:"; font-family: National2WebBold, Arial, sans-serif; color: #333333; } /* Tip30 - Uncomment next CSS block to hide entry meta section, located below the post (with author, categories, tags) * in the Index page and archive listings. */ .list-view footer.entry-meta { display: none; } .format-link footer.entry-meta, .format-status footer.entry-meta { display: block; } .content-area article { padding-bottom: 12px!important; padding-bottom: 0.75rem!important; } /* Alternative heading style to try */ /* .entry-content h1, .entry-content h2, .entry-summary h1, .entry-summary h2, .page-content h1, .page-content h2 { border-bottom: 3px double #bbb; margin: 48px 0 24px 0; margin: 3rem 0 1.5rem 0; } */ .entry-content h2, .entry-summary h2, .page-content h2, .entry-title a { font-size: 20px; font-size: 1.25rem; font-weight: normal; } .page .comment-content p, .page .entry-content p, .single .comment-content p, .single .entry-content p, .single .entry-summary p, .single .mu_register p { margin: 0 0 1rem; } .pagination .page-numbers { display: inline-block; margin-right: 0.25rem; } /* [a itemprop="url"] [itemprop="headline"] { font-size: 20px !important; font-size: 1.25rem !important; font-weight: normal; }*/ .page-title { color: #333; font-size: 30px; font-size: 1.875rem; font-weight: normal; line-height: 1.4; text-transform: none; } .entry-content { color: #424242; font-size: 1em; font-family: National2Web, Arial, sans-serif; line-height: 1.6em; text-align: left; } /* Tip33 - Enable hyphenation of text for article. Please note that automatic hyphenation can reduce * accesibility of the theme - it can cause strange pronunciation with screen readers. */ /* .content-area article { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } */ /* Tip36 - Display featured image thumbnail in archive views (index page, categories, etc.) * Image also gets the class "alignright", "aligncenter", etc. via content.php */ .entry-thumbnail .wp-post-image { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } /* You can try using these CSS rules if you place small size (thumbnail) image that is aligned to the left */ /* .entry-thumbnail img.wp-post-image { margin: 24px 24px 0 0; margin: 1.5rem 1.5rem 0 0; width: auto; } */ /* Entry-meta for specific post formats */ .entry-header .entry-title h2{ font-size: 1.25rem; line-height: 1.05rem; font-weight: normal; color: #424242; } .entry-header .entry-title{ font-size: 3.0rem; line-height: 1.4rem; font-weight: normal; color: #333; } .entry-header .entry-title a:hover, .entry-header .entry-title a:focus { color: #00693e; text-decoration: underline; } .comments-link a:hover, .entry-meta a:hover, .entry-header .title-comment-meta a:hover { color: #00713a; text-decoration: underline; } .comments-link a:focus, .entry-meta a:focus, .entry-header .title-comment-meta a:focus { color: #00713a; text-decoration: none; } .entry-content h1, .entry-summary h1, .page-content h1, .comment-content h1, .entry-content h2, .entry-summary h2, .page-content h2, .comment-content h2, .entry-content h3, .entry-summary h3, .page-content h3, .comment-content h3, .entry-content h4, .entry-summary h4, .page-content h4, .comment-content h4, .entry-content h5, .entry-summary h5, .page-content h5, .comment-content h5, .entry-content h6, .entry-summary h6, .page-content h6, .comment-content h6 { margin: 20px 0; margin: 2rem 0 .5rem; color: #333; } .entry-content h1, .entry-summary h1, .page-content h1, .comment-content h1 { font-size: 30px; font-size: 1.875rem; line-height: 1.4; font-weight: normal; } .entry-content h2, .entry-summary h2, .page-content h2, .comment-content h2, .mu_register h2 { font-size: 20px; font-size: 1.25rem; line-height: 1.2; font-weight: normal; font-family: National2WebBold, Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.3px; } .entry-content h3, .entry-summary h3, .page-content h3, .comment-content h3 { font-size: 18px; font-size: 1.125rem; line-height: 1; } .entry-meta h3 { color: #333; margin: 10px 0; font-size: 13px; font-size: 0.813rem; line-height: 1; } .entry-content h4, .entry-summary h4, .page-content h4, .comment-content h4 { font-size: 16px; font-size: 1rem; line-height: 1; } .entry-content h5, .entry-summary h5, .page-content h5, .comment-content h5 { font-size: 13px; font-size: 0.813rem; line-height: 1; } .entry-content h6, .entry-summary h6, .page-content h6, .comment-content h6 { font-size: 10.7px; font-size: 0.669rem; line-height: 1; } .page-header a:hover, .page-header a:active { color: #00713a; text-decoration: underline; } .entry-header .title-comment-meta { display: none; } /* Author profiles */ /* 11.2 Post Formats */ article.format-aside h2 a:hover { color: #00713a; text-decoration: underline; } .format-status .entry-header header a:active, .format-status .entry-header header a:hover, .format-status .entry-header header a:focus { color: #00713a; } /* 11.3 Comments */ .comments-area article header a:hover { color: #00713a; } a.comment-reply-link:hover, a.comment-edit-link:hover { color: #00713a; } /* Comment form */ /* 11.4 Page templates */ /* Front page template */ .template-front-page .page .entry-content { font-size: 16px; font-size: 1rem; } .template-front-page .site-content .widget-area .widget li a:hover { color: #00713a; } /* Links (blogroll) template */ /* 12.0 Footer -------------------------------------------------------------- */ .site-footer { max-width: 1140px; max-width: 71.25rem; } .site-footer a:hover, .site-footer a:focus { color: #00713a; } /* Tip63 - Uncomment following CSS rules to have classic Twenty Twelve front page look - disable footer widgets for the Front Page Templ.: */ /* .template-front-page #footer-widgets { display: none; } */ /* 13.0 Media -------------------------------------------------------------- */ /* Increase size for emoji and smiley icons, so they would look better. */ .page-content .wp-smiley, .page-content .emoji, .entry-content .wp-smiley, .entry-content .emoji, .comment-content .wp-smiley, .comment-content .emoji { height: 1.2em!important; max-height: 1.2em!important; width: 1.2em!important; max-width: 1.2em!important; } /* 13.1 Images */ /* Responsive images */ .avatar, .entry-content img, .comment-content img, .widget img, img.header-image, img.wp-post-image { /* Remove fancy borders to all WordPress-added images but not things like badges and icons and the like */ border-radius: 0px; -webkit-box-shadow: 0 0 0px rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0px rgba(0, 0, 0, 0); box-shadow: 0 0 0px rgba(0, 0, 0, 0); } img.wp-post-image { float: none; margin-left: auto; margin-right: auto; display: block; } /* 2.3.1.3 2019-05-06 change mouse pointer to hand for images instead of magnifying glass */ .entry-content a img:focus, .entry-content a img:hover { cursor: pointer; } .widget img { margin-right:10px; } /* Tip40 - Optional post thumbnail (Featured Image) on index views. Uncomment following CSS rules to show the Featured image on index views. */ .post-thumbnail { display: block; } /* Single image attachment view */ /* 13.2 Captions */ .entry-caption, .gallery-caption, .wp-caption .wp-caption-text { font-size: 14px; font-size: 0.875rem; line-height: 1.7; font-family: National2WebMedium, Arial, sans-serif; font-style: normal; } /* 13.3 Galleries */ /* 14.0 Other styles -------------------------------------------------------------- */ /* 14.1 Twitter Bootstrap style alerts. Usage: http://getbootstrap.com/components/#alerts */ /* 14.2 Misc. styles */ /* Plugins */ /* 15.0 Media queries -------------------------------------------------------------- */ /* Please note, that all CSS rules, placed outside of media queries, affect all screen sizes - starting from small screens * (mobile phones) and going up to the very wide screens (widescreen monitors, high resolution tablets). Those rules can be * adjusted and overridden, targeting specific screen sizes in media queries bellow. * * Important: lower size media queries will also affect wider screen sizes, e.g. min-width: 770px media query will also affect * screen sizes starting with 960px and 1250px. * * Wondering what are the screen sizes of most popular devices? Check: http://screensiz.es */ /* 15.0a - Maximum width of 800 pixels */ @media screen and (max-width:800px) { /* Here you can add specific styles for this screen widh */ } /* END of @media screen and (max-width: 800px) */ /* 15.0b Maximum width of 782 pixels - it only affects the mobile view. */ @media screen and (max-width: 782px) { /* From Expound css/expound.css */ .site-header .menu-toggle { background: #3a3a3a; color: #fff; font: 16px/16px National2Web, Arial, sans-serif; font-weight: normal; padding: 10px 20px; padding: 0.625rem 1.25rem; } .site-header .menu-toggle:focus, .site-header .menu-toggle:hover { background: #474747; } .site-header .menu-toggle:before { content: "\2261"; font-size: 20px; font-size: 1.25rem; margin-right: 7px; margin-right: 0.4375rem; } #primary.content-area { padding-left: 10px; padding-right: 10px; } .main-navigation.toggled .menu-toggle { background: #474747; } .main-navigation.toggled a { color: #fff; padding: 10px 40px; padding: 0.625rem 2.5rem; text-decoration: none; } .main-navigation.toggled li a { background: #3a3a3a; } .main-navigation.toggled li a:hover { background: #474747; } .main-navigation.toggled ul > .current_page_item > a, .main-navigation.toggled ul > .current-menu-item > a { background: #117bb8; } .entry-header .entry-title { font-size: 32px; font-size: 2rem; font-weight: normal; line-height: 1.2; /* 2.3.1.1 less space between lines */ } .entry-content h2, .entry-summary h2, .page-content h2, .comment-content h2, .mu_register h2 { font-size: 16px; font-size: 1rem; } .site-header .site-title { font-size: 2rem; /* 2.3.1.1 smaller title */ } .site-branding { padding: 20px 0px 20px; /* 2.3.1.1 reduce green banner around title */ } } /* END of @media screen and (max-width: 782px) */ /* 15.0c - Maximum width of 320 pixels - it only affects the mobile view */ @media screen and (max-width:320px) { /* Here you can add specific styles for this screen widh */ } /* END of @media screen and (max-width: 320px) */ /* 15.1 Minimum width of 783 pixels - it is activated at the same time as mobile view of WordPress admin-bar * (small screens - mobile phones, small tablets in portrait view mode) */ @media screen and (min-width: 783px) { body .site { max-width: 1140px; max-width: 71.25rem; padding: 0 0.625rem 0 0.625rem; } /* Tip52 - Adjust default site layout for normal view */ /* .content-area { float: left; width: 65.104166667%; } .widget-area { float: right; width: 30.5%; } */ /* Tip52b - Change site layout (position of sidebar) for normal view */ /* .content-area { float: right; width: 65.104166667%; } .widget-area { float: left; width: 30.5%; } */ /* Tip14 - Custom logo feature support. Check: inc/template-tags.php for more details. */ .site-logo-link, /* deprecated */ .custom-logo-link { margin: 24px 24px 0 0; margin: 1.5rem 1.5rem 0 0; } .custom-logo { } #site-title-wrapper { float: none; padding-top: 0; width: 100%; margin: 0 auto; margin-bottom: 0; margin-top: 15px; } /* Tip88 - Customize color scheme: Site Title and Description - can also be changed via Admin > Appearance > Customizer */ /* .site-header .site-description a, .site-header .site-title, .site-header .site-title a { color: #333; } .site-header .site-description a:hover, .site-header .site-title a:hover { color: #ff6111; } */ .site-header .site-title a:hover, .site-header .site-title a:focus, .site-header .site-description a:hover, .site-header .site-description a:focus { color: #fff; } .social-navigation ul li { margin: 0px; /*@@@ */ } .social-navigation a, a:hover { text-decoration: none; /*@@@ */ } /* Show top menu search in child themes for the full menu */ .menu-item.menu-item-search { display: flex; justify-content: center; align-items: center; } .main-navigation ul { font-size: 0; } .main-navigation li { /* font-size: 14px; */ font-size: 0.9rem; border-right: 1px solid #2C8754; border-bottom: 1px solid #2C8754; /* 2.3.1.6 added border-bottom */ margin: 0; } .main-navigation li.menu-item-search { border-right: 0; /* 2.3.1.6 but no border for search icon */ border-bottom: 0; } .main-navigation li a { color: #ffffff; line-height: 4; padding: 0 16px; padding: 0 1rem; text-transform: uppercase; letter-spacing: 0.5px; } /* 2.3.1.7 make the li block have green background for hover so that it takes up full width */ .main-navigation li:hover, .main-navigation li:focus { background: #00341E; } .main-navigation li a:hover, .main-navigation li a:focus { text-decoration: none; color: #ffffff; /* background: #00341E; */ /* 2.3.1.7 moved this to li - see above */ } /* 2.3.1.7 for main menu, make menu item centered in box */ .main-navigation ul.nav-menu { text-align: center; } .main-navigation .sub-menu li { padding: 0; border-left: 1px solid #2c8754; /* 2.3.1.6 added left border for sub-items */ } .entry-header .entry-title { /* font-size: 30px; font-size: 1.875rem; */ font-weight: normal; line-height: 1; } .entry-header .entry-title, .entry-header .entry-title a { color: #333; /* Tip32 - Add shadow to post/page title. Usage: text-shadow: horizontal-offset vertical-offset blur color; last digit of rgba sets opacity */ /* text-shadow: 1px 1px 3px rgba(0,0,0,0.2); */ } .entry-header .entry-title a:hover, .entry-header .entry-title a:focus { color: #00713a; text-decoration: underline; } .home .entry-header .entry-meta, .archive .entry-header .entry-meta { display: none; } .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul { border-top: 0; border-bottom: 0; } /* 2.3.1.7 make menu flex so items are centered and fill the menu bar across */ .main-navigation ul.nav-menu { display: flex !important; display: -webkit-box !important; display: -moz-box !important; display: -ms-flexbox !important; display: -moz-flex !important; display: -webkit-flex !important; -webkit-flex-direction: row; flex-direction: row; flex-wrap: wrap; -webkit-justify-content: space-around; justify-content: space-evenly; -webkit-align-content: space-evenly; align-content: space-evenly; } .main-navigation li { flex-grow: 1; flex-shrink: 1; flex-basis: auto; } .main-navigation, body.admin-bar .main-navigation { /* Do not need extra top margin for admin-bar in normal view */ margin-top: 0; } .nav-menu .menu-item-has-children > a:after, .nav-menu .page_item_has_children > a:after { content: none; } .main-navigation .current-menu-item, .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor, .main-navigation .current_page_ancestor > a { background: #00341E; color: #ffffff; font-weight: normal; } .main-navigation li ul li a:hover, .main-navigation li ul li a:focus { background: #00341E; color: #ffffff; } .main-navigation li ul li a { border-top: 1px solid #2C8754; border-bottom: 0; background: #00693c; font-size: 14px; font-size: 0.875rem; } .main-navigation ul li ul li, .main-navigation ul li ul li ul li { border-bottom: 0; } /* Tip26b - uncomment next CSS rule to Print HTML bellow post title with meta information (date/time and author) * for the index/archive views in NORMAL view. */ /* .home .entry-header .entry-meta, .archive .entry-header .entry-meta { display: block; } */ /* Tip62 - Add side borders for the middle footer widget - to better separate widgets visually. Uncomment next section: */ /* #footer-widgets.three #footer-widget-middle { border: 1px solid #ededed; border-width: 0 1px; } */ /* Tip88 - Customize color scheme: Widget title. */ /* .widget-title { color: #; font-size: 18px; font-size: 1.125rem; font-weight: bold; line-height: 1.6; text-transform: uppercase; } */ /* Tip86 - Style social icons manualy added in the sidebar */ .widget-area .widget .social-link { margin: 0 10px 10px 0; margin: 0 0.625rem 0.625rem 0; } #footer-widgets.two #footer-widget-left { float: left; width: 50%; padding-right: 2.1%; } #footer-widgets.two #footer-widget-right { float: right; width: 50%; padding-left: 2.1%; } #footer-widgets.one #footer-widget-left { width: 100%; padding-left: 0%; } /* If Footer widgets are present */ .footer-widgets .site-footer #footer-widgets { margin: 12px 0 0 0; margin: 0.75rem 0 0 0; } } @media screen and (max-width: 768px) { /* hide social links on mobile view */ nav#social-navigation { display: none; } } /* 15.2 Minimum width of 1100 pixels (average size screens - monitors, small tablets in landscape view mode, larger tablets) */ @media screen and (min-width: 1100px) { /* Here you can add specific styles for this screen widh */ body { background-color: #fff; } body .site { padding: 0 10px 0 10px; padding: 0 0.625rem 0 0.625rem; margin-top: 0px; margin-bottom: 0px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } body.custom-background-empty .site, body.custom-background-white .site { margin-top: 0px; } } /* 15.3 Minimum width of 1240 pixels (big screens - widescreen monitors, high resolution tablets) */ @media screen and (min-width: 1240px) { /* Here you can add specific styles for this screen widh */ } /* END of @media screen and (min-width: 1240px) */ /* 15.4 Retina-specific styles. This style cannot be processed by LESS */ @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { /* Here you can add specific styles for Retina displays */ } /* 16.0 Print ----------------------------------------------- */ @media print { /* Here you can add specific styles for the printing */ /* 16.1 Comments */ } /* Dartmouth header */ .row::after, .group::after { clear: both; content: " "; display: table; } /* code from dartmouth-master css layout-global-responsive.css */ @media all and (max-width: 960px) { /* Global */ body { font-size: 15px; } .mobile-select select { padding: .8em .8em .8em .8em; font: normal 14px/18px National2Web, Arial, sans-serif; text-transform: uppercase; width: 100%; border-radius: 8px; height: 42px; -webkit-box-shadow: 1px 1px 1px #fff; -webkit-border-radius: 0.5em; border: solid 1px #d1d1d1; width: 100%; background: url('images/select-bg.png') right top repeat-x; } .ios select , .ios .mobile-select select { background-position: right top; padding-right: 30px; padding-left: 10px; } /* logo */ .header-main .logo { width: 314px; /* 2018-01-19 changed to match new logo */ height: 33px; background: url('images/logo.png') no-repeat; } /* Global Intro Nav */ .intro-hdr h3 { margin-left: 5px; } /* Global Intro */ .intro { margin-bottom: 30px; } /* Global Left Sidebar */ .sidebar .slideshow { min-height:190px; } .sidebar .nav-side { font-size: 1em; } /* Footer */ .main-footer { border-right: none; min-height: 0px; } #footer-container .eight.main-footer, #footer-container .four.social-footer { width: 100%; min-width: 0; margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; } .social-footer { padding-top: 0; } #footer-label-follow { padding: 40px 15px 10px; margin-bottom: 0; } .nav-footer-four h3 { text-align: center; } .main-footer { /* margin-bottom: 25px; */ } #footer-social { text-align: center; vertical-align: bottom; } #footer-social li { width: auto; float: none; display: inline; margin: 0 1.875rem 1.875rem 0; } #footer-social li:last-of-type { margin-right: 0; } /* People slider */ .front .view-people-ribbon .views-row-5 { display: none; } .front .view-people-ribbon .views-row { padding: 0 8px; width: 25%; } /* Alternate Home */ .front .view-homepage-slideshow { width: 940px; height: 382px; } } @media all and (max-width: 767px) { .header-main .logo { margin-left:12px; background: url('images/logo-mobile.png'); width: 211px; /* 2018-01-19 changed to match new logo */ height: 22px; margin-top: 3px; /* 2018-01-19 slightly lower to better match menu icon */ } #nav-dartmouth .nav-dartmouth-table { padding: 15px; } #nav-dartmouth ul.nav-dartmouth-table { margin-left: 0px; margin-bottom: 0px; } } /* Meta-Slider Stuff */ .flex-control-paging li a { background: #424242 !important; } .flex-control-paging li a:hover { background: #424242 !important; } .flex-control-paging li a.flex-active { background: #6cc !important; } /* adjustment for social media button plugin */ .socialmedia-buttons { margin-bottom: 50px; } /* 2.3.1.10 - use X character for Twitter logo */ .fa.fa-twitter { font-family:sans-serif; } .fa.fa-twitter::before { content:"𝕏"; font-size:1.2em; }