@charset "UTF-8";
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Icon
Generic icon with different types (e.g. "b-icon b-icon--search" ). Icons are from two sources, icon font converted from svg and glyphicon font.
Create SVG/TTF/EOT/WOFF/WOFF2 icon-font and the scss file from SVG icons with Gulp build-iconfont task. See: https://www.npmjs.com/package/gulp-iconfont
Add a new icon
- Create the svg file for the icon and give the file a proper name, the file name is the css class name (e.g. down-arrow.svg, the css class for the icon is 'b-icon--down-arrow')
- Add the svg file into the '/src/assets/img/icons/svg' folder
- Run the gulp task 'gulp build-iconfont' in a terminal, it adds the icon into the font files 'src/assets/fonts/icon-font.eot/ttf/woff/woff2', and re-generates the scss file 'src/components/icon/svg2iconfont.scss' via the template 'src/components/icon/template.txt'
Update an icon
- Update the svg file related to the icon in the '/src/assets/img/icons/svg' folder
- Run the gulp task 'gulp build-iconfont' in a terminal, it updates the font files 'src/assets/fonts/icon-font.eot/ttf/woff/woff2', and re-generates the scss file 'src/components/icon/svg2iconfont.scss' via the template 'src/components/icon/template.txt'
Delete an icon
- Remove the svg file related to the icon in the '/src/assets/img/icons/svg' folder
- Run the gulp task 'gulp build-iconfont' in a terminal, it updates the font files 'src/assets/fonts/icon-font.eot/ttf/woff/woff2', and re-generates the scss file 'src/components/icon/svg2iconfont.scss' via the template 'src/components/icon/template.txt'
Generate icon font from the Glyphicon library.
See http://glyphicons.com/
Markup: demo.icon.html
Style guide: Base.Icon
*/
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Icon (glyph icon font)
Generic Glyphicon with different types (e.g. "b-icon b-icon--search" ).
.b-icon--search - :
.b-icon--triangle-top - :
.b-icon--triangle-bottom - :
.b-icon--triangle-right - :
.b-icon--triangle-left - :
.b-icon--arrow-up - :
.b-icon--hamburger - :
Markup: demo.icon.html
Style guide: Base.Icon.Glyph icon
*/
.b-icon--search:before {
content: "";
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.b-icon--triangle-top:before {
content: "";
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.b-icon--triangle-bottom:before {
content: "";
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.b-icon--triangle-right:before {
content: "";
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.b-icon--triangle-left:before {
content: "";
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.b-icon--arrow-up:before {
content: "";
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.b-icon--hamburger:before {
content: "";
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
/*
Icon (icon font)
Generic icon with different types (e.g. "b-icon b-icon--search" ).
.b-icon--close - :
.b-icon--crest - :
.b-icon--down-arrow - :
.b-icon--down-chevron - :
.b-icon--download-icon - :
.b-icon--external-link - :
.b-icon--facebook - :
.b-icon--google-plus - :
.b-icon--instagram - :
.b-icon--left-arrow - :
.b-icon--left-chevron - :
.b-icon--link - :
.b-icon--logo - :
.b-icon--minus - :
.b-icon--plus - :
.b-icon--print - :
.b-icon--right-arrow - :
.b-icon--right-chevron - :
.b-icon--twitter - :
.b-icon--up-chevron - :
.b-icon--youtube - :
Markup: demo.icon.html
Style guide: Base.Icon.Icon font
*/
@font-face {
font-family: "icon-font";
src: url("../bower_components/corporate-frontend/dist/assets/fonts/icon-font.eot");
src: url("../bower_components/corporate-frontend/dist/assets/fonts/icon-font.eot?#iefix") format("eot"), url("../bower_components/corporate-frontend/dist/assets/fonts/icon-font.woff2") format("woff2"), url("../bower_components/corporate-frontend/dist/assets/fonts/icon-font.woff") format("woff"), url("../bower_components/corporate-frontend/dist/assets/fonts/icon-font.ttf") format("truetype"), url("../bower_components/corporate-frontend/dist/assets/fonts/icon-font.svg#icon-font") format("svg"); }
.b-icon--close:before, .b-icon--crest:before, .b-icon--down-arrow:before, .b-icon--down-chevron:before, .b-icon--download-icon:before, .b-icon--external-link:before, .b-icon--facebook:before, .b-icon--google-plus:before, .b-icon--instagram:before, .b-icon--left-arrow:before, .b-icon--left-chevron:before, .b-icon--link:before, .b-icon--logo:before, .b-icon--minus:before, .b-icon--plus:before, .b-icon-filter--plus.collapsed:before, .b-icon-filter--plus:before, .b-icon--print:before, .b-icon--right-arrow:before, .b-icon--right-chevron:before, .b-icon--twitter:before, .b-icon--up-chevron:before, .b-icon--youtube:before {
text-transform: none;
text-decoration: none;
font-family: "icon-font";
font-weight: normal;
font-style: normal;
font-variant: normal; }
.b-icon--close:before {
content: ""; }
.b-icon--crest:before {
content: ""; }
.b-icon--down-arrow:before {
content: ""; }
.b-icon--down-chevron:before {
content: ""; }
.b-icon--download-icon:before {
content: ""; }
.b-icon--external-link:before {
content: ""; }
.b-icon--facebook:before {
content: ""; }
.b-icon--google-plus:before {
content: ""; }
.b-icon--instagram:before {
content: ""; }
.b-icon--left-arrow:before {
content: ""; }
.b-icon--left-chevron:before {
content: ""; }
.b-icon--link:before {
content: ""; }
.b-icon--logo:before {
content: ""; }
.b-icon--minus:before {
content: ""; }
.b-icon--plus:before {
content: ""; }
.b-icon-filter--plus.collapsed:before {
content: ""; }
.b-icon-filter--plus:before {
content: ""; }
.b-icon--print:before {
content: ""; }
.b-icon--right-arrow:before {
content: ""; }
.b-icon--right-chevron:before {
content: ""; }
.b-icon--twitter:before {
content: ""; }
.b-icon--up-chevron:before {
content: ""; }
.b-icon--youtube:before {
content: ""; }
.b-icon {
/* -------------- variables --------------- */
position: relative;
top: 2px; }
.b-icon-link__wrapper .b-icon.b-icon-link__icon {
position: absolute; }
.b-icon--side-left {
margin-right: 5px; }
.b-icon--side-right {
margin-left: 5px; }
.b-icon--align-top {
top: 0; }
.b-icon--red {
color: #e64626; }
.b-icon--dark {
color: black; }
@media (min-width: 768px) {
.b-icon--tablet-up-centered {
display: block;
float: none !important;
margin: 20px auto 0; } }
.b-icon--social-media {
width: 18px;
height: 18px; }
.b-dropdown .b-icon--down-chevron {
position: absolute;
top: 14px;
right: 20px; }
@media (min-width: 480px) {
.b-input-group--inline:not(:last-child) .b-dropdown .b-icon--down-chevron {
right: 40px; } }
.b-form .b-icon--down-chevron {
color: #e64626; }
.b-form--dark .b-icon--down-chevron {
color: white; }
.b-link-menu .b-icon {
height: 18px; }
/*
Paragraph text
Defines the base font size and spacing for regular paragraph text. Default is 20px margin bottom
.b-paragraph--no-spacing: Sets the margins to zero (0)
.b-paragraph--half-spacing: Set the margin bottom to 10px.
Markup: demo.paragraph.html
Style guide: Base.Paragraph
*/
.b-paragraph {
margin-bottom: 20px;
font-size: 14px; }
.b-paragraph--no-spacing {
margin: 0; }
.b-paragraph--half-spacing {
margin-bottom: 10px; }
/*
Text
Generic text modifiers for setting things like colour.
.b-text--align-left - Left-aligns the text
.b-text--align-right - Right-aligns the text
.b-text--align-centre - Centre-aligns the text
.b-text--weight-normal - Normal weight text
.b-text--bold - Bold text
.b-text--colour-default - Makes text with page body default colour
.b-text--colour-light - Makes text a light colour, according to the theme (e.g. white)
.b-text--colour-dark - Makes text a dark colour, according to the theme (e.g. black)
.b-text--colour-red - Makes text a red colour, it is for the red colour text
.b-text--size-base - Makes the text default body size (14px)
.b-text--size-sl-large - Makes the text size (16px)
.b-text--size-large - Makes the text large (18px)
.b-text--size-larger - Makes the text larger (20px)
.b-text--upper - Uppercase the text
.b-text--font-label - Apercu Mono font family
.b-text--nowrap - no wrap text
.b-text--wrap - html wrap the text with hyphens
Markup: demo.text.html
Style guide: Base.Text
*/
.b-text--align-left {
text-align: left; }
.b-text--align-right {
text-align: right; }
.b-text--align-centre {
text-align: center; }
.b-text--normal-weight {
font-weight: normal; }
.b-text--bold {
font-weight: bold; }
.b-text--colour-light {
color: white; }
.b-text--colour-dark {
color: black; }
.b-text--colour-default {
color: #333; }
.b-text--colour-red {
color: #ce3d20; }
.b-text--size-small {
font-size: 12px; }
.b-text--size-base {
font-size: 14px; }
.b-text--size-sl-large {
font-size: 16px; }
.b-text--size-large {
font-size: 18px; }
.b-text--size-larger {
font-size: 20px; }
.b-text--size-md-larger {
font-size: 24px; }
.b-text--upper {
text-transform: uppercase; }
.b-text--underline {
text-decoration: underline; }
.b-text--font-label {
font-family: "Apercu Mono", Courier, monospace; }
.b-text--nowrap {
white-space: nowrap; }
.b-text--wrap {
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto; }
/*
Title
Titles are specialised headings or heading-like elements with a distinct visual style, intended specifically used as
the title of a page or component.
.b-title--module-h1 - Level 1 module/component heading
.b-title--module-h2 - Level 2 module/component heading
.b-title--module-h3 - Level 3 module/component heading
.b-title--h1 - Level 1 content heading
.b-title--h2 - Level 2 content heading
.b-title--h3 - Level 3 content heading
.b-title--h4 - Level 4 content heading
.b-title--h5 - Level 5 content heading
.b-title--first - Removes the leading (top) margin from the title
.b-title--red - Title using red brand colour
.b-title--normal-weight - set title normal weight
Markup: This is a title
Style guide: Base.Title
*/
.b-title {
font-family: "Apercu", Helvetica, sans-serif;
font-weight: bold; }
.b-title--divider {
border-bottom: 2px solid black; }
.b-title--first {
margin-top: 0; }
.b-title--normal-weight {
font-weight: normal; }
.b-title--h1 {
line-height: 70px;
font-size: 60px; }
.b-title--h2 {
line-height: 70px;
font-size: 40px; }
.b-title--h3 {
line-height: 40px;
font-size: 30px; }
.b-title--h4 {
line-height: 30px;
font-size: 24px; }
.b-title--h5 {
line-height: 25px;
font-size: 18px; }
.b-title--module-h1 {
margin-bottom: 30px;
line-height: 1.25em;
font-size: 30.1px; }
.b-title--module-h2 {
margin-bottom: 30px;
line-height: 1.3em;
font-size: 23.8px; }
.b-title--module-h3 {
margin-bottom: 30px;
line-height: 1.4em;
font-size: 16.1px; }
.b-title--large {
line-height: 35px;
font-size: 24px;
font-weight: bold; }
.b-title--xlarge {
font-size: 40px;
font-weight: bold; }
.b-title--xlarge.b-title--divider {
margin-bottom: 55px;
padding-bottom: 24px; }
.b-title--red {
color: #e64626; }
/*
Link
Generic link modifiers for setting things like colour.
.b-link--colour-light - Makes link a light colour, according to the theme (e.g. white)
.b-link--colour-dark - Makes link a dark colour, according to the theme (e.g. black)
.b-link--underline - Makes link underlined be default, no underline on hover
.b-link--no-underline -Remove link underlined be default, hover and focus
.b-link--block - Makes link as a block component
.b-link--inline-block - Makes link as a inline block component
Markup: demo.link.html
Style guide: Base.Link
*/
.b-link:focus, .b-link:hover {
cursor: pointer; }
.b-link--colour-light, .b-link--colour-light:hover {
color: white; }
.b-link--colour-dark, .b-link--colour-dark:hover, .b-link--colour-dark:focus {
color: black; }
.b-link--underline {
text-decoration: underline; }
.b-link--underline:hover {
text-decoration: none; }
.b-link--no-underline {
text-decoration: none; }
.b-link--no-underline:focus, .b-link--no-underline:hover {
text-decoration: none; }
.b-link--block {
display: block; }
.b-link--inline-block {
display: inline-block; }
/*
Rule
Rules are dividing lines that can be applied to the top or bottom blocks of content, along with padding, to break pages up and provide clear delineation between components. The thickness, darkeness and surrounding
padding can be controlled with modifiers. The modifiers provided here are based on the various rule styles used by components in the corporate style guide.
## Examples ##
Larger padding and a thick black line on the top of the block:
```
This content will have a thick top border with spacious padding underneath.
```
Less padding and a thin, light grey line on the bottom of the block:
```
```
.b-rule--light - light border around
.b-rule--light-top - light border top
.b-rule--light-left - light border left
.b-rule--light-right - light border right
.b-rule--light-bottom - light border bottom
.b-rule--heavy-top - heavy border top
.b-rule--heavy-bottom - heavy border bottom
.b-rule--heavier-top - heavier border top
.b-rule--heavier-bottom - heavier border bottom
.b-rule--loose-top - loose border top
.b-rule--loose-bottom - loose border bottom
.b-rule--tight-top - tight border top
.b-rule--tight-bottom - tight border
Markup: demo.rule.html
Style guide: Base.Rule
*/
.b-rule {
/**
Rule (Colours)
rule modifiers to change border colours
.b-rule--bright-top - bright colour for border top
.b-rule--bright-bottom - bright colour for border bottom
Style guide: Base.Rule.Colours
*/ }
.b-rule--light {
border: 1px solid black; }
.b-rule--light-top {
border-top: 1px solid black; }
.b-rule--light-right {
border-right: 1px solid black; }
.b-rule--light-bottom {
border-bottom: 1px solid black; }
.b-rule--light-left {
border-left: 1px solid black; }
.b-rule--heavy-top {
border-top: 2px solid black; }
.b-rule--heavy-bottom {
border-bottom: 2px solid black; }
.b-rule--heavier-top {
border-top: 3px solid black; }
.b-rule--heavier-bottom {
border-bottom: 3px solid black; }
.b-rule--loose-top {
padding-top: 40px; }
.b-rule--loose-bottom {
padding-bottom: 40px; }
.b-rule--tight-top {
padding-top: 20px; }
.b-rule--tight-bottom {
padding-bottom: 20px; }
.b-rule--bright-top {
border-top-color: #bcbcbc; }
.b-rule--bright-bottom {
border-bottom-color: #bcbcbc; }
/*
Hidden
Generic text modifiers for setting things like colour.
.b-hidden--sm-desk-up - Hide the component on small desktop up screen
.b-hidden--tablet-up - Hide the component on tablet up screen
.b-hidden--mobile-landscape-up - Hide the component on mobile landscape up screen
Style guide: Base.Hidden
*/
.b-hidden--sm-desk-up {
visibility: visible; }
@media (min-width: 992px) {
.b-hidden--sm-desk-up {
display: none !important;
visibility: hidden !important; } }
@media (min-width: 768px) {
.b-hidden--tablet-up {
display: none !important;
visibility: hidden !important; } }
@media (min-width: 480px) {
.b-hidden--mobile-landscape-up {
display: none !important;
visibility: hidden !important; } }
/*
Icon link
This block component is to make the top right icon align with the link text on top
Markup:
b-icon-link--standard: link text and icon, icon won't have underline
Style guide: Components.Icon link
*/
.b-icon-link {
cursor: pointer; }
.b-icon-link__wrapper {
position: relative; }
.b-icon-link__text {
display: block;
padding-right: 25px; }
.b-icon-link__icon {
display: block;
position: absolute;
top: 0;
right: 0;
padding-top: 2px; }
.b-icon-link--standard {
text-decoration: none; }
.b-icon-link--standard .b-icon-link__text {
display: inline-block;
padding: 0; }
.b-icon-link--standard:hover, .b-icon-link--standard:focus {
text-decoration: none; }
.b-icon-link--standard:hover .b-icon-link__text, .b-icon-link--standard:focus .b-icon-link__text {
text-decoration: underline; }
.b-icon-link--align-left .b-icon-link__icon {
right: auto;
left: 0; }
.b-icon-link--align-left .b-icon-link__text {
padding-right: 0;
padding-left: 25px; }
/*
Spinner
Displays an animated loading image
Control the display of the spinner by adding/removing the `b-loading-spinner__container--loading` class from the container
Markup:
Style guide: Blocks.Spinner
*/
.b-spinner {
opacity: 1;
height: 20px; }
.b-spinner--hide {
transition: 200ms;
opacity: 0; }
.b-spinner__child {
display: inline-block;
position: relative;
width: 20px;
height: 20px;
overflow: hidden; }
.b-spinner__child::before, .b-spinner__child::after {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #e64626;
content: ""; }
.b-form--dark .b-spinner__child::before, .b-form--dark .b-spinner__child::after {
background-color: #fff; }
.b-spinner__child::after {
animation: left-to-right 3200ms infinite;
animation-fill-mode: forwards;
/* this prevents the animation from restarting! */ }
@keyframes left-to-right {
20% {
opacity: 1; }
0%,
50%,
100% {
opacity: 0; } }
.b-spinner__child--1::after {
animation-delay: 200ms; }
.b-spinner__child--2::after {
animation-delay: 400ms; }
.b-spinner__child--3::after {
animation-delay: 600ms; }
.b-spinner__child--4::after {
animation-delay: 800ms; }
.b-spinner__child--5::after {
animation-delay: 1000ms; }
.b-spinner__child--6::after {
animation-delay: 1200ms; }
.b-spinner__child::before {
animation: right-to-left 3200ms infinite;
animation-fill-mode: forwards;
/* this prevents the animation from restarting! */
opacity: 0; }
@keyframes right-to-left {
0%,
60%,
100% {
opacity: 0; }
70% {
opacity: 1; } }
.b-spinner__child--1::before {
animation-delay: 1000ms; }
.b-spinner__child--2::before {
animation-delay: 800ms; }
.b-spinner__child--3::before {
animation-delay: 600ms; }
.b-spinner__child--4::before {
animation-delay: 400ms; }
.b-spinner__child--5::before {
animation-delay: 200ms; }
.b-spinner__child--6::before {
animation-delay: 0ms; }
/*
Box
Generic box container, supporting various colours and bleed effects where the box outline extends outside of their
normal boundaries as part of the "breaking the grid" visual theme.
.b-box--red - Red/orange box
.b-box--grey - Grey/charcoal box
.b-box--mid-grey - Grey box, very strong grey box
.b-box--light-grey - Grey/charcoal box
.b-box--lightest-grey - lightest grey colour, e.g. button hover state
.b-box--grey - Grey/charcoal box
.b-box--brown - Brown box
.b-box--light-brown - Light brown box
.b-box--white - White box
Markup: demo.box.colour.html
Style guide: Blocks.Box
*/
.b-box {
margin-bottom: 40px;
padding: 25px;
/*
Box (background)
Adds a background cover image (e.g. .b-box--bg-cover)
Markup: demo.box.background.html
Style guide: Blocks.Box.Background
*/
/*
Box (compact)
.b-box--compact - removes bottom margin & reduces padding
Markup:
Style guide: Blocks.Box.Compact
*/
/*
Box (compressed)
.b-box--compressed - reduce padding top and bottom
.b-box--compressed-no-side-padding - reduce padding top and bottom and no side padding
Markup:
Style guide: Blocks.Box.Compact
*/
/*
Box (padding control)
.b-box--no-padding - removes padding
.b-box--no-padding-top - removes padding top
.b-box--no-padding-right - removes padding right
.b-box--no-padding-bottom - removes padding bottom
.b-box--no-padding-left - removes padding left
.b-box--padding-top - add padding top 20px
.b-box--padding-right - add padding right 20px
.b-box--padding-bottom - add padding bottom 20px
.b-box--padding-left - add padding left 20px
.b-box--padding-sm-top - add padding top 10px
.b-box--padding-sm-right - add padding right 10px
.b-box--padding-sm-bottom - add padding bottom 10px
.b-box--padding-sm-left - add padding left 10px
Markup:
Style guide: Blocks.Box.Padding control
*/
/*
Box (margin control)
.b-box--no-margin - removes margin
.b-box--margin-top - removes margin top
Markup:
Style guide: Blocks.Box.No padding
*/
/*
Box (bordered)
.b-box--bordered - Adds a border around the box
.b-box--bordered-thin-grey - Adds a thin grey border around the box
Markup: demo.box.bordered.html
Style guide: Blocks.Box.Bordered
*/
/*
Box (transparency)
.b-box--slightly-transparent - Adds a very subtle transparency effect when used in combination with a colour (e.g. .b-box--red)
.b-box--moderately-transparent - Adds a moderate transparency effect when used in combination with a colour (e.g. .b-box--red)
.b-box--strongly-transparent - Adds a strong transparency effect when used in combination with a colour (e.g. .b-box--red)
Markup: demo.box.transparency.html
Style guide: Blocks.Box.Transparency
*/
/*
Box (bleed left/right)
.b-box--bleed-left - Box bleeds out to the left
.b-box--bleed-right - Box bleeds out to the right
Markup: demo.box.bleed-lr.html
Style guide: Blocks.Box.Bleed
*/
/*
Box (auto-bleed)
.b-box--bleed - Box bleeds automatically to the left and/or right, depending on it's container
Markup: demo.box.auto-bleed.html
Style guide: Blocks.Box.Auto-bleed
*/ }
.b-box--red, .b-box--red.b-tag-list__item-control {
background-color: #e64626;
color: white; }
.b-box--grey {
background-color: #424242;
color: white; }
.b-box--mid-grey {
background-color: #555;
color: white; }
.b-box--light-grey {
background-color: #707070;
color: white; }
.b-box--lightest-grey {
background-color: #f1f2f2; }
.b-box--brown {
background-color: #92715e;
color: white; }
.b-box--light-brown {
background-color: #cca88b; }
.b-box--white {
background-color: white;
color: #424242; }
.b-box--bg-cover {
background-repeat: no-repeat;
background-position: center;
background-size: cover; }
.b-box--compact {
margin-bottom: 0;
padding: 9px 15px; }
.b-box--compact :last-child {
margin-bottom: 0; }
.b-tag-list__item-clickable-content .b-box--compact {
padding: 0; }
.b-box--compressed {
padding: 10px 25px; }
.b-box--compressed-no-side-padding {
padding: 10px 0; }
.b-box--no-padding {
padding: 0; }
.b-box--no-padding-top {
padding-top: 0; }
.b-box--no-padding-right {
padding-right: 0; }
.b-box--no-padding-bottom {
padding-bottom: 0; }
.b-box--no-padding-left {
padding-left: 0; }
.b-box--padding-top {
padding-top: 20px; }
.b-box--padding-right {
padding-right: 20px; }
.b-box--padding-bottom {
padding-bottom: 20px; }
.b-box--padding-left {
padding-left: 20px; }
.b-box--padding-sm-top {
padding-top: 10px; }
.b-box--padding-sm-right {
padding-right: 10px; }
.b-box--padding-sm-bottom {
padding-bottom: 10px; }
.b-box--padding-sm-left {
padding-left: 10px; }
.b-box--section-top {
padding-top: 40px; }
.b-box--section-bottom {
padding-bottom: 40px; }
.b-box--no-margin {
margin: 0; }
.b-box--margin-top {
margin-top: 10px; }
@media (min-width: 768px) {
.b-box--margin-right-sm {
margin-right: 20px; }
.b-box--no-margin-top-sm {
margin-top: 0; } }
@media (min-width: 992px) {
.b-box--margin-right-md {
margin-right: 45px; }
.b-box--no-margin-top-md {
margin-top: 0; } }
@media (min-width: 1200px) {
.b-box--margin-right-lg {
margin-right: 55px; }
.b-box--no-margin-top-lg {
margin-top: 0; } }
.b-box--bordered {
border: 1px solid black; }
.b-box--bordered-thin-grey {
border: 1px solid #d8dbdd; }
.b-box--slightly-transparent.b-box--red {
background-color: rgba(230, 70, 38, 0.95); }
.b-box--slightly-transparent.b-box--grey {
background-color: rgba(66, 66, 66, 0.95); }
.b-box--moderately-transparent.b-box--red {
background-color: rgba(230, 70, 38, 0.7); }
.b-box--moderately-transparent.b-box--grey {
background-color: rgba(66, 66, 66, 0.7); }
.b-box--half-transparent.b-box--red {
background-color: rgba(230, 70, 38, 0.5); }
.b-box--half-transparent.b-box--grey {
background-color: rgba(66, 66, 66, 0.5); }
.b-box--strongly-transparent {
color: black; }
.b-box--strongly-transparent.b-box--red {
background-color: rgba(230, 70, 38, 0.2); }
.b-box--strongly-transparent.b-box--grey {
background-color: rgba(66, 66, 66, 0.2); }
.b-box--bleed-left, .b-page__menu .b-box--bleed,
.leftSidebarColumn .b-box--bleed, .b-page__content .b-box--bleed,
.fullWidthColumn .b-box--bleed {
margin-left: -10px;
padding-left: 10px; }
@media (min-width: 768px) {
.b-box--bleed-left, .b-page__menu .b-box--bleed,
.leftSidebarColumn .b-box--bleed, .b-page__content .b-box--bleed,
.fullWidthColumn .b-box--bleed {
margin-left: -40px;
padding-left: 40px; } }
@media (min-width: 992px) {
.b-box--bleed-left, .b-page__menu .b-box--bleed,
.leftSidebarColumn .b-box--bleed, .b-page__content .b-box--bleed,
.fullWidthColumn .b-box--bleed {
margin-left: -90px;
padding-left: 90px; } }
@media (min-width: 1200px) {
.b-box--bleed-left, .b-page__menu .b-box--bleed,
.leftSidebarColumn .b-box--bleed, .b-page__content .b-box--bleed,
.fullWidthColumn .b-box--bleed {
margin-left: -110px;
padding-left: 110px; } }
.b-box--bleed-right, .b-page__sidebar .b-box--bleed,
.rightSidebarColumn .b-box--bleed, .b-page__content .b-box--bleed,
.fullWidthColumn .b-box--bleed {
margin-right: -10px;
padding-right: 10px; }
@media (min-width: 768px) {
.b-box--bleed-right, .b-page__sidebar .b-box--bleed,
.rightSidebarColumn .b-box--bleed, .b-page__content .b-box--bleed,
.fullWidthColumn .b-box--bleed {
margin-right: -40px;
padding-right: 40px; } }
@media (min-width: 992px) {
.b-box--bleed-right, .b-page__sidebar .b-box--bleed,
.rightSidebarColumn .b-box--bleed, .b-page__content .b-box--bleed,
.fullWidthColumn .b-box--bleed {
margin-right: -90px;
padding-right: 90px; } }
@media (min-width: 1200px) {
.b-box--bleed-right, .b-page__sidebar .b-box--bleed,
.rightSidebarColumn .b-box--bleed, .b-page__content .b-box--bleed,
.fullWidthColumn .b-box--bleed {
margin-right: -110px;
padding-right: 110px; } }
.b-page__content .b-box--bleed,
.fullWidthColumn .b-box--bleed.b-link-menu__menu {
margin-left: 0;
padding-left: 0; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Button
Generic button (e.g. "b-button"). Default .b-button background color or border color.
.b-button--primary - A button with primary background color and 1px border.
.b-button--secondary - A button with white background and 1px border red.
.b-button--disabled - A disabled button
Markup: demo.button.html
Style guide: Blocks.Button
*/
.b-button {
/* To control button border styles. */
/* To set default opacity for disabled buttons. */
/* To build padding for buttons. */
border: 1px solid transparent;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
background-color: transparent;
cursor: pointer;
padding: 5px 15px;
font-family: "Apercu Mono", Courier, monospace;
font-size: 14px;
font-weight: normal;
/*
Buttons (Sizes)
Buttons with different sizes (e.g. b-button b-button--block )
.b-button--small - A small button.
.b-button--large - A large button.
.b-button--x-large - An extra large button.
.b-button--full-width - A button that spans the whole width of the container.
Markup: demo.button.sizes.html
Style guide: Blocks.Button.Sizes
*/ }
.b-button--disabled, .b-button[disabled] {
opacity: 0.5;
outline: 0;
cursor: not-allowed; }
.b-button--primary, .btn-usyd, .btn-usyd-search, .btn-usyd-search-header, .btn-usyd-search-white, .btn-usyd-search-red, .b-button--primary.b-tag-list__item-control, .b-tag-list__item-control.btn-usyd, .b-tag-list__item-control.btn-usyd-search, .b-tag-list__item-control.btn-usyd-search-header, .b-tag-list__item-control.btn-usyd-search-white, .b-tag-list__item-control.btn-usyd-search-red {
border-color: #e64626;
background-color: #e64626;
cursor: pointer;
color: white; }
.b-button--primary:hover, .btn-usyd:hover, .btn-usyd-search:hover, .btn-usyd-search-header:hover, .btn-usyd-search-white:hover, .btn-usyd-search-red:hover, .b-button--primary:focus, .btn-usyd:focus, .btn-usyd-search:focus, .btn-usyd-search-header:focus, .btn-usyd-search-white:focus, .btn-usyd-search-red:focus, .b-button--primary:active, .btn-usyd:active, .btn-usyd-search:active, .btn-usyd-search-header:active, .btn-usyd-search-white:active, .btn-usyd-search-red:active, .b-button--primary.b-tag-list__item-control:hover, .b-tag-list__item-control.btn-usyd:hover, .b-tag-list__item-control.btn-usyd-search:hover, .b-tag-list__item-control.btn-usyd-search-header:hover, .b-tag-list__item-control.btn-usyd-search-white:hover, .b-tag-list__item-control.btn-usyd-search-red:hover, .b-button--primary.b-tag-list__item-control:focus, .b-tag-list__item-control.btn-usyd:focus, .b-tag-list__item-control.btn-usyd-search:focus, .b-tag-list__item-control.btn-usyd-search-header:focus, .b-tag-list__item-control.btn-usyd-search-white:focus, .b-tag-list__item-control.btn-usyd-search-red:focus, .b-button--primary.b-tag-list__item-control:active, .b-tag-list__item-control.btn-usyd:active, .b-tag-list__item-control.btn-usyd-search:active, .b-tag-list__item-control.btn-usyd-search-header:active, .b-tag-list__item-control.btn-usyd-search-white:active, .b-tag-list__item-control.btn-usyd-search-red:active {
border-color: #ce3d20;
background-color: #ce3d20;
color: white; }
.b-button--secondary {
border-color: black;
background-color: white;
color: #363636; }
.b-button--secondary:hover, .b-button--secondary:focus, .b-button--secondary:active {
border-color: #ce3d20;
background-color: #ce3d20;
color: white; }
.b-button--tertiary {
border-color: #d7dbde;
background-color: #f1f2f2;
color: #363636; }
.b-button--tertiary:hover, .b-button--tertiary:focus, .b-button--tertiary:active {
border-color: #d7dbde;
background-color: rgba(241, 242, 242, 0.9);
color: #ce3d20; }
.b-button--dark {
border-color: #424242;
background-color: #424242;
color: white; }
.b-button--dark:hover, .b-button--dark:focus, .b-button--dark:active {
border-color: #424242;
background-color: rgba(66, 66, 66, 0.9);
color: white; }
.b-button--small {
padding: 5px; }
.b-button--large {
padding: 5px 25px; }
.b-button--x-large {
padding: 10px 35px; }
.b-button--full-width {
display: block;
width: 100%; }
.b-form .b-button {
padding: 12px 22px; }
.b-button.b-cta-tile {
padding: inherit; }
.b-link-menu .b-button {
padding: 11px 22px; }
.b-button.b-menu-grid__item-link {
font-family: "Apercu", Helvetica, sans-serif; }
.b-button.b-menu-grid__item-link:hover, .b-button.b-menu-grid__item-link:focus, .b-button.b-menu-grid__item-link:active {
text-decoration: none; }
.btn-usyd, .btn-usyd-search, .btn-usyd-search-header, .btn-usyd-search-white, .btn-usyd-search-red {
background-color: #ce3d20;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0; }
.btn-usyd.large, .large.btn-usyd-search, .large.btn-usyd-search-header, .large.btn-usyd-search-white, .large.btn-usyd-search-red {
width: 175px;
height: 55px;
font-size: 30px; }
.btn-usyd-search, .btn-usyd-search-header, .btn-usyd-search-white, .btn-usyd-search-red {
padding: 5px 25px;
width: 150px; }
.btn-usyd-search:after, .btn-usyd-search-header:after, .btn-usyd-search-white:after, .btn-usyd-search-red:after {
content: "";
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
top: 2px; }
.btn-usyd-search-header, .btn-usyd-search-white, .btn-usyd-search-red {
background-color: #e64626;
padding: 0;
color: black; }
.btn-usyd-search-header:hover, .btn-usyd-search-white:hover, .btn-usyd-search-red:hover, .btn-usyd-search-header:focus, .btn-usyd-search-white:focus, .btn-usyd-search-red:focus, .btn-usyd-search-header:active, .btn-usyd-search-white:active, .btn-usyd-search-red:active, .btn-usyd-search-header:visited, .btn-usyd-search-white:visited, .btn-usyd-search-red:visited {
background-color: #e64626;
color: black; }
@media (max-width: 991px) {
.btn-usyd-search-header, .btn-usyd-search-white, .btn-usyd-search-red {
display: none; } }
.btn-usyd-search-white {
background-color: transparent; }
.btn-usyd-search-white:hover, .btn-usyd-search-white:focus, .btn-usyd-search-white:active, .btn-usyd-search-white:visited {
background-color: transparent; }
.btn-usyd-search-red {
background-color: transparent; }
.btn-usyd-search-red:hover, .btn-usyd-search-red:focus, .btn-usyd-search-red:active, .btn-usyd-search-red:visited {
background-color: transparent; }
/*
Call to action (CTA)
An action link used in a variety components to prompt the user to click through.
:hover - Focus state
.b-cta--block - Displays the CTA on a line by itself with bigger vertical margins and with the glyph is right-justified
.b-cta--download - Displays a download icon next to the CTA text
.b-cta--external - Displays a external link icon next to the CTA text
.b-cta--no-icon - Displays the CTA without an icon
.b-cta--top-border - Displays the CTA with a thin black top border
(TODO) cta dark and white
Markup: Read more stories
Style guide: Blocks.Call to action
*/
.b-cta {
color: #ce3d20;
font-family: "Apercu Mono", Courier, monospace;
font-size: 14px; }
.b-cta:after {
display: inline-block;
width: 14px;
height: 14px;
vertical-align: baseline;
content: url('../bower_components/corporate-frontend/dist/assets/img/rightArrowRedAlt.svg'); }
.b-cta:hover, .b-cta:focus, .b-cta:active {
text-decoration: underline;
color: #ce3d20; }
.b-cta--block {
display: block;
width: 100%; }
.b-cta--block:after {
float: right; }
.b-cta--icon-no-margin:after {
margin: 0; }
.b-cta--download:after {
content: url('../bower_components/corporate-frontend/dist/assets/img/downloadIconRed.svg'); }
.b-cta--external:after {
content: url('../bower_components/corporate-frontend/dist/assets/img/externalLinkIcon.svg'); }
.b-cta--no-icon:after {
display: none; }
.b-cta--top-border {
border-top: 1px solid black; }
.b-cta--white {
color: white; }
.b-cta--white:after {
color: white;
content: url('../bower_components/corporate-frontend/dist/assets/img/rightArrowWhite.svg'); }
.b-cta--white:hover, .b-cta--white:focus, .b-cta--white:active {
color: white; }
.b-cta--dark {
color: black; }
.b-cta--dark:hover, .b-cta--dark:focus, .b-cta--dark:active {
color: black; }
.b-tag-list__item .b-cta {
padding: 6px 0; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Image link
Corporate style image link, when hover the link, show the
Markup: demo.image-link.html
Style guide: Components.Image link
*/
.b-image-link {
display: block;
position: relative; }
.b-image-link__image-holder {
position: relative; }
.b-image-link__cover {
display: block;
position: absolute;
right: 0;
bottom: 0;
transition: width 200ms, height 200ms, opacity 200ms;
opacity: 1;
background-color: #e64626;
width: 0;
height: 0; }
.b-image-link__cover--topdown {
top: 0;
right: auto;
bottom: auto;
width: 100%; }
.b-image-link__square {
position: absolute;
right: 0;
bottom: 0;
transition: opacity 200ms;
background-color: #e64626;
padding: 20px 22px;
width: 68px;
height: 68px;
color: white;
font-size: 18px;
box-sizing: border-box; }
.b-image-link__square--secondary {
background-color: #f1f2f2;
color: #e64626; }
.b-image-link__square--small {
padding: 12px 13px;
width: 50px;
height: 50px; }
.b-image-link:hover .b-image-link__cover, .b-image-link:focus .b-image-link__cover {
opacity: 0.25;
width: 100%;
height: 100%; }
.b-image-link:hover .b-image-link__square, .b-image-link:focus .b-image-link__square {
opacity: 0; }
/*
CQ Overlay (AEM)
A block component for cq overlay issue.
.b-cq-overlay--size-ctrl - make the cq overlay size to match the component size when its size incorrect.
Example:
Style guide: Blocks.Cq overlay
*/
.b-cq-overlay--size-ctrl {
min-height: 1px; }
/*
Content type
Stylised text for displaying the Content Type of some content
Markup: Lifestyle_
Style guide: Blocks.Content Type
*/
.b-content-type {
font-family: "Apercu Mono", Courier, monospace;
font-size: 14px; }
.b-box--red .b-content-type {
color: black; }
/*
Fact snippet
A single "fact" with a highlighted portion to lure the reader into reading the full fact detail
Markup: demo.fact.html
Style guide: Blocks.Fact
*/
.b-fact--inline {
border-top: 1px solid black;
border-bottom: 1px solid black;
vertical-align: top; }
.b-fact--inline:last-child {
border-top: 0; }
@media (min-width: 1200px) {
.b-fact--inline {
display: inline-block;
margin-right: 40px;
width: 45%; }
.b-fact--inline:last-child {
margin-right: 0;
border-top: 1px solid black; } }
.b-fact__lure {
display: block;
line-height: 1.2;
font-size: 30px; }
.b-course-template .b-fact__lure {
font-size: 24px; }
.b-fact__detail {
font-size: 14px; }
.b-box--red .b-fact__detail {
color: black; }
.b-fact__link {
margin-top: 20px; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Figure
Represents an illustration, usually accompanying a body of text. The figure can be positioned relative to the
text, occupy a certain amount of space and optionally have an accompanying caption. Includes percentage width
helpers for CMS-authored content.
Markup: demo.figure.html
Style guide: Blocks.Figure
*/
/*
Figure (Responsive image)
Represents figure with responsive image (Switching between 2 images desktop and vertical tablet/mobile).
Markup: demo.figure.responsive.html
Style guide: Blocks.Figure.Responsive
*/
/*
Bleed image (auto-bleed)
Markup: demo.figure.bleed-style.auto.html
Style guide: Components.Bleed.Auto
*/
/*
Bleed image (bleed left/right)
.b-box--bleed-left - Box bleeds out to the left
.b-box--bleed-right - Box bleeds out to the right
Markup: demo.figure.bleed-style-lr.html
Style guide: Components.Bleed
*/
.b-figure {
max-width: 100%; }
.b-figure--pull-right {
float: right;
padding-left: 20px; }
.b-figure--pull-left {
float: left;
padding-right: 20px; }
.b-figure--quarter-width {
width: 25%; }
.b-figure--half-width {
width: 50%; }
.b-figure--three-quarter-width {
width: 75%; }
.b-figure--full-width {
padding-right: 0;
padding-left: 0;
width: 100%; }
.b-figure__image {
max-width: 100%; }
.b-figure__image--ratio-7-8 {
width: 100%;
padding-bottom: 114.28571%;
padding-top: 0;
height: 0;
display: block; }
.b-figure__image--ratio-16-5 {
width: 100%;
padding-bottom: 31.25%;
padding-top: 0;
height: 0;
display: block; }
.b-figure__image--ratio-4-3 {
width: 100%;
padding-bottom: 75%;
padding-top: 0;
height: 0;
display: block; }
.b-figure__image--ratio-2-1 {
width: 100%;
padding-bottom: 50%;
padding-top: 0;
height: 0;
display: block; }
.b-figure__image--square {
width: 100%;
padding-bottom: 100%;
padding-top: 0;
height: 0;
display: block; }
/**
* Featured article
*
* Featured article component new style
*
* Markup: demo.new-style2.html
*
* Style guide: Components.Featured article
*/
.b-featured-article {
padding: 10px 5px; }
.b-featured-article__title {
margin: 0;
padding-top: 15px;
padding-bottom: 18px;
line-height: 1.1;
font-size: 24px; }
.b-featured-article-carousel--full-size .b-featured-article-carousel__slide--first .b-featured-article--news-feed .b-featured-article__title {
font-size: 30px; }
/**
* Featured article carousel
*
* Featured article carousel component
*
* Markup: demo.featured-article-carousel.html
*
* Style guide: Components.Featured article carousel
*/
@media (min-width: 992px) {
.b-featured-article-carousel--full-size .b-featured-article-carousel__slide {
padding-left: 40px; }
.b-featured-article-carousel--full-size .b-featured-article-carousel__slide--first {
padding-left: 0; } }
.b-featured-article-carousel__nav-icon {
position: relative; }
.b-featured-article-carousel__nav-icon::before {
display: block;
position: relative;
z-index: 2; }
.b-featured-article-carousel__nav-icon::after {
display: block;
position: relative;
top: -32px;
z-index: 1;
border-radius: 18px;
background: #f1f2f2;
width: 36px;
height: 36px;
content: ""; }
/**
* Featured intro article
*
* Markup: demo.featured-intro-article.html
*
* Style guide: Components.Featured.intro.article
*/
/*
Loading spinner
Displays an animated loading image
Control the display of the spinner by adding/removing the `b-loading-spinner__container--loading` class from the container
Markup:
Style guide: Blocks.Loading spinner
*/
.b-loading-spinner__container {
transition: padding-bottom 100ms; }
.b-loading-spinner__container--loading {
padding-bottom: 40px; }
.b-loading-spinner__child {
display: none;
margin-bottom: 20px;
width: 16px;
height: 16px; }
.b-loading-spinner__child--dark, .b-loading-spinner__child {
background: url('../bower_components/corporate-frontend/dist/assets/img/loading-spinner-dark.gif') no-repeat; }
.b-loading-spinner__child--light {
background: url('../bower_components/corporate-frontend/dist/assets/img/loading-spinner-light.gif') no-repeat; }
.b-loading-spinner__container--loading .b-loading-spinner__child {
display: block; }
.b-loading-spinner__child .b-spinner__child {
display: none; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
List group
A collection of items displayed as blocks with a dividing line between each item, used for presenting a set of items
which are logically a list but shouldn"t be displayed as bullets or numbered items.
.b-list-group--compact - Halves the amount of padding between each list item
.b-list-group--no-border - Hides the keyline between each list item. Can also be applied to individual list items via
.b-list-group__item--no-border - Hides the keyline on a single list item
Markup: demo.list-group.html
Style guide: Blocks.List group
*/
.b-list-group {
list-style: none;
margin: 0;
padding: 0; }
.b-course-template .b-list-group {
font-size: 0; }
.b-list-group--compact {
padding: 10px 0; }
.b-list-group--compact .b-list-group__item {
padding: 10px 0; }
.b-list-group--no-padding {
padding: 0; }
.b-list-group--no-padding .b-list-group__item {
padding: 0; }
.b-list-group__item {
margin: 0;
padding: 0;
display: block;
position: relative;
padding: 20px 0; }
.b-list-group__item + .b-list-group__item {
border-top: 1px solid black; }
.b-list-group--no-border .b-list-group__item,
.b-list-group__item + .b-list-group__item--no-border {
border-top: none; }
.b-list-group__item--small-padding {
padding: 10px 0; }
.b-list-group__item-addon {
display: inline-block;
float: right; }
.b-list-group__item-addon--left {
float: left; }
/*
Link menu
Link menu component displays a list of links in a dropdown menu
.b-link-menu--anchor-bottom - Displays the menu anchored to the bottom of the button
.b-link-menu--grid - Displays menu items in a grid
.b-link-menu--grid-sm - Displays menu items in a grid on tablet and larger
Markup: demo.link-menu.html
Style guide: Blocks.Link menu
*/
.b-link-menu {
display: inline-block;
position: relative;
width: 100%; }
.b-link-menu__button {
border: 1px solid black;
padding: 14px 20px;
text-align: left;
color: #363636; }
.b-link-menu__button:hover,
.b-link-menu:hover .b-link-menu__button,
.b-link-menu--active .b-link-menu__button,
.b-js-link-menu--active .b-link-menu__button {
border: 1px solid black;
background: white;
color: #e64626; }
.b-link-menu__menu {
display: none;
position: absolute;
top: -1px;
left: 0;
z-index: 1;
margin: 0;
border-bottom: 1px solid #000;
background-size: cover;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
width: 100%;
min-width: 300px;
font-family: "Apercu Mono", Courier, monospace;
font-size: 14px;
list-style-type: none;
box-sizing: content-box; }
.b-link-menu--anchor-bottom .b-link-menu__menu {
top: 100%;
margin-top: -1px; }
.b-link-menu:hover .b-link-menu__menu,
.b-link-menu--active .b-link-menu__menu,
.b-js-link-menu--active .b-link-menu__menu {
display: block; }
.b-link-menu .b-link-menu__menu.b-menu-grid__menu {
display: none; }
.b-link-menu:hover .b-link-menu__menu.b-menu-grid__menu,
.b-link-menu--active .b-link-menu__menu.b-menu-grid__menu,
.b-js-link-menu--active .b-link-menu__menu.b-menu-grid__menu {
display: flex; }
.b-link-menu__item {
display: block;
float: left;
clear: none;
margin: 0;
padding: 0;
width: 100%;
vertical-align: top; }
.b-link-menu__item-link {
border-bottom: none;
padding: 14px 20px; }
button[data-balloon] {
overflow: visible; }
[data-balloon] {
position: relative;
cursor: pointer; }
[data-balloon]:after {
filter: alpha(opactiy=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.18s ease-out 0.18s;
-moz-transition: all 0.18s ease-out 0.18s;
-ms-transition: all 0.18s ease-out 0.18s;
-o-transition: all 0.18s ease-out 0.18s;
transition: all 0.18s ease-out 0.18s;
font-family: sans-serif !important;
font-weight: normal !important;
font-style: normal !important;
text-shadow: none !important;
font-size: 12px !important;
background: rgba(17, 17, 17, 0.9);
border-radius: 4px;
color: #fff;
content: attr(data-balloon);
padding: .5em 1em;
position: absolute;
white-space: nowrap;
z-index: 10; }
[data-balloon]:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(0)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
background-size: 100% auto;
width: 18px;
height: 6px;
filter: alpha(opactiy=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.18s ease-out 0.18s;
-moz-transition: all 0.18s ease-out 0.18s;
-ms-transition: all 0.18s ease-out 0.18s;
-o-transition: all 0.18s ease-out 0.18s;
transition: all 0.18s ease-out 0.18s;
content: '';
position: absolute;
z-index: 10; }
[data-balloon]:hover:before, .b-tooltip--force-show:before, [data-balloon]:hover:after, .b-tooltip--force-show:after, [data-balloon][data-balloon-visible]:before, [data-balloon][data-balloon-visible]:after {
filter: alpha(opactiy=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
pointer-events: auto; }
[data-balloon].font-awesome:after {
font-family: FontAwesome; }
[data-balloon][data-balloon-break]:after {
white-space: pre; }
[data-balloon][data-balloon-blunt]:before, [data-balloon][data-balloon-blunt]:after {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none; }
[data-balloon][data-balloon-pos="up"]:after {
bottom: 100%;
left: 50%;
margin-bottom: 11px;
-webkit-transform: translate(-50%, 10px);
-moz-transform: translate(-50%, 10px);
-ms-transform: translate(-50%, 10px);
transform: translate(-50%, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon][data-balloon-pos="up"]:before {
bottom: 100%;
left: 50%;
margin-bottom: 5px;
-webkit-transform: translate(-50%, 10px);
-moz-transform: translate(-50%, 10px);
-ms-transform: translate(-50%, 10px);
transform: translate(-50%, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon][data-balloon-pos="up"]:hover:after, [data-balloon-pos="up"].b-tooltip--force-show:after, [data-balloon][data-balloon-pos="up"][data-balloon-visible]:after {
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
[data-balloon][data-balloon-pos="up"]:hover:before, [data-balloon-pos="up"].b-tooltip--force-show:before, [data-balloon][data-balloon-pos="up"][data-balloon-visible]:before {
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
[data-balloon][data-balloon-pos="up-left"]:after {
bottom: 100%;
left: 0;
margin-bottom: 11px;
-webkit-transform: translate(0, 10px);
-moz-transform: translate(0, 10px);
-ms-transform: translate(0, 10px);
transform: translate(0, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon][data-balloon-pos="up-left"]:before {
bottom: 100%;
left: 5px;
margin-bottom: 5px;
-webkit-transform: translate(0, 10px);
-moz-transform: translate(0, 10px);
-ms-transform: translate(0, 10px);
transform: translate(0, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon][data-balloon-pos="up-left"]:hover:after, [data-balloon-pos="up-left"].b-tooltip--force-show:after, [data-balloon][data-balloon-pos="up-left"][data-balloon-visible]:after {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos="up-left"]:hover:before, [data-balloon-pos="up-left"].b-tooltip--force-show:before, [data-balloon][data-balloon-pos="up-left"][data-balloon-visible]:before {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos="up-right"]:after {
bottom: 100%;
right: 0;
margin-bottom: 11px;
-webkit-transform: translate(0, 10px);
-moz-transform: translate(0, 10px);
-ms-transform: translate(0, 10px);
transform: translate(0, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon][data-balloon-pos="up-right"]:before {
bottom: 100%;
right: 5px;
margin-bottom: 5px;
-webkit-transform: translate(0, 10px);
-moz-transform: translate(0, 10px);
-ms-transform: translate(0, 10px);
transform: translate(0, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon][data-balloon-pos="up-right"]:hover:after, [data-balloon-pos="up-right"].b-tooltip--force-show:after, [data-balloon][data-balloon-pos="up-right"][data-balloon-visible]:after {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos="up-right"]:hover:before, [data-balloon-pos="up-right"].b-tooltip--force-show:before, [data-balloon][data-balloon-pos="up-right"][data-balloon-visible]:before {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos='down']:after {
left: 50%;
margin-top: 11px;
top: 100%;
-webkit-transform: translate(-50%, -10px);
-moz-transform: translate(-50%, -10px);
-ms-transform: translate(-50%, -10px);
transform: translate(-50%, -10px); }
[data-balloon][data-balloon-pos='down']:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
background-size: 100% auto;
width: 18px;
height: 6px;
left: 50%;
margin-top: 5px;
top: 100%;
-webkit-transform: translate(-50%, -10px);
-moz-transform: translate(-50%, -10px);
-ms-transform: translate(-50%, -10px);
transform: translate(-50%, -10px); }
[data-balloon][data-balloon-pos='down']:hover:after, [data-balloon-pos='down'].b-tooltip--force-show:after, [data-balloon][data-balloon-pos='down'][data-balloon-visible]:after {
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
[data-balloon][data-balloon-pos='down']:hover:before, [data-balloon-pos='down'].b-tooltip--force-show:before, [data-balloon][data-balloon-pos='down'][data-balloon-visible]:before {
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
[data-balloon][data-balloon-pos='down-left']:after {
left: 0;
margin-top: 11px;
top: 100%;
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
transform: translate(0, -10px); }
[data-balloon][data-balloon-pos='down-left']:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
background-size: 100% auto;
width: 18px;
height: 6px;
left: 5px;
margin-top: 5px;
top: 100%;
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
transform: translate(0, -10px); }
[data-balloon][data-balloon-pos='down-left']:hover:after, [data-balloon-pos='down-left'].b-tooltip--force-show:after, [data-balloon][data-balloon-pos='down-left'][data-balloon-visible]:after {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos='down-left']:hover:before, [data-balloon-pos='down-left'].b-tooltip--force-show:before, [data-balloon][data-balloon-pos='down-left'][data-balloon-visible]:before {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos='down-right']:after {
right: 0;
margin-top: 11px;
top: 100%;
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
transform: translate(0, -10px); }
[data-balloon][data-balloon-pos='down-right']:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
background-size: 100% auto;
width: 18px;
height: 6px;
right: 5px;
margin-top: 5px;
top: 100%;
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
transform: translate(0, -10px); }
[data-balloon][data-balloon-pos='down-right']:hover:after, [data-balloon-pos='down-right'].b-tooltip--force-show:after, [data-balloon][data-balloon-pos='down-right'][data-balloon-visible]:after {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos='down-right']:hover:before, [data-balloon-pos='down-right'].b-tooltip--force-show:before, [data-balloon][data-balloon-pos='down-right'][data-balloon-visible]:before {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos='left']:after {
margin-right: 11px;
right: 100%;
top: 50%;
-webkit-transform: translate(10px, -50%);
-moz-transform: translate(10px, -50%);
-ms-transform: translate(10px, -50%);
transform: translate(10px, -50%); }
[data-balloon][data-balloon-pos='left']:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(-90 18 18)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
background-size: 100% auto;
width: 6px;
height: 18px;
margin-right: 5px;
right: 100%;
top: 50%;
-webkit-transform: translate(10px, -50%);
-moz-transform: translate(10px, -50%);
-ms-transform: translate(10px, -50%);
transform: translate(10px, -50%); }
[data-balloon][data-balloon-pos='left']:hover:after, [data-balloon-pos='left'].b-tooltip--force-show:after, [data-balloon][data-balloon-pos='left'][data-balloon-visible]:after {
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%); }
[data-balloon][data-balloon-pos='left']:hover:before, [data-balloon-pos='left'].b-tooltip--force-show:before, [data-balloon][data-balloon-pos='left'][data-balloon-visible]:before {
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%); }
[data-balloon][data-balloon-pos='right']:after {
left: 100%;
margin-left: 11px;
top: 50%;
-webkit-transform: translate(-10px, -50%);
-moz-transform: translate(-10px, -50%);
-ms-transform: translate(-10px, -50%);
transform: translate(-10px, -50%); }
[data-balloon][data-balloon-pos='right']:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(90 6 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
background-size: 100% auto;
width: 6px;
height: 18px;
left: 100%;
margin-left: 5px;
top: 50%;
-webkit-transform: translate(-10px, -50%);
-moz-transform: translate(-10px, -50%);
-ms-transform: translate(-10px, -50%);
transform: translate(-10px, -50%); }
[data-balloon][data-balloon-pos='right']:hover:after, [data-balloon-pos='right'].b-tooltip--force-show:after, [data-balloon][data-balloon-pos='right'][data-balloon-visible]:after {
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%); }
[data-balloon][data-balloon-pos='right']:hover:before, [data-balloon-pos='right'].b-tooltip--force-show:before, [data-balloon][data-balloon-pos='right'][data-balloon-visible]:before {
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%); }
[data-balloon][data-balloon-length='small']:after {
white-space: normal;
width: 80px; }
[data-balloon][data-balloon-length='medium']:after {
white-space: normal;
width: 150px; }
[data-balloon][data-balloon-length='large']:after {
white-space: normal;
width: 260px; }
[data-balloon][data-balloon-length='xlarge']:after {
white-space: normal;
width: 380px; }
@media screen and (max-width: 768px) {
[data-balloon][data-balloon-length='xlarge']:after {
white-space: normal;
width: 90vw; } }
[data-balloon][data-balloon-length='fit']:after {
white-space: normal;
width: 100%; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Tooltip
Simple, CSS-driven tooltip using balloon.css. Apply the data-balloon-* attributes to any element to add a tooltip. Note: Currently supports text-based content only.
See https://kazzkiq.github.io/balloon.css/ for full usage instructions and supported options.
.b-tooltip--force-show - Force the tooltip to be visible, regardless of the hover state
Markup: demo.tooltip.html
Style guide: Blocks.Tooltip
*/
/*
* Remove red border under the triangle pointer
*/
[data-balloon][data-balloon-pos="up"]:before,
[data-balloon][data-balloon-pos="down"]:before,
[data-balloon][data-balloon-pos="left"]:before,
[data-balloon][data-balloon-pos="bottom"]:before {
box-shadow: none; }
[data-balloon][data-balloon-pos="up"]:after,
[data-balloon][data-balloon-pos="down"]:after,
[data-balloon][data-balloon-pos="left"]:after,
[data-balloon][data-balloon-pos="bottom"]:after,
[data-balloon]:after {
border-radius: 0; }
/*
Placeholder image
Placeholder image selector "placeholderImage"
Markup: demo.placeholder-image.html
Style guide: Components.Placeholder image
*/
.placeholderText {
opacity: .5;
font-style: italic; }
.placeholderImage {
background-color: #efefef;
background-image: url("../bower_components/corporate-frontend/dist/assets/img/placeholder-outline.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 135px 75px; }
.placeholderImage--disabled,
.preview .placeholderImage {
background: none; }
/*
Quote
Styles text as a quote and optionally automatically surrounds the text with quote marks.
.b-quote--show-marks - Adds quote marks around the text
Markup: demo.quote.html
Style guide: Blocks.Quote
*/
.b-quote {
line-height: 1.6em;
color: #4c4c4c;
font-family: "Antwerp", Georgia, serif;
font-size: 18px;
font-style: italic; }
.b-quote--show-marks {
quotes: "\201c" "\201d"; }
.b-quote--show-marks:before {
content: open-quote; }
.b-quote--show-marks:after {
content: close-quote; }
/*
Site title
Site-wide heading showing the name of the site
Markup:
Style guide: Blocks.Site Title
*/
.b-site-title {
display: block;
transition: max-height 0.1s ease-out, opacity 0.1s ease-out;
border-top: 0;
max-height: 90px;
overflow: hidden; }
.b-site-title__heading {
display: inline-block;
margin-top: 0;
line-height: 150%;
font-size: 15px;
font-weight: bold; }
@media (min-width: 992px) {
.b-site-title__heading {
border-top: 2px solid #e64626; } }
@media (min-width: 1200px) {
.b-site-title__heading {
font-size: 18px; } }
.b-site-title--collapsed {
max-height: 0; }
.globalHeaderModule .b-site-title {
transition: max-height 0.25s, opacity 0.25s;
opacity: 1;
margin-right: 20px;
margin-left: 20px;
max-height: 85px; }
@media (min-width: 992px) {
.globalHeaderModule .b-site-title {
margin-right: 0;
margin-left: 0; } }
.globalHeaderModule .b-site-title__heading {
margin-bottom: 15px;
padding-top: 8px; }
.globalHeaderModule.mobileMenuOpen .b-site-title {
opacity: 0;
max-height: 0;
overflow: hidden; }
/*
Vignette
Creates a decorative border around a block, such as a thumbnail image or other illustration.
Markup: 
Style guide: Blocks.Vignette
*/
.b-vignette--circular {
border-radius: 100%;
overflow: hidden; }
/*
Checkbox
General checkbox button, text is grey color by default and is white in the dark form.
Markup: demo.checkbox.base.html
Style guide: Blocks.Checkbox
*/
.b-checkbox {
/**
* variables
*/
cursor: pointer;
/**
* ------------------- elements ---------------------
*/
/**
* form dark theme
*/ }
.b-checkbox__text {
display: block;
position: relative;
padding-left: 34px;
color: #6e6e6e;
font-family: "Apercu Mono", Courier, monospace;
font-size: 14px; }
.b-checkbox__text::before {
display: block;
position: absolute;
top: 1px;
right: 1px;
bottom: 1px;
left: 1px;
background: url("../bower_components/corporate-frontend/dist/assets/img/forms/checkboxes.png") 0 0 no-repeat;
width: 20px;
height: 20px;
line-height: 20px;
content: " "; }
.b-checkbox__control {
position: absolute;
opacity: 0;
z-index: -1;
margin: 0; }
.b-checkbox__control:checked + .b-checkbox__text::before {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
background-position: 0 -20px; }
.b-checkbox__control:-moz-focusring + .b-checkbox__text {
outline: thin dotted;
outline-offset: -2px; }
.b-checkbox__control:hover + .b-checkbox__text,
.b-checkbox__control:focus + .b-checkbox__text {
outline: 5px auto -webkit-focus-ring-color; }
.b-checkbox:hover, .b-checkbox:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; }
.b-form--dark .b-checkbox__text {
color: white; }
/*
Dropdown
It will bind the jquery selectmenu on the component initial step.
Currently it depends on the b-input-group selector to control the select button width on screen size changes including the mobile orientation change, as the javascript will use b-input-group as the selector key to get the width for dropdown select button calculation, which means the component should be wrapped by the "b-input-group" selector.
Example "http://localhost:9000/form.html"
Jquery-ui selectmenu api: https://jqueryui.com/selectmenu/
Markup: demo.dropdown.html
Style guide: Blocks.Dropdown
*/
.b-dropdown {
/*
* ----------------- Variables ( in this block scope ) --------
*/
position: relative;
width: 100%;
font-family: "Apercu Mono", Courier, monospace;
font-size: 14px; }
.b-dropdown__select {
opacity: 0;
width: 100%;
min-height: 40px; }
.b-form--dark .b-dropdown .ui-selectmenu-button.ui-widget .ui-selectmenu-text {
color: white; }
.b-dropdown--red {
background-color: #e64626; }
.b-dropdown--red:hover {
background-color: #ce3d20; }
.b-dropdown--red .b-icon--down-chevron,
.b-form .b-dropdown--red .b-icon--down-chevron,
.b-dropdown--red .ui-selectmenu-button.ui-widget .ui-selectmenu-text {
color: white; }
.b-dropdown--grey {
background-color: #eaebed; }
.b-dropdown--grey .ui-selectmenu-button.ui-widget .ui-selectmenu-text,
.b-form--dark .b-dropdown--grey .ui-selectmenu-button.ui-widget .ui-selectmenu-text {
color: black; }
.b-dropdown--grey .b-icon--down-chevron,
.b-form .b-dropdown--grey .b-icon--down-chevron {
color: #e64626; }
/* ---------------------- jQueryUI selectmenu widget ---------------------- */
.ui-selectmenu-button.ui-widget {
display: block;
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
background-color: transparent;
background-image: none;
padding: 10px 20px;
width: 100%;
height: 100%; }
.ui-selectmenu-button.ui-widget .ui-icon {
display: none; }
.ui-selectmenu-button.ui-widget .ui-selectmenu-text {
padding: 0 20px 0 0;
line-height: 20px;
color: #363636;
font-family: "Apercu Mono", Courier, monospace;
font-size: 14px; }
.ui-selectmenu-menu {
width: 100%; }
.ui-selectmenu-menu .ui-menu {
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
padding: 0; }
.ui-selectmenu-menu .ui-menu .ui-menu-item {
border: 1px solid black;
background: white;
padding: 10px 20px;
font-family: "Apercu Mono", Courier, monospace;
font-size: 14px; }
.ui-selectmenu-menu .ui-menu .ui-menu-item.ui-state-focus {
background: #ce3d20;
color: white; }
.ui-selectmenu-menu .ui-menu .ui-state-active,
.ui-selectmenu-menu .ui-menu .ui-widget-content .ui-state-active {
border: none;
background: none;
color: inherit;
font-weight: inherit; }
.ui-selectmenu-menu .ui-menu .ui-state-active {
margin: 0; }
.ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper {
padding: 10px 20px; }
.ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper.ui-state-active {
background: #ce3d20;
color: white; }
/* ---------------------- End jQueryUI selectmenu widget ---------------------- */
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
File uploader
General file uploader.
Markup: demo.file-uploader.html
Style guide: Blocks.file uploader
*/
.b-file-uploader {
/*
* ----------------- Variables --------
*/
position: relative;
cursor: pointer;
padding-top: 12px;
padding-left: 30px;
font-family: "Apercu Mono", Courier, monospace;
font-size: 14px; }
.b-file-uploader::-webkit-file-upload-button {
visibility: hidden; }
.b-file-uploader::before {
display: inline-block;
position: relative;
padding: 11px 20px 12px;
content: " "; }
.b-file-uploader::after {
display: block;
position: absolute;
top: 0;
left: 0;
background-color: #e64626;
padding: 10px 20px;
white-space: nowrap;
color: white;
content: "Browse";
-webkit-user-select: none; }
.b-file-uploader:hover::after, .b-file-uploader:focus::after {
background-color: #ce3d20; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Text input
General text input, including < input > and < textarea > elements. Addon and borders are controlled by the input-group block
Markup: demo.input.text.html
Style guide: Blocks.Text input
*/
.b-text-input {
padding: 11px 20px;
color: #363636;
font-family: "Apercu Mono", Courier, monospace;
font-size: 14px;
/**
* form dark theme
*/ }
.b-text-input--hide-spinner {
-moz-appearance: textfield; }
.b-text-input--hide-spinner::-webkit-inner-spin-button, .b-text-input--hide-spinner::-webkit-outer-spin-button {
margin: 0;
-webkit-appearance: textfield;
appearance: textfield; }
.b-form--dark .b-text-input {
background-color: transparent;
color: white; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Radio
General radio button, text is grey color by default and is white in the dark form.
Markup: demo.radio.base.html
Style guide: Blocks.Radio
*/
.b-radio {
/**
* variables
*/
cursor: pointer;
/**
* ------------------- elements ---------------------
*/
/**
* form dark theme
*/ }
.b-radio__text {
position: relative;
padding-left: 35px;
color: #6e6e6e;
font-family: "Apercu Mono", Courier, monospace;
font-size: 14px; }
.b-radio__text::before {
display: block;
position: absolute;
top: 3px;
right: 1px;
bottom: 1px;
left: 1px;
background: url("../bower_components/corporate-frontend/dist/assets/img/forms/radioButtonsLight.png") 0 -15px no-repeat;
width: 15px;
height: 15px;
line-height: 15px;
content: " "; }
.b-radio__control {
position: absolute;
opacity: 0;
z-index: -1;
margin: 0; }
.b-radio__control:checked + .b-radio__text::before {
background-position: 0 0; }
.b-form--dark .b-radio__text {
color: white; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Form control
This element organizes a single category of input groups and its label and description. For example: user first name and last name input groups, gender radio input groups.
b-form-control__label
Control a single input element (text, textarea, checkbox or radio etc) display, position, margin space, width and height. Content and padding style controls by the element itself.
b-form-control__wrapper
Wrapper is a container, by default it wraps a category of input groups together, description element can be inside or outside the wrapper, it depends on the situation.
b-form-control__description
Description is for the description, it can be placed on top or bottom of the input groups. A form-control can have descriptions without label and input groups.
b-form-control__button-group(TODO)
It controls the form submit buttons position and space.
Inline(TODO)
Markup: demo.form-control-base.html
Style guide: Blocks.Form control
*/
.b-form-control {
/**
* ----------------- variables -----------------
*/
margin-bottom: 25px;
/**
* ----------------- elements -----------------
*/
/*
Form control (label and input-groups inline)
This is to demonstrate a possible form control style and a way of using the wrapper element.
Markup: demo.form-control-wrapper.html
Style guide: Blocks.Form control.Wrapper
*/
/**
* form dark theme
*/ }
.b-form-control--no-spacing {
margin-bottom: 0; }
.b-form-control--inline {
display: inline-block;
vertical-align: top; }
.b-form-control__label {
display: block;
margin-bottom: 20px;
line-height: 1;
color: #363636;
font-family: "Apercu", Helvetica, sans-serif;
font-size: 18px;
font-weight: bold; }
.b-form-control__label--inline {
display: inline-block;
vertical-align: top; }
.b-form-control__wrapper {
vertical-align: top; }
.b-form-control__wrapper--inline {
display: inline-block; }
.b-form-control__description {
margin-bottom: 20px;
color: #363636;
font-family: "Apercu", Helvetica, sans-serif;
font-size: 14px;
font-weight: normal; }
.b-form-control__description.b-text--colour-red {
color: #ce3d20; }
.b-form--dark .b-form-control__label, .b-form--dark .b-form-control__description {
color: white; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Input group
An input group is a base element of the form. It focuses on a single html input element (text input, textarea, checkbox, radio), and adding text, icon or buttons before, after, or on both sides as addons, adding helper and tooltip
- Control the validation style
- Organize the input element and addons
- Control the input related tooltip and the helper text
b-input-group__control
Control a single input element (text, textarea, checkbox or radio etc) display, position, margin space, width and height attributes. The content and padding styles are controlled by the element itself.
b-input-group__addon
It can be a button, a text, an icon or another input element like a checkbox or a radio.
b-input-group__helper
The input element helper, such as a validation message. It can be on top of the input element or on the bottom of it.
b-input-group__tooltip
The input element tooltip, the style of the tooltip will be updated once the tooltip component has been done with the new design.
b-input-group--inline
A group of input groups display inline 480px screen view up ( general mobile landscape view up ), it is portrait on screen 480px down.
Markup: demo.input-group.base.html
Style guide: Blocks.Input group
*/
/*
Input group (invalid)
Markup: demo.input-group.invalid.html
Style guide: Blocks.Input group.Invalid
*/
.b-input-group {
/**
* ----------------- variables -----------------
*/
/* ------------- mobile view (Default) --------
* Screen width 320px up
* Typical devices: Iphone 5 portrait, Iphone 6 portrait
*/
position: relative;
margin-bottom: 20px;
/*
No margin
*/
/*
Input group (inline)
Markup: demo.input-group.inline.html
Style guide: Blocks.Input group.Inline
*/
/**
* ----------------- block elements ------------------
*/
/**
* A Wrapper wraps input and its addon together and has a border around them.
*/ }
.b-input-group .b-input-group__wrapper--invalid, .b-input-group .b-input-group__helper--validation--invalid {
transition: 200ms;
border-color: #ce3d20;
box-shadow: none; }
.b-input-group .b-input-group__wrapper--invalid:focus, .b-input-group .b-input-group__helper--validation--invalid:focus, .b-input-group .b-input-group__wrapper--invalid:hover, .b-input-group .b-input-group__helper--validation--invalid:hover {
border-color: #ce3d20; }
.b-input-group--no-margin {
margin-bottom: 0; }
.b-input-group--inline {
display: block;
/*
* Screen width 480px up
* Typical devices: Iphone 5s landscape, Iphone 6 landscape, Galaxy S3
*/ }
@media (min-width: 480px) {
.b-input-group--inline {
display: table-cell;
padding-right: 20px;
vertical-align: top; }
.b-input-group--inline:last-child {
padding-right: 0; } }
.b-input-group__wrapper {
display: table;
border: 2px solid black;
width: 100%; }
.b-input-group__addon {
display: table-cell;
border: 0;
vertical-align: top;
padding: 10px 20px;
width: 1%;
white-space: nowrap;
font-family: "Apercu Mono", Courier, monospace;
font-size: 14px; }
.b-input-group__addon--left {
padding-right: 0; }
.b-input-group__addon--right {
padding-left: 0; }
.b-input-group__control {
display: table-cell;
border: 0;
vertical-align: top;
width: 100%; }
.b-input-group__helper {
transition: 400ms;
margin: 7px 0 0;
font-family: "Apercu", Helvetica, sans-serif;
font-size: 14px;
font-weight: normal; }
.b-input-group__helper--validation {
opacity: 0; }
.b-input-group__helper--validation--invalid {
color: #ce3d20; }
.b-input-group__helper--validation--show {
transition: 200ms;
opacity: 1; }
.b-input-group__tooltip[data-balloon] {
position: absolute;
top: 8px;
right: 0;
left: 0; }
.b-input-group__tooltip[data-balloon]:after {
width: 100%; }
.b-form--dark .b-input-group__wrapper {
border: 2px solid white; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Form
Note: The form font size for the input element is 14px, to keep it the same as the base font size. General rules: margin between each of the form elements is 20px, the form padding is 25px around 4 sides.
Markup: demo.form.html
General form demo (http://dpm-web-dev-2.ucc.usyd.edu.au/corporate-frontend/latest-build/dist/form.html)
Style guide: Components.Form
*/
.b-form {
/*
* Variables:
*/
/*
Dark form
General dark form demo (http://dpm-web-dev-2.ucc.usyd.edu.au/corporate-frontend/latest-build/dist/form.html).
Markup: demo.form.dark.html
Style guide: Components.Form.Dark
*/
/* ------------------ elements --------------------- */
/**
* Button group controls the submit buttons positions and margins
*/ }
.b-form--dark {
background-color: rgba(66, 66, 66, 0.95);
color: white; }
.b-form--dark .b-form__match-background {
color: rgba(66, 66, 66, 0.95); }
.b-form--dark .b-predictive-input__menu {
color: black; }
.b-form__title {
margin-top: 0;
margin-bottom: 20px;
line-height: 1;
color: black;
font-size: 25px;
font-weight: bold; }
.b-form--dark .b-form__title {
color: white; }
.b-form__button-group--inline {
display: inline-block;
vertical-align: top; }
/*
Accordion
Accordion/Consertina for Sydney course and student intranet, Corporate website accordion is different with this accordion
Markup: demo.accordion.html
Style guide: Components.Accordion
*/
.b-accordion__group {
border-top: 1px solid #dcdcdc; }
.b-accordion__item {
border-bottom: 1px solid #dcdcdc !important;
box-shadow: none;
overflow: hidden; }
.b-accordion__link {
display: block;
position: relative;
cursor: pointer;
padding-right: 30px;
color: black;
font-weight: 700; }
.b-accordion__link:hover, .b-accordion__link:focus, .b-accordion__link:active {
color: black; }
.b-accordion__link::before {
display: block;
position: absolute;
top: 0;
right: 10px;
width: 12px;
height: 24px;
content: url('../bower_components/corporate-frontend/dist/assets/img/icons/svg/minus.svg'); }
.b-accordion__link.collapsed::before {
content: url('../bower_components/corporate-frontend/dist/assets/img/icons/svg/plus.svg'); }
.b-accordion__link--normal-weight {
font-weight: normal; }
.b-accordion__link--size-corporate {
font-size: 16px; }
.b-accordion__title {
margin: 24px 0; }
.b-accordion__content {
padding: 36px 0 60px; }
.b-student-site__page .b-accordion__content {
padding: 0 0 36px; }
.b-accordion__content--corporate {
margin: 0 40px 40px 30px;
padding: 0; }
.b-accordion--compact {
margin-bottom: 0; }
.b-accordion--compact .b-accordion__link::before {
margin: 0 8px; }
.b-accordion--compact .b-accordion__title {
margin: 10px 0;
padding: 0 8px; }
.b-accordion--compact .b-accordion__content {
padding: 20px 8px; }
.b-accordion--dark-keylines {
border-top: 1px solid black; }
.b-accordion--dark-keylines .b-accordion__item {
border-bottom: 1px solid black !important; }
.b-accordion--dark-keylines .b-accordion__item:last-child {
border-bottom: none !important; }
button[data-balloon] {
overflow: visible; }
[data-balloon] {
position: relative;
cursor: pointer; }
[data-balloon]:after {
filter: alpha(opactiy=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.18s ease-out 0.18s;
-moz-transition: all 0.18s ease-out 0.18s;
-ms-transition: all 0.18s ease-out 0.18s;
-o-transition: all 0.18s ease-out 0.18s;
transition: all 0.18s ease-out 0.18s;
font-family: sans-serif !important;
font-weight: normal !important;
font-style: normal !important;
text-shadow: none !important;
font-size: 12px !important;
background: rgba(17, 17, 17, 0.9);
border-radius: 4px;
color: #fff;
content: attr(data-balloon);
padding: .5em 1em;
position: absolute;
white-space: nowrap;
z-index: 10; }
[data-balloon]:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(0)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
background-size: 100% auto;
width: 18px;
height: 6px;
filter: alpha(opactiy=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.18s ease-out 0.18s;
-moz-transition: all 0.18s ease-out 0.18s;
-ms-transition: all 0.18s ease-out 0.18s;
-o-transition: all 0.18s ease-out 0.18s;
transition: all 0.18s ease-out 0.18s;
content: '';
position: absolute;
z-index: 10; }
[data-balloon]:hover:before, .b-tooltip--force-show:before, [data-balloon]:hover:after, .b-tooltip--force-show:after, [data-balloon][data-balloon-visible]:before, [data-balloon][data-balloon-visible]:after {
filter: alpha(opactiy=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
pointer-events: auto; }
[data-balloon].font-awesome:after {
font-family: FontAwesome; }
[data-balloon][data-balloon-break]:after {
white-space: pre; }
[data-balloon][data-balloon-blunt]:before, [data-balloon][data-balloon-blunt]:after {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none; }
[data-balloon][data-balloon-pos="up"]:after {
bottom: 100%;
left: 50%;
margin-bottom: 11px;
-webkit-transform: translate(-50%, 10px);
-moz-transform: translate(-50%, 10px);
-ms-transform: translate(-50%, 10px);
transform: translate(-50%, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon][data-balloon-pos="up"]:before {
bottom: 100%;
left: 50%;
margin-bottom: 5px;
-webkit-transform: translate(-50%, 10px);
-moz-transform: translate(-50%, 10px);
-ms-transform: translate(-50%, 10px);
transform: translate(-50%, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon][data-balloon-pos="up"]:hover:after, [data-balloon-pos="up"].b-tooltip--force-show:after, [data-balloon][data-balloon-pos="up"][data-balloon-visible]:after {
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
[data-balloon][data-balloon-pos="up"]:hover:before, [data-balloon-pos="up"].b-tooltip--force-show:before, [data-balloon][data-balloon-pos="up"][data-balloon-visible]:before {
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
[data-balloon][data-balloon-pos="up-left"]:after {
bottom: 100%;
left: 0;
margin-bottom: 11px;
-webkit-transform: translate(0, 10px);
-moz-transform: translate(0, 10px);
-ms-transform: translate(0, 10px);
transform: translate(0, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon][data-balloon-pos="up-left"]:before {
bottom: 100%;
left: 5px;
margin-bottom: 5px;
-webkit-transform: translate(0, 10px);
-moz-transform: translate(0, 10px);
-ms-transform: translate(0, 10px);
transform: translate(0, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon][data-balloon-pos="up-left"]:hover:after, [data-balloon-pos="up-left"].b-tooltip--force-show:after, [data-balloon][data-balloon-pos="up-left"][data-balloon-visible]:after {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos="up-left"]:hover:before, [data-balloon-pos="up-left"].b-tooltip--force-show:before, [data-balloon][data-balloon-pos="up-left"][data-balloon-visible]:before {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos="up-right"]:after {
bottom: 100%;
right: 0;
margin-bottom: 11px;
-webkit-transform: translate(0, 10px);
-moz-transform: translate(0, 10px);
-ms-transform: translate(0, 10px);
transform: translate(0, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon][data-balloon-pos="up-right"]:before {
bottom: 100%;
right: 5px;
margin-bottom: 5px;
-webkit-transform: translate(0, 10px);
-moz-transform: translate(0, 10px);
-ms-transform: translate(0, 10px);
transform: translate(0, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon][data-balloon-pos="up-right"]:hover:after, [data-balloon-pos="up-right"].b-tooltip--force-show:after, [data-balloon][data-balloon-pos="up-right"][data-balloon-visible]:after {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos="up-right"]:hover:before, [data-balloon-pos="up-right"].b-tooltip--force-show:before, [data-balloon][data-balloon-pos="up-right"][data-balloon-visible]:before {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos='down']:after {
left: 50%;
margin-top: 11px;
top: 100%;
-webkit-transform: translate(-50%, -10px);
-moz-transform: translate(-50%, -10px);
-ms-transform: translate(-50%, -10px);
transform: translate(-50%, -10px); }
[data-balloon][data-balloon-pos='down']:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
background-size: 100% auto;
width: 18px;
height: 6px;
left: 50%;
margin-top: 5px;
top: 100%;
-webkit-transform: translate(-50%, -10px);
-moz-transform: translate(-50%, -10px);
-ms-transform: translate(-50%, -10px);
transform: translate(-50%, -10px); }
[data-balloon][data-balloon-pos='down']:hover:after, [data-balloon-pos='down'].b-tooltip--force-show:after, [data-balloon][data-balloon-pos='down'][data-balloon-visible]:after {
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
[data-balloon][data-balloon-pos='down']:hover:before, [data-balloon-pos='down'].b-tooltip--force-show:before, [data-balloon][data-balloon-pos='down'][data-balloon-visible]:before {
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
[data-balloon][data-balloon-pos='down-left']:after {
left: 0;
margin-top: 11px;
top: 100%;
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
transform: translate(0, -10px); }
[data-balloon][data-balloon-pos='down-left']:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
background-size: 100% auto;
width: 18px;
height: 6px;
left: 5px;
margin-top: 5px;
top: 100%;
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
transform: translate(0, -10px); }
[data-balloon][data-balloon-pos='down-left']:hover:after, [data-balloon-pos='down-left'].b-tooltip--force-show:after, [data-balloon][data-balloon-pos='down-left'][data-balloon-visible]:after {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos='down-left']:hover:before, [data-balloon-pos='down-left'].b-tooltip--force-show:before, [data-balloon][data-balloon-pos='down-left'][data-balloon-visible]:before {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos='down-right']:after {
right: 0;
margin-top: 11px;
top: 100%;
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
transform: translate(0, -10px); }
[data-balloon][data-balloon-pos='down-right']:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
background-size: 100% auto;
width: 18px;
height: 6px;
right: 5px;
margin-top: 5px;
top: 100%;
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
transform: translate(0, -10px); }
[data-balloon][data-balloon-pos='down-right']:hover:after, [data-balloon-pos='down-right'].b-tooltip--force-show:after, [data-balloon][data-balloon-pos='down-right'][data-balloon-visible]:after {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos='down-right']:hover:before, [data-balloon-pos='down-right'].b-tooltip--force-show:before, [data-balloon][data-balloon-pos='down-right'][data-balloon-visible]:before {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos='left']:after {
margin-right: 11px;
right: 100%;
top: 50%;
-webkit-transform: translate(10px, -50%);
-moz-transform: translate(10px, -50%);
-ms-transform: translate(10px, -50%);
transform: translate(10px, -50%); }
[data-balloon][data-balloon-pos='left']:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(-90 18 18)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
background-size: 100% auto;
width: 6px;
height: 18px;
margin-right: 5px;
right: 100%;
top: 50%;
-webkit-transform: translate(10px, -50%);
-moz-transform: translate(10px, -50%);
-ms-transform: translate(10px, -50%);
transform: translate(10px, -50%); }
[data-balloon][data-balloon-pos='left']:hover:after, [data-balloon-pos='left'].b-tooltip--force-show:after, [data-balloon][data-balloon-pos='left'][data-balloon-visible]:after {
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%); }
[data-balloon][data-balloon-pos='left']:hover:before, [data-balloon-pos='left'].b-tooltip--force-show:before, [data-balloon][data-balloon-pos='left'][data-balloon-visible]:before {
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%); }
[data-balloon][data-balloon-pos='right']:after {
left: 100%;
margin-left: 11px;
top: 50%;
-webkit-transform: translate(-10px, -50%);
-moz-transform: translate(-10px, -50%);
-ms-transform: translate(-10px, -50%);
transform: translate(-10px, -50%); }
[data-balloon][data-balloon-pos='right']:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(90 6 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
background-size: 100% auto;
width: 6px;
height: 18px;
left: 100%;
margin-left: 5px;
top: 50%;
-webkit-transform: translate(-10px, -50%);
-moz-transform: translate(-10px, -50%);
-ms-transform: translate(-10px, -50%);
transform: translate(-10px, -50%); }
[data-balloon][data-balloon-pos='right']:hover:after, [data-balloon-pos='right'].b-tooltip--force-show:after, [data-balloon][data-balloon-pos='right'][data-balloon-visible]:after {
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%); }
[data-balloon][data-balloon-pos='right']:hover:before, [data-balloon-pos='right'].b-tooltip--force-show:before, [data-balloon][data-balloon-pos='right'][data-balloon-visible]:before {
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%); }
[data-balloon][data-balloon-length='small']:after {
white-space: normal;
width: 80px; }
[data-balloon][data-balloon-length='medium']:after {
white-space: normal;
width: 150px; }
[data-balloon][data-balloon-length='large']:after {
white-space: normal;
width: 260px; }
[data-balloon][data-balloon-length='xlarge']:after {
white-space: normal;
width: 380px; }
@media screen and (max-width: 768px) {
[data-balloon][data-balloon-length='xlarge']:after {
white-space: normal;
width: 90vw; } }
[data-balloon][data-balloon-length='fit']:after {
white-space: normal;
width: 100%; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Alumni donation form
The alumni donation form module is used on the hero media backdrop to accept a donation amount along with two submit buttons.
Markup: demo.alumni-donation-form.html
Style guide: Components.Alumni donation form
*/
.b-alumni-donation-form {
/*
* Variables:
*/
position: relative;
z-index: 10;
padding: 27px 26px;
width: 100%;
height: 100%; }
.b-alumni-donation-form__title {
margin-top: 0;
margin-bottom: 18px;
text-align: center;
line-height: 1.5;
font-size: 25px;
font-weight: bold; }
.b-alumni-donation-form__subtitle {
margin-bottom: 30px;
text-align: center;
font-family: "Apercu", Helvetica, sans-serif;
font-size: 18px; }
.b-alumni-donation-form__form-control {
margin-bottom: 20px;
padding: 0 14px; }
.b-alumni-donation-form__button-group {
padding: 0 14px;
overflow: auto; }
.b-alumni-donation-form__button--left {
float: none;
margin-right: 20px; }
.b-alumni-donation-form__button--right {
float: none; }
@media (min-width: 768px) {
.b-alumni-donation-form {
position: absolute;
padding: 18px 40px 16px;
width: 280px; }
.b-alumni-donation-form__title {
margin-bottom: 1px;
font-size: 20px; }
.b-alumni-donation-form__subtitle {
margin-bottom: 18px; }
.b-alumni-donation-form__form-control {
margin-bottom: 10px;
padding: 0; }
.b-alumni-donation-form__input-group {
margin-bottom: 0;
padding: 0; }
.b-alumni-donation-form__button--left {
float: left;
margin-right: 0; }
.b-alumni-donation-form__button--right {
float: right; }
.b-alumni-donation-form__button-group {
padding: 0; } }
@media (min-width: 992px) {
.b-alumni-donation-form {
padding: 32px 40px; }
.b-alumni-donation-form__title {
margin-bottom: 18px; }
.b-alumni-donation-form__subtitle {
margin-bottom: 30px; } }
@media (min-width: 1200px) {
.b-alumni-donation-form {
padding: 52px 40px 40px;
height: auto; } }
button[data-balloon] {
overflow: visible; }
[data-balloon] {
position: relative;
cursor: pointer; }
[data-balloon]:after {
filter: alpha(opactiy=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.18s ease-out 0.18s;
-moz-transition: all 0.18s ease-out 0.18s;
-ms-transition: all 0.18s ease-out 0.18s;
-o-transition: all 0.18s ease-out 0.18s;
transition: all 0.18s ease-out 0.18s;
font-family: sans-serif !important;
font-weight: normal !important;
font-style: normal !important;
text-shadow: none !important;
font-size: 12px !important;
background: rgba(17, 17, 17, 0.9);
border-radius: 4px;
color: #fff;
content: attr(data-balloon);
padding: .5em 1em;
position: absolute;
white-space: nowrap;
z-index: 10; }
[data-balloon]:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(0)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
background-size: 100% auto;
width: 18px;
height: 6px;
filter: alpha(opactiy=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.18s ease-out 0.18s;
-moz-transition: all 0.18s ease-out 0.18s;
-ms-transition: all 0.18s ease-out 0.18s;
-o-transition: all 0.18s ease-out 0.18s;
transition: all 0.18s ease-out 0.18s;
content: '';
position: absolute;
z-index: 10; }
[data-balloon]:hover:before, .b-tooltip--force-show:before, [data-balloon]:hover:after, .b-tooltip--force-show:after, [data-balloon][data-balloon-visible]:before, [data-balloon][data-balloon-visible]:after {
filter: alpha(opactiy=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
pointer-events: auto; }
[data-balloon].font-awesome:after {
font-family: FontAwesome; }
[data-balloon][data-balloon-break]:after {
white-space: pre; }
[data-balloon][data-balloon-blunt]:before, [data-balloon][data-balloon-blunt]:after {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none; }
[data-balloon][data-balloon-pos="up"]:after {
bottom: 100%;
left: 50%;
margin-bottom: 11px;
-webkit-transform: translate(-50%, 10px);
-moz-transform: translate(-50%, 10px);
-ms-transform: translate(-50%, 10px);
transform: translate(-50%, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon][data-balloon-pos="up"]:before {
bottom: 100%;
left: 50%;
margin-bottom: 5px;
-webkit-transform: translate(-50%, 10px);
-moz-transform: translate(-50%, 10px);
-ms-transform: translate(-50%, 10px);
transform: translate(-50%, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon][data-balloon-pos="up"]:hover:after, [data-balloon-pos="up"].b-tooltip--force-show:after, [data-balloon][data-balloon-pos="up"][data-balloon-visible]:after {
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
[data-balloon][data-balloon-pos="up"]:hover:before, [data-balloon-pos="up"].b-tooltip--force-show:before, [data-balloon][data-balloon-pos="up"][data-balloon-visible]:before {
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
[data-balloon][data-balloon-pos="up-left"]:after {
bottom: 100%;
left: 0;
margin-bottom: 11px;
-webkit-transform: translate(0, 10px);
-moz-transform: translate(0, 10px);
-ms-transform: translate(0, 10px);
transform: translate(0, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon][data-balloon-pos="up-left"]:before {
bottom: 100%;
left: 5px;
margin-bottom: 5px;
-webkit-transform: translate(0, 10px);
-moz-transform: translate(0, 10px);
-ms-transform: translate(0, 10px);
transform: translate(0, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon][data-balloon-pos="up-left"]:hover:after, [data-balloon-pos="up-left"].b-tooltip--force-show:after, [data-balloon][data-balloon-pos="up-left"][data-balloon-visible]:after {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos="up-left"]:hover:before, [data-balloon-pos="up-left"].b-tooltip--force-show:before, [data-balloon][data-balloon-pos="up-left"][data-balloon-visible]:before {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos="up-right"]:after {
bottom: 100%;
right: 0;
margin-bottom: 11px;
-webkit-transform: translate(0, 10px);
-moz-transform: translate(0, 10px);
-ms-transform: translate(0, 10px);
transform: translate(0, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon][data-balloon-pos="up-right"]:before {
bottom: 100%;
right: 5px;
margin-bottom: 5px;
-webkit-transform: translate(0, 10px);
-moz-transform: translate(0, 10px);
-ms-transform: translate(0, 10px);
transform: translate(0, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon][data-balloon-pos="up-right"]:hover:after, [data-balloon-pos="up-right"].b-tooltip--force-show:after, [data-balloon][data-balloon-pos="up-right"][data-balloon-visible]:after {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos="up-right"]:hover:before, [data-balloon-pos="up-right"].b-tooltip--force-show:before, [data-balloon][data-balloon-pos="up-right"][data-balloon-visible]:before {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos='down']:after {
left: 50%;
margin-top: 11px;
top: 100%;
-webkit-transform: translate(-50%, -10px);
-moz-transform: translate(-50%, -10px);
-ms-transform: translate(-50%, -10px);
transform: translate(-50%, -10px); }
[data-balloon][data-balloon-pos='down']:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
background-size: 100% auto;
width: 18px;
height: 6px;
left: 50%;
margin-top: 5px;
top: 100%;
-webkit-transform: translate(-50%, -10px);
-moz-transform: translate(-50%, -10px);
-ms-transform: translate(-50%, -10px);
transform: translate(-50%, -10px); }
[data-balloon][data-balloon-pos='down']:hover:after, [data-balloon-pos='down'].b-tooltip--force-show:after, [data-balloon][data-balloon-pos='down'][data-balloon-visible]:after {
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
[data-balloon][data-balloon-pos='down']:hover:before, [data-balloon-pos='down'].b-tooltip--force-show:before, [data-balloon][data-balloon-pos='down'][data-balloon-visible]:before {
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
[data-balloon][data-balloon-pos='down-left']:after {
left: 0;
margin-top: 11px;
top: 100%;
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
transform: translate(0, -10px); }
[data-balloon][data-balloon-pos='down-left']:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
background-size: 100% auto;
width: 18px;
height: 6px;
left: 5px;
margin-top: 5px;
top: 100%;
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
transform: translate(0, -10px); }
[data-balloon][data-balloon-pos='down-left']:hover:after, [data-balloon-pos='down-left'].b-tooltip--force-show:after, [data-balloon][data-balloon-pos='down-left'][data-balloon-visible]:after {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos='down-left']:hover:before, [data-balloon-pos='down-left'].b-tooltip--force-show:before, [data-balloon][data-balloon-pos='down-left'][data-balloon-visible]:before {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos='down-right']:after {
right: 0;
margin-top: 11px;
top: 100%;
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
transform: translate(0, -10px); }
[data-balloon][data-balloon-pos='down-right']:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
background-size: 100% auto;
width: 18px;
height: 6px;
right: 5px;
margin-top: 5px;
top: 100%;
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
transform: translate(0, -10px); }
[data-balloon][data-balloon-pos='down-right']:hover:after, [data-balloon-pos='down-right'].b-tooltip--force-show:after, [data-balloon][data-balloon-pos='down-right'][data-balloon-visible]:after {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos='down-right']:hover:before, [data-balloon-pos='down-right'].b-tooltip--force-show:before, [data-balloon][data-balloon-pos='down-right'][data-balloon-visible]:before {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos='left']:after {
margin-right: 11px;
right: 100%;
top: 50%;
-webkit-transform: translate(10px, -50%);
-moz-transform: translate(10px, -50%);
-ms-transform: translate(10px, -50%);
transform: translate(10px, -50%); }
[data-balloon][data-balloon-pos='left']:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(-90 18 18)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
background-size: 100% auto;
width: 6px;
height: 18px;
margin-right: 5px;
right: 100%;
top: 50%;
-webkit-transform: translate(10px, -50%);
-moz-transform: translate(10px, -50%);
-ms-transform: translate(10px, -50%);
transform: translate(10px, -50%); }
[data-balloon][data-balloon-pos='left']:hover:after, [data-balloon-pos='left'].b-tooltip--force-show:after, [data-balloon][data-balloon-pos='left'][data-balloon-visible]:after {
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%); }
[data-balloon][data-balloon-pos='left']:hover:before, [data-balloon-pos='left'].b-tooltip--force-show:before, [data-balloon][data-balloon-pos='left'][data-balloon-visible]:before {
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%); }
[data-balloon][data-balloon-pos='right']:after {
left: 100%;
margin-left: 11px;
top: 50%;
-webkit-transform: translate(-10px, -50%);
-moz-transform: translate(-10px, -50%);
-ms-transform: translate(-10px, -50%);
transform: translate(-10px, -50%); }
[data-balloon][data-balloon-pos='right']:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(90 6 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
background-size: 100% auto;
width: 6px;
height: 18px;
left: 100%;
margin-left: 5px;
top: 50%;
-webkit-transform: translate(-10px, -50%);
-moz-transform: translate(-10px, -50%);
-ms-transform: translate(-10px, -50%);
transform: translate(-10px, -50%); }
[data-balloon][data-balloon-pos='right']:hover:after, [data-balloon-pos='right'].b-tooltip--force-show:after, [data-balloon][data-balloon-pos='right'][data-balloon-visible]:after {
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%); }
[data-balloon][data-balloon-pos='right']:hover:before, [data-balloon-pos='right'].b-tooltip--force-show:before, [data-balloon][data-balloon-pos='right'][data-balloon-visible]:before {
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%); }
[data-balloon][data-balloon-length='small']:after {
white-space: normal;
width: 80px; }
[data-balloon][data-balloon-length='medium']:after {
white-space: normal;
width: 150px; }
[data-balloon][data-balloon-length='large']:after {
white-space: normal;
width: 260px; }
[data-balloon][data-balloon-length='xlarge']:after {
white-space: normal;
width: 380px; }
@media screen and (max-width: 768px) {
[data-balloon][data-balloon-length='xlarge']:after {
white-space: normal;
width: 90vw; } }
[data-balloon][data-balloon-length='fit']:after {
white-space: normal;
width: 100%; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Alumni volunteer form
The alumni volunteer form demo
Markup: demo.alumni-volunteer-form.html
Style guide: Components.Alumni Volunteer form
*/
/*
ATAR Form
Displays a form containing dropdowns to select Faculty, then degreee, then show details
Markup: demo.atar-form.html
Style guide: Components.ATAR Form
*/
.b-atar-form__control--hidden {
display: none; }
/*
Call out
The call out module is used to provide a profile, snippet of content or illustrated pull-quote. A typical call out consists of a title,
thumbnail image and body, most often including a quote (b-quote) and optionally a call-to-action link.
.b-call-out--expanded - arranges the call-out in a more expansive style with the thumbnail and strapline arranged to the left of the quote body
.b-call-out--compact - arranges the call out in a compact style suitable for fitting into narrow areas
Markup: demo.call-out.html
Style guide: Components.Call out
*/
.b-call-out {
*zoom: 1;
padding-right: 0; }
.b-call-out:after {
content: "";
display: table;
clear: both; }
.b-call-out .b-call-out__title {
float: left;
clear: none;
width: calc(100% - 150px); }
.b-call-out .b-call-out__thumbnail {
float: right;
margin-right: 0;
margin-bottom: 20px;
margin-left: 40px;
width: 110px; }
.b-call-out .b-call-out__strapline {
float: none;
clear: left;
margin-right: 0;
margin-bottom: 40px;
padding-right: 40px;
width: auto; }
.b-call-out .b-call-out__body {
padding-right: 40px;
overflow: visible; }
.b-call-out.b-call-out--no-thumbnail .b-call-out__title {
float: none;
width: auto; }
@media (min-width: 480px) {
.b-call-out--expanded .b-call-out__title {
float: none;
clear: both;
width: auto; }
.b-call-out--expanded .b-call-out__thumbnail {
float: left;
margin-right: 60px;
margin-bottom: 20px;
margin-left: 0;
width: 110px; }
.b-call-out--expanded .b-call-out__strapline {
float: left;
clear: left;
margin-right: 60px;
padding-right: 0;
width: 110px; }
.b-call-out--expanded .b-call-out__body {
padding-right: 50px;
overflow: hidden; } }
@media (min-width: 992px) {
.b-page__content .b-call-out,
.columnControl .b-call-out {
padding-right: 0; }
.b-page__content .b-call-out .b-call-out__title,
.columnControl .b-call-out .b-call-out__title {
float: left;
clear: none;
width: calc(100% - 150px); }
.b-page__content .b-call-out .b-call-out__thumbnail,
.columnControl .b-call-out .b-call-out__thumbnail {
float: right;
margin-right: 0;
margin-bottom: 20px;
margin-left: 40px;
width: 110px; }
.b-page__content .b-call-out .b-call-out__strapline,
.columnControl .b-call-out .b-call-out__strapline {
float: none;
clear: left;
margin-right: 0;
margin-bottom: 40px;
padding-right: 40px;
width: auto; }
.b-page__content .b-call-out .b-call-out__body,
.columnControl .b-call-out .b-call-out__body {
padding-right: 40px;
overflow: visible; }
.b-page__content .b-call-out.b-call-out--no-thumbnail .b-call-out__title,
.columnControl .b-call-out.b-call-out--no-thumbnail .b-call-out__title {
float: none;
width: auto; } }
@media (min-width: 768px) {
.b-page__sidebar .b-call-out,
.rightSidebarColumn .b-call-out {
padding-right: 0; }
.b-page__sidebar .b-call-out .b-call-out__title,
.rightSidebarColumn .b-call-out .b-call-out__title {
float: left;
clear: none;
width: calc(100% - 150px); }
.b-page__sidebar .b-call-out .b-call-out__thumbnail,
.rightSidebarColumn .b-call-out .b-call-out__thumbnail {
float: right;
margin-right: 0;
margin-bottom: 20px;
margin-left: 40px;
width: 110px; }
.b-page__sidebar .b-call-out .b-call-out__strapline,
.rightSidebarColumn .b-call-out .b-call-out__strapline {
float: none;
clear: left;
margin-right: 0;
margin-bottom: 40px;
padding-right: 40px;
width: auto; }
.b-page__sidebar .b-call-out .b-call-out__body,
.rightSidebarColumn .b-call-out .b-call-out__body {
padding-right: 40px;
overflow: visible; }
.b-page__sidebar .b-call-out.b-call-out--no-thumbnail .b-call-out__title,
.rightSidebarColumn .b-call-out.b-call-out--no-thumbnail .b-call-out__title {
float: none;
width: auto; } }
/*
Contact details
Contact details in a brown box container.
Markup: demo.contact-details.html
Style guide: Components.Contact details
*/
.b-contact-details {
font-size: 14px; }
.b-contact-details__wrapper {
margin-bottom: 15px; }
.b-contact-details__row {
vertical-align: top; }
.b-contact-details__label {
padding-right: 15px;
font-weight: normal; }
.b-contact-details__link {
text-decoration: underline;
color: white; }
.b-contact-details__link:hover {
text-decoration: none;
color: white; }
.b-contact-details__text {
margin-bottom: 0; }
/**
* Category topic navigation
*
* Student intranet category topic page category topic navigation
*
* Demo: http://localhost:9000/demo/student-intranet/navigation-page.html
*
* Style guide: Components.Category topic navigation
*/
.b-category-topic-navigation__inner-wrapper {
display: table;
width: 100%; }
.b-category-topic-navigation__column--bleed {
margin-left: -15px; }
.b-category-topic-navigation__column--sidebar {
display: table-cell;
transition: 400ms;
width: 0;
height: 100%; }
.b-category-topic-navigation__column--sidebar-holder {
display: block;
transition: 400ms;
width: 0;
height: 100%;
overflow: hidden; }
.b-category-topic-navigation__column--content {
display: table-cell;
transition: 400ms;
height: 100%; }
.b-category-topic-navigation__column--activated .b-category-topic-navigation__column--sidebar,
.b-category-topic-navigation__column--activated .b-category-topic-navigation__column--sidebar-holder {
transition: 400ms;
width: 58px; }
.b-category-topic-navigation__breadcrumb-item:last-child {
color: #ce3d20; }
/**
* Creates a caret icon that will can be positioned along a vertical or horizontal line to indicate progress through
* or active focus within a set of steps or items.
*/
.b-caret-slider {
position: relative; }
.b-caret-slider__caret {
position: absolute;
transition: left 100ms ease-out, top 100ms ease-out, width 100ms ease-out, height 100ms ease-out; }
.b-caret-slider__caret--vertical {
left: -1px;
background-repeat: no-repeat;
background-size: 100% 100%;
width: 7px;
height: 14px; }
.b-caret-slider__caret--vertical.b-caret-slider__caret--hollow-black {
background-image: url('../bower_components/corporate-frontend/dist/components/caret-slider/images/slider-caret-small-black-hollow-vertical.svg'); }
.b-caret-slider__caret--vertical.b-caret-slider__caret--solid-black {
background-image: url('../bower_components/corporate-frontend/dist/components/caret-slider/images/slider-caret-small-black-solid-vertical.svg'); }
.b-caret-slider__caret--horizontal {
top: 0;
background-repeat: no-repeat;
background-size: 100% 100%;
width: 14px;
height: 7px; }
.b-caret-slider__caret--horizontal.b-caret-slider__caret--hollow-black {
background-image: url('../bower_components/corporate-frontend/dist/components/caret-slider/images/slider-caret-small-black-hollow-horizontal.svg'); }
.b-caret-slider__caret--active.b-caret-slider__caret--horizontal {
height: 7px; }
.b-caret-slider__caret--inactive.b-caret-slider__caret--horizontal {
height: 0; }
.b-caret-slider__caret--active.b-caret-slider__caret--vertical {
width: 7px; }
.b-caret-slider__caret--inactive.b-caret-slider__caret--vertical {
width: 0; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Carousel
TODO styleguide
TODO https://bitbucket.org/boomworks/corporate-frontend/pull-requests/5/feature-sca-28_media_viewer/diff
*/
.b-carousel__title {
margin: 0 0 7px;
padding-left: 10px; }
@media (min-width: 768px) {
.b-carousel__title {
margin-bottom: 15px;
padding-left: 0; } }
.b-carousel__container {
position: relative;
overflow: hidden; }
.b-carousel__wrapper {
position: relative;
margin: 0;
padding: 0;
width: 20000em;
list-style-type: none; }
.b-carousel__slide {
float: left;
margin: 0;
padding: 0; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Carousel slide
TODO styleguide
*/
.b-slide__media {
display: block;
border-bottom: 5px solid white;
box-shadow: 0 3px 0 black;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
padding-bottom: 75%;
padding-top: 0;
height: 0;
display: block; }
.b-slide__caption {
padding: 15px 10px 0;
font-size: 14px; }
@media (min-width: 768px) {
.b-slide__caption {
padding-right: 0;
padding-left: 0; } }
.b-slide__thumbnail {
position: relative;
background-color: black;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
overflow: hidden; }
@media (min-width: 768px) {
.b-slide__thumbnail {
height: 100px; } }
@media (min-width: 992px) {
.b-slide__thumbnail {
height: 74.4px; } }
@media (min-width: 1200px) {
.b-slide__thumbnail {
height: 90px; } }
/*
Details panel
Compact table-like layout for collections of values
Markup: demo.details-panel.html
Style guide: Components.Details panel
*/
.b-details-panel__row {
display: flex;
flex-wrap: wrap;
align-items: stretch; }
.b-details-panel__wide {
margin-bottom: 16px; }
.b-details-panel__box {
margin: 0 0 -1px;
padding: 10px;
font-size: 14px; }
.b-details-panel__box.col-xs-6:first-child:nth-last-child(2):nth-child(2),
.b-details-panel__box.col-xs-6:first-child:nth-last-child(2) ~ .b-details-panel__box:nth-child(2) {
border-left: 0; }
.b-details-panel__box--tight {
padding: 10px 5px; }
.b-details-panel__cta {
padding: 0; }
.b-details-panel__cta-link {
margin-bottom: 0;
padding: 10px;
font-weight: normal; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Events list
Events list component
Markup: demo.events-list-summary.html
Style guide: Components.Events list
*/
.b-events-list__version-holder {
display: block; }
.b-events-list--full-version .b-events-list__version-holder {
display: none; }
.b-events-list__version-holder--full-version {
display: none; }
.b-events-list--full-version .b-events-list__version-holder--full-version {
display: block; }
.b-events-list--full-version .b-events-list__title-container {
border-bottom: 2px solid black; }
.b-events-list--full-version .b-events-list__date-filter {
display: none;
visibility: hidden; }
.b-events-list--show-date-filter .b-events-list__date-filter,
.b-events-list--full-version .b-events-list--show-date-filter .b-events-list__date-filter {
display: block;
visibility: visible; }
.b-events-list__date-filter .b-events-list--show-date-filter,
.b-events-list--full-version .b-events-list__date-filter {
padding-top: 30px; }
.b-events-list__see-more-link {
padding-top: 14px;
vertical-align: bottom; }
.b-events-list__title {
vertical-align: bottom;
font-size: 28px; }
.b-events-list--full-version .b-events-list__title {
font-size: 30px; }
.b-events-list__date-list {
display: none;
border-bottom: 1px solid black; }
.b-events-list__event-date--label {
display: block;
border-top: 1px solid black;
border-bottom: 1px solid black; }
.b-events-list--full-version .b-events-list__event-date--label {
display: none; }
.b-events-list--show-date-filter .b-events-list__event-date--label,
.b-events-list--full-version .b-events-list--show-date-filter .b-events-list__event-date--label {
display: block; }
.b-events-list__event-details {
display: block;
background-image: url("../bower_components/corporate-frontend/dist/assets/img/rightArrowRed.svg");
background-repeat: no-repeat;
background-position: 98% 50%;
background-size: 18px 16px;
padding-top: 30px;
padding-bottom: 25px;
text-decoration: none;
color: #363636; }
.b-events-list__event-details:hover, .b-events-list__event-details:focus {
background-color: #f1f2f2;
text-decoration: none;
color: #363636; }
.b-events-list--full-version .b-events-list__event-details {
background-size: 34px 24px;
padding-top: 35px;
padding-bottom: 40px; }
.b-events-list__event-column {
display: block;
vertical-align: top;
box-sizing: border-box; }
.b-events-list__event-column--image {
display: none; }
.b-events-list--full-version .b-events-list__event-column--image {
float: left;
padding-right: 8.23529%;
width: 29.41176%; }
.b-events-list__event-column--text {
padding-right: 21.42857%; }
.b-events-list--full-version .b-events-list__event-column--text {
float: right;
padding-left: 4%;
width: 70.58824%; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
.b-dates-filter-component__result-container {
width: 100%; }
/*
Fact List
Displays a list of "facts" in a box suitable as sidebar content
.b-box--red - Display in a red box.
.b-box--grey - Display in a charcoal box.
.b-box--brown - Display in a brown box.
Markup: demo.fact-list.html
Style guide: Components.Fact list
*/
/*
Fact List (CTA)
Displays a list of "facts" in a box suitable as sidebar content with cta links
Markup: demo.fact-list.CTA.html
Style guide: Components.Fact list.cta
*/
/*
Fact List (inline)
Displays a list of "facts" inline in a box on desktop and stacked in tablet and mobile
Markup: demo.fact-list.CTA.inline.html
Style guide: Components.Fact list.inline
*/
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Fact tile
The fact tile component has two states, and 3 font sizes for different responsive screens.
The Fact tile component has three styles:
- Full width and default size in the body column
- Small font size in the left / right side column or in the body column controls
Mobile view
All styles have the same font size: 50px.
550 px to 768px
All styles have the same normal font size: 80px.
Tablet view (768px - 1199px)
The figure font size for 5 characters and above is 55px, font size for 4 characters and below is 80px.
Desktop view ( 1200px and above)
The long figure (.b-fact-tile__figure--long) is 80px by default, but it is 55px for the compact variant style.
Markup: demo.fact-tile.html
Style guide: Components.Fact tile
*/
.b-fact-tile {
/*
* ----------------- Variables ( in this block scope ) --------
*/
/* ------------- mobile view (Default) --------
* Screen width 320px up
* Typical devices: Iphone 5 portrait, Iphone 6 portrait
*/
position: relative;
margin-bottom: 20px;
padding-top: 8px;
/*
* ----------------- Elements -------------------
*/
/*
* --------------- Responsive views ----------
*/
/*
* Screen width 550px up
* Typical devices: Iphone 5s landscape, Iphone 6 landscape, Galaxy S3
*/
/*
* Screen width 768px up
* Typical devices: Ipad portrait, Ipad mini portrait
*/
/*
* Screen width 1200px up
* Typical devices: desktop
*/ }
.b-fact-tile__link {
display: block;
position: relative;
cursor: pointer; }
.b-fact-tile__link:focus, .b-fact-tile__link:hover {
background-color: #f1f2f2;
text-decoration: none;
color: inherit; }
.b-fact-tile__figure {
position: relative;
margin-bottom: 6px;
line-height: 1.135;
letter-spacing: -2px;
color: #e64626;
font-size: 50px; }
.b-fact-tile__figure--long {
padding-top: 7px;
padding-bottom: 5px;
font-size: 50px; }
.b-fact-tile__description {
position: relative;
padding-right: 20px; }
@media (min-width: 550px) {
.b-fact-tile__figure {
font-size: 80px; }
.b-fact-tile__figure--long {
font-size: 80px; } }
@media (min-width: 768px) {
.b-fact-tile__figure {
font-size: 80px; }
.b-fact-tile__figure--long {
font-size: 55px; } }
@media (min-width: 1200px) {
.b-fact-tile__figure--long {
font-size: 80px; }
.col-md-6 .b-fact-tile__figure--long,
.rightSidebarColumn .b-fact-tile__figure--long,
.leftSidebarColumn .b-fact-tile__figure--long {
font-size: 55px; } }
/*
Feature figure
Component used to highlight important figures in a box
.b-box--moderately-transparent - Adds a moderate transparency effect
.b-box--half-transparent - Adds half transparency effect
Markup: demo.feature-figure.html
Style guide: Components.Feature-figure
*/
/*
Feature figure step
Component used to highlight important figures in a box
.b-box--moderately-transparent - Adds a moderate transparency effect
.b-box--half-transparent - Adds half transparency effect
Markup: demo.feature-figure-step.html
Style guide: Components.Feature-figure-step
*/
.b-feature-figure {
padding: 10px;
min-height: 96px;
font-size: 14px; }
.b-feature-figure--side {
margin-top: 8px;
margin-right: 20px;
margin-bottom: 16px; }
.b-feature-figure--tight {
padding: 10px 5px;
min-height: 75px; }
.b-feature-figure--bottom-padding {
padding: 10px;
min-height: 78px; }
.b-feature-figure__link {
text-decoration: underline;
color: white; }
.b-feature-figure__link:hover {
text-decoration: none;
color: white; }
.b-feature-figure__highlight {
margin-bottom: 10px;
font-size: 24px; }
@media (max-width: 991px) {
.b-feature-figure__highlight {
font-size: 18px; } }
.b-feature-figure__step-icon {
top: 50%;
transform: translateY(-50%);
margin-left: -4px; }
/**
* Featured intro section
*
* Style guide: Components.FeaturedIntroSection
*/
.b-featured-intro-section__banner {
height: 120px; }
.b-featured-intro-section__content {
margin-top: -80px; }
.b-featured-intro-section__menu-col {
padding-top: 80px; }
/**
* Featured article
*
* Featured article component new style
*
* Markup: demo.new-style2.html
*
* Style guide: Components.Featured article
*/
.b-featured-article {
padding: 10px 5px; }
.b-featured-article__title {
margin: 0;
padding-top: 15px;
padding-bottom: 18px;
line-height: 1.1;
font-size: 24px; }
.b-featured-article-carousel--full-size .b-featured-article-carousel__slide--first .b-featured-article--news-feed .b-featured-article__title {
font-size: 30px; }
/**
* Featured article carousel
*
* Featured article carousel component
*
* Markup: demo.featured-article-carousel.html
*
* Style guide: Components.Featured article carousel
*/
@media (min-width: 992px) {
.b-featured-article-carousel--full-size .b-featured-article-carousel__slide {
padding-left: 40px; }
.b-featured-article-carousel--full-size .b-featured-article-carousel__slide--first {
padding-left: 0; } }
.b-featured-article-carousel__nav-icon {
position: relative; }
.b-featured-article-carousel__nav-icon::before {
display: block;
position: relative;
z-index: 2; }
.b-featured-article-carousel__nav-icon::after {
display: block;
position: relative;
top: -32px;
z-index: 1;
border-radius: 18px;
background: #f1f2f2;
width: 36px;
height: 36px;
content: ""; }
.b-jumbotron:after {
position: absolute;
right: 0;
background-color: white;
width: 30px;
height: 4px;
content: ""; }
.b-jumbotron__logo {
width: 180px; }
@media (min-width: 768px) {
.b-jumbotron__logo {
width: 260px; } }
@media (min-width: 768px) {
.b-jumbotron--simplify .b-jumbotron__logo {
width: 180px; } }
.b-jumbotron__title {
margin-bottom: 0;
line-height: 55px;
font-size: 50px; }
.b-jumbotron__title--last-word {
color: white; }
@media (min-width: 480px) {
.b-jumbotron__title {
line-height: 75px;
font-size: 70px; } }
@media (min-width: 992px) {
.b-jumbotron__title {
line-height: 85px;
font-size: 80px; } }
@media (min-width: 768px) {
.b-jumbotron--simplify .b-jumbotron__title {
margin-top: 2px;
line-height: 60px;
font-size: 45px; } }
.b-jumbotron__container {
position: relative;
padding-top: 80px; }
.b-jumbotron__container:before {
display: block;
position: absolute;
top: 0;
left: 8.3%;
clear: both;
background-color: black;
width: 4px;
height: 30px;
content: ""; }
/**
* Jumbotron navigation
*
* Navigation for Jumbotron panel
*
* .b-jumbotron-navigation--left: move the navigation to the page left
* .b-jumbotron-navigation--right: move the navigation to the page right
*
* Style guide: Components.JumbotronNavigation
*/
.b-jumbotron-navigation {
position: relative;
z-index: 1100;
width: 100%; }
.b-jumbotron-navigation__wrapper {
position: absolute;
padding: 0 10px;
width: 255px; }
.b-jumbotron-navigation--show .b-jumbotron-navigation__wrapper {
background-color: white;
overflow: hidden; }
.b-jumbotron-navigation--right .b-jumbotron-navigation__wrapper {
right: 0; }
.b-jumbotron-navigation--left .b-jumbotron-navigation__wrapper {
left: 0; }
.b-jumbotron-navigation--with-shadow .b-jumbotron-navigation__wrapper {
box-shadow: 1px 1px 5px black; }
.b-jumbotron-navigation__container {
position: relative; }
.b-jumbotron-navigation__button-holder {
position: absolute;
right: 0; }
.b-jumbotron-navigation__button {
display: block;
margin-top: 5px;
margin-right: -10px;
padding: 10px;
text-decoration: none;
color: black;
font-size: 24px; }
.b-jumbotron-navigation__button:hover, .b-jumbotron-navigation__button:focus {
text-decoration: none;
color: white; }
.b-jumbotron-navigation--show .b-jumbotron-navigation__button {
background-color: white;
font-size: 22px; }
.b-jumbotron-navigation--show .b-jumbotron-navigation__button:hover, .b-jumbotron-navigation--show .b-jumbotron-navigation__button:focus {
color: #ce3d20; }
.b-jumbotron-navigation__menu-holder {
display: none;
transition: 600ms;
opacity: 0; }
.b-jumbotron-navigation--show .b-jumbotron-navigation__menu-holder {
display: block;
opacity: 1; }
/**
* Jumbotron page
*
* Jumbotron page
*
* Style guide: Components.JumbotronPage
*/
.b-jumbotron-page__title {
margin-top: 18px; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Hero media
Hero media component
Style guide: Components.Hero media
*/
.b-hero-media {
margin-right: -10px;
margin-left: -10px; }
.b-hero-media__media {
width: 100%;
height: 335px; }
@media (min-width: 768px) {
.b-hero-media__media {
width: 768px;
height: 240px;
padding-bottom: 0;
display: block; } }
@media (min-width: 992px) {
.b-hero-media__media {
width: 992px;
height: 310px;
padding-bottom: 0;
display: block; } }
@media (min-width: 1200px) {
.b-hero-media__media {
width: 1200px;
height: 375px;
padding-bottom: 0;
display: block; } }
.b-hero-media--has-video .b-hero-media__media--video {
display: none; }
@media (min-width: 992px) {
.b-hero-media--has-video .b-hero-media__media--video {
display: block; } }
@media (min-width: 992px) {
.b-hero-media--has-video .b-hero-media__media--image {
display: none; } }
@media (min-width: 768px) {
.b-hero-media {
margin-left: -40px;
width: 768px; } }
@media (min-width: 992px) {
.b-hero-media {
margin-right: 90px;
margin-left: -90px;
width: 992px; } }
@media (min-width: 1200px) {
.b-hero-media {
margin-right: 110px;
margin-left: -110px;
width: 1200px; } }
.marketingHeroModule .b-hero-media {
display: block;
padding-top: 30px; }
@media (min-width: 1199px) {
.marketingHeroModule .b-hero-media {
padding-top: 50px; } }
/*
Link list
A list of hyperlinks, decorated with icons indicating the type of link (e.g. external, download)
.b-link-list__link-item--bullet Add a line as the bullet point in front of the list item
Markup: demo.link-list.html
Style guide: Components.Link list
*/
.b-link-list__title {
margin-bottom: 10px; }
.b-link-list__summary {
margin-bottom: 20px; }
.b-link-list__links {
padding: 10px 0; }
.b-link-list__links--no-padding {
padding: 0; }
.b-link-list__link-item {
padding: 10px 0;
font-family: "Apercu Mono", Courier, monospace; }
.b-link-list__link-item--bullet::before {
display: block;
float: left;
padding-left: 3px;
width: 25px;
color: black;
content: "\2014 "; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
* This is for the local site style only
*/
@media (min-width: 992px) {
.b-local-site__site-title {
border-top: 2px solid #e64626; } }
.b-local-site__site-heading {
border-top: none; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Media gallery
An media carousel based on jCarousel (http://sorgalla.com/jcarousel/)
Markup: demo.media-gallery.html
Style guide: Components.Media gallery
*/
/*
Media gallery (compact)
Media gallery without thumbnail carousel
Markup: demo.media-gallery.compact.html
Style guide: Components.Media gallery.Compact
*/
.b-image-gallery__images {
padding-bottom: 10px; }
.b-image-gallery__control {
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
background-repeat: no-repeat;
background-position: 50%;
background-size: 14px 26px;
cursor: pointer;
width: 46px; }
.b-image-gallery__control:hover {
background-color: rgba(246, 246, 246, 0.3); }
.b-image-gallery__control--inactive {
opacity: 0.666;
cursor: default; }
.b-image-gallery__control--inactive:hover {
background-color: transparent; }
.b-image-gallery__control-previous {
left: 0;
background-image: url("../bower_components/corporate-frontend/dist/assets/img/leftChevronWhite.svg"); }
.b-image-gallery__control-next {
right: 0;
background-image: url("../bower_components/corporate-frontend/dist/assets/img/rightChevronWhite.svg"); }
.b-image-gallery__pagination {
position: absolute;
top: 100%;
right: 46px;
left: 46px;
z-index: 1;
text-align: center; }
.b-image-gallery__pagination a {
display: inline-block;
margin: 0 3px 0 2px;
border-radius: 50%;
background-color: #d7dbde;
width: 10px;
height: 10px;
text-indent: -999em; }
.b-image-gallery__pagination a.b-image-gallery__pagination-active {
background-color: #e64626; }
.b-image-gallery__pagination a:hover {
background-color: #f6f6f6; }
.b-image-gallery__thumbnail-control {
background-repeat: no-repeat;
background-size: 11px 18px;
width: 21px;
min-height: 1px; }
@media (min-width: 768px) {
.b-image-gallery__thumbnail-control {
height: 57.6px; } }
@media (min-width: 992px) {
.b-image-gallery__thumbnail-control {
height: 74.4px; } }
@media (min-width: 1200px) {
.b-image-gallery__thumbnail-control {
height: 90px; } }
.b-image-gallery__thumbnail-control-previous {
float: left;
background-image: url("../bower_components/corporate-frontend/dist/assets/img/leftChevronBlack.svg");
background-position: 0% 50%; }
.b-image-gallery__thumbnail-control-next {
float: right;
background-image: url("../bower_components/corporate-frontend/dist/assets/img/rightChevronBlack.svg");
background-position: 100% 50%; }
.b-image-gallery__thumbnail-wrapper {
padding-right: 10px;
padding-left: 10px; }
@media (min-width: 768px) {
.b-image-gallery__thumbnail-wrapper {
margin-right: -25px;
margin-left: -25px;
padding-right: 0;
padding-left: 0; } }
.b-image-gallery__thumbnails {
margin-top: 15px; }
.b-image-gallery__thumbnails:hover, .b-image-gallery__thumbnails:focus {
cursor: pointer; }
.b-image-gallery__thumbnails-list {
height: 100%; }
.b-image-gallery__thumbnail-item {
padding-right: 4px;
padding-left: 4px;
height: 100%; }
.b-image-gallery__thumbnail {
position: relative;
background-color: black;
width: 100%;
height: 100%;
overflow: hidden; }
@media (min-width: 768px) {
.b-image-gallery__thumbnail {
height: 100px; } }
@media (min-width: 992px) {
.b-image-gallery__thumbnail {
height: 74.4px; } }
@media (min-width: 1200px) {
.b-image-gallery__thumbnail {
height: 90px; } }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
.b-nav-tabs {
position: relative;
list-style: none;
margin: 0;
padding: 0;
*zoom: 1; }
.b-nav-tabs:after {
content: "";
display: table;
clear: both; }
.b-nav-tabs__tab {
line-height: 1.5;
margin: 0;
padding: 0; }
.b-nav-tabs__tab--pull-right .b-nav-tabs__dropdown {
right: 0;
left: auto; }
.b-nav-tabs__tab-button {
color: black;
font-weight: bold; }
@media (min-width: 992px) {
.b-nav-tabs__tab-button {
font-size: 15.4px; } }
.b-nav-tabs__tab-button--active, .b-nav-tabs__tab-button:hover, .b-nav-tabs__tab-button:focus {
text-decoration: none;
color: #ce3d20; }
.b-nav-tabs__tab-button-hamburger-icon--desktop {
margin-left: 10px;
font-size: 13px; }
.b-nav-tabs__dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #f1f2f2; }
.b-nav-tabs__dropdown--panel {
padding: 50px 80px 40px 100px;
width: 100%; }
.b-nav-tabs__dropdown--menu {
border-top: 1px solid #d7dbde;
border-left: 1px solid black;
padding: 10px 0;
min-width: 250px; }
.b-nav-tabs__dropdown--open {
display: block; }
.b-nav-tabs--secondary .b-nav-tabs__tab-button {
display: block;
margin-right: 30px; }
.b-nav-tabs--secondary .b-nav-tabs__tab-button:hover, .b-nav-tabs--secondary .b-nav-tabs__tab-button:focus {
margin-top: -2px;
border-top: 2px solid #d8dbdd; }
.b-nav-tabs--secondary .b-nav-tabs__tab {
float: left;
padding-bottom: 10px; }
.b-nav-tabs--secondary .b-nav-tabs__tab--pull-right {
float: right; }
.b-nav-tabs--secondary .b-nav-tabs__tab--pull-right .b-nav-tabs__tab-button {
padding-right: 0;
padding-left: 30px; }
.b-nav-tabs--secondary .b-nav-tabs__tab--divider .b-nav-tabs__tab-button {
border-right: 1px solid #d7dbde; }
.b-nav-tabs--secondary .b-nav-tabs__tab--pull-right.b-nav-tabs__tab--divider:hover {
background-color: #bcbcbc; }
.b-nav-tabs--secondary .b-nav-tabs__tab--pull-right.b-nav-tabs__tab--divider .b-nav-tabs__tab-button {
border-right: none;
border-left: 1px solid #d7dbde; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
.b-nav-menu {
overflow: hidden;
list-style: none;
margin: 0;
padding: 0; }
.b-nav-menu__item-link {
display: block;
color: #000; }
.b-nav-menu__item-link:hover, .b-nav-menu__item-link:focus {
color: #ce3d20; }
.b-nav-menu--small .b-nav-menu__item-link {
padding: 20px;
font-weight: bold; }
.b-nav-menu--small .b-nav-menu__item-link:hover, .b-nav-menu--small .b-nav-menu__item-link:focus {
text-decoration: none; }
.b-nav-menu--large {
margin-right: -32px;
margin-left: -32px; }
.b-nav-menu--large .b-nav-menu__item-link {
display: block;
padding-right: 35px;
line-height: 115%;
font-weight: bold; }
.b-nav-menu--large .b-nav-menu__item-link:hover, .b-nav-menu--large .b-nav-menu__item-link:focus {
border-bottom: 1px solid #ce3d20;
padding-bottom: 8px;
text-decoration: none;
color: #ce3d20; }
.b-nav-menu--large .b-nav-menu__item {
margin: 0;
padding: 0;
position: relative;
float: left;
padding-right: 32px;
padding-left: 32px;
width: 33%;
height: 60px; }
.b-nav-menu--large .b-nav-menu__item:before {
position: absolute;
top: 0;
right: 32px;
width: 20px;
content: url('../bower_components/corporate-frontend/dist/assets/img/rightArrowRed.svg'); }
/*
Price
Price component
Markup: demo.price.html
Style guide: Components.Course search
*/
.b-price {
background-color: #f1f2f2; }
.b-price__panel--label {
border-bottom: 1px solid #ccc;
background-color: #d8dbdd;
padding: 5px 0;
font-family: "Apercu Mono", Courier, monospace;
font-size: 18px; }
.b-price__panel--figure {
background-color: #d8dbdd;
padding-bottom: 30px; }
.b-price__panel--pie-shape {
display: block;
position: absolute;
top: -20px;
right: 0;
left: 0;
margin: auto;
border-radius: 20px;
background-color: #f1f2f2;
width: 40px;
height: 40px; }
.b-price__panel--description {
position: relative; }
.b-price__label {
display: block; }
.b-price__figure {
font-size: 26px;
font-weight: bold; }
.b-price__figure--sign {
position: relative;
top: -9px;
left: -2px;
font-size: 15px; }
@media (min-width: 1200px) {
.b-price__figure {
font-size: 40px; }
.b-price__figure--sign {
top: -16px;
font-size: 20px; } }
.b-price__description {
font-size: 14px; }
@media (min-width: 768px) {
.b-page__content .b-price,
.bodyColumn .b-price {
display: table; }
.b-page__content .b-price__panel,
.bodyColumn .b-price__panel {
display: table-cell;
vertical-align: middle; }
.b-page__content .b-price__panel--label,
.bodyColumn .b-price__panel--label {
border-right: 1px solid #ccc;
border-bottom: 0; }
.b-page__content .b-price__panel--figure,
.bodyColumn .b-price__panel--figure {
padding-right: 30px;
padding-bottom: 10px;
width: 30%; }
.b-page__content .b-price__panel--pie-shape,
.bodyColumn .b-price__panel--pie-shape {
top: 0;
right: auto;
bottom: 0;
left: -20px; }
.b-page__content .b-price__label,
.bodyColumn .b-price__label {
transform: rotate(-90deg);
margin: 0 -32px;
width: 100px;
white-space: nowrap; } }
@media (min-width: 768px) {
.col-md-6 .b-price {
display: block; }
.col-md-6 .b-price__panel {
display: block; }
.col-md-6 .b-price__panel--label {
border-right: 0;
border-bottom: 1px solid #ccc; }
.col-md-6 .b-price__panel--figure {
padding: 0 0 30px 0;
width: 100%; }
.col-md-6 .b-price__panel--pie-shape {
top: -20px;
right: 0;
bottom: auto;
left: 0; }
.col-md-6 .b-price__label {
transform: rotate(0deg);
margin: auto; } }
/*
Podcast icon
.b-podcast-button--red - red podcast icon
.b-podcast-button--black - black podcast icon
Markup: demo.podcast-icon.html
Style guide: Blocks.Podcast icon
*/
.b-podcast-icon {
display: inline-block;
width: 35px;
height: 35px; }
.b-podcast-icon--red {
background: url("../bower_components/corporate-frontend/dist/assets/img/podcastred.png"); }
.b-podcast-icon--dark {
background: url("../bower_components/corporate-frontend/dist/assets/img/podcastblack.png"); }
/*
Podcast
Podcast component with audio player
Markup: demo.podcast.html
Style guide: Components.Podcast
*/
.b-podcast__cta-list {
margin: 0;
padding-left: 0; }
.b-podcast__cta-list-item {
display: inline-block;
margin-right: 8px; }
.b-podcast__cta {
font-size: 9px; }
.b-podcast__cta::after {
margin-left: 2px; }
.b-podcast__play-button {
float: left;
background: #363636;
padding-top: 2px;
padding-left: 4px;
width: 26px;
height: 25px;
text-decoration: none;
color: #e64626; }
.b-podcast__progress-bar {
position: relative;
margin-left: 28px;
background: #d8dbdd;
height: 25px; }
/*
Podcast item article
This component can be used in full width body column
Style guide: Layout.Podcast-article
*/
.b-podcast-article {
/*
* ----------------- Variables ( in this block scope ) --------
*/
/* ------------- mobile view (Default) --------
* Screen width 320px up
* Typical devices: Iphone 5 portrait, Iphone 6 portrait
*/ }
.b-podcast-article__column {
position: relative;
float: left;
padding-right: 10px;
padding-left: 10px; }
@media (min-width: 992px) {
.b-podcast-article__column--sidebar {
padding-left: 2.04327%;
width: 26.32212%; } }
@media (min-width: 992px) {
.b-podcast-article__column--content {
padding-right: 2.04327%;
width: 73.67788%; } }
.b-podcast-article__listen-tag {
display: block;
margin: 0; }
.b-podcast-article__listen-tag:hover {
cursor: pointer; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Social share
Social share module
Markup: demo.social-share.html
Style guide: Components.Social share
*/
/*
Social share (vertical)
Vertical social share module with print link
Markup: demo.social-share-vertical.html
Style guide: Components.Social share.vertical
*/
@media (min-width: 768px) {
.b-social-share--vertical {
margin-bottom: 40px;
padding-top: 28px;
width: 25px; }
.b-social-share--vertical .b-social-share__text {
display: block;
position: relative;
bottom: 50px;
width: 50px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
transform-origin: 0% 100%; }
.b-page__title-container .b-social-share--vertical {
position: absolute;
top: 14px;
right: 6px; }
.pageTemplate1 .b-social-share--page-top,
.pageTemplate2 .b-social-share--page-top,
.pageTemplate3 .b-social-share--page-top {
position: relative;
top: 0;
right: 0; } }
@media (min-width: 768px) and (min-width: 768px) {
.pageTemplate1 .b-social-share--page-top,
.pageTemplate2 .b-social-share--page-top,
.pageTemplate3 .b-social-share--page-top {
position: absolute;
top: 25px;
right: 6px; } }
.b-social-share__icon {
display: inline-block;
margin: 0 16px 12px 0; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Swiper Carousel
It is built with SwiperJs http://idangero.us/swiper@2.7.6 for IE 9 support
We can upgrade to 3.x.x version once we drop the IE 9 support.
API and configurations: https://github.com/nolimits4web/Swiper/blob/Swiper2/API.md
Demo is in content-page.html
Default it has autoplay and looping slides
Markup: demo.swiper-carousel.html
Style guide: Components.Swiper carousel
*/
.b-swiper-carousel {
position: relative; }
.b-swiper-carousel__container {
position: relative;
width: 100%;
height: 100%;
box-sizing: border-box; }
.b-swiper-carousel__wrapper {
padding-left: 0; }
.b-swiper-carousel__slide-wrapper {
height: 100%; }
.b-swiper-carousel__slide {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
box-sizing: border-box; }
.b-swiper-carousel__slide--thumb {
padding-right: 4px;
padding-left: 4px; }
.b-swiper-carousel__button {
position: absolute;
top: -10px;
bottom: 0;
width: 20px;
text-align: center;
font-size: 20px;
/*
Carousel (button next)
Markup: carousel-button-next.html
Style guide: Components.Carousel.Button next
*/
/*
Carousel (button prev)
Markup: carousel-button-prev.html
Style guide: Components.Carousel.Button prev
*/ }
.b-swiper-carousel__button--next {
right: -30px;
left: auto; }
.b-swiper-carousel__button--prev {
right: auto;
left: -30px; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Swiper image gallery
It displays 4 thumbnails for tablet and desktop view points,
3 thumbnails for mobile view point.
The demo page is article-page.html
Markup: demo.swiper-image-gallery.html
Style guide: Components.Swiper image gallery
*/
.b-swiper-image-gallery {
position: relative;
/*
Image gallery (Top slide)
Markup: top-slide.html
Style guide: Components.Image gallery.Top slide
*/
/*
Image gallery (Thumbnail)
Markup: carousel-slide.html
Style guide: Components.Image gallery.Thumbnail
*/ }
.b-swiper-image-gallery__title {
margin-top: 0;
font-size: 28px; }
.b-swiper-image-gallery__top-image {
border-bottom: 5px solid white;
box-shadow: 0 3px 0 black; }
.b-swiper-image-gallery__top-caption {
margin-bottom: 5px; }
.b-swiper-image-gallery__top-caption p {
margin-bottom: 0; }
.b-swiper-image-gallery--has-nav-buttons {
margin: auto;
width: 90%; }
.b-swiper-image-gallery--has-nav-buttons .b-swiper-image-gallery__button-next {
right: -6%; }
.b-swiper-image-gallery--has-nav-buttons .b-swiper-image-gallery__button-prev {
left: -6%; }
@media (min-width: 480px) {
.b-swiper-image-gallery--has-nav-buttons {
width: 90%; } }
.b-swiper-image-gallery--has-nav-buttons .b-swiper-image-gallery__thumb-slide {
width: 33%; }
@media (min-width: 768px) {
.b-swiper-image-gallery--has-nav-buttons .b-swiper-image-gallery__thumb-slide {
width: 25%; } }
/*
Strapline
Markup: demo.strapline.html
Style guide: Components.Strapline
*/
.b-strapline {
line-height: 30px;
font-family: "Antwerp", Georgia, serif;
font-size: 22px; }
/**
* Social feed
*
* Markup: demo.social-feed.html
*
* Style guide: Components.SocialFeed
*/
.b-social-feed__button {
display: inline-block;
padding: 0 10px;
text-decoration: none;
color: #363636;
font-size: 24px; }
.b-social-feed__button:hover, .b-social-feed__button:focus {
text-decoration: none;
color: #e64626; }
.b-social-feed__button--activated {
color: #e64626; }
.b-social-feed__arrow {
position: relative;
margin-bottom: -5px;
width: 24px; }
/*
Section navigation
Markup: demo.section-navigation.html
Style guide: Components.Section navigation
*/
@media (min-width: 768px) {
.b-section-navigation__column--right {
text-align: right; } }
/*
Student home page
The demo page is /demo/student-intranet/home-page.html
.b-student-home-page__main-content it is for b-page to set different content column width
and sidebar column width for different view point
The second part of the page body has different content width
and sidebar column width by comparing the default two column page
page template ui: https://sydneyuni.atlassian.net/wiki/display/SIN/SW3+Home+page+template
Style guide: Components.Student home page
*/
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
* This is for the student site style only
*/
.b-student-site__title {
transition: font 200ms ease;
margin-left: 20px; }
.stuck .b-student-site__title {
font-size: 20px; }
@media (min-width: 992px) {
.b-student-site__title {
margin-left: 0; } }
.b-student-site__anchor--all-login-list {
display: block;
position: relative;
top: -20px;
visibility: hidden;
line-height: 1;
font-size: 1px; }
@media (min-width: 768px) {
.b-student-site__anchor--all-login-list {
top: -200px; } }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
General search box
It can be used for different sides, currently it is for external search form component
and the student website search box.
Markup: demo.search-box.html
Style guide: Components.Search box
*/
.b-search-box {
/*
* Variables
*/
padding: 0;
/* ------------- Mobile view (Default) --------
* Screen width 320px up
* Typical devices: Iphone 5 portrait, Iphone 6 portrait
*/
/*
* --------------- Responsive views ----------------
*/
/*
* Screen width 480px up
* Typical devices: Iphone 5s landscape, Iphone 6 landscape, Galaxy S3
*/
/*
* Screen width 768px up
* Typical devices: Ipad portrait, Ipad mini portrait
*/ }
.b-search-box.b-form--dark {
padding: 25px; }
@media (min-width: 480px) {
.b-search-box__wrapper {
display: table; }
.b-search-box__input-group, .b-search-box__button-group {
display: table-cell;
width: 100%;
vertical-align: top; }
.b-search-box__button-group {
padding-left: 20px; } }
@media (min-width: 768px) {
.b-page__menu .b-search-box .b-search-box__wrapper,
.b-page__menu .b-search-box .b-search-box__input-group,
.b-page__menu .b-search-box .b-search-box__button-group,
.b-page__sidebar .b-search-box .b-search-box__wrapper,
.b-page__sidebar .b-search-box .b-search-box__input-group,
.b-page__sidebar .b-search-box .b-search-box__button-group,
.col-md-6 .b-search-box .b-search-box__wrapper,
.col-md-6 .b-search-box .b-search-box__input-group,
.col-md-6 .b-search-box .b-search-box__button-group,
.rightSidebarColumn .b-search-box .b-search-box__wrapper,
.rightSidebarColumn .b-search-box .b-search-box__input-group,
.rightSidebarColumn .b-search-box .b-search-box__button-group,
.leftSidebarColumn .b-search-box .b-search-box__wrapper,
.leftSidebarColumn .b-search-box .b-search-box__input-group,
.leftSidebarColumn .b-search-box .b-search-box__button-group {
display: block; }
.b-page__menu .b-search-box .b-search-box__button-group,
.b-page__sidebar .b-search-box .b-search-box__button-group,
.col-md-6 .b-search-box .b-search-box__button-group,
.rightSidebarColumn .b-search-box .b-search-box__button-group,
.leftSidebarColumn .b-search-box .b-search-box__button-group {
padding-left: 0; } }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/**
* Search button
*
* Corporate site standard search button
*
* Markup: demo.search-button.html
*
* Style guide: Components.Search button
*/
.b-search-button {
width: 175px;
height: 55px;
overflow: visible;
vertical-align: middle;
white-space: nowrap;
color: black;
box-sizing: border-box;
touch-action: manipulation;
-webkit-appearance: button; }
.b-search-button--primary {
background-color: #e64626; }
.b-search-button__text {
font-family: "Apercu", Helvetica, sans-serif;
font-size: 30px; }
.b-search-button__icon {
font-size: 28px; }
.b-search-button:hover .b-search-button__text, .b-search-button:focus .b-search-button__text {
position: relative; }
.b-search-button:hover .b-search-button__text:after, .b-search-button:focus .b-search-button__text:after {
position: absolute;
right: 0;
bottom: 4px;
left: 0;
background-color: black;
width: 100%;
height: 2px;
content: ""; }
/*
Table of contents
Section content page table of contents component
Markup: demo.table-of-contents.html
Style guide: Components.Table of contents
*/
.b-table-of-contents__holder {
margin: 0;
padding-left: 20px; }
.b-table-of-contents__holder--fallback {
padding-left: 10px; }
.b-table-of-contents__column {
margin: 0;
padding: 0 20px 0 0; }
/*
Text image
.b-text-image__image--small - small image
.b-text-image__image--medium - medium image
.b-text-image__image--large - large image
.b-text-image__image--full-width - 100% width image
.b-text-image__image--left - image floats on left side
.b-text-image__image--right - image floats on right side
.b-text-image__image--centre - image positions in the centre
Markup: demo.text-image.html
Style guide: Components.Text-image
*/
.b-text-image__image-container {
width: 100%; }
.b-text-image__image-text {
font-size: 14px; }
.b-text-image__image {
margin: auto;
padding: 0;
width: 100%; }
@media (min-width: 768px) {
.b-text-image__image--small {
width: 30%; } }
@media (min-width: 768px) {
.b-text-image__image--medium {
width: 52%; } }
@media (min-width: 768px) {
.b-text-image__image--large {
width: 70%; } }
@media (min-width: 768px) {
.b-text-image__image--full-width {
width: 100%; } }
@media (min-width: 1200px) {
.b-text-image__image--full-width {
padding-right: 0;
padding-left: 0; } }
@media (min-width: 768px) {
.b-text-image__image--left {
float: left;
padding: 0 14px 14px 0; } }
@media (min-width: 1200px) {
.b-text-image__image--left {
float: left;
padding: 0 30px 14px 0; } }
.b-text-image__image--centre {
float: none; }
@media (min-width: 768px) {
.b-text-image__image--right {
float: right;
padding: 0 0 14px 14px; } }
@media (min-width: 1200px) {
.b-text-image__image--right {
float: right;
padding: 0 0 14px 30px; } }
.b-text-image__text-container h2:first-child {
margin-top: 20px; }
.b-text-image__text-container--large-text p {
font-size: 18px; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Video
Single video component
Markup: demo.video.html
Style guide: Components.Video
*/
.b-video {
position: relative; }
.b-video__wrapper {
position: relative; }
.b-video__share {
top: 13px;
padding-top: 10px; }
.b-video__heading {
margin: 24px 0 10px;
font-weight: 300; }
.b-video__icon--triangle-top {
display: block;
margin-bottom: 13px;
font-size: 9px; }
.b-video__placeholder {
width: 100%;
padding-bottom: 56.25%;
padding-top: 0;
height: 0;
display: block; }
/*
News list item
News list item component
Markup: demo.news-list-item.html
Style guide: Components.News list item
*/
/*
News list item (feature)
News list item feature component with image
Markup: demo.news-list-item-feature.html
Style guide: Components.News list item.feature
*/
.b-news-list-item {
display: block;
color: black; }
.b-news-list-item:hover {
background-color: #f1f2f2;
color: black; }
/**
* News & opinion navigation
*
* Markup: demo.news-navigation.html
*
* Style guide: Components.news navigation
*
*/
.b-news-navigation__primary-nav .b-news-navigation__secondary-nav {
position: relative;
z-index: 400; }
/*
Course search
Course search component displays a form to search for courses by name, plus a link menu to explore courses
Markup: demo.course-search.html
Style guide: Components.Course search
*/
.b-course-search {
display: flex;
flex-wrap: wrap;
align-items: stretch;
margin: 7px 0 11px; }
.b-course-search__search, .b-course-search__explore {
width: 100%; }
@media (min-width: 768px) {
.b-course-search__search, .b-course-search__explore {
display: table-cell;
width: 49.9%;
vertical-align: top; } }
.b-course-search__search {
padding: 10px 0 0; }
@media (min-width: 768px) {
.b-course-search__search {
padding: 0 20px 0 0; } }
@media (min-width: 992px) {
.b-course-search__search {
padding: 0 40px 0 0; } }
.b-course-search__search .b-text-input {
color: white; }
.b-course-search__explore {
padding: 35px 0 0; }
@media (min-width: 768px) {
.b-course-search__explore {
border-top: none;
border-left: 1px solid #f1f2f2;
padding: 0 0 0 20px; } }
@media (min-width: 992px) {
.b-course-search__explore {
padding: 0 0 0 40px; } }
.b-course-search .b-text-input,
.b-course-search .b-link-menu {
width: 100%; }
.b-course-search__search-button {
margin: 0 0 20px;
width: 100%;
text-align: left; }
.b-course-search__search-button .b-icon {
margin-left: 16px; }
.b-course-search__search-button:last-child {
margin-right: 0;
margin-bottom: 0; }
@media (min-width: 768px) {
.b-course-search__search-button {
margin: 0 20px 0 0;
width: auto; } }
@media (min-width: 992px) {
.b-course-search__search-button {
width: 170px; } }
@media (min-width: 768px) {
.b-course-search__search-form-control {
margin-bottom: 20px; }
.b-course-search__search-form-control__no-margin {
margin-bottom: 0; } }
.b-course-search__explore-button {
border: none;
padding-right: 18px;
padding-left: 18px;
width: 100%;
text-align: left;
word-spacing: -2px;
letter-spacing: -1px; }
@media (min-width: 992px) {
.b-course-search__explore-button {
letter-spacing: 0; } }
/*
Menu grid
Displays the menu of a link-menu in a grid layout
*/
.b-menu-grid__menu {
margin: 0;
padding: 0;
width: auto;
list-style-type: none; }
.b-menu-grid__item {
padding: 0; }
@media (min-width: 768px) {
.b-menu-grid__menu {
display: flex;
right: 1px;
flex-wrap: wrap;
align-items: stretch;
margin: 0;
border-top: 1px solid #d7dbde;
border-left: 1px solid #d7dbde;
padding: 0;
width: auto;
min-width: 300px;
text-align: center;
list-style-type: none;
box-sizing: content-box; }
.b-menu-grid__item {
display: flex;
flex-wrap: wrap;
align-items: stretch;
min-height: 100px; }
.b-menu-grid__item-link {
border-top: none;
border-left: none;
padding: 12px 18px; } }
/*
Predictive input
Predictive input component, uses typeahead.js jQuery plugin - http://twitter.github.io/typeahead.js/
Markup: demo.predictive-input.html
Style guide: Components.Predictive input
*/
.b-predictive-input__wrapper {
display: block !important; }
.b-predictive-input__menu {
margin: 0 -2px;
border: 2px solid black;
background: #fff;
width: 100%;
box-sizing: content-box; }
.b-predictive-input__suggestion {
border-bottom: 1px solid black;
cursor: pointer;
padding: 10px 20px;
font-family: "Apercu Mono", Courier, monospace;
font-size: 14px; }
.b-predictive-input__suggestion:last-child {
border-bottom: none; }
.b-predictive-input__suggestion:hover {
background-color: #e64626;
color: white; }
.b-predictive-input__cursor {
background-color: #e64626;
color: white; }
/*
Unlearn site page
Unlearn site special styles
Style guide: Components.Unlearn site
*/
.b-unlearn-page--article .b-unlearn-page__title {
padding-left: 8px; }
/*
Component block
Applies vertical spacing between components.
.b-component--loose - Increased spacing
.b-component--tight - Reduced spacing
.b-component--tighter - 15px margin bottom space
.b-component--tightest - No spacing
.b-component--tiny - 5px margin bottom space
.b-component--double - double module spacing
.b-component--page-title-top - margin top space for component under the page title
.b-component--hidden - hide the component
Markup:
My component
Next component
Style guide: Layout.Component
*/
.b-component {
margin-bottom: 40px; }
.b-component--loose {
margin-bottom: 60px; }
.b-component--tight {
margin-bottom: 20px; }
.b-component--tighter {
margin-bottom: 15px; }
.b-component--tightest {
margin-bottom: 0; }
.b-component--md-tighter {
margin-bottom: 10px; }
.b-component--tiny {
margin-bottom: 5px; }
.b-component--double {
margin-bottom: 80px; }
.b-component--page-title-gap {
margin-top: 12px; }
.b-component--hidden {
display: none;
opacity: 0; }
/*
Equal height layout
Generic container to display child elements with equal height
.b-equal-height__container - parent to determine children height
Markup:
My component
My component
My component
My component
My component
My component
My component
Style guide: Layout.Equal height
*/
.b-equal-height__container {
display: flex;
flex-wrap: wrap;
align-items: stretch; }
/*! Avalanche | MIT License | @colourgarden */
/*------------------------------------* SETTINGS
\*------------------------------------*/
/*------------------------------------* LOGIC aka THE MAGIC
\*------------------------------------*/
/*------------------------------------* GRID LAYOUT
\*------------------------------------*/
.grid {
display: block;
list-style: none;
padding: 0;
margin: 0;
margin-left: -20px;
font-size: 0rem; }
.grid__cell {
box-sizing: border-box;
display: inline-block;
width: 100%;
padding: 0;
padding-left: 20px;
margin: 0;
vertical-align: top;
font-size: 14px; }
.grid--center {
text-align: center; }
.grid--center > .grid__cell {
text-align: left; }
.grid__cell--center {
display: block;
margin: 0 auto; }
.grid--right {
text-align: right; }
.grid--right > .grid__cell {
text-align: left; }
.grid--middle > .grid__cell {
vertical-align: middle; }
.grid--flush {
margin-left: 0; }
.grid--flush > .grid__cell {
padding-left: 0; }
/*------------------------------------* GRID WIDTHS
\*------------------------------------*/
.\31\/2, .\32\/4, .\33\/6, .\36\/12 {
width: 50%; }
.\31\/3, .\32\/6, .\34\/12 {
width: 33.33333%; }
.\32\/3, .\34\/6, .\38\/12 {
width: 66.66667%; }
.\31\/4, .\33\/12 {
width: 25%; }
.\33\/4, .\39\/12 {
width: 75%; }
.\31\/5 {
width: 20%; }
.\32\/5 {
width: 40%; }
.\33\/5 {
width: 60%; }
.\34\/5 {
width: 80%; }
.\31\/6, .\32\/12 {
width: 16.66667%; }
.\35\/6, .\31\30\/12 {
width: 83.33333%; }
.\31\/12 {
width: 8.33333%; }
.\35\/12 {
width: 41.66667%; }
.\37\/12 {
width: 58.33333%; }
.\31\31\/12 {
width: 91.66667%; }
@media screen and (max-width: 479px) {
.\31\/2--mobile-down, .\32\/4--mobile-down, .\33\/6--mobile-down, .\36\/12--mobile-down {
width: 50%; }
.\31\/3--mobile-down, .\32\/6--mobile-down, .\34\/12--mobile-down {
width: 33.33333%; }
.\32\/3--mobile-down, .\34\/6--mobile-down, .\38\/12--mobile-down {
width: 66.66667%; }
.\31\/4--mobile-down, .\33\/12--mobile-down {
width: 25%; }
.\33\/4--mobile-down, .\39\/12--mobile-down {
width: 75%; }
.\31\/5--mobile-down {
width: 20%; }
.\32\/5--mobile-down {
width: 40%; }
.\33\/5--mobile-down {
width: 60%; }
.\34\/5--mobile-down {
width: 80%; }
.\31\/6--mobile-down, .\32\/12--mobile-down {
width: 16.66667%; }
.\35\/6--mobile-down, .\31\30\/12--mobile-down {
width: 83.33333%; }
.\31\/12--mobile-down {
width: 8.33333%; }
.\35\/12--mobile-down {
width: 41.66667%; }
.\37\/12--mobile-down {
width: 58.33333%; }
.\31\31\/12--mobile-down {
width: 91.66667%; } }
@media screen and (min-width: 480px) {
.\31\/2--mobile-up, .\32\/4--mobile-up, .\33\/6--mobile-up, .\36\/12--mobile-up {
width: 50%; }
.\31\/3--mobile-up, .\32\/6--mobile-up, .\34\/12--mobile-up {
width: 33.33333%; }
.\32\/3--mobile-up, .\34\/6--mobile-up, .\38\/12--mobile-up {
width: 66.66667%; }
.\31\/4--mobile-up, .\33\/12--mobile-up {
width: 25%; }
.\33\/4--mobile-up, .\39\/12--mobile-up {
width: 75%; }
.\31\/5--mobile-up {
width: 20%; }
.\32\/5--mobile-up {
width: 40%; }
.\33\/5--mobile-up {
width: 60%; }
.\34\/5--mobile-up {
width: 80%; }
.\31\/6--mobile-up, .\32\/12--mobile-up {
width: 16.66667%; }
.\35\/6--mobile-up, .\31\30\/12--mobile-up {
width: 83.33333%; }
.\31\/12--mobile-up {
width: 8.33333%; }
.\35\/12--mobile-up {
width: 41.66667%; }
.\37\/12--mobile-up {
width: 58.33333%; }
.\31\31\/12--mobile-up {
width: 91.66667%; } }
@media screen and (max-width: 991px) {
.\31\/2--tablet-down, .\32\/4--tablet-down, .\33\/6--tablet-down, .\36\/12--tablet-down {
width: 50%; }
.\31\/3--tablet-down, .\32\/6--tablet-down, .\34\/12--tablet-down {
width: 33.33333%; }
.\32\/3--tablet-down, .\34\/6--tablet-down, .\38\/12--tablet-down {
width: 66.66667%; }
.\31\/4--tablet-down, .\33\/12--tablet-down {
width: 25%; }
.\33\/4--tablet-down, .\39\/12--tablet-down {
width: 75%; }
.\31\/5--tablet-down {
width: 20%; }
.\32\/5--tablet-down {
width: 40%; }
.\33\/5--tablet-down {
width: 60%; }
.\34\/5--tablet-down {
width: 80%; }
.\31\/6--tablet-down, .\32\/12--tablet-down {
width: 16.66667%; }
.\35\/6--tablet-down, .\31\30\/12--tablet-down {
width: 83.33333%; }
.\31\/12--tablet-down {
width: 8.33333%; }
.\35\/12--tablet-down {
width: 41.66667%; }
.\37\/12--tablet-down {
width: 58.33333%; }
.\31\31\/12--tablet-down {
width: 91.66667%; } }
@media screen and (min-width: 768px) {
.\31\/2--tablet-up, .\32\/4--tablet-up, .\33\/6--tablet-up, .\36\/12--tablet-up {
width: 50%; }
.\31\/3--tablet-up, .\32\/6--tablet-up, .\34\/12--tablet-up {
width: 33.33333%; }
.\32\/3--tablet-up, .\34\/6--tablet-up, .\38\/12--tablet-up {
width: 66.66667%; }
.\31\/4--tablet-up, .\33\/12--tablet-up {
width: 25%; }
.\33\/4--tablet-up, .\39\/12--tablet-up {
width: 75%; }
.\31\/5--tablet-up {
width: 20%; }
.\32\/5--tablet-up {
width: 40%; }
.\33\/5--tablet-up {
width: 60%; }
.\34\/5--tablet-up {
width: 80%; }
.\31\/6--tablet-up, .\32\/12--tablet-up {
width: 16.66667%; }
.\35\/6--tablet-up, .\31\30\/12--tablet-up {
width: 83.33333%; }
.\31\/12--tablet-up {
width: 8.33333%; }
.\35\/12--tablet-up {
width: 41.66667%; }
.\37\/12--tablet-up {
width: 58.33333%; }
.\31\31\/12--tablet-up {
width: 91.66667%; } }
@media screen and (min-width: 992px) {
.\31\/2--sm-desk-up, .\32\/4--sm-desk-up, .\33\/6--sm-desk-up, .\36\/12--sm-desk-up {
width: 50%; }
.\31\/3--sm-desk-up, .\32\/6--sm-desk-up, .\34\/12--sm-desk-up {
width: 33.33333%; }
.\32\/3--sm-desk-up, .\34\/6--sm-desk-up, .\38\/12--sm-desk-up {
width: 66.66667%; }
.\31\/4--sm-desk-up, .\33\/12--sm-desk-up {
width: 25%; }
.\33\/4--sm-desk-up, .\39\/12--sm-desk-up {
width: 75%; }
.\31\/5--sm-desk-up {
width: 20%; }
.\32\/5--sm-desk-up {
width: 40%; }
.\33\/5--sm-desk-up {
width: 60%; }
.\34\/5--sm-desk-up {
width: 80%; }
.\31\/6--sm-desk-up, .\32\/12--sm-desk-up {
width: 16.66667%; }
.\35\/6--sm-desk-up, .\31\30\/12--sm-desk-up {
width: 83.33333%; }
.\31\/12--sm-desk-up {
width: 8.33333%; }
.\35\/12--sm-desk-up {
width: 41.66667%; }
.\37\/12--sm-desk-up {
width: 58.33333%; }
.\31\31\/12--sm-desk-up {
width: 91.66667%; } }
@media screen and (max-width: 1199px) {
.\31\/2--sm-desk-down, .\32\/4--sm-desk-down, .\33\/6--sm-desk-down, .\36\/12--sm-desk-down {
width: 50%; }
.\31\/3--sm-desk-down, .\32\/6--sm-desk-down, .\34\/12--sm-desk-down {
width: 33.33333%; }
.\32\/3--sm-desk-down, .\34\/6--sm-desk-down, .\38\/12--sm-desk-down {
width: 66.66667%; }
.\31\/4--sm-desk-down, .\33\/12--sm-desk-down {
width: 25%; }
.\33\/4--sm-desk-down, .\39\/12--sm-desk-down {
width: 75%; }
.\31\/5--sm-desk-down {
width: 20%; }
.\32\/5--sm-desk-down {
width: 40%; }
.\33\/5--sm-desk-down {
width: 60%; }
.\34\/5--sm-desk-down {
width: 80%; }
.\31\/6--sm-desk-down, .\32\/12--sm-desk-down {
width: 16.66667%; }
.\35\/6--sm-desk-down, .\31\30\/12--sm-desk-down {
width: 83.33333%; }
.\31\/12--sm-desk-down {
width: 8.33333%; }
.\35\/12--sm-desk-down {
width: 41.66667%; }
.\37\/12--sm-desk-down {
width: 58.33333%; }
.\31\31\/12--sm-desk-down {
width: 91.66667%; } }
@media screen and (min-width: 1200px) {
.\31\/2--lg-desk-up, .\32\/4--lg-desk-up, .\33\/6--lg-desk-up, .\36\/12--lg-desk-up {
width: 50%; }
.\31\/3--lg-desk-up, .\32\/6--lg-desk-up, .\34\/12--lg-desk-up {
width: 33.33333%; }
.\32\/3--lg-desk-up, .\34\/6--lg-desk-up, .\38\/12--lg-desk-up {
width: 66.66667%; }
.\31\/4--lg-desk-up, .\33\/12--lg-desk-up {
width: 25%; }
.\33\/4--lg-desk-up, .\39\/12--lg-desk-up {
width: 75%; }
.\31\/5--lg-desk-up {
width: 20%; }
.\32\/5--lg-desk-up {
width: 40%; }
.\33\/5--lg-desk-up {
width: 60%; }
.\34\/5--lg-desk-up {
width: 80%; }
.\31\/6--lg-desk-up, .\32\/12--lg-desk-up {
width: 16.66667%; }
.\35\/6--lg-desk-up, .\31\30\/12--lg-desk-up {
width: 83.33333%; }
.\31\/12--lg-desk-up {
width: 8.33333%; }
.\35\/12--lg-desk-up {
width: 41.66667%; }
.\37\/12--lg-desk-up {
width: 58.33333%; }
.\31\31\/12--lg-desk-up {
width: 91.66667%; } }
/*
Grid page
BEM grid page, which is for the special styles.
Style guide: Layout.Grid page
*/
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Mask
Utility/layout mask that allows an object to have a mask on it and the animatio show and hide the mask.
.b-mask__mask--transparent - Sets transparent to the mask object layer
.b-mask__mask--red - Sets red color to the mask
.b-mask__mask--transition-top-down - Shows the mask from top to down
.b-mask__mask--transition-left-right - Shows the mask from left to right
Markup: demo.mask.html
Style guide: Layout.Mask
*/
.b-mask__container {
display: block;
position: relative; }
.b-mask__container:hover .b-mask__mask--transition-top-down, .b-mask__container:focus .b-mask__mask--transition-top-down {
z-index: 1;
height: 100%; }
.b-mask__container:hover .b-mask__mask--transition-left-right, .b-mask__container:focus .b-mask__mask--transition-left-right {
z-index: 1;
width: 100%; }
.b-mask__mask {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden; }
.b-mask__mask--transparent {
opacity: .25; }
.b-mask__mask--red {
background-color: #e64626; }
.b-mask__mask--transition-top-down {
transition: height 150ms;
width: 100%;
height: 0; }
.b-mask__mask--transition-left-right {
transition: width 150ms;
width: 0;
height: 100%; }
/*
Calculating the desired width of a container whist keeping the ratio of width to height fixed. Useful for
calculating the size of containers designed to display images, with the image specified as a background.
This function has two modes:
1. Absolute mode ($baseWidth is specified in px, ems, rems) will calculate the correct height given the width and ratio specified and set fixed values
2. Relative mode ($baseWidth is a percentage) causes the container to scale the height in ratio when the width changes
*/
/**
* Add a glphyicon to anything!
*/
/*
* Give elements a nice browser focus appearance (ripped from BS)
*/
/*
* Reset styles where ul and li elements are being used for semantic meaning, not display. Use sparingly, for compatibility
* only and take note that this can unintentionally affect nested lists.
*/
/*
Overlay
Utility/layout block that allows a foreground object to be placed on top of a background object. It is not
opinionated about margins/padding, sizes, colours etc and it expects these to be set by another block.
.b-overlay__foreground--pull-left - Forces the overlay to display to the left side
.b-overlay__foreground--pull-right - Forces the overlay to display to the right side
Markup: demo.overlay.html
Style guide: Layout.Overlay
*/
.b-overlay {
position: relative; }
.b-overlay__background {
position: relative; }
.b-overlay__background:hover .b-overlay__red-filter {
z-index: 1;
height: 100%; }
.b-overlay__foreground {
position: absolute;
top: 0; }
.b-overlay__foreground--pull-left {
right: auto;
left: 0; }
.b-overlay__foreground--pull-right {
right: 0;
left: auto; }
.b-overlay__foreground.b-alumni-donation-form {
position: relative; }
@media (min-width: 768px) {
.b-overlay__foreground.b-alumni-donation-form {
position: absolute; } }
/*
Position block
Generic positioning of container blocks and child elements.
.b-position__container - parent positioned relatively
Markup:
My component
Style guide: Layout.Position
*/
.b-position__container {
position: relative;
/**
Position (Vertical)
Vertical position control. By default content is sitting in the middle of the container.
Style guide: Blocks.Position.vertical
*/ }
.b-position__container--vertical {
display: table;
width: 100%;
height: 100%; }
.b-position__container--vertical .b-position__content {
display: table-cell;
vertical-align: middle; }
.b-position__content--top {
vertical-align: top; }
.b-position__content--bottom {
vertical-align: bottom; }
.b-position--top-level {
position: relative;
z-index: 9999; }
.b-position__child {
position: absolute; }
.b-position__child--top {
top: 0; }
.b-position__child--right {
right: 0; }
.b-position__child--bottom {
bottom: 0; }
.b-position__child--outside-bottom {
top: auto;
bottom: -1em; }
.b-position__child--left {
left: 0; }
.b-position__child--centre {
left: 50%; }
/*
Page
Corporate website page layout
.b-page--three-col - Three column page layout (content with menu and sidebar)
.b-page--two-col - Two column page layout (content with sidebar)
.b-page__column should be used with "row" selector together to keep the column without extra padding on both side of the row container.
For example:
"column1" and "column2" have padding space in between, but they need the "row" as a wrapper to remove the padding space on side, so the whole "container" doesn't have extra padding space on "container" left and "container" right.
.b-page__row--tight-bleed - use to make the row has extra 20px on left and right
.b-page__title-container - use to control the position of the socialshare and title module.
You don't need to use the title container if the title container doesn't habve share button. The second part of the student home page has different column width with the default two column page
Markup: demo.page.html
Style guide: Layout.Page
*/
.b-page {
width: 100%; }
.b-page__column {
position: relative;
float: left;
padding-right: 10px;
padding-left: 10px;
width: 100%;
min-height: 1px; }
.b-page__row--tight-bleed {
margin-right: -20px;
margin-left: -20px; }
@media (min-width: 768px) {
.b-page__sidebar {
padding-top: 10px; } }
.b-page__title-container {
min-height: 135px; }
@media (min-width: 768px) {
.b-page__title-container {
position: relative; }
.b-page__title-container .pageTitleModule {
float: left;
width: 95%; }
.b-page__title-container .socialShareModule {
position: absolute;
top: 60px;
right: 6px; } }
.b-page--three-col__menu {
display: none; }
@media (min-width: 992px) {
.b-page--three-col__menu {
display: block;
padding-right: 2.08333333%;
width: 19.5833333%; } }
@media (min-width: 768px) {
.b-page--three-col__sidebar {
padding-left: 2.63157894%;
width: 33.15789474%; } }
@media (min-width: 992px) {
.b-page--three-col__sidebar {
padding-left: 2.63157894%;
width: 26.3728%; } }
@media (min-width: 768px) {
.b-page--three-col__content {
padding-right: 2.63157894%;
width: 66%; } }
@media (min-width: 992px) {
.b-page--three-col__content {
display: block;
padding-right: 2.08333333%;
width: 52.4933%; } }
@media (min-width: 768px) {
.b-page--two-col__sidebar {
padding-left: 2.63157894%;
width: 33.15789474%; } }
@media (min-width: 992px) {
.b-page--two-col__sidebar {
padding-left: 2.04327%;
width: 26.322115385%; } }
@media (min-width: 768px) {
.b-page--two-col__content {
padding-right: 2.63157894%;
width: 66%; }
.b-page--two-col__content.b-student-home-page__main-content {
padding-right: 0;
width: 100%; } }
@media (min-width: 992px) {
.b-page--two-col__content {
padding-right: 2.04327%;
width: 73.677884615%; }
.b-page--two-col__content.b-student-home-page__main-content {
padding-right: 2.04327%;
width: 73.677884615%; } }
@media (min-width: 992px) {
.b-page--menu-n-content__menu {
padding-right: 2.63157894%;
width: 33.15789474%; } }
@media (min-width: 1200px) {
.b-page--menu-n-content__menu {
padding-right: 2.04327%;
width: 26.322115385%; } }
@media (min-width: 992px) {
.b-page--menu-n-content__content {
padding-left: 2.63157894%;
width: 66%; } }
@media (min-width: 1200px) {
.b-page--menu-n-content__content {
padding-left: 2.04327%;
width: 73.677884615%; } }
/*
Pull left
Pull elements to the left at certain breakpoints
.b-pull-left--sm - Pulls element to the left for tablet and desktop
.b-pull-left--md - Pulls element to the left only on desktop
.b-pull-left--fixed - Pulls element to the left for all view screens
Markup:
Style guide: Layout.Pull left
*/
@media (min-width: 768px) {
.b-pull-left--sm {
float: left; } }
@media (min-width: 992px) {
.b-pull-left--md {
float: left; } }
.b-pull-left--fixed {
float: left; }
/*
Pull right
Pull elements to the right at certain breakpoints
.b-pull-right--sm - Pulls element to the right for tablet and desktop
.b-pull-right--md - Pulls element to the right only on desktop
.b-pull-right--fixed - Pulls element to the right for all view screens
Markup:
Style guide: Layout.Pull right
*/
@media (min-width: 768px) {
.b-pull-right--sm {
float: right; } }
@media (min-width: 992px) {
.b-pull-right--md {
float: right; } }
.b-pull-right--fixed {
float: right; }
/**
*
* Style guide: Layout.Section
*/
.b-section__container {
margin: auto;
max-width: 1020px; }
/*
* News single column page
*
* It is for the news podcast list page and subscriber page
*
* Style guide: Layouts.News single column page
*
*/
.b-news-single-column-page__title-container {
padding-right: 10px;
padding-left: 10px; }
.b-news-single-column-page__title-container .socialShareModule {
top: 40px; }
@media (min-width: 992px) {
.b-news-single-column-page__title-container {
padding-right: 2.04327%;
width: 73.67788%; } }
@media (min-width: 768px) {
.b-news-single-column-page__column--sidebar {
padding-left: 0;
width: 100%; } }
@media (min-width: 992px) {
.b-news-single-column-page__column--sidebar {
padding-left: 2.04327%;
width: 26.32212%; } }
@media (min-width: 768px) {
.b-news-single-column-page__column--content {
padding-right: 0;
width: 100%; } }
@media (min-width: 992px) {
.b-news-single-column-page__column--content {
padding-right: 2.04327%;
width: 73.67788%; } }