/* Welcome to Compass. Use this file to define print styles.
* Import this file using the following HTML or equivalent:
* */
/*doc
---
title: Files
name: files
category: Files
These are the common files we use in our framework.
*/
/*doc
---
title: global-imports.scss
name: global-imports.scss
category: Files
---
This is a centralized import file that covers the main libraries and component files. you should import this into any new standalone .css
These are the files that need to be on each stand alone stylesheet, this is the basis of our framework
*/
/*doc
---
title: variables.scss
name: variables.scss
category: Files
---
Variables.scss contain color values, fonts, font-sizes and padding options you should use instead of setting those yourself.
For example: instead of using `font-size: 22px` you should instead use `font-size: $txt-size-xxlarge` this way we can adjust the sizes in one place rather than all over the stylesheets.
*/
/*------------------------------------*\
COLORS
\*------------------------------------*/
/* 0, 640px */
/* 641px, 1024px */
/* 1025px, 1440px */
/* 1441px, 1920px */
/* 1921px, ... */
/*doc
---
title: Setting basic defaults
name: defaults
category: Theming
---
Variables.scss contain color values, fonts, font-sizes, grid values etc.... that you can use to create your own themes for other journals.
#Units
We are assuming that pixel values will be converted to pixels using the rem-calc function from the foundation framework from zurb - http:foundation.zurb.com/ - if not using foundation you can change these values to use the units of your choice. you will have to go through the scss code to remove the rem-calc function.
*/
/*doc
---
title: Reusable Variables
name: reusable_variables
category: utilities
---
Use variables rather than setting the values yourself.
Unfortunately it's impractical to list them all here but I'll provide a few highlights:
option | result
--------------- | -----------------
`$border-radius-default`| our default border-radius
`$border-radius-large` | our larger border-radius
`$default-box-shadow` | our default box shadow (you can also `@include box-shadow()`);
`$pad-xsmall`| 5px
`$pad-small`| 10px
`$pad-notsmall`| 15px
`$pad-default`| 20px
`$pad-medium`| 30px
`$pad-large`| 40px
`$font-face-fancy`| Albert font
`$font-face-plain` | arial font
`$clr-brand`| sets the journal color
`$clr-highlight`| sets the plos-default color
*/
/*doc
---
title: foundation.scss
name: foundation
category: Files
---
We are using foundation from zurb for our base framework. We dont' want to use all of of it's components so we pick and choose here.
*/
/*doc
---
title: variables.scss
name: variables.scss
category: Files
---
Variables.scss contain color values, fonts, font-sizes and padding options you should use instead of setting those yourself.
For example: instead of using `font-size: 22px` you should instead use `font-size: $txt-size-xxlarge` this way we can adjust the sizes in one place rather than all over the stylesheets.
*/
/*------------------------------------*\
COLORS
\*------------------------------------*/
/* 0, 640px */
/* 641px, 1024px */
/* 1025px, 1440px */
/* 1441px, 1920px */
/* 1921px, ... */
/*doc
---
title: Setting basic defaults
name: defaults
category: Theming
---
Variables.scss contain color values, fonts, font-sizes, grid values etc.... that you can use to create your own themes for other journals.
#Units
We are assuming that pixel values will be converted to pixels using the rem-calc function from the foundation framework from zurb - http:foundation.zurb.com/ - if not using foundation you can change these values to use the units of your choice. you will have to go through the scss code to remove the rem-calc function.
*/
/*doc
---
title: Reusable Variables
name: reusable_variables
category: utilities
---
Use variables rather than setting the values yourself.
Unfortunately it's impractical to list them all here but I'll provide a few highlights:
option | result
--------------- | -----------------
`$border-radius-default`| our default border-radius
`$border-radius-large` | our larger border-radius
`$default-box-shadow` | our default box shadow (you can also `@include box-shadow()`);
`$pad-xsmall`| 5px
`$pad-small`| 10px
`$pad-notsmall`| 15px
`$pad-default`| 20px
`$pad-medium`| 30px
`$pad-large`| 40px
`$font-face-fancy`| Albert font
`$font-face-plain` | arial font
`$clr-brand`| sets the journal color
`$clr-highlight`| sets the plos-default color
*/
meta.foundation-version {
font-family: "/5.2.2/";
}
meta.foundation-mq-small {
font-family: "/only screen/";
width: 0em;
}
meta.foundation-mq-medium {
font-family: "/only screen and (min-width:0em)/";
width: 0em;
}
meta.foundation-mq-large {
font-family: "/only screen and (min-width:64.063em)/";
width: 64.063em;
}
meta.foundation-mq-xlarge {
font-family: "/only screen and (min-width:90.063em)/";
width: 90.063em;
}
meta.foundation-mq-xxlarge {
font-family: "/only screen and (min-width:120.0625rem)/";
width: 120.0625rem;
}
meta.foundation-data-attribute-namespace {
font-family: false;
}
html, body {
height: 100%;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
font-size: 100%;
}
body {
background: white;
color: #333333;
padding: 0;
margin: 0;
font-family: "arial";
font-weight: normal;
font-style: normal;
line-height: 1;
position: relative;
cursor: auto;
}
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 {
max-width: none !important;
}
.left {
float: left !important;
}
.right {
float: right !important;
}
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.hide {
display: none;
}
.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%;
}
.inline-list {
margin: 0 auto 1.0625rem auto;
margin-left: -1.375rem;
margin-right: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.inline-list > li {
list-style: none;
float: left;
margin-left: 1.375rem;
display: block;
}
.inline-list > li > * {
display: block;
}
.label {
font-weight: normal;
font-family: "arial";
text-align: center;
text-decoration: none;
line-height: 1;
white-space: nowrap;
display: inline-block;
position: relative;
margin-bottom: inherit;
padding: 0.25rem 0.5rem 0.375rem;
font-size: 0.6875rem;
background-color: #3c63af;
color: white;
}
.label.radius {
border-radius: 5px;
}
.label.round {
border-radius: 1000px;
}
.label.alert {
background-color: #e53350;
color: white;
}
.label.success {
background-color: #16a127;
color: white;
}
.label.secondary {
background-color: #333333;
color: white;
}
.range-slider {
display: block;
position: relative;
width: 100%;
height: 1rem;
border: 1px solid #dddddd;
margin: 1.25rem 0;
-ms-touch-action: none;
touch-action: none;
background: #fafafa;
}
.range-slider.vertical-range {
display: block;
position: relative;
width: 100%;
height: 1rem;
border: 1px solid #dddddd;
margin: 1.25rem 0;
-ms-touch-action: none;
touch-action: none;
display: inline-block;
width: 1rem;
height: 12.5rem;
}
.range-slider.vertical-range .range-slider-handle {
margin-top: 0;
margin-left: -0.5rem;
position: absolute;
bottom: -10.5rem;
}
.range-slider.vertical-range .range-slider-active-segment {
width: 0.875rem;
height: auto;
bottom: 0;
}
.range-slider.radius {
background: #fafafa;
border-radius: 5px;
}
.range-slider.radius .range-slider-handle {
background: #3c63af;
border-radius: 5px;
}
.range-slider.radius .range-slider-handle:hover {
background: #35579a;
}
.range-slider.round {
background: #fafafa;
border-radius: 1000px;
}
.range-slider.round .range-slider-handle {
background: #3c63af;
border-radius: 1000px;
}
.range-slider.round .range-slider-handle:hover {
background: #35579a;
}
.range-slider-active-segment {
display: inline-block;
position: absolute;
height: 0.875rem;
background: #323232;
}
.range-slider-handle {
display: inline-block;
position: absolute;
z-index: 1;
top: -0.3125rem;
width: 2rem;
height: 1.375rem;
border: 1px solid none;
cursor: pointer;
background: #3c63af;
}
.range-slider-handle:hover {
background: #35579a;
}
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: black;
background: transparent;
z-index: 99;
display: none;
top: 0;
left: 0;
}
dialog, .reveal-modal {
visibility: hidden;
display: none;
position: absolute;
z-index: 100;
width: 100vw;
top: 0;
left: 0;
background-color: #333333;
padding: 0;
}
@media only screen and (max-width: 90em) {
dialog, .reveal-modal {
min-height: 100vh;
}
}
@media only screen and (min-width: 0em) {
dialog, .reveal-modal {
left: 50%;
}
}
dialog .column,
dialog .columns, .reveal-modal .column,
.reveal-modal .columns {
min-width: 0;
}
dialog > :first-child, .reveal-modal > :first-child {
margin-top: 0;
}
dialog > :last-child, .reveal-modal > :last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 0em) {
dialog, .reveal-modal {
margin-left: -50%;
width: 100%;
}
}
@media only screen and (min-width: 0em) {
dialog, .reveal-modal {
top: 0;
}
}
dialog .close-reveal-modal, .reveal-modal .close-reveal-modal {
font-size: 2.5rem;
line-height: 1;
position: absolute;
top: 0.5rem;
right: 0.6875rem;
color: #aaaaaa;
font-weight: bold;
cursor: pointer;
}
dialog[open] {
display: block;
visibility: visible;
}
@media only screen and (min-width: 0em) {
dialog, .reveal-modal {
padding: 0;
}
dialog.round, .reveal-modal.round {
border-radius: 1000px;
}
dialog.collapse, .reveal-modal.collapse {
padding: 0;
}
}
@media only screen and (min-width: 0em) and (min-width: 0em) {
dialog.tiny, .reveal-modal.tiny {
margin-left: -15%;
width: 30%;
}
}
@media only screen and (min-width: 0em) and (min-width: 0em) {
dialog.small, .reveal-modal.small {
margin-left: -20%;
width: 40%;
}
}
@media only screen and (min-width: 0em) and (min-width: 0em) {
dialog.medium, .reveal-modal.medium {
margin-left: -30%;
width: 60%;
}
}
@media only screen and (min-width: 0em) and (min-width: 0em) {
dialog.large, .reveal-modal.large {
margin-left: -35%;
width: 70%;
}
}
@media only screen and (min-width: 0em) and (min-width: 0em) {
dialog.xlarge, .reveal-modal.xlarge {
margin-left: -50%;
width: 100%;
}
}
@media only screen and (min-width: 0em) {
dialog.full, .reveal-modal.full {
top: 0;
left: 0;
height: 100vh;
min-height: 100vh;
margin-left: 0 !important;
}
}
@media only screen and (min-width: 0em) and (min-width: 0em) {
dialog.full, .reveal-modal.full {
margin-left: -50vw;
width: 100vw;
}
}
@media print {
dialog, .reveal-modal {
background: #fff !important;
}
}
.tabs {
*zoom: 1;
margin-bottom: 0 !important;
}
.tabs:before, .tabs:after {
content: " ";
display: table;
}
.tabs:after {
clear: both;
}
.tabs dd {
position: relative;
margin-bottom: 0 !important;
float: left;
}
.tabs dd > a {
display: block;
background: #efefef;
color: #222222;
padding: 0 0;
font-family: "arial";
font-size: 1rem;
}
.tabs dd > a:hover {
background: #e1e1e1;
}
.tabs dd.active a {
background: white;
}
.tabs.radius dd:first-child a {
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.tabs.radius dd:last-child a {
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
.tabs.vertical dd {
position: inherit;
float: none;
display: block;
top: auto;
}
.tabs-content {
*zoom: 1;
margin-bottom: 0 !important;
width: 100%;
}
.tabs-content:before, .tabs-content:after {
content: " ";
display: table;
}
.tabs-content:after {
clear: both;
}
.tabs-content > .content {
display: none;
float: left;
padding: 0 !important 0;
width: 100%;
}
.tabs-content > .content.active {
display: block;
float: none;
}
.tabs-content > .content.contained {
padding: 0 !important;
}
.tabs-content.vertical {
display: block;
}
.tabs-content.vertical > .content {
padding: 0 0 !important;
}
@media only screen and (min-width: 0em) {
.tabs.vertical {
width: 20%;
float: left;
margin-bottom: 0;
}
.tabs-content.vertical {
width: 80%;
float: left;
margin-left: -1px;
}
}
.no-js .tabs-content > .content {
display: block;
float: none;
}
/* Tooltips */
.has-tip {
border-bottom: none;
cursor: pointer;
font-weight: normal;
color: #333333;
}
.has-tip:hover, .has-tip:focus {
border-bottom: none;
color: #3c63af;
}
.has-tip.tip-left, .has-tip.tip-right {
float: none !important;
}
.tooltip {
display: none;
position: absolute;
z-index: 999;
font-weight: normal;
font-size: 11px;
line-height: 1.3;
padding: 1.25rem;
max-width: 85%;
left: 50%;
width: 100%;
color: #333333;
background: #efefef;
}
.tooltip > .nub {
display: block;
left: 5px;
position: absolute;
width: 0;
height: 0;
border: solid 5px;
border-color: transparent transparent #efefef transparent;
top: -10px;
}
.tooltip > .nub.rtl {
left: auto;
right: 5px;
}
.tooltip.radius {
border-radius: 5px;
}
.tooltip.round {
border-radius: 1000px;
}
.tooltip.round > .nub {
left: 2rem;
}
.tooltip.opened {
color: #3c63af !important;
border-bottom: none !important;
}
.tap-to-close {
display: block;
font-size: 0.625rem;
color: #777777;
font-weight: normal;
}
@media only screen and (min-width: 0em) {
.tooltip > .nub {
border-color: transparent transparent #efefef transparent;
top: -10px;
}
.tooltip.tip-top > .nub {
border-color: #efefef transparent transparent transparent;
top: auto;
bottom: -10px;
}
.tooltip.tip-left, .tooltip.tip-right {
float: none !important;
}
.tooltip.tip-left > .nub {
border-color: transparent transparent transparent #efefef;
right: -10px;
left: auto;
top: 50%;
margin-top: -5px;
}
.tooltip.tip-right > .nub {
border-color: transparent #efefef transparent transparent;
right: auto;
left: -10px;
top: 50%;
margin-top: -5px;
}
}
meta.foundation-mq-topbar {
font-family: "/only screen and (min-width:0em)/";
width: 0em;
}
/* Wrapped around .top-bar to contain to grid width */
.contain-to-grid {
width: 100%;
background: #efefef;
}
.contain-to-grid .top-bar {
margin-bottom: 0;
}
.fixed {
width: 100%;
left: 0;
position: fixed;
top: 0;
z-index: 99;
}
.fixed.expanded:not(.top-bar) {
overflow-y: auto;
height: auto;
width: 100%;
max-height: 100%;
}
.fixed.expanded:not(.top-bar) .title-area {
position: fixed;
width: 100%;
z-index: 99;
}
.fixed.expanded:not(.top-bar) .top-bar-section {
z-index: 98;
margin-top: auto;
}
.top-bar {
overflow: hidden;
height: auto;
line-height: auto;
position: relative;
background: #efefef;
margin-bottom: 0;
}
.top-bar ul {
margin-bottom: 0;
list-style: none;
}
.top-bar .row {
max-width: none;
}
.top-bar form,
.top-bar input {
margin-bottom: 0;
}
.top-bar input {
height: auto;
padding-top: .35rem;
padding-bottom: .35rem;
font-size: 0.75rem;
}
.top-bar .button, .top-bar button {
padding-top: .45rem;
padding-bottom: .35rem;
margin-bottom: 0;
font-size: 0.75rem;
}
.top-bar .title-area {
position: relative;
margin: 0;
}
.top-bar .name {
height: auto;
margin: 0;
font-size: 16px;
}
.top-bar .name h1 {
line-height: auto;
font-size: 13px;
margin: 0;
}
.top-bar .name h1 a {
font-weight: normal;
color: #3c63af;
width: 75%;
display: block;
padding: 0 0;
}
.top-bar .toggle-topbar {
position: absolute;
right: 0;
top: 0;
}
.top-bar .toggle-topbar a {
color: #3c63af;
text-transform: false;
font-size: false;
font-weight: false;
position: relative;
display: block;
padding: 0 0;
height: auto;
line-height: auto;
}
.top-bar .toggle-topbar.menu-icon {
right: 0;
top: 50%;
margin-top: -16px;
padding-left: 40px;
}
.top-bar .toggle-topbar.menu-icon a {
height: 34px;
line-height: 33px;
padding: 0;
padding-right: 25px;
color: false;
position: relative;
}
.top-bar .toggle-topbar.menu-icon a::after {
content: "";
position: absolute;
right: 0;
display: block;
width: 16px;
top: 0;
height: 0;
box-shadow: 0 10px 0 1px false, 0 16px 0 1px false, 0 22px 0 1px false;
}
.top-bar.expanded {
height: auto;
background: transparent;
}
.top-bar.expanded .title-area {
background: #efefef;
}
.top-bar.expanded .toggle-topbar a {
color: false;
}
.top-bar.expanded .toggle-topbar a::after {
box-shadow: 0 10px 0 1px false, 0 16px 0 1px false, 0 22px 0 1px false;
}
.top-bar-section {
left: 0;
position: relative;
width: auto;
transition: left 300ms ease-out;
}
.top-bar-section ul {
width: 100%;
height: auto;
display: block;
background: #efefef;
font-size: 16px;
margin: 0;
}
.top-bar-section .divider,
.top-bar-section [role="separator"] {
border-top: solid 1px #777777;
clear: both;
height: 1px;
width: 100%;
}
.top-bar-section ul li > a {
display: block;
width: 100%;
color: #3c63af;
padding: 12px 0 12px 0;
padding-left: 0;
font-family: "arial";
font-size: 13px;
font-weight: normal;
text-transform: none;
background: #efefef;
}
.top-bar-section ul li > a.button {
font-size: 13px;
padding-right: 0;
padding-left: 0;
background-color: #3c63af;
border-color: #304f8c;
color: white;
}
.top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
background-color: #304f8c;
}
.top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
color: white;
}
.top-bar-section ul li > a.button.secondary {
background-color: #333333;
border-color: #292929;
color: white;
}
.top-bar-section ul li > a.button.secondary:hover, .top-bar-section ul li > a.button.secondary:focus {
background-color: #292929;
}
.top-bar-section ul li > a.button.secondary:hover, .top-bar-section ul li > a.button.secondary:focus {
color: white;
}
.top-bar-section ul li > a.button.success {
background-color: #16a127;
border-color: #12811f;
color: white;
}
.top-bar-section ul li > a.button.success:hover, .top-bar-section ul li > a.button.success:focus {
background-color: #12811f;
}
.top-bar-section ul li > a.button.success:hover, .top-bar-section ul li > a.button.success:focus {
color: white;
}
.top-bar-section ul li > a.button.alert {
background-color: #e53350;
border-color: #c71936;
color: white;
}
.top-bar-section ul li > a.button.alert:hover, .top-bar-section ul li > a.button.alert:focus {
background-color: #c71936;
}
.top-bar-section ul li > a.button.alert:hover, .top-bar-section ul li > a.button.alert:focus {
color: white;
}
.top-bar-section ul li > button {
font-size: 13px;
padding-right: 0;
padding-left: 0;
background-color: #3c63af;
border-color: #304f8c;
color: white;
}
.top-bar-section ul li > button:hover, .top-bar-section ul li > button:focus {
background-color: #304f8c;
}
.top-bar-section ul li > button:hover, .top-bar-section ul li > button:focus {
color: white;
}
.top-bar-section ul li > button.secondary {
background-color: #333333;
border-color: #292929;
color: white;
}
.top-bar-section ul li > button.secondary:hover, .top-bar-section ul li > button.secondary:focus {
background-color: #292929;
}
.top-bar-section ul li > button.secondary:hover, .top-bar-section ul li > button.secondary:focus {
color: white;
}
.top-bar-section ul li > button.success {
background-color: #16a127;
border-color: #12811f;
color: white;
}
.top-bar-section ul li > button.success:hover, .top-bar-section ul li > button.success:focus {
background-color: #12811f;
}
.top-bar-section ul li > button.success:hover, .top-bar-section ul li > button.success:focus {
color: white;
}
.top-bar-section ul li > button.alert {
background-color: #e53350;
border-color: #c71936;
color: white;
}
.top-bar-section ul li > button.alert:hover, .top-bar-section ul li > button.alert:focus {
background-color: #c71936;
}
.top-bar-section ul li > button.alert:hover, .top-bar-section ul li > button.alert:focus {
color: white;
}
.top-bar-section ul li:hover:not(.has-form) > a {
background: #3c63af;
color: white;
}
.top-bar-section ul li.active > a {
background: #ffd87a;
color: #ffd87a;
}
.top-bar-section ul li.active > a:hover {
background: #3c63af;
color: white;
}
.top-bar-section .has-form {
padding: 0;
}
.top-bar-section .has-dropdown {
position: relative;
}
.top-bar-section .has-dropdown > a:after {
margin-right: 0;
margin-top: -false/2-2;
position: absolute;
top: 50%;
right: 0;
}
.top-bar-section .has-dropdown.moved {
position: static;
}
.top-bar-section .has-dropdown.moved > .dropdown {
display: block;
position: static !important;
height: auto;
width: auto;
overflow: visible;
clip: auto;
position: absolute !important;
width: 100%;
}
.top-bar-section .has-dropdown.moved > a:after {
display: none;
}
.top-bar-section .dropdown {
position: absolute;
left: 100%;
top: 0;
z-index: 99;
display: block;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
.top-bar-section .dropdown li {
width: 100%;
height: auto;
}
.top-bar-section .dropdown li a {
font-weight: normal;
padding: 8px 0;
}
.top-bar-section .dropdown li a.parent-link {
font-weight: normal;
}
.top-bar-section .dropdown li.title h5 {
margin-bottom: 0;
}
.top-bar-section .dropdown li.title h5 a {
color: #3c63af;
line-height: auto/2;
display: block;
}
.top-bar-section .dropdown li.has-form {
padding: 8px 0;
}
.top-bar-section .dropdown li .button, .top-bar-section .dropdown li button {
top: auto;
}
.top-bar-section .dropdown label {
padding: 8px 0 2px;
margin-bottom: 0;
text-transform: false;
color: false;
font-weight: false;
font-size: false;
}
.js-generated {
display: block;
}
@media only screen and (min-width: 0em) {
.top-bar {
background: #efefef;
*zoom: 1;
overflow: visible;
}
.top-bar:before, .top-bar:after {
content: " ";
display: table;
}
.top-bar:after {
clear: both;
}
.top-bar .toggle-topbar {
display: none;
}
.top-bar .title-area {
float: left;
}
.top-bar .name h1 a {
width: auto;
}
.top-bar input,
.top-bar .button,
.top-bar button {
font-size: 0.875rem;
position: relative;
top: 7px;
}
.top-bar.expanded {
background: #efefef;
}
.contain-to-grid .top-bar {
max-width: 61.25rem;
margin: 0 auto;
margin-bottom: 0;
}
.top-bar-section {
transition: none 0 0;
left: 0 !important;
}
.top-bar-section ul {
width: auto;
height: auto !important;
display: inline;
}
.top-bar-section ul li {
float: left;
}
.top-bar-section ul li .js-generated {
display: none;
}
.top-bar-section li.hover > a:not(.button) {
background: #3c63af;
color: white;
}
.top-bar-section li:not(.has-form) a:not(.button) {
padding: 0 0;
line-height: auto;
background: #efefef;
}
.top-bar-section li:not(.has-form) a:not(.button):hover {
background: #3c63af;
}
.top-bar-section li.active:not(.has-form) a:not(.button) {
padding: 0 0;
line-height: auto;
color: #ffd87a;
background: #ffd87a;
}
.top-bar-section li.active:not(.has-form) a:not(.button):hover {
background: #3c63af;
}
.top-bar-section .has-dropdown.moved {
position: relative;
}
.top-bar-section .has-dropdown.moved > .dropdown {
display: block;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
.top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
display: block;
position: static !important;
height: auto;
width: auto;
overflow: visible;
clip: auto;
position: absolute !important;
}
.top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
border: none;
content: "\00bb";
top: 1rem;
margin-top: -1px;
right: 5px;
line-height: 1.2;
}
.top-bar-section .dropdown {
left: 0;
top: auto;
background: transparent;
min-width: 100%;
}
.top-bar-section .dropdown li a {
color: #333333;
white-space: nowrap;
padding: 0;
background: transparent;
}
.top-bar-section .dropdown li:not(.has-form) a:not(.button) {
color: #333333;
background: transparent;
}
.top-bar-section .dropdown li:not(.has-form):hover > a:not(.button) {
color: white;
background: #3c63af;
}
.top-bar-section .dropdown li label {
white-space: nowrap;
background: false;
}
.top-bar-section .dropdown li .dropdown {
left: 100%;
top: 0;
}
.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
border-bottom: none;
border-top: none;
border-right: solid 1px #f1f1f1;
clear: none;
height: auto;
width: 0;
}
.top-bar-section .has-form {
background: #efefef;
padding: 0 auto/3;
height: auto;
}
.top-bar-section .right li .dropdown {
left: auto;
right: 0;
}
.top-bar-section .right li .dropdown li .dropdown {
right: 100%;
}
.top-bar-section .left li .dropdown {
right: auto;
left: 0;
}
.top-bar-section .left li .dropdown li .dropdown {
left: 100%;
}
.no-js .top-bar-section ul li:hover > a {
background: #3c63af;
color: white;
}
.no-js .top-bar-section ul li:active > a {
background: #ffd87a;
color: #ffd87a;
}
.no-js .top-bar-section .has-dropdown:hover > .dropdown {
display: block;
position: static !important;
height: auto;
width: auto;
overflow: visible;
clip: auto;
position: absolute !important;
}
}
.text-left {
text-align: left !important;
}
.text-right {
text-align: right !important;
}
.text-center {
text-align: center !important;
}
.text-justify {
text-align: justify !important;
}
@media only screen and (max-width: 90em) {
.small-only-text-left {
text-align: left !important;
}
.small-only-text-right {
text-align: right !important;
}
.small-only-text-center {
text-align: center !important;
}
.small-only-text-justify {
text-align: justify !important;
}
}
@media only screen {
.small-text-left {
text-align: left !important;
}
.small-text-right {
text-align: right !important;
}
.small-text-center {
text-align: center !important;
}
.small-text-justify {
text-align: justify !important;
}
}
@media only screen and (min-width: 0em) and (max-width: 90em) {
.medium-only-text-left {
text-align: left !important;
}
.medium-only-text-right {
text-align: right !important;
}
.medium-only-text-center {
text-align: center !important;
}
.medium-only-text-justify {
text-align: justify !important;
}
}
@media only screen and (min-width: 0em) {
.medium-text-left {
text-align: left !important;
}
.medium-text-right {
text-align: right !important;
}
.medium-text-center {
text-align: center !important;
}
.medium-text-justify {
text-align: justify !important;
}
}
@media only screen and (min-width: 64.063em) and (max-width: 90em) {
.large-only-text-left {
text-align: left !important;
}
.large-only-text-right {
text-align: right !important;
}
.large-only-text-center {
text-align: center !important;
}
.large-only-text-justify {
text-align: justify !important;
}
}
@media only screen and (min-width: 64.063em) {
.large-text-left {
text-align: left !important;
}
.large-text-right {
text-align: right !important;
}
.large-text-center {
text-align: center !important;
}
.large-text-justify {
text-align: justify !important;
}
}
@media only screen and (min-width: 90.063em) and (max-width: 120em) {
.xlarge-only-text-left {
text-align: left !important;
}
.xlarge-only-text-right {
text-align: right !important;
}
.xlarge-only-text-center {
text-align: center !important;
}
.xlarge-only-text-justify {
text-align: justify !important;
}
}
@media only screen and (min-width: 90.063em) {
.xlarge-text-left {
text-align: left !important;
}
.xlarge-text-right {
text-align: right !important;
}
.xlarge-text-center {
text-align: center !important;
}
.xlarge-text-justify {
text-align: justify !important;
}
}
@media only screen and (min-width: 120.0625rem) and (max-width: 6249999.9375rem) {
.xxlarge-only-text-left {
text-align: left !important;
}
.xxlarge-only-text-right {
text-align: right !important;
}
.xxlarge-only-text-center {
text-align: center !important;
}
.xxlarge-only-text-justify {
text-align: justify !important;
}
}
@media only screen and (min-width: 120.0625rem) {
.xxlarge-text-left {
text-align: left !important;
}
.xxlarge-text-right {
text-align: right !important;
}
.xxlarge-text-center {
text-align: center !important;
}
.xxlarge-text-justify {
text-align: justify !important;
}
}
/* Typography resets */
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
.block-quote,
.pullquote,
th,
td {
margin: 0;
padding: 0;
}
/* Default Link Styles */
a {
color: #3c63af;
text-decoration: none;
line-height: inherit;
}
a:hover, a:focus {
color: #333333;
}
a img {
border: none;
}
/* Default paragraph styles */
p {
font-family: inherit;
font-weight: normal;
font-size: 0.8125rem;
line-height: 1.125rem;
margin-bottom: 0.8125rem;
text-rendering: optimizeLegibility;
}
p.lead {
font-size: 1.03125rem;
line-height: 1.6;
}
p aside {
font-size: 0.8125rem;
line-height: 1.125rem;
font-style: italic;
}
/* Default header styles */
h1, h2, h3, h4, h5, h6 {
font-family: "albert";
font-weight: normal;
font-style: normal;
color: #333333;
text-rendering: optimizeLegibility;
margin-top: 0;
margin-bottom: 1.6875rem;
line-height: 1.3;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
font-size: 0.75rem;
color: #333333;
line-height: 0;
}
h1 {
font-size: 1.0625rem;
}
h2 {
font-size: 0.625rem;
}
h3 {
font-size: 0.6875rem;
}
h4 {
font-size: 0.6875rem;
}
h5 {
font-size: 0.8125rem;
}
h6 {
font-size: 0.8125rem;
}
.subheader {
line-height: 1.3;
color: #333333;
font-weight: bold;
margin-top: 1.6875rem;
margin-bottom: 0.5625rem;
}
hr {
border: solid #dddddd;
border-width: 1px 0 0;
clear: both;
margin: 1.25rem 0 1.1875rem;
height: 0;
}
/* Helpful Typography Defaults */
em,
i {
font-style: italic;
line-height: inherit;
}
strong,
b {
font-weight: bold;
line-height: inherit;
}
small {
font-size: 0.75rem;
line-height: inherit;
}
code {
font-family: Consolas, "Liberation Mono", Courier, monospace;
font-weight: bold;
color: #b51731;
}
/* Lists */
ul,
ol,
dl {
font-size: 0.8125rem;
line-height: 1.125rem;
margin-bottom: 0.8125rem;
list-style-position: outside;
font-family: inherit;
}
ul {
margin-left: 1.25rem;
}
ul.no-bullet {
margin-left: 0;
}
ul.no-bullet li ul,
ul.no-bullet li ol {
margin-left: 1.25rem;
margin-bottom: 0;
list-style: none;
}
/* Unordered Lists */
ul li ul,
ul li ol {
margin-left: 1.25rem;
margin-bottom: 0;
}
ul.square li ul, ul.circle li ul, ul.disc li ul {
list-style: inherit;
}
ul.square {
list-style-type: square;
margin-left: 1.25rem;
}
ul.circle {
list-style-type: circle;
margin-left: 1.25rem;
}
ul.disc {
list-style-type: disc;
margin-left: 1.25rem;
}
ul.no-bullet {
list-style: none;
}
/* Ordered Lists */
ol {
margin-left: 1.25rem;
}
ol li ul,
ol li ol {
margin-left: 1.25rem;
margin-bottom: 0;
}
/* Definition Lists */
dl dt {
margin-bottom: 0;
font-weight: bold;
}
dl dd {
margin-bottom: 0.8125rem;
}
/* Abbreviations */
abbr,
acronym {
text-transform: uppercase;
font-size: 90%;
color: #333333;
border-bottom: 1px dotted #dddddd;
cursor: help;
}
abbr {
text-transform: none;
}
/* Blockquotes */
blockquote, .block-quote, .pullquote {
margin: 0 0 0.8125rem;
padding: 0 1.25rem;
border-left: 0.3125rem solid #cccccc;
}
blockquote cite, .block-quote cite, .pullquote cite {
display: block;
font-size: 13px;
color: #333333;
}
blockquote cite:before, .block-quote cite:before, .pullquote cite:before {
content: "\2014 \0020";
}
blockquote cite a, .block-quote cite a, .pullquote cite a,
blockquote cite a:visited,
.block-quote cite a:visited,
.pullquote cite a:visited {
color: #3c63af;
}
blockquote, .block-quote, .pullquote,
blockquote p,
.block-quote p,
.pullquote p {
line-height: 1.125rem;
color: #333333;
}
/* Microformats */
.vcard {
display: inline-block;
margin: 0 0 1.25rem 0;
border: 1px solid #dddddd;
padding: 0.625rem 0.75rem;
}
.vcard li {
margin: 0;
display: block;
}
.vcard .fn {
font-weight: bold;
font-size: 0.9375rem;
}
.vevent .summary {
font-weight: bold;
}
.vevent abbr {
cursor: default;
text-decoration: none;
font-weight: bold;
border: none;
padding: 0 0.0625rem;
}
@media only screen and (min-width: 0em) {
h1, h2, h3, h4, h5, h6 {
line-height: 1.3;
}
h1 {
font-size: 1.6875rem;
}
h2 {
font-size: 1.25rem;
}
h3 {
font-size: 1rem;
}
h4 {
font-size: 1rem;
}
}
/*doc
---
title: Intro
name: intro
category: Grid
---
A grid allows us to set widths of columns and containers so that they are consistent.
The plos-grid mixins use the foundation grid but allow us to extend the foundation grid in a few important ways:
- it allows us to put margins on the outside which allows us the ability to set containers.
- it allows us to use pixel widths for columns that do not fit into the 12 columns grid.
## Usage
* wrap in a container: `@extend .plos-row` or use the `@plos-row` mixin if you need more control
* for each column `@extend .plos-column-NUMBER` or use the `@plos-columns` mixin if you need more control
```html_example
3 column div
8 column div
```
``` scss_example
.grid-example-simple{
@extend .plos-row; // make this 3 columns out of 12 width
.grid-example-column-1 {
@extend .plos-column-3;
}
.grid-example-column-2{
@extend .plos-column-8;
}
}
```
column classes | result
------------------------------------------| -----------------
`@extend .plos-column-NUMBER` | sets the column width NUMBER of 12 with the default margins on either side.
`@extend .plos-column-third` | sets the column to a third of the container with default margins on either side
`@extend .plos-column-half` | sets the column to half of the container with default margins on either side.
`@extend %width-full` | sets the column the full-width of teh container with default margins on either side.
*/
/* sets up the body container */
.plos-row {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 61.25rem;
*zoom: 1;
}
.plos-row:before, .plos-row:after {
content: " ";
display: table;
}
.plos-row:after {
clear: both;
}
.plos-column-0 {
width: 0rem;
float: left;
margin-left: 0.625rem;
margin-right: 0.625rem;
}
.plos-column-1 {
width: 5.10417rem;
float: left;
margin-left: 0.625rem;
margin-right: 0.625rem;
}
.plos-column-2 {
width: 10.20833rem;
float: left;
margin-left: 0.625rem;
margin-right: 0.625rem;
}
.plos-column-3 {
width: 15.3125rem;
float: left;
margin-left: 0.625rem;
margin-right: 0.625rem;
}
.plos-column-4 {
width: 20.41667rem;
float: left;
margin-left: 0.625rem;
margin-right: 0.625rem;
}
.plos-column-5 {
width: 25.52083rem;
float: left;
margin-left: 0.625rem;
margin-right: 0.625rem;
}
.plos-column-6 {
width: 30.625rem;
float: left;
margin-left: 0.625rem;
margin-right: 0.625rem;
}
.plos-column-7 {
width: 35.72917rem;
float: left;
margin-left: 0.625rem;
margin-right: 0.625rem;
}
.plos-column-8 {
width: 40.83333rem;
float: left;
margin-left: 0.625rem;
margin-right: 0.625rem;
}
.plos-column-9 {
width: 45.9375rem;
float: left;
margin-left: 0.625rem;
margin-right: 0.625rem;
}
.plos-column-10 {
width: 51.04167rem;
float: left;
margin-left: 0.625rem;
margin-right: 0.625rem;
}
.plos-column-11 {
width: 56.14583rem;
float: left;
margin-left: 0.625rem;
margin-right: 0.625rem;
}
.plos-column-third {
width: 20.41667rem;
float: left;
margin-left: 0.625rem;
margin-right: 0.625rem;
}
.plos-column-half {
width: 30.625rem;
float: left;
margin-left: 0.625rem;
margin-right: 0.625rem;
}
/*
%width-x-small {
@include plos-grid-column(267);
}
%width-small {
@include plos-grid-column(306);
}
%width-medium {
@include plos-grid-column(470);
}
*/
main,
#pagehdr {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 61.25rem;
*zoom: 1;
min-width: 61.25rem;
max-width: 61.25rem;
margin: 0 auto;
}
main:before, main:after,
#pagehdr:before,
#pagehdr:after {
content: " ";
display: table;
}
main:after,
#pagehdr:after {
clear: both;
}
main.width-full,
#pagehdr.width-full {
width: 100%;
max-width: 100%;
}
/*doc
---
title: layout options
name: layout
category: Scaffold
---
```sass_example
```
```sass_example
```
*/
/*doc
---
title: Advanced Features
name: z-advanced
category: Grid
---
##setting column widths in pixels
`@extend .plos-grid-column(NUMBER)` - creates a column of the width you set with margins on either side.
```html_example
120px div
```
```sass_example
.grid-example-one {
@include plos-grid-column(120);
}
```
##further customisation
###gutters
variable | result
------------------------------------------| -----------------
`$gutter: none` | no gutter on either side
`$gutter: left` | default gutter on the left side - the plos default is 20px
`$gutter: right` | default gutter on the right side - the plos default is 20px
`$gutter: left, $gutter-width: 50` | *50px gutter on the left side ONLY - $gutter width does nothing without $gutter: left or right.
`$gutter: right, $gutter-width: 50` | *50px gutter on the right side ONLY - $gutter width does nothing without $gutter: left or right.
```html_example
120px div left gutter of 50px none on the right
120px div with default gutter on the left, none on the right
120px div with 50px gutter on the right, none on the left
120px div with default gutter on the right, none on the left
`@extend .button`
*/
.pill {
background: #3c63af;
padding: 1.25rem;
border-radius: 5px;
color: white;
display: inline-block;
}
.pill:hover {
background: #333333;
}
.pill-small {
background: #3c63af;
padding: 0.625rem;
border-radius: 5px;
color: white;
display: inline-block;
}
.button {
border-radius: 4px;
width: auto;
padding: 0.3125rem;
height: auto;
line-height: 1.0625rem;
font-size: 12px;
font-weight: bold;
color: white;
}
.button-big {
background: #333333;
padding: 0 0.625rem;
border-radius: 5px;
color: white;
display: inline-block;
line-height: 2.1875rem;
font-weight: bold;
font-size: 15px;
text-align: center;
}
.button-big:hover {
background: #333333;
}
.button-big.highlighted {
background-color: #3c63af;
}
.button-default {
background: #333333;
padding: 0 0.625rem;
border-radius: 5px;
color: white;
display: inline-block;
line-height: 2.1875rem;
font-family: "arial";
font-size: 14px;
text-align: center;
}
.button-default:hover {
background: #333333;
}
/*doc
---
title: blocks
name: blocks
category: components
---
Blocks are essentially boxes with some defaults, such as color and bottom margin. You can either use the extendable classes below or the mixin if you need more flexibility. if you are using a certain style over and over feel free to add a extendable class of your own.
### Extendable Classes
We created extendable classes for some commonly used blocks.
example | extension
--------|----------
I am a block - usually on the homepage
| `@extend .block`
I am a block - with no shadow
| `@extend .block-noshadow`
I am a block - with padding and no border radius
| `@extend .block-card`
###Mixin
We also have a mixin you can use to create your own blocks:
`@include blocks();`
variable | result | default
------------------------------------------| ----------------- | ---------
`$radius: top` | default radius on the top corners of block | yes
`$radius: none` | no radius |
`$radius: all` | default radius on all corners of block |
`$padding: default` | block has a padding of `$pad-small` - 10px | yes
`$padding: none` | block has no padding |
`$padding: NUMBER` | allows you to set the number padding - use variables |
`$color: COLOR` | sets the background color | `$white`
*/
.block {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
border-top-right-radius: 5px;
padding: 0.625rem;
-moz-box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.15);
box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.15);
margin-bottom: 1.25rem;
background: white;
}
.block-noshadow {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
border-top-right-radius: 5px;
padding: 0.625rem;
margin-bottom: 1.25rem;
background: white;
}
.block-card, .carousel-wrap.small {
padding: 0;
-moz-box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.15);
box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.15);
margin-bottom: 1.25rem;
background: white;
}
.block-dark {
border-radius: 5px;
padding: 0.625rem;
margin-bottom: 1.25rem;
background: #333333;
}
/*
This is the visible area of you carousel.
Set a width here to define how much items are visible.
The width can be either fixed in px or flexible in %.
Position must be relative!
*/
.jcarousel {
position: relative;
overflow: hidden;
}
/*
This is the container of the carousel items.
You must ensure that the position is relative or absolute and
that the width is big enough to contain all items.
*/
.jcarousel ul {
width: 20000em;
position: relative;
/* Optional, required in this case since it's a
element */
list-style: none;
margin: 0;
padding: 0;
}
/*
These are the item elements. jCarousel works best, if the items
have a fixed width and height (but it's not required).
*/
.jcarousel li {
/* Required only for block elements like