/* Theme Name: tiny-framework-child-full-width Theme URI: http://nvrc.org/tiny-framework-child-full-width/ Description: tiny-framework-child-full-width Author: JBG Author URI: http://nvrc.org Template: tiny-framework Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: tiny-framework-child-full-width */ /* 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: #000000 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 * * ---------------------------------------------------------------------------- */ /* 2.0 Typography -------------------------------------------------------------- */ blockquote, blockquote p:first-child:before { color: #010101; } /* 2.0 Typography -------------------------------------------------------------- */ /* Tip22 - Improve font rendering and fallback in Linux - http://www.onedesigns.com/tutorials/font-families-for-cross-compatible-typography */ body, button, input, select, textarea { color: #010101; /* Improving font rendering in Linux, in case default Open Sans font is disabled */ font-family: Verdana, Geneva, "DejaVu Sans", sans-serif; font-size: 16px; font-size: 1rem; line-height: 1.8; /* original: 1.714285714 */ text-rendering: optimizeLegibility; } body.custom-font-enabled { /* Improving font fallback in Linux */ font-family: "Open Sans", Verdana, Geneva, "DejaVu Sans", sans-serif; } h1, h2, h3, h4, h5, h6 { clear: both; font-weight: bold; margin: 0; text-align: left; } cite, dfn, em, i { font-style: italic; } /* Also check rtl.css in case you need to adjust blockquote styles for rtl language */ blockquote { color: #010101; font-size: 20px; font-size: 1.25rem; line-height: 1.6; margin: 12px 0 24px 48px; margin: 0.75rem 0 1.5rem 3rem; padding: 0; } /* Tip21 - Icon webfont support implementation and examples */ blockquote p:first-child:before { color: #010101; content: "\f10d"; /* fa-quote-left */ font: normal 36px/1 "FontAwesome"; margin-left: -48px; margin-left: -3rem; padding-right: 12px; padding-right: 0.75rem; vertical-align: bottom; } .comment-content blockquote { color: #010101; font-size: 16px; font-size: 1rem; line-height: 1.667; margin: 12px 0 12px 34px; margin: 0.75rem 0 0.75rem 2.125rem; } .comment-content blockquote p:first-child:before { color: #8f8f8f; font: normal 24px/1 "FontAwesome"; margin-left: -34px; margin-left: -2.125rem; } blockquote p { margin-bottom: 12px; margin-bottom: 0.75rem; } blockquote > p:last-child { margin-bottom: 0; } blockquote cite, blockquote small { font-size: 75%; line-height: 1.6; } blockquote cite, blockquote em, blockquote i { font-style: italic; } blockquote cite { display: block; margin-top: 2px; margin-top: 0.125rem; text-align: right; } /* 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 */ /* blockquote cite:before { content: "\2012\00a0"; } */ blockquote b, blockquote strong { font-weight: bold; } address { font-style: italic; margin: 0 0 24px; margin: 0 0 1.5rem; } code, kbd, pre, samp, tt, var { font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } code { background-color: #f7f7f9; border: 1px solid #e1e1e8; border-radius: 4px; color: #dd1144; font-size: 13px; font-size: 0.8125rem; padding: 2px 4px; padding: 0.125rem 0.25rem; white-space: pre; white-space: pre-wrap; } pre { background-color: transparent; line-height: 1.2; margin: 24px 0; margin: 1.5rem 0; max-width: 100%; overflow: auto; white-space: pre; white-space: pre-wrap; word-break: break-all; } pre code { background-color: #f7f7f9; border: 1px solid #e1e1e8; color: inherit; display: block; line-height: 2; padding: 24px; padding: 1.5rem; word-break: normal; } abbr[title], acronym, dfn { border-bottom: 1px dotted #777; cursor: help; } ins, mark { background-color: #fff9c0; text-decoration: none; } small { font-size: 75%; } big { font-size: 125%; } /* 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 */ blockquote cite:before { content: "\2012\00a0"; } /* Tip38 - Overhanging/Pull Quotes */ blockquote.aligncenter { margin-left: 48px; margin-left: 3rem; } blockquote.alignleft, blockquote.alignright { text-align: left; } blockquote.alignleft { margin-right: 48px; margin-right: 3rem; } blockquote.alignright { margin-left: 72px; margin-left: 4.5rem; } /* 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$=doc]:before, .content-area a[href$=docx]:before { color: #2a5699; content: "\f1c2"; } .content-area a[href$=pdf]:before { color: #bb0706; content: "\f1c1"; } .content-area a[href$=ppt]:before, .content-area a[href$=pptx]:before { color: #d24625; content: "\f1c4"; } .content-area a[href$=xls]:before, .content-area a[href$=xlsx]:before { color: #207245; content: "\f1c3"; } .content-area a[href$=gz]:before, .content-area a[href$=rar]:before, .content-area a[href$=zip]:before { color: #428f27; content: "\f1c6"; } */ /* Do not add file type icon to buttons */ /* .content-area a.btn[href$=gz]:before, .content-area a.btn[href$=doc]:before, .content-area a.btn[href$=docx]:before, .content-area a.btn[href$=pdf]:before, .content-area a.btn[href$=ppt]:before, .content-area a.btn[href$=pptx]:before, .content-area a.btn[href$=rar]:before, .content-area a.btn[href$=xls]:before, .content-area a.btn[href$=xlsx]:before, .content-area a.btn[href$=zip]:before { content: none; } */ #site-admin-link { display: none; } /* REMOVE Page Titles by Post IDs -------------------------------------------------------------- */ #post-7663 .entry-title{ display: none; } #post-2 .entry-title{ display: none; } #post-8089 .entry-title{ display: none; } #post-20681 .entry-title{ display: none; } #post-21540 .entry-title{ display: none; } #post-10407 .entry-title{ display: 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; } /* 4.3 Twitter Bootstrap style buttons */ /* 5.0 Navigation -------------------------------------------------------------- */ /* 5.1 Links */ /* 5.2 Menus */ /* Small (mobile) menu */ /* Tip10 - Add Twenty Thirteen search form to WordPress nav menu. * All code is already in parent theme, use this in case you need to change something. */ /* .menu-item.menu-item-search { float: right; margin: 14px 0 0 0; margin: 0.25rem 0 0 0; } .site-header input[type="search"] { padding-right: 2px; padding-right: 0.125rem; 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-color: transparent; background-image: url(images/icon-search.png); background-position: 5px center; background-repeat: no-repeat; background-size: 24px 24px; border: none; cursor: pointer; height: 30px; 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-color: #f5f5f5; border: 1px solid #bbb; box-shadow: none; cursor: text; outline: 0; width: 230px; width: 16.428571429rem; } .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; } /* Tip85 - Add Social Media Menu. Read more: http://justintadlock.com/archives/2013/08/14/social-nav-menus-part-2 */ .social-navigation ul { list-style: none; text-align: center; text-align: right; } .social-navigation ul li { display: inline; margin: 0 0 0 16px; margin: 0 0 0 1rem; } .social-navigation ul li:first-child { margin: 0; } .social-navigation a { position: relative; text-decoration: none; } .social-navigation a:focus:before, .social-navigation a:hover:before { opacity: 0.50; } .social-navigation a:before { color: #000; content: "\f1e0"; /* mark unsupported links with generic "share" icon */ font-size: 36px; font-size: 2.25rem; line-height: 1.1; } .social-navigation a[href^="mailto:"]:before { content: "\f003"; color: #FFFFFF; } .social-navigation a[href*="behance.net"]:before { content: "\f1b4"; color: #000; } .social-navigation a[href*="codepen.io"]:before { content: "\f1cb"; color: #000; } .social-navigation a[href*="digg.com"]:before { content: "\f1a6"; color: #000; } .social-navigation a[href*="dribbble.com"]:before { content: "\f17d"; color: #ea4c89; } .social-navigation a[href*="dropbox.com"]:before { content: "\f16b"; color: #007ee5; } .social-navigation a[href*="facebook.com"]:before { content: "\f082"; color: #FFFFFF; } .social-navigation a[href*="flickr.com"]:before { content: "\f16e"; color: #ff0084; } .social-navigation a[href*="foursquare.com"]:before { content: "\f180"; color: #f84777; } .social-navigation a[href*="plus.google.com"]:before { content: "\f0d4"; color: #dd4b39; } .social-navigation a[href*="github.com"]:before { content: "\f09b"; color: #4183c4; } .social-navigation a[href*="instagram.com"]:before { content: "\f16d"; color: #FFFFFF; } .social-navigation a[href*="last.fm"]:before { content: "\f202"; color: #d51007; } .social-navigation a[href*="linkedin.com"]:before { content: "\f08c"; color: #0e76a8; } .social-navigation a[href*="ok.ru"]:before { content: "\f263"; color: #f58220; } .social-navigation a[href*="odnoklassniki.ru"]:before { content: "\f263"; color: #f58220; } .social-navigation a[href*="pinterest.com"]:before { content: "\f0d2"; color: #FFFFFF; } /* .social-navigation a[href*="polldaddy.com"]:before { content: "\f"; color: #bc0b0b; } */ .social-navigation a[href*="getpocket.com"]:before { content: "\f265"; color: #ee4056; } .social-navigation a[href*="reddit.com"]:before { content: "\f1a1"; color: #336699; } .social-navigation a[href*="skype.com"]:before, .social-navigation a[href*="skype:"]:before { content: "\f17e"; color: #00aff0; } .social-navigation a[href*="soundcloud.com"]:before { content: "\f1be"; color: #ff4700; } .social-navigation a[href*="spotify.com"]:before { content: "\f1bc"; color: #a9d03f; } .social-navigation a[href*="stumbleupon.com"]:before { content: "\f1a4"; color: #ff2618; } .social-navigation a[href*="tumblr.com"]:before { content: "\f173"; color: #34526f; } .social-navigation a[href*="twitch.tv"]:before { content: "\f1e8"; color: #6542a6; } .social-navigation a[href*="twitter.com"]:before { content: "\f099"; color: #FFFFFF; } .social-navigation a[href*="vimeo.com"]:before { content: "\f194"; color: #1ab7ea; } .social-navigation a[href*="vk.com"]:before { content: "\f189"; color: #4c75a3; } .social-navigation a[href*="wordpress.org"]:before, .social-navigation a[href*="wordpress.com"]:before { content: "\f19a"; color: #21759b; } .social-navigation a[href*="xing.com"]:before { content: "\f168"; color: #015a60; } .social-navigation a[href*="youtube.com"]:before { content: "\f167"; color: #FFFFFF; } .social-navigation a[href$="/feed/"]:before { content: "\f143"; 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: 16px; font-size: 1rem; /* 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: #848485; } .widget-area .widget a:active.social-link, .widget-area .widget a:active .social-link, .widget-area .widget a:hover.social-link, .widget-area .widget a:hover .social-link { color: #848485; } /* 5.3 Post, archive navigation */ /* Tip27 - Uncomment next code line to disable "previous article - next article" navigation below the content of a post DONE JBG */ .post-navigation { display: none; } /* Tip88 - Customize color scheme: Navigation links for archive and single views (Previous, Next page of articles and article) */ /* .nav-links a, .nav-links a:visited { color: #b076ff; -webkit-tap-highlight-color: rgba(176, 118, 255, 1); } .nav-links a:focus { background-color: #b076ff; color: #fff; } */ /* 6.0 Accessibility -------------------------------------------------------------- */ /* Text meant only for screen readers */ /* 7.0 Alignments -------------------------------------------------------------- */ /* 8.0 Clearings -------------------------------------------------------------- */ /* 9.0 Widgets -------------------------------------------------------------- */ /* Sidebar and Front Page template widgets get top border in mobile view */ #secondary { border-top:0px solid #FF0004; margin: 72px auto 48px auto; margin: 4.5rem auto 3rem auto; padding: 24px 0 0 0; padding: 1.5rem 0 0 0; } /* 9.1 General widget styles - Footer Wdgets*/ .widget-title { color: #FFFFFF; font-size: 16px; font-size: 1rem; font-weight: normal; line-height: 1; text-transform: capitalize; /* Experimenting with text outline for better accessibility in text of light color */ /* text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000; */ } /* hyphens auto to none*/ .widget-area .widget { color: #848485; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; margin-bottom: 16px; margin-bottom: 1rem; } .widget-area .widget p:first-child { margin-top: 0; /* remove top margin of the first paragraph, when "Automatically add paragraphs" is selected for the Text widget */ } .widget-area .widget a, .widget-area .widget a:visited { color: #192BB3; text-decoration: none; } .widget-area .widget a:active, .widget-area .widget a:focus, .widget-area .widget a:hover { color: #192BB3; text-decoration: underline; } /* Protecting select field from overflow */ .widget-area .widget option, .widget-area .widget select { max-width: 100%; overflow: hidden; width: auto; } .widget-area .widget h3 { margin-bottom: 16px; margin-bottom: 1rem; } .widget-area .widget li, .widget-area .widget p { font-size: 14px; font-size: 0.875rem; } .widget-area .widget li { color: #FFFFFF; list-style-type: none; } .widget-area .widget p { margin-bottom: 16px; margin-bottom: 1rem; } .widget-area .widget ul li { text-indent: 0; /* Because of the default icon webfont ul formatting */ } .widget-area .widget ul ul { margin-left: 12px; margin-left: 0.75rem; } /* 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_recent_entries li { margin-bottom: 12px; margin-bottom: 0.75rem; } */ /* Styles for Categories and Pages widgets */ /* 9.3 Footer widget styles */ /* Four footer widget areas. Additional styles at 15.0 Media queries */ /* Tip88 - Customize color scheme: Footer link colors. This example is suited for dark footer. */ .site-footer, .site-footer .widget-area .widget { color: #FFFFFF; } #copyright-widget a, #copyright-widget a:visited, #footer-widgets a, #footer-widgets a:visited { color: #FFFFFF; text-decoration: underline; } #copyright-widget a:active, #copyright-widget a:hover, #footer-widgets a:active, #footer-widgets a:hover { color: #CACAF9; text-decoration: none; } /* 10.0 Header -------------------------------------------------------------- */ /* 10.1 Site Header */ /* Tip06 - Custom headers for posts and pages. Uncomment following CSS rules to disable shadow on main header: */ img.header-image, img.wp-post-image.attachment-custom-header-image-large { box-shadow: none; } .site-header { padding: 0px 0px 0px 0px; padding: 0rem 0rem 0rem 0rem; } /* 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 a { color: #515151; } .site-header .site-description a:hover, .site-header .site-title a:hover { color: #ff6111; } .site-header .site-description { color: #757575; font-size: 13px; font-size: 0.8125rem; font-weight: normal; } .site-header .site-title { color: #515151; font-size: 24px; font-size: 1.5rem; font-weight: bold; line-height: 1.285714286; } */ /* Tip14 - Custom logo feature support. Check: inc/template-tags.php for more details. */ /* Enable custom logo in mobile view */ .site-logo-link, /* deprecated */ .custom-logo-link { /* Semi-transparent background: */ /* background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.8); */ display: block; /* In case you want to hide logo in mobile view: */ /* display: none; */ left: 0%; padding: 12px; padding: 0.75rem; position: absolute; top: 5%; z-index: 100; } /* In case your logo is a bit higher, you might need to adjust the padding for site title: */ /* #site-title-wrapper { padding: 18px 0 0 0; padding: 1.125rem 0 0 0; } */ /* Make theme admin-bar-aware */ .site-logo-link, /* deprecated */ .custom-logo-link { top: 10%; } img.header-image, img.wp-post-image.attachment-custom-header-image-large { border-radius: 0; margin-bottom: 0px; margin-bottom: 0rem; margin-top: -6px; margin-top: -0.375rem; } /* 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 img.wp-post-image.attachment-custom-header-image-large { display: none; } */ /* 11.0 Content -------------------------------------------------------------- */ .site { background-color: #FFFFFF; } .list-view .content-area article, .singular .content-area article { background: #FFFFFF; /* Old browsers */ /* IE10 Consumer Preview */ background-image: -ms-radial-gradient(center bottom, circle closest-corner, #fbfbfb 0%, #ffffff 100%); /* Mozilla Firefox */ background-image: -moz-radial-gradient(center bottom, circle closest-corner, #fbfbfb 0%, #ffffff 100%); /* Opera */ background-image: -o-radial-gradient(center bottom, circle closest-corner, #fbfbfb 0%, #ffffff 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(radial, center bottom, 0, center bottom, 487, color-stop(0, #fbfbfb), color-stop(1, #ffffff)); /* Webkit (Chrome 11+) */ background-image: -webkit-radial-gradient(center bottom, circle closest-corner, #fbfbfb 0%, #ffffff 100%); /* W3C Markup, IE10 Release Preview */ background-image: radial-gradient(circle closest-corner at center bottom, #fbfbfb 0%, #ffffff 100%); } /* 11.1 Posts and pages */ .entry-header .entry-title { clear: none; } /* Tip88 - Customize color scheme: Entry Title */ .entry-header .entry-title, .entry-header .entry-title a { color: #192BB3; /* 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); */ } .singular .entry-content { margin-right: 0; } /* Tip25b - Disable special icons, that marks the links that will open in a new window */ .entry-content .fa-external-link { display: none; } /* Tip26b - Comment out next CSS rule to Print HTML bellow post title with meta information (date/time and author) * for the index/archive views in MOBILE view. */ /* .archive .entry-header .entry-meta, .home .entry-header .entry-meta { display: block; } */ /* 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; } */ /* 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: none; } /* 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; } */ /* Tip41 - Display the optional excerpt (subtitle) below the entry title. To enable subtitles, uncomment next rule here or paste it in custom CSS plugin. */ /* body .entry-summary-top { display: block; } */ /* Tip88 - Customize color scheme: Styles for page titles for categories, tags, etc. */ .page-title { color: #646465 ; font-size: 27px; font-size: 1.6875rem; font-weight: normal; line-height: 1; text-transform: capitalize; padding: 0px 0px 0px 0px; padding: 0rem 0rem 0rem 0rem; } /* Entry-meta for specific post formats */ /* Author profiles */ /* 11.2 Post Formats */ /* 11.3 Comments */ /* Comment form */ /* 11.4 Page templates */ /* Front page template */ .template-front-page .page .entry-content { font-size: 16px; font-size: 1rem; padding: 0px 0px 0px 0px; padding: 0rem 0rem 0rem 0rem; } /* Links (blogroll) template */ /* 12.0 Footer -------------------------------------------------------------- */ .site-footer { /* Tip88 - Customize color scheme: Styles for footer background */ background: #1999d6; margin-top: 5px; margin-top: 0.3125rem; padding: 0 24px 24px 24px; padding: 0 1.5rem 1.5rem 1.5rem; } /* Tip88 - Customize color scheme: Styles for footer links */ /* .site-footer a, .site-footer a:visited { color: #fff; text-decoration: underline; } .site-footer a:active, .site-footer a:hover { color: #ffff00; text-decoration: none; } .site-info-2 a, .site-info-2 a:visited { color: #fff; text-decoration: none; } #site-admin-link a, #site-admin-link a:visited { border: 1px solid #fff; color: #fff; } #site-admin-link a:active, #site-admin-link a:focus, #site-admin-link a:hover { background-color: #555; border: 1px solid #555; color: #fff; } */ .site-info { max-width: 800px; max-width: 50rem; } /* 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. */ .comment-content .wp-smiley, .entry-content .wp-smiley, .page-content .wp-smiley { height: 1.2em!important; max-height: 1.2em!important; max-width: 1.2em!important; width: 1.2em!important; } /* 13.1 Images */ /* Responsive images */ /* 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 */ /* 13.3 Galleries */ /* 14.0 Other styles -------------------------------------------------------------- */ /* 14.1 Twitter Bootstrap style alerts. Usage: http://getbootstrap.com/components/#alerts */ /* 14.2 Misc. styles */ /* Plugins */ /* Language specific styles */ html:lang(lt-LT) .entry-date { text-transform: capitalize; } /* 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: #1999d6; color: #ffff; font: 16px/16px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bolder; padding: 10px 16px 10px 16px; padding: .625rem 1rem .625rem 1rem; } .site-header .menu-toggle:focus, .site-header .menu-toggle:hover { background: #192BB3; } .site-header .menu-toggle:before { content: "\2261"; font-size: 20px; font-size: 1.25rem; margin-right: 7px; margin-right: 0.4375rem; } .main-navigation.toggled .menu-toggle { background: #1999d6; } .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: #848485 ; } .main-navigation.toggled ul > .current_page_item > a, .main-navigation.toggled ul > .current-menu-item > a { background: #1999d6 ; } } /* 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) { /* Tip52 - Adjust default site layout for normal view */ .content-area { float: left; width: 75%; } .site-content .widget-area { float: right; width: 25%; } /* Tip52b - Change site layout (position of sidebar) for normal view */ .content-area { float: right; width: 75%; } .site-content .widget-area { float: left; width: 25%; } .site-branding { background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.0); display: block; left: 6%; padding: 8px 5px 15px 5px; padding: 1.125rem 1.5rem 1.5rem 1.5rem; position: absolute; top: 1%; z-index: 100; } /* Make theme admin-bar-aware */ body.admin-bar .site-branding { top: 5%; } /* Tip14 - Custom logo feature support. Check: inc/template-tags.php for more details. */ .site-logo-link, /* deprecated */ .custom-logo-link { background: none; border-right: 0px solid #192BB3; display: block; /* float: left; */ margin: 0 24px 16px 0; margin: 0 1.5rem 1rem 0; padding: 0 24px 0 0; padding: 0 1.5rem 0 0; position: relative; } .custom-logo { } .has-site-logo #site-title-wrapper, /* deprecated */ .wp-custom-logo #site-title-wrapper { margin-top: 4px; margin-top: 0.25rem; } /* 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; } */ /* Show top menu search in child themes for the full menu */ .menu-item.menu-item-search { display: inline; } img.header-image, img.wp-post-image.attachment-custom-header-image-large { margin-top: 0; } .entry-header .entry-title { font-size: 22px; font-size: 1.375rem; font-weight: bold; line-height: 1.45; padding: 0px 0px 0px 0px; padding: 0rem 0rem 0rem 0rem; } .singular .entry-header .entry-title { font-size: 27px; font-size: 1.6875rem; font-weight: normal; line-height: 1.4; } /* Tip88 - Customize color scheme: Entry Title */ .entry-header .entry-title, .entry-header .entry-title a { color: #192BB3; /* 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); */ } .archive .entry-header .entry-meta, .home .entry-header .entry-meta { 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 NORMAL view. */ /* .archive .entry-header .entry-meta, .home .entry-header .entry-meta { display: block; } */ .site-footer { background: #1999d6; margin-top: 5px; margin-top: 0.3125rem; max-width: 100%; padding: 0 24px 32px 24px; padding: 0 1.5rem 2rem 1.5rem; } #footer-container { margin-left: auto; margin-right: auto; max-width: 960px; max-width: 60rem; padding: 12px 0 24px 0; padding: 0.75rem 0 1.5rem 0; } /* 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: #192BB3; font-size: 14px; font-size: 0.875rem; line-height: 1.4; } /* 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; } /* Tip38 - Overhanging/Pull Quotes */ .entry-content blockquote.alignleft p:first-child:before, .entry-content blockquote.alignright p:first-child:before { content: none; } .entry-content blockquote.alignleft p:last-child, .entry-content blockquote.alignright p:last-child { margin-bottom: 0; } .entry-content blockquote.alignleft, .entry-content blockquote.alignright { border-color: #192BB3; border-style: solid; border-width: 4px 0 0 0; padding: 24px 0; padding: 1.5rem 0; width: -webkit-calc(50% - 0.736842105rem); width: calc(50% - 0.736842105rem); } .entry-content blockquote.alignleft { margin-left: 0; margin-right: 9.06666667%; } .entry-content blockquote.alignright { margin-left: 9.06666667%; margin-right: 0; } /* Adjust positioning of edit shortcuts, override style in customize-preview.css */ body.customize-partial-edit-shortcuts-shown .site-header .main-navigation .customize-partial-edit-shortcut button { left: 10px; top: 7px; } } /* END of @media screen and (min-width: 783px) */ /* 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) { body { background-color: #fff; } body .site, body.custom-background-empty .site, body.custom-background-white .site { box-shadow: none; margin-bottom: 0; margin-top: -4px; margin-top: -0.25rem; padding-top: 12px; padding-top: 0.75rem; } .main-navigation { /* Tip88 - Customize color scheme: */ background: none repeat scroll 0% 0% rgba(255,255,255,.95); /* The Fallback */ /* rgb(34, 34, 34) */ /* background: rgba(255, 255, 255, 0.9); */ /* make background transparent */ /* background: none repeat scroll 0% 0% #3b3b3b; */ /* make background dark */ border-bottom: 0px solid rgba(25,153,214,1.00); /* border-bottom: 3px solid #2a2a2a; */ /* make border dark */ box-shadow: 0px -4px 0px rgba(0, 0, 0, 0.0); clear: both; display: block; height: 40px; left: 0px; margin-top: 0; position: fixed; top: 0px; width: 100%; z-index: 300; } /* Tip05 - Mark main navigation menu items, containing children with special css class * Main navigation menu items with drop-down children will be marked by a distinct icon (caret down) via style.css * @link https://stackoverflow.com/questions/8448978/wordpress-how-do-i-know-if-a-menu-item-has-children * * Because in full width theme menu is positioned on the right side, we are making submenus to appear on the left side, to * prevent submenu items being hidden behind the viewport. */ .sub-menu .menu-item-has-children > a:after, .sub-menu .page_item_has_children > a:after { content: "\f053"; /* fa-chevron-left */ } .main-navigation li ul ul { left: auto; right: 100%; } .main-navigation li ul ul li { margin: 0 0 0 16px; margin: 0 0 0 1rem; } /* Adding shadow for the drop down menu items */ .main-navigation ul.nav-menu ul.sub-menu li { box-shadow: -none; } /* Tip88 - Customize color scheme: Main menu link colors. */ .main-navigation li a { color: #192BB3; } .main-navigation li a:focus, .main-navigation li a:hover { color: #848485 ; } .main-navigation li ul li a { background: #D6D6FF; border-bottom: 3px solid #192BB3; } .main-navigation li ul li a:focus, .main-navigation li ul li a:hover { background: #F6F6F6; color: #848485 ; } .main-navigation .current-menu-ancestor > a, .main-navigation .current-menu-item > a, .main-navigation .current_page_ancestor > a, .main-navigation .current_page_item > a { color: #192BB3; } /* Make theme admin-bar-aware */ body.admin-bar .main-navigation { margin-top: 32px; margin-top: 2rem; } .main-navigation div.nav-menu > ul, .main-navigation ul.nav-menu { border-bottom: 3px; border-top: 0px solid #bbb; } .main-navigation ul.nav-menu { text-align: center; } .main-navigation ul.nav-menu ul.sub-menu { text-align: left; } /* Tip10 - Add Twenty Thirteen search form to WordPress nav menu */ .menu-item.menu-item-search { float: right; margin: 5px 16px 0 0; margin: 0.3125rem 1rem 0 0; } .site-branding { left: 0%; top: 7%; } /* Make theme admin-bar-aware */ body.admin-bar .site-branding { top: 14%; } /* Tip88 - Customize color scheme: Main menu search icon color. If using dark top menu bar, enable this to make search icon more prominent. */ /* .site-header .search-form [type="search"], .site-header .search-form [type="text"] { background-image: url(images/icon-search-white.png); } .site-header .search-form [type="search"]:focus, .site-header .search-form [type="text"]:focus { background-image: url(images/icon-search.png); } */ /* Tip06 - Custom headers for posts and pages */ img.header-image, img.wp-post-image.attachment-custom-header-image-large { /* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */ border-radius: 0; /* Uncomment following line to disable border and shadow on main header: */ box-shadow: none; height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */ margin-bottom: 0; margin-bottom: 0rem; margin-top: 44px; margin-top: 2.75rem; width: 100%; } /* Make theme admin-bar-aware */ body.admin-bar img.header-image, body.admin-bar img.wp-post-image.attachment-custom-header-image-large { margin-top: 46px; margin-top: 2.875rem; } .header-image-no .content-area { margin: 72px 0 0; margin: 4.5rem 0 0; } } /* END of @media screen and (min-width: 1100px) */ /* 15.3 Minimum width of 1240 pixels (big screens - widescreen monitors, high resolution tablets) */ @media screen and (min-width: 1240px) { /* Tip38 - Overhanging/Pull Quotes */ .entry-content blockquote.alignleft { margin-left: -18.16666667%; margin-right: 9.06666667%; width: -webkit-calc(60% - 1.4736842105rem); width: calc(60% - 1.4736842105rem); } body.full-width .entry-content blockquote.alignleft { margin-left: 0; } .entry-content blockquote.aligncenter { margin-left: -66px; margin-left: -4.125rem; margin-right: 0; max-width: 700px !important; max-width: 43.75rem !important; } .entry-content blockquote.alignright { /* Uncomment next line if you want a blockquote to go outside of the right entry content boundaries. Make sure you don't have very long sidebar that could collide with the blockquote. */ margin-left: 9.06666667%; /* margin-right: -18.16666667%; */ width: -webkit-calc(50% - 0.736842105rem); width: calc(50% - 0.736842105rem); } /* Tip39 - Overhanging Images. */ body:not(.search-results) .type-post .caption-big, body:not(.search-results) .type-post .size-big { clear: both; display: block; float: none; margin-left: -17%; margin-right: 0; max-width: 117%; } body:not(.search-results) .type-post .caption-big .size-big, body:not(.search-results) .type-post table .caption-big, body:not(.search-results) .type-post table .caption-big .wp-caption-text, body:not(.search-results) .type-post table .size-big { margin: 0 !important; max-width: 100% !important; } } /* END of @media screen and (min-width: 1240px) */ /* 15.3b Minimum width of 1403 pixels (very big screens - widescreen monitors, high resolution tablets) */ @media screen and (min-width: 1403px) { /* Tip39 - Overhanging Images. */ body:not(.search-results) .type-post .caption-big, body:not(.search-results) .type-post .size-big { margin-left: -30%; max-width: 130%; } } /* END of @media screen and (min-width: 1403px) */ /* 15.3c Minimum width of 1600 pixels (very big screens - widescreen monitors, high resolution tablets) */ @media screen and (min-width: 1600px) { /* Tip39 - Overhanging Images. */ body:not(.search-results) .type-post .caption-big, body:not(.search-results) .type-post .size-big { margin-left: -45%; max-width: 145%; } } /* END of @media screen and (min-width: 1600px) */ /* 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 */ } /* NVRC CSS (Bruce) ----------------------------------------------- */ /* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */ /* footer menu text*/ .widget-area .widget_categories ul li, .widget-area .widget_nav_menu ul li { font-size: 14px; font-size: .875rem; text-transform: capitalize; } .widget img { border-radius: 0px; box-shadow: none; } .avatar { /* to fix cutt-off border shadow */ margin: 0 0 4px 4px; margin: 0 0 0.25rem 0.25rem; } .comment .avatar { border: 0; border-radius: 0; box-shadow: none; margin: 0px; } a { color: #192BB3; } a:visited { color: #195AB3; } a:active, a:focus, a:hover { color: #848485 ; text-decoration: none; } a:active, a:hover { outline: 0; } img.no-border { border: none; border-radius: 0; box-shadow: none; } code { background-color: #f7f7f9; border: 0px solid #e1e1e8; border-radius: 4px; color: #848485 ; font-size: 13px; font-size: 0.8125rem; padding: 2px 4px; padding: 0.125rem 0.25rem; white-space: pre; white-space: pre-wrap; } .gallery .gallery-icon img { border: 0px solid #fff; margin: 5px 3px 7px 3px; margin: 0.3125rem 0.1875rem 0.4375rem 0.1875rem; max-width: 100%; vertical-align: middle; } #site-admin-link a, #site-admin-link a:visited { border: 0px solid #747474; color: #747474; padding: 0 2px 1px 2px; padding: 0 0.125rem 0.0625rem 0.125rem; text-decoration: none; } .entry-content .page-links a, .entry-content .page-links > span { border: 1px solid #eaeaea; border: 1px solid rgba(51, 51, 51, 0.1); display: inline-block; font-size: 13px; font-size: 0.8125rem; height: 1.75rem; line-height: 2; margin: 0 14px 5px 0; margin: 0 0.875rem 0.3125rem 0; text-align: center; width: 1.75rem; } hr { background-color: #8787BC; border: 0; height: 2px; margin-bottom: 12px; margin-bottom: 1.5rem; } table, td, th { border: 0px solid #ccc; } /* Frontpage Table 1*/ .divTable{ display: table; text-align: center; width: 100%; } .divTableRow { display: table-row; text-align: center; } .divTableHeading { background-color: #D0F1F7; display: table-header-group; } .divTableCell, .divTableHead { background-color: #D0F1F7; border: 0px solid #FFFFFF; display: table-cell; text-align: center; padding: 3px 10px; } .divTableHeading { background-color: #192BB3; display: table-header-group; font-weight: bold; } .divTableFoot { background-color: #192BB3; display: table-footer-group; font-weight: bold; } .divTableBody { display: table-row-group; text-align: center; } center-icon .fontawesome-icon /* Frontpage Table 2*/ div.frontpage { width: 100%; text-align: center; border-collapse: collapse; } .divTable.frontpage .divTableCell, .divTable.frontpage .divTableHead { padding: 3px 2px; } /* Frontpage2 */ .divTable{ display: table; } .divTableRow { display: table-row; } .divTableHeading { display: table-header-group;} .divTableCell, .divTableHead { display: table-cell;} .divTableHeading { display: table-header-group;} .divTableFoot { display: table-footer-group;} .divTableBody { display: table-row-group;} /* 16.0 Print ----------------------------------------------- */ @media print { /* Here you can add specific styles for the printing */ /* 16.1 Comments */ }