Untitled diff

建立於 差異永不過期
40 刪除
1060
35 新增
1062
/*---------------------------------------------------------------------------------
/*---------------------------------------------------------------------------------
Theme Name: Baskerville
Theme Name: Baskerville
Version: 1.13
Version: 1.15
Description: Baskerville is a beautiful, responsive and retina-ready masonry theme for hoarders. It's the perfect way to showcase your posts, videos, images and galleries, and share your favorite quotes and links. Features responsive design, retina-ready assets, full-width header image, support for all post formats, custom logo upload, custom widgets (video, Flickr and Dribbble), four page templates (including a contributors template), editor styling, like functionality via the ZillaLikes plugin and translation-ready code. Included translations: Swedish/svenska.
Description: Baskerville is a beautiful, responsive and retina-ready masonry theme for hoarders. It's the perfect way to showcase your posts, videos, images and galleries, and share your favorite quotes and links. Features responsive design, retina-ready assets, full-width header image, support for all post formats, custom logo upload, custom widgets (video, Flickr and Dribbble), four page templates (including a contributors template), editor styling, like functionality via the ZillaLikes plugin and translation-ready code. Included translations: Swedish/svenska.
Tags: black, dark, white, green, two-columns, fluid-layout, responsive-layout, custom-header, custom-menu, featured-images, flexible-header, post-formats, sticky-post, threaded-comments, translation-ready, editor-style
Tags: black, dark, white, green, two-columns, fluid-layout, responsive-layout, custom-header, custom-menu, featured-images, flexible-header, post-formats, sticky-post, threaded-comments, translation-ready, editor-style
Author: Anders Norén
Author: Anders Norén
Author URI: http://www.andersnoren.se
Author URI: http://www.andersnoren.se
Theme URI: http://www.andersnoren.se/teman/baskerville-wordpress-theme/
Theme URI: http://www.andersnoren.se/teman/baskerville-wordpress-theme/
License: GNU General Public License version 2.0
License: GNU General Public License version 2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
License URI: http://www.gnu.org/licenses/gpl-2.0.html
All files, unless otherwise stated, are released under the GNU General Public License
All files, unless otherwise stated, are released under the GNU General Public License
version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)
version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)
-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
0. CSS Reset & Clearfix
0. CSS Reset & Clearfix
1. Document Setup
1. Document Setup
2. Structure
2. Structure
3. Header
3. Header
4. Navigation
4. Navigation
5. Main Content
5. Main Content
6. Single post
6. Single post
7. Post Content
7. Post Content
8. Comments
8. Comments
9. Pagination
9. Pagination
10. Page & Page Templates
10. Page & Page Templates
11. Sidebar
11. Sidebar
12. Footer
12. Footer
13. Credits
13. Credits
14. Responsive
14. Responsive
----------------------------------------------------------------------------------- */
----------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* 0. CSS Reset
/* 0. CSS Reset
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
html, body { margin:0; padding:0;}
html, body { margin:0; padding:0;}
h1, h2, h3, h4, h5, h6, p, blockquote, address, big, cite, code, em, font, img, small, strike, sub, sup, li, ol, ul, fieldset, form, label, legend, button, table, caption, tr, th, td {
h1, h2, h3, h4, h5, h6, p, blockquote, address, big, cite, code, em, font, img, small, strike, sub, sup, li, ol, ul, fieldset, form, label, legend, button, table, caption, tr, th, td {
margin:0;
margin:0;
padding:0;
padding:0;
border:0;
border:0;
font-weight:normal;
font-weight:normal;
font-style:normal;
font-style:normal;
font-size:100%;
font-size:100%;
line-height:1;
line-height:1;
font-family:inherit;
font-family:inherit;
text-align:left;
text-align:left;
}
}
table {
table {
border-collapse:collapse;
border-collapse:collapse;
border-spacing:0;
border-spacing:0;
}
}
ol, ul {
ol, ul {
list-style:none;
list-style:none;
}
}
blockquote:before, blockquote:after {
blockquote:before, blockquote:after {
content:"";
content:"";
}
}
a { outline:none; }
a { outline:none; }
input[type=search],
input[type=search],
input[type=text],
input[type=text],
input[type=email],
input[type=email],
input[type=url],
input[type=url],
input[type=button],
input[type=button],
input[type=tel],
input[type=tel],
input[type=submit],
input[type=submit],
textarea {
textarea {
-moz-appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
-webkit-appearance: none;
}
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
input[type="search"]::-webkit-search-results-decoration {
display: none;
display: none;
}
}
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* 1. Document setup
/* 1. Document setup
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
body {
body {
margin: 0;
margin: 0;
padding: 0;
padding: 0;
border: none;
border: none;
background: #f1f1f1;
background: #f1f1f1;
color: #444;
color: #444;
font-family: 'Roboto', sans-serif;
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-size: 18px;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
}
}
body a {
body a {
color: #13C4A5;
color: #13C4A5;
text-decoration: none;
text-decoration: none;
}
}
body a:hover {
body a:hover {
color: #13C4A5;
color: #13C4A5;
text-decoration: none;
text-decoration: none;
}
}
* {
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
img {
img {
max-width: 100%;
max-width: 100%;
height: auto;
height: auto;
}
}
.hidden { display: none; }
.hidden { display: none; }
.clear { clear: both; }
.clear { clear: both; }
.fleft { float: left; }
.fleft { float: left; }
.fright { float: right; }
.fright { float: right; }
::selection {
::selection {
background: #444;
background: #444;
color: #FFF;
color: #FFF;
}
}
::-webkit-input-placeholder { color: #999; }
::-webkit-input-placeholder { color: #999; }
:-ms-input-placeholder { color: #999; }
:-ms-input-placeholder { color: #999; }
/* Transitions --------------------------------------- */
/* Transitions --------------------------------------- */
{
{
-webkit-transition: all 0s ease-in-out;
-webkit-transition: all 0s ease-in-out;
-moz-transition: all 0s ease-in-out;
-moz-transition: all 0s ease-in-out;
-ms-transition: all 0s ease-in-out;
-ms-transition: all 0s ease-in-out;
-o-transition: all 0s ease-in-out;
-o-transition: all 0s ease-in-out;
transition: all 0s ease-in-out;
transition: all 0s ease-in-out;
}
}
body a {
body a {
-webkit-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
}
.blog-title a,
.blog-title a,
.post-title a,
.post-title a,
.post-overlay,
.post-overlay,
.post-likes,
.post-likes,
.post-meta a,
.post-meta a,
.pagination,
.pagination,
.main-menu a,
.main-menu a,
.main-menu > .has-children > a::after,
.main-menu > .has-children > a::after,
.main-menu > .page_item_has_children > a::after,
.main-menu > .page_item_has_children > a::after,
.searchbutton,
.searchbutton,
.search-toggle,
.search-toggle,
.comment-form input[type="text"],
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="email"],
.comment-form textarea,
.comment-form textarea,
.form-submit #submit,
.form-submit #submit,
.widget_search .searchsubmit,
.widget_search .searchsubmit,
.widget_search .s,
.widget_search .s,
.format-gallery .flex-direction-nav a,
.format-gallery .flex-direction-nav a,
.nav-toggle .bar,
.nav-toggle .bar,
.dribbble-shot,
.dribbble-shot,
.flickr_badge_image a,
.flickr_badge_image a,
.post-content input[type="submit"],
.post-content input[type="submit"],
.post-content input[type="reset"],
.post-content input[type="reset"],
.post-content input[type="button"] {
.post-content input[type="button"] {
-webkit-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
}
.tothetop,
.tothetop,
.header,
.header,
.portfolio-item a .portfolio-header-container,
.portfolio-item a .portfolio-header-container,
.featured-media a img {
.featured-media a img {
-webkit-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
}
{
{
-webkit-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
}
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* 2. Structure
/* 2. Structure
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
.section {
.section {
position: relative;
position: relative;
padding: 80px 0;
padding: 80px 0;
}
}
.no-padding { padding: 0; }
.no-padding { padding: 0; }
.small-padding { padding: 40px 0; }
.small-padding { padding: 40px 0; }
.medium-padding { padding: 60px 0; }
.medium-padding { padding: 60px 0; }
.big-padding { padding: 100px 0; }
.big-padding { padding: 100px 0; }
.section-inner {
.section-inner {
max-width: 90%;
max-width: 90%;
width: 1400px;
width: 1400px;
margin: 0 auto;
margin: 0 auto;
}
}
.section-inner.content { width: 1440px; max-width: 92.6%; }
.section-inner.content { width: 1440px; max-width: 92.6%; }
.section-inner.wide { width: 1240px; }
.section-inner.wide { width: 1240px; }
.section-inner.thin { width: 700px; }
.section-inner.thin { width: 700px; }
.bg-dark { background-color: #1d1d1d; }
.bg-dark { background-color: #1d1d1d; }
.bg-graphite { background-color: #262626; }
.bg-graphite { background-color: #262626; }
.bg-grey { background-color: #f1f1f1; }
.bg-grey { background-color: #f1f1f1; }
.bg-image {
.bg-image {
background-size: cover;
background-size: cover;
background-position: center;
background-position: center;
background-repeat: no-repeat;
background-repeat: no-repeat;
}
}
.cover {
.cover {
position: absolute;
position: absolute;
top: 0;
top: 0;
right: 0;
right: 0;
bottom: 0;
bottom: 0;
left: 0;
left: 0;
}
}
.cover.shade-light { background: rgba(0,0,0,0.25); }
.cover.shade-light { background: rgba(0,0,0,0.25); }
.cover.shade-medium { background: rgba(0,0,0,0.5); }
.cover.shade-medium { background: rgba(0,0,0,0.5); }
.cover.shade-dark { background: rgba(0,0,0,0.75); }
.cover.shade-dark { background: rgba(0,0,0,0.75); }
/* columns */
/* columns */
.row .one-fourth { width: 21.5%; margin-left: 5%; float: left; }
.row .one-fourth { width: 21.5%; margin-left: 5%; float: left; }
.row .one-third { width: 30%; margin-left: 5%; float: left; }
.row .one-third { width: 30%; margin-left: 5%; float: left; }
.row .one-half { width: 47.5%; margin-left: 5%; float: left; }
.row .one-half { width: 47.5%; margin-left: 5%; float: left; }
.row .two-thirds { width: 65%; margin-left: 5%; float: left; }
.row .two-thirds { width: 65%; margin-left: 5%; float: left; }
.row .one-fourth:first-child,
.row .one-fourth:first-child,
.row .one-third:first-child,
.row .one-third:first-child,
.row .one-half:first-child,
.row .one-half:first-child,
.row .two-thirds:first-child { margin-left: 0; }
.row .two-thirds:first-child { margin-left: 0; }
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* 3. Header
/* 3. Header
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
.header { padding: 70px 0; }
.header { padding: 70px 0; }
.header .cover { background: rgba(29,29,29,0.25); }
.header .cover { background: rgba(29,29,29,0.25); }
.header-inner { position: relative; }
.header-inner { position: relative; }
.header .blog-logo { text-align: center; }
.header .blog-logo { text-align: center; }
.header .logo { display: inline-block; }
.header .logo { display: inline-block; }
.header .logo img {
.header .logo img {
max-height: 80px;
max-height: 80px;
width: auto;
width: auto;
}
}
.blog-title {
.blog-title {
font-family: 'Pacifico', sans-serif;
font-family: 'Pacifico', sans-serif;
font-size: 2.25em;
font-size: 2.25em;
text-align: center;
text-align: center;
text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
}
}
.blog-title a { color: #fff; }
.blog-title a { color: #fff; }
.blog-title a:hover { color: #13C4A5; }
.blog-title a:hover { color: #13C4A5; }
.blog-description {
.blog-description {
font-size: 1.1em;
font-size: 1.1em;
line-height: 110%;
line-height: 110%;
font-weight: 400;
font-weight: 400;
color: #999;
color: #999;
margin: 20px 0 0 0;
margin: 20px 0 0 0;
text-align: center;
text-align: center;
text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
}
}
/* search-toggle */
/* search-toggle */
.search-toggle {
.search-toggle {
display: block;
display: block;
width: 68px;
width: 68px;
height: 68px;
height: 68px;
background: url(images/icons/1x/spyglass-w.png) no-repeat center;
background: url(images/icons/1x/spyglass-w.png) no-repeat center;
background-size: 24px auto;
background-size: 24px auto;
opacity: 0.5;
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
}
}
.search-toggle.active {
.search-toggle.active {
opacity: 1;
-moz-opacity: 1;
-webkit-opacity: 1;
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
}
/* header search block */
/* header search block */
.header-search-block {
.header-search-block {
position: absolute;
position: absolute;
z-index: 10000;
z-index: 10000;
top: 0;
top: 0;
right: 0;
right: 0;
bottom: 0;
bottom: 0;
left: 0;
left: 0;
}
}
.header-search-block .section-inner { position: relative; }
.header-search-block .section-inner { position: relative; }
.header-search-block .s {
.header-search-block .s {
background: none;
background: none;
border: none;
border: none;
margin: 0;
margin: 0;
width: 90%;
width: 90%;
position: absolute;
position: absolute;
top: 50%;
top: 50%;
right: 5%;
right: 5%;
left: 5%;
left: 5%;
margin-top: -30px;
margin-top: -30px;
font-family: 'Roboto', sans-serif;
font-family: 'Roboto', sans-serif;
font-size: 2.5em;
font-size: 2.5em;
font-weight: 300;
font-weight: 300;
color: #fff;
color: #fff;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
}
}
.header-search-block .s:focus { outline: none; }
.header-search-block .s:focus { outline: none; }
.header-search-block .searchsubmit { display: none; }
.header-search-block .searchsubmit { display: none; }
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* 4. Navigation
/* 4. Navigation
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
.main-menu {
.main-menu {
font-family: 'Roboto Slab', sans-serif;
font-family: 'Roboto Slab', sans-serif;
font-size: 0.9em;
font-size: 0.9em;
text-align: center;
text-align: center;
}
}
.main-menu li { position: relative; }
.main-menu li { position: relative; }
.main-menu > li { float: left; }
.main-menu > li { float: left; }
.main-menu > li:before {
.main-menu > li:before {
content: "/";
content: "/";
display: block;
display: block;
position: absolute;
position: absolute;
right: 0;
right: 0;
top: 50%;
top: 50%;
margin-top: -9px;
margin-top: -9px;
margin-right: -3px;
margin-right: -3px;
font-size: 16px;
font-size: 16px;
color: #444;
color: #444;
font-weight: 300;
font-weight: 300;
z-index: 1000;
z-index: 1000;
}
}
.main-menu > li:last-child:before { content: none; }
.main-menu > li:last-child:before { content: none; }
.main-menu > li > a {
.main-menu > li > a {
display: block;
display: block;
padding: 27px;
padding: 27px;
font-size: 0.85em;
font-size: 0.85em;
color: #999;
color: #999;
text-transform: uppercase;
text-transform: uppercase;
letter-spacing: 1px;
letter-spacing: 1px;
font-weight: 700;
font-weight: 700;
}
}
.main-menu > li:first-child > a { margin-left: 0; }
.main-menu > li:first-child > a { margin-left: 0; }
.main-menu > .has-children > a,
.main-menu > .has-children > a,
.main-menu > .page_item_has_children > a { padding-right: 47px; position: relative; }
.main-menu > .page_item_has_children > a { padding-right: 47px; position: relative; }
.main-menu > .has-children > a::after,
.main-menu > .has-children > a::after,
.main-menu > .page_item_has_children > a::after {
.main-menu > .page_item_has_children > a::after {
content: "";
content: "";
display: block;
display: block;
border: 5px solid transparent;
border: 5px solid transparent;
border-top-color: #999;
border-top-color: #999;
position: absolute;
position: absolute;
z-index: 1001;
z-index: 1001;
right: 29px;
right: 29px;
top: 50%;
top: 50%;
margin-top: -2px;
margin-top: -2px;
}
}
.main-menu li:hover > a { cursor: pointer; color: #fff; }
.main-menu li:hover > a { cursor: pointer; color: #fff; }
.main-menu > .has-children:hover > a::after,
.main-menu > .has-children:hover > a::after,
.main-menu > .page_item_has_children:hover > a::after { border-top-color: #fff; }
.main-menu > .page_item_has_children:hover > a::after { border-top-color: #fff; }
/* Sub menus --------------------------------------- */
/* Sub menus --------------------------------------- */
.main-menu li ul {
.main-menu li ul {
position: absolute;
position: absolute;
z-index: 10000;
z-index: 10000;
display: block;
display: block;
left: -9999px;
left: -9999px;
top: 38px;
top: 38px;
opacity: 0;
-moz-opacity: 0;
-webkit-opacity: 0;
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
z-index: 999;
z-index: 999;
-webkit-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
}
}
.is_mobile .main-menu li ul {
.is_mobile .main-menu li ul {
opacity: 1;
-moz-opacity: 1;
-webkit-opacity: 1;
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
display: none;
display: none;
}
}
.main-menu > li > ul { padding-top: 20px; }
.main-menu > li > ul { padding-top: 20px; }
.main-menu > li > ul:before {
.main-menu > li > ul:before {
content: "";
content: "";
display: block;
display: block;
position: absolute;
position: absolute;
z-index: 1000;
z-index: 1000;
top: 0px;
top: 0px;
left: 50%;
left: 50%;
margin-left: -10px;
margin-left: -10px;
border: 10px solid transparent;
border: 10px solid transparent;
border-bottom-color: #2d2d2d;
border-bottom-color: #2d2d2d;
}
}
.main-menu ul li {
.main-menu ul li {
float: none;
float: none;
display: block;
display: block;
border-top: 1px solid rgba(255,255,255,0.075);
border-top: 1px solid rgba(255,255,255,0.075);
}
}
.main-menu ul li:first-child { border-top: none; }
.main-menu ul li:first-child { border-top: none; }
.main-menu ul > .has-children::after,
.main-menu ul > .has-children::after,
.main-menu ul > .page_item_has_children::after {
.main-menu ul > .page_item_has_children::after {
content: "";
content: "";
display: block;
display: block;
border: 6px solid transparent;
border: 6px solid transparent;
border-left-color: rgba(255,255,255,0.4);
border-left-color: rgba(255,255,255,0.4);
position: absolute;
position: absolute;
z-index: 1001;
z-index: 1001;
right: 10px;
right: 10px;
top: 50%;
top: 50%;
margin-top: -5px;
margin-top: -5px;
}
}
.main-menu ul > .has-children:hover::after,
.main-menu ul > .has-children:hover::after,
.main-menu ul > .page_item_has_children:hover::after { border-left-color: #FFF; }
.main-menu ul > .page_item_has_children:hover::after { border-left-color: #FFF; }
.main-menu ul li {
.main-menu ul li {
display: block;
display: block;
width: 240px;
width: 240px;
background: #2d2d2d;
background: #2d2d2d;
}
}
.main-menu ul a {
.main-menu ul a {
display: block;
display: block;
text-align: center;
text-align: center;
padding: 20px;
padding: 20px;
margin: 0;
margin: 0;
line-height: 130%;
line-height: 130%;
color: #999;
color: #999;
}
}
.main-menu ul a:hover { color: #fff; }
.main-menu ul a:hover { color: #fff; }
.main-menu li:hover > ul {
.main-menu li:hover > ul {
opacity: 1;
-moz-opacity: 1;
-webkit-opacity: 1;
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
left: 50%;
left: 50%;
margin-left: -120px;
margin-left: -120px;
top: 48px;
top: 48px;
}
}
.is_mobile .main-menu li:hover ul { display: block; }
.is_mobile .main-menu li:hover ul { display: block; }
/* Deep down --------------------------------------- */
/* Deep down --------------------------------------- */
.main-menu ul li ul { top: 5px; }
.main-menu ul li ul { top: 5px; }
.main-menu ul li:hover > ul {
.main-menu ul li:hover > ul {
top: 0;
top: 0;
left: 240px;
left: 240px;
margin-left: 0;
margin-left: 0;
}
}
.main-menu ul ul li { background: #3d3d3d; }
.main-menu ul ul li { background: #3d3d3d; }
.main-menu ul ul ul li { background: #4d4d4d; }
.main-menu ul ul ul li { background: #4d4d4d; }
.main-menu ul ul ul ul li { background: #4d4d4d; }
.main-menu ul ul ul ul li { background: #4d4d4d; }
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* 5. Content
/* 5. Content
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
.posts { overflow: visible !important; }
.posts { overflow: visible !important; }
.post-container {
.post-container {
width: 33.3%;
width: 33.3%;
padding: 0 1.5% 4.5% 1.5%;
padding: 0 1.5% 4.5% 1.5%;
}
}
.hentry,
.post {
.post {
width: 100%;
width: 100%;
position: relative;
position: relative;
background: #fff;
background: #fff;
border-radius: 3px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.1);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.1);
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
overflow: hidden;
overflow: hidden;
}
}
.post.sticky .post-header { padding-right: 17.5%; }
.post.sticky .post-header { padding-right: 17.5%; }
.post .sticky-post {
.post .sticky-post {
display: block;
display: block;
position: absolute;
position: absolute;
z-index: 100;
z-index: 100;
right: 5%;
right: 5%;
height: 38px;
height: 38px;
width: 26px;
width: 26px;
background: #2B3542 url(images/icons/1x/tack-w.png) no-repeat center;
background: #2B3542 url(images/icons/1x/tack-w.png) no-repeat center;
background-size: 12px auto;
background-size: 12px auto;
top: 0;
top: 0;
text-indent: -9999px;
text-indent: -9999px;
}
}
.post .sticky-post:after {
.post .sticky-post:after {
content: "";
content: "";
display: block;
display: block;
border: 13px solid transparent;
border: 13px solid transparent;
border-left-color: #2B3542;
border-left-color: #2B3542;
border-right-color: #2B3542;
border-right-color: #2B3542;
position: absolute;
position: absolute;
right: 0;
right: 0;
margin-top: -13px;
margin-top: -13px;
top: 38px;
top: 38px;
}
}
/* Featured media ----------------------------------------- */
/* Featured media ----------------------------------------- */
.featured-media a,
.featured-media a,
.featured-media img,
.featured-media img,
.featured-media iframe { display: block; }
.featured-media iframe { display: block; }
.featured-media iframe,
.featured-media iframe,
.featured-media object { border: none; margin: 0; }
.featured-media object { border: none; margin: 0; }
.featured-media a { overflow: hidden; }
.featured-media a { overflow: hidden; }
.featured-media a img { margin: 0 auto; }
.featured-media a:hover img {
.featured-media a:hover img {
-webkit-transform: scale(1.1);
-webkit-transform: scale(1.1);
opacity: 0.8;
-moz-transform: scale(1.1);
-moz-opacity: 0.8;
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-opacity: 0.8;
-webkit-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
}
}
.media-caption {
.media-caption {
font-size: 0.8em;
font-size: 0.8em;
line-height: 110%;
line-height: 110%;
font-weight: 700;
font-weight: 700;
color: #999;
color: #999;
padding: 20px 0;
padding: 20px 0;
margin: 0 10%;
margin: 0 10%;
border-bottom: 1px solid #eee;
border-bottom: 1px solid #eee;
}
}
/* Post inner ----------------------------------------- */
/* Post inner ----------------------------------------- */
.post-header {
.post-header {
position: relative;
position: relative;
padding: 8% 10%;
padding: 8% 10%;
border-bottom: 1px solid #eee;
border-bottom: 1px solid #eee;
}
}
.post-header .post-title {
.post-header .post-title {
font-family: 'Roboto Slab', sans-serif;
font-family: 'Roboto Slab', sans-serif;
font-size: 1.25em;
font-size: 1.25em;
line-height: 120%;
line-height: 120%;
font-weight: 700;
font-weight: 700;
color: #2B3542;
color: #2B3542;
word-break: break-word;
word-break: break-word;
-ms-word-break: break-word;
-ms-word-break: break-word;
}
}
.post-header .post-title a { color: #2B3542; }
.post-header .post-title a { color: #2B3542; }
.post-header .post-title a:hover { color: #13C4A5; }
.post-header .post-title a:hover { color: #13C4A5; }
.post-excerpt { padding: 10%; }
.post-excerpt { padding: 10%; }
.post-excerpt p {
.post-excerpt p {
font-size: 0.95em;
font-size: 0.95em;
line-height: 150%;
line-height: 150%;
color: #666;
color: #666;
}
}
.post-excerpt p + p { margin-top: 1em; }
.post-excerpt p + p { margin-top: 1em; }
.post-excerpt .more-link {
.post-excerpt .more-link {
display: block;
display: block;
margin-top: 1.1em;
margin-top: 1.1em;
}
}
.post-excerpt .more-link:hover { text-decoration: underline; }
.post-excerpt .more-link:hover { text-decoration: underline; }
.posts .post-meta {
.posts .post-meta {
background: #F9F9F9;
background: #F9F9F9;
padding: 0 10%;
padding: 0 10%;
}
}
.posts .post-meta a {
.posts .post-meta a {
display: block;
display: block;
color: #999;
color: #999;
font-size: 0.8em;
font-size: 0.8em;
font-weight: 700;
font-weight: 700;
float: left;
float: left;
padding: 20px 0px 20px 24px;
padding: 20px 0px 20px 24px;
background: no-repeat left center;
background: no-repeat left center;
background-size: 18px auto;
background-size: 18px auto;
margin-left: 20px;
margin-left: 20px;
}
}
.posts .post-meta a:first-child { margin-left: 0; }
.posts .post-meta a:first-child { margin-left: 0; }
.posts .post-meta a:hover { color: #13C4A5; }
.posts .post-meta a:hover { color: #13C4A5; }
.posts .post-meta a.post-date { background-image: url(images/icons/1x/clock-g.png); }
.posts .post-meta a.post-date { background-image: url(images/icons/1x/clock-g.png); }
.posts .post-meta a.post-date:hover { background-image: url(images/icons/1x/clock-c.png); }
.posts .post-meta a.post-date:hover { background-image: url(images/icons/1x/clock-c.png); }
.posts .post-meta a.zilla-likes { background-image: url(images/icons/1x/heart-g.png); }
.posts .post-meta a.zilla-likes { background-image: url(images/icons/1x/heart-g.png); }
.posts .post-meta a.zilla-likes:hover,
.posts .post-meta a.zilla-likes:hover,
.posts .post-meta a.zilla-likes.active { background-image: url(images/icons/1x/heart-c.png); color: #13C4A5; }
.posts .post-meta a.zilla-likes.active { background-image: url(images/icons/1x/heart-c.png); color: #13C4A5; }
.posts .post-meta a.post-comments { background-image: url(images/icons/1x/comment-g.png); }
.posts .post-meta a.post-comments { background-image: url(images/icons/1x/comment-g.png); }
.posts .post-meta a.post-comments:hover { background-image: url(images/icons/1x/comment-c.png); }
.posts .post-meta a.post-comments:hover { background-image: url(images/icons/1x/comment-c.png); }
.posts .post-meta a.post-edit-link {
.posts .post-meta a.post-edit-link {
height: 59px;
height: 59px;
width: 20px;
width: 20px;
text-indent: -9999px;
text-indent: -9999px;
background-image: url(images/icons/1x/edit-g.png);
background-image: url(images/icons/1x/edit-g.png);
background-size: 20px auto;
background-size: 20px auto;
background-position: center;
background-position: center;
}
}
.posts .post-meta a.post-edit-link:hover { background-image: url(images/icons/1x/edit-c.png); }
.posts .post-meta a.post-edit-link:hover { background-image: url(images/icons/1x/edit-c.png); }
/* Post formats ----------------------------------------- */
/* Post formats ----------------------------------------- */
/* format standard, format quote, format link */
/* format standard, format quote, format link */
.post .post-header:before,
.post .post-header:before,
.page .post-header:before {
.page .post-header:before {
content: "";
content: "";
display: block;
display: block;
border: 12px solid transparent;
border: 12px solid transparent;
border-top-color: #eee;
border-top-color: #eee;
position: absolute;
position: absolute;
z-index: 10;
z-index: 10;
bottom: 0;
bottom: 0;
left: 10%;
left: 10%;
margin-bottom: -24px;
margin-bottom: -24px;
}
}
.post .post-header:after,
.post .post-header:after,
.page .post-header:after {
.page .post-header:after {
content: "";
content: "";
display: block;
display: block;
border: 11px solid transparent;
border: 11px solid transparent;
border-top-color: #fff;
border-top-color: #fff;
position: absolute;
position: absolute;
z-index: 11;
z-index: 11;
bottom: 0;
bottom: 0;
left: 10%;
left: 10%;
margin-left: 1px;
margin-left: 1px;
margin-bottom: -21px;
margin-bottom: -21px;
}
}
/* format video, format image */
/* format video, format image */
.posts .format-video .post-header:before,
.posts .format-video .post-header:before,
.posts .format-video .post-header:after,
.posts .format-video .post-header:after,
.posts .format-image .post-header:before,
.posts .format-image .post-header:before,
.posts .format-image .post-header:after { content: none; }
.posts .format-image .post-header:after { content: none; }
/* format image */
/* format image */
.format-image .post-excerpt {
.format-image .post-excerpt {
padding-top: 7.5%;
padding-top: 7.5%;
font-size: 0.9em;
font-size: 0.9em;
}
}
.format-image .post-excerpt .image-caption { font-weight: 600; }
.format-image .post-excerpt .image-caption { font-weight: 600; }
/* format audio */
/* format audio */
.posts .format-audio .post-header:before,
.posts .format-audio .post-header:before,
.posts .format-audio .post-header:after { content: none; }
.posts .format-audio .post-header:after { content: none; }
.post-audio .mejs-container {
.post-audio .mejs-container {
max-width: 100%;
max-width: 100%;
height: auto !important;
height: auto !important;
background: #2B3542;
background: #2B3542;
padding: 3% 0;
padding: 3% 0;
color: #FFF;
color: #FFF;
position: relative;
position: relative;
}
}
.post-audio .mejs-controls .mejs-time-rail .mejs-time-handle,
.post-audio .mejs-controls .mejs-time-rail .mejs-time-handle,
.post-audio .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle,
.post-audio .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle,
.post-audio .mejs-controls .mejs-time-rail .mejs-time-float,
.post-audio .mejs-controls .mejs-time-rail .mejs-time-float,
.post-audio .mejs-controls .mejs-time-rail .mejs-time-float-current,
.post-audio .mejs-controls .mejs-time-rail .mejs-time-float-current,
.post-audio .mejs-mediaelement,
.post-audio .mejs-mediaelement,
.post-audio .mejs-layers {
.post-audio .mejs-layers {
display: none;
display: none;
}
}
.post-audio .mejs-controls .mejs-button button {
.post-audio .mejs-controls .mejs-button button {
cursor: pointer;
cursor: pointer;
display: block;
display: block;
text-indent: -9999px;
text-indent: -9999px;
}
}
.post-audio .mejs-playpause-button,
.post-audio .mejs-playpause-button,
.post-audio .mejs-time-rail,
.post-audio .mejs-time-rail,
.post-audio .mejs-volume-button,
.post-audio .mejs-volume-button,
.post-audio .mejs-horizontal-volume-slider {
.post-audio .mejs-horizontal-volume-slider {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 3% 0;
padding: 3% 0;
margin-left: 3%;
margin-left: 3%;
float: left;
float: left;
}
}
.post-audio .mejs-horizontal-volume-slider { margin-right: 3%; }
.post-audio .mejs-horizontal-volume-slider { margin-right: 3%; }
.post-audio .mejs-playpause-button,
.post-audio .mejs-playpause-button,
.post-audio .mejs-volume-button {
.post-audio .mejs-volume-button {
width: 6.25%;
width: 6.25%;
}
}
.post-audio .mejs-playpause-button button,
.post-audio .mejs-playpause-button button,
.post-audio .mejs-volume-button button,
.post-audio .mejs-volume-button button,
.post-audio .mejs-mute button,
.post-audio .mejs-mute button,
.post-audio .mejs-unmute button {
.post-audio .mejs-unmute button {
margin: 0 auto;
margin: 0 auto;
width: 100%;
width: 100%;
height: 31px;
height: 31px;
background: none;
background: none;
background-size: 18px auto;
background-size: 18px auto;
background-repeat: no-repeat;
background-repeat: no-repeat;
background-position: center;
background-position: center;
}
}
.post-audio .mejs-playpause-button.mejs-play button { background-image: url(images/icons/1x/audio/play.png); }
.post-audio .mejs-playpause-button.mejs-play button { background-image: url(images/icons/1x/audio/play.png); }
.post-audio .mejs-playpause-button.mejs-pause button { background-image: url(images/icons/1x/audio/pause.png); }
.post-audio .mejs-playpause-button.mejs-pause button { background-image: url(images/icons/1x/audio/pause.png); }
.post-audio .mejs-mute button,
.post-audio .mejs-mute button,
.post-audio .mejs-unmute button { background-size: 20px auto; }
.post-audio .mejs-unmute button { background-size: 20px auto; }
.post-audio .mejs-mute button { background-image: url(images/icons/1x/audio/audio-mute.png); }
.post-audio .mejs-mute button { background-image: url(images/icons/1x/audio/audio-mute.png); }
.post-audio .mejs-unmute button { background-image: url(images/icons/1x/audio/audio-unmute.png); }
.post-audio .mejs-unmute button { background-image: url(images/icons/1x/audio/audio-unmute.png); }
.post-audio .mejs-horizontal-volume-slider {
.post-audio .mejs-horizontal-volume-slider {
margin-top: 12px;
margin-top: 12px;
width: 16.25%;
width: 16.25%;
cursor: pointer;
cursor: pointer;
}
}
.post-audio .mejs-horizontal-volume-total,
.post-audio .mejs-horizontal-volume-total,
.post-audio .mejs-horizontal-volume-current,
.post-audio .mejs-horizontal-volume-current,
.post-audio .mejs-controls .mejs-time-rail span {
.post-audio .mejs-controls .mejs-time-rail span {
height: 8px;
height: 8px;
}
}
.post-audio .mejs-horizontal-volume-total { background: #222A34; }
.post-audio .mejs-horizontal-volume-total { background: #222A34; }
.post-audio .mejs-horizontal-volume-current {
.post-audio .mejs-horizontal-volume-current {
position: absolute;
position: absolute;
margin-top: -8px;
margin-top: -8px;
background: #13C4A5;
background: #13C4A5;
}
}
.post-audio .mejs-controls .mejs-time-rail {
.post-audio .mejs-controls .mejs-time-rail {
margin-top: 12px;
margin-top: 12px;
max-width: 56.25%;
max-width: 56.25%;
float: left;
float: left;
}
}
.post-audio .mejs-controls .mejs-time-rail span {
.post-audio .mejs-controls .mejs-time-rail span {
position: absolute;
position: absolute;
display: block;
display: block;
max-width: 100%;
max-width: 100%;
cursor: pointer;
cursor: pointer;
}
}
.post-audio .mejs-controls .mejs-time-rail .mejs-time-total { background: #555D67; }
.post-audio .mejs-controls .mejs-time-rail .mejs-time-total { background: #555D67; }
.post-audio .mejs-controls .mejs-time-rail .mejs-time-loaded {
.post-audio .mejs-controls .mejs-time-rail .mejs-time-loaded {
width: 0;
width: 0;
background: #222A34;
background: #222A34;
}
}
.mejs-controls .mejs-time-rail .mejs-time-current {
.mejs-controls .mejs-time-rail .mejs-time-current {
width: 0;
width: 0;
background: #13C4A5;
background: #13C4A5;
}
}
.post-audio .mejs-clear { clear: both; }
.post-audio .mejs-clear { clear: both; }
.post-audio .mejs-android .mejs-controls .mejs-playpause-button,
.post-audio .mejs-android .mejs-controls .mejs-playpause-button,
.post-audio .mejs-ios .mejs-controls .mejs-playpause-button,
.post-audio .mejs-ios .mejs-controls .mejs-playpause-button,
.post-audio .mejs-android .mejs-controls .mejs-time-rail,
.post-audio .mejs-android .mejs-controls .mejs-time-rail,
.post-audio .mejs-ios .mejs-controls .mejs-time-rail {
.post-audio .mejs-ios .mejs-controls .mejs-time-rail {
padding: 5% 0;
padding: 5% 0;
margin-left: 5%;
margin-left: 5%;
}
}
.post-audio .mejs-android .mejs-controls .mejs-playpause-button,
.post-audio .mejs-android .mejs-controls .mejs-playpause-button,
.post-audio .mejs-ios .mejs-controls .mejs-playpause-button { width: 15%; margin-left: 0; }
.post-audio .mejs-ios .mejs-controls .mejs-playpause-button { width: 15%; margin-left: 0; }
.post-audio .mejs-android .mejs-controls .mejs-time-rail,
.post-audio .mejs-android .mejs-controls .mejs-time-rail,
.post-audio .mejs-ios .mejs-controls .mejs-time-rail { max-width: 80%; margin-right: 5%; margin-left: 0; }
.post-audio .mejs-ios .mejs-controls .mejs-time-rail { max-width: 80%; margin-right: 5%; margin-left: 0; }
.post-audio .mejs-android .mejs-controls .mejs-volume-button,
.post-audio .mejs-android .mejs-controls .mejs-volume-button,
.post-audio .mejs-ios .mejs-controls .mejs-volume-button,
.post-audio .mejs-ios .mejs-controls .mejs-volume-button,
.post-audio .mejs-android .mejs-controls .mejs-horizontal-volume-slider,
.post-audio .mejs-android .mejs-controls .mejs-horizontal-volume-slider,
.post-audio .mejs-ios .mejs-controls .mejs-horizontal-volume-slider {
.post-audio .mejs-ios .mejs-controls .mejs-horizontal-volume-slider {
display: none;
display: none;
}
}
/* format quote, format link */
/* format quote, format link */
.post-quote {
.post-quote {
padding: 10%;
padding: 10%;
background: #2B3542;
background: #2B3542;
color: #fff;
color: #fff;
}
}
.post-quote blockquote,
.post-quote blockquote,
.post-link p {
.post-link p {
display: block;
display: block;
font-family: 'Roboto', sans-serif;
font-family: 'Roboto', sans-serif;
font-size: 1.2em;
font-size: 1.2em;
font-weight: 400;
font-weight: 400;
line-height: 140%;
line-height: 140%;
}
}
.post-quote cite,
.post-quote cite,
.post-link a {
.post-link a {
display: block;
display: block;
margin-top: 20px;
margin-top: 20px;
text-transform: uppercase;
text-transform: uppercase;
letter-spacing: 1px;
letter-spacing: 1px;
font-size: 0.8em;
font-size: 0.8em;
font-weight: 700;
font-weight: 700;
}
}
.post-quote cite { font-family: 'Roboto Slab', sans-serif; }
.post-quote cite { font-family: 'Roboto Slab', sans-serif; }
.post-quote cite:before { content: "— " }
.post-quote cite:before { content: "— " }
/* format link */
/* format link */
.post-link {
.post-link {
padding: 10%;
padding: 10%;
background: #2B3542;
background: #2B3542;
color: #fff;
color: #fff;
}
}
.post-link a {
.post-link a {
color: #13C4A5;
color: #13C4A5;
padding-left: 23px;
padding-left: 23px;
background: url(images/icons/1x/link-c.png) no-repeat left center;
background: url(images/icons/1x/link-c.png) no-repeat left center;
background-size: 16px auto;
background-size: 16px auto;
}
}
.post-link a:hover {
.post-link a:hover {
color: #13C4A5;
color: #13C4A5;
text-decoration: underline;
text-decoration: underline;
}
}
.single .post-link p,
.single .post-link p,
.single .post-quote blockquote {
.single .post-quote blockquote {
font-size: 1.75em;
font-size: 1.75em;
}
}
/* format gallery */
/* format gallery */
.format-gallery .flexslider { position: relative; }
.format-gallery .flexslider { position: relative; }
.format-gallery .flex-direction-nav a {
.format-gallery .flex-direction-nav a {
display: block;
display: block;
height: 32px;
height: 32px;
width: 20px;
width: 20px;
background-size: auto 32px;
background-size: auto 32px;
background-repeat: no-repeat;
background-repeat: no-repeat;
position: absolute;
position: absolute;
top: 50%;
top: 50%;
margin-top: -16px;
margin-top: -16px;
text-indent: -9999px;
text-indent: -9999px;
opacity: 0.5;
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
}
}
.format-gallery .flex-direction-nav .flex-prev {
.format-gallery .flex-direction-nav .flex-prev {
left: 16px;
left: 16px;
background-image: url(images/icons/1x/chevron-left-w-shade.png);
background-image: url(images/icons/1x/chevron-left-w-shade.png);
}
}
.format-gallery .flex-direction-nav .flex-next {
.format-gallery .flex-direction-nav .flex-next {
right: 16px;
right: 16px;
background-image: url(images/icons/1x/chevron-right-w-shade.png);
background-image: url(images/icons/1x/chevron-right-w-shade.png);
}
}
.format-gallery .flex-direction-nav a:hover {
.format-gallery .flex-direction-nav a:hover {
opacity: 1;
-moz-opacity: 1;
-webkit-opacity: 1;
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
}
.format-gallery .flex-direction-nav .flex-prev:hover { left: 12px; }
.format-gallery .flex-direction-nav .flex-prev:hover { left: 12px; }
.format-gallery .flex-direction-nav .flex-next:hover { right: 12px; }
.format-gallery .flex-direction-nav .flex-next:hover { right: 12px; }
.format-gallery .slides li { position: relative; }
.format-gallery .slides li { position: relative; }
/* format status */
/* format status */