/* Theme Name: Origami Theme URI: https://siteorigin.com/theme/origami Description: Origami is a simple, responsive media blogging theme that places strong emphasis on your content. It looks great on mobile devices, even the videos and galleries scale to fit small screens. The options panel is easy to understand with a minimal set of options. Origami includes a powerful drag and drop page builder for creating unlimited page layouts. So you can use Origami as a standard photography blog or a complete business website. We offer free and premium support on our support forums (http://siteorigin.com/thread/). Tags: custom-background, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, theme-options, threaded-comments, translation-ready, blog, photography, portfolio Author: SiteOrigin Author URI: https://siteorigin.com/ Version: 1.7.7 License: GPL v2.0 License URI: license.txt Text Domain: origami */ /** * #.# Reset */ 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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; -webkit-text-size-adjust: none; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after { content: ""; } q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /** * #.# General */ body { font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; font-size: 13px; font-weight: 400; } .container { width: 100%; margin: 0 auto; max-width: 1024px; padding: 0 15px; box-sizing: border-box; } .clear { clear: both; } .clearfix { display: inline-block; } .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } /** * #.# Page */ /* This is the main page frame */ #page-container { width: 100%; background: #fdfdfd; padding: 2.25% 4.5%; margin: 30px 0 35px 0; box-sizing: border-box; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 0 2px rgba(0, 0, 0, 0.1125); border: 1px solid #cbc9c7; } /** * #.# Logo */ #logo { position: relative; margin: 20px 0 25px 0; } #logo.logo-centered { text-align: center; } #logo a.logo-link { text-decoration: none; } #logo h1 { display: inline-block; color: #555; font-family: "Terminal Dosis", Arial, Helvetica, Geneva, sans-serif; font-size: 52px; font-weight: 200; margin-bottom: 0.2em; } #logo h3 { display: inline-block; color: #666; font-size: 13px; } #logo img { max-width: 100%; height: auto; } #logo #searchform { position: absolute; top: 50%; right: 0; margin-top: -12px; } #logo #searchform label, #logo #searchform #searchsubmit { display: none; } #logo #searchform #s { width: 28px; padding: 4px; border: 1px solid #EEEEEE; border-width: 0 0 1px 0; font-size: 0.9em; font-weight: 200; box-sizing: border-box; -webkit-transition: all 0.275s ease-in-out; -moz-transition: all 0.275s ease-in-out; transition: all 0.275s ease-in-out; background: #F9F9F9 url(images/mag.png) no-repeat 10px center; padding-left: 30px; color: #777; } #logo #searchform #s:focus { width: 180px; } /** * #.# Search Form */ @media screen and (max-width: 480px) { #logo #searchform { position: static; margin-top: 15px; } #logo #searchform #s { width: 100%; } #logo #searchform #s:focus { width: 100%; } } /** * #.# Main Menu */ #menu ul { display: block; padding: 0px; text-align: center; margin-bottom: 25px; border: 1px solid #EEEEEE; border-width: 1px 0; background: #F9F9F9; } #menu ul li { display: inline-block; padding: 22px 25px; position: relative; } #menu ul li a { text-decoration: none; font-size: 1em; color: #505050; } #menu ul li ul { visibility: hidden; display: block; position: absolute; background: #F5F5F5; z-index: 1010; top: 100%; left: 50%; width: 160px; margin-left: -80px; border-top: 1px solid #E4E4E4; background-color: #F4F4F4; border-color: #DDDDDD; box-sizing: border-box; } #menu ul li li ul { margin-left: 0; top: 0; left: 160px; } #menu ul li ul li a { display: block; color: #606060; font-size: 0.9em; } #menu ul ul li { width: 160px; text-align: center; padding: 10px 0; } #menu ul li:hover > ul { visibility: visible; display: block; } #menu .mobilenav-main-link { font-weight: 500; font-size: 14px; } #menu .mobilenav-main-link .mobile-nav-icon { font-family: origami-icons; color: #666666; font-size: 15px; display: block; float: left; width: 13px; height: 15px; margin: -1px 8px 0 0; } #menu .mobilenav-main-link .mobile-nav-icon:before { content: "\e601"; } /** * #.# Post */ .post { margin-bottom: 30px; } /** * #.# Entry Title */ h1.entry-title, h1.archive-title { font-size: 2.2em; margin: 1em 0 0.4em 0; text-align: center; color: #333; font-family: "Dosis", Arial, Helvetica, Geneva, sans-serif; font-size: 28px; font-weight: 200; line-height: 1.25em; } h1.entry-title.noinfo { margin-bottom: 30px; } h1.entry-title a { text-decoration: none; color: inherit; } .post:last-child { margin-bottom: 0; } .post .post-info { margin-bottom: 30px; text-align: center; color: #A6A6A6; font-size: 11.5px; } .post .post-info strong, .post .post-info a { font-weight: 500; text-decoration: none; color: #808080; } .post-navigation { margin-top: 15px; margin-bottom: 35px; } .post-navigation a { display: block; color: #505050; text-decoration: none; } .post-navigation a:hover { color: #333; } .post-navigation a[rel=prev] { float: left; } .post-navigation a[rel=next] { float: right; } @media screen and (max-width: 480px) { .post .content { -webkit-column-count: 1 !important; -moz-column-count: 1 !important; column-count: 1 !important; } } /** * #.# Featured Image */ .post .featured-image { position: relative; text-align: center; } .post img.main-image { max-width: 100%; height: auto; } .post img.main-image.mobile { display: none; } .post .below-content { color: #666; padding: 20px 10px; text-align: right; border-style: solid; background: #FAFAFA; margin-top: 30px; border: 1px solid #EEEEEE; border-width: 1px 0; background: #F9F9F9; } .post .below-content .origami-icon-tag { font-size: 19px; color: #999999; display: block; margin-top: -1px; margin-right: 6px; margin-left: 6px; float: left; } .post .below-content .origami-icon-more { font-size: 19px; color: #999999; display: block; margin-top: -1px; margin-right: 6px; margin-left: 6px; float: left; float: right; margin-top: -2px; } .post .below-content svg { fill: #999; } .post .below-content a { color: #666; text-decoration: none; font-style: italic; } .post .below-content p { height: 1em; line-height: 1; } .post .below-content .tags { float: left; } .post .below-content .tags .the_tags { display: inline; } .post .below-content .tags .the_tags a:last-child:after { content: ''; } .post .below-content .read-more { float: right; } .post .content { margin-bottom: 20px; color: #606060; font-size: 13px; } @media screen and (max-width: 480px) { .post img.main-image.mobile { display: block; } .post img.main-image.desktop { display: none; } } /** * #.# Content */ .content-columns-2 .content { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } .content-columns-3 .content { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } .content-columns-4 .content { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } /** * #.# WP Core */ .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 20px auto 20px auto; } .alignright { float: right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } .aligncenter { display: block; margin: 5px auto 5px auto; } a img.alignright { float: right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { background: #EFEFEF; border: 1px solid #C0C0C0; max-width: 100%; /* Image does not overflow the content area */ padding: 5px 3px 10px 3px; text-align: center; box-sizing: border-box; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25); } .wp-caption.alignnone, .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; } .wp-caption p.wp-caption-text { font-size: 11px; margin: 0; line-height: 1; padding: 4px 5px 0 5px; color: #666; font-style: italic; } .content { line-height: 1.6em; } .content *:first-child { margin-top: 0px; } .content *:last-child { margin-bottom: 0px; } .content ul { padding-left: 1em; margin-bottom: 1.5em; } .content a { color: #36659f; } .content p, .content ul, .content ol, .content dl { line-height: 1.6em; margin: 2em 0; } .content ul li { display: list-item; line-height: 1.75em; list-style: url(images/bullet.png); list-style-position: outside; } .content ol { list-style: outside decimal; padding-left: 2.5em; margin-bottom: 1.5em; } .content ol li { display: list-item; line-height: 1.75em; } .content ul ul, .content ol ol { margin-bottom: 0; } .content blockquote { padding: 1.5em 20px 1.5em 60px; font-style: italic; color: #666; position: relative; } .content blockquote cite { font-weight: bold; color: #333; } .content blockquote p:first-child { margin-top: 0; } .content blockquote p:last-child { margin-bottom: 0; } .content strong, .content b { font-weight: bold; } .content em, .content i { font-style: italic; } .content img { max-width: 100%; height: auto; } .content hr { border: 0px; border-top: 1px solid #CCC; } .content sup, .content sub { font-size: 10px; height: 0; line-height: 1; position: relative; vertical-align: baseline; } .content sup { bottom: 1ex; } .content sub { top: .5ex; } .content dl dt { font-weight: bold; } .content dl dd { padding-left: 1.5em; margin-bottom: 1.5em; } .content h1, .content h2, .content h3, .content h4, .content h5, .content h6, .content strong { color: #404040; margin: 1.5em 0; } .content h1 { font-size: 24px; } .content h2 { font-size: 20.4px; } .content h3 { font-size: 18.48px; } .content h4 { font-size: 16.32px; } .content h5 { font-size: 13.92px; } .content h6 { font-size: 12.48px; } .content table { width: 100%; margin: 1em 0; } .content th { font-size: 1.1em; font-weight: bold; padding: 8px; border-bottom: 3px solid #C0C0C0; } .content thead th { border-bottom: 3px solid #C0C0C0; } .content td { padding: 8px; } /* Text meant only for screen readers. */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; word-wrap: normal !important; width: 1px; } .screen-reader-text:focus { background-color: #f1f1f1; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #0073aa; display: block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 14px; font-weight: 600; height: auto; left: 6px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 7px; width: auto; z-index: 100000; } /** * #.# Comments */ #comments h3.comments-title { margin: 20px 0; font-size: 16px; font-weight: 400; color: #333; } /** * #.# Comments */ .comment { margin-bottom: 45px; } .comment .avatar-container { float: left; } .comment.depth-1 .avatar-container { line-height: 0; padding: 2px; border: 1px solid #E8E8E8; background: #F2F2F2; } .comment .comment-container { margin-left: 86px; } .comment .children { margin-top: 45px; margin-left: 86px; } .comment .children .comment .comment-container, .comment .children .children { margin-left: 71px; } .comment.type-pingback .comment-container { margin-left: 0; } /** * #.# Comment Style */ .comment-container .info { margin-bottom: 10px; color: #666; font-size: 12px; } .comment-reply-link { text-decoration: none; font-style: italic; } .comment-container .info .author { display: block; font-size: 13px; color: #444; margin-bottom: 0.5em; font-weight: bold; } .bypostauthor .info .author { font-style: italic; } .comment-container .info .author a { color: #444; } .comment-container .info .date { display: block; color: #888; margin-bottom: 1em; } .comment-container a.comment-reply-link { font-size: 11px; margin: 2px 0; display: block; float: right; color: #666; text-decoration: none; font-style: italic; } /** * #.# Respond */ #comments .commentlist #respond { /* Style comment for when replying to another post */ border: 1px solid #EEEEEE; margin-bottom: 45px; padding: 30px; background: #F9F9F9; margin-left: 86px; } #comments .commentlist .children #respond { margin-left: 71px; } #respond #reply-title { margin: 20px 0; font-size: 16px; font-weight: 400; color: #333; position: relative; } #comments .commentlist #respond #reply-title { margin-top: 0; } #respond #reply-title #cancel-comment-reply-link { position: absolute; right: 0; top: 50%; margin-top: -10px; text-decoration: none; cursor: pointer; padding: 4px 18px; color: #666; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75); font-size: 11px; border: 1px solid #c3c3c3; border-radius: 3px; background-color: #f9f9f9; background-image: -webkit-linear-gradient(#f9f9f9, #ededed); background-image: linear-gradient(#f9f9f9, #ededed); box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1), inset 0px -1px 0px rgba(255, 255, 255, 0.5); } #respond .logged-in-as, #respond .comment-notes { color: #999; margin-bottom: 0.75em; } #respond .logged-in-as a, #respond .comment-notes a { text-decoration: none; color: #666; } #respond input[type=text] { display: block; width: 420px; max-width: 100%; color: #606060; margin-bottom: 7px; font-size: 13px; padding: 4px; border: 1px solid #CCC; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); box-sizing: border-box; -webkit-appearance: none; -webkit-border-radius: 0px; } #respond textarea[name=comment] { margin: 10px 0; display: block; width: 100%; padding: 10px; border: 1px solid #CCC; color: #606060; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); font-size: 13px; box-sizing: border-box; -webkit-appearance: none; -webkit-border-radius: 0px; } #respond input[type=submit] { cursor: pointer; padding: 4px 18px; color: #666; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75); font-size: 11px; border: 1px solid #c3c3c3; border-radius: 3px; background-color: #f9f9f9; background-image: -webkit-linear-gradient(#f9f9f9, #ededed); background-image: linear-gradient(#f9f9f9, #ededed); box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1), inset 0px -1px 0px rgba(255, 255, 255, 0.5); } #respond .form-allowed-tags { margin: 10px 0; font-size: 10px; color: #999; } .commentform-error { margin-bottom: 5px; background: #f3dfdf; border: 1px solid #dfb6b7; padding: 5px; color: #946d6e; font-size: 12px; border-radius: 3px; } .comments-disabled { margin-top: 30px; } /** * #.# Footer */ /** * #.# Footer Widgets */ #footer-widgets { padding: 20px 0; margin-top: 30px; border-top: 1px solid #EEEEEE; background-color: #F9F9F9; width: 100%; } #footer-widgets-wrapper { margin-bottom: -30px; } #footer-widgets .widget { box-sizing: border-box; color: #777; padding: 0 15px; word-wrap: break-word; float: left; margin-bottom: 30px; } #footer-widgets .widget img { max-width: 100%; height: auto; } #footer-widgets h2.widgettitle { font-family: "Dosis", Arial, Helvetica, Geneva, sans-serif; font-weight: 400; font-size: 1.2em; margin-bottom: 20px; color: #333; } #footer-widgets a { text-decoration: none; color: #505050; } #footer-widgets li { line-height: 1.75em; } #footer-widgets ul ul { margin-left: 0.75em; } #footer { margin-bottom: 35px; color: #888; font-size: 0.85em; border: transparent; border-width: 0 1px; color: #999999; padding: 0px 5px; text-align: center; } #footer .copyright { margin-bottom: 0.75em; } #footer a { text-decoration: none; color: #777; } /** * #.# Archive Page */ /* The archive page template */ #blog-archives { margin-top: 30px; } #blog-archives h2 { font-family: 'Terminal Dosis', sans-serif; font-weight: 400; font-size: 1.75em; margin-bottom: 0.75em; } #blog-archives ul { margin-bottom: 25px; } #blog-archives ul a { color: #666; text-decoration: none; } #blog-archives ul a:hover { color: #333; text-decoration: underline; } /** * #.# Post Archives */ h1.archive-title { margin: 30px 0; text-align: center; } #posts-nav { margin-top: 30px; text-align: center; color: #AAA; } #posts-nav a { color: #505050; text-decoration: none; } /** * #.# Widgets */ /** * #.# Button */ .widget .button { display: inline-block; background: #484744; border: none; color: #FFF; cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */ text-decoration: none; font-size: 13px; padding: 12px 35px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .button-container.align-center { text-align: center; } .button-container.align-left { text-align: left; } .button-container.align-right { text-align: right; } .button-container.align-full .button { display: block; text-align: center; } /** * #.# Call To Action */ .widget_call-to-action { padding: 25px 15px; border: 1px solid #EEEEEE; border-width: 1px 0; background: #F9F9F9; position: relative; } .widget_call-to-action .cta-headline { margin-bottom: 0; color: #444444; } .widget_call-to-action .cta-sub-text { margin-top: 10px; margin-bottom: 0; color: #777777; } .widget_call-to-action .button { position: absolute; top: 50%; right: 15px; margin-top: -22px; color: #F3F3F3; } .content .widget_call-to-action .button { color: #F3F3F3; } @media screen and (max-width: 480px) { .widget_call-to-action .button { position: static; margin-top: 10px; display: block; text-align: center; } } /** * #.# Icon and Text */ .widget_icon-text h3.widget-title { font-size: 15px; line-height: 1.5em; margin-bottom: 0.5em; } .widget_icon-text h3.widget-title a { color: inherit; text-decoration: none; } .widget_icon-text .feature-icon { float: left; width: 32px; height: 32px; } .widget_icon-text .feature-icon img { max-width: 100%; height: auto; } .widget_icon-text .widget-text { margin-left: 45px; } /** * #.# Headline Widget */ .widget_headline .widget-title span { display: block; line-height: 1.3em; } .widget_headline .widget-title .size-medium { font-size: 130%; } .widget_headline .widget-title .size-large { font-size: 160%; } .widget_headline .widget-title .size-extra-large { font-size: 190%; } .widget_headline .align-left { text-align: left; } .widget_headline .align-center { text-align: center; } .widget_headline .align-right { text-align: right; } .widget img { max-width: 100%; height: auto; } /** * #.# Origami Icons */ @font-face { font-family: 'origami-icons'; src: url("css/icons/origami-icons.eot?9l1bs6"); src: url("css/icons/origami-icons.eot?#iefix9l1bs6") format("embedded-opentype"), url("css/icons/origami-icons.woff?9l1bs6") format("woff"), url("css/icons/origami-icons.ttf?9l1bs6") format("truetype"), url("css/icons/origami-icons.svg?9l1bs6#icomoon") format("svg"); font-weight: normal; font-style: normal; } [class^="origami-icon-"], [class*=" origami-icon-"], #menu .mobilenav-main-link .mobile-nav-icon { font-family: 'origami-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .origami-icon-mag:before { content: "\e600"; } .origami-icon-menu:before { content: "\e601"; } .origami-icon-more:before { content: "\e602"; } .origami-icon-tag:before { content: "\e603"; } /*-------------------------------------------------------------- ## - Jetpack Infinite Scroll --------------------------------------------------------------*/ .infinite-scroll #posts-nav, .infinite-scroll .woocommerce-pagination, .infinite-scroll.neverending #footer-widgets { display: none; } .infinity-end.neverending #footer-widgets { display: block; } #infinite-handle { text-align: center; } #infinite-handle span { background: none; color: #505050; } .infinite-loader .spinner { left: 50% !important; }