/* ==========================================================================
Styling and layout for all media
========================================================================== */
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in older browsers.
* Correct `block` display not defined for `details` or `summary` in IE 11 and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* Remove tap delay in modern browsers.
*/
a,
input,
button {
-ms-touch-action: none;
touch-action: none;
}
/* Clearfix
========================================================================== */
/**
* Clearfix using the 'A new micro clearfix hack' method.
*
* More info: http://nicolasgallagher.com/micro-clearfix-hack/
*/
header::after,
footer::after,
nav ul::after,
nav ol::after,
.clearfix::after,
.container::after,
.paginator::after {
display: table;
clear: both;
content: "";
}
/* ==========================================================================
Styling and layout for screen media (mobile first)
========================================================================== */
@media screen {
/* Layout
========================================================================== */
/**
* 1. Always force scrollbar padding so we don't get 'jumping'.
* 2. Prevent text size adjust after mobile device orientation change, without
* disabling user zoom.
*/
html {
/* 1 */
overflow-y: scroll;
/* 2 */
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/**
* 1. Set `body` to `relative` to allow positioning of absolute elements.
* 2. Remove default margin.
*/
body {
/* 1 */
position: relative;
/* 2 */
margin: 0;
background: #f7f7f7;
}
/**
* Outer wrapper for main layouts.
*
* Example HTML:
*
*
*
* Content
*
*
*/
.wrapper {
padding: 1px 0;
border-bottom: 1px solid #cccccc;
background: #ffffff;
}
/**
* Wrapper for layouts, and for site header/footer.
*
* Example HTML:
*
*
*
* Content
*
*
*/
.site-header,
.site-footer,
.container {
width: 88%;
max-width: 54em;
margin: 0 auto;
}
/**
* Additional styling for child content within site header.
*/
.site-header {
padding: 1em 0;
}
.site-header h1 {
margin: 0;
}
.site-header h3 {
margin: 0.5em 0 0;
}
/**
* Additional styling for child content within site footer.
*/
.site-footer {
padding: 0.5em 0;
}
/**
* Styling for articles.
*
* 1. Prevent really, really long words in article from breaking layout.
*/
.article {
margin-bottom: 2em;
/* 1 */
word-wrap: break-word;
}
/**
* Styling for complementary content.
*
* Initially the sidebar appears under main content, it is then repositioned
* with media queries at 2nd breakpoint.
*
* 1. Prevent really, really long words in article from breaking layout.
*/
.complementary-content {
margin: 2em -6% 0;
padding: 0 6%;
border-top: 2px dashed #cccccc;
/* 1 */
word-wrap: break-word;
}
/* Navigation
========================================================================== */
/**
* Style mobile first version of the navigation menu. Desktop version will
* override some rules with extra styling at 1st breakpoint.
*
* Example HTML:
*
*
*/
.site-navigation {
background-color: #dddddd;
}
.site-navigation > div {
position: relative;
max-width: 54em;
margin: 0 auto;
}
.site-navigation ul {
margin: 0;
padding: 0;
list-style: none;
}
.site-navigation li {
transition: box-shadow 0.2s linear;
border-bottom: 1px solid #cccccc;
background-color: #eeeeee;
}
.site-navigation li:first-child {
border-top: 1px solid #cccccc;
}
.site-navigation li:hover {
background-color: #f8f8f8;
}
.site-navigation li:active {
background-color: lightgray;
box-shadow: inset 0 0.2em 0.25em rgba(0, 0, 0, 0.15);
}
.site-navigation li.active {
background-color: white;
box-shadow: none;
}
.site-navigation a {
display: block;
padding: 0.5em 6%;
color: #333333;
}
.site-navigation a:hover, .site-navigation a:visited {
color: #333333;
text-decoration: none;
}
.site-navigation a:active {
color: #1a1a1a;
text-decoration: none;
}
/**
* Search field in navigation.
*/
.search {
padding: 1em 6% 0.5em;
background: #ffffff;
}
.search input[type="search"] {
width: 16em;
height: 2.125em;
padding-right: 0.1875em;
padding-left: 2em;
border-radius: 0.5em;
background: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMnB4JyBoZWlnaHQ9JzMycHgnIHZpZXdCb3g9JzAgMCAzMiAzMic+PGcgZmlsbD0nJTIzMzMzJz48cGF0aCBkPSdNNCwxM2MwLTUsNC05LDktOWM1LDAsOSw0LDksOWMwLDUtNCw5LTksOUM4LDIyLDQsMTgsNCwxM3ogTTEzLDE5YzMuMywwLDYtMi43LDYtNnMtMi43LTYtNi02cy02LDIuNy02LDZTOS43LDE5LDEzLDE5eicvPjxwYXRoIGQ9J00xNy41LDE5bDEuNS0xLjVsNC41LDNMMjgsMjVjMCwwLDAsMS41LTAuNzUsMi4yNVMyNSwyOCwyNSwyOGwtNC41LTQuNUwxNy41LDE5eicvPjwvZz48L3N2Zz4=") no-repeat left center;
background-size: 2em 2em;
}
/* Links
========================================================================== */
/**
* 1. Remove potential background colour from active links.
* 2. Specify link colour.
* 3. Remove default underline style from non-hover state links.
* 4. Interrupt the decoration line to let the shape of the text show through
* in supported browsers.
*/
a {
/* 1 */
background-color: transparent;
/* 2 */
color: #004cbf;
/* 3 */
text-decoration: none;
/* 4 */
-webkit-text-decoration-skip: ink edges;
text-decoration-skip: ink edges;
}
a:hover, a:active {
outline: 0;
color: #0066ff;
text-decoration: underline;
}
a:focus {
outline: thin solid #0066ff;
}
a:visited {
color: #003380;
}
/**
* Additional styling for `h1` heading links.
*/
h1 a {
border-radius: 0.125em;
color: #333333;
}
h1 a:visited {
color: #333333;
}
h1 a:hover, h1 a:active {
background-color: #f7f7f7;
color: #333333;
text-decoration: none;
}
/**
* Additional styling for child links within site header.
*/
.site-header h1 a:hover, .site-header h1 a:active {
background-color: #e8e8e8;
}
/**
* Paginator (prev/next) navigation links on articles/article lists.
*
* Example HTML:
*
*