/***** RESET *****/ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { height: 100%; } ul{ list-style: none; margin: 0; padding: 0; } body, p, h1, h2, h3 { margin: 0; } /***** CLEARFIX *****/ .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } /***** TYPE *****/ body { font-family: Georgia, serif; font-size: 100%; line-height: 1.4; color: #000; background: #fff; } h1 { font-size: 1.4em; } h2 { font-size: 1.3em; } h3 { font-size: 1.2em; } h4 { font-size: 1.1em; } h5 { font-size: 1em; } h6 { font-size: 0.9em; } h1, h2, h3, h4, h5, h6, .site-title, .postlist, legend { font-family: 'Raleway', sans-serif; font-weight: 600; } a { color: #000; } ol { padding-left: 30px; } pre { font-family: Courier, monospace; font-size: 0.9em; white-space: pre-wrap; } code, kbd { font-family: Courier, monospace; } abbr[title], acronym[title] { font-style: italic; cursor: help; } form > * { margin-bottom: 10px; } fieldset { border: 0; padding: 10px 0; margin: 0 0 10px; } label { margin: 0; font-size: 0.9em; } textarea, input, select { max-width: 100%; margin: 2px 2px 10px 2px; border: 1px solid; color: inherit; background: inherit; padding: 5px; } button { margin: 2px 2px 10px 2px; } textarea { min-width: 240px; min-height: 100px; } input, select, button { height: 32px; font-family: Georgia, serif; font-size: .9em; } input[type=radio], input[type=checkbox] { height: auto; margin: 5px 5px 2px 2px; } input[type=file] { height: auto; } table { border: 1px solid; border-spacing: 0; } th, td { padding: 5px; border-right: 1px solid; border-bottom: 1px solid; } td:first-child { text-align: right; } th:last-child, td:last-child { border-right: 0; } tbody tr:last-child th, tr:last-child td { border-bottom: 0; } hr { border-top: 1px solid; border-bottom: 0; } /***** ACCESSIBILITY *****/ /* set proper keyboard focus on links containing images */ a, .imagebox a img { margin: 2px; } figure > a, figure.gallery-item a, .permalink > a { display: block; } .perma-image a { margin: 0; } a:focus, input:focus, button:focus, textarea:focus, select:focus, .imagebox a:focus > img, .perma-image a:focus > img, figure a[rel~="attachment"]:focus, a:focus > img { outline: 2px solid #16B4D0; } .main:focus, .imagebox a:focus, .perma-image a:focus, figure a:focus > img, a[rel~="attachment"]:focus, a:active, button:active, .imagebox a:active > img, .perma-image a:active > img, figure a[rel~="attachment"]:active, a:active > img { outline: none; } a > img { border: 0; } /* hide text for screen readers and skip to main content link */ .screenread, .screen-reader-text { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } .skip:focus { top: 1em; left: 1em; width: auto; height: auto; clip: auto; background-color: #fff; border-radius: 3px; border: 2px solid #666; color: #666; font-size: 100%; font-weight: bold; padding: 15px 23px 14px; z-index: 100000; } /***** RESIZABLE EMBEDS *****/ .wp-video, .wp-video-playlist { position: relative; margin: 0 auto 40px !important; } /***** IMAGES *****/ .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail, .postbody img, .pagebody img, .image-att img { max-width: 100%; height: auto; } .alignright { float: right; margin: 0 0 20px 60px; } .alignleft { float: left; margin: 0 60px 20px 0; } .aligncenter { margin: 0 auto 20px; display: block; } figure { margin: 0 0 20px; max-width: 100%; } figcaption { font-size: 0.9em; } figcaption, .gallery-caption, .wp-caption, .wp-caption-text, .entry-caption p:first-child { font-style: italic; } /***** STRUCTURE *****/ .container { width: 98%; margin: 10px auto; } header { text-align: center; } .site-title { font-size: 1.9em; } .site-title a { text-decoration: none; color: inherit; margin: 0; } .sub-title { font-size: 0.9em; } /***** NAVIGATION *****/ .header-men { position: relative; margin: 20px 0; } .mobile-toggle { background: transparent; border: 0px solid #000; position: relative; cursor: pointer; font-size: 0; height: 28px; width: 28px; } .mobile-toggle:before { content: ""; width: 28px; position: absolute; top: 4px; left: 0; height: 20px; border-top: 12px double; border-bottom: 4px solid; color: inherit; font-size: 22px; } .headmen { display: none; } .toggled-on .headmen { display: block; } .menu-item { font-size: 1.2em; display: block; } .menu-item a { margin: 5px 3px; display: block; } .menu-item ul li { font-size: 0.9em; } .menu-item ul ul ul ul li { font-size: 1em; margin-top: 0; } ul.sub-menu { padding-left: 0; } .navs { font-size: 1.2em; position: relative; height: 100%; overflow: hidden; margin-bottom: 40px; } .nav-next { float: right; } .previous-image { float: left; } .parent-post-link { position: absolute; left: 33%; top: 0; text-align: center; width: 33%; } .next-image { float: right; text-align: right; } /***** POST AND CAT INDEXES *****/ .title { margin-bottom: 20px; text-align: center; } .cat-title { margin-bottom: 10px; } .catdescript { font-size: 0.9em; } .permalink { max-width: 400px; margin: 0 auto 20px; position: relative; } .permalink img { width: 100%; height: auto; } .permalink > a { margin-bottom: -6px; } .perma-title { font-size: 1em; font-weight: 400; font-family: Georgia, serif; } .perma-has-img{ text-decoration: none; position: absolute; bottom: 10px; left: 10px; max-width: 90%; background: #fff; padding: 5px 10px; } .sticky { border: 1px solid; padding: 5px; } /***** SINGLE POSTS AND PAGES *****/ .postbody, .pagebody { overflow: hidden; } .postbody > *, .pagebody > * { margin-bottom: 30px; } .postbody ul, .pagebody ul { list-style: disc; padding-left: 30px; } figure { margin-left: auto; margin-right: auto; } .gallery figure { max-width: 400px; } .gallery-item img { width: 100%; height: auto; } figure img { margin-bottom: -6px; } .page-links { font-size: 1.1em; margin-bottom: 20px; } .post-tags { text-align: center; margin-bottom: 20px; font-size: 0.9em; } .post-tags a { margin-right: 10px; } .post-tags a:last-child { margin-right: 0; } /***** COMMENT FORM *****/ .comments { text-align: center; margin: 0 auto 40px auto; } .comment-reply-title { margin-bottom: 20px; } .logged-in-as, .form-allowed-tags, .comment-notes { font-size: 0.8em; margin-bottom: 20px; } .comment-form label { display: block; font-size: 0.9em; margin: 10px 0 5px; } .form-allowed-tags { width: 350px; margin: 0 auto 20px; } .comment-body { position: relative; } .commentitle, .comment-body { margin-bottom: 20px; } .comment-meta, .comment-content { margin-bottom: 10px; } .comment, .pingback { text-align: left; margin-bottom: 20px; padding: 10px; } .bypostauthor { border: 1px solid; } .comment-author img, .comment-content img { width: auto; } .comment-metadata { font-size: 0.9em; position: absolute; top: 0; left: 38px; } .reply { font-size: 0.9em; text-align: right; } .comnav .nav-previous { float: left; } /***** ATTACHMENT PAGES *****/ .attachment header, .attachment footer { display: none; } .attachment, .attachment .container, .image-att { height: 100%; } .image-att { text-align: center; } .image-att .navs { height: auto; margin-bottom: 0; } .imagebox { display: inline-block; max-width: 100%; margin-bottom: 20px; height: 85%; } .imagebox a { margin: 0; height: 100%; display: block; } .attachbox { margin-bottom: 10px; height: 90%; } .attachbox img { max-width: none; width: auto; height: 100%; } .imagebox .entry-caption { overflow: hidden; margin-bottom: 20px; text-align: left; } /***** WIDGETS *****/ .widget-area { padding: 0 0 20px; text-align: center; } .widget { margin: 0 0 40px; } .widget_calendar { display: flex; justify-content: center; } /***** SEARCH *****/ .search-field { height: 36px; border: 1px solid; color: #000; background: #fff; } /***** MEDIA QUERIES *****/ @media screen and (min-width: 41em) { /***** RESIZABLE EMBEDS *****/ .wp-video, .wp-video-playlist { width: 60%; height: 60%; } .mejs-audio { max-width: 60%; margin: 0 auto 40px; } /***** STRUCTURE *****/ .container { width: 90%; margin-top: 20px; } header { text-align: left; margin-bottom: 60px; } .titles { float: left; max-width: 48%; } .header-men { float: right; margin-top: 0; max-width: 48%; } .main { overflow: hidden; } .main.hasside { display: inline-block; vertical-align: top; width: 69%; } .side-widget { display: inline-block; vertical-align: top; width: 27%; margin: 0 auto 0 3%; padding: 0; border: 0; text-align: right; } .side-widget aside { float: right; clear: right; } .side-widget li { margin-bottom: 5px; } .widgetit, .widgetit a { font-size: 1em; margin-bottom: 10px; } .widgetit a img { display: none; } .footer-widget { text-align: left; } /***** NAVIGATION *****/ .mobile-toggle { display: none; } .headmen { display: block; text-align: right; } .headmen > li { margin-top: 2px; margin-left: 10px; } .menu-item { display: inline-block; vertical-align: top; position: relative; background: #fff; padding: 1px; margin-top: 2px; } .menu-item a { white-space: nowrap; padding: 5px 2px; margin: 3px; } .header-men .menu-item ul, .side-widget .menu-item ul { position: absolute; top: 100%; right: 0; z-index: 10; text-align: right; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } .sub-menu { margin: 0; } .header-men .menu-item:hover > ul, .header-men .menu-item.focus > ul { clip: auto; height: auto; width: auto; overflow: visible; } .menu-item ul li { width: 100%; } .header-men .menu-item ul li:hover > ul, .header-men .menu-item ul .focus > ul { top: 0; right: 100%; left: auto; clip: auto; height: auto; width: auto; overflow: visible; } .widget-area .menu { overflow: visible; width: 100%; padding: 2px; } .side-widget .menu .menu-item { float: right; clear: right; } .side-widget .menu-item a { padding: 5px 2px 5px 20px; } .side-widget .menu-item ul { top: 0; right: 100%; } .side-widget .menu-item:hover > ul, .side-widget .menu-item.focus > ul { display: block; } .footer-widget { display: flex; justify-content: space-between; flex-wrap: wrap; } .footer-widget aside { float: left; margin-right: 60px; } .footer-widget aside:last-child { margin-right: 0; } .footer-widget .menu-item { margin-right: 10px; } .footer-widget .menu-item:last-child { margin-right: 0; } .footer-widget .menu-item ul li { width: auto; display: block; } /***** POSTS *****/ .title { text-align: left; margin-bottom: 40px; } /***** MAIN POST INDEX AND CATEGORIES *****/ .permalink { float: left; width: 45%; max-width: none; margin: 3px 8.5% 50px 3px; } .permalink:nth-child(2n+2) { margin-right: 0; } .permalink:nth-child(2n+1) { clear: left; } /***** POSTS *****/ /***** POSTS SINGLE IMAGES *****/ .postbody img, .pagebody img { width: auto; max-width: 100%; height: auto; } figcaption { text-align: left; } /***** POSTS GALLERIES *****/ .gallery { overflow: hidden; margin-bottom: 0; } .gallery-item { float: left; overflow: hidden; text-align: left; } .gallery-icon img { width: 100%; } .gallery-columns-1 .gallery-item { margin: 0 auto 40px auto; float: none; } .gallery-columns-2 { max-width: 100%; margin-left: auto; margin-right: auto; } .gallery-columns-2 figure { width: 42%; min-width: 42%; margin: 0 4% 40px; } .gallery-columns-2 figure:nth-child(odd) { clear: left; } .gallery-columns-3 figure { width: 29%; min-width: 29%; margin: 0 6.5% 60px 0; } .gallery-columns-3 figure:nth-child(3n+3){ margin-right: 0; } .gallery-columns-3 figure:nth-child(3n+4){ clear: left; } .gallery-columns-4 figure, .gallery-columns-5 figure, .gallery-columns-6 figure, .gallery-columns-7 figure, .gallery-columns-8 figure, .gallery-columns-9 figure { width: 21%; min-width: 21%; margin: 0 5% 60px 0; } .gallery-columns-4 figure:nth-child(4n+4), .gallery-columns-5 figure:nth-child(4n+4), .gallery-columns-6 figure:nth-child(4n+4), .gallery-columns-7 figure:nth-child(4n+4), .gallery-columns-8 figure:nth-child(4n+4), .gallery-columns-9 figure:nth-child(4n+4) { margin-right: 0; } .gallery-columns-4 figure:nth-child(4n+5), .gallery-columns-5 figure:nth-child(4n+5), .gallery-columns-6 figure:nth-child(4n+5), .gallery-columns-7 figure:nth-child(4n+5), .gallery-columns-8 figure:nth-child(4n+5), .gallery-columns-9 figure:nth-child(4n+5) { clear: left; } /***** ATTACHMENT PAGES *****/ .image-att { overflow: visible; } .imagebox { margin-bottom: 40px; } } @media screen and (min-width: 64em){ .main.hasside { width: 79%; } .side-widget { width: 17%; } /***** MAIN AND CATS INDEXES *****/ .permalink, .permalink:nth-child(2n+2) { float: left; width: 29%; margin: 3px 5.5% 60px 3px; } .permalink:nth-child(3n+3) { margin-right: 0; } .permalink:nth-child(2n+1) { clear: none; } .permalink:nth-child(3n+1) { clear: left; } /***** POSTS *****/ .comments { width: 60%; } /***** IMAGE GALLERIES *****/ .gallery-columns-5 figure, .gallery-columns-5 figure:nth-child(4n+4) { width: 17%; min-width: 17%; margin: 0 3.7% 20px 0; } .gallery-columns-6 figure, .gallery-columns-6 figure:nth-child(4n+4) { width: 14%; min-width: 14%; margin: 0 3.2% 20px 0; } .gallery-columns-7 figure, .gallery-columns-7 figure:nth-child(4n+4) { width: 11%; min-width: 11%; margin: 0 3.8% 20px 0; } .gallery-columns-8 figure, .gallery-columns-8 figure:nth-child(4n+4) { width: 9.5%; min-width: 9.5%; margin: 0 3.4% 20px 0; } .gallery-columns-9 figure, .gallery-columns-9 figure:nth-child(4n+4) { width: 8%; min-width: 8%; margin: 0 3.5% 20px 0; } .gallery-columns-5 figure:nth-child(5n+5), .gallery-columns-6 figure:nth-child(6n+6), .gallery-columns-7 figure:nth-child(7n+7), .gallery-columns-8 figure:nth-child(8n+8), .gallery-columns-9 figure:nth-child(9n+9) { margin-right: 0; } .gallery-columns-5 figure:nth-child(4n+5), .gallery-columns-6 figure:nth-child(4n+5), .gallery-columns-7 figure:nth-child(4n+5), .gallery-columns-8 figure:nth-child(4n+5), .gallery-columns-9 figure:nth-child(4n+5) { clear: none; } .gallery-columns-5 figure:nth-child(5n+6), .gallery-columns-6 figure:nth-child(6n+7), .gallery-columns-7 figure:nth-child(7n+8), .gallery-columns-8 figure:nth-child(8n+9), .gallery-columns-9 figure:nth-child(9n+10) { clear: left; } }