/*
Theme Name: BMJT 4.0
Description: BMJT 4.0
Version: 1.0
Author: BMJT
00 Resources
01 Reset
02 Global
03 Scopes
04 Layout
04 Objects
05 Utilities
/*----------------------------------------------------------------------------------------------------------
=Resources
BASELINE CALCULATIONS
Font size = Desired size / Current size
Margin bottom = Desired height / ( em size * baseline px )
Line heights = Keep consistent e.g. 1.5em
/*----------------------------------------------------------------------------------------------------------
=Reset
*/
*,
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
input,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary { display: block; }
audio,
canvas,
progress,
video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; height: 0; }
progress { vertical-align: baseline; }
[hidden],
template { display: none; }
abbr[title],
dfn[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b,
strong { font-weight: inherit; }
b,
strong { font-weight: 600; }
i,
em,
dfn { font-style: italic; }
cite { font-style: normal; }
mark { background-color: #ff0; color: #000; font-style: italic; font-weight: bold; }
small { display: block; }
sub,
sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ins { background: #ff9; color: #000; text-decoration: none; }
pre,
code,
kbd,
samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; overflow: auto; }
q { quotes: none; }
q:before,
q:after { content: ""; content: none; }
label { cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
td,
th { padding: 0; }
button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }
button:-moz-focusring,
input:-moz-focusring { outline: 1px dotted ButtonText; }
input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration
{ -webkit-appearance: none; }
button,
[type="reset"],
[type="submit"],
html [type="button"],
input[type="button"],
input[type="reset"],
input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"],
input[type="radio"] { box-sizing: border-box; padding: 0; margin-right: 0.5rem; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button
{ height: auto; }
button,
input { line-height: normal; }
button,
input,
select { overflow: visible; }
button,
input,
optgroup,
select,
textarea { color: inherit; font: inherit; margin: 0; }
optgroup { font-weight: bold }
input,
select,
textarea { margin: 0; vertical-align: baseline; *vertical-align: middle; }
button,
select { text-transform: none; }
button[disabled],
html input[disabled] { cursor: default; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
textarea { overflow: auto; vertical-align: top; resize: vertical; max-width:100%; height:auto; }
html { overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
li { list-style: none; }
a { background-color: transparent; }
a:active,
a:hover { outline-width: 0; }
::selection { background:#ddd; color:white; text-shadow: none; }
::-moz-selection { background:#ddd; color:white; text-shadow: none; }
input:focus { outline: 1px dotted; }
:focus { outline: 1px dotted; }
::-webkit-input-placeholder { color:rgba(164,194,177,1.0) }
:-moz-placeholder { color:rgba(164,194,177,1.0) }
::-moz-placeholder { color:rgba(164,194,177,1.0) }
:-ms-input-placeholder { color:rgba(164,194,177,1.0) }
svg:not(:root) { overflow: hidden; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; width: auto; max-width:100%; height:auto; }
/* When an image in Wordpress has a caption it is surrounded by a div with class 'wp-caption' which overrides img styling */
.wp-caption { width: auto !important; max-width:100%; height:auto; }
/*----------------------------------------------------------------------------------------------------------
=Global Rules
*/
/* Set base in EM scale everything else in REM */
html {
font: 400 137.5%/1.45 'franklin-gothic-urw','-apple-system','BlinkMacSystemFont','Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Open Sans','Helvetica Neue','sans-serif';
color: rgba(0,0,0,0.9);
background: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media screen and (min-width:31.25em) {
html { font-size: 143.75%; }
}
/* Base rhythm */
p,
dl {
margin-bottom: 1.125rem;
}
/* Links */
a {
color: #999;
text-decoration: none;
//border-bottom: 1px solid #e8e8e8;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a:hover {
color: #222;
background: yellow;
}
/* Typographic Details */
/* Hyphenation */
p,
li {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
/* Horizontal Rules */
hr {
border: 0;
border-bottom: 1px dashed #e8e8e8;
margin: 0 auto 1.5rem auto;
position: relative;
width: 75%;
}
/* Text Styles */
/* Meta data e.g. tags, dates */
.meta {
color: #999;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Meta data always has lining numbers */
font-variant-numeric: lining-nums, tabular-nums;
-webkit-font-feature-settings: "lnum", "tnum";
-moz-font-feature-settings: "lnum", "tnum";
-ms-font-feature-settings: "lnum", "tnum";
font-feature-settings: "lnum", "tnum";
}
.meta a {
border-bottom: 1px solid #ddd;
}
/* Small text */
.small {
/* 17 / 20 */
font-size: 0.85rem;
}
/* Subheadings */
.subhead {
font-size: 0.8rem;
margin-bottom: 0.3rem;
text-transform: uppercase;
letter-spacing: 0.075rem;
font-weight: 600;
}
.section-heading {
margin-top: 3rem;
padding-bottom: 0.375rem;
border-bottom: 1px solid #e8e8e8;
margin-bottom: 1.5rem;
}
/*----------------------------------------------------------------------------------------------------------
=Scopes (s-)
*/
/* Wordpress CMS scope [s-cms] */
/* Titles */
.s-cms h1,
.s-cms h2,
.s-cms h3,
.s-cms h4,
.s-cms h5 {
/* 20 / 30 */
font-size: 1.2rem;
font-weight: bold;
/* 24 / 30 */
line-height: 1.25;
}
/* Images */
.s-cms img {
margin-bottom: 1.5rem;
display: block;
}
/* Lists */
.s-cms li {
font-size: 0.95rem;
}
.s-cms ol,
.s-cms ul {
padding: 0 1rem;
}
@media screen and (min-width:50em) {
.s-cms ol,
.s-cms ul {
padding: 0;
}
}
.s-cms ol li {
list-style: decimal;
padding-left: 0.1rem;
}
.s-cms ul li {
list-style: none;
position: relative;
}
/* Bullets as pseudo elements instead — More control over size/shape */
.s-cms ul li:before {
content: "\2022";
position: absolute;
left: -1rem;
}
/* Spacing of text elements — Margins only go upwards (bar special circumstances) */
/* Base */
.s-cms p {
margin: 0;
}
.s-cms blockquote {
margin: 2.25rem 0;
}
/* Contextual spacing — When elements meet/follow eachother */
.s-cms li + li {
margin-top: 0.5rem;
}
.s-cms * + ul,
.s-cms * + ol {
margin-top: 1.125rem;
}
.s-cms * + h1,
.s-cms * + h2,
.s-cms * + h3,
.s-cms * + h4,
.s-cms * + h5 {
margin-top: 1.75rem;
}
.s-cms * + p {
margin-top: 1rem;
}
.s-cms ul + p,
.s-cms ol + p {
margin-top: 1rem;
}
.s-cms h1 + p,
.s-cms h2 + p,
.s-cms h3 + p,
.s-cms h4 + p,
.s-cms h5 + p {
margin-top: 0.75rem;
}
.s-cms * + img,
.s-cms * + p img {
margin-top: 1.25rem;
}
.s-cms * + form {
margin-top: 1.25rem;
}
.s-cms > :last-child {
/* Fallback just in case anything isn't covered */
margin-bottom: 0;
}
/* Captions */
.s-cms .wp-caption-text,
.s-cms .caption {
font-weight: 300;
font-size: 0.95rem;
letter-spacing: 0.01rem;
color: #aaa;
/* Negative margin to eat into image margin */
margin-top: -0.75rem;
}
/* Quotations and Blockquotes */
.s-cms q,
.s-cms blockquote {
/* 24 / 20 */
font-size: 1.2rem;
font-weight: 300;
/* 30 / 24 */
line-height: 1.3333333333;
color: rgba(85,158,173,1);
}
@media screen and (min-width:37.5em) {
.s-cms blockquote {
/* 30 / 20 */
font-size: 1.5rem;
}
}
/* Form Elements */
.s-cms .btn {
/* Margin supplied by tag */
margin-bottom: 0;
}
.s-cms .form .btn {
/* Need a margin when used with other form elements i.e. Inside a form */
margin-bottom: 1rem;
}
/* Details/Fine-tuning */
/* Remove top margins of first thing inside posts to avoid doubling up e.g. Lists, images
/* Syntax selects *only* the first child of the .s-sms-content element */
.s-cms > :first-child {
margin-top: 0;
}
/* Increased space when image follows a paragraph */
.s-cms p + img,
.s-cms p + a img,
.s-cms p + .wp-caption img,
.s-cms p + .wp-caption a img {
margin-top: 1.75rem;
}
/* Increased space when image follows a list */
.s-cms ul + img,
.s-cms ol + img,
.s-cms ul + a img,
.s-cms ol + a img,
.s-cms ul + .wp-caption img,
.s-cms ol + .wp-caption img,
.s-cms ul + .wp-caption a img,
.s-cms ol + .wp-caption a img {
margin-top: 2rem;
}
/* Increased space when list follows an image */
.s-cms a + ul,
.s-cms a + ol,
.s-cms img + ul,
.s-cms img + ol,
.s-cms .wp-caption + ul,
.s-cms .wp-caption + ol {
margin-top: 2rem;
}
/* Fixing twatty more link — Creates a
around itself */
[id^="more-"] {
display: none;
}
/*----------------------------------------------------------------------------------------------------------
=Layout Objects (l-) [ Elements are 'primed' using classes then styled where neccessary within objects ]
*/
/* A. Containers */
.l-ctr {
margin: 0 auto;
max-width: 64rem;
width: 90%;
}
/* Series of increasing sizes */
.ctr--xs { max-width: 30rem; }
.ctr--sm { max-width: 36rem; }
.ctr--md { max-width: 42rem; }
.ctr--xl { max-width: 48rem; }
.ctr--xxl { max-width: 54rem; }
/* For a container inside a container — Removes 90% limit */
.ctr--inner { width: 100%; }
/* B. Columns [ Columns of content that generally span full height of container - Single direction margins ] */
.l-col {
float: left;
width: 100%;
}
/* Basic grid system when simple layouts are needed — Everything 100% below 50em */
@media screen and (min-width:31.25em) {
[class*="col--"] {
margin-right: 3%;
}
[class*="col--"]:last-child {
margin-right: 0;
}
.col--1-6 { width: 14.16%; }
.col--1-5 { width: 17.60%; }
.col--1-4 { width: 22.75%; }
.col--1-3,
.col--2-6 { width: 31.33%; }
.col--2-5 { width: 38.20%; }
.col--1-2,
.col--2-4,
.col--3-6 { width: 48.50%; }
.col--3-5 { width: 58.80%; }
.col--2-3,
.col--4-6 { width: 65.66%; }
.col--3-4 { width: 74.25%; }
.col--4-5 { width: 79.40%; }
.col--5-6 { width: 82.83%; }
}
/* C. Grids [ Boxes of content that live on multiple rows - Margins on either side ] */
.l-grid {
position: relative;
margin: 0 2% 0 2%;
display: inline-block;
vertical-align: top;
width: 96%;
}
.l-grid--loose {
/* Larger gaps between grid units */
margin: 0 3% 0 3%;
width: 94%;
}
.l-grid--tight {
/* Tighter gaps between grid units */
margin: 0 1% 0 1%;
width: 98%;
}
/* D. Sections [ Spacing above ] */
[class*="l-sec--"]{
/* Reduce chance of collapsing */
padding-top: 1px;
}
/* */
.l-sec--xs { margin-top: .25rem; }
/* */
.l-sec--sm { margin-top: .5rem; }
/* */
.l-sec--md { margin-top: 1rem; }
/* */
.l-sec--lg { margin-top: 1.5rem; }
/* */
.l-sec--xl { margin-top: 2rem; }
/* */
.l-sec--xxl { margin-top: 2.5rem; }
@media screen and (min-width: 50em) {
/* 0.25U = 7.5px */
.l-sec--xs { margin-top: .375rem; }
/* 0.50U = 15px */
.l-sec--sm { margin-top: .75rem; }
/* 1.00U = 30px */
.l-sec--md { margin-top: 1.5rem; }
/* 1.50U = 45px */
.l-sec--lg { margin-top: 2.25rem; }
/* 2.00U = 60px */
.l-sec--xl { margin-top: 3.0rem; }
/* 3.00U = 90px */
.l-sec--xxl { margin-top: 4.5rem; }
}
.l-sec-r--md {
padding-top: 1.25rem;
margin-top: 2.5rem;
border-top: 1px solid #e8e8e8;
}
/* Subsections [ Sections within sections ] */
.l-subsec { border-top: 1px solid #e8e8e8 }
/* E. Blocks [ Spacing above and below ] */
/* 1.0 U = 30px */
.l-block--xs {
margin-top: .5rem;
padding-bottom: .5rem;
}
/* 1.0 U = 30px */
.l-block--sm {
padding-top: 1rem;
padding-bottom: 1rem;
}
/* 1.0 U = 30px */
.l-block--md {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
/* F. Boxes [ Spacing on all sides ] */
.l-box {
border: 1px solid #e8e8e8;
padding: 1.5rem;
border-radius: 8px;
}
.l-box :last-child {
margin-bottom: 0;
}
/* G. Multiple columns [ One container split into multiple columns ] */
@media screen and (min-width:40em) {
.l-split {
column-count: 2;
}
}
/*----------------------------------------------------------------------------------------------------------
=Components (Atoms)
*/
/* Form Elements */
.input,
.btn,
.textarea {
margin-bottom: 1rem;
border-radius: 0.25rem;
}
.input {
height: 2.5rem;
display: inline-block;
padding: 0.75rem 0;
color: #333;
border: 1px solid #e8e8e8;
}
.btn {
text-align: center;
display: inline-block;
color: #fff;
background-color: #222;
border: 1px solid #222;
padding: 0.3rem 0.75rem 0.3rem;
text-decoration: none;
-webkit-transition: color 0.3s ease, background 0.3s ease, border 0.3s ease;
-moz-transition: color 0.3s ease, background 0.3s ease, border 0.3s ease;
-o-transition: color 0.3s ease, background 0.3s ease, border 0.3s ease;
transition: color 0.3s ease, background 0.3s ease, border 0.3s ease;
}
.btn:hover {
background-color: #00cfb5;
border-color: #00cfb5;
color: white;
}
.btn:active {
background-color: orangered;
border-color: orangered;
color: white;
}
/* Buttons inside forms -- Need to align with other form elements */
.btn--form {
height: 2.5rem;
padding: 0 0.75rem;
margin-bottom: 1rem;
}
.textarea {
min-height: 8rem;
padding: 0.75rem;
color: #333;
}
/*----------------------------------------------------------------------------------------------------------
=Objects (Organisms) (o-) (A-Z)
*/
/*-----------------------------------------------------------------------------------------------------------
=Data box
*/
.data-box p {
margin: 0;
}
.data-box p + p {
/* Counteract cms styling */
margin: 0;
}
.data-box__title {
font-weight: bold;
}
.data-box__body {
clear: both;
}
@media screen and (min-width:31.25em) {
p.data-box__title {
float: left;
font-weight: bold;
margin: 0;
}
p.data-box__meta {
float: right;
margin: 0;
}
}
/*-----------------------------------------------------------------------------------------------------------
=Accessibility
*/
/* Text meant only for screen readers */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
/* many screen reader and browser combinations announce broken words as they would appear visually */
word-wrap: normal !important;
}
/*----------------------------------------------------------------------------------------------------------
=Utilities (u-)
*/
/* Horizontal aligningment */
.u-center { text-align: center; }
.u-right { text-align: right; }
/* Vertical centering — Parent must be position: relative */
.u-vcenter {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/* To create a scrolling row e.g. Navigation */
.u-scroll {
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
padding-left: 1rem;
padding-right: 1rem;
}
/* Clearfix */
.u-clr:before,
.u-clr:after {
content: "";
display: table;
clear: both;
}
/*----------------------------------------------------------------------------------------------------------
=New CSS
*/
/* reset */
p {
margin: 0;
}
/* global */
html {
background-color: rgba(0,0,0,0.02);
}
/* atoms */
.t1 {
font-weight: 600;
}
.t1 a {
color: #222;
}
.new {
background: yellow;
font-weight: 600;
text-transform: uppercase;
font-size: 65%;
letter-spacing: 0.1rem;
padding: 4px 2px 2px 4px;
}
/* layout */
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 3.5rem 0;
}
.content {
flex: 1;
}
.ctr {
margin: 0 auto;
max-width: 30rem;
width: 90%;
}
.section {
margin-top: 1.5rem;
}
.section--lg {
margin-top: 3rem;
}
.block {
padding: 1.5rem 0;
}
/* objects */
.post + .post {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid #e8e8e8;
}
/* scope */
.text p,
.text ul {
margin-bottom: 1.5rem;
}