/* Theme Name: Beverly Theme URI: http://www.stepanvich.cz/themes/Beverly Author: Štěpán Vích Author URI: http://www.stepanvich.cz Description: Beverly is an easy to use and retina ready theme with flexible layout that looks great on any device. This WordPress theme is great for blogging and includes custom post formats, theme settings, slide show, Ajax posts and much more. It is compatible with all of the major browsers and devices. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Copyright: (c) 2013 Štěpán Vích Tags: black, gray, white, blue, light, left-sidebar, custom-menu, editor-style, featured-images, post-formats, sticky-post, translation-ready, custom-colors, custom-background, threaded-comments, theme-options, responsive-layout, full-width-template, four-columns Text Domain: beverly */ /* * Table of Contents: * * 1.0 Reset. * 2.0 Repeatable patterns * 3.0 JS Fallback * 4.0 Flat Structure * 4.1 Buttons * 5.0 Content * 5.1 HTML Structure Elements * 5.2 Tables * 5.3 Images and Aligment * 6.0 Forms * 7.0 Gallery * 8.0 Left Navigation * 9.0 Widgets * 9.1 Search * 9.2 Calendar * 9.3 Recent Entries * 10.0 Post Card * 11.0 Post Formats * 11.1 Aside * 11.2 Link * 11.3 Quote * 12.0 Pagination * 13.0 Sticky * 14.0 Web Sections * 14.1 Author Bio * 15.0 Single post and page * 16.0 Image page * 17.0 Tags * 18.0 Comments * 19.0 404 * 20.0 Webkit Scrollers * 21.0 Loader * 22.0 Touch device style * 23.0 Media Queries * 23.1 Mobile and Tablet * 23.2 Print * 24.0 Link to Beverly theme author */ /* * 1.0 Reset */ *,*:before,*:after { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; word-wrap:break-word; line-height:1.2em; } html,body,button,input,select,textarea { font-family: "Source Sans Pro", "Arial", sans-serif; appearance:none; -moz-appearance:none; -webkit-appearance:none; color:#333; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; background-color:#CCC; padding-top:20px; } body.admin-bar { padding-top:52px; } video { width:100%; max-width:500px; height:auto; } ol, ul, li { list-style: none; } blockquote, q { quotes: none; display:block; font-style:italic; padding:6px; } blockquote p, q p { display:inline; } blockquote:after, q:after { content: ''; content: none; } blockquote:before, q:before { color: #ccc; content: "\e61a"; line-height: 0.1em; margin-right: 0.8em; vertical-align: 0.2em; } table { border-collapse: collapse; border-spacing: 0; } img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ } a { text-decoration:none; } a:hover { text-decoration:underline; } a:focus { outline-style:solid; outline-width:1px; } a::selection { color:#CCC; } a::-moz-selection { color:#CCC; } h1,h2,h3,h4,h5,h6 { clear:both; font-weight:bold; margin:0px; margin-bottom:15px; line-height:1em; } h1 { font-size: 45px; } h2 { font-size: 40px; } h3 { font-size: 35px; } h4 { font-size: 30px; } h5 { font-size: 25px; } h6 { font-size: 20px; } hr { background-color:#CCC; height:2px; border:none; display:block; } sub,sup { position:relative; } sub { top:0.4em; } sup { top:-0.4em; } b, strong { font-weight:bold; } i, em, cite { font-style:italic; } ::-webkit-input-placeholder { color:#999; } :-moz-placeholder { color:#999; } ::-moz-placeholder { color:#999; } :-ms-input-placeholder { color:#999; } /* * 2.0 Repeatable Patterns */ .left-menu .menu-item-has-children:after, .password-required:before, blockquote:before, q:before, .post-meta-cell a:before,.post-meta-cell time:before,.category-list:before, .link-list li:before, .author-bio .comments-count:after, .posts-count:after, #sticky-right-box:before { font-family:"genericons"; } .slot,.depth-1,.comment-respond,#new-post-slide,.gallery-item, .wp-caption img { box-shadow:0 1px 3px 0 rgba(120, 120, 120, 0.33); } nav,#mob-nav-background,input[type=submit],button,#loader-box,#left-sidebar-area .widget_search .text-area-box,#left-sidebar-area .widget_search .searchfield { background-color:#262626; } #logo,.left-menu a,.mob-icon,#left-sidebar-area .widget { background: linear-gradient(#292929, #242424); } .post-content del, .post-content strike, .post-content .caption,nav,#mob-nav-background,#left-sidebar-area .widget_search .searchfield,.search-img,.post-meta,.post-meta a,.link-list li:before,#text-404,.web-sec-name,.posts-count,.web-sec-description,.author-fullname + .author-nickname,.cat-info .cat-item,.cat-info .cat-item a,.author-links,.author-bio .comments-count,.author-links a,#last-modified,.tags,.tags li a,.comment-awaiting-moderation,.form-allowed-tags,.comment-date { color:#999; } sub,sup,.password-required,.post-meta,.posts-count,.web-sec-description,.cat-info .cat-item,.tags,.author-description,.author-links,.author-bio .comments-count { font-size:0.8em; } /* * 3.0 JS Fallback */ .js .posts-nav-pagination { display:none; } .no-js .right-box { opacity:1; } .no-js #loader, body.no-js #sticky-border-box { display:none; } .no-js .gal-box,.no-js .depth-1,.no-js .gallery-item,.no-js #respond { margin-bottom:20px; } .no-js #sticky-left-box { display:none; } .no-js #sticky-right-box { width:100%; height:100%; } .no-js nav { height:100%; overflow:auto; overflow-x:hidden; } /* * 4.0 Flat Structure */ .right-box { padding-left:270px; padding-right:20px; margin-bottom:20px; opacity:0; } .right-box.gal-box-top { padding-left:250px; padding-right:0; margin-bottom:0; } .text-content { padding:20px; } .slot,.depth-1,.comment-respond { background-color:#FFF; overflow:hidden; } .clear,.post-content, .text-content { clear:both; } /* 4.1 Buttons */ #new-post-slide { height:200px; display:block; background: url("icons/plus.svg") no-repeat center center scroll; background-size: auto 60%; } .post-edit-link, .comment-edit-link{ display:block; width:32px; height:32px; position:absolute; right:0px; top:0px; z-index:20; background-image:url("icons/edit.svg"); background-size:100% 100%; opacity:0; transition:opacity 200ms ease; } .post-card:hover .post-edit-link, .comment-inner:hover .comment-edit-link{ opacity:1; } .btn,.inline-pagination a { padding:1px 5px; font-size: 12px; line-height: 1.5; background-color: #fff; display: inline-block; margin-bottom: 0; font-weight: normal; color:#333; text-decoration:none; line-height: 1.428571429; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .btn:hover,.inline-pagination a:hover { background-color: #ebebeb; border-color: #adadad; } .btn:active,.inline-pagination a:active,.reply-show { background-color: #ebebeb; border-color: #adadad; -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.125); box-shadow: inset 0 3px 5px rgba(0,0,0,0.125) } .text-content .inline-pagination a { font-size: 100%; vertical-align: 0; word-spacing: 13px; display: inline-block; margin-right: 2px; margin-left: 2px; } .btn a { color:#333; text-decoration:none; display:block; padding:7px; overflow:hidden; } .dots, .current { font-size:12px; vertical-align: -1px; } .comment-childs { vertical-align:2px; } .icon-reply { padding-right: 3px; } /* * 5.0 Content */ .post-content table, .post-content pre, .post-content q, .post-content blockquote,.post-content dl, .post-content ul, .post-content ol { margin-left:auto; margin-right:auto; width:84%; } .post-content > *:last-child { margin-bottom:0; } /* 5.1 HTML Structure Elements */ .post-content,.post-content p { line-height:1.2em; } .post-content ul li,.post-content ol li { list-style-position:inside; } .post-content ul li { list-style-type:square; } .post-content ul ul li { list-style-type:disc; } .post-content ul ul ul li { list-style-type:circle; } .post-content ol li { list-style-type:decimal; } .post-content ol ol li { list-style-type:upper-roman; } .post-content ol ol ol li { list-style-type:upper-alpha; } .post-content abbr[title], .post-content acronym[title],.comment-content abbr[title], .comment-content acronym[title] { border-bottom-width:1px; border-bottom-style:dashed; display:inline-block; } .post-content ins, .post-content mark { color:#FFF; text-decoration:none; border-radius:0.2em; } .post-content address, .post-content dfn { font-style: italic; } .post-content pre { background-color:#E7E7E7; padding:1.15em; white-space: pre; white-space: pre-wrap; } code, .post-content kbd, .post-content samp { font-family:monospace,serif; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; background-color:#E7E7E7; } .post-content blockquote,.post-content q { display:block; border-left:4px solid #CCC; font-style:italic; padding:0.8em; background: rgb(247, 247, 247); -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } .post-content dt { font-weight:bold; margin-bottom:7px; } .post-content table, .post-content pre, .post-content q, .post-content blockquote,.post-content dl,.post-content dd,.post-content ul, .post-content ol, .post-content p { margin-bottom:15px; } .post-content dd { padding-left:20px; } .post-content dd:last-of-type { margin-bottom:0; } /* 5.2 Tables */ .post-content thead, .post-content th { color:#FFF; text-align:center; } .post-content tfoot { border-top:2px solid; } .post-content caption { font-weight:bold; text-align:left; margin-bottom:0.4em; } .post-content td { min-height: 30px; line-height: 30px; height: 1em; vertical-align: middle; padding: 4px; } .post-content tr:nth-of-type(odd) { background-color:rgb(247, 247, 247); } .post-content tr:nth-of-type(even) { background-color:rgb(210, 210, 210); } /* 5.3 Images */ .alignleft { float: left; } .alignright { float: right; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } img.alignleft { margin: 5px 20px 5px 0; } .wp-caption.alignleft { margin: 5px 10px 5px 0; } .post-card .wp-caption { margin:0px 0px 1em 0; width:100% !important; } img.alignright { margin: 5px 0 5px 20px; } .wp-caption.alignright { margin: 5px 0 5px 10px; } img.aligncenter { margin: 20px auto; } img.alignnone { margin: 5px 0; } .wp-caption .wp-caption-text, .entry-caption, .gallery-caption { color: #220e10; font-weight: bold; margin-bottom:0; margin-top:3px; } img.wp-smiley, .rsswidget img { border: 0; border-radius: 0; box-shadow: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* * 6.0 Forms */ textarea { width:100%; min-height:100px; resize:vertical; } input,input[type=text], input[type=password],input[type=email],input[type=tel],input[type=url],input[type=search], textarea { border:1px solid #ccc; box-shadow:inset 0 1px 3px rgba(0,0,0,0.1); border-radius:2px; outline:0px; font-size:100%; padding:0.5rem; max-width:100%; } input[type=submit],button,#loader-box { color:#CCC; border:none; border-radius:2px; padding:0.6em; font-size:0.9em; box-shadow:1px 1px 3px rgba(0,0,0,0.4); cursor:pointer; max-width:100%; } input[type=submit]:hover { background-color:#424242; } input[type=submit]:active { box-shadow:inset 0px 2px 4px rgba(0,0,0,0.4); } input:focus, textarea:focus { border:1px solid; } legend { font-weight:bold; } /* * 7.0 Gallery */ .gal-box-top.gallery { padding-left:0px; margin-left:-20px; margin-right:-20px; } .gallery-item, .wp-caption img { position: relative; } .gallery-caption { position: absolute; bottom: 0; padding: 10px; color: #FFF; width: 100%; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 100%); pointer-events: none; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(38, 38, 38, 0)), color-stop(100%,rgba(38, 38, 38, 1))); background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); } /* * 8.0 Left Navigation */ nav,#mob-nav-background { position:fixed; top:0px; left:0px; width:250px; min-height:100%; box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.33),4px 0 4px rgba(0,0,0,0.08); text-shadow:1px 1px #191919; } .admin-bar #logo { padding-top:32px; } #logo { text-align:center; font-size:1.75em; font-weight:bold; color: inherit; border-top: none; border-bottom: 1px solid #000; } #logo a { display:block; text-decoration:none; color:inherit; transition:color 250ms ease; -webkit-transition:color 250ms ease; padding: 50px 40px; line-height: 1.3em; } #logo a:hover { color:#d9d9d9; } .left-menu { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .left-menu .menu-item { min-height: 50px; position: relative; } .left-menu > .menu-item:last-of-type { box-shadow:0 1px 0px #393939; } .left-menu .menu-item-has-children > a { padding-right:45px; } .left-menu .menu-item-has-children:after { font-size:24px; content:"\e60d"; position:absolute; right:11px; z-index:20; top:17px; cursor:pointer; transition:transform 400ms ease; -webkit-transition:-webkit-transform 400ms ease; -ms-transition:-ms-transform 400ms ease; } .left-menu .submenu-is-open.menu-item-has-children:after { transform:rotate(90deg); -ms-transform:rotate(90deg); -webkit-transform:rotate(90deg); } .left-menu a{ line-height: 50px; text-transform: uppercase; text-decoration: none; display: block; height: 100%; width: 100%; padding-left: 12%; transition: all 0.2s linear; -webkit-transition: all 0.2s linear; letter-spacing: 1px; font-size: 1.25em; color: inherit; border-top: 1px solid #393939; border-bottom: 1px solid #000; padding-right: 25px; } .left-menu a:hover { background:#1B1B1B; color:#d9d9d9; } .left-menu a:active { border-top-color:transparent; } .left-menu .sub-menu { height:0px; overflow:hidden; } #mobile-icons { display:none; text-align:center; cursor:pointer; } .mob-icon { width: 50%; -moz-box-flex: 1; -o-box-flex:1; padding-left:0; border-right:1px solid #000; border-left:1px solid #393939; transition:none; border-top: 1px solid #393939; border-bottom: 1px solid #000; line-height:50px; } #menu-icon { vertical-align: -6px; font-size: 25px; } #widget-icon { font-size: 33px; vertical-align: -9px; } .button-set { border-top:none; border-left:none; background:#1B1B1B; padding-top:1px; padding-left:1px; } /* * 9.0 Widgets */ #left-sidebar-area .widget { border-bottom:1px solid #000; border-top:1px solid #393939; padding:9% 12%; } #left-sidebar-area .widgettitle { font-size:1.25em; font-weight:normal; letter-spacing:1px; text-transform:uppercase; margin-top:0px; } #left-sidebar-area .widget li { margin-bottom:3px; padding-bottom:3px; border-bottom:1px solid rgba(101, 98, 103, 0.12); } #left-sidebar-area .widget ul:last-of-type { margin-bottom:10px; } #left-sidebar-area .widget:last-of-type { box-shadow:0 1px 0px #393939; } /* * 9.1 Search */ #left-sidebar-area .widget_search .text-area-box { width:100%; height:50px; border:1px solid #000; border-radius:3px; position:relative; } #left-sidebar-area .widget_search .searchfield { border:none; width:100%; height:100%; padding-right:50px; padding-left:14px; text-shadow: inherit; letter-spacing:1px; font-size: 1.25em; transition:background-color 0.2s ease,color 0.2s ease; -webkit-transition:background-color 0.2s ease,color 0.2s ease; } #left-sidebar-area .widget_search .searchfield:focus { background-color:#1B1B1B; color:#d9d9d9; } .search-img { font-size: 1.25em; vertical-align: -3px; transition:color 0.2s ease; text-shadow:2px 2px 2px rgba(0, 0, 0, 0.14) } .searchfield:focus + .searchsubmit .search-img { color:#d9d9d9; } .search-img:hover { -webkit-transform:scale(1.2); } .searchsubmit { box-shadow: none; position: absolute; right: 0; top: 0; width: 50px; background: transparent; height: 100%; } /* * 9.2 Calendar */ #wp-calendar { width:100%; } /* * 9.3 Recent Entries */ .widget_recent_entries .post-date { display:block; } /* * 10.0 Post Card */ .post-card,.rel-box { position:relative; } .post-permalink { font-size:1em; margin:0; } .post-card .post-permalink+.post-meta { margin-top:5px; } .media-box { position:relative; } .glass { position:absolute; width:100%; height:100%; pointer-events:none; transition: background-color 300ms ease; -webkit-transition: background-color 300ms ease; } .media-box:hover .glass { background-color:transparent; background-color:rgba(255,255,255,0.2); } #sticky-link { display:block; position:absolute; width:100%; height:100%; } .password-required { background-color: rgb(247, 247, 247); color: #838383; } .password-required:before { content: "\e601"; padding-right: 4px; } .post-card-cell { padding:7px; border-top:1px dashed #DEDEDE; } .post-card-cell:not(:empty):first-of-type { border-top:none; } .post-card-cell:empty { display:none; } .media-box + .post-card-cell { border-top:none; } .post-meta-couple { display:inline-block; word-break: break-all } .post-meta-cell { display:inline-block; margin-right:10px; } .post-meta-cell a:before, .category-list:before,.post-meta-cell time:before { display: inline-block; padding-right:3px; } .post-meta .author:before { content:"\e60b"; } .post-meta time:before { content:"\e608"; font-size: 0.85em; } .post-meta .category-list:before { content:"\e604"; } .post-meta .comments-count:before,.author-bio .comments-count:after { content:"\e606"; vertical-align:-1px; } .post-card .post-content h1 { font-size:19px; } .post-card .post-content h2 { font-size:18px; } .post-card .post-content h3 { font-size:17px; } .post-card .post-content h4 { font-size:16px; } .post-card .post-content h5 { font-size:15px; } .post-card .post-content h6 { font-size:14px; } .post-card .post-content table,.post-card .post-content pre,.post-card .post-content q,.post-card .post-content blockquote,.post-card .post-content dl,.post-card .post-content ol,.post-card .post-content ul { margin-left:0; margin-right:0; width:100%; tab-size:2; } .post-card .post-content dd { padding-left:0; } /* * 11.0 Post formats */ /* * 11.1 Aside */ .post-card.format-aside { background:#ABABAB; color:#FFF; } .post-card.format-aside .post-permalink { padding:7px 7px 0px 7px;; } .post-card.format-aside .post-content a { text-decoration:underline; } .post-card.format-aside .post-content ins,.post-card.format-aside .post-content mark { background-color:#FFF; color:#ABABAB; } .post-card.format-aside .post-content del,.post-card.format-aside .post-content strike,.post-card.format-aside .post-content caption,.post-card.format-aside .post-permalink a,.post-card.format-aside .post-content a,.post-card.format-aside .post-content q:before,.post-card.format-aside .post-content blockquote:before { color:#FFF; } .post-card.format-aside .post-content q,.post-card.format-aside .post-content blockquote { border:none; background:transparent; border-left: 1px dashed #FFF; border-right: 1px dashed #FFF; } .post-card.format-aside .post-content abbr,.post-card.format-aside .post-content acronym { border-color:#FFF; } .post-card.format-aside .post-content tr { background:transparent; border-bottom:1px solid #FFF; border-top:1px solid #FFF; } .post-card.format-aside .post-content pre { background-color:transparent; padding:0; } .format-aside .password-required { border-top: none; background: transparent; color: inherit; } /* * 11.2 Link */ .link-list li:before{ content:"\e60f"; margin-right:5px; font-size:12px; } /* * 12.0 Pagination */ .prev-post, .next-post { margin:20px; max-width:36%; } .posts-nav-pagination .next-page, .next-post { float:right; margin-left:0; } .posts-nav-pagination .prev-page, .prev-post { float:left; margin-right:0; } .posts-nav-pagination a { padding:7px; display:block; } .prev-page, .next-page { margin-bottom:20px; } /* * 13.0 Sticky */ #sticky-padding-box { padding-right:320px; } #sticky-right-box{ right:0px; top:0px; width:300px; position:absolute; } #sticky-left-box,#sticky-right-box{ height:300px; } #sticky-top-box{ height:300px; position:relative; } #sticky-right-box .sticky{ overflow:hidden; height:50px; position:relative; z-index:1; border-bottom:1px dashed #DEDEDE; -webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; -o-column-break-inside:avoid; -ms-column-break-inside:avoid; column-break-inside:avoid; } #sticky-right-box .sticky:nth-of-type(7) { border-bottom:none; } #sticky-border-box{ top:0px; left:0px; background-color:#DEDEDE; position:absolute; width:100%; height:50px; z-index:0; } #sticky-left-box{ overflow:hidden; position:relative; } #sticky-right-box .img-attach,#sticky-right-box .text-attach{ display:none; } #sticky-left-box .img-attach,#sticky-left-box .text-attach{ pointer-events:none; position:absolute; background-color:#FFF; opacity:0; } .img-attach img{ width:auto; height:auto; min-width:100%; min-height:100%; } #sticky-left-box .img-attach{ width:100% } #sticky-left-box .text-attach{ width:100%; height:100%; padding:20px; } #sticky-left-box .text-attach:after { content: ""; display: block; width: 100%; height: 80px; left: 0px; bottom: 0px; position:absolute; background: rgb(255,255,255); background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(255,255,255,0)', endColorstr='#ffffff',GradientType=0 ); } .sticky-excerpt,.sticky-permalink { height: 1.1em; line-height:1.1em; overflow: hidden; display: inline-block; position: relative; word-break:break-all; } .dotted { padding-right:16px; } .dotted:after { position: absolute; top: 1px; right: 0px; content:"..."; } .sticky-excerpt:empty,.sticky-permalink:empty { padding-right: 12px; } .sticky-excerpt:empty:after,.sticky-permalink:empty:after { content:"--"; } /* * 14.0 Web Sections */ aside, #sticky-right-box .sticky { padding:7px; } .web-sec { padding:7px; } .web-sec-name { font-size:1.1em; margin-bottom:3px; } .web-sec-title { font-size: 1.2em; } .posts-count,.web-sec-description { margin-top:13px; } .author-bio .posts-count { margin-right:3px; } .posts-count:after { font-size:16px; vertical-align:-2px; content: "\f100"; } /* * 14.1 Author Bio */ .author-bio-table { width:100%; } .author-names { vertical-align:top; } .author-fullname,.author-nickname { font-weight:bold; font-size:1.2em; } .author-fullname + .author-nickname { font-weight:normal; font-size:0.9em; font-style:italic; } .author-avatar .avatar { float:right; border-radius:50%; transition:border-radius 0.2s ease; -webit-transition:border-radius 0.2s ease; } .author-avatar .avatar:hover { border-radius:0; } .author-description,.author-links,.author-bio .comments-count { margin-top:13px; } .author-meta { margin-top:3px; } .author-links a { text-decoration:none; font-size:1.5em; transition:color 200ms ease; } .author-links a:hover { color:#333; text-decoration:none; } .author-bio .comments-count:after { font-size:12px; padding-left:3px; } .author-bio .posts-count,.author-bio .comments-count { color:#333; } /* * 15.0 Single Post and Page */ .single .post-content,body.page .post-content { margin-top:30px; padding-right:15%; } #last-modified { padding-top:30px; } .single .post-content>p:first-child,body.page .post-content>p:first-child,#sticky-left-box .post-content>p:first-child { font-weight:bold; } .single .tags { margin-top:10px; } .single .tags li a { line-height: 26px; padding: 0 17px 0 10px; margin: 0 10px 10px 0; } .single .tags li a:after { border-bottom: 13px solid transparent; border-left: 10px solid #eee; border-top: 13px solid transparent; } .single .wp-post-image,body.page .wp-post-image { width:100%; height:auto; } #thumbnail-clip { max-height: 350px; overflow: hidden; } .single .post-meta,body.page .post-meta { font-size:1em; margin-top:-6px; } .single .post-meta-cell, body.page .post-meta-cell { margin-right:0; } [class^="icon-"] + .post-format-type, [class*=" icon-"] + .post-format-type { margin-left:5px; } .post-meta-cell .icon-link { font-size:85%; } /* * 16.0 Image page */ .attachment-excerpt, .attachment-image { margin-top:20px; } .full-size-link a { border:1px solid; padding:4px; border-radius:4px; display:inline-block; } .full-size-link { display:block; margin-top:7px; } /* * 17.0 Tags */ .tags { list-style: none; margin: 0; overflow: hidden; padding: 0; margin-bottom:-10px; } .tags li { float: left; } .tags li a { background: #eee; display: inline-block; line-height: 22.88px; padding: 0 14.96px 0 8.8px; position: relative; margin: 0 8.8px 8.8px 0; text-decoration: none; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; z-index: 0; font-size: 11.44px; } .tags li a:after { background: #fff; border-bottom: 11.44px solid transparent; border-left: 8.8px solid #eee; border-top: 11.44px solid transparent; content: ''; position: absolute; right: 0; top: 0; z-index: -1; } .tags li a:hover { color: #FFF; } .tag:focus { outline-offset:-2px; } /* * 18.0 Comments */ .comment { position:relative; } .comment-inner { padding:11px; } .comment-reply-link { display:none; } .comment-inner:hover .comment-date { display:none; } .comment-inner:hover .comment-reply-link { display:block; } .comment .comment-respond { box-shadow:none; } .comment-content { margin-top:10px; } .comment-meta { vertical-align:top; } .comment-author { font-weight:bold; } .comment-author a { text-decoration:none; color:#333; } #url, #email, #author { margin-bottom:0.25em; width:100%; } #commentform textarea { margin-top:13px; margin-bottom:10px; } .form-allowed-tags { font-size:0.85em; } #comments :target { animation: targetHighlight 1s; -webkit-animation: targetHighlight 1s; } #comments { padding-top: 20px; margin-top: -20px; } .comment-respond { padding:9px; } #comments-status{ font-size:1.35em; } .comment-reply-title { font-size:1.2em; } .comment-awaiting-moderation { font-style: italic; margin-top: 7px; padding-top: 3px; display: inline-block; } .comment:not(.depth-1) { display:none; border-top:1px solid #DEDEDE; } .comment.bypostauthor { border-top:4px solid; } /* * 19.0 404 Page */ #text-404 { text-align:center; font-weight:bold; font-size:4.5em; } /* * 20.0 Scrollers */ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background-color:#CCC; } ::-webkit-scrollbar-thumb { background-color:#262626; } /* * 21.0 Loader */ #loader { text-align:center; padding-bottom:20px; padding-left:250px; width:100%; position:fixed; top:215px; pointer-events:none; } #loader-box { width:70px; padding:10px; display:inline-block; } #loader.block { position:static; } /* * 22.0 Touch device */ .touch .comment-reply-link,.touch .comment-inner:hover .comment-date,.touch .comment-edit-link,.touch .post-edit-link { display:block; } /* * 23.0 Media Queries */ /* * 23.1 Tablet and Mobile */ @media (max-width:700px) { #wpadminbar { display:none !important; } .admin-bar #logo { padding-top:0px; } nav{ position:static; width:100%; margin-bottom:20px; } #loader { padding-left:0; } .right-box { padding-left:20px; } .right-box.gal-box-top { padding-left:0px; } body,body.admin-bar{ padding-top:0px; } .post-card:hover .post-edit-link, .comment-inner:hover .comment-edit-link,.left-menu,#left-sidebar-area,#mob-nav-background{ display:none; } ::-webkit-scrollbar { display:none; } #mobile-icons { display:block; } .menu-is-open { display:block !important; } #mobile-icons { width:100%; display:-moz-box; display:-webkit-box; display:-ms-flexbox; display:box; } } @media (max-width: 1000px) { .single .post-content, .page .post-content { padding-right:0; } .post-content table, .post-content pre, .post-content q, .post-content blockquote,.post-content dl, .post-content ul, .post-content ol { margin-left:0; margin-right:0; width:100%; } #sticky-padding-box { display:none; } #sticky-right-box { position:static; width:auto; height:auto; } #sticky-right-box:before { content:"\e609"; font-size:1.5em; position:absolute; right:1px; top:3px; color: #999; } #sticky-top-box { height:auto; } #sticky-border-box { display:none; } } @media (min-width:525px) and (max-width:1000px) { #sticky-right-box { column-gap:0; -moz-column-gap:0; -webkit-column-gap:0; column-rule:1px dashed #DEDEDE; -webkit-column-rule:1px dashed #DEDEDE; -moz-column-rule:1px dashed #DEDEDE; } } @media (max-width:525px) { #sticky-right-box .sticky:last-of-type { border-bottom:none; } } /* * 23.2 Print */ @media print { #sticky-top-box, nav,#wpadminbar,#new-post-slide,.comment-respond,.comment-edit-link,.comment-reply-link,.post-edit-link,#mob-nav-background,.pagination,.inline-pagination,.posts-nav-pagination { display:none; } #loader { visibility:hidden; } body,body.admin-bar { padding-top:0px; } body:before { font-size:2.5em; font-weight:bold; padding:20px; display:block; } a { text-decoration:underline; } .post-content a,.comment-content a { color:#000; } .post-content a:after,.comment-content a:after { content:" (" attr(href) ") "; font-size:90%; font-style:italic; } .post-content a[href^="#"]:after, comment-content a[href^="#"]:after { display: none; } .post-content abbr[title], .post-content acronym[title],.comments-content abbr[title], .comment-content acronym[title] { border-bottom-style:none; } abbr[title]:after, acronym[title]:after { content:" (" attr(title) ") "; } .right-box { padding-left:20px; } .right-box.gal-box-top { padding-left:0px; } html,body,.comment-author a { background:#FFF !important; color:#000; } .single .post-content,.page .post-content { padding-right:0; } .slot, .depth-1 { border:1px solid #DEDEDE; box-shadow:none; } h1, h2, h3, h4, h5, h6 { page-break-after:avoid; page-break-inside:avoid } img { page-break-inside:avoid; page-break-after:avoid; } blockquote, table, pre { page-break-inside:avoid } ul, ol, dl { page-break-before:avoid } .post-card,.comment { page-break-inside:avoid; } #comments { page-break-before:always; } } /* * 24.0 Link to Beverly theme author * You can easily remove this part, but please don't do it. */ #author-link { color:grey; margin-top:15px; margin-right:15px; font-size:0.9em; text-align:right; font-style:italic; } #author-link a{ color:grey; }