/*
Theme Name: Pho
Theme URI: http://demo.thematosoup.com/pho
Author: ThematoSoup
Author URI: http://thematosoup.com
Description: Lean, fast WordPress theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pho
Domain Path: /languages/
Tags: one-column, two-columns, white, responsive-layout, custom-background, custom-colors, editor-style, featured-images, post-formats, sticky-post, theme-options, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
Pho is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc.
Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
and Blueprint http://www.blueprintcss.org/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 - Reset
2.0 - Typography
3.0 - Layout
4.0 - Elements
5.0 - Forms
6.0 - Navigation
6.1 - Links
6.2 - Menus
7.0 - Accessibility
8.0 - Alignments
9.0 - Clearings
10.0 - Widgets
11.0 - Content
11.1 - Posts and pages
11.2 - Post Formats
11.3 - Comments
12.0 - Footer
12.1 - Infinite Scroll
13.0 - Media
13.1 - Captions
13.2 - Galleries
14.0 - Featured Content
15.0 - Media Queries
--------------------------------------------------------------*/
/*--------------------------------------------------------------
1.0 - 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, 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 {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
html {
font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
overflow-y: scroll; /* Keeps page centered in all browsers regardless of content height */
-webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
-ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
}
*,
*:before,
*:after { /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
-webkit-box-sizing: border-box; /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */
-moz-box-sizing: border-box; /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */
box-sizing: border-box;
}
body {
background: #fff;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
display: block;
}
ol, ul {
list-style: none;
}
table { /* tables still need 'cellspacing="0"' in the markup */
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
a:focus {
outline: thin dotted;
}
a:hover,
a:active {
outline: 0;
}
a img {
border: 0;
}
/*--------------------------------------------------------------
2.0 Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
color: #404040;
font-family: Helvetica, sans-serif;
font-size: 16px;
font-size: 1.6rem;
line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
font-family: Helvetica, sans-serif;
clear: both;
font-weight: normal;
margin: 1.5em 0 0.75em;
line-height: 1;
color: #1d1d1d;
}
h1 {
font-size: 20px;
font-size: 2.0rem;
letter-spacing: 2px;
font-weight: bold;
}
h2 {
font-size: 35px;
font-size: 3.5rem;
letter-spacing: 5px;
}
h3 {
font-size: 24px;
font-size: 2.4rem;
letter-spacing: 5px;
}
h4 {
font-size: 21px;
font-size: 2.1rem;
}
h5 {
font-size: 18px;
font-size: 1.8rem;
}
h6 {
font-size: 15px;
font-size: 1.5rem;
}
p {
margin-bottom: 1.5em;
}
b, strong, dt {
font-weight: bold;
color: #1d1d1d;
}
dfn, cite, em, i {
font-style: italic;
}
blockquote {
margin: 2em 1.5em;
}
address {
margin: 0 0 1.5em;
}
pre {
background-color: rgba(0,0,0,0.025);
border: 1px solid rgba(0,0,0,0.05);
padding: 1.5em;
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
font-size: 14px;
font-size: 1.4rem;
line-height: 1.6;
margin-bottom: 2em;
max-width: 100%;
overflow: auto;
}
code, kbd, tt, var {
font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr, acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
mark, ins {
background: #fff9c0;
text-decoration: none;
}
sup,
sub {
font-size: 75%;
height: 0;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}
small {
font-size: 75%;
}
big {
font-size: 125%;
}
/*--------------------------------------------------------------
3.0 - Layout
--------------------------------------------------------------*/
.inner {
max-width: 1230px;
margin: 0 auto;
padding: 0 30px;
}
/* Content - Sidebar */
.content-area {
float: left;
margin: 0 -31.62393% 0 0;
width: 100%;
}
.site-main {
margin: 0 31.62393% 0 0;
padding-right: 30px;
}
.site-content .widget-area {
float: right;
width: 31.62393%;
}
/* Full width */
.no-sidebar #primary {
float: none;
}
.no-sidebar.single #primary .entry-title,
.no-sidebar.page #primary .entry-title {
padding-top: 30px;
}
.no-sidebar.layout-standard.blog #primary,
.no-sidebar.layout-standard.archive #primary,
.no-sidebar.single #primary .entry-header :not(.wp-post-image),
.no-sidebar.single #primary .entry-content,
.no-sidebar.single #primary .entry-footer,
.no-sidebar.single #primary .post-navigation,
.no-sidebar.page #primary .entry-header :not(.wp-post-image),
.no-sidebar.page #primary .entry-content,
.no-sidebar.page #primary .entry-footer,
.no-sidebar.page #primary .post-navigation {
float: none;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.no-sidebar .site-main {
margin: 0;
padding-right: 0;
}
.error404 #primary {
max-width: 800px;
}
@media screen and (max-width: 800px) {
.content-area,
.site-main,
.site-content .widget-area {
float: none;
margin-left: 0;
margin-right: 0;
width: 100%;
}
.site-main {
padding-right: 0;
}
.site-main {
position: relative;
margin-bottom: 45px;
padding-bottom: 45px;
border-bottom: double 3px #f3f3f3;
}
.site-main:after {
content: '\f436';
position: absolute;
display: block;
width: 24px;
height: 24px;
font-size: 24px;
line-height: 24px;
font-family: Genericons;
-webkit-font-smoothing: antialiased;
color: #e5e5e5;
bottom: -14px;
left: 50%;
margin-left: -12px;
background: #fff;
}
}
#masthead,
#content {
margin-bottom: 45px;
}
.site-branding {
text-align: center;
padding: 60px 0;
}
.site-title {
margin: 0 0 0.2em;
font-size: 48px;
font-size: 4.8rem;
}
.site-title a,
.site-title a:visited {
color: #1d1d1d;
text-decoration: none;
}
.error404 .page-title {
margin-bottom: 0.5em;
}
.error404 .page-content {
padding: 40px 0;
}
.site-description {
font-size: 20px;
font-size: 2.0rem;
margin: 0;
font-weight: normal;
}
.site-footer {
clear: both;
width: 100%;
}
.custom-background-color #page,
.custom-background-image #page {
max-width: 1230px;
background: #fff;
margin: 0 auto;
}
/*--------------------------------------------------------------
4.0 Elements
--------------------------------------------------------------*/
hr {
background-color: #ccc;
border: 0;
height: 1px;
margin-bottom: 1.5em;
}
ul, ol {
margin: 0 0 2em 1.5em;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
li > ul,
li > ol {
margin-bottom: 0;
margin-left: 1.5em;
}
li ul {
list-style: square;
}
li ol {
list-style: lower-roman;
}
li li ul {
list-style: circle;
}
li li ol {
list-style: lower-alpha;
}
dt {
font-weight: bold;
}
dd {
margin: 0 1.5em 1.5em;
}
img {
height: auto; /* Make sure images are scaled correctly. */
max-width: 100%; /* Adhere to container width. */
}
figure {
margin: 0;
}
table {
margin: 0 0 1.5em;
width: 100%;
}
th {
font-weight: bold;
}
/*--------------------------------------------------------------
5.0 Forms
--------------------------------------------------------------*/
button,
input,
select,
textarea {
font-size: 100%; /* Corrects font size not being inherited in all browsers */
margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
vertical-align: baseline; /* Improves appearance and consistency in all browsers */
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
border: none;
background: #e14546;
color: #fff;
cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
-webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
font-size: 14px;
font-size: 1.4rem;
line-height: 1;
padding: 1em 1.5em;
text-transform: uppercase;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
#infinite-handle span:hover {
background: #555;
}
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active,
#infinite-handle span:focus,
#infinite-handle span:active {
background: #181818;
outline: none;
}
input[type="checkbox"],
input[type="radio"] {
padding: 0; /* Addresses excess padding in IE8/9 */
}
input[type="search"] {
-webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
-webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
-moz-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
border: 0;
padding: 0;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
color: #666;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 0;
font-size: 14px;
font-size: 1.4rem;
padding: 0.5em;
transition: all 0.1s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
color: #111;
outline: none;
border-color: rgba(0,0,0,0.25);
background: rgba(0,0,0,0.075);
}
textarea {
overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
vertical-align: top; /* Improves readability and alignment in all browsers */
width: 98%;
}
/*--------------------------------------------------------------
6.0 Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
6.1 Links
--------------------------------------------------------------*/
a {
color: #e14546;
}
a:visited {
color: #748c8e;
}
a:hover,
a:focus,
a:active {
color: #222;
}
/*--------------------------------------------------------------
6.2 Menus
--------------------------------------------------------------*/
.main-navigation {
clear: both;
display: block;
text-align: center;
border-top: 1px solid rgba(0,0,0,0.1);
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation li {
position: relative;
display: inline-block;
text-transform: uppercase;
font-size: 14px;
font-size: 1.4rem;
}
.main-navigation a {
display: block;
text-decoration: none;
color: #333;
line-height: 1;
padding: 15px 20px;
}
/* Submenus when full menu is shown */
@media screen and (min-width: 601px) {
.main-navigation ul ul {
background: #1d1d1d;
border-top: 1px solid #e14546;
border-bottom: 1px solid #e14546;
float: left;
position: absolute;
top: 44px;
margin-left: 20px;
left: -999em;
z-index: 99999;
}
.main-navigation ul ul ul {
left: -999em;
top: -1px;
margin-left: 0;
}
.main-navigation ul ul a {
width: 220px;
color: #fff;
padding-left: 10px;
padding-right: 10px;
}
.main-navigation ul ul li {
font-size: 12px;
font-size: 1.2rem;
text-align: left;
border-bottom: 1px solid #333;
}
.main-navigation ul ul li:last-child {
border-bottom: none;
}
.main-navigation ul ul a:hover {
background: rgba(255,255,255,0.1);
}
.main-navigation ul li:hover > ul {
left: auto;
}
.main-navigation ul ul li:hover > ul {
left: 100%;
}
.main-navigation > ul.nav-menu > .current_page_item > a,
.main-navigation > ul.nav-menu > .current-menu-item > a,
.main-navigation > ul.nav-menu > li > a:hover,
.main-navigation > .nav-menu > ul > .current_page_item > a,
.main-navigation > .nav-menu > ul > .current-menu-item > a,
.main-navigation > .nav-menu > ul > li > a:hover {
color: #e14546;
}
.main-navigation .menu-item-has-children > a,
.main-navigation .page_item_has_children > a {
padding-right: 25px;
}
.main-navigation .menu-item-has-children > a:after,
.main-navigation .page_item_has_children > a:after {
-webkit-font-smoothing: antialiased;
content: "\f502";
display: inline-block;
font-family: Genericons;
font-size: 8px;
line-height: 8px;
position: absolute;
right: 12px;
top: 20px;
vertical-align: text-bottom;
}
.main-navigation .menu-item-has-children li.menu-item-has-children > a:after,
.main-navigation .menu-item-has-children li.page_item_has_children > a:after,
.main-navigation .page_item_has_children li.menu-item-has-children > a:after,
.main-navigation .page_item_has_children li.page_item_has_children > a:after {
content: "\f501";
right: 8px;
top: 18px;
}
/* Disable sub-menu indicator for last level menu items ($depth => 4) */
.main-navigation li li li li.menu-item-has-children > a:after,
.main-navigation li li li li.page_item_has_children > a:after,
.main-navigation li li li li.menu-item-has-children > a:after,
.main-navigation li li li li.page_item_has_children > a:after {
display: none;
}
}
/* Small menu */
.menu-toggle {
display: none;
}
@media screen and (max-width: 600px) {
.menu-toggle,
.main-navigation.toggled .nav-menu {
display: block;
width: 100%;
}
.main-navigation ul {
display: none;
}
.main-navigation li {
display: block;
font-size: 18px;
font-size: 1.8rem;
margin-bottom: 10px;
}
.main-navigation li a {
padding: 10px 0;
}
.main-navigation li ul {
display: block;
position: static;
}
.main-navigation li li {
font-size: 12px;
font-size: 1.2rem;
margin-bottom: 0;
}
.main-navigation li li a {
padding: 8px 0;
}
}
.site-main .comment-navigation,
.site-main .paging-navigation,
.site-main .post-navigation {
margin: 0 0 1.5em;
overflow: hidden;
font-size: 16px;
font-size: 1.6rem;
}
.comment-navigation .nav-previous,
.paging-navigation .nav-previous,
.post-navigation .nav-previous {
float: left;
width: 50%;
}
.comment-navigation .nav-next,
.paging-navigation .nav-next,
.post-navigation .nav-next {
float: right;
text-align: right;
width: 50%;
}
.comment-navigation a,
.post-navigation a {
color: #404040;
text-decoration: none;
display: none;
}
.post-navigation .wp-post-image {
width: 60px;
height: auto;
display: none;
float: left;
}
.post-navigation .nav-previous .wp-post-image + div {
margin-left: 75px; display: none;
}
.post-navigation .nav-next .wp-post-image {
float: right; display: none;
}
.post-navigation .nav-next .wp-post-image + div {
margin-right: 75px;display: none;
}
.post-navigation span.label,
.post-navigation span.link {
display: none;
}
.post-navigation span.label {
font-weight: bold;
}
.post-navigation span.link {
font-size: 14px;
font-size: 1.4rem;
}
.paging-navigation {
text-align: center;
}
.paging-navigation a,
.paging-navigation span {
display: inline-block;
min-width: 1.5em;
text-align: center;
}
.paging-navigation a {
color: #404040;
text-decoration: none;
}
.paging-navigation span {
background: #e14546;
color: #fff;
}
/* Social Menu */
#social-menu {
list-style: none;
margin: 0;
background: #1d1d1d;
text-align: center;
}
#social-menu li {
display: inline-block;
margin: 0 0.25em;
}
#social-menu a {
text-decoration: none;
color: #fff;
}
#social-menu a[href*="facebook.com"],
#social-menu a[href*="github.com"],
#social-menu a[href*="flickr.com"],
#social-menu a[href*="plus.google.com"],
#social-menu a[href*="instagram.com"],
#social-menu a[href*="linkedin.org"],
#social-menu a[href*="pinterest.com"],
#social-menu a[href*="skype"],
#social-menu a[href*="tumblr.com"],
#social-menu a[href*="twitter.com"],
#social-menu a[href*="vimeo.com"],
#social-menu a[href*="youtube.com"] {
font-size: 16px;
width: 16px;
height: 16px;
display: inline-block;
overflow: hidden;
}
#social-menu a[href*="facebook.com"]:before,
#social-menu a[href*="github.com"]:before,
#social-menu a[href*="flickr.com"]:before,
#social-menu a[href*="plus.google.com"]:before,
#social-menu a[href*="instagram.com"]:before,
#social-menu a[href*="linkedin.org"]:before,
#social-menu a[href*="pinterest.com"]:before,
#social-menu a[href*="skype"]:before,
#social-menu a[href*="tumblr.com"]:before,
#social-menu a[href*="twitter.com"]:before,
#social-menu a[href*="vimeo.com"]:before,
#social-menu a[href*="youtube.com"]:before {
display: inline-block;
width: 16px;
height: 16px;
-webkit-font-smoothing: antialiased;
font-size: 16px;
line-height: 1;
font-family: 'Genericons';
text-decoration: inherit;
font-weight: normal;
font-style: normal;
vertical-align: top;
}
#social-menu a[href*="facebook.com"]:before { content: '\f203'; }
#social-menu a[href*="github.com"]:before { content: '\f200'; }
#social-menu a[href*="flickr.com"]:before { content: '\f211'; }
#social-menu a[href*="plus.google.com"]:before { content: '\f206'; }
#social-menu a[href*="instagram.com"]:before { content: '\f215'; }
#social-menu a[href*="linkedin.com"]:before { content: '\f207'; }
#social-menu a[href*="pinterest.com"]:before { content: '\f209'; }
#social-menu a[href*="skype"]:before { content: '\f220'; }
#social-menu a[href*="tumblr.com"]:before { content: '\f214'; }
#social-menu a[href*="twitter.com"]:before { content: '\f202'; }
#social-menu a[href*="vimeo.com"]:before { content: '\f212'; }
#social-menu a[href*="youtube.com"]:before { content: '\f213'; }
/*--------------------------------------------------------------
7.0 Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar */
}
/*--------------------------------------------------------------
8.0 Alignments
--------------------------------------------------------------*/
.alignleft {
display: inline;
float: left;
margin-right: 1.5em;
}
.alignright {
display: inline;
float: right;
margin-left: 1.5em;
}
.aligncenter {
clear: both;
display: block;
margin: 0 auto;
}
/*--------------------------------------------------------------
9.0 Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after,
.inner:before,
.inner:after,
.widget:before,
.widget:after {
content: '';
display: table;
}
.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after,
.inner:after,
.widget:after {
clear: both;
}
/*--------------------------------------------------------------
10.0 Widgets
--------------------------------------------------------------*/
.widget {
margin: 0 0 30px;
font-size: 15px;
font-size: 1.5rem;
}
#secondary .widget:not(.widget_search) {
background-color: rgba(0,0,0,0.025);
border: 1px solid rgba(0,0,0,0.05);
padding: 30px;
}
.widget-title {
text-transform: uppercase;
font-size: 18px;
font-size: 1.8rem;
margin: 0 0 0.75em;
}
.widget a {
color: #e14546;
text-decoration: none;
}
.widget ul {
list-style: none;
margin: 0;
}
.widget li ul,
.widget li ol {
margin-left: 15px;
margin-top: 5px;
}
.widget li {
padding: 10px 0;
}
#secondary .widget li {
border-bottom: 1px dotted rgba(0,0,0,0.075);
padding: 10px 5px;
}
.widget li li {
padding: 5px 0;
border-bottom: none;
}
.widget li:last-child {
border-bottom: none;
padding-bottom: 0;
}
/* Make sure select elements fit in widgets */
.widget select {
max-width: 100%;
}
/* Search widget */
.search-submit {
display: none;
}
.search-form .search-field {
font-size: 15px;
font-size: 1.5rem;
border: 1px solid #e5e5e5;
padding: 10px;
border-radius: 0;
box-shadow: none;
display: block;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
/* Calendar widget */
#wp-calendar {
border-collapse: collapse;
}
#wp-calendar caption {
text-transform: uppercase;
margin-bottom: 0.5em;
}
#wp-calendar td,
#wp-calendar th {
background: #fff;
text-align: center;
border: 1px solid #e5e5e5;
font-size: 14px;
font-size: 1.4rem;
padding: 3px;
}
/* Footer widgets */
/* Two per row */
.per-row-2 .widget {
width: 50%;
float: left;
}
.per-row-2 .widget:nth-child(2n+1) {
clear: left;
padding-left: 0;
}
.per-row-2 .widget:nth-child(2n) {
padding-right: 0;
}
/* Three per row */
.per-row-3 .widget {
width: 33.33333%;
float: left;
}
.per-row-3 .widget:nth-child(3n+1) {
clear: left;
padding-left: 0;
}
.per-row-3 .widget:nth-child(3n) {
padding-right: 0;
}
/* Four per row */
.per-row-4 .widget {
width: 25%;
float: left;
}
.per-row-4 .widget:nth-child(4n+1) {
clear: left;
padding-left: 0;
}
.per-row-4 .widget:nth-child(4n) {
padding-right: 0;
}
#footer-widgets {
padding: 30px 15px 0;
}
#footer-widgets .widget {
padding-left: 15px;
padding-right: 15px;
}
@media screen and (max-width: 800px) {
#footer-widgets .widget {
width: 50%;
}
}
@media screen and (max-width: 480px) {
#footer-widgets .widget {
width: 100%;
float: none;
}
}
/*--------------------------------------------------------------
11.0 Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
11.1 Posts and pages
--------------------------------------------------------------*/
.page-header {
margin-bottom: 45px;
padding-bottom: 45px;
border-bottom: double 3px #f3f3f3;
}
.page-title {
margin-top: 0;
margin-bottom: 0;
}
.taxonomy-description {
margin-top: 1.5em;
}
.taxonomy-description > :last-child {
margin-bottom: 0;
}
#posts-wrapper .hentry {
margin-bottom: 45px;
padding-bottom: 45px;
border-bottom: solid 1px #f3f3f3;
}
.layout-standard #posts-wrapper .sticky,
.layout-masonry #posts-wrapper .sticky .masonry-inner {
background-color: rgba(0,0,0,0.025);
border: 1px solid rgba(0,0,0,0.05);
padding: 30px;
}
.layout-masonry #posts-wrapper {
margin-left: -15px;
margin-right: -15px;
}
.no-sidebar #posts-wrapper .hentry.masonry-brick {
width: 33.33333%;
}
@media screen and (max-width: 770px) {
#posts-wrapper .hentry.masonry-brick,
.no-sidebar #posts-wrapper .hentry.masonry-brick {
width: 50%;
}
}
@media screen and (max-width: 570px) {
#posts-wrapper .hentry.masonry-brick,
.no-sidebar #posts-wrapper .hentry.masonry-brick {
width: 100%;
}
}
#posts-wrapper .entry-summary {
font-size: 15px;
font-size: 1.5rem;
}
.sticky {
}
.hentry {
margin: 0 0 3em;
}
.single .hentry .entry-footer {
padding-bottom: 45px;
margin-bottom: 0;
border-bottom: double 3px #f3f3f3;
}
.single .hentry .entry-footer,
.page .hentry .entry-footer {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
width: 100%;
}
.more-link,
#infinite-handle span {
display: inline-block;
background: #e14546;
color: #fff;
font-size: 14px;
font-size: 1.4rem;
line-height: 1;
padding: 1em 1.5em;
margin: 0.5em 0;
text-transform: uppercase;
text-decoration: none;
}
.more-link:hover,
.more-link:visited {
color: #fff;
}
.byline,
.updated:not(.published) {
display: none;
}
.single .byline,
.group-blog .byline {
display: inline;
}
.page-content,
.entry-content,
.entry-summary {
margin: 0 0 1.5em;
}
.page-links {
clear: both;
margin: 0 0 1.5em;
}
.entry-header {
margin-bottom: 30px;
}
.entry-header .wp-post-image {
margin-bottom: 30px;
}
.layout-masonry #posts-wrapper .entry-header,
.layout-masonry #posts-wrapper .wp-post-image {
margin-bottom: 20px;
}
.entry-title {
margin: 0 0 10px;
word-wrap: break-word;
}
.layout-masonry #posts-wrapper .entry-title {
font-size: 30px;
font-size: 3rem;
}
.entry-title a {
color: #1d1d1d;
text-decoration: none;
}
.entry-meta,
.entry-footer {
font-size: 14px;
font-size: 1.4rem;
color: #808080;
display:none;
}
.entry-footer {
margin: 0 0 10px;
display:none;
}
.entry-footer > span {
display: block;
margin-bottom: 0.3em;
}
.entry-content > :first-child,
.comment-content > :first-child {
margin-top: 0;
}
.entry-content > :last-child,
.comment-content > :last-child {
margin-bottom: 0;
}
.entry-content table,
.comment-content table {
border-collapse: collapse;
}
.entry-content td,
.entry-content th,
.comment-content td,
.comment-content th {
border: 1px solid #e5e5e5;
padding: 0.5em;
font-size: 16px;
font-size: 1.6rem;
}
.entry-content th,
.comment-content th {
background: #e14546;
color: #fff;
border-color: #fff;
}
.entry-content th a,
.comment-content th a {
color: #fff;
}
.entry-content blockquote,
.comment-content blockquote,
.entry-summary blockquote {
font-style: italic;
padding: 5px 0 5px 20px;
margin-left: 60px;
border-left: 3px solid #e14546;
position: relative;
}
.entry-summary blockquote {
margin-left: 40px;
padding-left: 15px;
}
.entry-content blockquote > :last-child,
.comment-content blockquote > :last-child,
.entry-summary blockquote > :last-child {
margin-bottom: 0;
}
.entry-content blockquote:before,
.comment-content blockquote:before,
.entry-summary blockquote:before {
color: #e14546;
content: '\f106';
font-size: 32px;
line-height: 32px;
height: 32px;
display: block;
font-family: Genericons;
-webkit-font-smoothing: antialiased;
position: absolute;
top: 5px;
left: -60px;
}
.entry-summary blockquote:before {
font-size: 24px;
line-height: 24px;
height: 24px;
left: -40px;
}
.entry-content blockquote cite,
.comment-content blockquote cite,
.entry-summary blockquote cite {
color: #808080;
display: block;
margin-top: 1em;
font-size: 14px;
font-size: 1.4rem;
text-align: right;
}
.post-password-form label {
display: block;
margin-bottom: 15px;
}
.post-password-form input[type="password"] {
display: block;
width: 300px;
}
/*--------------------------------------------------------------
11.2 Post Formats
--------------------------------------------------------------*/
#posts-wrapper .format-image .entry-header {
margin-bottom: 0;
}
#posts-wrapper .format-image .entry-title {
font-size: 20px;
font-size: 2rem;
}
.site-content .format-link .entry-title,
.site-content .format-aside .entry-title,
.site-content .format-quote .entry-title,
.site-content .format-status .entry-title,
.site-content .format-link .entry-footer,
.site-content .format-aside .entry-footer,
.site-content .format-quote .entry-footer,
.site-content .format-status .entry-footer,
.site-content .format-image .entry-footer {
display: none;
}
#posts-wrapper .entry-content {
margin-bottom: 0;
}
#posts-wrapper .entry-content + .entry-footer {
margin-top: 30px;
}
#posts-wrapper .hentry.masonry-brick {
width: 50%;
padding-left: 15px;
padding-right: 15px;
border-bottom: none;
padding-bottom: 0;
margin-bottom: 30px;
}
#posts-wrapper .format-status .entry-summary,
#posts-wrapper .format-status .entry-content {
font-size: 24px;
font-size: 2.4rem;
}
#posts-wrapper .hentry.masonry-brick .entry-summary,
#posts-wrapper .hentry.masonry-brick .entry-summary > :last-child {
margin-bottom: 0;
}
#posts-wrapper .hentry.masonry-brick .masonry-inner {
padding-bottom: 30px;
border-bottom: solid 1px #f3f3f3;
}
/*--------------------------------------------------------------
11.3 Comments
--------------------------------------------------------------*/
/* Form */
.required {
color: #e14546;
}
.comment-form label {
font-size: 14px;
font-size: 1.4rem;
display: block;
margin-bottom: 0.4em;
}
.comment-form-email,
.comment-form-author,
.comment-form-url {
float: left;
width: 30%;
box-sizing: content-box;
-moz-box-sizing: content-box;
}
.comment-form-email,
.comment-form-author {
padding-right: 5%;
}
.comment-form-email input,
.comment-form-author input,
.comment-form-url input,
.comment-form textarea {
width: 100%;
}
.form-allowed-tags {
font-size: 14px;
font-style: 1.4rem;
}
.comment-form-comment {
clear: left;
}
/* Comments */
.comment-list {
list-style: none;
margin: 30px 0;
}
.comment-list .children {
list-style: none;
margin: 30px 0 0 60px;
border-top: 1px solid #f3f3f3;
padding-top: 30px;
}
.comment-list .children .children .children {
margin-left: 0;
}
.comment-list > .comment {
border-bottom: double 3px #f3f3f3;
padding-bottom: 30px;
margin-bottom: 30px;
}
.comment {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #f3f3f3;
}
.comment:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.comment-content a {
word-wrap: break-word;
}
.comment-body {
padding-left: 60px;
padding-bottom: 50px;
position: relative;
}
.comment #respond {
padding-left: 60px;
}
.comment .avatar {
position: absolute;
top: 0;
left: 0;
}
.comment-author {
line-height: 1;
margin-bottom: 0.5em;
font-size: 20px;
font-size: 2rem;
}
.comment-author .url {
text-decoration: none;
color: #1d1d1d;
font-weight: normal;
}
.comment .says {
display: none;
}
.comment-metadata {
position: absolute;
bottom: 0;
left: 60px;
font-size: 14px;
font-size: 1.4rem;
line-height: 30px;
}
.comment-metadata a {
text-decoration: none;
}
.reply {
position: absolute;
bottom: 0;
right: 0;
font-size: 14px;
font-size: 1.4rem;
}
.reply a {
display: inline-block;
background: #e14546;
color: #fff;
text-decoration: none;
font-size: 14px;
font-size: 1.4rem;
line-height: 1;
padding: 8px 10px;
}
.comment-content {
color: #7e8080;
font-size: 16px;
font-size: 1.6rem;
}
.comment-content p {
margin-bottom: 1em;
}
.bypostauthor .comment-meta .fn:before {
content: '\f411';
font-family: Genericons;
-webkit-font-smoothing: antialiased;
font-size: 16px;
font-size: 1.6rem;
line-height: 1;
display: inline-block;
position: relative;
top: 2px;
margin-right: 4px;
font-weight: normal;
}
.form-allowed-tags {
display: none;
}
.logged-in-as {
font-size: 14px;
font-size: 1.4rem;
}
/*--------------------------------------------------------------
12.0 Footer
--------------------------------------------------------------*/
#colophon {
background-color: rgba(0,0,0,0.025);
border-top: 1px solid rgba(0,0,0,0.05);
}
#footer-bottom {
background: rgba(0,0,0,0.075);
font-size: 14px;
font-size: 1.4rem;
padding: 15px 0;
}
#footer-bottom a {
color: #e14546;
}
.site-info {
float: left;
width: 50%;
display:none;
}
#footer-bottom ul.menu {
float: right;
width: 50%;
margin: 0;
list-style: none;
text-align: right;
}
#footer-bottom ul.menu li {
display: inline-block;
margin-left: 1em;
}
@media screen and (max-width: 900px) {
.site-info,
#footer-bottom ul.menu {
width: 100%;
float: none;
text-align: center;
}
#footer-bottom ul.menu + .site-info {
margin-top: 1em;
}
#footer-bottom ul.menu {
text-align: center;
}
#footer-bottom ul.menu li {
margin: 0 1em 0 0;
}
}
/*--------------------------------------------------------------
12.1 Infinite scroll
--------------------------------------------------------------*/
#infinite-footer {
background: rgba( 255, 255, 255, 0.8 );
border-top: 1px solid rgba(0,0,0,0.1);
}
#infinite-footer .container {
max-width: 1230px;
padding: 0 30px;
background: none;
border: none;
}
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .paging-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
display: none;
}
/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */
.infinity-end.neverending .site-footer {
display: block;
}
/* Fix Older Posts button placement in Masonry layout */
.infinite-scroll.layout-masonry #posts-wrapper {
position: relative;
padding-bottom: 60px;
}
.infinite-scroll.layout-masonry #posts-wrapper #infinite-handle {
position: absolute;
bottom: 0;
left: 0;
}
/*--------------------------------------------------------------
13.0 Media
--------------------------------------------------------------*/
.page-content img.wp-smiley,
.entry-content img.wp-smiley,
.comment-content img.wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
}
/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
max-width: 100%;
}
.wp-post-image {
display: block;
width: 100%;
height: auto;
}
.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
max-width: 100%;
height: auto;
}
/*--------------------------------------------------------------
13.1 Captions
--------------------------------------------------------------*/
.wp-caption {
margin-bottom: 1.5em;
max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
display: block;
margin: 0 auto;
}
.wp-caption-text {
text-align: right;
font-size: 14px;
font-size: 1.4rem;
line-height: 1.2;
color: #808080;
}
.wp-caption .wp-caption-text {
margin: 0.5em 0;
}
/*--------------------------------------------------------------
13.2 Galleries
--------------------------------------------------------------*/
.gallery {
margin-bottom: 1.5em;
}
.gallery-item {
display: inline-block;
text-align: center;
vertical-align: top;
width: 100%;
padding: 10px;
}
.gallery-columns-2 .gallery-item {
max-width: 50%;
}
.gallery-columns-3 .gallery-item {
max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
max-width: 25%;
}
.gallery-columns-5 .gallery-item {
max-width: 20%;
}
.gallery-columns-6 .gallery-item {
max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
max-width: 11.11%;
}
.gallery-caption {
text-align: center;
font-size: 12px;
font-size: 1.2rem;
}
/*--------------------------------------------------------------
14.0 Featured Content
--------------------------------------------------------------*/
.featured-content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
width: 100%;
margin-bottom: 45px;
padding-bottom: 45px;
border-bottom: double 3px #f3f3f3;
}
.featured-content:after {
content: '\f436';
position: absolute;
display: block;
width: 24px;
height: 24px;
font-size: 24px;
line-height: 24px;
font-family: Genericons;
-webkit-font-smoothing: antialiased;
color: #e5e5e5;
bottom: -14px;
left: 50%;
margin-left: -12px;
background: #fff;
}
.featured-content-inner {
overflow: hidden;
}
.featured-content .hentry {
margin: 0;
max-width: 100%;
width: 100%;
}
.featured-content .post-thumbnail,
.featured-content .post-thumbnail:hover {
background: transparent;
}
.featured-content .post-thumbnail {
display: block;
position: relative;
padding-top: 55.357142857%;
overflow: hidden;
}
.featured-content .post-thumbnail img {
left: 0;
position: absolute;
top: 0;
}
.featured-content .featured-text {
padding: 20px 5px;
}
.featured-content a {
color: #404040;
text-decoration: none;
}
.featured-content a img {
transition: opacity 0.25s ease;
}
.featured-content a:hover img {
opacity: 0.8;
}
.featured-content .entry-header {
margin-bottom: 10px;
}
.featured-content .entry-meta {
margin-top: 0;
}
.featured-content .cat-links {
display: none;
}
.featured-content .entry-title {
letter-spacing: 0.075em;
font-size: 28px;
font-size: 2.8rem;
}
.featured-content .entry-summary {
font-size: 14px;
font-size: 1.4rem;
}
.featured-content .entry-summary,
.featured-content .entry-summary > :last-child {
margin-bottom: 0;
}
/* Slider */
.featured-content .hentry {
-webkit-backface-visibility: hidden;
display: none;
position: relative;
}
.featured-content .post-thumbnail {
padding-top: 55.49132947%;
}
.slider-control-paging {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
list-style: none;
margin: 0;
position: absolute;
z-index: 3;
bottom: 49px;
left: 0;
}
.slider-control-paging li {
float: left;
}
.slider-control-paging li:last-child {
margin-right: 0;
}
.slider-control-paging a {
cursor: pointer;
display: block;
height: 32px;
position: relative;
text-indent: -999em;
width: 32px;
}
.slider-control-paging a:before {
background-color: #808080;
content: "";
width: 12px;
height: 12px;
position: absolute;
left: 10px;
top: 10px;
}
.slider-control-paging .slider-active:before,
.slider-control-paging .slider-active:hover:before {
background: #e14546;
}
.slider-direction-nav {
clear: both;
list-style: none;
margin: 0 0 0 -74px;
position: absolute;
z-index: 3;
overflow: hidden;
bottom: 49px;
left: 600px;
}
.slider-direction-nav li {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
text-align: center;
display: block;
}
.slider-direction-nav a {
display: block;
font-size: 0;
height: 32px;
color: #333;
}
.slider-direction-nav a:hover {
}
.slider-direction-nav a:before {
color: #333;
content: "\f430";
font-size: 32px;
line-height: 32px;
height: 32px;
display: inline-block;
font-family: Genericons;
-webkit-font-smoothing: antialiased;
}
.slider-direction-nav .slider-next:before {
content: "\f429";
}
.slider-direction-nav .slider-disabled {
display: none;
}
@media screen and (min-width: 801px) {
#featured-content .featured-text {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
position: absolute;
bottom: -1px;
left: 0;
width: 600px;
padding: 20px 20px 40px 10px;
background: #fff;
}
}
@media screen and (max-width: 800px) {
#featured-content .slider-direction-nav {
bottom: 30px;
left: auto;
right: 0;
margin-right: 0;
}
#featured-content .slider-control-paging {
bottom: 30px;
left: 0;
}
.slider-control-paging a {
height: 22px;
width: 22px;
}
.slider-control-paging a:before {
left: 5px;
top: 5px;
}
}
/*--------------------------------------------------------------
15.0 Media Queries
--------------------------------------------------------------*/