/** * Flat Writer editor stylesheet */ /* Text meant only for screen readers */ /* =Reset -------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } html { font-size: 100%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */ overflow-y: scroll; /* Keeps page centred in all browsers regardless of content height */ -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */ -ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ } body { background: #fff; } article, aside, details, figcaption, figure, footer, header, main, nav, section { display: block; } ol, ul { list-style: none; } img { vertical-align: middle; } table { /* tables still need 'cellspacing="0"' in the markup */ border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } a:focus { outline: thin dotted; } a:hover, a:active { /* Improves readability when focused and also mouse hovered in all browsers people.opera.com/patrickl/experiments/keyboard/test */ outline: 0; } a img { border: 0; } button, input, select, textarea { font-size: 100%; /* Corrects font size not being inherited in all browsers */ margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */ vertical-align: baseline; /* Improves appearance and consistency in all browsers */ *vertical-align: middle; /* Improves appearance and consistency in all browsers */ } button, input { line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */ } button, html input[type="button"], input[type="reset"], input[type="submit"] { border: none; border-radius: 3px; background: #ce4435; color: white; cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */ -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */ font-size: 14px; font-size: 0.875rem; line-height: 1; text-transform: lowercase; padding: 15px 30px; } button:hover, button:active, button:focus, html input[type="button"]:hover, html input[type="button"]:active, html input[type="button"]:focus, input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus, input[type="submit"]:hover, input[type="submit"]:active, input[type="submit"]:focus { background-color: #a73529; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* Addresses box sizing set to content-box in IE8/9 */ padding: 0; /* Addresses excess padding in IE8/9 */ } input[type="search"] { -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */ -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */ -moz-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */ border: 0; padding: 0; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea { padding: 5px 10px; font-size: 16px; font-size: 1rem; color: #556677; border: 1px solid #dddddd; border-radius: 3px; outline-text: #556677; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { color: #111; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"] { padding: 3px; } textarea { overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */ padding-left: 3px; vertical-align: top; /* Improves readability and alignment in all browsers */ width: 98%; } label { font-weight: bold; color: #1d2936; } /* =Global ----------------------------------------------- */ /* border box all the things */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } * { -ms-word-wrap: break-word; word-wrap: break-word; } /* Alignment */ .alignleft { display: inline; float: left; margin-right: 2em; } .alignright { display: inline; float: right; margin-left: 2em; } .aligncenter { clear: both; display: block; margin: 0 auto; } /* Text meant only for screen readers */ .screen-reader-text { clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); position: absolute !important; } .screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar */ } /* Clearing */ .clear:before, .clear:after, [class*="content"]:before, [class*="content"]:after, [class*="site"]:before, [class*="site"]:after { content: ""; display: table; } .clear:after, [class*="content"]:after, [class*="site"]:after { clear: both; } /* Read More */ .read-more { display: block; margin: 30px 0 0; text-align: center; color: #7c94ac; } .read-more:hover, .read-more:active, .read-more:focus { color: #4b6177; } .read-more:before { content: '\2022\20\2022\20\2022\20'; } .read-more:after { content: '\20\2022\20\2022\20\2022'; } .read-more .screen-reader-text { overflow: hidden; height: 1px; width: 1px; } @media screen and (max-width: 450px) { .alignleft, .alignright { float: none; display: block; margin: 2em 0; } } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { color: #556677; border-color: #556677; outline: none; } .main-navigation .search-form { float: right; display: inline-block; margin: 30px 0; } .main-navigation .search-form .search-field { padding: 5px 5px 5px 10px; font-size: 14px; font-size: 0.875rem; color: white; background-color: #1f2c39; border: none; } .main-navigation .search-form .search-field:focus { color: white; } .main-navigation .search-form input::-webkit-input-placeholder, .main-navigation .search-form textarea::-webkit-input-placeholder { color: #9aa7b5; text-transform: lowercase; } .main-navigation .search-form input:-moz-placeholder, .main-navigation .search-form textarea:-moz-placeholder { color: #9aa7b5; text-transform: lowercase; } .main-navigation .search-form .search-submit { display: none; } .page-content .search-form .search-field { width: 70%; padding: 10px; } @media screen and (max-width: 550px) { .page-content .search-form { text-align: center; } .page-content .search-form .search-field { width: 100%; margin-bottom: 10px; } } .post-password-form label { line-height: 40px; color: #556677; font-weight: normal; } .post-password-form input[type="password"] { padding: 7px 3px 10px; } @media screen and (max-width: 550px) { .post-password-form label { display: block; margin-bottom: 10px; } .post-password-form input[type="password"], .post-password-form input[type="submit"] { width: 100%; font-size: 16px; font-size: 1rem; } } #subscribe-email input { padding: 10px; } body, button, input, select, textarea { color: #556677; font-family: "Varela Round", sans-serif; font-size: 20px; font-size: 1.25rem; line-height: 1.6; } /* Headings */ h1, h2, h3, h4, h5, h6 { font-family: "Varela Round", sans-serif; clear: both; } h1, h2, h3 { color: #e74c3c; } h4, h5, h6 { color: #1d2936; } h1 { font-size: 26px; font-size: 1.625rem; } h2 { font-size: 22px; font-size: 1.375rem; text-transform: none !important; } h3 { margin-bottom: 0.5em; font-size: 16px; font-size: 1rem; } h4 { font-size: 16px; font-size: 1rem; text-transform: uppercase; } h5 { font-size: 16px; font-size: 1rem; } h6 { font-size: 16px; font-size: 1rem; text-transform: lowercase; } .site-title { font-family: "Josefin Sans", serif; font-size: 70px; font-size: 4.375rem; line-height: 120px; } .site-title a { color: white; text-decoration: none; -webkit-transition: opacity 0.15s ease-in-out; -moz-transition: opacity 0.15s ease-in-out; transition: opacity 0.15s ease-in-out; } .site-title a:hover, .site-title a:focus { color: white; opacity: .5; } .site-description { margin: 1em 0 0; color: white; font-size: 20px; font-size: 1.25rem; } .entry-title, .entry-title a, .widget-title { color: #e74c3c; } .entry-title { font-size: 36px; font-size: 2.25rem; line-height: 1.25; text-align: center; text-decoration: none; } .entry-title a:hover, .entry-title a:focus { color: #d62c1a; } .page-title { margin-bottom: 1em; color: #556677; text-align: center; } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 2em; } /* Text elements */ p { margin-bottom: 1.5em; } ul, ol { margin: 0 0 2em 3em; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: bold; } dd { margin: 0 1.5em 1.5em; } b, strong { font-weight: bold; color: #15191e; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0; padding: 0 1.5em; border-left: 10px solid #ce4435; } q { quotes: '"' '"'; } q:before { content: open-quote; } q:after { content: close-quote; } cite { color: #15191e; } address { margin: 0 0 2em; } pre { background: #eee; font-family: 'Ubuntu Mono', monospace; font-size: 20px; font-size: 1.25rem; line-height: 1.6; margin-bottom: 1.6em; padding: 1.6em; overflow: auto; max-width: 100%; } code, kbd, tt, var { font: 20px 'Ubuntu Mono', monospace; font-size: 20px; font-size: 1.25rem; } abbr, acronym { border-bottom: 1px dotted #dddddd; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; } sup, sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; } sup { bottom: 1ex; } sub { top: .5ex; } small { font-size: 75%; } big { font-size: 125%; } figure { margin: 0; } table { margin: 0 0 2em; width: 100%; } th { font-weight: bold; } .site-content th, .site-content td { padding: 5px 10px; } .site-content th { font-weight: normal; color: white; background: #46d9bc; } .site-content td { background: #c1f7ec; } .site-content tr:nth-of-type(odd) td { background: #abf4e5; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } /* Links */ a { color: #16a387; text-decoration: none; -webkit-transition: color 0.15s ease-in-out; -moz-transition: color 0.15s ease-in-out; transition: color 0.15s ease-in-out; } a:hover, a:active, a:focus { color: #107662; } a:focus { outline: none; text-decoration: underline !important; } @media screen and (max-width: 450px) { html { font-size: 80%; } .site-title { margin: 30px 0; min-height: 0; font-size: 80px; font-size: 5rem; line-height: 1; } .site-description { font-size: 25px; font-size: 1.5625rem; } } body { margin: 40px; max-width: 740px !important; }