@charset "UTF-8"; /* Theme Name: Amethyst Theme URI: http://amethyst.asknode.net/ Author: featherplain Author URI: http://asknode.net/ Description: Amethyst is a simple theme based on Foundation. The design is kept simple to keep the simplicity of the Foundation. Features are, 100% responsive layouts, Genericons, Gulp use, Sass. Version: 1.0.1 License: GNU General Public License v2 or later License URI: license.txt Text Domain: amethyst Tags: white, responsive-layout, one-column, two-columns, right-sidebar, editor-style, sticky-post, microformats, featured-images, custom-colors, custom-menu, custom-background */ /* -------------------------------------------------------------- */ /* Foundation by ZURB /* foundation.zurb.com /* Licensed under MIT Open Source /* -------------------------------------------------------------- */ meta.foundation-version { font-family: "/5.5.2/"; } meta.foundation-mq-small { font-family: "/only screen/"; width: 0; } meta.foundation-mq-small-only { font-family: "/only screen and (max-width: 48em)/"; width: 0; } meta.foundation-mq-medium { font-family: "/only screen and (min-width:48.0625em)/"; width: 48.0625em; } meta.foundation-mq-medium-only { font-family: "/only screen and (min-width:48.0625em) and (max-width:64em)/"; width: 48.0625em; } meta.foundation-mq-large { font-family: "/only screen and (min-width:64.0625em)/"; width: 64.0625em; } meta.foundation-mq-large-only { font-family: "/only screen and (min-width:64.0625em) and (max-width:90em)/"; width: 64.0625em; } meta.foundation-mq-xlarge { font-family: "/only screen and (min-width:90.0625em)/"; width: 90.0625em; } meta.foundation-mq-xlarge-only { font-family: "/only screen and (min-width:90.0625em) and (max-width:120em)/"; width: 90.0625em; } meta.foundation-mq-xxlarge { font-family: "/only screen and (min-width:120.0625em)/"; width: 120.0625em; } meta.foundation-data-attribute-namespace { font-family: false; } html, body { height: 100%; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } html, body { font-size: 100%; } body { background: #fff; color: #222222; cursor: auto; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", Arial, Sans-Serif; font-style: normal; font-weight: 300; line-height: 1.5; margin: 0; padding: 0; position: relative; } a:hover { cursor: pointer; } img { max-width: 100%; height: auto; } img { -ms-interpolation-mode: bicubic; } #map_canvas img, #map_canvas embed, #map_canvas object, .map_canvas img, .map_canvas embed, .map_canvas object, .mqa-display img, .mqa-display embed, .mqa-display object { max-width: none !important; } .left { float: left !important; } .right { float: right !important; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .hide { display: none; } .invisible { visibility: hidden; } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { display: inline-block; vertical-align: middle; } textarea { height: auto; min-height: 50px; } select { width: 100%; } .row { margin: 0 auto; max-width: 1080px; width: 100%; } .row:before, .row:after { content: " "; display: table; } .row:after { clear: both; } .row.collapse > .column, .row.collapse > .columns { padding-left: 0; padding-right: 0; } .row.collapse .row { margin-left: 0; margin-right: 0; } .row .row { margin: 0 -1.125rem; max-width: none; width: auto; } .row .row:before, .row .row:after { content: " "; display: table; } .row .row:after { clear: both; } .row .row.collapse { margin: 0; max-width: none; width: auto; } .row .row.collapse:before, .row .row.collapse:after { content: " "; display: table; } .row .row.collapse:after { clear: both; } .column, .columns { padding-left: 1.125rem; padding-right: 1.125rem; width: 100%; float: left; } .column + .column:last-child, .columns + .column:last-child, .column + .columns:last-child, .columns + .columns:last-child { float: right; } .column + .column.end, .columns + .column.end, .column + .columns.end, .columns + .columns.end { float: left; } @media only screen { .small-push-0 { position: relative; left: 0; right: auto; } .small-pull-0 { position: relative; right: 0; left: auto; } .small-push-1 { position: relative; left: 8.33333%; right: auto; } .small-pull-1 { position: relative; right: 8.33333%; left: auto; } .small-push-2 { position: relative; left: 16.66667%; right: auto; } .small-pull-2 { position: relative; right: 16.66667%; left: auto; } .small-push-3 { position: relative; left: 25%; right: auto; } .small-pull-3 { position: relative; right: 25%; left: auto; } .small-push-4 { position: relative; left: 33.33333%; right: auto; } .small-pull-4 { position: relative; right: 33.33333%; left: auto; } .small-push-5 { position: relative; left: 41.66667%; right: auto; } .small-pull-5 { position: relative; right: 41.66667%; left: auto; } .small-push-6 { position: relative; left: 50%; right: auto; } .small-pull-6 { position: relative; right: 50%; left: auto; } .small-push-7 { position: relative; left: 58.33333%; right: auto; } .small-pull-7 { position: relative; right: 58.33333%; left: auto; } .small-push-8 { position: relative; left: 66.66667%; right: auto; } .small-pull-8 { position: relative; right: 66.66667%; left: auto; } .small-push-9 { position: relative; left: 75%; right: auto; } .small-pull-9 { position: relative; right: 75%; left: auto; } .small-push-10 { position: relative; left: 83.33333%; right: auto; } .small-pull-10 { position: relative; right: 83.33333%; left: auto; } .small-push-11 { position: relative; left: 91.66667%; right: auto; } .small-pull-11 { position: relative; right: 91.66667%; left: auto; } .column, .columns { position: relative; padding-left: 1.125rem; padding-right: 1.125rem; float: left; } .small-1 { width: 8.33333%; } .small-2 { width: 16.66667%; } .small-3 { width: 25%; } .small-4 { width: 33.33333%; } .small-5 { width: 41.66667%; } .small-6 { width: 50%; } .small-7 { width: 58.33333%; } .small-8 { width: 66.66667%; } .small-9 { width: 75%; } .small-10 { width: 83.33333%; } .small-11 { width: 91.66667%; } .small-12 { width: 100%; } .small-offset-0 { margin-left: 0 !important; } .small-offset-1 { margin-left: 8.33333% !important; } .small-offset-2 { margin-left: 16.66667% !important; } .small-offset-3 { margin-left: 25% !important; } .small-offset-4 { margin-left: 33.33333% !important; } .small-offset-5 { margin-left: 41.66667% !important; } .small-offset-6 { margin-left: 50% !important; } .small-offset-7 { margin-left: 58.33333% !important; } .small-offset-8 { margin-left: 66.66667% !important; } .small-offset-9 { margin-left: 75% !important; } .small-offset-10 { margin-left: 83.33333% !important; } .small-offset-11 { margin-left: 91.66667% !important; } .small-reset-order { float: left; left: auto; margin-left: 0; margin-right: 0; right: auto; } .column.small-centered, .columns.small-centered { margin-left: auto; margin-right: auto; float: none; } .column.small-uncentered, .columns.small-uncentered { float: left; margin-left: 0; margin-right: 0; } .column.small-centered:last-child, .columns.small-centered:last-child { float: none; } .column.small-uncentered:last-child, .columns.small-uncentered:last-child { float: left; } .column.small-uncentered.opposite, .columns.small-uncentered.opposite { float: right; } .row.small-collapse > .column, .row.small-collapse > .columns { padding-left: 0; padding-right: 0; } .row.small-collapse .row { margin-left: 0; margin-right: 0; } .row.small-uncollapse > .column, .row.small-uncollapse > .columns { padding-left: 1.125rem; padding-right: 1.125rem; float: left; } } @media only screen and (min-width: 48.0625em) { .medium-push-0 { position: relative; left: 0; right: auto; } .medium-pull-0 { position: relative; right: 0; left: auto; } .medium-push-1 { position: relative; left: 8.33333%; right: auto; } .medium-pull-1 { position: relative; right: 8.33333%; left: auto; } .medium-push-2 { position: relative; left: 16.66667%; right: auto; } .medium-pull-2 { position: relative; right: 16.66667%; left: auto; } .medium-push-3 { position: relative; left: 25%; right: auto; } .medium-pull-3 { position: relative; right: 25%; left: auto; } .medium-push-4 { position: relative; left: 33.33333%; right: auto; } .medium-pull-4 { position: relative; right: 33.33333%; left: auto; } .medium-push-5 { position: relative; left: 41.66667%; right: auto; } .medium-pull-5 { position: relative; right: 41.66667%; left: auto; } .medium-push-6 { position: relative; left: 50%; right: auto; } .medium-pull-6 { position: relative; right: 50%; left: auto; } .medium-push-7 { position: relative; left: 58.33333%; right: auto; } .medium-pull-7 { position: relative; right: 58.33333%; left: auto; } .medium-push-8 { position: relative; left: 66.66667%; right: auto; } .medium-pull-8 { position: relative; right: 66.66667%; left: auto; } .medium-push-9 { position: relative; left: 75%; right: auto; } .medium-pull-9 { position: relative; right: 75%; left: auto; } .medium-push-10 { position: relative; left: 83.33333%; right: auto; } .medium-pull-10 { position: relative; right: 83.33333%; left: auto; } .medium-push-11 { position: relative; left: 91.66667%; right: auto; } .medium-pull-11 { position: relative; right: 91.66667%; left: auto; } .column, .columns { position: relative; padding-left: 1.125rem; padding-right: 1.125rem; float: left; } .medium-1 { width: 8.33333%; } .medium-2 { width: 16.66667%; } .medium-3 { width: 25%; } .medium-4 { width: 33.33333%; } .medium-5 { width: 41.66667%; } .medium-6 { width: 50%; } .medium-7 { width: 58.33333%; } .medium-8 { width: 66.66667%; } .medium-9 { width: 75%; } .medium-10 { width: 83.33333%; } .medium-11 { width: 91.66667%; } .medium-12 { width: 100%; } .medium-offset-0 { margin-left: 0 !important; } .medium-offset-1 { margin-left: 8.33333% !important; } .medium-offset-2 { margin-left: 16.66667% !important; } .medium-offset-3 { margin-left: 25% !important; } .medium-offset-4 { margin-left: 33.33333% !important; } .medium-offset-5 { margin-left: 41.66667% !important; } .medium-offset-6 { margin-left: 50% !important; } .medium-offset-7 { margin-left: 58.33333% !important; } .medium-offset-8 { margin-left: 66.66667% !important; } .medium-offset-9 { margin-left: 75% !important; } .medium-offset-10 { margin-left: 83.33333% !important; } .medium-offset-11 { margin-left: 91.66667% !important; } .medium-reset-order { float: left; left: auto; margin-left: 0; margin-right: 0; right: auto; } .column.medium-centered, .columns.medium-centered { margin-left: auto; margin-right: auto; float: none; } .column.medium-uncentered, .columns.medium-uncentered { float: left; margin-left: 0; margin-right: 0; } .column.medium-centered:last-child, .columns.medium-centered:last-child { float: none; } .column.medium-uncentered:last-child, .columns.medium-uncentered:last-child { float: left; } .column.medium-uncentered.opposite, .columns.medium-uncentered.opposite { float: right; } .row.medium-collapse > .column, .row.medium-collapse > .columns { padding-left: 0; padding-right: 0; } .row.medium-collapse .row { margin-left: 0; margin-right: 0; } .row.medium-uncollapse > .column, .row.medium-uncollapse > .columns { padding-left: 1.125rem; padding-right: 1.125rem; float: left; } .push-0 { position: relative; left: 0; right: auto; } .pull-0 { position: relative; right: 0; left: auto; } .push-1 { position: relative; left: 8.33333%; right: auto; } .pull-1 { position: relative; right: 8.33333%; left: auto; } .push-2 { position: relative; left: 16.66667%; right: auto; } .pull-2 { position: relative; right: 16.66667%; left: auto; } .push-3 { position: relative; left: 25%; right: auto; } .pull-3 { position: relative; right: 25%; left: auto; } .push-4 { position: relative; left: 33.33333%; right: auto; } .pull-4 { position: relative; right: 33.33333%; left: auto; } .push-5 { position: relative; left: 41.66667%; right: auto; } .pull-5 { position: relative; right: 41.66667%; left: auto; } .push-6 { position: relative; left: 50%; right: auto; } .pull-6 { position: relative; right: 50%; left: auto; } .push-7 { position: relative; left: 58.33333%; right: auto; } .pull-7 { position: relative; right: 58.33333%; left: auto; } .push-8 { position: relative; left: 66.66667%; right: auto; } .pull-8 { position: relative; right: 66.66667%; left: auto; } .push-9 { position: relative; left: 75%; right: auto; } .pull-9 { position: relative; right: 75%; left: auto; } .push-10 { position: relative; left: 83.33333%; right: auto; } .pull-10 { position: relative; right: 83.33333%; left: auto; } .push-11 { position: relative; left: 91.66667%; right: auto; } .pull-11 { position: relative; right: 91.66667%; left: auto; } } @media only screen and (min-width: 64.0625em) { .large-push-0 { position: relative; left: 0; right: auto; } .large-pull-0 { position: relative; right: 0; left: auto; } .large-push-1 { position: relative; left: 8.33333%; right: auto; } .large-pull-1 { position: relative; right: 8.33333%; left: auto; } .large-push-2 { position: relative; left: 16.66667%; right: auto; } .large-pull-2 { position: relative; right: 16.66667%; left: auto; } .large-push-3 { position: relative; left: 25%; right: auto; } .large-pull-3 { position: relative; right: 25%; left: auto; } .large-push-4 { position: relative; left: 33.33333%; right: auto; } .large-pull-4 { position: relative; right: 33.33333%; left: auto; } .large-push-5 { position: relative; left: 41.66667%; right: auto; } .large-pull-5 { position: relative; right: 41.66667%; left: auto; } .large-push-6 { position: relative; left: 50%; right: auto; } .large-pull-6 { position: relative; right: 50%; left: auto; } .large-push-7 { position: relative; left: 58.33333%; right: auto; } .large-pull-7 { position: relative; right: 58.33333%; left: auto; } .large-push-8 { position: relative; left: 66.66667%; right: auto; } .large-pull-8 { position: relative; right: 66.66667%; left: auto; } .large-push-9 { position: relative; left: 75%; right: auto; } .large-pull-9 { position: relative; right: 75%; left: auto; } .large-push-10 { position: relative; left: 83.33333%; right: auto; } .large-pull-10 { position: relative; right: 83.33333%; left: auto; } .large-push-11 { position: relative; left: 91.66667%; right: auto; } .large-pull-11 { position: relative; right: 91.66667%; left: auto; } .column, .columns { position: relative; padding-left: 1.125rem; padding-right: 1.125rem; float: left; } .large-1 { width: 8.33333%; } .large-2 { width: 16.66667%; } .large-3 { width: 25%; } .large-4 { width: 33.33333%; } .large-5 { width: 41.66667%; } .large-6 { width: 50%; } .large-7 { width: 58.33333%; } .large-8 { width: 66.66667%; } .large-9 { width: 75%; } .large-10 { width: 83.33333%; } .large-11 { width: 91.66667%; } .large-12 { width: 100%; } .large-offset-0 { margin-left: 0 !important; } .large-offset-1 { margin-left: 8.33333% !important; } .large-offset-2 { margin-left: 16.66667% !important; } .large-offset-3 { margin-left: 25% !important; } .large-offset-4 { margin-left: 33.33333% !important; } .large-offset-5 { margin-left: 41.66667% !important; } .large-offset-6 { margin-left: 50% !important; } .large-offset-7 { margin-left: 58.33333% !important; } .large-offset-8 { margin-left: 66.66667% !important; } .large-offset-9 { margin-left: 75% !important; } .large-offset-10 { margin-left: 83.33333% !important; } .large-offset-11 { margin-left: 91.66667% !important; } .large-reset-order { float: left; left: auto; margin-left: 0; margin-right: 0; right: auto; } .column.large-centered, .columns.large-centered { margin-left: auto; margin-right: auto; float: none; } .column.large-uncentered, .columns.large-uncentered { float: left; margin-left: 0; margin-right: 0; } .column.large-centered:last-child, .columns.large-centered:last-child { float: none; } .column.large-uncentered:last-child, .columns.large-uncentered:last-child { float: left; } .column.large-uncentered.opposite, .columns.large-uncentered.opposite { float: right; } .row.large-collapse > .column, .row.large-collapse > .columns { padding-left: 0; padding-right: 0; } .row.large-collapse .row { margin-left: 0; margin-right: 0; } .row.large-uncollapse > .column, .row.large-uncollapse > .columns { padding-left: 1.125rem; padding-right: 1.125rem; float: left; } .push-0 { position: relative; left: 0; right: auto; } .pull-0 { position: relative; right: 0; left: auto; } .push-1 { position: relative; left: 8.33333%; right: auto; } .pull-1 { position: relative; right: 8.33333%; left: auto; } .push-2 { position: relative; left: 16.66667%; right: auto; } .pull-2 { position: relative; right: 16.66667%; left: auto; } .push-3 { position: relative; left: 25%; right: auto; } .pull-3 { position: relative; right: 25%; left: auto; } .push-4 { position: relative; left: 33.33333%; right: auto; } .pull-4 { position: relative; right: 33.33333%; left: auto; } .push-5 { position: relative; left: 41.66667%; right: auto; } .pull-5 { position: relative; right: 41.66667%; left: auto; } .push-6 { position: relative; left: 50%; right: auto; } .pull-6 { position: relative; right: 50%; left: auto; } .push-7 { position: relative; left: 58.33333%; right: auto; } .pull-7 { position: relative; right: 58.33333%; left: auto; } .push-8 { position: relative; left: 66.66667%; right: auto; } .pull-8 { position: relative; right: 66.66667%; left: auto; } .push-9 { position: relative; left: 75%; right: auto; } .pull-9 { position: relative; right: 75%; left: auto; } .push-10 { position: relative; left: 83.33333%; right: auto; } .pull-10 { position: relative; right: 83.33333%; left: auto; } .push-11 { position: relative; left: 91.66667%; right: auto; } .pull-11 { position: relative; right: 91.66667%; left: auto; } } button, .button { -webkit-appearance: none; -moz-appearance: none; border-radius: 0; border-style: solid; border-width: 0; cursor: pointer; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", Arial, Sans-Serif; font-weight: 300; line-height: normal; margin: 0 0 1.25rem; position: relative; text-align: center; text-decoration: none; display: inline-block; padding: 1rem 2rem 1.0625rem 2rem; font-size: 1rem; background-color: #222222; border-color: #1b1b1b; color: #FFFFFF; transition: background-color 300ms ease-out; } button:hover, button:focus, .button:hover, .button:focus { background-color: #1b1b1b; } button:hover, button:focus, .button:hover, .button:focus { color: #FFFFFF; } button.secondary, .button.secondary { background-color: #dedede; border-color: #b2b2b2; color: #333333; } button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus { background-color: #b2b2b2; } button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus { color: #FFFFFF; } button.success, .button.success { background-color: #43AC6A; border-color: #368a55; color: #FFFFFF; } button.success:hover, button.success:focus, .button.success:hover, .button.success:focus { background-color: #368a55; } button.success:hover, button.success:focus, .button.success:hover, .button.success:focus { color: #FFFFFF; } button.alert, .button.alert { background-color: #f04124; border-color: #cf2a0e; color: #FFFFFF; } button.alert:hover, button.alert:focus, .button.alert:hover, .button.alert:focus { background-color: #cf2a0e; } button.alert:hover, button.alert:focus, .button.alert:hover, .button.alert:focus { color: #FFFFFF; } button.warning, .button.warning { background-color: #f08a24; border-color: #cf6e0e; color: #FFFFFF; } button.warning:hover, button.warning:focus, .button.warning:hover, .button.warning:focus { background-color: #cf6e0e; } button.warning:hover, button.warning:focus, .button.warning:hover, .button.warning:focus { color: #FFFFFF; } button.info, .button.info { background-color: #a0d3e8; border-color: #61b6d9; color: #333333; } button.info:hover, button.info:focus, .button.info:hover, .button.info:focus { background-color: #61b6d9; } button.info:hover, button.info:focus, .button.info:hover, .button.info:focus { color: #FFFFFF; } button.large, .button.large { padding: 1.125rem 2.25rem 1.1875rem 2.25rem; font-size: 1.25rem; } button.small, .button.small { padding: 0.875rem 1.75rem 0.9375rem 1.75rem; font-size: 0.8125rem; } button.tiny, .button.tiny { padding: 0.625rem 1.25rem 0.6875rem 1.25rem; font-size: 0.6875rem; } button.expand, .button.expand { padding-left: 0; padding-right: 0; width: 100%; } button.left-align, .button.left-align { text-align: left; text-indent: 0.75rem; } button.right-align, .button.right-align { text-align: right; padding-right: 0.75rem; } button.radius, .button.radius { border-radius: 3px; } button.round, .button.round { border-radius: 1000px; } button.disabled, button[disabled], .button.disabled, .button[disabled] { background-color: #222222; border-color: #1b1b1b; color: #FFFFFF; box-shadow: none; cursor: default; opacity: 0.7; } button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[disabled]:focus, .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus { background-color: #1b1b1b; } button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[disabled]:focus, .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus { color: #FFFFFF; } button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[disabled]:focus, .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus { background-color: #222222; } button.disabled.secondary, button[disabled].secondary, .button.disabled.secondary, .button[disabled].secondary { background-color: #dedede; border-color: #b2b2b2; color: #333333; box-shadow: none; cursor: default; opacity: 0.7; } button.disabled.secondary:hover, button.disabled.secondary:focus, button[disabled].secondary:hover, button[disabled].secondary:focus, .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus { background-color: #b2b2b2; } button.disabled.secondary:hover, button.disabled.secondary:focus, button[disabled].secondary:hover, button[disabled].secondary:focus, .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus { color: #FFFFFF; } button.disabled.secondary:hover, button.disabled.secondary:focus, button[disabled].secondary:hover, button[disabled].secondary:focus, .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus { background-color: #dedede; } button.disabled.success, button[disabled].success, .button.disabled.success, .button[disabled].success { background-color: #43AC6A; border-color: #368a55; color: #FFFFFF; box-shadow: none; cursor: default; opacity: 0.7; } button.disabled.success:hover, button.disabled.success:focus, button[disabled].success:hover, button[disabled].success:focus, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus { background-color: #368a55; } button.disabled.success:hover, button.disabled.success:focus, button[disabled].success:hover, button[disabled].success:focus, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus { color: #FFFFFF; } button.disabled.success:hover, button.disabled.success:focus, button[disabled].success:hover, button[disabled].success:focus, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus { background-color: #43AC6A; } button.disabled.alert, button[disabled].alert, .button.disabled.alert, .button[disabled].alert { background-color: #f04124; border-color: #cf2a0e; color: #FFFFFF; box-shadow: none; cursor: default; opacity: 0.7; } button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus { background-color: #cf2a0e; } button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus { color: #FFFFFF; } button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus { background-color: #f04124; } button.disabled.warning, button[disabled].warning, .button.disabled.warning, .button[disabled].warning { background-color: #f08a24; border-color: #cf6e0e; color: #FFFFFF; box-shadow: none; cursor: default; opacity: 0.7; } button.disabled.warning:hover, button.disabled.warning:focus, button[disabled].warning:hover, button[disabled].warning:focus, .button.disabled.warning:hover, .button.disabled.warning:focus, .button[disabled].warning:hover, .button[disabled].warning:focus { background-color: #cf6e0e; } button.disabled.warning:hover, button.disabled.warning:focus, button[disabled].warning:hover, button[disabled].warning:focus, .button.disabled.warning:hover, .button.disabled.warning:focus, .button[disabled].warning:hover, .button[disabled].warning:focus { color: #FFFFFF; } button.disabled.warning:hover, button.disabled.warning:focus, button[disabled].warning:hover, button[disabled].warning:focus, .button.disabled.warning:hover, .button.disabled.warning:focus, .button[disabled].warning:hover, .button[disabled].warning:focus { background-color: #f08a24; } button.disabled.info, button[disabled].info, .button.disabled.info, .button[disabled].info { background-color: #a0d3e8; border-color: #61b6d9; color: #333333; box-shadow: none; cursor: default; opacity: 0.7; } button.disabled.info:hover, button.disabled.info:focus, button[disabled].info:hover, button[disabled].info:focus, .button.disabled.info:hover, .button.disabled.info:focus, .button[disabled].info:hover, .button[disabled].info:focus { background-color: #61b6d9; } button.disabled.info:hover, button.disabled.info:focus, button[disabled].info:hover, button[disabled].info:focus, .button.disabled.info:hover, .button.disabled.info:focus, .button[disabled].info:hover, .button[disabled].info:focus { color: #FFFFFF; } button.disabled.info:hover, button.disabled.info:focus, button[disabled].info:hover, button[disabled].info:focus, .button.disabled.info:hover, .button.disabled.info:focus, .button[disabled].info:hover, .button[disabled].info:focus { background-color: #a0d3e8; } button::-moz-focus-inner { border: 0; padding: 0; } @media only screen and (min-width: 48.0625em) { button, .button { display: inline-block; } } /* Standard Forms */ form { margin: 0 0 1rem; } /* Using forms within rows, we need to set some defaults */ form .row .row { margin: 0 -0.5rem; } form .row .row .column, form .row .row .columns { padding: 0 0.5rem; } form .row .row.collapse { margin: 0; } form .row .row.collapse .column, form .row .row.collapse .columns { padding: 0; } form .row .row.collapse input { -webkit-border-bottom-right-radius: 0; -webkit-border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-right-radius: 0; } form .row input.column, form .row input.columns, form .row textarea.column, form .row textarea.columns { padding-left: 0.5rem; } /* Label Styles */ label { color: #4d4d4d; cursor: pointer; display: block; font-size: 0.875rem; font-weight: 300; line-height: 1.5; margin-bottom: 0; /* Styles for required inputs */ } label.right { float: none !important; text-align: right; } label.inline { margin: 0 0 1rem 0; padding: 0.5625rem 0; } label small { text-transform: capitalize; color: #676767; } /* Attach elements to the beginning or end of an input */ .prefix, .postfix { border-style: solid; border-width: 1px; display: block; font-size: 0.875rem; height: 2.3125rem; line-height: 2.3125rem; overflow: visible; padding-bottom: 0; padding-top: 0; position: relative; text-align: center; width: 100%; z-index: 2; } /* Adjust padding, alignment and radius if pre/post element is a button */ .postfix.button { border-color: true; } .prefix.button { border: none; padding-left: 0; padding-right: 0; padding-bottom: 0; padding-top: 0; text-align: center; } .prefix.button.radius { border-radius: 0; -webkit-border-bottom-left-radius: 3px; -webkit-border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-top-left-radius: 3px; } .postfix.button.radius { border-radius: 0; -webkit-border-bottom-right-radius: 3px; -webkit-border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-top-right-radius: 3px; } .prefix.button.round { border-radius: 0; -webkit-border-bottom-left-radius: 1000px; -webkit-border-top-left-radius: 1000px; border-bottom-left-radius: 1000px; border-top-left-radius: 1000px; } .postfix.button.round { border-radius: 0; -webkit-border-bottom-right-radius: 1000px; -webkit-border-top-right-radius: 1000px; border-bottom-right-radius: 1000px; border-top-right-radius: 1000px; } /* Separate prefix and postfix styles when on span or label so buttons keep their own */ span.prefix, label.prefix { background: #f2f2f2; border-right: none; color: #333333; border-color: #cccccc; } span.postfix, label.postfix { background: #f2f2f2; color: #333333; border-color: #cccccc; } /* We use this to get basic styling on all basic form elements */ input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea { -webkit-appearance: none; -moz-appearance: none; border-radius: 0; background-color: #FFFFFF; border-style: solid; border-width: 1px; border-color: #cccccc; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.75); display: block; font-family: inherit; font-size: 0.875rem; height: 2.3125rem; margin: 0 0 1rem 0; padding: 0.5rem; width: 100%; box-sizing: border-box; transition: border-color 0.15s linear, background 0.15s linear; } input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="color"]:focus, textarea:focus { background: #fafafa; border-color: #999999; outline: none; } input[type="text"]:disabled, input[type="password"]:disabled, input[type="date"]:disabled, input[type="datetime"]:disabled, input[type="datetime-local"]:disabled, input[type="month"]:disabled, input[type="week"]:disabled, input[type="email"]:disabled, input[type="number"]:disabled, input[type="search"]:disabled, input[type="tel"]:disabled, input[type="time"]:disabled, input[type="url"]:disabled, input[type="color"]:disabled, textarea:disabled { background-color: #DDDDDD; cursor: default; } input[type="text"][disabled], input[type="text"][readonly], fieldset[disabled] input[type="text"], input[type="password"][disabled], input[type="password"][readonly], fieldset[disabled] input[type="password"], input[type="date"][disabled], input[type="date"][readonly], fieldset[disabled] input[type="date"], input[type="datetime"][disabled], input[type="datetime"][readonly], fieldset[disabled] input[type="datetime"], input[type="datetime-local"][disabled], input[type="datetime-local"][readonly], fieldset[disabled] input[type="datetime-local"], input[type="month"][disabled], input[type="month"][readonly], fieldset[disabled] input[type="month"], input[type="week"][disabled], input[type="week"][readonly], fieldset[disabled] input[type="week"], input[type="email"][disabled], input[type="email"][readonly], fieldset[disabled] input[type="email"], input[type="number"][disabled], input[type="number"][readonly], fieldset[disabled] input[type="number"], input[type="search"][disabled], input[type="search"][readonly], fieldset[disabled] input[type="search"], input[type="tel"][disabled], input[type="tel"][readonly], fieldset[disabled] input[type="tel"], input[type="time"][disabled], input[type="time"][readonly], fieldset[disabled] input[type="time"], input[type="url"][disabled], input[type="url"][readonly], fieldset[disabled] input[type="url"], input[type="color"][disabled], input[type="color"][readonly], fieldset[disabled] input[type="color"], textarea[disabled], textarea[readonly], fieldset[disabled] textarea { background-color: #DDDDDD; cursor: default; } input[type="text"].radius, input[type="password"].radius, input[type="date"].radius, input[type="datetime"].radius, input[type="datetime-local"].radius, input[type="month"].radius, input[type="week"].radius, input[type="email"].radius, input[type="number"].radius, input[type="search"].radius, input[type="tel"].radius, input[type="time"].radius, input[type="url"].radius, input[type="color"].radius, textarea.radius { border-radius: 3px; } form .row .prefix-radius.row.collapse input, form .row .prefix-radius.row.collapse textarea, form .row .prefix-radius.row.collapse select, form .row .prefix-radius.row.collapse button { border-radius: 0; -webkit-border-bottom-right-radius: 3px; -webkit-border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-top-right-radius: 3px; } form .row .prefix-radius.row.collapse .prefix { border-radius: 0; -webkit-border-bottom-left-radius: 3px; -webkit-border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-top-left-radius: 3px; } form .row .postfix-radius.row.collapse input, form .row .postfix-radius.row.collapse textarea, form .row .postfix-radius.row.collapse select, form .row .postfix-radius.row.collapse button { border-radius: 0; -webkit-border-bottom-left-radius: 3px; -webkit-border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-top-left-radius: 3px; } form .row .postfix-radius.row.collapse .postfix { border-radius: 0; -webkit-border-bottom-right-radius: 3px; -webkit-border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-top-right-radius: 3px; } form .row .prefix-round.row.collapse input, form .row .prefix-round.row.collapse textarea, form .row .prefix-round.row.collapse select, form .row .prefix-round.row.collapse button { border-radius: 0; -webkit-border-bottom-right-radius: 1000px; -webkit-border-top-right-radius: 1000px; border-bottom-right-radius: 1000px; border-top-right-radius: 1000px; } form .row .prefix-round.row.collapse .prefix { border-radius: 0; -webkit-border-bottom-left-radius: 1000px; -webkit-border-top-left-radius: 1000px; border-bottom-left-radius: 1000px; border-top-left-radius: 1000px; } form .row .postfix-round.row.collapse input, form .row .postfix-round.row.collapse textarea, form .row .postfix-round.row.collapse select, form .row .postfix-round.row.collapse button { border-radius: 0; -webkit-border-bottom-left-radius: 1000px; -webkit-border-top-left-radius: 1000px; border-bottom-left-radius: 1000px; border-top-left-radius: 1000px; } form .row .postfix-round.row.collapse .postfix { border-radius: 0; -webkit-border-bottom-right-radius: 1000px; -webkit-border-top-right-radius: 1000px; border-bottom-right-radius: 1000px; border-top-right-radius: 1000px; } input[type="submit"] { -webkit-appearance: none; -moz-appearance: none; border-radius: 0; } /* Respect enforced amount of rows for textarea */ textarea[rows] { height: auto; } /* Not allow resize out of parent */ textarea { max-width: 100%; } ::-webkit-input-placeholder { color: #cccccc; } :-moz-placeholder { /* Firefox 18- */ color: #cccccc; } ::-moz-placeholder { /* Firefox 19+ */ color: #cccccc; } :-ms-input-placeholder { color: #cccccc; } /* Add height value for select elements to match text input height */ select { -webkit-appearance: none !important; -moz-appearance: none !important; background-color: #FAFAFA; border-radius: 0; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+); background-position: 100% center; background-repeat: no-repeat; border-style: solid; border-width: 1px; border-color: #cccccc; color: rgba(0, 0, 0, 0.75); font-family: inherit; font-size: 0.875rem; line-height: normal; padding: 0.5rem; border-radius: 0; height: 2.3125rem; } select::-ms-expand { display: none; } select.radius { border-radius: 3px; } select:hover { background-color: #f3f3f3; border-color: #999999; } select:disabled { background-color: #DDDDDD; cursor: default; } select[multiple] { height: auto; } /* Adjust margin for form elements below */ input[type="file"], input[type="checkbox"], input[type="radio"], select { margin: 0 0 1rem 0; } input[type="checkbox"] + label, input[type="radio"] + label { display: inline-block; margin-left: 0.5rem; margin-right: 1rem; margin-bottom: 0; vertical-align: baseline; } /* Normalize file input width */ input[type="file"] { width: 100%; } /* HTML5 Number spinners settings */ /* We add basic fieldset styling */ fieldset { border: 1px solid #DDDDDD; margin: 1.125rem 0; padding: 1.25rem; } fieldset legend { background: #FFFFFF; font-weight: bold; margin-left: -0.1875rem; margin: 0; padding: 0 0.1875rem; } /* Error Handling */ [data-abide] .error small.error, [data-abide] .error span.error, [data-abide] span.error, [data-abide] small.error { display: block; font-size: 0.75rem; font-style: italic; font-weight: 300; margin-bottom: 1rem; margin-top: -1px; padding: 0.375rem 0.5625rem 0.5625rem; background: #f04124; color: #FFFFFF; } [data-abide] span.error, [data-abide] small.error { display: none; } span.error, small.error { display: block; font-size: 0.75rem; font-style: italic; font-weight: 300; margin-bottom: 1rem; margin-top: -1px; padding: 0.375rem 0.5625rem 0.5625rem; background: #f04124; color: #FFFFFF; } .error input, .error textarea, .error select { margin-bottom: 0; } .error input[type="checkbox"], .error input[type="radio"] { margin-bottom: 1rem; } .error label, .error label.error { color: #f04124; } .error small.error { display: block; font-size: 0.75rem; font-style: italic; font-weight: 300; margin-bottom: 1rem; margin-top: -1px; padding: 0.375rem 0.5625rem 0.5625rem; background: #f04124; color: #FFFFFF; } .error > label > small { background: transparent; color: #676767; display: inline; font-size: 60%; font-style: normal; margin: 0; padding: 0; text-transform: capitalize; } .error span.error-message { display: block; } input.error, textarea.error, select.error { margin-bottom: 0; } label.error { color: #f04124; } .gnav__list:after, .nav-links:after { display: block; visibility: hidden; clear: both; height: 0; content: "."; font-size: 0; } /* -------------------------------------------------------------- */ /* Amethyst default styles /* -------------------------------------------------------------- */ /** * root element */ @media only screen and (max-width: 48em) { body { position: static; } } /** * text-level semantics */ h1, h2, h3, h4, h5, h6 { font-family: "Helvetica Neue", "Helvetica", "Roboto", "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", Arial, Sans-Serif; } h1, h1 > a, h2, h2 > a, h3, h3 > a, h4, h4 > a, h5, h5 > a, h6, h6 > a { color: #222222; } h1:hover, h1 > a:hover, h2:hover, h2 > a:hover, h3:hover, h3 > a:hover, h4:hover, h4 > a:hover, h5:hover, h5 > a:hover, h6:hover, h6 > a:hover { text-decoration: none; } a { color: #e80c7a; text-decoration: none; transition: 0.3s; } a:focus { outline: thin dotted; } a:link, a:visited { color: #e80c7a; } a:hover, a:active, a:focus { outline: 0; color: #91074c; text-decoration: none; } p { color: #222222; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", Arial, Sans-Serif; } ::-moz-selection { background: transparent; background-color: #fef5fa; color: #222222; } ::selection { background: transparent; background-color: #fef5fa; color: #222222; } /** * list items */ ul, ol { margin: 0; padding: 0; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", Arial, Sans-Serif; list-style: none; } dl { margin-bottom: 2em; } dl:last-child { margin-bottom: 0; } dl dt { margin-bottom: 1em; font-weight: bold; } dl dd { margin-bottom: 1em; } dl dd:last-child { margin-bottom: 0; } /** * grouping content */ iframe { vertical-align: middle; } /** * embedded content */ figure { margin: 0; } img { line-height: 1.0; border: 0; } svg:not(:root) { overflow: hidden; } /** * table */ table { width: 100%; background-color: #ffffff; border-spacing: 0; border-collapse: collapse; font-size: inherit; } table caption { margin: 5px 0; } table thead, table tfoot { background-color: #fafafa; } table thead th, table tfoot th { padding: 8px; font-weight: 600; } table tbody th { padding: 8px; font-weight: 500; } table tbody tr:nth-child(odd) { background-color: #ffffff; } table tbody tr:nth-child(even) { background-color: #fafafa; } table td { padding: 6px; } /** * screen reader text */ .screen-reader-text { display: none; } /* -------------------------------------------------------------- */ /* header /* -------------------------------------------------------------- */ .l-header { width: auto; height: auto; margin-bottom: 20px; } .l-header__inner { margin: 0 auto; max-width: 1080px; width: 100%; position: relative; } .l-header__inner:before, .l-header__inner:after { content: " "; display: table; } .l-header__inner:after { clear: both; } /** * site-branding */ .site-title { float: left; max-width: 80%; margin: 0; padding: 14px 36px 14px 14px; font-weight: bold; font-size: 1rem; } .site-title a { display: block; color: #222222; line-height: 1.2; } .site-title a:hover { color: #e80c7a; } .site-description { display: none; } /** * navigation */ .gnav__search { position: absolute; top: 0; right: 50px; margin-bottom: 0; } .gnav__search .search__form { margin-bottom: 0; } .gnav__search .search__field { width: 50px; height: 50px; margin-bottom: 0; padding-left: 42px; border: none; box-shadow: none; cursor: pointer; background-color: #ededed; background-image: url("./assets/images/icon_search.png"); background-position: center; background-repeat: no-repeat; background-size: 20px 20px; transition: width 400ms ease, background 400ms ease; } .gnav__search .search__field:focus { width: 240px; padding-left: 30px; background-position: 6px center; background-repeat: no-repeat; background-size: 20px 20px; cursor: text; outline: 0; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .gnav__search .search__field { background-image: url("./assets/images/icon_search_2x.png"); } .gnav__search .search__field:focus { background-image: url("./assets/images/icon_search_2x.png"); } } .gnav__search .search__submit { display: none; } .gnav__trigger { display: inline-block; float: right; width: 50px; height: 50px; padding: 0; margin: 0; text-align: center; background-color: #222222; border-radius: 0; box-shadow: none; outline: 0; } .gnav__trigger:before { position: static; display: inline-block; content: ""; vertical-align: text-bottom; font-size: 16px; font-family: Genericons; line-height: 1; margin: 16px auto; color: #ffffff; } .gnav__trigger:hover, .gnav__trigger:focus { outline: 0; background-color: #363636; } .gnav__arrowdown { display: block; position: absolute; top: 0; right: 0; width: 50px; height: 50px; margin: 0; padding: 0; background-color: transparent; border-radius: 0; box-shadow: none; } .gnav__arrowdown:before { position: static; display: inline-block; content: ""; vertical-align: text-bottom; font-size: 28px; font-family: Genericons; line-height: 1; text-align: center; margin: 11px auto; color: #ffffff; } .gnav__arrowdown:hover, .gnav__arrowdown:focus { outline: 0; background-color: #363636; } .gnav__list { display: none; position: absolute; top: 50px; right: 0; width: 100%; margin: 0; background-color: #222222; z-index: 9999; } .gnav__list--active { display: block; } .gnav__list > li:first-child { border-top: none; } .gnav__list li { position: relative; border-top: 1px dotted #dedede; } .gnav__list li a { display: block; padding: 13px; color: #ffffff; font-weight: normal; text-transform: uppercase; letter-spacing: 1.2px; } .gnav .sub-menu { display: none; background-color: #4b4b4b; } /** * media queries */ @media only screen and (min-width: 48.0625em) { .l-header { margin-bottom: 40px; } .site-title { padding: 10px 20px 10px 14px; font-size: 1.5rem; } .site-description { display: block; float: left; margin: 14px 0 12px 0; font-size: 0.875rem; } .gnav__list { width: 40%; } } /* -------------------------------------------------------------- */ /* footer /* -------------------------------------------------------------- */ /** * footer widgets */ .footer-widgets { padding: 40px 0; background-color: #fafafa; } /** * siteinfo */ .siteinfo { background-color: #181818; } .siteinfo__inner { margin: 0 auto; max-width: 1080px; width: 100%; padding: 20px 0; text-align: center; } .siteinfo__inner:before, .siteinfo__inner:after { content: " "; display: table; } .siteinfo__inner:after { clear: both; } .siteinfo__text { margin: 10px auto; color: #ffffff; font-size: 0.75rem; letter-spacing: 1.6px; } .siteinfo__text a { color: #ffffff; } .siteinfo__text a:hover { color: #e80c7a; } /** * media queries */ @media only screen and (max-width: 48em) { .footer-widgets__inner { padding: 0 16px; } } @media only screen and (min-width: 48.0625em) { .footer-widgets__inner { margin: 0 auto; max-width: 1080px; width: 100%; } .footer-widgets__inner:before, .footer-widgets__inner:after { content: " "; display: table; } .footer-widgets__inner:after { clear: both; } } /* -------------------------------------------------------------- */ /* layout /* -------------------------------------------------------------- */ /** * l-container */ body.custom-background .l-container { margin: 0 auto; max-width: 1080px; width: 100%; background-color: #ffffff; } body.custom-background .l-container:before, body.custom-background .l-container:after { content: " "; display: table; } body.custom-background .l-container:after { clear: both; } /** * l-main */ .l-main { margin: 0 auto; max-width: 1080px; width: 100%; min-height: 100vh; } .l-main:before, .l-main:after { content: " "; display: table; } .l-main:after { clear: both; } /** * l-primary */ .l-primary { margin-bottom: 40px; } @media only screen and (max-width: 48em) { .l-primary { padding: 0 16px; } } @media only screen and (min-width: 48.0625em) { .l-primary { padding-left: 1.125rem; padding-right: 1.125rem; width: 75%; float: left; } } @media only screen and (min-width: 48.0625em) { .l-primary--single-column { float: none; width: 100%; max-width: 780px; margin: 0 auto 40px auto; } } /** * l-sidebar */ .l-sidebar { margin-bottom: 40px; } @media only screen and (max-width: 48em) { .l-sidebar { padding: 0 16px; } } @media only screen and (min-width: 48.0625em) { .l-sidebar { padding-left: 1.125rem; padding-right: 1.125rem; width: 25%; float: left; } } /** * page title */ .page-title { margin-bottom: 40px; padding: 0 18px; font-size: 0.875rem; font-weight: normal; line-height: 1; letter-spacing: 0.6px; text-transform: uppercase; } /** * no sidebar */ .no-sidebar .page-title { margin-bottom: 40px; width: 100%; max-width: 780px; } @media only screen and (max-width: 48em) { .no-sidebar .page-title { padding: 0 16px; } } .no-sidebar .l-primary { margin-bottom: 40px; } @media only screen and (max-width: 48em) { .no-sidebar .l-primary { padding: 0 16px; } } /** * error 404 */ .not-found__title { margin-top: 0; } /** * WordPress classes */ .sticky { display: inherit; } /* -------------------------------------------------------------- */ /* post /* -------------------------------------------------------------- */ .post__header { margin: 0 0 20px 0; } .post__link { display: block; margin-bottom: 30px; color: #222222; } .post__link:hover .post__title--archive { color: #e80c7a; } .post__title { margin: 0; padding: 0 0 5px 0; font-size: 1.25rem; font-weight: bold; border-bottom: 1px solid #dedede; } .post__title--archive { font-size: 1rem; line-height: 1.4; transition: 0.3s; } .post__title--page { border-bottom: none; } .post__meta { margin-bottom: 14px; } .post__meta--footer { margin: 0; padding-bottom: 10px; border-bottom: 1px solid #dedede; text-align: right; } .post__excerpt { font-size: 0.75rem; } .post__image { width: 100%; margin-bottom: 10px; border: 2px solid #ededed; } .post__pager { padding: 10px 0; text-align: center; border: 1px dotted #dedede; } .post__pager a { text-decoration: underline; } /** * meta informations */ .metainfo { position: relative; display: inline-block; color: #222222; font-size: 0.75rem; font-weight: 400; transition: 0.3s; } .metainfo:before { display: block; content: ""; position: absolute; } .metainfo:first-child { margin-left: 0; } .metainfo a { margin-left: 2px; color: #222222; line-height: 1; } .metainfo a:hover { color: #e80c7a; } .metainfo--date:before { position: static; display: inline-block; content: ""; vertical-align: top; font-size: 1.1rem; font-family: Genericons; line-height: 1; } .metainfo--category:before { position: static; display: inline-block; content: ""; vertical-align: top; font-size: 1.1rem; font-family: Genericons; line-height: 1; } .metainfo--author:before { position: static; display: inline-block; content: ""; vertical-align: top; font-size: 1.1rem; font-family: Genericons; line-height: 1; } .metainfo--tag:before { position: static; display: inline-block; content: ""; vertical-align: top; font-size: 1.1rem; font-family: Genericons; line-height: 1; } .metainfo--comment:before { position: static; display: inline-block; content: ""; vertical-align: top; font-size: 1.1rem; font-family: Genericons; line-height: 1; } /** * media queries */ @media only screen and (min-width: 48.0625em) { .post__link { margin-bottom: 50px; } .post__title { margin-bottom: 8px; font-size: 1.5rem; font-weight: bold; } .post__title--archive { font-size: 1.75rem; line-height: 1.4; } .post__image { margin-bottom: 20px; border: 4px solid #ededed; } } @media only screen and (min-width: 64.0625em) { .post__header { margin: 0 0 40px 0; } .post__title { font-size: 2rem; } .post__image { max-width: 100%; height: auto; border: 8px solid #ededed; } .post__excerpt { font-size: 0.875rem; } } /* -------------------------------------------------------------- */ /* post navigation /* -------------------------------------------------------------- */ .nav-links { padding: 20px 0; } .nav-links a { color: #222222; font-weight: 400; } .nav-links a:hover { color: #e80c7a; } .nav-previous { padding: 10px 0; text-align: left; } .nav-previous:before { position: static; display: inline-block; content: ""; vertical-align: text-bottom; font-size: 1.25rem; font-family: Genericons; line-height: 1; margin-right: 6px; vertical-align: middle; background-color: #dedede; color: #ffffff; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .nav-next { padding: 10px 0; text-align: right; } .nav-next:after { position: static; display: inline-block; content: ""; vertical-align: text-bottom; font-size: 1.25rem; font-family: Genericons; line-height: 1; margin-left: 6px; vertical-align: middle; background-color: #dedede; color: #ffffff; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } /** * media queries */ @media only screen and (min-width: 64.0625em) { .nav-previous { float: left; padding: 0 10px 0 0; } .nav-next { float: right; padding: 0 0 0 10px; } } /* -------------------------------------------------------------- */ /* post editor styles on posts and comments /* -------------------------------------------------------------- */ .post__editor h1, .post__editor h2, .post__editor h3, .post__editor h4, .post__editor h5, .post__editor h6, .post__editor p, .post__editor ul, .post__editor ol, .post__editor dl, .post__editor pre, .post__editor blockquote, .post__editor table, .comment-content h1, .comment-content h2, .comment-content h3, .comment-content h4, .comment-content h5, .comment-content h6, .comment-content p, .comment-content ul, .comment-content ol, .comment-content dl, .comment-content pre, .comment-content blockquote, .comment-content table { margin: 20px 0; } .post__editor h1, .comment-content h1 { font-size: 1.375rem; } .post__editor h2, .comment-content h2 { font-size: 1.125rem; border-bottom: 1px dotted #dedede; } .post__editor h3, .comment-content h3 { font-size: 1.0625rem; } .post__editor h4, .comment-content h4 { font-size: 1rem; } .post__editor h5, .comment-content h5 { font-size: 0.9375rem; font-weight: normal; } .post__editor h6, .comment-content h6 { font-size: 0.875rem; font-weight: normal; } .post__editor ul, .comment-content ul { list-style-type: square; } .post__editor ol, .comment-content ol { list-style-type: decimal; } .post__editor ul, .post__editor ol, .comment-content ul, .comment-content ol { margin-left: 16px; } .post__editor ul li, .post__editor ol li, .comment-content ul li, .comment-content ol li { margin: 8px; font-size: 0.875rem; line-height: 1.4; } .post__editor dl dt, .post__editor dl dd, .comment-content dl dt, .comment-content dl dd { color: #454545; font-size: 0.875rem; } .post__editor dl dt, .comment-content dl dt { margin-left: 0; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", Arial, Sans-Serif; } .post__editor dl dd, .comment-content dl dd { margin-left: 14px; } .post__editor p, .comment-content p { color: #454545; font-size: 0.875rem; line-height: 1.5; } .post__editor blockquote, .comment-content blockquote { position: relative; padding: 10px; color: #454545; border: 1px dotted #dedede; font-size: 0.8125rem; } .post__editor blockquote > *, .comment-content blockquote > * { margin: 0; font-size: 0.8125rem; } .post__editor blockquote > ul, .post__editor blockquote ol, .comment-content blockquote > ul, .comment-content blockquote ol { margin-left: 16px; } .post__editor cite, .comment-content cite { font-size: 0.75rem; font-style: normal; } .post__editor pre, .comment-content pre { padding: 10px; background-color: #f8f8f8; color: #454545; font-family: Menlo, Consolas, Courier, sans-serif; font-size: 0.75rem; word-wrap: normal; overflow-x: auto; } .post__editor pre code, .comment-content pre code { background-color: transparent; } .post__editor code, .comment-content code { background-color: #f8f8f8; border: none; border-radius: 3px; color: #cc0000; font-family: Menlo, Consolas, Courier, sans-serif; font-size: 0.75rem; } .post__editor kbd, .comment-content kbd { padding: 2px 4px; background-color: #313131; border: 1px solid #6f6f6f; border-radius: 3px; color: #ffffff; font-family: Menlo, Consolas, Courier, sans-serif; font-size: 0.75rem; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } .post__editor address, .comment-content address { color: #454545; font-size: 0.875rem; font-style: normal; } .post__editor ins, .comment-content ins { padding: 0 4px; background-color: #f994c7; color: #454545; text-decoration: none; } .post__editor table, .comment-content table { border: 1px solid #dedede; background-color: #ffffff; text-align: left; font-size: 0.875rem; } /** * media queries */ @media only screen and (min-width: 48.0625em) { .post__editor h1, .post__editor h2, .post__editor h3, .post__editor h4, .post__editor h5, .post__editor h6, .post__editor p, .post__editor ul, .post__editor ol, .post__editor dl, .post__editor pre, .post__editor blockquote, .post__editor table, .comment-content h1, .comment-content h2, .comment-content h3, .comment-content h4, .comment-content h5, .comment-content h6, .comment-content p, .comment-content ul, .comment-content ol, .comment-content dl, .comment-content pre, .comment-content blockquote, .comment-content table { margin: 30px 0; } .post__editor h1, .comment-content h1 { font-size: 1.75rem; } .post__editor h2, .comment-content h2 { font-size: 1.5rem; } .post__editor h3, .comment-content h3 { font-size: 1.375rem; } .post__editor h4, .comment-content h4 { font-size: 1.25rem; } .post__editor h5, .comment-content h5 { font-size: 1.125rem; } .post__editor h6, .comment-content h6 { font-size: 1rem; } .post__editor ul, .post__editor ol, .comment-content ul, .comment-content ol { margin-left: 14px; } .post__editor blockquote > *, .comment-content blockquote > * { margin: 0; } } /* -------------------------------------------------------------- */ /* WordPress classes /* -------------------------------------------------------------- */ /** * caption */ .wp-caption { margin-bottom: 0.9375rem; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; } .wp-caption-text { margin: 0.8075em 0; text-align: center; font-size: 0.75rem; } .wp-caption-text a { font-size: 0.75rem; } /** * gallaries */ .gallery { margin-bottom: 0.9375rem; } .gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33333%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66667%; } .gallery-columns-7 .gallery-item { max-width: 14.28571%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11111%; } .gallery-icon { padding: 0; background: none; margin-bottom: 10px; } .gallery-caption { display: block; } /** * alignment */ .alignleft { display: inline; float: left; margin-right: 0.9375rem; margin-bottom: 0.9375rem; } .aligncenter { clear: both; display: block; margin: 0 auto; } .alignright { display: inline; float: left; margin-right: 0.9375rem; margin-bottom: 0.9375rem; } .post__editor .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } embed, iframe, object { max-width: 100%; } /* -------------------------------------------------------------- */ /* comments /* -------------------------------------------------------------- */ /** * comments */ .comments { margin: 40px 0; } .comments__title, .comment-reply-title { margin: 20px 0; font-size: 1.375rem; font-weight: bold; } /** * WordPress comment classes */ .comment { list-style-type: none; } .comment > .children { margin-left: 20px; } .comment-awaiting-moderation { margin-left: 58px; padding: 4px; background-color: #fcf1d0; border: 1px dotted #f0bd24; color: #222222; font-size: 0.75rem; } .comment-body { padding: 20px 0; border-bottom: 1px dotted #dedede; } .comment-author .avatar { border-radius: 50%; } .comment-author .fn { display: inline-block; margin-left: 7px; vertical-align: top; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", Arial, Sans-Serif; font-size: 1.125rem; } .comment-author .says { display: none; } .comment-metadata { margin-top: -28px; margin-left: 58px; } .comment-metadata time { font-size: 0.75rem; } .comment-content { margin-left: 58px; } .comment-notes { font-size: 0.875rem; } .comment-respond { margin: 40px 0; } .comment .reply { margin: 0 0 0 58px; } .comment .reply a { padding: 4px 6px; border: 1px solid #dedede; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", Arial, Sans-Serif; font-size: 0.625rem; } .bypostauthor { background-color: #fef5fa; } .edit-link { font-size: 0.75rem; border-bottom: 1px dotted #e80c7a; } #cancel-comment-reply-link { border: 1px solid #dedede; font-size: 0.875rem; font-weight: normal; } /* -------------------------------------------------------------- */ /* widgets /* -------------------------------------------------------------- */ .widget { margin-bottom: 20px; } .widget__title { margin: 0; padding: 8px 0; border-top: 2px solid #222222; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", Arial, Sans-Serif; font-size: 1rem; letter-spacing: 2px; text-transform: uppercase; text-align: center; } .widget a { color: #222222; font-size: 0.875rem; line-height: 1.4; } .widget ul li { padding: 8px 0; border-top: 1px solid #ededed; font-size: 0.8125rem; } .widget ul li ul { margin-top: 8px; margin-left: 12px; border-bottom: none; } .widget ul li ul li:last-child { padding-bottom: 0; } .widget ul li a { font-size: 0.8125rem; } .widget ul li a:hover { color: #e80c7a; } /** * WordPress widget classes */ .widget_recent_entries span, .widget_rss span { display: block; color: #c5c5c5; font-size: 0.75rem; } .widget_recent_entries time, .widget_rss time { display: block; margin: 4px 0; text-align: right; color: #c5c5c5; font-size: 0.75rem; } .widget_search input[type="submit"] { display: none; } .widget_text .textwidget { font-size: 0.875rem; } .widget_tag_cloud .tagcloud a { padding: 2px; } .widget_tag_cloud .tagcloud a:hover { background-color: #fde1ef; } #calendar_wrap { border: 1px solid #dedede; } #wp-calendar td { text-align: center; } /** * media queries */ @media only screen and (min-width: 48.0625em) { .widget--footer { padding-left: 1.125rem; padding-right: 1.125rem; width: 33.33333%; float: left; } } /* -------------------------------------------------------------- */ /* forms /* -------------------------------------------------------------- */ /** * required */ .required { color: #f04124; } /* -------------------------------------------------------------- */ /* buttons /* -------------------------------------------------------------- */ button, input[type="button"], input[type="submit"], input[type="reset"] { display: inline-block; margin: 1rem 0; padding: 0.875rem 1.75rem 0.9375rem 1.75rem; text-align: center; background-color: #e80c7a; border: none; box-shadow: 0 2px 0 #cb0a6b; color: #ffffff; cursor: pointer; font-size: 1rem; transition: background-color 300ms ease-out; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", Arial, Sans-Serif; } button:focus, input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus { outline: 0; } button:link, button:visited, input[type="button"]:link, input[type="button"]:visited, input[type="submit"]:link, input[type="submit"]:visited, input[type="reset"]:link, input[type="reset"]:visited { color: #ffffff; } button:hover, button:active, button:focus, input[type="button"]:hover, input[type="button"]:active, input[type="button"]:focus, input[type="submit"]:hover, input[type="submit"]:active, input[type="submit"]:focus, input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus { background-color: #c10a66; color: #ffffff; outline: 0; text-decoration: none; } .btn { display: inline-block; margin: 1rem 0; padding: 0.875rem 1.75rem 0.9375rem 1.75rem; text-align: center; background-color: #e80c7a; border: none; box-shadow: 0 2px 0 #cb0a6b; color: #ffffff; cursor: pointer; font-size: 1rem; transition: background-color 300ms ease-out; } .btn:focus { outline: 0; } .btn:link, .btn:visited { color: #ffffff; } .btn:hover, .btn:active, .btn:focus { background-color: #c10a66; color: #ffffff; outline: 0; text-decoration: none; } .btn-full { display: inline-block; margin: 1rem 0; padding: 0.875rem 1.75rem 0.9375rem 1.75rem; text-align: center; background-color: #e80c7a; border: none; box-shadow: 0 2px 0 #cb0a6b; color: #ffffff; cursor: pointer; font-size: 1rem; transition: background-color 300ms ease-out; width: 100%; } .btn-full:focus { outline: 0; } .btn-full:link, .btn-full:visited { color: #ffffff; } .btn-full:hover, .btn-full:active, .btn-full:focus { background-color: #c10a66; color: #ffffff; outline: 0; text-decoration: none; }