/* Theme Name: ORCID Outreach Pro Theme URI: http://my.studiopress.com/themes/outreach/ Description: A mobile responsive and HTML5 theme built for the Genesis Framework. Forked from Studiopress outreach theme.http://my.studiopress.com/themes/outreach/ Author: ORCID Author URI: http://www.studiopress.com/ Version: 3.1 Tags: black, green, white, one-column, two-columns, three-columns, left-sidebar, right-sidebar, responsive-layout, custom-menu, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, premise-landing-page Template: genesis Template Version: 2.1 License: GPL-2.0+ License URI: http://www.gnu.org/licenses/gpl-2.0.html */ /* Table of Contents - HTML5 Reset - Baseline Normalize - Box Sizing - Float Clearing - Defaults - Typographical Elements - Headings - Objects - Gallery - Forms - Tables - Structure and Layout - Site Containers - Column Widths and Positions - Column Classes - Common Classes - Avatar - Genesis - Search Form - Titles - WordPress - Widgets - Featured Content - Plugins - Genesis eNews Extended - Genesis Responsive Slider - Gravity Forms - Jetpack - Mailpoet - Publishpress - Site Header - Title Area - Widget Area - Site Navigation - Accessibility - Header Navigation - Primary Navigation - Secondary Navigation - Responsive Menu - Content Area - Home Page - Entries - Entry Meta - After Entry - Pagination - Comments - Sidebars - Sub Foooter - Footer Widgets - Site Footer - Media Queries - Retina Display - Retina - Max-width: 1139px - Max-width: 1023px - Max-width: 767px */ /* GLOBAL STYLING VARIABLES */ :root { /* ORCID COLOURS */ /* ORCID brand primary - Green */ --brand-primary-lightest: rgb(245, 249, 232); --brand-primary-light: rgb(212, 231, 161); --brand-primary: rgb(166, 206, 57); --brand-primary-dark: rgb(127, 170, 38); --brand-primary-darkest: rgb(68, 116, 5); /* ORCID brand secondary - Blue */ --brand-secondary-lightest: rgb(208, 243, 255); --brand-secondary-light: rgb(142, 194, 219); --brand-secondary: rgb(46, 127, 159); --brand-secondary-dark: rgb(8, 92, 119); --brand-secondary-darkest: rgb(0, 52, 73); /* ORCID background greys */ --ui-background-lightest: rgb(250, 250, 250); --ui-background-light: rgb(245, 245, 245); --ui-background: rgb(224, 224, 224); --ui-background-dark: rgb(97, 97, 97); --ui-background-darkest: rgb(33, 33, 33); /* TEXT - Colours for copy */ /* DARK */ --text-dark-high: rgba(0, 0, 0, .9); --text-dark-med: rgba(0, 0, 0, .6); --text-dark-low: rgba(0, 0, 0, .3); --copy-dark: var(--text-dark-high); /* LIGHT */ --text-light-high: rgba(255, 255, 255, .9); --text-light-med: rgba(255, 255, 255, .6); --text-light-low: rgba(255, 255, 255, .3); --copy-light: var(--text-light-high); /* SPACING - Standard spacing amounts based on factors of 8 */ --space: 8px; --space-half: 4px; --space-quarter: 2px; --space-double: 16px; --space-triple: 24px; --space-quad: 32px; --space-quint: 40px; --space-oct: 64px; /* BORDER RADIUS - Curved corners */ --radius: 4px; --radius-tight: 2px; --radius-loose: 8px; /* THICKNESS - Use for borders and separators */ --thin: 1px; --medium: 2px; --thick: 4px; --chunky: 8px; } /* HTML5 Reset ---------------------------------------------------------------------------------------------------- */ /* Baseline Normalize normalize.css v2.1.3 | MIT License | git.io/normalize --------------------------------------------- */ article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:transparent}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;background-color:#fff;}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0} /* Additional wrap for code blocks so they don't spill over FAQ borders*/ pre { word-wrap: break-word; } /* Box Sizing --------------------------------------------- */ *, input[type="search"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Float Clearing --------------------------------------------- */ .author-box:before, .clearfix:before, .entry-content:before, .entry:before, .footer-widgets:before, .home-top .widget:before, .nav-primary:before, .nav-secondary:before, .pagination:before, .site-container:before, .site-footer:before, .site-header:before, .site-inner:before, .wrap:before { content: " "; display: table; } .author-box:after, .clearfix:after, .entry-content:after, .entry:after, .footer-widgets:after, .home-top .widget:after, .nav-primary:after, .nav-secondary:after, .pagination:after, .site-container:after, .site-footer:after, .site-header:after, .site-inner:after, .wrap:after { clear: both; content: " "; display: table; } /* Defaults ---------------------------------------------------------------------------------------------------- */ /* Typographical Elements --------------------------------------------- */ body { background-color: var(--ui-background-lightest); color: var(--text-dark-high); font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: normal; line-height: 1.55; } a, button, input:focus, input[type="button"], input[type="reset"], input[type="submit"], textarea:focus, .button { -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } /* Style text highlighted by the user */ /* DD 16/10/20 NOTE: This styling is currently overridden by a rule for Atomic blocks accordions on line 1180 */ ::selection, ::-moz-selection { background-color: var(--brand-secondary-lightest); } /* LINKS - DEFAULT */ a { color: var(--brand-secondary-dark); } a:visited { color: var(--brand-secondary-darkest); } a:hover, a:focus { color: var(--brand-primary-darkest); } a:active { color: var(--brand-primary); } /* PARAGRAPHS */ p { margin: 0 0 var(--space-triple); padding: 0; } strong { font-weight: 700; } /* LISTS - DEFAULT Ordered and unordered */ /* Position lists neatly */ ol, ul { margin: 0 0 var(--space-double) var(--space-quad); padding: 0; } /* Add some space between list items */ li { list-style-type: none; margin-bottom: var(--space) } /* Remove the bottom margin from the last item in the list */ li:last-of-type { margin-bottom: 0; } /* BLOCKQUOTES */ blockquote, blockquote.wp-block-quote.is-large, blockquote.wp-block-quote.is-style-large { color: var(--brand-secondary-dark); display: block; border-width: var(--space-quarter) 0; border-style: solid; border-color: var(--ui-background); padding: 1.5em 0 0.5em; margin: 1.5em 0; position: relative; } /* Add quote mark before the blockquote */ blockquote::before { content: '\201C'; position: absolute; top: 0em; left: 50%; transform: translate(-50%, -50%); background: #fff; width: var(--space-oct); height: var(--space-quad); font: 6em/1.08em 'PT Sans', sans-serif; color: var(--brand-secondary-dark); text-align: center; } /* Keep citations simple */ cite { font-style: normal; } /* --------------------------------------------- DOWNLOAD LINKS (.wp-block-file) --------------------------------------------- */ .wp-block-file { display: flex; justify-content: space-between; align-items: center; } /* Headings --------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-stretch: normal; font-style: normal; line-height: 1.4; letter-spacing: 0.5px; } /* Heading 1 - Large headings mostly used for page titles */ h1 { font-size: 40px; font-weight: 600; margin: 0 0 var(--space-quad) 0; } /* Heading 2 - Commonly used sub-heading within page content */ h2 { font-size: 24px; font-weight: 300; } /* Heading 3 - Sub-headings within sections */ h3 { font-size: 18px; } /* There's no real need or benefit in styling these lower headings individually */ h4, h5, h6 { font-size: 16px; } /* Objects --------------------------------------------- */ embed, iframe, img, object, video, .wp-caption { max-width: 100%; } img { height: auto; } .featured-content img, .gallery img { width: auto; } /* Gallery --------------------------------------------- */ .gallery { overflow: hidden; margin-bottom: 28px; } .gallery-item { float: left; margin: 0; padding: 0 4px; text-align: center; width: 100%; } .gallery-columns-2 .gallery-item { width: 50%; } .gallery-columns-3 .gallery-item { width: 33%; } .gallery-columns-4 .gallery-item { width: 25%; } .gallery-columns-5 .gallery-item { width: 20%; } .gallery-columns-6 .gallery-item { width: 16.6666%; } .gallery-columns-7 .gallery-item { width: 14.2857%; } .gallery-columns-8 .gallery-item { width: 12.5%; } .gallery-columns-9 .gallery-item { width: 11.1111%; } .gallery-columns-2 .gallery-item:nth-child(2n+1), .gallery-columns-3 .gallery-item:nth-child(3n+1), .gallery-columns-4 .gallery-item:nth-child(4n+1), .gallery-columns-5 .gallery-item:nth-child(5n+1), .gallery-columns-6 .gallery-item:nth-child(6n+1), .gallery-columns-7 .gallery-item:nth-child(7n+1), .gallery-columns-8 .gallery-item:nth-child(8n+1), .gallery-columns-9 .gallery-item:nth-child(9n+1) { clear: left; } .gallery .gallery-item img { border: none; height: auto; margin: 0; } /* Forms --------------------------------------------- */ /* FIELD DEFAULT STYLES */ input, select, textarea { background-color: #fff; border: 1px solid var(--ui-background); color: var(--text-dark-high); padding: var(--space); margin-bottom: var(--space-double); width: 100%; } /* Set the text colour in standard fields to be --copy-dark (90% black) NOTE: If new fields of a different type are added then we may well need to extend this rule further to cover them all */ input[type="text"], input[type="email"], input[type="search"], input[type="textarea"] { color: var(--copy-dark); } input:focus, textarea:focus { border: 1px solid var(--ui-background-dark); outline: none; } input[type="checkbox"], input[type="image"], input[type="radio"] { width: auto; } /* PLaceholder text styling */ ::-moz-placeholder { color: var(--text-dark-med); opacity: 1; } ::-webkit-input-placeholder { color: var(--text-dark-med); } /* BUTTON DEFAULT STYLES */ /* Rob note 15/07/2021 the !important here is because genesis injects some inline styles */ button, .button, a.button, input[type="button"], input[type="reset"], input[type="submit"], .wp-block-file a.wp-block-file__button, .wp-block-button__link, .wp-block-button, .wp-block-genesis-blocks-gb-button, .gb-button, .gb-button-shape-rounded, .gb-button-size-medium { background-color: var(--brand-secondary-dark); border: 2px solid var(--brand-secondary-dark); border-radius: 4px; color: #fff; cursor: pointer; padding: var(--space) var(--space-double); text-transform: uppercase; letter-spacing: 0.5px; width: auto; text-decoration: none; margin-bottom: 0; display: inline; font-size:inherit; } /* Hover state */ button:hover, input:hover[type="button"], input:hover[type="reset"], input:hover[type="submit"], .button:hover, .wp-block-file a.wp-block-file__button:hover, .wp-block-button__link:hover { background-color: var(--brand-primary-dark); border-color: var(--brand-primary-dark); } /* Active state */ button:active, input:active[type="button"], input:active[type="reset"], input:active[type="submit"], .button:active, .wp-block-file a.wp-block-file__button:active, .wp-block-button__link:active { background-color: var(--brand-primary); border-color: var(--brand-primary); } /* Focus state */ button:focus, input:focus[type="button"], input:focus[type="reset"], input:focus[type="submit"], .button:focus, .wp-block-file a.wp-block-file__button:focus, .wp-block-button__link:focus { border-color: var(--brand-primary); } /* Hide any Webkit-inserted search field elements */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button { display: none; } /* Specific styles for the sign in button */ .signin-button{ background-color: var(--brand-secondary-darkest); border-color: var(--brand-secondary-darkest); } .fa-orcid{ color: white; background-color: var(--brand-primary-darkest); padding-right: var(--space); font-size: inherit; } .signin-button{ background-color: var(--brand-primary-darkest); border: 2px solid var(--brand-primary-darkest); border-radius: 4px; color: #fff; cursor: pointer; padding: var(--space) var(--space-double); letter-spacing: 0.5px; width: auto; text-decoration: none; margin-bottom: 0; display: inline-block; font-size:inherit; } .signin{ color:#fff; text-decoration: none; } .signin:hover,{ color:#fff; } .signin:visited{ color:#fff; } .signin:active{ color:#fff; } .signin-text{ font-size: 14px; color:var(--brand-secondary-darkest); float:right; margin-left: 20px; } .register-text{ margin-top: -20px; margin-left: 4px; } /* Tables --------------------------------------------- */ /* I've kept in rules for both standard HTML tables entered straight into WordPress and those created through the TablePress plugin NOTE: Any CSS specifically targetting TablePress tables also needs to be added to the 'Custom CSS' panel at /wp-admin/admin.php?page=tablepress_options */ /* Give text in tables some breathing room */ table, .tablepress { line-height: 1.5; } /* Make table headers more defined , ROB 22/02/22 give headers bold font*/ .wp-block-table thead, table thead th, .tablepress thead th { background-color: rgba(68, 116, 5, 1); color: #fff; border: 0; font-weight: bold; } /* Add some space around the contents of each cell */ td, th, .tablepress td, .tablepress th { padding: 16px; border: 0; } /* Remove unwanted borders */ table tbody td, table tbody th, .tablepress tbody td, .tablepress tfoot th { border: 0; } /* Stripe odd rows with a light green */ /* 22/02/22 ROB removed Tablepress styles here and added specificity for wordpress styles as there were conflicts */ tbody tr:nth-child(odd){ background-color: rgb(245,249,232); } /* Easy FAQS Container overflow so tables display correctly */ .easy-faqs-wrapper.easy-faqs-theme-modern-gray .easy-faq-body { overflow-x: auto; } /* NOTICE BLOCKS *gb-notice-title* Unfortunatly I have had to use !important here quite a lot to override some inline styles RJB 16-04-21 */ .gb-notice-title, .wp-block-genesis-blocks-gb-notice, .gb-block-notice { background-color: var(--brand-secondary-dark); border-color:var(--brand-secondary-dark); font-weight: normal !important; } .gb-notice-text { font-weight: normal !important; border: solid 2px var(--brand-secondary-dark); border-top-color:var(--brand-secondary-dark)!important; border-right-color:var(--brand-secondary-dark)!important; border-bottom-color:var(--brand-secondary-dark)!important; border-left-color:var(--brand-secondary-dark)!important; border-radius: 0 0 var(--radius) var(--radius) !important; } /* Figure Captions ------------------------------------------------------------ */ .wp-block-image figcaption{ font-style:italic; color: var(--ui-background-dark); position: inherit; margin-top: var(--space-quarter); } /* Structure and Layout ---------------------------------------------------------------------------------------------------- */ /* Site Containers --------------------------------------------- */ .wrap { margin: 0 auto; max-width: 1140px; } .site-inner { overflow: hidden; padding-top: var(--space-quad); } /* Column Widths and Positions --------------------------------------------- */ /* Wrapping div for .content and .sidebar-primary */ .content-sidebar-sidebar .content-sidebar-wrap, .sidebar-content-sidebar .content-sidebar-wrap, .sidebar-sidebar-content .content-sidebar-wrap { width: 930px; } .content-sidebar-sidebar .content-sidebar-wrap { float: left; } .sidebar-content-sidebar .content-sidebar-wrap, .sidebar-sidebar-content .content-sidebar-wrap { float: right; } /* Content */ .content { background-color: #fff; border: 1px solid var(--ui-background-light); border-radius: var(--radius-loose); margin-bottom: var(--space-quad); padding: var(--space-quad) var(--space-oct); width: 760px; /* Lets try adding some shadows */ -webkit-box-shadow: 0px 0px 8px 0px var(--ui-background); -moz-box-shadow: 0px 0px 8px 0px var(--ui-background); box-shadow: 0px 0px 8px 0px var(--ui-background); } .outreach-pro-home .content { margin: 0; } .content-sidebar .content, .content-sidebar-sidebar .content, .sidebar-content-sidebar .content { float: left; } .content-sidebar-sidebar .content, .sidebar-content-sidebar .content, .sidebar-sidebar-content .content { width: 550px; } /* DD 16/10/20 NOTE: We might want to revisit this to get pages without a sidebar looking nice & tight */ .full-width-content .content { width: 100%; } /* Primary Sidebar */ .sidebar-primary { float: right; width: 350px; } .sidebar-content .sidebar-primary, .sidebar-sidebar-content .sidebar-primary { float: left; } /* Secondary Sidebar */ .sidebar-secondary { float: left; width: 180px; } .content-sidebar-sidebar .sidebar-secondary { float: right; } /* Column Classes Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css --------------------------------------------- */ .five-sixths, .four-sixths, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-sixths, .two-fourths, .two-sixths, .two-thirds { float: left; margin-left: 2.564102564102564%; } .one-half, .three-sixths, .two-fourths { width: 48.717948717948715%; } .one-third, .two-sixths { width: 31.623931623931625%; } .four-sixths, .two-thirds { width: 65.81196581196582%; } .one-fourth { width: 23.076923076923077%; } .three-fourths { width: 74.35897435897436%; } .one-sixth { width: 14.52991452991453%; } .five-sixths { width: 82.90598290598291%; } .first { clear: both; margin-left: 0; } /* Common Classes ---------------------------------------------------------------------------------------------------- */ /* Avatar --------------------------------------------- */ .pp-multiple-authors-layout-boxed .avatar, .pp-multiple-authors-layout-boxed .photo, .pp-multiple-authors-layout-centered .avatar, .pp-multiple-authors-layout-centered .photo, .avatar { margin: var(--space-half); border-radius: var(--radius-loose) !important ; } .alignleft .avatar, .author-box .avatar { margin-right: 24px; } .alignright .avatar { margin-left: 24px; } .comment .avatar { margin: 0 16px 24px 0; } /* Genesis --------------------------------------------- */ .breadcrumb { background-color: var(--ui-background-light); /* font-size: 14px; */ margin-bottom: var(--space-double); padding: var(--space-double); } .archive-description { margin-bottom: var(--space-quad); padding: 0; border-bottom: rgb(245, 245, 245) 2px solid; } .author-box { background-color: #111; color: #fff; margin: 0 -40px 40px; padding: 30px; } .author-box-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; } .archive-description p:last-child, .author-box p:last-child { margin-bottom: 0; } /* Search Form --------------------------------------------- */ /* DD 16/10/20 NOTE: I don't think we need most of this any more. I've left it here for the time being just in case! */ /* .search-form { overflow: hidden; } .site-header .search-form { float: right; margin-top: 12px; } .entry-content .search-form, .site-header .search-form { width: 50%; } .genesis-nav-menu .search input[type="submit"], .widget_search input[type="submit"] { border: 0; clip: rect(0, 0, 0, 0); margin: -1px; }*/ /* .search-form input[type="search"] { width: 180px; margin-right:10px; color: rgba(0, 0, 0, 0.9); } */ /* Titles --------------------------------------------- */ .archive-title { margin: 0 0 var(--space-quad); } .entry-title { font-weight: 600; margin: var(--space-double) 0; } /* Let the content titles inherit the basic link styling */ .content .entry-title a { text-decoration: none; } .content .entry-title a:hover { border-bottom: 2px dotted; } /* Style the sidebar widget titles */ /* DD NOTE 23/10/20 - We might want to move this to be closer to the widget styling */ .widget-title { color: var(--brand-primary-darkest); font-size: 18px; margin: 0 0 var(--space-triple); letter-spacing: 1px; font-weight: normal; text-transform: uppercase; } .footer-widgets .widget-title, .site-header .widget-title { color: #fff; } /* WordPress --------------------------------------------- */ .alignleft { float: left; text-align: left; } .alignright { float: right; text-align: right; } a.alignleft, a.alignnone, a.alignright { max-width: 100%; } a.alignnone { display: inline-block; } a.aligncenter img { display: block; margin: 0 auto; } img.centered, .aligncenter { display: block; margin: 0 auto 24px; } img.alignnone, .alignnone { display: block; margin-bottom: 16px; } a.alignleft, img.alignleft, .wp-caption.alignleft { margin: 0 24px 24px 0; } a.alignright, img.alignright, .wp-caption.alignright { margin: 0 0 24px 24px; } .gallery-caption { margin: 0 0 10px; } .wp-caption-text { font-weight: 700; text-align: center; } .entry-content p.wp-caption-text { margin-bottom: 0; } /* Widgets ---------------------------------------------------------------------------------------------------- */ .widget { word-wrap: break-word; margin-bottom: var(--space-quad); } /* Remove the default margins from widget lists */ .widget ul { margin: 0; } .widget li { border-bottom: var(--medium) solid var(--ui-background-light); margin-bottom: var(--space-double); padding-bottom: var(--space-double); text-align: left; } .widget ol > li { list-style-position: inside; list-style-type: decimal; padding-left: var(--space-triple); text-indent: -(var(--space-triple)); } .widget li li { border: none; margin: 0 0 0 var(--space-quad); padding: 0; } .widget p:last-child, .widget ol > li:last-child, .widget ul > li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .widget_calendar table { border-color: #494949; width: 100%; } .widget_calendar td, .widget_calendar th { text-align: center; } /* Featured Content --------------------------------------------- */ .featured-content .entry { margin-bottom: var(--space-quad); } .featured-content .entry-title { font-size: 20px; } .featured-content .entry-comments-link { float: none; } .more-from-category { border-top: 1px dotted #494949; margin-top: var(--space-double); padding-top: var(--space-double); } /* Plugins ---------------------------------------------------------------------------------------------------- */ /* Genesis eNews Extended --------------------------------------------- */ .sidebar .enews-widget .widget-title { color: #fff; } .enews-widget input { margin-bottom: var(--space-double); } .enews-widget input[type="submit"] { border: none; color: #fff; margin: 0; width: 100%; } .enews-widget input:hover[type="submit"] { background-color: #eee; color: #333; } .enews form + p { margin-top: var(--space-triple); } /* Genesis Responsive Slider ------------------------------------------------------------ */ .content #genesis-responsive-slider { -webkit-box-shadow: 0 60px 100px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 60px 100px rgba(0, 0, 0, 0.5); box-shadow: 0 60px 100px rgba(0, 0, 0, 0.5); border: none; padding: 0; } .content #genesis-responsive-slider a:hover, .content #genesis-responsive-slider h2 a, .content #genesis-responsive-slider h2, .content #genesis-responsive-slider p { color: #fff; } .content #genesis-responsive-slider a, .content #genesis-responsive-slider h2 a:hover { color: #2e7f9f; } #genesis-responsive-slider li { border: none; margin: 0; padding: 0; } .content .slide-excerpt { background-color: rgba(0, 0, 0, 0.7); border: none; filter: alpha(opacity=10); margin: 0; opacity: 1; } html > body .content .slide-excerpt-border { border: none; margin: 0; padding: 30px; } .content #genesis-responsive-slider p { color: #fff; } .widget.genesis_responsive_slider, .content #genesis-responsive-slider .flex-control-nav { margin-bottom: 0; } .content #genesis-responsive-slider .flex-control-nav { margin-top: -40px; } .content .genesis_responsive_slider .flex-direction-nav li a { background: url(images/icon-direction-nav.png) no-repeat -50px 0; background-size: 100px 98px; height: 49px; right: -25px; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; width: 50px; } .content .genesis_responsive_slider .flex-direction-nav li a:hover { background-position: -50px -49px; } .content .genesis_responsive_slider .flex-direction-nav li a.prev { background-position: 0 0; bottom: 10px; left: auto; right: 62px !important; top: auto; } .content #genesis-responsive-slider .flex-direction-nav li a.next { bottom: 10px; left: auto; right: 10px !important; top: auto; } .content .genesis_responsive_slider .flex-direction-nav li a:hover.prev { background-position: 0 -49px; } /* Jetpack --------------------------------------------- */ #wpstats { display: none; } /* ROB 08-02-2022 EU Cookie law banner adittional styles to make sure it floats ablove the zendesk widget and matches theme !important added for Prod as it get overridden there by Jetpack */ #eu-cookie-law { margin-bottom: var(--space-quint); } #eu-cookie-law input, #eu-cookie-law input:hover, #eu-cookie-law input:focus{ background: var(--brand-primary-darkest) !important; color:#fff !important; } /* EVENTS CALENDAR ------------------------------------------------*/ /* Custom styling for the Tribe Events Calendar plugin will go here */ /* Make sure the calendar hasn't been inadvertantly styled by less-specific rules */ .datepicker thead th { background-color: #fff; } .tribe-events .tribe-events-c-search__button{ margin-left:var(--space-triple); padding: var(--space-double); } .tribe-events .tribe-events-c-view-selector--labels .tribe-events-c-view-selector__button{ margin-left: var(--space-triple); padding: 0; } .tribe-common--breakpoint-full.tribe-events .tribe-events-c-top-bar__datepicker-desktop, .tribe-events-c-nav__next-label, .tribe-common button, .tribe-common button[disabled]{ padding: var(--space-double); } .tribe-common .tribe-common-c-btn-border, .tribe-common a.tribe-common-c-btn-border{ border-color: var(--brand-secondary-dark); background-color: var(--brand-secondary-dark); } .tribe-events .tribe-common-c-btn.tribe-events-c-search__button{ background-color: var(--brand-secondary-dark); color: var(--text-light-high); } .tribe-events .tribe-common-c-btn.tribe-events-c-search__button:hover{ background-color: var(--brand-primary-dark); color: var(--text-light-high); } /* TEAM PROFILES */ /* NOTE: We use the Genesis profile block on the Team page to give everyone an author bio and a link to their ORCID record */ /* This override is solely to avoid having to update every profile with a custom icon colour in the block config */ .gb-block-profile .gb-social-links li i { background-color: var(--brand-primary)!important; } /* ACCORDIONS --------------------------------------------- */ /* NOTE: These were originally Atomic blocks but they've been renamed to Genesis blocks */ /* Annoyingly there's a default block stylesheet that gets loaded after the main one with some style rules for accordions. We need to use !important to overwrite these! */ /* Space out multiple accordion blocks stacked together */ .gb-block-accordion + .gb-block-accordion { margin: 0 0 var(--space-double)!important; } /* Spacing for a solitary accordion block */ .gb-block-accordion { margin: 0 0 var(--space-double)!important; } /* Style the accordion title - This is the header area that you click to expand more information. */ details .gb-accordion-title { background: var(--ui-background-lightest) url("images/Icon-expand-closed.png") no-repeat left center!important; border-bottom: var(--medium) solid var(--ui-background); color: var(--copy-dark); cursor: pointer; padding: var(--space-double) var(--space-double) var(--space-double) var(--space-quint)!important; } /* Style the accordion title directly after the wrapping element. This means we don't style any nested accordions */ details[open] > .gb-accordion-title { background: var(--ui-background-lightest) url("images/Icon-expand-open.png") no-repeat left center!important; border-bottom-color: var(--brand-primary); } /* The WP accordion block uses the HTML
element that comes with a 'free' drop down arrow.*/ /* Webkit browsers display the arrow but Firefox doesn't recognise it. For now we are simply disabling it for all */ Summary { list-style-image: none; } /* Hide the arrow marker on Webkit */ summary::-webkit-details-marker { display: none; } /* FAQs */ /* These are accordions in another name and controlled by the Easy FAQs plugin. Although this CSS could be combined with the accordion rules above I've split it out for now */ /* To get the styling to work Easy FAQ needs to be set to 'No theme' in the plugin config - /wp-admin/admin.php?page=easy-faqs-themes#tab-theme_selector */ .easy-faq-title { background: var(--ui-background-lightest) url("images/Icon-expand-closed.png") no-repeat left center!important; border-bottom: var(--medium) solid var(--ui-background); color: var(--copy-dark); cursor: pointer; font-size: 16px!important; line-height: 1.2!important; padding: var(--space-double) var(--space-double) var(--space-double) var(--space-quint)!important; } .easy-faq-title.ui-state-active { background: var(--ui-background-lightest) url("images/Icon-expand-open.png") no-repeat left center!important; border-bottom-color: var(--brand-primary); } /*Mailpoet ---------------------------------------- */ /* Style the Mailpoet submission form. I'm afraid we're going to have to use some !important overrides in here :-( Most of the styling has been added in the Custom CSS section of the Mailpoet plugin config: /wp-admin/admin.php?page=mailpoet-form-editor&id=1 */ /* Rob note 15/07/21 I have moved the styles here because they kept getting overridden so we got some !important in here instead */ /* Get the spacing right on the Mailpoet button */ .mailpoet_submit { padding: var(--space) var(--space-double)!important; } /* Input */ .mailpoet_form, .mailpoet_form .mailpoet_paragraph, .mailpoet_form .mailpoet_form_paragraph, .mailpoet_form .mailpoet_textarea, .mailpoet_form .mailpoet_text, .mailpoet_form .mailpoet_select, .mailpoet_form .mailpoet_form_image, .mailpoet_form .mailpoet_message, .mailpoet_form .mailpoet_paragraph select { color: var(--copy-dark); font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 24px; } #mailpoet_form_1 form.mailpoet_form { padding: 0px !important; } /* form */ .mailpoet_form { } /* columns */ .mailpoet_column_with_background { padding: 16px; } /* space between columns */ .mailpoet_form_column:not(:first-child) { margin-left: 16px; } /* input wrapper (label + input) */ .mailpoet_paragraph { line-height: 24px; margin-bottom: 16px; } /* labels */ .mailpoet_segment_label, .mailpoet_text_label, .mailpoet_textarea_label, .mailpoet_select_label, .mailpoet_radio_label, .mailpoet_checkbox_label, .mailpoet_list_label, .mailpoet_date_label { display:block; font-weight: normal; margin-bottom: 4px; } /* inputs */ .mailpoet_text, .mailpoet_textarea, .mailpoet_select, .mailpoet_date_month, .mailpoet_date_day, .mailpoet_date_year, .mailpoet_date { display: block; } .mailpoet_text, .mailpoet_textarea { width: 100%; } .mailpoet_checkbox { margin: 0 8px 0 0; } .mailpoet_submit { padding: 8px 16px; } .mailpoet_divider { } .mailpoet_message { } .mailpoet_form_loading { width: 30px; text-align: center; line-height: normal; } .mailpoet_form_loading > span { width: 5px; height: 5px; background-color: #5b5b5b; } /* PublishPress Multi Authors */ /* EDIT ROB 14-07-21 added specificity for Publishpress pligin author avatars */ /* NOTE Rob 15/07/21 the !important here is to overide the inline border stlyes the PP injects */ .pp-multiple-authors-layout-boxed .avatar, .pp-multiple-authors-layout-boxed .photo, .pp-multiple-authors-layout-centered .avatar, .pp-multiple-authors-layout-centered .photo, .avatar { margin: var(--space-half); } .pp-multiple-authors-layout-boxed .multiple-authors-name a, .pp-multiple-authors-layout-centered .multiple-authors-name a{ font-size: inherit; } .pp-multiple-authors-layout-boxed ul li, .pp-multiple-authors-layout-centered ul li{ border-radius: var(--radius-loose); border-color: var(--brand-primary-light) !important; border-width: var(--medium)!important; } /* Site Header ---------------------------------------------------------------------------------------------------- */ .site-header { background-color: #fff; height: 112px; border-bottom: var(--medium) solid var(--ui-background-light); } /* Title Area --------------------------------------------- */ /* Display the ORCID logo and strapline */ .title-area { float: left; width: 340px; margin-top: var(--space-double); } /* Make the logo link a fixed height */ .header-image .site-title > a { display: block; min-height: 44px; width: 100%; } /* Stop the logo and description pushing down too far */ .site-description, .site-title { margin: 0; color: var(--text-dark-med); } /* Widget Area --------------------------------------------- */ /* Bolt the widget area to the right side of the page */ .site-header .widget-area { float: right; text-align: right; margin-top: var(--space-quad); } /* Target the individual sections elements in the header widget area */ .site-header .widget-area section { margin: 0 var(--space-double); } /* Remove margin from any widgets in the header and make them inline */ .site-header .widget { margin-bottom: 0; display: inline-block; } /* Site Navigation ---------------------------------------------------------------------------------------------------- */ /* DD NOTE 30/08/20: I genuinely can't see what this block of code is doing so I've commented it out for the time being. I think we aren't using it any more as it has been superseded by the Mega Menu but I can't be sure there aren't any rules tucked away in there that we need to keep. */ /* .genesis-nav-menu { clear: both; font-size: 18px; line-height: 1.33; width: 82%; background-color: #fff; } .genesis-nav-menu, .genesis-nav-menu a { color: #2e7f9f; } .genesis-nav-menu .menu-item { display: inline-block; text-align: left; } .genesis-nav-menu a { display: block; padding: 18px 20px; } .genesis-nav-menu .current-menu-item a{ background-color: #fff; color: #2e7f9f; } .genesis-nav-menu .sub-menu .current-menu-item > a:hover, .genesis-nav-menu a:hover, .genesis-nav-menu li:hover > a { background-color:rgba(255, 255, 255, 0.11); } .genesis-nav-menu > .menu-item > a { text-transform: uppercase; } .genesis-nav-menu .sub-menu { border-top: 1px solid #fff; left: -9999px; opacity: 0; position: absolute; -webkit-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; width: 200px; z-index: 999; } .genesis-nav-menu .sub-menu a { background-color: #eee; border: 1px solid #fff; border-top: none; color: #2e7f9f; font-size: 12px; padding: 14px 20px; position: relative; width: 200px; } .genesis-nav-menu .sub-menu .sub-menu { margin: -48px 0 0 199px; } .genesis-nav-menu .menu-item:hover { position: static; } .genesis-nav-menu .menu-item:hover > .sub-menu { left: auto; opacity: 1; } .genesis-nav-menu > .first > a { padding-left: 0; } .genesis-nav-menu > .last > a { padding-right: 0; } .genesis-nav-menu > .right { display: inline-block; float: right; list-style-type: none; padding: 0; text-transform: uppercase; } .genesis-nav-menu > .date, .genesis-nav-menu > .right > a { display: inline-block; padding: 18px 20px; } .genesis-nav-menu .right:hover > a { background: none; color: #2e7f9f; } .genesis-nav-menu .right > a:hover { background: #fff; color: #2e7f9f; } .genesis-nav-menu > .search { padding: 9px 0 0; } .genesis-nav-menu input[type="search"] { font-size: 14px; padding: 10px 16px; } */ /* Additional CSS for Accessibility settings * Accessible Menu * Screen Reader Text * Skip Links ------------------------------------------------*/ /* ## Accessible Menu --------------------------------------------- */ .menu .menu-item:focus { position: static; } .menu .menu-item > a:focus + ul.sub-menu, .menu .menu-item.sfHover > ul.sub-menu { left: auto; opacity: 1; } /* ## Screen reader text --------------------------------------------- */ .screen-reader-text, .screen-reader-text span, .screen-reader-shortcut { border: 0; clip: rect(0, 0, 0, 0); height: 1px; overflow: hidden; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus, .screen-reader-shortcut:focus, .genesis-nav-menu .search input[type="submit"]:focus, .widget_search input[type="submit"]:focus { /* background: #fff; */ box-shadow: 0 0 2px 2px var(--brand-primary-lightest); /* clip: auto !important; */ /* color: #333; */ /* display: block; */ /* font-size: 1em; */ /* font-weight: bold; */ /* height: auto; */ /* padding: 15px 23px 14px; */ /* text-decoration: none; */ /* width: auto; */ z-index: 100000; /* Above WP toolbar. */ } .more-link { position: relative; } /* Skip Links ---------------------------------------------------------------------------------------------------- */ .genesis-skip-link { margin: 0; } .genesis-skip-link li { height: 0; list-style: none; width: 0; } /* Site Header Navigation --------------------------------------------- */ .site-header .genesis-nav-menu li, .site-header .genesis-nav-menu li ul { border-bottom: none; margin: 0; padding: 0; } /* Primary Navigation --------------------------------------------- */ .nav-primary { background-color: #fff; border-bottom: 1px solid var(--ui-background-light); width: 100%; } /* Secondary Navigation --------------------------------------------- */ .nav-secondary .wrap { background-color: #111; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; margin-bottom: 16px; } .nav-secondary .genesis-nav-menu > li > a:hover, .nav-secondary .genesis-nav-menu > li:hover > a { background: none; } .nav-secondary .genesis-nav-menu .current-menu-item > a, .nav-secondary .genesis-nav-menu .sub-menu a:hover, .nav-secondary .genesis-nav-menu a:hover, .nav-secondary .genesis-nav-menu li:hover > a { color: #6ab446; } .nav-secondary .genesis-nav-menu .sub-menu a { background-color: #090909; border-color: #292929; color: #fff; } .nav-secondary .sub-menu { border-color: #292929; } /* Responsive Menu --------------------------------------------- */ .responsive-menu-icon { cursor: pointer; display: none; margin-bottom: -1px; text-align: center; } .responsive-menu-icon::before { color: #fff; content: "\f333"; display: inline-block; font: normal 20px/1 'dashicons'; margin: 0 auto; padding: 10px; } .site-header .responsive-menu-icon::before { padding: 0; } /* Content Area ---------------------------------------------------------------------------------------------------- */ /* Home Page --------------------------------------------- */ .home-top .widget { margin: 0; padding: 0 40px 40px; } .home-top .widget:first-child { padding-top: 40px; } .home-top .widget.genesis_responsive_slider { padding: 0; } .outreach-pro-home .content { padding: 0; } .home-bottom { background-color: #fff; padding-top: 60px; } .home-bottom .widget { float: left; margin-left: 2.564102564102564%; width: 23.076923076923077%; } .home-bottom .widget:nth-child(4n+1) { clear: both; margin-left: 0; } .home-bottom .featured-content img { -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4); -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4); box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4); } .home-bottom .widget-title { color: #333; font-weight: 700; } /* Entries --------------------------------------------- */ .entry { margin-bottom: var(--space-quad); /* background-color: white; */ } /* Lists in article entries */ .entry-content ol, .entry-content ul { margin: 0 0 var(--space-double) var(--space-quad); } /* .entry-content ol, .entry-content ul { margin-left: var(--space-quad); } */ .entry-content ol > li { list-style-type: decimal; margin-bottom: var(--space); } .entry-content ul > li { list-style-type: disc; margin-bottom: var(--space); } /* ROB 22-03-22 removing bullet styles from queryloop block entries */ .wp-block-query ul > li{ list-style: none; padding: var; } .entry-content ol ol, .entry-content ul ul { margin-bottom: 0; } /* Example code blocks */ .wp-block-code { background-color: var(--ui-background-darkest); color: #ffffff; padding: var(--space-double); } /* Remove the background color from the code text examples */ code { background-color: transparent; } /* Entry Meta --------------------------------------------- */ /* Default styles for meta information */ .entry-meta { color: var(--text-dark-med); margin-bottom: 0; text-transform: uppercase; letter-spacing: 1px; } .entry-header .entry-meta { margin-bottom: var(--space-triple); } .entry-footer .entry-meta { border-top: var(--medium) dotted var(--ui-background); padding-top: var(--space); } .entry-categories { float: left; } .entry-comments-link, .entry-tags { float: right; } /* After Entry --------------------------------------------- */ .after-entry { background-color: #f5f5f5; margin-bottom: 40px; padding: 30px; text-align: center; } .after-entry p:last-child { margin: 0; } .after-entry li { list-style-type: none; } .after-entry .featured-content li { text-align: center; } /* Pagination --------------------------------------------- */ /* Push the pagination away from the items before it */ .pagination { margin: var(--space-oct) 0 0; } /* Remove standard list padding from the pagination */ .pagination ul { margin: 0; } /* Display the list items inline */ .pagination li { display: inline; } /* Default styling for pagination follows the standard button rules */ .pagination li a { background-color: var(--brand-secondary); color: #fff; cursor: pointer; display: inline-block; margin-bottom: var(--space); padding: var(--space) var(--space-double); text-decoration: none; border-radius: var(--radius-tight); } /* Highlight with green when hovering */ .pagination li a:hover { background-color: var(--brand-primary-dark); } /* Turn the active 'page' a darker blue */ .pagination .active a { background-color: var(--brand-secondary-dark); } /* Comments --------------------------------------------- */ .comment-respond, .entry-comments, .entry-pings { margin-bottom: 30px; } li.comment, li.pingback { background-color: #f5f5f5; border: 2px solid #fff; border-right: none; } .comment-content { clear: both; } .comment-list li, .entry-pings li { margin-top: 24px; padding: 32px; } .comment-list li li { margin-right: -32px; } .comment-respond input[type="email"], .comment-respond input[type="text"], .comment-respond input[type="url"] { width: 50%; } .comment-respond label { display: block; margin-right: 12px; } .entry-comments .comment-author { margin-bottom: 0; } .entry-pings .reply { display: none; } .form-allowed-tags { background-color: #f5f5f5; padding: 24px; } /* Sidebars ---------------------------------------------------------------------------------------------------- */ .sidebar .widget { background-color: white; padding: var(--space-triple) var(--space-quad) var(--space-quad); border-top: var(--thick) solid var(--brand-primary); border-radius: 0 0 var(--radius-loose) var(--radius-loose); } .sidebar li a { color: var(--brand-secondary-dark); } .sidebar li a:hover, .sidebar .entry-meta a:hover { color: var(--brand-primary-dark); } /* Sub Footer ---------------------------------------------------------------------------------------------------- */ /* .sub-footer { background-color: #f2f6e9; padding: 60px 0 30px; } .sub-footer-left { float: left; width: 785px; } .sub-footer-right { float: right; font-size: 14px; width: 235px; } .sub-footer-left .entry-title { font-size: 30px; } */ /* Footer Widgets ---------------------------------------------------------------------------------------------------- */ .footer-widgets { background-color: #f5f5f5; color: #333; clear: both; font-size: 14px; padding: 60px 0 30px; } .footer-widgets input { border: 1px solid #333; } .footer-widgets .entry-meta a:hover, .footer-widgets a:hover { color: #fff; } .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .footer-widgets-4 { width: 255px; } .footer-widgets-1, .footer-widgets-2 { margin-right: 40px; } .footer-widgets-1, .footer-widgets-2, .footer-widgets-3 { float: left; } .footer-widgets-4 { float: right; } /* Site Footer ---------------------------------------------------------------------------------------------------- */ /* Style the main site footer */ .site-footer { background-color: var(--ui-background-light); padding: var(--space-quad); text-align: center; } .site-footer ul { list-style-type: none; padding: 0; overflow: hidden; display: inline-flex; } .site-footer li { display: inline-block; text-align: center; padding: 0 var(--space); text-decoration: none; } /* The container for the ORCID logo and social icons */ .footer-icons-container { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; margin-bottom: var(--space-triple); justify-content: center; } /* Add a little space around the social icons */ .footer-icons-container nav { margin: 0 var(--space-double); } /* Remove the default