/* Theme Name: Modern Portfolio Child Theme Theme URI: http://my.studiopress.com/themes/modern-portfolio/ Description: Minimialist, mobile-responsive theme created for the Genesis Framework. Author: StudioPress Author URI: http://www.studiopress.com/ Version: 1.0.1 Tags: black, white, one-column, two-columns, fixed-width, custom-menu, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready Template: genesis Template Version: 1.9 License: GPL-2.0+ License URI: http://www.opensource.org/licenses/gpl-license.php */ /* Table of Contents 01 Import Fonts 02 Defaults 03 Typography - Font Color - Font Family - Font Size - Font Miscellaneous 04 Layout - Structure - 1080px CSS Grid - Header - Homepage - Main Content - Post Info & Meta - Column Classes - Miscellaneous 05 Menus - Primary Navigation Extras 06 Headings 07 Lists 08 Post Navigation 09 Comments 10 Sidebars 11 Footer - Footer Widgets 12 Forms & Buttons - Gravity Forms 13 Images & Captions 13a CSS needed by plugins (except Ubermenu, below, 15) 14 Media Queries - max-width: 1024px - max-width: 768px - max-width: 480px 15 Ubermenu */ /* 01 Import Fonts ---------------------------------------------------------------------------------------------------- */ @import url(//fonts.googleapis.com/css?family=Cuprum|Open+Sans:600,300&subset=latin,cyrillic); /* @import url(//fonts.googleapis.com/css?family=Ubuntu:400,500|PT+Sans&subset=latin,cyrillic-ext); */ /* @import url(//fonts.googleapis.com/css?family=Ubuntu:400,500|Ubuntu+Condensed&subset=latin,cyrillic-ext); */ /* @import url(//fonts.googleapis.com/css?family=Lato:300,400|Merriweather:300,400); */ /* 02 Defaults ---------------------------------------------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, input, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; margin: 0; padding: 0; vertical-align: baseline; } html { font-size: 100%; /* 16px browser default */ } body { background-color: #fff; line-height: 1; } body, input, select, textarea, .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, #about .wrap, #involved .wrap, #footer-widgets, #inner, #presence .wrap, #news .wrap { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } a, a:visited, button, input[type="button"], input[type="submit"], .btn, #involved img, #presence img { -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } ::-moz-selection { background-color: #222; color: #eee; } ::selection { background-color: #222; color: #eee; } a img { border: none; } /* 03 Typography ------------------------------------------------------------------------------------------------------- This section covers font colors, families, size, styles and weight. This style sheet uses rem values with a pixel fallback. The rem values are calculated per the examples below: 12 / 16 = 0.75rem 14 / 16 = 0.875rem 16 / 16 = 1rem 18 / 16 = 1.125rem 20 / 16 = 1.25rem 24 / 16 = 1.5rem 30 / 16 = 1.875rem 36 / 16 = 2.25rem 42 / 16 = 2.625rem 48 / 16 = 3rem Further reading on the use and compatibility of rems: http://caniuse.com/rem http://snook.ca/archives/html_and_css/font-size-with-rem */ /* 03a - Font Color ----------- */ a:hover, body, h2 a, h2 a:visited, h4.widgettitle a, input, .genesis-nav-menu a, .genesis-nav-menu a:visited, .genesis-nav-menu li li a, .genesis-nav-menu li li a:link, .genesis-nav-menu li li a:visited, .post-comments, .post-info a, .post-meta a, #footer a, #title a, { color: #222; } a, h2 a:hover, .post-info a:hover, .post-meta a:hover, #footer a:hover { color: #af7817; /* Gold */ } blockquote::before, blockquote p, input, select, textarea, .post-info, .post-meta { color: #888; } .footer-widgets a { color: #aaa; } a.cta-button, a.landing-button, a.social-buttons, button, input[type="button"], input[type="submit"], .btn, .enews, .footer-widgets, .footer-widgets a:hover, .genesis-nav-menu li a:hover, .genesis-nav-menu li li a:hover, .genesis-nav-menu .highlight-menu-item a, .genesis-nav-menu .highlight-menu-item a:hover, .navigation li a, .navigation li a:hover, .navigation li.active a, .navigation li.disabled, #about, #news { color: #eee; } a.cta-button:hover, a.social-buttons:hover, .sidebar .enews-widget input:hover[type="submit"] { color: #222; } /* add highlight colour */ .highlight { color: #4c76b9; font-weight: bold; } /* 03b - Font Family ----------- */ body, input, textarea, .author-box h1, #title { font-family: 'Open Sans', sans-serif; /* 'PT Sans', sans-serif; /* was 'Lato', sans-serif; */ } h1, h2, h3, h4, h5, h6, .entry-title a, #title a::before { font-family: 'Cuprum', sans-serif; /* 'Ubuntu', sans-serif; /* was 'Merriweather', serif; */ } /* 03c - Font Size ----------- */ h1, .entry-title, .entry-title a { font-size: 36px; font-size: 2.25rem; } blockquote::before { font-size: 32px; font-size: 2rem; } h2 { font-size: 30px; font-size: 1.875rem; } h3, h4, .archive-title, .taxonomy-description h1, .widgettitle, #title { font-size: 24px; font-size: 1.5rem; } h5, h6, .archive-title, .author-box h1, .footer-widgets .widgettitle, .sidebar h2 a, .taxonomy-description h1, #about, #involved, #news { font-size: 20px; font-size: 1.25rem; } body, .featuredpost h2 a, .featuredpage h2 a { font-size: 18px; font-size: 1.125rem; } input, select, textarea, .comment-header, .featuredpost p, .post-info, .post-meta, .wp-caption { font-size: 16px; font-size: 1rem; } a.social-buttons { font-size: 14px; font-size: 0.875rem; } .smallerfont { font-size: 70%; } /* 03d - Font Miscellaneous ----------- */ /* our main text font (open sans) has weights of 300 and 600; title font (cuprum) has 400 and 700 as usual */ cite { font-style: normal; } body, input, #title { font-weight: 300; } h1, h2, h3, h4, h5, h6 { font-weight: 400; } strong, .wp-caption { font-weight: 600; } a.landing-button, .wp-caption { text-align: center; } a.cta-button, a.landing-button, a.social-buttons, h2 a, h2 a:visited, .genesis-nav-menu a, .navigation li a, .widgettitle a, #title a { text-decoration: none; } /* #title { text-transform: uppercase; } #title a::before { text-transform: uppercase; } */ /* 04 Layout ---------------------------------------------------------------------------------------------------- */ /* 04a - Structure ----------- */ .wrap, #header, #inner { margin: 0 auto; max-width: 1080px; } .mp-landing #inner { border: 1px solid #222; max-width: 700px; margin: 32px auto; margin: 2rem auto; padding: 48px 64px 0; padding: 3rem 4rem 0; } #inner { clear: both; overflow: hidden; padding: 32px 0 8px; /* 64px 0 16px; */ padding: 2rem 0 0.5rem; /* 4rem 0 1rem; */ } .mp-home #inner { padding: 0; max-width: 100%; } /* 04b - 1080px CSS Grid ----------- */ .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .sidebar, #involved .featuredpost .post:nth-of-type(3n+0), #involved .featuredpost .post:nth-of-type(3n+1), #involved .featuredpost .post:nth-of-type(3n+2), #presence .featuredpost .post:nth-of-type(3n+0), #presence .featuredpost .post:nth-of-type(3n+1), #presence .featuredpost .post:nth-of-type(3n+2), #news .alignright, #title-area, #title-area_short { width: 29.629629629%; /* (fixed 320px / 1080px) */ } #title-area, #title-area_short { max-width: 60%; } /* change sidebar padding if separate bg colour */ .sidebar { width: 29.629629629%; /* remove 2% for padding if separate bg color */ } #content, #header .widget-area, #news .alignleft { width: 64.814814814%; /* take off 2% here for padding (fixed 700px / 1080px) */ } .full-width-content #content, #content-sidebar-wrap { width: 100%; /* (fixed 1080px / 1080px) */ } .footer-widgets-1, .footer-widgets-2, .sidebar-content #sidebar, #involved .featuredpost .post:nth-of-type(3n+1), #involved .featuredpost .post:nth-of-type(3n+2), #content, #content-sidebar-wrap, #footer .gototop, #presence .featuredpost .post:nth-of-type(3n+1), #presence .featuredpost .post:nth-of-type(3n+2), #sidebar-alt, #title-area, #title-area_short { float: left; } .footer-widgets-3, .sidebar, .sidebar-content #content, #involved .featuredpost .post:nth-of-type(3n+0), #footer .creds, #header .widget-area, #presence .featuredpost .post:nth-of-type(3n+0) { float: right; } #header .widget-area { max-width: 25%; /* not to overlap photo too much and to mirror title below */ text-align: right; padding: 12px 0; padding: 0.75rem 0; } .footer-widgets-1, #involved .featuredpost .post:nth-of-type(3n+1), #presence .featuredpost .post:nth-of-type(3n+1) { margin-right: 5.555555555%; /* (fixed 60px / 1080px) */ } /* 04c - Header ----------- */ #header { /* border-bottom: 1px solid #222; don't need this with a header image or filled menu */ overflow: hidden; padding: 32px 0; padding: 2rem 0; } .mp-home #header { border: none; } #title-area { padding: 12px 0; padding: 0.75rem 0; } .header-image #header, .header-image #title-area, .header-image #title-area_short { padding: 0; } /* so not too many words over the centre of the bg image and to mirror header widget above */ #title { max-width: 25%; word-spacing: 270px; } #title, #title a { cursor: pointer; display: block; line-height: 1; margin: 0; } #title a::before { background-color: #222; border-radius: 50%; /* color: #eee; /* font-size: 140%; /* line-height: 2.5; */ content: url(images/Storks_new_sm.png); /* Used to display the image in the header logo */ cursor: pointer; display: block; /* inline-block; but now I want text to go under, not next to it */ width: 58px; margin-right: 16px; margin-right: 1rem; padding: 5px 5px; /* was 3px 4px; */ padding: 0.3125rem 0.3125rem; /* was 0.1875rem 0.25rem; */ text-align: center; } #title a:hover::before { background-color: #af7817; /* Gold */ } #title a { color: #222; text-shadow: 1px 1px #af7817; /* 1px 1px #d7b270, -1px -1px #6988b9; */ font-size: 120%; /* need to make it bigger if we're using small-caps below */ font-variant: small-caps; text-align: left; } #title a:hover { color: #af7817; /* Gold */ text-shadow: 1px 1px #d7b270; } .header-full-width #title, .header-full-width #title a, .header-full-width #title-area, .header-full-width #title-area_short { width: 100%; } .header-image #title, .header-image #title a, .header-image #title-area, .header-image #title-area_short { display: block; float: left; min-height: 120px; overflow: hidden; text-indent: -9999px; } .header-image #title, .header-image #title a { width: 100%; } /* 04da - #header_wrapper - to display featured image as background image ------------ */ /* the image background itself is added in Genesis - Simple Hooks plugin ------------- */ #header_wrapper { margin: 0 auto; max-width: 1080px; /* min-height: 300px; to have a min-height, need to use relative then absolute positioning to make other items in this container sit at the bottom instead of starting at the top */ background-size: cover; background-repeat: repeat-y; background-position: center top; background-image: url('http://wp.roofnet.org/wp-content/uploads/2013/03/New-Image.jpg'); /* this is the default image, which will be overwritten by the content when there is a featured image set for the page or post */ /* position: relative; */ } /* add overlay to soften edges */ #header_overlay { background: url('images/header.png') repeat-y center top; background-size: 100% 100%; /* min-height: 300px; see comment on min-height above */ } /* #header { position: absolute; bottom: 30%; } #nav { position: absolute; bottom: 0; width: 100%; } */ /* this is to make the wrap actually wrap the menu rather than sitting there with a height of 0 best way is usually to use overflow: auto on the parent, but in this case this prevents the ubermenu sub-menus from dropping down, so we do this instead to clear the bottom of the div */ #nav .wrap:after { content: ""; display: block; height: 0; clear: both; } /* 04dd - top_feature_spot widget area -------------- .top_feature_spot img { width: 100%; } .top_feature_spot { } #featured-img { height: 0; padding-bottom: 40%; overflow: hidden; } */ /* 04e - Main Content ----------- */ #content { /* background-color: #fff; /* if different bg, need to make the content white bg */ /* padding: 18px 1% 18px 1%; /* if different bg, also need padding and reduce width */ /* padding: 2rem 1% 2rem 1%; /* if different bg, alternative padding */ padding-bottom: 48px; padding-bottom: 3rem; } .mp-home #content { padding: 0; } .entry, .page .post.entry { margin-bottom: 32px; /* 80px; */ margin-bottom: 2rem; /* 5rem; */ } .mp-home .featuredpost .entry, .single .entry { margin-bottom: 32px; /* 48px; */ margin-bottom: 2rem; /* 3rem; */ } .page .entry { margin: 0; } .entry-content { overflow: hidden; } .featuredpost .entry p { line-height: 1.5; } .entry-content, .entry-content p, #about, #news { line-height: 1.625; } .entry-content p { margin-bottom: 26px; margin-bottom: 1.625rem; } blockquote { padding: 24px 64px; padding: 1.5rem 4rem; } blockquote::before { content: "“"; display: block; height: 0; left: -20px; position: relative; top: -10px; } /* 04f - Post Info & Meta ----------- */ .post-info, .post-meta { clear: both; line-height: 1.5; } .post-info { margin-bottom: 24px; margin-bottom: 1.5rem; } .post-comments { background: url(images/post-comments.png) no-repeat center left; margin-left: 16px; margin-left: 1rem; padding-left: 20px; padding-left: 1.25rem; } .post-meta::before { border-top: 1px solid #222; content: ""; display: block; padding-bottom: 32px; padding-bottom: 2rem; width: 10%; } .categories, .tags { display: block; } /* 04g - Column Classes ----------- */ .five-sixths, .four-fifths, .four-sixths, .one-fifth, .one-fourth, .one-half, .one-sixth, .one-third, .three-fifths, .three-fourths, .three-sixths, .two-fifths, .two-fourths, .two-sixths, .two-thirds { float: left; margin-left: 4.166666666%; /* 48px / 1152px */ } .one-half, .three-sixths, .two-fourths { width: 47.9166666666%; /* 552px / 1152px */ } .one-third, .two-sixths { width: 30.555555555%; /* 352px / 1152px */ } .four-sixths, .two-thirds { width: 65.277777777%; /* 752px / 1152px */ } .one-fourth { width: 21.875%; /* 252px / 1152px */ } .three-fourths { width: 73.958333333%; /* 852px / 1152px */ } .one-fifth { width: 16.666666666%; /* 192px / 1152px */ } .two-fifths { width: 37.5%; /* 432px / 1152px */ } .three-fifths { width: 58.333333333%; /* 672px / 1152px */ } .four-fifths { width: 79.166666666%; /* 912px / 1152px */ } .one-sixth { width: 13.194444444%; /* 152px / 1152px */ } .five-sixths { width: 82.638888888%; /* 952px / 1152px */ } .first { margin-left: 0; } /* 04h - Miscellaneous ----------- */ a.social-buttons { background-color: #888; float: left; margin: 0 4px 4px 0; margin: 0 0.25rem 0.25rem 0; overflow: hidden; padding: 4px 8px; padding: 0.25rem 0.5rem; } a.social-buttons:hover { background-color: #eee; } p.subscribe-to-comments { padding: 24px 0 16px; padding: 1.5rem 0 1rem; } p.pages, .clear, .clear-line, .first { clear: both; } .clear-line { border-bottom: 1px solid #222; margin-bottom: 26px; margin-bottom: 1.625rem; } .alignleft, .archive-page { float: left; } .alignright { float: right; } .archive-page { width: 50%; } .author-box, .sticky { margin-bottom: 80px; margin-bottom: 5rem; } .author-box, .author-box h1, .taxonomy-description { line-height: 1.5; } .author-box, .sticky, .taxonomy-description { background-color: #f5f5f5; margin-bottom: 48px; margin-bottom: 3rem; overflow: hidden; padding: 32px; padding: 2rem; } #presence .sticky { background: none; margin: 0; padding: 0; } .breadcrumb { border-bottom: 1px solid #222; margin-bottom: 48px; margin-bottom: 3rem; overflow: hidden; padding: 8px 0 24px; padding: 0.5rem 0 1.5rem; } /* 05 Menus ---------------------------------------------------------------------------------------------------- */ .genesis-nav-menu { clear: both; overflow: hidden; background-color: #222; /* all black with white text */ color: #eee; } .genesis-nav-menu a { color: #eee; } .sub-menu { font-size: 14px; font-size: 0.875rem; } #header .genesis-nav-menu { float: right; margin-top: 10px; margin-top: 0.625rem; width: auto; } /* .genesis-nav-menu.menu-primary, .genesis-nav-menu.menu-secondary { border-bottom: 1px solid #222; } */ .genesis-nav-menu ul { float: left; width: 100%; } .genesis-nav-menu li { display: inline-block; float: left; list-style-type: none; text-align: left; width: 20%; /* this is to even the five main menu categories -- so long as there are 5 ! */ } .sub-menu li.menu-item { width: auto; /* and to reset the sub-menus so that they aren't affected by the above */ } .genesis-nav-menu a { display: block; padding: 24px 20px; padding: 1.5rem 1.25rem; position: relative; } .genesis-nav-menu li.highlight-menu-item { margin-left: 20px; margin-left: 1.25rem; } .genesis-nav-menu .highlight-menu-item a { background-color: #222; color: #eee; } .genesis-nav-menu .highlight-menu-item a:hover { background-color: #af7817; /* Gold */ } .genesis-nav-menu li li a, .genesis-nav-menu li li a:link, .genesis-nav-menu li li a:visited { background-color: #222; /* all black, was #eee; */ color: #eee; border: 1px solid #af7817; border-top: none; padding: 20px; padding: 1.25rem; position: relative; width: 160px; } .genesis-nav-menu li a:hover, .genesis-nav-menu li li a:hover { background-color: #af7817; /* was #222; */ } #header .genesis-nav-menu li a:hover { background: none; } .genesis-nav-menu li ul { left: -9999px; position: absolute; width: 202px; z-index: 99; } .genesis-nav-menu li ul ul { margin: -59px 0 0 201px; } .genesis-nav-menu li:hover ul ul, .genesis-nav-menu li.sfHover ul ul { left: -9999px; } .genesis-nav-menu li:hover, .genesis-nav-menu li.sfHover { position: static; } ul.genesis-nav-menu li:hover>ul, ul.genesis-nav-menu li.sfHover ul, #header .genesis-nav-menu li:hover>ul, #header .genesis-nav-menu li.sfHover ul { left: auto; } .genesis-nav-menu li a .sf-sub-indicator, .genesis-nav-menu li li a .sf-sub-indicator, .genesis-nav-menu li li li a .sf-sub-indicator { position: absolute; text-indent: -9999px; } #wpadminbar li:hover ul ul { left: 0; } /* 05a - Primary Navigation Extras ----------- */ .genesis-nav-menu li.right { float: right; padding: 24px 20px; padding: 1.5rem 1.25rem; } .genesis-nav-menu li.right a { display: inline; padding: 0; } .genesis-nav-menu li.search { padding: 6px 0 0; padding: 0.375rem 0 0; } .genesis-nav-menu li.rss a { background: url(images/rss.png) no-repeat center left; margin-left: 20px; margin-left: 1.25rem; padding-left: 20px; padding-left: 1.25rem; } .genesis-nav-menu li.twitter a { background: url(images/twitter-nav.png) no-repeat center left; padding-left: 24px; padding-left: 1.5rem; } /* 06 Headings ---------------------------------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .entry-title a { line-height: 1.2; margin-bottom: 16px; margin-bottom: 1rem; } .author-box h1 { margin: 0 } .taxonomy-description h1 { margin-bottom: 4px; margin-bottom: 0.25rem; } .featuredpost h2 { margin-bottom: 8px; margin-bottom: 0.5rem; } .archive-title, #involved .widgettitle, #presence .widgettitle { margin-bottom: 24px; margin-bottom: 1.5rem; } /* 07 Lists ---------------------------------------------------------------------------------------------------- */ .entry-content ol, .entry-content ul { margin-bottom: 26px; margin-bottom: 1.625rem; } .entry-content ol li, .entry-content ul li { line-height: 1.625; } .entry-content ol li, .entry-content ul li { margin-left: 40px; margin-left: 2.5rem; } .entry-content ol li { list-style-type: decimal; } .entry-content ul li { list-style-type: disc; } .entry-content ol ol, .entry-content ul ul { margin-bottom: 0; } /* 08 Post Navigation ---------------------------------------------------------------------------------------------------- */ .navigation li { display: inline; } .navigation li a, .navigation li a:hover, .navigation li.active a, .navigation li.disabled { background-color: #222; border-radius: 3px; cursor: pointer; padding: 12px; padding: 0.75rem; } .navigation li a:hover, .navigation li.active a { background-color: #af7817; /* Gold */ } /* 09 Comments ---------------------------------------------------------------------------------------------------- */ #comments, #respond { line-height: 1.5; overflow: hidden; } .ping-list, #comments { margin-bottom: 48px; margin-bottom: 3rem; } #author, #email, #url { width: 50%; } .commentmetadata, #author, #email, #url { margin-bottom: 12px; margin-bottom: 0.75rem; } #comment { margin: 12px 0; margin: 0.75rem 0; } label { margin-left: 12px; margin-left: 0.75rem; } .comment-list li, .ping-list li { list-style-type: none; margin-top: 24px; margin-top: 1.5rem; padding: 32px; padding: 2rem; } .comment-list li ul li { margin-right: -32px; margin-right: -2rem; } .comment-header { overflow: hidden; } .comment { background-color: #f5f5f5; border: 2px solid #eee; border-right: none; } .comment-content p { margin-bottom: 24px; margin-bottom: 1.5rem; } .bypostauthor { } #comments .navigation { margin-top: 32px; margin-top: 2rem; } /* 10 Sidebars ---------------------------------------------------------------------------------------------------- */ .sidebar { display: inline; line-height: 1.5; padding-top: 8px; padding-top: 0.5rem; /* padding: 18px 1% 18px 1%; /* if non-white bg, need more padding here and reduce width */ /* padding: 1.5rem 1% 1.5rem 1%; /* if non-white bg */ /* background-color: #fff; /* if non-white bg, make local white bg */ } .sidebar p { margin-bottom: 16px; margin-bottom: 1rem; } .sidebar .widget { margin-bottom: 32px; margin-bottom: 2rem; overflow: hidden; } .sidebar .widget::after { border-bottom: 1px solid #222; content: ""; display: block; padding-bottom: 32px; padding-bottom: 2rem; width: 20%; } .sidebar.widget-area ul li { list-style-type: none; margin-bottom: 6px; margin-bottom: 0.375rem; word-wrap: break-word; } .enews { background-color: #222; margin-bottom: 8px; margin-bottom: 0.75rem; padding: 32px; padding: 2rem; } .sidebar .widget.enews-widget::after { border-bottom: none; padding-bottom: 0; } /* 11 Footer ---------------------------------------------------------------------------------------------------- */ #footer { border-top: 1px solid #222; clear: both; overflow: hidden; padding: 48px 0; /* if white bg */ padding: 3rem 0; /* if white bg */ /* padding: 58px 10px; /* if non-white bg (local white bg) */ /* padding: 4rem 1rem; /* " " */ /* background-color: rgba(2,2,2,0.7); /* if non-white, use semo-transparent black */ background-color: #222; /* if white bg we use the solid black to match everything else */ color: #eee; /* change fg color because we're having a different footer colour */ } /* add this to change all the font colors in the footer to white */ #footer a, #footer p { color: #eee; } #footer .creds { text-align: right; } #footer .creds, #footer .gototop { margin: 16px 0; margin: 1rem 0; } #footer p { padding: 0 0 8px 0; padding: 0 0 0.5rem 0; } /* 11a - Footer Widgets ----------- */ .footer-widgets { background-color: #d7b270; clear: both; line-height: 1.5; overflow: hidden; padding: 64px 0 16px; padding: 4rem 0 1rem; } .footer-widgets p { margin-bottom: 16px; margin-bottom: 1rem; } .footer-widgets .widget { margin-bottom: 32px; margin-bottom: 2rem; overflow: hidden; } .footer-widgets .widget-area ul li { list-style-type: none; margin-bottom: 6px; margin-bottom: 0.375rem; word-wrap: break-word; } /* 12 Forms & Buttons ---------------------------------------------------------------------------------------------------- */ input, select, textarea { background-color: #eee; border: 1px solid #eee; border-radius: 3px; box-shadow: 0 0 5px #eee inset; padding: 16px; padding: 1rem; width: 100%; } #header .search-form { float: right; margin-top: 56px; margin-top: 3.5rem; width: 100%; } .sidebar .enews-widget input { background-color: #eee; box-shadow: none; } a.cta-button, a.landing-button, button, input[type="button"], input[type="submit"], .btn { background-color: #222; border: none; box-shadow: none; cursor: pointer; padding: 16px 24px; padding: 1rem 1.5rem; width: auto; } a.cta-button { float: right; margin-top: -32px; margin-top: -2rem; padding: 20px 24px; padding: 1.25rem 1.5rem; } a.landing-button { margin-top: 16px; margin-top: 1rem; } a.cta-button, a.landing-button:hover, button:hover, input:hover[type="button"], input:hover[type="submit"], .btn:hover, .sidebar .enews-widget input[type="submit"] { background-color: #af7817; /* Gold */ } .sidebar .enews-widget input { margin-bottom: 8px; margin-bottom: 0.75rem; } .sidebar .enews-widget input[type="submit"] { display: block; margin: 0 auto; padding: 16px; padding: 1rem; width: 100%; } a.cta-button:hover, .sidebar .enews-widget input:hover[type="submit"] { background-color: #eee; } .search-form input[type="submit"] { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* 12a - Gravity Forms ----------- */ #content div.gform_wrapper input, #content div.gform_wrapper select, #content div.gform_wrapper textarea, #content div.gform_wrapper .ginput_complex label { font-size: 16px; font-size: 1rem; padding: 16px; padding: 1rem; } #content div.gform_wrapper input[type="submit"] { padding: 16px 24px; padding: 1rem 1.5rem; } #content div.gform_wrapper .ginput_complex label { padding: 0; } div.gform_wrapper li, div.gform_wrapper form li { margin: 16px 0 0; margin: 1rem 0 0; } /* 13 Images & Captions ---------------------------------------------------------------------------------------------------- */ embed, object, video, .wp-caption { max-width: 100%; } img { height: auto !important; max-width: 100% !important; /* max-height: 100% !important; */ } img.cboxPhoto { max-width: none !important; /* max-height: none !important; */ } #involved img, #presence img { margin-bottom: 24px; margin-bottom: 1.5rem; opacity: 0.8; } #involved img:hover, #presence img:hover { opacity: 1; } .alignleft .avatar { margin-right: 24px; margin-right: 1.5rem; } .alignright .avatar { margin-left: 24px; margin-left: 1.5rem; } .author-box .avatar { float: left; margin-right: 24px; margin-right: 1.5rem } .comment-list li .avatar { float: left; margin: 0 16px 24px 0; margin: 0 1rem 1.5rem 0; } img.centered, .aligncenter { display: block; margin: 0 auto 24px; margin: 0 auto 1.5rem } img.alignnone { display: inline; margin-bottom: 12px; margin-bottom: 0.75rem; } img.alignleft, .post-image, .wp-caption.alignleft { display: inline; margin: 0 24px 24px 0; margin: 0 1.5rem 1.5rem 0; } img.alignright, .wp-caption.alignright { display: inline; margin: 0 0 24px 24px; margin: 0 0 1.5rem 1.5rem; } p.wp-caption-text { line-height: 1.2; margin-top: 12px; margin-top: 0.75rem; } .gallery-caption { } img.attachment-thumbnail { padding: 0 2px; padding: 0 0.125rem; } /* 13a */ /* ------------------------------------------------- stuff necessitated by plugins ------------------------------------------------- */ /* ------------------ */ /* facebook groups feed */ div.fts-jal-fb-header { display: none; } .fts-jal-fb-group-display { font-size: 16px !important; font-size: 1rem !important; line-height: 1.5 !important; } /* .oas_btn_facebook_like_but iframe { height: 20px !important; } /* This is only necessary if using the small buttons, where the iframe is too small for the like button. With the medium buttons it is fine. */ /* ------------------ */ /* WPML - to make the flag display by the language option on the menu, front page */ li#menu-item-161 a::before { content: url(/wp-content/plugins/sitepress-multilingual-cms/res/flags/ru.png); display: inline-block; } li#menu-item-347 a::before { content: url(/wp-content/plugins/sitepress-multilingual-cms/res/flags/en.png); display: inline-block; } #megaMenu #menu-item-161 .wpmega-link-title, #megaMenu #menu-item-347 .wpmega-link-title { display: inline-block; } /* ------------------ */ div.amzn_wdgt_pad input { width: auto; } /* ------------------ */ /* 14 Media Queries ---------------------------------------------------------------------------------------------------- */ /* We have two alternative titles, a small one for very small screens ------------------------------------------------------------------ */ #title-area_short { display: none; } /* Desktops, laptops and iPads (landscape) ----------- */ @media only screen and (max-width: 1024px) { .wrap, #header_wrapper, #inner { max-width: 960px; } } /* If a little smaller... ------ */ @media only screen and (max-width: 960px) { #title { word-spacing: normal; } } /* iPads (portrait) ----------- */ @media only screen and (max-width: 768px) { #inner { padding: 32px 5%; padding: 2rem 5%; } .footer-widgets { padding: 64px 5% 32px; padding: 4rem 5% 2rem; } #about .wrap, #involved .wrap, #presence .wrap, #news .wrap { padding: 0 5%; } .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .wrap, #footer .creds, #footer .gototop, #header .widget-area, #inner, #news .alignleft, #news .alignright, #title-area, #wrap .sidebar, #wrap #content, #wrap #content-sidebar-wrap, #wrap #sidebar-alt { width: 100% !important; } .genesis-nav-menu li, #footer .creds, #footer .gototop, #header ul.genesis-nav-menu, #header .search-form { float: none; } .genesis-nav-menu, #footer .creds, #footer .gototop, #header .search-form, #title { text-align: center; } #header { padding: 0; } #title-area { padding: 12px 0 0; padding: 0.75rem 0 0; } #title { margin: 16px 0; margin: 1rem 0; word-spacing: normal; /* add these two lines */ max-width: 100%; } #header .search-form { margin: 32px auto 0; margin: 2rem auto 0; width: 50%; } .genesis-nav-menu a { padding: 20px 16px; padding: 1.25rem 1rem; } .genesis-nav-menu li.right { display: none; } .mp-landing #inner { border: none; } a.cta-button { float: none; line-height: 6; } #footer { padding: 24px 0; padding: 1.5rem 0; } .footer-widgets-1, #header .genesis-nav-menu { margin: 0; } } /* iPhones (portrait and landscape) ----------- */ @media only screen and (max-width: 480px) { html { font-size: 87.5%; /* 14px base */ } #title a::before { /* height: 50px; */ width: 36px; display: inline-block; content: url(images/Storks_new_vsm.png); } #title { white-space: nowrap; } #involved .featuredpost .post:nth-of-type(3n+0), #involved .featuredpost .post:nth-of-type(3n+1), #involved .featuredpost .post:nth-of-type(3n+2), #presence .featuredpost .post:nth-of-type(3n+0), #presence .featuredpost .post:nth-of-type(3n+1), #presence .featuredpost .post:nth-of-type(3n+2), #header .search-form { width: 100%; } .archive-page, .five-sixths, .four-fifths, .four-sixths, .one-fifth, .one-fourth, .one-half, .one-sixth, .one-third, .three-fifths, .three-fourths, .three-sixths, .two-fifths, .two-fourths, .two-sixths, .two-thirds { margin: 0; width: 100%; } } /* This one is to change to the short name ("ROOF") when the screen is too small */ @media only screen and (max-width: 390px) { html { font-size: 87.5%; /* 14px base */ } #title-area { display: none; } #title-area_short { display: block; } } /* 15 */ /* ====================================================== */ /* -------------------- UberMenu CSS -------------------- */ /* ====================================================== */ /* Style Generator Styles */ #megaMenu { border:none; border-bottom:; background-color:#222222; background:-webkit-gradient(linear,left top,left bottom,from(#222222),to(#222222)); background:-webkit-linear-gradient(top,#222222,#222222); background:-moz-linear-gradient(top,#222222,#222222); background:-ms-linear-gradient(top,#222222,#222222); background:-o-linear-gradient(top,#222222,#222222); -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; -moz-background-clip:padding; -webkit-background-clip:padding-box; background-clip:padding-box; -webkit-box-shadow:inset 0px 1px 0px 0px rgba(255,255,255,0); -moz-box-shadow:inset 0px 1px 0px 0px rgba(255,255,255,0); box-shadow:inset 0px 1px 0px 0px rgba(255,255,255,0); } #megaMenu ul.megaMenu > li.menu-item > a, #megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator { font-size:20px; color:#eeeeee; padding:8px 16px; font-weight:normal; } #megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item > a, #megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item > span.um-anchoremulator { border-left:1px solid transparent; -webkit-box-shadow:inset 1px 0px 0px 0px rgba(255,255,255,0); -moz-box-shadow:inset 1px 0px 0px 0px rgba(255,255,255,0); box-shadow:inset 1px 0px 0px 0px rgba(255,255,255,0); } #megaMenu.megaMenuVertical ul.megaMenu > li.menu-item > a, #megaMenu.megaMenuVertical ul.megaMenu > li.menu-item > span.um-anchoremulator { border-top:1px solid transparent; -webkit-box-shadow:inset 0px 1px 0px 0px rgba(255,255,255,0); -moz-box-shadow:inset 0px 1px 0px 0px rgba(255,255,255,0); box-shadow:inset 0px 1px 0px 0px rgba(255,255,255,0); } #megaMenu ul li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > a, #megaMenu ul li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > span.um-anchoremulator, #megaMenu ul li.menu-item.mega-with-sub > a, #megaMenu ul li.menu-item.mega-with-sub > span.um-anchoremulator, #megaMenu ul li.menu-item.ss-nav-menu-mega > a, #megaMenu ul li.menu-item.ss-nav-menu-mega > span.um-anchoremulator { padding-right:21px; } #megaMenu ul.megaMenu > li.menu-item > a span.wpmega-link-title, #megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator span.wpmega-link-title { text-transform:capitalize; text-shadow:0 -1px 1px transparent; } #megaMenu ul.megaMenu > li.menu-item:hover > a, #megaMenu ul.megaMenu > li.menu-item > a:hover, #megaMenu ul.megaMenu > li.menu-item.megaHover > a, #megaMenu ul.megaMenu > li.menu-item:hover > span.um-anchoremulator, #megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator:hover, #megaMenu ul.megaMenu > li.menu-item.megaHover > span.um-anchoremulator { color:#222222 !important; border-bottom-color:transparent !important; background-color:#af7717; background:-webkit-gradient(linear,left top,left bottom,from(#af7717),to(#af7717)); background:-webkit-linear-gradient(top,#af7717,#af7717); background:-moz-linear-gradient(top,#af7717,#af7717); background:-ms-linear-gradient(top,#af7717,#af7717); background:-o-linear-gradient(top,#af7717,#af7717); -webkit-box-shadow:inset 1px 1px 0px 0px rgba(255,255,255,0); -moz-box-shadow:inset 1px 1px 0px 0px rgba(255,255,255,0); box-shadow:inset 1px 1px 0px 0px rgba(255,255,255,0); } #megaMenu ul.megaMenu > li.menu-item:hover > a span.wpmega-link-title, #megaMenu ul.megaMenu > li.menu-item:hover > span.um-anchoremulator span.wpmega-link-title, #megaMenu ul.megaMenu > li.menu-item > a:hover span.wpmega-link-title, #megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator:hover span.wpmega-link-title, #megaMenu ul.megaMenu > li.menu-item.megaHover > a span.wpmega-link-title, #megaMenu ul.megaMenu > li.menu-item.megaHover > span.um-anchoremulator span.wpmega-link-title { text-shadow:0 -1px 1px transparent; } #megaMenu ul.megaMenu > li.menu-item.current-menu-item > a, #megaMenu ul.megaMenu > li.menu-item.current-menu-parent > a, #megaMenu ul.megaMenu > li.menu-item.current-menu-ancestor > a { color:#af7717; } #megaMenu ul.megaMenu > li.menu-item.ss-nav-menu-mega > ul.sub-menu-1, #megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu { border-color:#af7717; color:#eeeeee; text-shadow:0px 1px 1px transparent; -webkit-box-shadow:1px 1px 1px transparent; -moz-box-shadow:1px 1px 1px transparent; box-shadow:1px 1px 1px transparent; background-color:#222222; background:-webkit-gradient(linear,left top,left bottom,from(#222222),to(#222222)); background:-webkit-linear-gradient(top,#222222,#222222); background:-moz-linear-gradient(top,#222222,#222222); background:-ms-linear-gradient(top,#222222,#222222); background:-o-linear-gradient(top,#222222,#222222); } #megaMenu ul.megaMenu ul.sub-menu .wpmega-postlist a { color:#eeeeee; } #megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item.ss-nav-menu-mega > ul.sub-menu-1, #megaMenu.megaMenuHorizontal ul.megaMenu li.menu-item.ss-nav-menu-reg > ul.sub-menu { border-top:; } #megaMenu ul.megaMenu > li.menu-item.ss-nav-menu-mega > ul.sub-menu-1 > li.menu-item { min-width:100px; } #megaMenu ul li.menu-item.ss-nav-menu-mega ul.sub-menu-1 > li.menu-item > a, #megaMenu ul li.menu-item.ss-nav-menu-mega ul.sub-menu-1 > li.menu-item:hover > a, #megaMenu ul li.menu-item.ss-nav-menu-mega ul ul.sub-menu .ss-nav-menu-header > a, #megaMenu ul li.menu-item.ss-nav-menu-mega ul.sub-menu-1 > li.menu-item > span.um-anchoremulator, #megaMenu ul li.menu-item.ss-nav-menu-mega ul ul.sub-menu .ss-nav-menu-header > span.um-anchoremulator, #megaMenu .wpmega-widgetarea h2.widgettitle { color:#eeeeee; font-size:14px; font-weight:normal; text-shadow:0px 1px 1px transparent; padding-bottom:.4em; border-bottom:none; margin-bottom:.4em; } #megaMenu ul li.menu-item.ss-nav-menu-mega ul.sub-menu-1 > li.menu-item:hover > a { color:#af7717; } #megaMenu ul li.menu-item.ss-nav-menu-mega ul ul.sub-menu li.menu-item > a, #megaMenu ul li.menu-item.ss-nav-menu-mega ul ul.sub-menu li.menu-item > span.um-anchoremulator, #megaMenu ul ul.sub-menu li.menu-item > a, #megaMenu ul ul.sub-menu li.menu-item > span.um-anchoremulator { color:#d7b170; font-size:14px; text-shadow:0px 1px 1px transparent; background-color:transparent; } #megaMenu ul li.menu-item.ss-nav-menu-mega ul ul.sub-menu li.menu-item a:hover, #megaMenu ul ul.sub-menu > li.menu-item:hover > a { color:#af7717; background-color:transparent; } #megaMenu ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform { padding-top:-2px; } #megaMenu ul.megaMenu li.menu-item.ss-nav-menu-highlight > a, #megaMenu ul.megaMenu li.menu-item.ss-nav-menu-highlight > span.um-anchoremulator { color:#6988b9 !important; } #megaMenu .ss-nav-menu-with-img > a > .wpmega-link-title, #megaMenu .ss-nav-menu-with-img > a > .wpmega-link-description, #megaMenu .ss-nav-menu-with-img > a > .wpmega-item-description, #megaMenu .ss-nav-menu-with-img > span.um-anchoremulator > .wpmega-link-title, #megaMenu .ss-nav-menu-with-img > span.um-anchoremulator > .wpmega-link-description, #megaMenu .ss-nav-menu-with-img > span.um-anchoremulator > .wpmega-item-description { padding-left:21px; } .ss-nav-menu-with-img { min-height:16px; } #megaMenu ul.megaMenu li.menu-item a span.wpmega-item-description, #megaMenu ul.megaMenu li.menu-item span.um-anchoremulator span.wpmega-item-description { font-size:12px; line-height:1.4em; color:#eeeeee; text-transform:none; } #megaMenu ul.megaMenu li.menu-item.mega-with-sub > a:after, #megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > a:after, #megaMenu ul.megaMenu li.menu-item.mega-with-sub > span.um-anchoremulator:after, #megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > span.um-anchoremulator:after { border-top-color:#eeeeee; } #megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > a:after, #megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > span.um-anchoremulator:after { border-left-color:#eeeeee; } #megaMenu .wpmega-divider { border-top:1px solid #af7717; border-bottom:1px solid rgba(255,255,255,0.05); } #megaMenu.megaMenuVertical > ul > li.menu-item > a, #megaMenu.megaMenuVertical > ul > li.menu-item > span.um-anchoremulator { background-color:#222222; background:-webkit-gradient(linear,left top,left bottom,from(#222222),to(#222222)); background:-webkit-linear-gradient(top,#222222,#222222); background:-moz-linear-gradient(top,#222222,#222222); background:-ms-linear-gradient(top,#222222,#222222); background:-o-linear-gradient(top,#222222,#222222); } #megaMenu.megaMenuVertical ul li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > a:after, #megaMenu.megaMenuVertical ul li.menu-item.mega-with-sub > a:after, #megaMenu.megaMenuVertical ul li.menu-item.ss-nav-menu-mega > a:after, #megaMenu.megaMenuVertical ul li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > span.um-anchoremulator:after, #megaMenu.megaMenuVertical ul li.menu-item.mega-with-sub > span.um-anchoremulator:after, #megaMenu.megaMenuVertical ul li.menu-item.ss-nav-menu-mega > span.um-anchoremulator:after { border-left-color:#eeeeee; } #megaMenu.megaMenuVertical ul.megaMenu > li.menu-item.ss-nav-menu-mega > ul.sub-menu-1, #megaMenu.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-reg > ul.sub-menu { border-left:; } #megaMenu.megaMenuHorizontal ul.megaMenu { *border-bottom:none; } #megaMenu.megaMenuVertical ul.megaMenu { *border-right:none; } /* ---------------------- */ /* UberMenu Custom Tweaks */ /* ---------------------- */ #megaMenu, #megaMenu h2.widgettitle { font-family: 'Open Sans', sans-serif !important; color: #eee; } #megaMenu ul.megaMenu > li > a span.wpmega-link-title, #megaMenu ul.megaMenu > li > span.um-anchoremulator span.wpmega-link-title { font-variant: small-caps; } #megaMenu ul.megaMenu > li > a, #megaMenu ul.megaMenu > li > span.um-anchoremulator { font-size:1.25rem; padding:0.5rem 1rem; } .megaMenuToggle { color: #eee; } .megaMenu li.ss-nav-menu-item-depth-0 { width: 20%; } /* #megaMenu ul.sub-menu.sub-menu-1 { border: 2px solid #af7817 !important; border: 0.125rem solid #af7817 !important; } problems with jumping perhaps partially caused by this adding width */ ul.sub-menu a .wpmega-link-title { color: #d7b270 !important; } ul.sub-menu a:hover .wpmega-link-title { color: #af7817 !important; } div.wpmega-widgetarea a { color: #d7b270; } /* div.wpmega-widgetarea a:hover { color: #af7817; } */ #megaMenu ul.megaMenu ul.sub-menu .wpmega-postlist a { color:#d7b270; } .wpmega-widgetarea h2.widgettitle, .wpmega-widgetarea h2.widgettitle a { font-size: 14px !important; font-size: 0.875rem !important; color: #d7b270; /* headings and links in widget area */ } .wpmega-widgetarea a { color: #d7b270 !important; } .wpmega-widgetarea a:hover { color: #af7817 !important; } .wpmega-widgetarea .social { float: left; margin: 0 8px !important; margin: 0 0.5rem !important; } .wpmega-widgetarea img { border: none !important; height: auto !important; } .wpmega-widgetarea .wpmega-postlist img { padding: 0 8px 0 0 !important; padding: 0 0.5rem 0 0 !important; width: 30% !important; } li div.wpmega-postlist-title { border: 0 !important; padding: 0 !important; } ul.wpmega-postlist li { list-style-type: none; } /* ============================ */ /* other plugins are above, 13a */ /* ============================ */