@charset "UTF-8"; /** * Base Framework: * `zurb foundation` - The ACC App Mobile Framework is based off of a reduced build of zurb foundation all of the grid, columns, base typography, and form elements can be used from zurb. All functions can be turned back on, but to reduce build size many of the design features have been disabled. * * @example * Go to Zurb Foundation Documentation */ @font-face { font-family: Open Sans; font-style: normal; font-weight: 300; src: url("../fonts/opensans_300/OpenSans-Light-webfont.eot"); src: url("../fonts/opensans_300/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/opensans_300/OpenSans-Light-webfont.woff") format("woff"), url("../fonts/opensans_300/OpenSans-Light-webfont.ttf") format("truetype"), url("../fonts/opensans_300/OpenSans-Light-webfont.svg#open_sanslight") format("svg"); } @font-face { font-family: Open Sans; font-style: italic; font-weight: 300; src: url("../fonts/opensans_300-italic/OpenSans-LightItalic-webfont.eot"); src: url("../fonts/opensans_300-italic/OpenSans-LightItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/opensans_300-italic/OpenSans-LightItalic-webfont.woff") format("woff"), url("../fonts/opensans_300-italic/OpenSans-LightItalic-webfont.ttf") format("truetype"), url("../fonts/opensans_300-italic/OpenSans-LightItalic-webfont.svg#open_sanslight") format("svg"); } @font-face { font-family: Open Sans; font-style: normal; font-weight: 400; src: url("../fonts/opensans_400/OpenSans-Regular-webfont.eot"); src: url("../fonts/opensans_400/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/opensans_400/OpenSans-Regular-webfont.woff") format("woff"), url("../fonts/opensans_400/OpenSans-Regular-webfont.ttf") format("truetype"), url("../fonts/opensans_400/OpenSans-Regular-webfont.svg#open_sanslight") format("svg"); } @font-face { font-family: Open Sans; font-style: normal; font-weight: 700; src: url("../fonts/opensans_700/OpenSans-Bold-webfont.eot"); src: url("../fonts/opensans_700/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/opensans_700/OpenSans-Bold-webfont.woff") format("woff"), url("../fonts/opensans_700/OpenSans-Bold-webfont.ttf") format("truetype"), url("../fonts/opensans_700/OpenSans-Bold-webfont.svg#open_sanslight") format("svg"); } @font-face { font-family: Open Sans; font-style: italic; font-weight: 700; src: url("../fonts/opensans_700-italic/OpenSans-BoldItalic-webfont.eot"); src: url("../fonts/opensans_700-italic/OpenSans-BoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/opensans_700-italic/OpenSans-BoldItalic-webfont.woff") format("woff"), url("../fonts/opensans_700-italic/OpenSans-BoldItalic-webfont.ttf") format("truetype"), url("../fonts/opensans_700-italic/OpenSans-BoldItalic-webfont.svg#open_sanslight") format("svg"); } @font-face { font-family: Roboto Slab; font-style: normal; font-weight: 400; src: url("../fonts/robotoslab_300/RobotoSlab-Regular-webfont.eot"); src: url("../fonts/robotoslab_300/RobotoSlab-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/robotoslab_300/RobotoSlab-Regular-webfont.woff") format("woff"), url("../fonts/robotoslab_300/RobotoSlab-Regular-webfont.ttf") format("truetype"), url("../fonts/robotoslab_300/RobotoSlab-Regular-webfont.svg#open_sanslight") format("svg"); } @font-face { font-family: Roboto Slab; font-style: normal; font-weight: 700; src: url("../fonts/robotoslab_700/RobotoSlab-Bold-webfont.eot"); src: url("../fonts/robotoslab_700/RobotoSlab-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/robotoslab_700/RobotoSlab-Bold-webfont.woff") format("woff"), url("../fonts/robotoslab_700/RobotoSlab-Bold-webfont.ttf") format("truetype"), url("../fonts/robotoslab_700/RobotoSlab-Bold-webfont.svg#open_sanslight") format("svg"); } /** * Brand Level: * `var $brand-level` - this variable has the ablity to over take the standard acc coloring with a branded product color. Standard values are: *
  1. Pure ACC Color
  2. Header Bar and Primaary Nav Selects
  3. Lines, Selects, and Header Bar
  4. Full Color OVer Take, Typography, Selects, Header Bar, and Lines
* * @example * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
VariableColor
$brand-color 
$product-brand-color 
$primary-color 
$secondary-color 
$tertiary-color 
*/ /** * Zurb Foundation - Kitchen Sink: * This is a visual representation of UI elements that come from the base framework from ZURB. This does not includes every single element from Foundation to view a full list go to the documentation. Go to Zurb Foundation Documentation * * @example *

Alert Boxes

This is a standard alert (div.alert-box.radius). x
This is a success alert (div.alert-box.success). x
This is an alert (div.alert-box.alert.round). x
This is a secondary alert (div.alert-box.secondary). x
* * *

Buttons

*
*
* .tiny.button
* .small.button
* .button
* .expand
*
*
* .tiny.secondary
* .small.success.radius
* .round.disabled
*
*
*
*

switches

*
* * * * * Power *
*
* off * * * on *
*

*
*

Grid

*
*
small 2 | large 4
*
small 4 | large 4
*
small 6 | large 4
*
*/ /** * Icons from Font Awesome: * `fa-xxx` - fully css stylable font icons from Font Awesome. Please read documentation from the font awesome website. * * @example *
*

Font Awesome

*
*
  arrows
*
  arrows-h
*
  arrows-v
*
  asterisk
*
  at
*
  bookmark
*
  bookmark-o
*
  briefcase
*
  bug
*
  building
*
  calculator
*
  calendar
*
  calendar-o
*
  camera
*
  camera-retro
*
  caret-square-o-down
*
  caret-square-o-left
*
  caret-square-o-right
*
  caret-square-o-up
*
  cart-arrow-down
*
  check
*
  check-circle
*
  check-circle-o
*
  check-square
*
  check-square-o
*
  circle
*
  circle-o
*
  circle-o-notch
*
  circle-thin
*
  clock-o
*
  close (alias)
*
  cloud
*
  cloud-download
*
  cloud-upload
*
  code
*
  coffee
*
  cog
*
  cogs
*
  comment
*
  comment-o
*
  edit (alias)
*
  envelope
*
  envelope-o
*
  exclamation
*
  exclamation-circle
*
  exclamation-triangle
*
  external-link
*
  wifi
*
  wrench
*
full list of icons
*
*
*/ /** * Colors: * `ACC's Colors` - The ACC has a set of standard colors which include the +ACC Blue+, +Scrub Colors+, and +Intent Colors+. The colors that change depending the product are the +Scrub Colors+ * * @example * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Color NameHex Color

ACC Blue

#00386b

Product Color

#9a1267

Primary Color

#198dae

Secondary Color

#b3b3b3

Tertiary Color

#7d5891

Success Color

#14B057

Warning Color

#E08514

Error Color

#c32231
*/ .color-block { width: 50%; padding: 20px; text-align: center; font-weight: 900; font-size: 18px; color: white; } td.product-brand-color { background-color: #9a1267; } td.brand-color { background-color: #00386b; } td.primary-color { background-color: #198dae; } td.secondary-color { background-color: #b3b3b3; } td.tertiary-color { background-color: #7d5891; } td.attention-color { background-color: #E08514; } td.warning-color { background-color: #E08514; } td.success-color { background-color: #14B057; } td.select-color { background-color: #14B057; } td.error-color { background-color: #c32231; } td.alert-color { background-color: #c32231; } /* FONT PATH * -------------------------- */ @font-face { font-family: 'FontAwesome'; src: url("../fonts/fontawesome-webfont.eot?v=4.4.0"); src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff?v=4.4.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.4.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular") format("svg"); font-weight: normal; font-style: normal; } .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* makes the font 33% larger relative to the icon container */ .fa-lg { font-size: 1.33333em; line-height: 0.75em; vertical-align: -15%; } .fa-2x { font-size: 2em; } .fa-3x { font-size: 3em; } .fa-4x { font-size: 4em; } .fa-5x { font-size: 5em; } .fa-fw { width: 1.28571em; text-align: center; } .fa-ul { padding-left: 0; margin-left: 2.14286em; list-style-type: none; } .fa-ul > li { position: relative; } .fa-li { position: absolute; left: -2.14286em; width: 2.14286em; top: 0.14286em; text-align: center; } .fa-li.fa-lg { left: -1.85714em; } .fa-border { padding: .2em .25em .15em; border: solid 0.08em #eee; border-radius: .1em; } .pull-right { float: right; } .pull-left { float: left; } .fa.pull-left { margin-right: .3em; } .fa.pull-right { margin-left: .3em; } .fa-spin { -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear; } @-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } .fa-rotate-90 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .fa-rotate-180 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .fa-rotate-270 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .fa-flip-horizontal { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); -webkit-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } .fa-flip-vertical { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -webkit-transform: scale(1, -1); -ms-transform: scale(1, -1); transform: scale(1, -1); } :root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-flip-horizontal, :root .fa-flip-vertical { filter: none; } .fa-stack { position: relative; display: inline-block; width: 2em; height: 2em; line-height: 2em; vertical-align: middle; } .fa-stack-1x, .fa-stack-2x { position: absolute; left: 0; width: 100%; text-align: center; } .fa-stack-1x { line-height: inherit; } .fa-stack-2x { font-size: 2em; } .fa-inverse { color: #fff; } /* (asterisk "State":"success", "Selector":".success", "Color": $success-color, "Icon": $fa-var-check,), */ /* TODO: refactor this there are two to three needs for icons icons in containers, icons on icons and then icons that are dynamic to a parent container.**/ .fa-holder { text-decoration: none; } .fa-holder > i.fa-holder:before, .fa-holder * i.fa-holder-dynamic:before { text-decoration: none; } .fa-holder :after { content: ' '; } .delete > i.fa-holder:before, .delete.fa:before, .cancel > i.fa-holder:before, .cancel.fa:before, .close > i.fa-holder:before, .close.fa:before, .close-reveal-modal > i.fa-holder:before, .close-reveal-modal.fa:before { content: ""; } .validated > i.fa-holder:before, .validated.fa:before, .selected > i.fa-holder:before, .selected.fa:before { content: ""; } .data > i.fa-holder:before, .data.fa:before { content: ""; } .edit > i.fa-holder:before, .edit.fa:before { content: ""; } .clear > i.fa-holder:before, .clear.fa:before, .refresh > i.fa-holder:before, .refresh.fa:before { content: ""; } .starred > i.fa-holder:before, .starred.fa:before { content: ""; } .add > i.fa-holder:before, .add.fa:before { content: ""; } .home > i.fa-holder:before, .home.fa:before { content: ""; } .top > i.fa-holder:before, .top.fa:before { content: ""; } .fa-check:before { content: ""; } .back > i.fa-holder:before, .back.fa:before { content: ""; } .set > i.fa-holder:before, .set.fa:before { content: ""; } .save > i.fa-holder:before, .save.fa:before { content: ""; } .search > i.fa-holder:before, .search.fa:before { content: ""; } .fa-check:before { content: ""; } .fa-question-circle:before { content: ""; } .fa-arrow-circle-right:before { content: ""; } .fa-exclamation-triangle:before { content: ""; } .fa-exclamation-circle:before { content: ""; } i.fa.fa-question-circle { font-size: 1.35em; } .required .fa-holder-dynamic:before, .required.fa:before, .required > .fa-holder:before { content: ""; } .required.fa { color: #E08514; } meta.foundation-version { font-family: "/5.4.7/"; } meta.foundation-mq-small { font-family: "/only screen/"; width: 0em; } meta.foundation-mq-medium { font-family: "/only screen and (min-width:40.063em)/"; width: 40.063em; } meta.foundation-mq-large { font-family: "/only screen and (min-width:64.063em)/"; width: 64.063em; } meta.foundation-mq-xlarge { font-family: "/only screen and (min-width:90.063em)/"; width: 90.063em; } meta.foundation-mq-xxlarge { font-family: "/only screen and (min-width:120.063em)/"; width: 120.063em; } meta.foundation-data-attribute-namespace { font-family: false; } /* Accessibility - hides the forward slash */ [aria-label="breadcrumbs"] [aria-hidden="true"]:after { content: "/"; } .h1, h1, .table th.h1, .h2, h2, .table th.h2, .h3, h3, h1 + .nav-list li, h1 + .panel-selector li, .large.nav-list li, .large.panel-selector li, .table th.h3, .h4, h4, h2 + .nav-list li, h2 + .panel-selector li, .medium.nav-list li, .medium.panel-selector li, .table th.h4, .switch-value, .section-nav .text, .h5, h5, .h6, h6 { margin-top: 0; clear: both; } .h1, h1, .table th.h1 { letter-spacing: -1px; font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 300; } .h2, h2, .table th.h2 { font-family: 'Roboto Slab', "Times New Roman", 'Lucida Bright', Georgia, serif; font-weight: 400; } .h4, h4, h2 + .nav-list li, h2 + .panel-selector li, .medium.nav-list li, .medium.panel-selector li, .table th.h4, .switch-value, .section-nav .text { font-family: 'Roboto Slab', "Times New Roman", 'Lucida Bright', Georgia, serif; font-weight: 700; } .h3, h3, h1 + .nav-list li, h1 + .panel-selector li, .large.nav-list li, .large.panel-selector li, .table th.h3, .h5, h5, .h6, h6 { font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 700; } .h1, h1, .table th.h1 { font-size: 2.07143em; line-height: 1.44828em; margin-top: 0.72414em; margin-bottom: 0.72414em; } @media only screen and (min-width: 767px) { .h1, h1, .table th.h1 { font-size: 2.5em; line-height: 1.2em; margin-top: 0.6em; margin-bottom: 0.6em; } } @media only screen and (min-width: 1024px) { .h1, h1, .table th.h1 { font-size: 3em; line-height: 1em; margin-top: 0.5em; margin-bottom: 0.5em; } } .h2, h2, .table th.h2 { font-size: 1.42857em; line-height: 1.54em; margin-top: 0.5775em; margin-bottom: 0.1925em; } @media only screen and (min-width: 767px) { .h2, h2, .table th.h2 { font-size: 1.71429em; line-height: 1.75em; margin-top: 0.65625em; margin-bottom: 0.21875em; } } @media only screen and (min-width: 1024px) { .h2, h2, .table th.h2 { font-size: 2.07143em; line-height: 1.44828em; margin-top: 0.5431em; margin-bottom: 0.18103em; } } .h3, h3, h1 + .nav-list li, h1 + .panel-selector li, .large.nav-list li, .large.panel-selector li, .table th.h3 { font-size: 1.42857em; line-height: 1.54em; margin-top: 0.5775em; margin-bottom: 0.1925em; } @media only screen and (min-width: 767px) { .h3, h3, h1 + .nav-list li, h1 + .panel-selector li, .large.nav-list li, .large.panel-selector li, .table th.h3 { font-size: 1.42857em; line-height: 1.05em; margin-top: 0.2625em; margin-bottom: 0.7875em; } } .h4, h4, h2 + .nav-list li, h2 + .panel-selector li, .medium.nav-list li, .medium.panel-selector li, .table th.h4, .switch-value { font-size: 1.21429em; line-height: 1.23529em; margin-top: 0.61765em; margin-bottom: 0.61765em; } .h5, h5 { font-size: 1em; line-height: 1.5em; margin-top: 0em; margin-bottom: 0em; } .h6, h6 { font-size: 1em; line-height: 1.5em; margin-top: 0em; margin-bottom: 0em; } .nav-list li, .panel-selector li, h3 + .nav-list, h3 + .panel-selector, .small.nav-list, .small.panel-selector, .table, .normal { font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 400; letter-spacing: .01em; color: #333333; font-size: 1em; line-height: 1.5em; margin-top: 0em; margin-bottom: 0em; } h3 + .nav-list li, h3 + .panel-selector li, .small.nav-list li, .small.panel-selector li, .repeater .render .strong, .bold, b { font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 700; } .table th, .loud { color: black; } .quiet { color: gray; } .hint, .repeater .render .italic, .table tfoot tr td, .italic { font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 300; font-style: italic; } strong, .strong { font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 700; color: #25b6e0; } em, .emphasis { color: #0c4657; font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 300; font-style: italic; font-weight: 900; } .subtle { font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 300; color: #66a0b0; } .block-margins { margin: 0 em(21px) 0; } .repeater .render .render-holder { list-style: none; display: block; margin: 0; } .repeater .render .render-holder > li { display: inline-block; margin-left: .25rem; } /** * Header Tags: * `Headers` - Headers are used to separate and organize blocks of text. * You can also us `.h1`,`.h2`,`.h3`,`.h4`,`.h5`, or `.h6` * to make any text elements style like the associated header tag * * @example * h1 Header 1 Tag * small subheader * h2 Header 2 Tag * h3 Header 3 Tag * h4 Header 4 Tag * h5 Header 5 Tag * h6 Header 6 Tag */ h1 { color: #5c5c5c; } h2 { color: #333333; } h3 { color: #5c5c5c; } h4 { color: #5c5c5c; } h5 { color: #5c5c5c; } h6 { color: #999999; } /** * Fonts: * `OpenSans & Roboto Slab` - OpenSans is the major font family used in all digital text accross properties at the ACC. Roboto Slab and Roboto are used in highlighted cases like labels, Primary Navs, and some Header Tags. * * @example *

OpenSans
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;

*
*
Os
*
*

Display Fonts & Headers

*
a b c d e f g h i j k l m n o p q r s t u v w x y z
*
a b c d e f g h i j k l m n o p q r s t u v w x y z
*
0 1 2 3 4 5 6 7 8 9
*
a b c d e f g h i j k l m n o p q r s t u v w x y z
*
a b c d e f g h i j k l m n o p q r s t u v w x y z
*
0 1 2 3 4 5 6 7 8 9
*
*
*

Roboto Slab
font-family: 'Roboto Slab', 'Times New Roman', 'Lucida Bright', Georgia, serif;

*
*
Rb
*
*

Primary Navigation, Headers & Labels

*
a b c d e f g h i j k l m n o p q r s t u v w x y z
*
a b c d e f g h i j k l m n o p q r s t u v w x y z
*
0 1 2 3 4 5 6 7 8 9
*
a b c d e f g h i j k l m n o p q r s t u v w x y z
*
a b c d e f g h i j k l m n o p q r s t u v w x y z
*
0 1 2 3 4 5 6 7 8 9
*
*
*

Open Sans
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;

*
*
Os
*
*

Body Copy, Lists & Tables

*
a b c d e f g h i j k l m n o p q r s t u v w x y z
*
a b c d e f g h i j k l m n o p q r s t u v w x y z
*
0 1 2 3 4 5 6 7 8 9
*
a b c d e f g h i j k l m n o p q r s t u v w x y z
*
a b c d e f g h i j k l m n o p q r s t u v w x y z
*
0 1 2 3 4 5 6 7 8 9
*
*
*/ .font { color: #333333; } .font .font--example { background-image: url(http://basehold.it/i/21); } .font.font-display { font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 300; } .font.font-slab { font-family: 'Roboto Slab', "Times New Roman", 'Lucida Bright', Georgia, serif; font-weight: 400; } .font.font-normal { font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 400; letter-spacing: .01em; } .font.font-light { font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 300; } .font .font--name { color: #00386b; } .font .font--dropcase_2x { color: #198dae; } .font .font--lowercase, .font .font--uppercase, .font .font--numbers { white-space: pre-wrap; letter-spacing: -.1em; } .font .font--lowercase { text-transform: lowercase; } .font .font--uppercase { text-transform: uppercase; } .font .ms12 { font-size: 6.21429em; line-height: 1.2069em; margin-top: 0em; margin-bottom: 0em; } .font .ms6 { font-size: 3em; line-height: 1em; margin-top: 0em; margin-bottom: 0em; } .font .ms4 { font-size: 2.07143em; line-height: 1.44828em; margin-top: 0em; margin-bottom: 0em; } .font .ms2 { font-size: 1.42857em; line-height: 1.05em; margin-top: 0em; margin-bottom: 0em; } .font .ms1 { font-size: 1.21429em; line-height: 1.23529em; margin-top: 0em; margin-bottom: 0em; } .font .ms { font-size: 1em; line-height: 1.5em; margin-top: 0em; margin-bottom: 0em; } /** * Textures: * `Textures` - Subtle textures are used on the design to give a subtle level of depth. * * @example *

Textures

*

Paper Textures

*
*
*

News Print Paper lite

*
*
*
*
    *
  • File Name: billie-holiday-lite.png
    • *
  • Usage: Soft paper used in the background of groupings and overlaps.
    • *
*
*
*
*
*

News Print Paper

*
*
*
*
    *
  • File Name: billie-holiday.png
    • *
  • Usage: Soft paper used in the background of groupings and overlaps.
    • *
*
*
*
*
*

News Print Paper Dirty

*
*
*
*
    *
  • File Name: billie-holiday-spec.png
    • *
  • Usage: Alternate soft paper used in the background of groupings and overlaps.
    • *
*
*
*
*
*

Construction Paper

*
*
*
*
    *
  • File Name: construction-paper.png
    • *
  • Usage: A colorable texture to drop in color fields when needed.
    • *
*
*
*
*
*

Construction Paper Lite

*
*
*
*
    *
  • File Name: paper-texture.png
    • *
  • Usage: A colorable texture to drop in color fields when needed.
    • *
*
*
*
*
*

Carbon Paper

*
*
*
*
    *
  • File Name: crossed_stripes.png
    • *
  • Usage: Footer background with a lux quality.
    • *
*
*

Ink Marks

Application Response is shown with "ink" markings that can be simply colored by changing the background-color.

*
*
*

Cross Hatched Ink

*
*
*
*
    *
  • File Name: empty_diamond@2x
    • *
  • Special Usage: Table cell states
    • *
*
*
*
*
*

Cross Hatched Ink Tight

*
*
*
*
    *
  • File Name: empty_diamond
    • *
  • Special Usage: Disabled Buttons
    • *
*
*
*
*
*

Stripped Ink

*
*
*
*
    *
  • File Name: empty_stripe@2x.png
    • *
  • Usage: Page responses, error messages, and warning messages
    • *
*
*
*
*
*

Stripped Ink with Blue Color Bleed

*
*
*
*
    *
  • File Name: empty_stripe-alt@2x.png
    • *
  • Usage: This texture is used in a alternating column background in table rows that are showing states.
    • *
*
*
*
*
*

Stripped Ink Tight

*
*
*
*
    *
  • File Name: empty_stripe.png
    • *
  • Special Usage: List item states.
    • *
*
*
*
*/ .texture .texture--name { color: #00386b; } .texture .texture--thumb { width: auto; border: 1px solid #b3b3b3; display: inline-block; padding: 5px; width: 162px; height: 162px; } .texture .texture--holder { width: 150px; height: 150px; } .texture .texture--uppercase { text-transform: uppercase; } .texture .texture--cite { font-size: 1em; line-height: 1.5em; margin-top: 0em; margin-bottom: 0em; color: font-color(#333); } /** * Headline with Counters: * `.order-marker.` - It is some times useful to add an order-marker to the beginning of headlines. * * @example *

1Header 1 Tag

*

2Header 2 Tag

*

aHeader 3 Tag

*

bHeader 4 Tag

*
cHeader 5 Tag
*/ span.order-marker { background-color: #198dae; color: #fff; border-radius: 1000px; display: inline-block; height: 1.5em; margin-right: 0; margin-bottom: 0; padding: .75em .45em .5em; position: relative; top: -.25em; margin-right: .5em; text-align: center; padding-top: .75em; text-transform: capitalize; line-height: 0; } /** * Buttons: * `.nobutton .button or .button.secondary` - sample buttons from `.button` you can modifiers * * @example * no button * button * secondary button * disabled button */ button[disabled], button[disabled].success, button[disabled].alert, button[disabled].secondary, button:disabled, button.success:disabled, button.alert:disabled, button.secondary:disabled, .button.disabled, .button.disabled.success, .button.disabled.alert, .button.disabled.secondary, .button.disabled:hover, .button.disabled.success:hover, .button.disabled.alert:hover, .button.disabled.secondary:hover { background-color: #b3b3b3; background-image: url(../img/empty_diamond.png); color: #999999; border: 1px solid gray; cursor: not-allowed; } .input-space button[disabled], .switch-input-space button[disabled], .input-space button[disabled].success, .switch-input-space button[disabled].success, .input-space button[disabled].alert, .switch-input-space button[disabled].alert, .input-space button[disabled].secondary, .switch-input-space button[disabled].secondary, .input-space button:disabled, .switch-input-space button:disabled, .input-space button:disabled.success, .switch-input-space button:disabled.success, .input-space button:disabled.alert, .switch-input-space button:disabled.alert, .input-space button:disabled.secondary, .switch-input-space button:disabled.secondary, .input-space .button.disabled, .switch-input-space .button.disabled, .input-space .button.disabled.success, .switch-input-space .button.disabled.success, .input-space .button.disabled.alert, .switch-input-space .button.disabled.alert, .input-space .button.disabled.secondary, .switch-input-space .button.disabled.secondary, .input-space .button.disabled:hover, .switch-input-space .button.disabled:hover, .input-space .button.disabled:hover.success, .switch-input-space .button.disabled:hover.success, .input-space .button.disabled:hover.alert, .switch-input-space .button.disabled:hover.alert, .input-space .button.disabled:hover.secondary, .switch-input-space .button.disabled:hover.secondary { padding-top: 7px; padding-bottom: 7px; } .link.disabled, .link.disabled:hover { background-image: url("../img/subtlenet2.png"); color: #999999; font-style: italic; } .nobutton { border-style: solid; border-width: 0px; cursor: pointer; font-family: "Roboto Slab", Georgia, Cambria, "Times New Roman", Times, serif; font-weight: normal; line-height: normal; margin: 0 0 1.42857rem; position: relative; text-decoration: none; text-align: center; -webkit-appearance: none; -webkit-border-radius: 0; display: inline-block; padding-top: 1rem; padding-right: 2rem; padding-bottom: 1.07143rem; padding-left: 2rem; font-size: 1.14286rem; background-color: #fff; border-color: #cccccc; color: #333333; transition: background-color 300ms ease-out; margin-bottom: 0; } .nobutton:hover, .nobutton:focus { background-color: #cccccc; } .nobutton:hover, .nobutton:focus { color: #333333; } .nobutton.disabled, .nobutton.disabled:hover, .nobutton[disabled], .nobutton[disabled]:hover { color: #999999; cursor: not-allowed; background-color: #fff; } /** * Tabs (Basic): * `.tabs` - Group of nav that is build for a vertical space * * @example * */ .tabs { font-size: 0.85714rem; font-family: 'Roboto Slab', "Times New Roman", 'Lucida Bright', Georgia, serif; font-weight: 700; margin-left: 0; width: 100%; background: #e6e6e6; } .tabs div.row { max-width: 1200px; } @media only screen and (min-width: 767px) { .tabs { font-size: 1rem; } } @media only screen and (min-width: 1024px) { .tabs { font-size: 1.21429rem; } } .tabs li { border-top-left-radius: 3px; border-top-right-radius: 3px; display: inline-block; margin: .2rem 2px 0; background-color: #cccccc; } .tabs li a { display: inline-block; padding: .55em 1em .5em; text-align: center; white-space: nowrap; vertical-align: top; margin: 0 auto; width: 100%; color: #333333; } @media only screen and (min-width: 767px) { .tabs li a { padding: .5em 1em .45em; } } .tabs li:hover { background-color: #bfbfbf; } .tabs li:hover a { color: #333333; } .tabs li.selected { background-color: #fff; padding-left: 0; padding-right: 0; cursor: context-menu; } .tabs li.selected a { color: #333333; cursor: context-menu; } .tabs li.icon { width: 3em; } .tabs li.icon a { padding-left: .5em !important; padding-right: .5em !important; } .tabs li.icon.selected { background-color: #fff; } .tabs li.icon.selected a { color: #333333; } .tabs li.icon.selected a:hover { color: #5c5c5c; } .tabs li.icon.selected:hover { background-color: #989898; } .tabs li.icon.selected:hover a { color: #fff; } .tabs li.secondary { background-color: #d1d1d1; } .tabs li.secondary a { color: #333333; } .tabs li.secondary:hover { background-color: #b3b3b3; } .tabs li.secondary:hover a { color: #333333; } .tabs li.disabled, .tabs li.disabled:hover { background: url("../img/subtlenet2.png") repeat; } .tabs li.disabled a, .tabs li.disabled, .tabs li.disabled:hover a, .tabs li.disabled:hover { color: #999999; cursor: not-allowed; opacity: .5; } @media only screen and (max-width: 767px) { .tabs { width: 100%; clear: both; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex !important; flex-direction: row; flex-wrap: nowrap; align-items: stretch; align-content: stretch; margin: .2em 0; } .tabs li { -webkit-box-flex: 1 1 auto; -moz-box-flex: 1 1 auto; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } .tabs li.icon { -webkit-box-flex: 0 0 2em; -moz-box-flex: 0 0 2em; -webkit-flex: 0 0 2em; -ms-flex: 0 0 2em; flex: 0 0 2em; } } @media only screen and (max-width: 767px) and (max-width: 320px) { .tabs { flex-wrap: wrap; } } .tabs.primary { border: 0; background: none; margin: 0; flex-wrap: wrap; width: 100%; clear: both; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex !important; flex-direction: row; align-items: stretch; align-content: stretch; font-size: 0.85714em; line-height: 1.75em; margin-top: 0em; margin-bottom: 0em; } .tabs.primary li { -webkit-box-flex: 1 1 auto; -moz-box-flex: 1 1 auto; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } .tabs.primary li a { padding: .55em .25em .75em; } .tabs.primary li a:after { border-bottom: 8px solid #00386b; } .tabs.primary li.icon { -webkit-box-flex: 0 0 2em; -moz-box-flex: 0 0 2em; -webkit-flex: 0 0 2em; -ms-flex: 0 0 2em; flex: 0 0 2em; } @media only screen and (min-width: 320px) { .tabs.primary { font-size: 1em; line-height: 1.5em; margin-top: 0em; margin-bottom: 0em; } } @media only screen and (min-width: 767px) { .tabs.primary { display: block; font-size: 1.21429em; line-height: 1.23529em; margin-top: 0em; margin-bottom: 0em; } .tabs.primary li a { padding: 1em .5em; } } @media only screen and (min-width: 1024px) { .tabs.primary { font-size: 1.42857em; line-height: 1.05em; margin-top: 0em; margin-bottom: 0em; } } @media only screen and (min-width: 1200px) { .tabs.primary { font-size: 1.71429em; line-height: 1.75em; margin-top: 0em; margin-bottom: 0em; } } .tabs.primary:after { content: ""; display: table; clear: both; } .tabs.primary li { position: relative; border-top-left-radius: 0; border-top-right-radius: 0; background-color: #fff; border-top: 1px #999999 solid; border-bottom: 0.45em #999999 solid; border-left: 1px #999999 solid; border-right: 1px #999999 solid; margin: 0; display: block; float: left; } .tabs.primary li a { white-space: normal; padding: .5em .25em; color: #333333; } @media only screen and (min-width: 320px) { .tabs.primary li a { white-space: nowrap; } } @media only screen and (min-width: 767px) { .tabs.primary li a { padding: 1.25em .75em; } } .tabs.primary li:hover { background-color: #fff; border-color: #198dae; } .tabs.primary li:hover a { color: #198dae; } .tabs.primary li.selected { background-color: #198dae; border-color: #198dae; border-bottom-color: #00386b; border-right: 0 none; border-left: 0 none; } .tabs.primary li.selected a { color: #fff; } .tabs.primary li.selected a:after { content: ""; position: absolute; bottom: -1px; left: 50%; /* width: 10%; */ margin-left: -10px; border-style: solid; border-color: transparent; border-width: 0px 8px; border-bottom: 10px solid #00386b; } .tabs.primary li.selected:hover { background-color: #198dae; } .tabs.primary li.selected:hover a { color: #fff; } .tabs.primary li.disabled, .tabs.primary li.disabled:hover { border-color: #b3b3b3; background: url("../img/subtlenet2.png") repeat; } .tabs.primary li.disabled a, .tabs.primary li.disabled, .tabs.primary li.disabled:hover a, .tabs.primary li.disabled:hover { color: #999999; cursor: not-allowed; } .tabs.primary li.icon.selected { background-color: #198dae; } .tabs.primary li.icon.selected a { color: #fff; } .tabs.primary.reverse { font-size: 0.85714em; line-height: 1.75em; margin-top: 0em; margin-bottom: 0em; } .tabs.primary.reverse li { border-top-width: .45em; border-bottom-width: 1px; } .tabs.primary.reverse li.selected { border-color: #198dae; border-top-color: #00386b; } .tabs.primary.reverse li.selected a:after { content: ""; position: absolute; top: -1px; bottom: auto; left: 50%; margin-left: -10px; border-style: solid; border-color: transparent; border-width: 0px 8px; border-top: 10px solid #00386b; border-bottom: 0 none; } @media only screen and (min-width: 320px) { .tabs.primary.reverse { font-size: 1em; line-height: 1.5em; margin-top: 0em; margin-bottom: 0em; margin: 0; } .tabs.primary.reverse li.selected a:after { border-top: 8px solid #00386b; } } @media only screen and (min-width: 767px) { .tabs.primary.reverse { font-size: 1.21429em; line-height: 1.23529em; margin-top: 0em; margin-bottom: 0em; } } /** * Tabs Primary: * `.tabs.primary` - Priamary is used for top level nav for mobile porjects * * @example * * */ /** * Tabs Overlap: * `.tabs.overlap` - Overlap gives shallow space and more rendered verstion of tabs * * @example * */ .tabs.overlap { background-color: white; background: url("../img/billie-holiday.png") repeat top right, url("../img/bottom-shade.png") repeat-x bottom right, url("../img/top-shade.png") repeat-x right -1px; border-bottom: 2px solid #999999; padding-top: .25em; } .tabs.overlap li { border: 2px solid #b3b3b3; border-bottom: 0; border-top-left-radius: 7px; border-top-right-radius: 7px; } .tabs.overlap li.selected { margin-bottom: -2px; padding-bottom: 3px; background-color: white; z-index: 1000; border-color: #999999; vertical-align: bottom; } .with-group-sections .tabs.overlap li.selected { background: #fff url("../img/billie-holiday-lite.png"); } .tabs.overlap li.selected a { color: #333; } .tabs.overlap li.secondary { border-color: #b3b3b3; } /** * Navigation List: * `.nav-list ul li` - A collection of navigation links perfect for side navigation or a collection of external links. Add `.selected` to the `li` to highlight the nav link. * * @example * */ .nav-list a, .panel-selector a, .nav-list .list-item-wrapper, .panel-selector .list-item-wrapper { display: table; width: 100%; text-align: right; color: #5c5c5c; } .nav-list a .text, .panel-selector a .text, .nav-list a i, .panel-selector a i, .nav-list .list-item-wrapper .text, .panel-selector .list-item-wrapper .text, .nav-list .list-item-wrapper i, .panel-selector .list-item-wrapper i { display: table-cell; } .nav-list a .text, .panel-selector a .text, .nav-list .list-item-wrapper .text, .panel-selector .list-item-wrapper .text { text-align: left; } .nav-list a i, .panel-selector a i, .nav-list .list-item-wrapper i, .panel-selector .list-item-wrapper i { width: 2em; } .nav-list li, .panel-selector li { padding: .25rem 1rem; } .nav-list li .text + .fa, .panel-selector li .text + .fa, .nav-list li .fa + .text, .panel-selector li .fa + .text { padding-left: .5em; } .nav-list li i.fa-holder-dynamic:before, .panel-selector li i.fa-holder-dynamic:before, .nav-list li.dynamic i.fa-holder:before, .panel-selector li.dynamic i.fa-holder:before { content: ""; } .nav-list li:hover, .panel-selector li:hover { background-color: #e6e6e6; } .nav-list li:hover a, .panel-selector li:hover a { color: #333333; } .nav-list li.selected, .panel-selector li.selected { background-color: #c9edf7; } .nav-list li.selected, .panel-selector li.selected, .nav-list li.selected:hover a, .panel-selector li.selected:hover a { color: #333333; } .nav-list li.selected a, .panel-selector li.selected a, .nav-list li.selected a:hover, .panel-selector li.selected a:hover { cursor: pointer; cursor: context-menu; } .nav-list ul, .panel-selector ul { margin: 0; width: 100%; display: block; position: relative; list-style-type: none; } /** * Nav List (With Headlines): * `.nav-list ul li` - The nav list changes styles depending on the headline tag in front of the nav-list. or simply add the class `large`, `medium`, or `small` * * @example *

H1 header tag

* *
*
This list has the medium class
* *
*

H3 header tag

* */ h1 + .nav-list, h1 + .panel-selector, .large.nav-list, .large.panel-selector { border-top: #25b6e0 2px solid; margin-top: -0.75rem; padding-top: 0.7rem; margin-bottom: 1.5rem; } h2 + .nav-list, h2 + .panel-selector, .medium.nav-list, .medium.panel-selector { margin-bottom: 1rem; padding-top: .5rem; margin-top: -.5rem; border-top: 2px solid #b3b3b3; } h3 + .nav-list, h3 + .panel-selector, .small.nav-list, .small.panel-selector { margin-bottom: 0.7rem; } h3 + .nav-list li, h3 + .panel-selector li, .small.nav-list li, .small.panel-selector li { border: 1px solid #cccccc; border-left-width: 0; border-right-width: 0; margin-bottom: 0; margin-top: -1px; } .nav-list.large, .large.panel-selector, .nav-list.medium, .medium.panel-selector, .nav-list.small, .small.panel-selector { margin-top: 0; } /** * Nav List (Checklist): * `.nav-checklist` - add class to the nav to change the .nav-list from forward links to a list with states of `.selected`, `.completed`, `.warning`, `.error` * * @example * */ .nav-list.nav-checklist li, .nav-checklist.panel-selector li { border: 1px solid #e6e6e6; border-left-width: 0; border-right-width: 0; margin-bottom: 0; margin-top: -1px; background-image: url(../img/empty_stripe.png); } .nav-list.nav-checklist li i.fa-holder-dynamic:before, .nav-checklist.panel-selector li i.fa-holder-dynamic:before, .nav-list.nav-checklist li.dynamic i.fa-holder:before, .nav-checklist.panel-selector li.dynamic i.fa-holder:before { content: ""; } .nav-list.nav-checklist li:hover, .nav-checklist.panel-selector li:hover { background-image: none; } .nav-list.nav-checklist li.selected, .nav-checklist.panel-selector li.selected { border-bottom-width: 1px; border-color: #8ef2b9; background-image: none; font-family: 'Roboto Slab', "Times New Roman", 'Lucida Bright', Georgia, serif; font-weight: 700; color: #333333; } .nav-list.nav-checklist li.selected i.fa-holder-dynamic:before, .nav-checklist.panel-selector li.selected i.fa-holder-dynamic:before, .nav-list.nav-checklist li.selected.dynamic i.fa-holder:before, .nav-checklist.panel-selector li.selected.dynamic i.fa-holder:before { content: ""; } .nav-list.nav-checklist li.selected i, .nav-checklist.panel-selector li.selected i { color: white; } .nav-list.nav-checklist li.completed i.fa-holder-dynamic:before, .nav-checklist.panel-selector li.completed i.fa-holder-dynamic:before, .nav-list.nav-checklist li.completed.dynamic i.fa-holder:before, .nav-checklist.panel-selector li.completed.dynamic i.fa-holder:before { content: ""; } .nav-list.nav-checklist li.completed i, .nav-checklist.panel-selector li.completed i { color: #14B057; } .nav-list.nav-checklist li.error, .nav-checklist.panel-selector li.error { background-color: #f2b7bd; border-color: #f0abb2; border-bottom-width: 1; color: #333333; } .nav-list.nav-checklist li.error:hover, .nav-checklist.panel-selector li.error:hover { background-color: #f7cfd3; } .nav-list.nav-checklist li.warning, .nav-checklist.panel-selector li.warning { background-color: #f8dbb6; border-color: #f7d5aa; border-bottom-width: 1; color: #333333; } .nav-list.nav-checklist li.warning:hover, .nav-checklist.panel-selector li.warning:hover { background-color: #fbe7ce; } .nav-list.nav-checklist li.validated, .nav-checklist.panel-selector li.validated { background-color: #aaf5cb; border-color: #9cf4c2; border-bottom-width: 1; color: #333333; } .nav-list.nav-checklist li.validated:hover, .nav-checklist.panel-selector li.validated:hover { background-color: #c7f9dc; } .nav-list.nav-checklist li.info, .nav-checklist.panel-selector li.info { background-color: #ebf8fc; border-color: #e7f7fb; border-bottom-width: 1; color: #333333; } .nav-list.nav-checklist li.info:hover, .nav-checklist.panel-selector li.info:hover { background-color: #f1fafd; } .nav-list.nav-checklist li.highlighted, .nav-checklist.panel-selector li.highlighted { background-color: #bbe8f4; border-color: #b0e4f3; border-bottom-width: 1; color: #333333; } .nav-list.nav-checklist li.highlighted:hover, .nav-checklist.panel-selector li.highlighted:hover { background-color: #d2eff8; } .nav-list.nav-checklist li.completed, .nav-checklist.panel-selector li.completed { background-color: #fff; color: #333333; } .nav-list.nav-checklist li.completed:hover, .nav-checklist.panel-selector li.completed:hover { background-color: #c7f9dc; } .nav-list.nav-checklist li.disabled, .nav-checklist.panel-selector li.disabled { background-color: #e8e8e8; border-color: #e4e4e4; border-bottom-width: 1; color: #b3b3b3; } .nav-list.nav-checklist li.disabled:hover, .nav-checklist.panel-selector li.disabled:hover { background-color: #f0f0f0; } .nav-list.nav-checklist li.attention, .nav-checklist.panel-selector li.attention { background-color: #f8dbb6; border-color: #f7d5aa; border-bottom-width: 1; color: #333333; } .nav-list.nav-checklist li.attention:hover, .nav-checklist.panel-selector li.attention:hover { background-color: #fbe7ce; } /** * Nav List (Checklist w/ States): * `.nav-checklist.statename` - add class to the nav to change the list item to reflect the state with `.warning`, `.error`, `.highlighted`... * * @example * */ /** * Circle Section Nav (forward & back): * `.section-nav with .forward or .back` - A wizard-like page nav. Alter the position of the circle button by adding `.forward` or `.back` to the `.section-nav` container. * * @example *
* *
*
Back
* *
*
*
*

Page Title

*

hello I am some content on this page

*
* *
* *
*
Forward
* *
*/ /** * Circle Section Nav (Disabled): * `.section-nav with .disabled` - Adding `.disabled` to the `.section-nav` container with style the circle nav accordingly. * * @example *
* *
*
Back
* *
*
*
*

Page Title (Disabled)

*

Somethig on this page has disabled forward navigation

*
* *
* *
*
Forward
* *
*/ .section-nav { width: 100%; display: block; position: relative; border: 0px solid #b3b3b3; } .section-nav .text { padding-top: 6.25px; padding-bottom: 6.25px; } .section-nav .circle { position: absolute; width: 50px; height: 50px; background: #25b6e0; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; border: 4px solid #fff; -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.61); -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.61); box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.61); } .section-nav .circle i { font-size: 25px; line-height: 1em; margin: 10.5px; color: #fff; } .section-nav .circle i:before { vertical-align: bottom; } .section-nav.forward { border-top-width: 1px; background: url("../img/billie-holiday.png") repeat top right, url("../img/top-shade.png") repeat-x top right; margin-top: 37.5px; border-top-width: 2px; } .section-nav.forward i.fa-holder-dynamic:before, .section-nav.forward.dynamic i.fa-holder:before { content: ""; } .section-nav.forward .circle { right: 12.5px; bottom: 8.33333px; } .section-nav.forward .circle i { margin: 10.5px 13px; } .section-nav.forward .text { padding-right: 75px; text-align: right; } .section-nav.back { background: url("../img/billie-holiday.png") repeat top right, url("../img/bottom-shade.png") repeat-x bottom right; margin-bottom: 37.5px; border-bottom-width: 2px; } .section-nav.back i.fa-holder-dynamic:before, .section-nav.back.dynamic i.fa-holder:before { content: ""; } .section-nav.back .text { padding-left: 75px; text-align: left; } .section-nav.back .circle { left: 12.5px; top: 8.33333px; } .section-nav:hover .circle { background: #198dae; border: 4px solid #fff; -webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.45); -moz-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.45); box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.45); } .section-nav:hover .circle i { color: #fff; } .section-nav.disabled { cursor: context-menu; } .section-nav.disabled .text { color: #999999; } .section-nav.disabled .circle, .section-nav.disabled.hover.circle { -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2); background-color: #999999; background-image: url("../img/empty_diamond.png"); } .inline-group { list-style: none; display: block; } .inline-group > * { display: inline-block; list-style: none; } .inline-group:after { content: ''; display: block; clear: both; } .answer, .answer-group, .question, .question-group, .question-inline, .question-grid-based { margin-bottom: 1rem; } .answer input[type="text"], .answer input[type="password"], .answer input[type="date"], .answer input[type="datetime"], .answer input[type="datetime-local"], .answer input[type="month"], .answer input[type="week"], .answer input[type="email"], .answer input[type="number"], .answer input[type="search"], .answer input[type="tel"], .answer input[type="time"], .answer input[type="url"], .answer input[type="color"], .answer textarea, .answer select, .answer button, .answer .button, .answer-group input[type="text"], .answer-group input[type="password"], .answer-group input[type="date"], .answer-group input[type="datetime"], .answer-group input[type="datetime-local"], .answer-group input[type="month"], .answer-group input[type="week"], .answer-group input[type="email"], .answer-group input[type="number"], .answer-group input[type="search"], .answer-group input[type="tel"], .answer-group input[type="time"], .answer-group input[type="url"], .answer-group input[type="color"], .answer-group textarea, .answer-group select, .answer-group button, .answer-group .button, .question input[type="text"], .question input[type="password"], .question input[type="date"], .question input[type="datetime"], .question input[type="datetime-local"], .question input[type="month"], .question input[type="week"], .question input[type="email"], .question input[type="number"], .question input[type="search"], .question input[type="tel"], .question input[type="time"], .question input[type="url"], .question input[type="color"], .question textarea, .question select, .question button, .question .button, .question-group input[type="text"], .question-group input[type="password"], .question-group input[type="date"], .question-group input[type="datetime"], .question-group input[type="datetime-local"], .question-group input[type="month"], .question-group input[type="week"], .question-group input[type="email"], .question-group input[type="number"], .question-group input[type="search"], .question-group input[type="tel"], .question-group input[type="time"], .question-group input[type="url"], .question-group input[type="color"], .question-group textarea, .question-group select, .question-group button, .question-group .button, .question-inline input[type="text"], .question-inline input[type="password"], .question-inline input[type="date"], .question-inline input[type="datetime"], .question-inline input[type="datetime-local"], .question-inline input[type="month"], .question-inline input[type="week"], .question-inline input[type="email"], .question-inline input[type="number"], .question-inline input[type="search"], .question-inline input[type="tel"], .question-inline input[type="time"], .question-inline input[type="url"], .question-inline input[type="color"], .question-inline textarea, .question-inline select, .question-inline button, .question-inline .button, .question-grid-based input[type="text"], .question-grid-based input[type="password"], .question-grid-based input[type="date"], .question-grid-based input[type="datetime"], .question-grid-based input[type="datetime-local"], .question-grid-based input[type="month"], .question-grid-based input[type="week"], .question-grid-based input[type="email"], .question-grid-based input[type="number"], .question-grid-based input[type="search"], .question-grid-based input[type="tel"], .question-grid-based input[type="time"], .question-grid-based input[type="url"], .question-grid-based input[type="color"], .question-grid-based textarea, .question-grid-based select, .question-grid-based button, .question-grid-based .button { margin-bottom: 0; } .input-holder .prefix, .input-holder .postfix, .input-holder .value { font-size: 0.85714em; line-height: 1.75em; margin-top: 0em; margin-bottom: 0em; font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 700; line-height: 2em; padding: .5em; margin-top: 0; color: #666666; border: 1px solid transparent; } .input-holder .prefix, .input-holder .postfix { background: url("../img/paper-texture.png"); border: 1px solid #b3b3b3; } .question .label-holder, .question .input-holder, .question .message-holder, .question .value-holder, .question .hint { width: 100%; margin: 0; max-width: 114.28571rem; } .question .label-holder:before, .question .label-holder:after, .question .input-holder:before, .question .input-holder:after, .question .message-holder:before, .question .message-holder:after, .question .value-holder:before, .question .value-holder:after, .question .hint:before, .question .hint:after { content: " "; display: table; } .question .label-holder:after, .question .input-holder:after, .question .message-holder:after, .question .value-holder:after, .question .hint:after { clear: both; } .question .label-holder { font-size: 1em; line-height: 1.5em; margin-top: 0.75em; margin-bottom: 0.375em; white-space: nowrap; } @media only screen and (max-width: 767px) { .question .label-holder { white-space: normal; } } .label-holder { font-size: 1em; line-height: 1.5em; margin-top: 0.75em; margin-bottom: 0.375em; position: relative; background-color: transparent; color: #5c5c5c; } .label-holder label, .label-holder .label, .label-holder .text { font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 700; } .label-holder .text { padding-right: 1rem; } .required-holder { display: none; height: 1rem; width: 1rem; position: relative; margin-left: -1rem; margin-right: -1rem; color: #333333; } .required-holder i.fa-holder-dynamic { position: absolute; top: 0; left: 0; font-size: .75rem; } .required .required-holder, .answer.error .required-holder, .question.error .required-holder, .answer.warning .required-holder, .question.warning .required-holder, .answer.validated .required-holder, .question.validated .required-holder, .answer.info .required-holder, .question.info .required-holder, .answer.highlighted .required-holder, .question.highlighted .required-holder, .answer.completed .required-holder, .question.completed .required-holder, .answer.disabled .required-holder, .question.disabled .required-holder, .answer.attention .required-holder, .question.attention .required-holder, .repeater.required > .label-holder .required-holder { background-color: transparent; display: inline-block; } .required .required-holder { color: #E08514; } .required .required-holder i.fa-holder-dynamic:before, .required .required-holder.dynamic i.fa-holder:before { content: ""; } .input-holder, .value-holder { margin-bottom: 0; } .input-holder > .input-space, .input-holder > .switch-input-space, .value-holder > .input-space, .value-holder > .switch-input-space { padding-left: 0; line-height: 1; } [class*="input-space"] + [class*="input-space"]:last-child, [class*="value-space"] + [class*="value-space"]:last-child { padding-right: 0; } .message-holder > small, .message-holder > span { font-size: 0.85714em; line-height: 1.75em; margin-top: 0em; margin-bottom: 0em; display: none; padding: .375rem .5625rem .5625rem; margin-top: -1px; margin-bottom: .25rem; clear: both; color: #FFF; } .message-holder > small i, .message-holder > span i { margin-right: .5rem; } .hint { font-size: 0.85714em; line-height: 1.75em; margin-top: 0em; margin-bottom: 0em; } .answer:disabled, .answer[disabled], .answer-group:disabled, .answer-group[disabled], .question:disabled, .question[disabled], .question-group:disabled, .question-group[disabled], .question-inline:disabled, .question-inline[disabled], .question-grid-based:disabled, .question-grid-based[disabled], .answer .chosen-disabled.chosen-container .chosen-choices, .question .chosen-disabled.chosen-container .chosen-choices { background-color: #b3b3b3; background-image: url(../img/empty_stripe.png); color: #999999; } .answer .required, .question .required, .question-inline .required, .question-grid-based .required { display: none; } .answer.required .required, .question.required .required, .question-inline.required .required, .question-grid-based.required .required { display: inline-block; width: 100%; } .hint .error, .hint .warning, .hint .validated, .hint .info, .hint .highlighted, .hint .completed, .hint .disabled, .hint .attention { padding: .25em .5em; } .error textarea, .error select, .error input, .error datalist, .warning textarea, .warning select, .warning input, .warning datalist, .validated textarea, .validated select, .validated input, .validated datalist, .info textarea, .info select, .info input, .info datalist, .highlighted textarea, .highlighted select, .highlighted input, .highlighted datalist, .completed textarea, .completed select, .completed input, .completed datalist, .disabled textarea, .disabled select, .disabled input, .disabled datalist, .attention textarea, .attention select, .attention input, .attention datalist { margin-bottom: 0; } .message-holder > .error, .message-holder > .warning, .message-holder > .validated, .message-holder > .info, .message-holder > .highlighted, .message-holder > .completed, .message-holder > .disabled, .message-holder > .attention { display: none; } .error .message-holder > .error, .message-holder > .error.make-visible, .warning .message-holder > .warning, .message-holder > .warning.make-visible, .validated .message-holder > .validated, .message-holder > .validated.make-visible, .info .message-holder > .info, .message-holder > .info.make-visible, .highlighted .message-holder > .highlighted, .message-holder > .highlighted.make-visible, .completed .message-holder > .completed, .message-holder > .completed.make-visible, .disabled .message-holder > .disabled, .message-holder > .disabled.make-visible, .attention .message-holder > .attention, .message-holder > .attention.make-visible { display: block; } .input-holder .input-space, .input-holder .switch-input-space { padding-left: 0; position: relative; } .input-space a.button, .switch-input-space a.button, .input-space button, .switch-input-space button, .input-space .button, .switch-input-space .button { margin: 0; padding-top: 8px; padding-bottom: 8px; line-height: 21px; } .input-space a.button i, .switch-input-space a.button i, .input-space button i, .switch-input-space button i, .input-space .button i, .switch-input-space .button i { margin-right: .2rem; } [class*="input-space"] + [class*="input-space"]:last-child { padding-right: 0; } .input-space > .text, .switch-input-space > .text { padding-top: .5em; padding-bottom: .5em; padding-left: .5em; } .input-space .input-lock, .switch-input-space .input-lock { position: absolute; top: 0; right: 0; padding: 0.57143rem; font-size: 1.5rem; line-height: 1; } .input-space .input-lock .lock-symbol, .switch-input-space .input-lock .lock-symbol { color: gray; } .input-space .input-lock .lock-symbol:hover, .switch-input-space .input-lock .lock-symbol:hover { color: #25b6e0; } input[type="checkbox"], input[type="radio"] { margin: .55em .5em; height: 1.5em; text-align: center; position: absolute; display: inline-block; vertical-align: middle; } table input[type="checkbox"], table input[type="radio"] { position: relative; } input[type="checkbox"] + .text, input[type="radio"] + .text { padding-left: 2em; display: inline-block; } /** * Questions -Required: * `.question` - This is a standard formating for an input question. * * @example *
*
* *
*
*
* *
*
* Years *
*
*
* Error message * Warning message * Data message *
*
This is some hint text
*
*/ /** * Questions - States: * `.question + .warning + error +...` - Modify the container with `.required`, `.warning`, '.error', and other states. Modifiers change the icons and control the visiblity of the message holder. * * @example *
*
* *
*
*
* *
*
* Years *
*
*
* Error message * Warning message * Data message *
*
This is some hint text
*
**/ .question-inline { display: block; margin-bottom: .75rem; } .question-inline .label-holder { padding-top: .5em; padding-bottom: .5em; margin: 0; } .question-inline .label-holder, .question-inline .input-holder { display: inline-block; width: auto; vertical-align: middle; float: left; } .question-inline .label-holder * { white-space: nowrap; padding-right: 1rem; } .question-inline .input-holder { margin-bottom: .25rem; } .question-inline .input-holder .input-space, .question-inline .input-holder .switch-input-space { padding-left: 0; } .question-inline .message-holder, .question-inline .hint { display: block; clear: left; } .question-inline .hint { border-top: 1px solid #e6e6e6; padding: .25rem; background-color: #e4f6fb; } /** * Questions - Inline: * `.question-inline` - questions when there is a need can be made to be inline so the text box will follow the label. These questions will revert to the base question style when on smaller phones. * Modify any `.question` with the added class of `.question-inline` * * @example *
*
* *
*
*
* *
*
* Years *
*
*
* Error message * Warning message * Data message *
*
This is some hint text
*
*/ .question-grid-based .label-holder, .question-grid-based .input-holder, .question-grid-based .value-holder { padding-left: 0.5rem; padding-right: 0.5rem; float: left; } .question-grid-based .message-holder, .question-grid-based .hint, .question-grid-based { width: 100%; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; max-width: 114.28571rem; } .question-grid-based .message-holder:before, .question-grid-based .message-holder:after, .question-grid-based .hint:before, .question-grid-based .hint:after, .question-grid-based:before, .question-grid-based:after { content: " "; display: table; } .question-grid-based .message-holder:after, .question-grid-based .hint:after, .question-grid-based:after { clear: both; } .question-grid-based .label-holder { text-align: right; } .question-grid-based .label-holder .text { padding-right: 0; } .question-grid-based.required .label-holder .text { padding-right: 1rem; } .label-holder .seq, .message-holder .seq, .hint .seq { font-size: 0.71429em; line-height: 2.1em; margin-top: 0em; margin-bottom: 0em; color: #198dae; vertical-align: top; display: inline-block; margin-top: -.75em; margin-left: -.35em; } .label-holder .seq:hover, .message-holder .seq:hover, .hint .seq:hover { color: #266070; text-decoration: underline; } /** * Questions Grid Based: * `.question-grid-based` - This is a variation of the question block used by NCDR. `.label-holder & .input-holder` are used as containters so you can use grid sizers to align the label and input right and left. * * @example *
*
* *
This is some hint text
*
*
*
* *
*
* Years *
*
* Error message * Warning message * Data message *
*
This is some hint text
*
*
*/ .file-upload-holder { height: 37px; } .file-upload { position: relative; overflow: hidden; margin: 0 10px; } .file-upload input.upload { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); } /** * Questions - File Upload: * `.file-upload` - File uploads are a modified from the standard input-spacer to allow for correct labels to show up when the file is attached. * * @example *
* * Upload * *
**/ /** * Selectable Button Group (Depreciate Selected Button Group): * `.selectable.button-group selected-btn[x]` - this is a toggle-able button group that is using an older combination classes `ul.selectable selected-btn1 > li > a.btn1`. * * @example *

Basic

*
*
*
* *
*
*
* */ /** * Selectable Button Group: * `.selectable.button-group` - this is a toggle-able button group that changes colors when items are selected. Add .selected to the `li` to change colors and add the check to the button. * * @example *

Basic

*
*
*
* *
*
*
*

Modified with an item having the class `.selected`

*
*
*
* *
*
*
*

Modified with the `.expand`

*
*
*
* *
*
*
*

The container `.question` has an error state.
NOTE: if button groups have states it is best for them to have been expanded.

*
*
*
* *
*
*
Error
*
* */ /* Button Group */ .button-group { padding-left: 0; border: 2px solid transparent; margin: -2px; list-style: none; margin: 0; left: 0; display: inline-block; } .button-group:before, .button-group:after { content: " "; display: table; } .button-group:after { clear: both; } .button-group > li { margin: 0; float: left; display: list-item; } .button-group > li > button, .button-group > li .button { border-left: 1px solid; border-color: rgba(255, 255, 255, 0.5); } .button-group > li:first-child button, .button-group > li:first-child .button { border-left: 0; } .button-group > li:first-child { margin-left: 0; } .input-space .button-group > li .button, .switch-input-space .button-group > li .button { padding-top: .57143rem; padding-bottom: .57143rem; } .button-group.selectable { margin-bottom: -1px; } .button-group.selectable .button { background-color: #b3b3b3; border-color: #8f8f8f; color: #FFFFFF; } .button-group.selectable .button:hover, .button-group.selectable .button:focus { background-color: #8f8f8f; } .button-group.selectable .button:hover, .button-group.selectable .button:focus { color: #FFFFFF; } .button-group.selectable i.fa { font-size: 1rem; height: 1rem; width: 1rem; margin: 0 7px 0 0; display: none; } .button-group.selectable li.selected a { background-color: #14B057; border-color: #108d46; color: #FFFFFF; } .button-group.selectable li.selected a:hover, .button-group.selectable li.selected a:focus { background-color: #108d46; } .button-group.selectable li.selected a:hover, .button-group.selectable li.selected a:focus { color: #FFFFFF; } .button-group.selectable li.selected a i.fa { display: inline-block; } /*Need to Kill this function Badly produced to answer for the view from SI App. Should Consider a better reposnsive answer*/ .selectable { margin: 0; } .selectable a { background-color: #25b6e0; transition: none; } .selectable a:hover { background-color: #198dae; } .selectable i.fa { font-size: 1rem; height: 1rem; width: 1rem; margin: 0 7px 0 0; display: none; } .selectable.selected-btn1 a, .selectable.selected-btn2 a, .selectable.selected-btn3 a, .selectable.selected-btn4 a, .selectable.selected-btn5 a { background-color: #b3b3b3; border-color: #8f8f8f; color: #FFFFFF; } .selectable.selected-btn1 a:hover, .selectable.selected-btn1 a:focus, .selectable.selected-btn2 a:hover, .selectable.selected-btn2 a:focus, .selectable.selected-btn3 a:hover, .selectable.selected-btn3 a:focus, .selectable.selected-btn4 a:hover, .selectable.selected-btn4 a:focus, .selectable.selected-btn5 a:hover, .selectable.selected-btn5 a:focus { background-color: #8f8f8f; } .selectable.selected-btn1 a:hover, .selectable.selected-btn1 a:focus, .selectable.selected-btn2 a:hover, .selectable.selected-btn2 a:focus, .selectable.selected-btn3 a:hover, .selectable.selected-btn3 a:focus, .selectable.selected-btn4 a:hover, .selectable.selected-btn4 a:focus, .selectable.selected-btn5 a:hover, .selectable.selected-btn5 a:focus { color: #FFFFFF; } .selectable.selected-btn1 .btn1 a, .selectable.selected-btn2 .btn2 a, .selectable.selected-btn3 .btn3 a, .selectable.selected-btn4 .btn4 a, .selectable.selected-btn5 .btn5 a, .selectable .selected a { background-color: #14B057; border-color: #108d46; color: #FFFFFF; } .selectable.selected-btn1 .btn1 a:hover, .selectable.selected-btn1 .btn1 a:focus, .selectable.selected-btn2 .btn2 a:hover, .selectable.selected-btn2 .btn2 a:focus, .selectable.selected-btn3 .btn3 a:hover, .selectable.selected-btn3 .btn3 a:focus, .selectable.selected-btn4 .btn4 a:hover, .selectable.selected-btn4 .btn4 a:focus, .selectable.selected-btn5 .btn5 a:hover, .selectable.selected-btn5 .btn5 a:focus, .selectable .selected a:hover, .selectable .selected a:focus { background-color: #108d46; } .selectable.selected-btn1 .btn1 a:hover, .selectable.selected-btn1 .btn1 a:focus, .selectable.selected-btn2 .btn2 a:hover, .selectable.selected-btn2 .btn2 a:focus, .selectable.selected-btn3 .btn3 a:hover, .selectable.selected-btn3 .btn3 a:focus, .selectable.selected-btn4 .btn4 a:hover, .selectable.selected-btn4 .btn4 a:focus, .selectable.selected-btn5 .btn5 a:hover, .selectable.selected-btn5 .btn5 a:focus, .selectable .selected a:hover, .selectable .selected a:focus { color: #FFFFFF; } .selectable.selected-btn1 .btn1 a i.fa, .selectable.selected-btn2 .btn2 a i.fa, .selectable.selected-btn3 .btn3 a i.fa, .selectable.selected-btn4 .btn4 a i.fa, .selectable.selected-btn5 .btn5 a i.fa, .selectable .selected a i.fa { display: inline-block; } .button-group.expand { width: 100%; display: table; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } @media only screen and (max-width: 1024px) { .button-group.expand { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .button-group.expand li { display: table-cell; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; } .button-group.expand li .button, .button-group.expand li button { padding-top: 1rem; padding-right: 2rem; padding-bottom: 1.07143rem; padding-left: 2rem; font-size: 1.14286rem; padding-top: 1rem; padding-bottom: 1.07143rem; padding-right: 0; padding-left: 0; width: 100%; } .input-space .button-group.expand li .button, .switch-input-space .button-group.expand li .button, .input-space .button-group.expand li button, .switch-input-space .button-group.expand li button { padding-top: .57143rem; padding-bottom: .57143rem; } .radio, .radio-content { vertical-align: middle; } .radio-group-holder { margin-bottom: .75rem; } .radio-group { border: #cccccc 1px solid; padding: .5rem; border-radius: .5rem; overflow: hidden; min-height: 3rem; clear: none; } .warning .radio-group { border-color: #de404e; } .error .radio-group { border-color: #de404e; } .radio-group .radio { width: 5rem; padding: 0 .75rem; text-align: center; min-height: 3rem; background-color: #e6e6e6; border-radius: 10px; display: table-cell; width: 3rem; } .radio-group .radio input[type='radio'] { margin: 0 auto; text-align: center; min-height: 3rem; height: 3rem; vertical-align: middle; position: relative; } .radio-group .radio-content { padding-left: .5rem; min-height: 3rem; display: table-cell; } .radio-group .radio-content > * { margin-bottom: 0; } .radio-group:hover { background-color: #e6e6e6; } .radio-group:hover .radio { background-color: #cccccc; } /** * Radio Button with Grouped Content: * `.radio-group` - This is a structural container for radio buttons that have an extended amount of content that goes with the radio button. * * @example *
*
* *
*
*
* *
*
* *
*
*
* Error message * Warning message * Data message *
*
This is some hint text
*
**/ .repeater { width: 100%; margin: 0; max-width: 114.28571rem; } .repeater:before, .repeater:after { content: " "; display: table; } .repeater:after { clear: both; } .repeater .render, .repeater .question-group, .repeater .repeater-action { padding-left: 0; padding-right: 0; width: 100%; float: left; } .repeater.required > .label-holder .required-holder { color: #E08514; } .repeater.required > .label-holder .required-holder i.fa-holder-dynamic:before, .repeater.required > .label-holder .required-holder.dynamic i.fa-holder:before { content: ""; } .repeater .edit, .repeater .clear, .repeater .delete, .repeater .add, .repeater .set, .repeater .save { font-size: .8rem; line-height: 1rem; padding: .5rem .4rem; text-decoration: none; height: 1.8rem; } .repeater .edit .text, .repeater .clear .text, .repeater .delete .text, .repeater .add .text, .repeater .set .text, .repeater .save .text { text-transform: capitalize; } .repeater .edit .fa + .text, .repeater .clear .fa + .text, .repeater .delete .fa + .text, .repeater .add .fa + .text, .repeater .set .fa + .text, .repeater .save .fa + .text { padding-left: .25rem; } .repeater .edit, .repeater .clear, .repeater .delete, .repeater .set, .repeater .save { color: gray; } .repeater .edit:hover, .repeater .clear:hover, .repeater .delete:hover, .repeater .set:hover, .repeater .save:hover { color: black; } .repeater .edit:hover .text, .repeater .clear:hover .text, .repeater .delete:hover .text, .repeater .set:hover .text, .repeater .save:hover .text { text-decoration: underline; } .repeater .render, .repeater .question-group { padding-left: 1.21429rem; padding-right: 1.21429rem; } .repeater .render { position: relative; display: block; border-top: 1px dotted #e6e6e6; border-bottom: 1px dotted #e6e6e6; } .repeater .render a.button, .repeater .render button { margin-bottom: 0; } .repeater .render + .render { border-top: 0px none; } .repeater .render .render-holder { margin: 0 17rem 0 0; padding: 0.5rem 0; } .repeater .render .comma-after:after { content: ","; padding-left: .25em; display: inline; } .repeater .render .render-actions { position: absolute; display: inline-block; height: 2rem; top: 0; right: 0; padding: .5rem 0; } @media only screen and (max-width: 1024px) { .repeater .render .render-actions .text { display: none; } } .repeater .render .starred { color: #14B057; } .repeater .render .break { border-left: 2px solid #b3b3b3; padding-left: .5rem; margin-left: .25rem; } .repeater .render .error { color: #c32231; } .repeater .render .warning { color: #c32231; } @media only screen and (max-width: 767px) { .repeater .render .edit, .repeater .render .delete, .repeater .render .set { display: inline-block; float: left; } .repeater .render .render-holder { margin-right: 5rem; font-size: .9rem; } } .repeater .render { max-height: 1000px; -webkit-transition: max-height 0.8s; -moz-transition: max-height 0.8s; transition: max-height 0.8s; overflow: hidden; } .repeater .edit-mode--show { display: none; } .repeater.edit-mode .render { max-height: 0; } .repeater.edit-mode .edit-mode--show { display: inline; display: initial; } .repeater.edit-mode .edit-mode--hide { display: none; } .repeater .question-group { padding-top: 1.5em; padding-bottom: 1.85em; border: 2px dotted #d5e6eb; margin-top: .5em; border-radius: .5em; border-top: 2px soliddesaturate(#25b6e0, 40%); border-bottom: 2px solid #579bae; background-image: url(../img/empty_stripe@2x.png); background-color: #e6f0f3; position: relative; } .repeater .question-group .answer.required .required-holder, .repeater .question-group .question.required .required-holder { color: #198dae; } .repeater .question-group .required-message { font-size: 0.85714rem; padding: .25em .5em; position: absolute; top: -2px; right: -2px; background-color: #579bae; color: #fff; -webkit-transition: background-color 0.8s; -moz-transition: background-color 0.8s; transition: background-color 0.8s; } .repeater.edit-mode .question-group { border: 2px dotted #ebdadc; margin-top: .5em; border-radius: .5em; border-top: 2px soliddesaturate(#de404e, 40%); border-bottom: 2px solid #b16d73; background-image: url(../img/empty_stripe@2x.png); background-color: #fcf0e2; } .repeater.edit-mode .question-group .required-message { background-color: #999999; } .repeater .repeater-action { position: relative; display: block; width: 100%; height: 2rem; margin-top: -2rem; } .repeater .repeater-action .add-new-repeater { display: inline-block; position: relative; text-align: right; float: right; margin-top: -1em; padding: .5rem; } .repeater .repeater-action .add-new-repeater .text { color: #198dae; display: inline-block; padding-right: 2rem; font-size: 1rem; } .repeater .repeater-action .save, .repeater .repeater-action .clear { font-size: 1rem; padding: .35rem .75rem .45rem; border-radius: 4px; height: auto; border: 2px solid #198dae; font-weight: 900; } .repeater .repeater-action .save { display: inline-block; position: relative; text-align: right; float: right; background-color: #198dae; color: white; text-decoration: none; margin-right: 1em; } .repeater .repeater-action .save:hover { background-color: #14B057; text-decoration: none; } .repeater .repeater-action .clear { float: left; background-color: white; border-radius: 4px; margin-left: 1em; border-color: #25b6e0; } .repeater .repeater-action .clear:hover { background-color: #e6e6e6; border-color: #198dae; } .edit-mode.repeater .repeater-action .clear { background-color: #666666; border-color: #4d4d4d; color: #fff; } .edit-mode.repeater .repeater-action .clear:hover { background-color: #404040; border-color: #333333; color: #fff; } .question-group .render .message-holder .warning, .question-group .render .message-holder .error { display: none; } .question-group .render .message-holder .warningsmall, .question-group .render .message-holder .warningspan, .question-group .render .message-holder .errorsmall, .question-group .render .message-holder .errorspan { margin-bottom: .65rem; } .question-group .render.warning .message-holder .warning { display: block; } .question-group .render.error .message-holder .error { display: block; } /** * Form Repeater: * `.repeater` - This is form elements repeater. This Module is broken into 3 major containers. The `renders` are any previously saved collection of inputs.The `question-group` holds all of the questions that need to be repeated. And the `.repeater-actions` is the buttons to save|submit and cancel the current session of inputs. * The repeater has a focused mode when editing adding `.repeater.edit-mode` to the containter will hide the renders at the top and toggle any elements that have been tagged with `.edit-mode--hide` and `.edit-mode--show`. * * @example *
*
* *
*
*
* edit * delete *
* *
* * * This is a dynamic render message. * *
*
*
*
All inputs marked with the * are required to submit and save
*

Edit Record

Add Record

*
*
*
* *
*
*
* *
*
* Years *
*
*
* Error message * Warning message * Data message *
*
This is some hint text
*
*
*
* *
*
*
* *
*
* Years *
*
*
* Error message * Warning message * Data message *
*
This is some hint text
*
*
*
* *
*
*
* *
*
* Years *
*
*
* Error message * Warning message * Data message *
*
This is some hint text
*
*
*
* * This is a dynmic message for the question group. * *
*
*
* clear * save *
*
*
*
* *
*
*
* edit * delete *
* *
* * * This is a dynamic render message. * *
*
*
*
All inputs marked with the * are required to submit and save
*

Edit Record

Add Record

*
*
* Question Block *
*
* Question Block *
*
* Question Block *
*
*
* * This is a dynmic message for the question group. * *
*
*
* clear * save *
*
*/ /** * Tables: * `table` - plan tables are clean with barely any styles. * * @example * * * * * * * * * * * * * * * * * * * * * * * * * *
table headertable headertable header
table row 1 table cell A
this is small text		table row 1 table cell B
this is small text with blue		table row 1 table cell C
table row 2 table cell Atable row 2 table cell Btable row 2 table cell C
footer cell
*/ table a.button, table button, table .inline-list, table .nobutton { margin: 0; } .table { width: 100%; border-collapse: collapse; border: 0; margin-bottom: 1rem; font-size: 1rem; } .table tr + tr td, .table tr + tr th { border-top: #e6e6e6 1px solid; } .table thead tr:last-child th { border-bottom: 2px solid #198dae; } .table td, .table th { text-align: left; padding: .25rem; } .table td .color-highlighted, .table th .color-highlighted { color: #25b6e0; } .table td small, .table th small { font-size: 80%; color: #999999; } .table th { font-size: 1em; line-height: 1.5em; margin-top: 0em; margin-bottom: 0em; font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 700; border: 0; vertical-align: bottom; } .table th.h1, .table thh2, .table thh3, .table thh4 { margin-top: 0; clear: both; margin-bottom: -.15em; } .table th .with-underline { border-bottom: 1px dotted #e6e6e6; } .table td { vertical-align: middle; } .table tfoot tr td { border: 0; border-top: 1px solid #b3b3b3; font-size: .9rem; } /** * Tables (Banded): * `.banded` - There are two high styled tables `.banded` or `.stripped`. * * @example * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
table headertable headertable header
row 1 cell A row 1 cell B row 1 cell C
row 2 cell A row 2 cell B row 2 cell C
row 3 cell A row 3 cell B row 3 cell C
footer cell
*/ /** * Tables (Stripped): * ` .stripped` - Table with the class`.stripped`. * * @example * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
table headertable headertable header
row 1 cell A row 1 cell B row 1 cell C
row 2 cell A row 2 cell B row 2 cell C
row 2 cell A row 2 cell B row 2 cell C
footer cell
*/ .banded tr:nth-child(even), .stripped tbody tr:nth-child(even) { background-color: #e6e6e6; } .stripped th:nth-child(odd), .stripped td:nth-child(odd) { background-color: #e4f6fb; } .stripped tbody tr:nth-child(even) td:nth-child(odd) { background-color: #dee9ed; } .stripped tbody tr + tr td, .banded tbody tr + tr td { border-top: 0px solid; } .stripped th, .stripped td, .banded th, .banded td { padding: .25rem .25rem .25rem .55rem; } .stripped tfoot td, .stripped tfoot td:nth-child(odd), .banded tfoot td, .banded tfoot td:nth-child(odd) { color: #333; border-top: 1px solid #198dae; background-color: #cccccc; } .table .seperator td, .table .seperator:nth-child(even) td:nth-child(odd) { padding-top: 2.2px; padding-top: 0.1375rem; padding-bottom: 2.2px; padding-bottom: 0.1375rem; /* can be treated like a fallback */ background-color: #1faed7; /* will be "on top", if browser supports it */ background-image: linear-gradient(to left, #2fbae1, #1c9dc1); /* these will reset other properties, like background-position, but it does know what you mean */ background: #1faed7; background: linear-gradient(to left, #2fbae1, #1c9dc1); border-top: #1c9dc1 1px solid; border-bottom: #1c9dc1 2px solid; color: #fff; font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 300; font-style: italic; font-size: .75rem; } /** * Tables Row(Seperator): * ` .seperator` - Table with the class`.stripped`. * * @example * * * * * * * * * * * * * * * * * * * * * * * *
table headertable headertable header
row 1 cell A row 1 cell B row 1 cell C
Separator
footer cell
*/ /** * Tables (Sortable): * `.banded or .stripped` - tables witha soratable table header. * Just add the class of the column to the table `.col1` and the sort direction `.sort-asc` or `.sort-desc`. * * @example * * * * * * * * * * * * * * * * * * * * * * * * * *
*
* * * * Table Header *
* 		*
* * * * Toggle Sorter *
* 		*
* * * * Long Table
Header *
*
row 1 cell A row 1 cell B row 1 cell C
row 2 cell A row 2 cell B row 2 cell C
footer cell
*/ .table thead tr:last-child th.sortable { border-bottom: none 0; } .table thead th.sortable { vertical-align: top; } .sortableheader { background-color: gray; } th.sortable { font-size: 1rem; font-weight: 700; padding: 0; position: relative; overflow: hidden; border-bottom: 0px none transparent; background-color: gray !important; } th.sortable:hover { background-color: #737373 !important; } th.sortable select { font-size: 0.92857rem; margin: 0 0 0 .5em; padding-left: 2em; border: 0 none transparent; background-color: #737373; height: 100%; top: 0; bottom: 0; position: absolute; left: auto; width: 100%; font-family: 'Roboto Condensed', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 700; color: #FFF; right: 0; vertical-align: top; padding-top: 0; } th.sortable select:hover { background-color: #4c4c4c; } th.sortable .sort { position: absolute; top: 0; left: 0; bottom: 0; display: inline-block; background-color: #666666; padding: 0 3px; vertical-align: middle; } th.sortable .sort .fa-sort { color: #cccccc; top: .5rem; position: relative; vertical-align: middle; width: 1em; height: 1em; text-align: center; } th.sortable .sort .fa-sort:before { content: "\f0dc"; } th.sortable .sort .fa-sort.selected { color: #E08514; } th.sortable .sort.sorttwoways .fa-sort { position: relative; } th.sortable .sort.sorttwoways .fa-sort:before { content: "\f0de"; } th.sortable .sort.sorttwoways .fa-sort + .fa-sort:before { content: "\f0dd"; } th.sortable .sort.sorttwoways .fa-sort + .fa-sort { position: absolute; top: auto; bottom: 0.5rem; } th.sortable.selected .sort { background-color: #4c4c4c; } th.sortable.selected .sorttoggle .fa-sort { color: #E08514; } th.sortable.selected.asc .sorttoggle .fa-sort:before { content: "\f0de"; } th.sortable.selected.desc .sorttoggle .fa-sort:before { content: "\f0dd"; } th.sortable .text { color: white; padding: .25rem .5rem 0rem 1.25rem; white-space: normal; display: block; line-height: 1.25; min-height: 3em; } @media only screen and (min-width: 1024px) { th.sortable .text { padding: 0.5rem 0.625rem 0.25rem 2rem; } } th.sortable:hover.text { color: #e6e6e6; } th.sortable .has-tip { border: none 0; } .firefoxfix { position: initial; height: 100%; } td.error, .table tbody tr + tr td.error, tr.error td, .stripped tr.error:nth-child(even) td:nth-child(odd), tr:nth-child(even) td.error, tr:nth-child(even).error td, td.warning, .table tbody tr + tr td.warning, tr.warning td, .stripped tr.warning:nth-child(even) td:nth-child(odd), tr:nth-child(even) td.warning, tr:nth-child(even).warning td, td.validated, .table tbody tr + tr td.validated, tr.validated td, .stripped tr.validated:nth-child(even) td:nth-child(odd), tr:nth-child(even) td.validated, tr:nth-child(even).validated td, td.info, .table tbody tr + tr td.info, tr.info td, .stripped tr.info:nth-child(even) td:nth-child(odd), tr:nth-child(even) td.info, tr:nth-child(even).info td, td.highlighted, .table tbody tr + tr td.highlighted, tr.highlighted td, .stripped tr.highlighted:nth-child(even) td:nth-child(odd), tr:nth-child(even) td.highlighted, tr:nth-child(even).highlighted td, td.completed, .table tbody tr + tr td.completed, tr.completed td, .stripped tr.completed:nth-child(even) td:nth-child(odd), tr:nth-child(even) td.completed, tr:nth-child(even).completed td, td.disabled, .table tbody tr + tr td.disabled, tr.disabled td, .stripped tr.disabled:nth-child(even) td:nth-child(odd), tr:nth-child(even) td.disabled, tr:nth-child(even).disabled td, td.attention, .table tbody tr + tr td.attention, tr.attention td, .stripped tr.attention:nth-child(even) td:nth-child(odd), tr:nth-child(even) td.attention, tr:nth-child(even).attention td { color: #333333; } td.icon { padding: .25rem .25rem .25rem .25rem; text-align: center; vertical-align: middle; width: 1%; } td.icon i { margin: 0 auto; } tr.error td, tr.warning td, tr.validated td, tr.info td, tr.highlighted td, tr.completed td, tr.disabled td, tr.attention td { background-image: url(../img/empty_stripe@2x.png); font-weight: 900; } .stripped tr.error td:nth-child(odd), .stripped tr.warning td:nth-child(odd), .stripped tr.validated td:nth-child(odd), .stripped tr.info td:nth-child(odd), .stripped tr.highlighted td:nth-child(odd), .stripped tr.completed td:nth-child(odd), .stripped tr.disabled td:nth-child(odd), .stripped tr.attention td:nth-child(odd) { background-image: url(../img/empty_stripe-alt@2x.png); font-weight: 900; } td.error, .table tbody tr + tr td.error, td.warning, .table tbody tr + tr td.warning, td.validated, .table tbody tr + tr td.validated, td.info, .table tbody tr + tr td.info, td.highlighted, .table tbody tr + tr td.highlighted, td.completed, .table tbody tr + tr td.completed, td.disabled, .table tbody tr + tr td.disabled, td.attention, .table tbody tr + tr td.attention { background-image: url(../img/empty_diamond@2x.png) !important; font-weight: 900; } td.error, td.warning, td.validated, td.info, td.highlighted, td.completed, td.disabled, td.attention { border: 1px solid; } tr.error td, tr.warning td, tr.validated td, tr.info td, tr.highlighted td, tr.completed td, tr.disabled td, tr.attention td { border-top: 1px solid; border-bottom: 1px solid; } td.error, .table tbody tr + tr td.error, tr.error td, .stripped tr.error:nth-child(even) td:nth-child(odd) { background-color: #f4d9db; border-color: #f2b7bd; } tr:nth-child(even) td.error { background-color: #f1ced1; } tr:nth-child(even).error td { background-color: #f1ced1; } .stripped tbody tr.error td:nth-child(odd) { background-color: #f4d9db; } td.warning, .table tbody tr + tr td.warning, tr.warning td, .stripped tr.warning:nth-child(even) td:nth-child(odd) { background-color: #f9ead7; border-color: #f8dbb6; } tr:nth-child(even) td.warning { background-color: #f8e4cb; } tr:nth-child(even).warning td { background-color: #f8e4cb; } .stripped tbody tr.warning td:nth-child(odd) { background-color: #f9ead7; } td.validated, .table tbody tr + tr td.validated, tr.validated td, .stripped tr.validated:nth-child(even) td:nth-child(odd) { background-color: #d7f1e2; border-color: #aaf5cb; } tr:nth-child(even) td.validated { background-color: #cbedda; } tr:nth-child(even).validated td { background-color: #cbedda; } .stripped tbody tr.validated td:nth-child(odd) { background-color: #d7f1e2; } td.info, .table tbody tr + tr td.info, tr.info td, .stripped tr.info:nth-child(even) td:nth-child(odd) { background-color: #f3fbfd; border-color: #ebf8fc; } tr:nth-child(even) td.info { background-color: #f0f9fc; } tr:nth-child(even).info td { background-color: #f0f9fc; } .stripped tbody tr.info td:nth-child(odd) { background-color: #f3fbfd; } td.highlighted, .table tbody tr + tr td.highlighted, tr.highlighted td, .stripped tr.highlighted:nth-child(even) td:nth-child(odd) { background-color: #d9f1f8; border-color: #bbe8f4; } tr:nth-child(even) td.highlighted { background-color: #ceedf6; } tr:nth-child(even).highlighted td { background-color: #ceedf6; } .stripped tbody tr.highlighted td:nth-child(odd) { background-color: #d9f1f8; } td.completed, .table tbody tr + tr td.completed, tr.completed td, .stripped tr.completed:nth-child(even) td:nth-child(odd) { background-color: #d7f1e2; border-color: #aaf5cb; } tr:nth-child(even) td.completed { background-color: #cbedda; } tr:nth-child(even).completed td { background-color: #cbedda; } .stripped tbody tr.completed td:nth-child(odd) { background-color: #d7f1e2; } td.disabled, .table tbody tr + tr td.disabled, tr.disabled td, .stripped tr.disabled:nth-child(even) td:nth-child(odd) { background-color: #f2f2f2; border-color: #e8e8e8; } tr:nth-child(even) td.disabled { background-color: #eeeeee; } tr:nth-child(even).disabled td { background-color: #eeeeee; } .stripped tbody tr.disabled td:nth-child(odd) { background-color: #f2f2f2; } td.attention, .table tbody tr + tr td.attention, tr.attention td, .stripped tr.attention:nth-child(even) td:nth-child(odd) { background-color: #f9ead7; border-color: #f8dbb6; } tr:nth-child(even) td.attention { background-color: #f8e4cb; } tr:nth-child(even).attention td { background-color: #f8e4cb; } .stripped tbody tr.attention td:nth-child(odd) { background-color: #f9ead7; } /** * Table States Cells: * `td.state-name` - quickly color table cells. * * @example * * * * * * * * * * * * * * * * * * * * * * * * * *
Text Warning
Text Info
Error Text
Validated text
*/ /** * Table States - Rows: * `tr.state` - quickly color table rows with the states. * * @example * * * * * * * * * * * * * * * * * * * * * * * * * *
Cell Data in validated RowIcon is Dynamic
Cell Data in Warning RowI am an error cell
Cell Data in Warning Rowdata
Icon is DynamicCell Data in Error RowCell Data
*/ /** * Collapsable Panels: * `.collapsable-panel` - a container element which naturaly is hiden and reveals when it is prompted. This element is great for `read more` links when the content is small.

!! Requires Javascript to Function !! * * @example *
*
*
*
* close *
*
*
*
*

H2 in a collapse panel

*

All basic html content can be placed in the panel

*
*
*
*
* top *
*
*
*
*
*
* close *
*
*
*
*

H2 in an inset collapse panel

*

All basic html content can be placed in the panel

*
*
*
*
* top *
*
*
*
*/ .bar { position: absolute; left: 0; width: 100%; z-index: 10; } .bar .action-btn { text-transform: lowercase; padding: .2rem .4rem .2rem .5rem; font-size: 1rem; right: 0; position: absolute; display: inline-block; } .bar.close { top: -2px; } .bar.close .action-btn { top: -1.1rem; color: #198dae; } .bar.jumpToTop { bottom: -2px; } .bar.jumpToTop .action-btn { bottom: -1rem; color: #666666; } .collapsable-panel { position: relative; width: 100%; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; max-width: 114.28571rem; max-width: none; margin-bottom: 1rem; display: none; } .collapsable-panel:before, .collapsable-panel:after { content: " "; display: table; } .collapsable-panel:after { clear: both; } .collapsable-panel .bar.close { border-top: 2px solid #198dae; } .collapsable-panel .bar.close .action-btn { background-color: white; } .collapsable-panel .bar.jumpToTop { border-bottom: 2px solid #666666; } .collapsable-panel .bar.jumpToTop .action-btn { background-color: white; } .collapsable-panel .content { padding-left: 0.5rem; padding-right: 0.5rem; width: 100%; float: left; padding: 2rem 1rem; z-index: 0; } .collapsable-panel.inset { background-color: white; background: url("../img/billie-holiday.png") repeat top right; border: 0 none; } .collapsable-panel.inset .content { padding-left: 0.5rem; padding-right: 0.5rem; width: 100%; float: left; padding: 3.5rem 1.5rem; z-index: 0; } .collapsable-panel.inset .bar.close { border-top: 7px solid #198dae; top: -2px; } .collapsable-panel.inset .bar.close .action-btn { top: 0; color: white; background-color: #198dae; } .collapsable-panel.inset .bar.jumpToTop { bottom: -2px; border-bottom: 7px solid #9a9a9a; } .collapsable-panel.inset .bar.jumpToTop .action-btn { bottom: 0; color: white; background-color: #9a9a9a; } h1 + div > .collapsable-panel { margin-bottom: 1.5rem; margin-top: -1.5rem; } table + div > .collapsable-panel { margin-top: -1rem; margin-bottom: 0.7rem; } .collapsable-panel.error { background-color: transparent; border: 0 none transparent; } .collapsable-panel.error.inset { background-color: #fbe7e9; } .collapsable-panel.error.inset .bar.close .action-btn { color: #fff; } .collapsable-panel.warning { background-color: transparent; border: 0 none transparent; } .collapsable-panel.warning.inset { background-color: #fdf3e7; } .collapsable-panel.warning.inset .bar.close .action-btn { color: #fff; } .collapsable-panel.validated { background-color: transparent; border: 0 none transparent; } .collapsable-panel.validated.inset { background-color: #e3fcee; } .collapsable-panel.validated.inset .bar.close .action-btn { color: #fff; } .collapsable-panel.info { background-color: transparent; border: 0 none transparent; } .collapsable-panel.info.inset { background-color: #f8fdfe; } .collapsable-panel.info.inset .bar.close .action-btn { color: #333333; } .collapsable-panel.highlighted { background-color: transparent; border: 0 none transparent; } .collapsable-panel.highlighted.inset { background-color: #e8f7fb; } .collapsable-panel.highlighted.inset .bar.close .action-btn { color: #fff; } .collapsable-panel.completed { background-color: transparent; border: 0 none transparent; } .collapsable-panel.completed.inset { background-color: #e3fcee; } .collapsable-panel.completed.inset .bar.close .action-btn { color: #fff; } .collapsable-panel.disabled { background-color: transparent; border: 0 none transparent; } .collapsable-panel.disabled.inset { background-color: #f7f7f7; } .collapsable-panel.disabled.inset .bar.close .action-btn { color: #333333; } .collapsable-panel.attention { background-color: transparent; border: 0 none transparent; } .collapsable-panel.attention.inset { background-color: #fdf3e7; } .collapsable-panel.attention.inset .bar.close .action-btn { color: #fff; } /** * Collapsable Panel (State): * `.collapsable-panel` - Collapse panels can be used with states and the panels subtly color with the state colors.

!! Requires Javascript to Function !! * * @example *
*
*
*
* close *
*
*
*
*

H2 in Panel

*

All basic html content can be placed in the panel

*
*
*
*
* top *
*
*
*
*
*
* close *
*
*
*
*

H2 in Inset Panel

*

All basic html content can be placed in the panel

*
*
*
*
* top *
*
*
*
*/ .fa-rotate-90 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .fa-rotate-180 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .fa-rotate-270 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .fa-flip-horizontal { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); -webkit-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } .fa-flip-vertical { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -webkit-transform: scale(1, -1); -ms-transform: scale(1, -1); transform: scale(1, -1); } :root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-flip-horizontal, :root .fa-flip-vertical { filter: none; } .accordion .collapsable-panel { display: block; } .accordion .toggle .fa { color: #25b6e0; -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .accordion .toggle .fa.fa-holder:before { content: ""; } .accordion .toggle .text { color: #5c5c5c; padding-left: .5rem; } .accordion .toggle:hover .fa { color: #198dae; } .accordion .toggle:hover .text { color: #333333; } .accordion .selected .toggle .fa { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); color: #14b057; } /** * Accordion (requires Collapsable Panel SCSS): * `.accordion` - Accordions are built from a group of `Collapsable Panels` and are never full hidden like the collapsable panel. By default only one `panel` of the accordian can be open at a time.

!! Requires Javascript to Function !! * * @example *
*
*

Header and Toggle Area (Open)

*
*
* close *
*
*
*
*

Content

*
*
*
*
* top *
*
*
*
*

Header and Toggle Area (Closed)

*
*
*/ /** * Panel Selector: * `.panel-selector-holder` - the panel selector is a multi tree level selector allowing a user to select from the left coloum or parent and then select the filtered child elements. !! Requires Javascript!! * * @example *
*
* *
*
* *
*
* Javascript API Documentaion */ /** * Knockout Panel Selector: * `.panel-selector-holder` - the panel selector is a multi tree level selector allowing a user to select from the left coloum or parent and then select the filtered child elements. !! Requires Javascript!! * * @example *
*
* *
*
*
*/ .panel-selector-holder { display: block; position: relative; width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex !important; -webkit-flex-flow: column nowrap; -moz-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-align-content: strech; -moz-align-content: strech; -ms-align-content: strech; align-content: strech; -webkit-align-items: strech; -moz-align-items: strech; -ms-align-items: strech; align-items: strech; } .panel-selector { max-height: 15em; display: block; position: relative; clear: both; width: 100%; overflow: auto; border: 1px solid #b3b3b3; margin-left: -1px; -webkit-box-flex: felx-start 1 auto; -moz-box-flex: felx-start 1 auto; -webkit-flex: felx-start 1 auto; -ms-flex: felx-start 1 auto; flex: felx-start 1 auto; } .panel-selector.active-focus { -moz-box-shadow: inset 0 0 10px #198dae; -webkit-box-shadow: inset 0 0 10px #198dae; box-shadow: inset 0 0 10px #198dae; } .panel-selector .paenl-selector-group-title { font-size: 17px; padding: .5em .75em; font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 700; background-color: #198dae; color: #fff; } .panel-selector ul { overflow-x: visible; } .panel-selector .group-title li { margin: 3px; white-space: nowrap; } .panel-selector .group-title li + li { margin-top: 0; } .panel-selector .group-title li.j-focused, .panel-selector .group-title li.focused { background-color: #e6e6e6; } .panel-selector .group-title li.j-selected, .panel-selector .group-title li.selected { background-color: #14B057; } .panel-selector .group-title li.j-selected > i.fa-holder:before, .panel-selector .group-title li.j-selected.fa:before, .panel-selector .group-title li.selected > i.fa-holder:before, .panel-selector .group-title li.selected.fa:before { content: ""; } .panel-selector .group-title li.j-selected .text, .panel-selector .group-title li.j-selected .fa, .panel-selector .group-title li.selected .text, .panel-selector .group-title li.selected .fa { color: #fff; } /** * Button Selectors: * `.button-group` - !! Requires Javascript!! * * @example *
* Javascript API Documentaion */ .button-group li a.button { background-color: #b3b3b3; } .button-group li + li { margin-top: 0; } .button-group li.j-focused a.button, .button-group li.focused a.button { background-color: #198dae; } .button-group li.j-selected a.button, .button-group li.selected a.button { background-color: #14B057; } .button-group li.j-selected a.button > i.fa-holder:before, .button-group li.j-selected a.button.fa:before, .button-group li.selected a.button > i.fa-holder:before, .button-group li.selected a.button.fa:before { content: ""; } .button-group li.j-selected a.button .text, .button-group li.j-selected a.button .fa, .button-group li.selected a.button .text, .button-group li.selected a.button .fa { color: #fff; } /** * Toggle Select: * `.toggle .miniized` - small multi position toggle. there is not animation like the switches and are not driven by an imput. * * @example * * */ ul.toggle { background: #e6e6e6 url("../img/billie-holiday.png") repeat top right; border: 2px solid #cccccc; list-style: none; display: inline-block; margin: 0; padding: 0px 2px; border-radius: 6px; font-size: 1rem; } ul.toggle a, ul.toggle a:link { text-decoration: none; line-height: 1em; } ul.toggle .toggle-position { display: inline-block; padding: .25em .375em; border: 1px solid transparent; border-radius: 5px; background-color: #e6e6e6; opacity: .75; font-weight: 700; } ul.toggle .toggle-position a { color: #333333; } ul.toggle .toggle-position:hover { background-color: #198dae; opacity: 1; } ul.toggle .toggle-position:hover a { color: #fff; } ul.toggle .toggle-position a { box-sizing: border-box; padding: .25em .5em; display: block; } ul.toggle .toggle-position.selected { opacity: 1; border: #17cc65 0.2em solid; background-color: #17cc65; margin: -.25em 0px; border-radius: 5px; font-weight: 900; padding: .45em .375em; } ul.toggle .toggle-position.selected:hover { background-color: #17cc65; border-color: #14B057; } ul.toggle .toggle-position.selected a { color: #fff; } ul.toggle.minimized { font-size: .75rem; border-radius: 1px; } ul.toggle.minimized .toggle-position { border-radius: 2px; } ul.toggle.minimized .selected { border-radius: 2px; border-width: 2px; margin: -3px; } .data-display { width: 100%; background-color: #198dae; display: block; } .data-display .h3, .data-display h3, .data-display h1 + .nav-list li, h1 + .nav-list .data-display li, .data-display h1 + .panel-selector li, h1 + .panel-selector .data-display li, .data-display .large.nav-list li, .large.nav-list .data-display li, .data-display .large.panel-selector li, .large.panel-selector .data-display li, .data-display .table th.h3, .table .data-display th.h3, .data-display strong { color: white; } .data-display strong { display: block; } .data-display .data { padding: .75rem 1rem 1.25rem; -moz-transition: padding .5s ease; -webkit-transition: padding .5s ease; -o-transition: padding .5s ease; transition: padding .5s ease; } .data-display.stuck { position: fixed; top: 0; right: 0; z-index: 1000; width: 100%; } .data-display.stuck .data { padding: .5rem 1rem .75rem; } .data-display.shrink { background-color: #14B057; font-size: .8rem; } .data-display.shrink strong { display: inline; } .data-display.shrink .h3, .data-display.shrink h3, .data-display.shrink h1 + .nav-list li, h1 + .nav-list .data-display.shrink li, .data-display.shrink h1 + .panel-selector li, h1 + .panel-selector .data-display.shrink li, .data-display.shrink .large.nav-list li, .large.nav-list .data-display.shrink li, .data-display.shrink .large.panel-selector li, .large.panel-selector .data-display.shrink li { display: block; margin-bottom: 0; } .data-display.shrink .data { padding: .25rem; } /** * Sticky Headers with Scorebars: * `.data-display` - * * @example *
*
* * *
*
*
* Risk Scores * CHA2DS2-VASc: 3 * HAS-BLED: 2.1 *
*
* Renal Status * Cr: 1.2 (CrCL: 1.4 ) * CKD: 6 *
*
*
**/ .branding { background-color: white; } .branding .oma { font-size: 0; color: #fff; width: 100%; height: 4.5rem; background-origin: padding-box; background-size: contain; padding: 0.5rem 0.5rem 0.5rem; } .branding .logo, .branding .title { margin-bottom: 0; } .branding .logo { background: url("../img/oma-01.svg") no-repeat top left; background-origin: content-box; background-size: contain; } .branding .title { background: url("../img/oma-02.svg") no-repeat top right; background-origin: content-box; background-size: contain; } .blue-bar { padding: .25rem 1rem; background-color: #00386b; } .blue-bar .link { font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 1rem; } /** * User ID Block: * `.user-id-block` - OMA User Id Container. * * @example *
* Avatar of Members Name * *
*/ .header.application-frame { border-bottom: #00386b 5px solid; } .header.application-frame .logo { float: left; } .header.application-frame .logo img { margin: 5px 3px 0; height: 75px; max-width: none; } .header.application-frame .nav.tabs.primary { float: right; display: inline-block; width: auto; } .header.application-frame .user-id-block-alt { display: inline-block; list-style: none; padding: 0 1em 0; float: right; } .header.application-frame:after { content: ""; display: table; clear: both; } .user-id-block { margin: 2px; border: 1px solid #e6e6e6; padding-top: .5rem; padding-bottom: .75rem; position: relative; background-color: #fff; } .user-id-block .user-pic { float: left; -webkit-clip-path: circle(40px at center); -webkit-moz-path: circle(40px, 40px, 40px); clip-path: circle(40px, 40px, 40px); } .user-id-block .user-pic { margin: .5rem 5px .5rem 5px; } .user-id-block .user-info { margin: .5rem .5rem .5rem -100px; padding-left: 105px; float: right; display: block; box-sizing: border-box; width: 100%; } .user-id-block .user-info .user-name, .user-id-block .user-info .user-designation, .user-id-block .user-info .user-profession, .user-id-block .user-info .user-application { line-height: 1.25rem; } .user-id-block .user-info .user-name { font-family: 'Roboto Slab', "Times New Roman", 'Lucida Bright', Georgia, serif; font-weight: 400; font-weight: 700; font-size: 1.5rem; color: #333333; line-height: 2rem; } .user-id-block .user-info .user-application-switch { font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 300; font-size: .75rem; line-height: 1.25rem; } @media only screen and (max-width: 1024px) { .user-id-block .user-pic, .user-id-block .user-info { float: none; position: relative; } .user-id-block .user-pic { margin: 0 auto; display: block; } .user-id-block .user-info { margin: 0; padding: 0 1rem; text-align: center; } } .autosave-block { display: inline-block; text-align: left; color: #fff; background-color: #198dae; width: 100%; padding: .25rem; position: fixed; top: 0; font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 700; } /** * (OMA) Membership Selection Table: * `.membership-table` - A table card that shows the details for membership selections. * * @example * */ .membership-table { display: block; list-style: none; color: #5c5c5c; } .membership-table .membership-table_title, .membership-table .membership-table_price, .membership-table .membership-table_listitem, .membership-table .membership-table_description, .membership-table .membership-table_cta { display: block; border: 1px solid #e6e6e6; padding: .75em 1.5em 1.25em; font-size: 14px; line-height: 21px; } .membership-table .membership-table_title + li, .membership-table .membership-table_price + li, .membership-table .membership-table_listitem + li, .membership-table .membership-table_description + li, .membership-table .membership-table_cta + li { border-top: 0; } .membership-table ul, .membership-table ul li { list-style-type: disk; } .membership-table small { color: #00386b; font-size: 0.85714em; line-height: 1.75em; margin-top: 0em; margin-bottom: 0em; } .membership-table .membership-table_title { background-color: #00386b; font-family: 'Roboto Slab', "Times New Roman", 'Lucida Bright', Georgia, serif; font-weight: 400; color: #fff; font-size: 24px; padding: .15em 1em .2em; line-height: 1.2; display: inline-block; width: 100%; min-height: 3em; vertical-align: middle; text-align: center; } .membership-table .membership-table_price { font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 300; background-color: #f2f2f2; text-align: center; line-height: 1.2; padding: .75em 1.5em .8em; } .membership-table .membership-table_price .price-holder { display: inline-block; margin: 0 auto; } .membership-table .membership-table_price .price { font-size: 3em; line-height: 1em; margin-top: 0em; margin-bottom: 0em; } .membership-table .membership-table_price .price small { font-size: 0.33333em; line-height: 1.5em; margin-top: 0em; margin-bottom: 0em; color: #999999; font-family: 'Roboto Slab', "Times New Roman", 'Lucida Bright', Georgia, serif; font-weight: 700; } .membership-table .membership-table_price .price-alt { font-size: 0.85714em; line-height: 1.75em; margin-top: 0em; margin-bottom: 0em; font-family: 'Roboto Slab', "Times New Roman", 'Lucida Bright', Georgia, serif; font-weight: 700; color: #00386b; } .membership-table .membership-table_description { font-size: 14px; line-height: 1.65; font-weight: bold; color: #00386b; line-height: 1.5; } .membership-table .membership-table_cta button, .membership-table .membership-table_cta .button { margin-bottom: 0; } .membership-table .button-group { position: relative; display: inline-block; margin: 1rem 0; width: 100%; } .membership-table .button-group:before { content: attr(data-grouptype); z-index: 99999; color: #999; display: block; font-size: 1rem; padding: 1rem; border-radius: 50%; background: #FFF; position: absolute; left: 50%; top: 0; width: auto; margin-left: -1.5rem; } .membership-table .button-group button, .membership-table .button-group .button { width: 45%; background-color: #b3b3b3; border-color: #8f8f8f; color: #FFFFFF; } .membership-table .button-group button:hover, .membership-table .button-group button:focus, .membership-table .button-group .button:hover, .membership-table .button-group .button:focus { background-color: #8f8f8f; } .membership-table .button-group button:hover, .membership-table .button-group button:focus, .membership-table .button-group .button:hover, .membership-table .button-group .button:focus { color: #FFFFFF; } .membership-table .button-group button + button, .membership-table .button-group .button + .button { margin-left: 5px; background-color: #14B057; border-color: #108d46; color: #FFFFFF; } .membership-table .button-group button + button:hover, .membership-table .button-group button + button:focus, .membership-table .button-group .button + .button:hover, .membership-table .button-group .button + .button:focus { background-color: #108d46; } .membership-table .button-group button + button:hover, .membership-table .button-group button + button:focus, .membership-table .button-group .button + .button:hover, .membership-table .button-group .button + .button:focus { color: #FFFFFF; } /* .membership-table { @include pricing-table-container; small{font-size: 80%;} .membership-table_title { @include pricing-table-title; background-color: rebrand-color($brand-color, 2); @include font-slab(); color:color-contrast(rebrand-color($brand-color, 2)); } .membership-table_price { @include pricing-table-price; small{font-size: 50%;} } .membership-table_description { @include pricing-table-description; } .membership-table_listitem { @include pricing-table-bullet; line-height: 1.4; } .membership-table_cta { @include pricing-table-cta; } .button-group { position: relative; display: inline-block; margin: 1rem 0; width:100%; &:before { content: attr(data-grouptype); z-index: 99999; color: #999; display: block; font-size: 1rem; padding: 1rem; border-radius: 50%; background: #FFF; position: absolute; left: 50%; top: 0; width: auto; margin-left: -1.5rem; } button, .button{ width:45%; @include button-style(grey(30)); } button + button,.button + .button { margin-left: 5px; @include button-style(rebrand-color($success-color, 3)); } } } */ .info-text { font-size: 1em; line-height: 1.5em; margin-top: 0.375em; margin-bottom: 0.375em; font-weight: normal; color: #333333; padding: .5rem 1rem .65rem; position: relative; background-image: url(../img/empty_stripe.png); border-width: 1px; border-style: solid; border-radius: 5px; border-color: transparent; } .info-text .fa-holder { font-size: 1.71429em; line-height: 1.75em; margin-top: 0em; margin-bottom: 0em; position: absolute; } .info-text p { margin-bottom: 0; padding-left: 4rem; } .info-text p br { height: 0; padding: 0; margin: 0; } .info-text .error, .info-text .warning, .info-text .validated, .info-text .info, .info-text .highlighted, .info-text .completed, .info-text .disabled, .info-text .attention { font-family: 'Roboto Slab', "Times New Roman", 'Lucida Bright', Georgia, serif; font-weight: 700; font-size: 1.21429em; line-height: 1.23529em; margin-top: 0.30882em; margin-bottom: 0.30882em; min-height: 24px; } .split-sidebar .nav-list.nav-checklist, .split-sidebar .nav-checklist.panel-selector { background-color: #fff; } /*! Chosen, a Select Box Enhancer for jQuery and Prototype by Patrick Filler for Harvest, http://getharvest.com Version 1.4.2 Full source at https://github.com/harvesthq/chosen Copyright (c) 2011-2015 Harvest http://getharvest.com MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md This file is generated by `grunt build`, do not edit it by hand. */ /* @group Base */ .chosen-container { position: relative; display: inline-block; vertical-align: middle; font-size: 1rem; zoom: 1; *display: inline; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .chosen-container * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .chosen-container .chosen-drop { position: absolute; top: 100%; left: -9999px; z-index: 1010; width: 100%; border: 1px solid #aaa; border-top: 0; background: #fff; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); } .chosen-container.chosen-with-drop .chosen-drop { left: 0; } .chosen-container a { cursor: pointer; } .chosen-container .search-choice .group-name, .chosen-container .chosen-single .group-name { margin-right: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: normal; color: #999999; } .chosen-container .search-choice .group-name:after, .chosen-container .chosen-single .group-name:after { content: ":"; padding-left: 2px; vertical-align: top; } /* @end */ /* @group Single Chosen */ .chosen-container-single .chosen-single { position: relative; display: block; overflow: hidden; padding: .57431rem 0 .57431rem 8px; height: 37px; border: 1px solid #aaa; border-radius: 1px; background-color: #fff; /* background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4)); background: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); background: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); background: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); background: linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);*/ background-clip: padding-box; box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1); color: #444; text-decoration: none; white-space: nowrap; line-height: 24px; } .chosen-container-single .chosen-default { color: #999; } .chosen-container-single .chosen-single-with-deselect span { margin-right: 38px; } .chosen-container-single .chosen-single span { display: block; overflow: hidden; margin-right: 26px; text-overflow: ellipsis; white-space: nowrap; } .chosen-container-single .chosen-single abbr { position: absolute; top: 6px; right: 26px; display: block; width: 12px; height: 12px; background: url("../img/chosen-sprite.png") -42px 1px no-repeat; font-size: 1px; } .chosen-container-single .chosen-single abbr:hover { background-position: -42px -10px; } .chosen-container-single .chosen-disabled .chosen-single abbr:hover { background-position: -42px -10px; } .chosen-container-single .chosen-single div { position: absolute; top: 9px; right: 2px; display: block; width: 18px; height: 100%; } .chosen-container-single .chosen-single div b { display: block; width: 100%; height: 100%; background: url("../img/chosen-sprite.png") no-repeat 0px 2px; } .chosen-container-single .chosen-search { position: relative; z-index: 1010; margin: 0; padding: 3px 4px; white-space: nowrap; } .chosen-container-single .chosen-search input[type="text"] { margin: 0; padding: .57143rem 20px .57143rem .57143rem; width: 100%; height: auto; outline: 0; border: 1px solid #b3b3b3; background: white url("../img/chosen-sprite.png") no-repeat 100% -20px; background: url("../img/chosen-sprite.png") no-repeat 100% -20px; font-size: 1em; font-family: sans-serif; line-height: normal; border-radius: 0; } .chosen-container-single .chosen-drop { margin-top: -1px; border-radius: 0 0 4px 4px; background-clip: padding-box; } .chosen-container-single.chosen-container-single-nosearch .chosen-search { position: absolute; left: -9999px; } /* @end */ /* @group Results */ .chosen-container .chosen-results { color: #444; position: relative; overflow-x: hidden; overflow-y: auto; margin: 0 4px 4px 0; padding: 0 0 0 4px; max-height: 240px; -webkit-overflow-scrolling: touch; } .chosen-container .chosen-results li { display: none; margin: 0; padding: .57143rem .5rem; list-style: none; line-height: 21px; word-wrap: break-word; -webkit-touch-callout: none; } .chosen-container .chosen-results li.active-result { display: list-item; cursor: pointer; } .chosen-container .chosen-results li.disabled-result { display: list-item; color: #ccc; cursor: default; } .chosen-container .chosen-results li.highlighted { background-color: #3875d7; /* background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc)); background-image: -webkit-linear-gradient(#3875d7 20%, #2a62bc 90%); background-image: -moz-linear-gradient(#3875d7 20%, #2a62bc 90%); background-image: -o-linear-gradient(#3875d7 20%, #2a62bc 90%); background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);*/ color: #fff; } .chosen-container .chosen-results li.no-results { color: #777; display: list-item; background: #f4f4f4; } .chosen-container .chosen-results li.group-result { display: list-item; font-weight: bold; cursor: default; } .chosen-container .chosen-results li.group-option { padding-left: 15px; } .chosen-container .chosen-results li li em { font-style: normal; text-decoration: underline; } /* @end */ /* @group Multi Chosen */ .chosen-container-multi .chosen-choices { position: relative; overflow: hidden; margin: 0; padding: 0 5px; width: 100%; height: auto !important; height: 1%; border: 1px solid #aaa; background-color: #fff; /* background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff)); background-image: -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%); background-image: -moz-linear-gradient(#eeeeee 1%, #ffffff 15%); background-image: -o-linear-gradient(#eeeeee 1%, #ffffff 15%); background-image: linear-gradient(#eeeeee 1%, #ffffff 15%);*/ cursor: text; } .chosen-container-multi .chosen-choices li { float: left; list-style: none; } .chosen-container-multi .chosen-choices li.search-field { margin: 0; padding: 0; white-space: nowrap; } .chosen-container-multi .chosen-choices li.search-field input[type="text"] { margin: -1px 0; padding: .57143rem; height: 2.64286rem; outline: 0; border: 0 none !important; background: transparent !important; box-shadow: none; color: #5c5c5c; font-size: 100%; font-family: sans-serif; line-height: normal; border-radius: 0; } .chosen-container-multi .chosen-choices li.search-choice { position: relative; margin: 4px .25rem 4px 0; padding: 6px 20px 6px .5rem; border: 1px solid #aaa; max-width: 100%; border-radius: 3px; background-color: #eeeeee; /* background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee)); background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);*/ background-size: 100% 19px; background-repeat: repeat-x; background-clip: padding-box; box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05); color: #333; line-height: 13px; cursor: default; } .chosen-container-multi .chosen-choices li.search-choice span { word-wrap: break-word; } .chosen-container-multi .chosen-choices li.search-choice .search-choice-close { position: absolute; top: 9px; right: 3px; display: block; width: 12px; height: 12px; background: url("../img/chosen-sprite.png") -42px 1px no-repeat; font-size: 1px; } .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover { background-position: -42px -10px; } .chosen-container-multi .chosen-choices li.search-choice-disabled { padding-right: 5px; border: 1px solid #ccc; background-color: #e4e4e4; /* background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee)); background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);*/ color: #666; } .chosen-container-multi .chosen-choices li.search-choice-focus { background: #d4d4d4; } .chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close { background-position: -42px -10px; } .chosen-container-multi .chosen-results { margin: 0; padding: 0; } .chosen-container-multi .chosen-drop .result-selected { display: list-item; color: #ccc; cursor: default; } /* @end */ /* @group Active */ .chosen-container-active .chosen-single { border: 1px solid #5897fb; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } .chosen-container-active.chosen-with-drop .chosen-single { border: 1px solid #aaa; -moz-border-radius-bottomright: 0; border-bottom-right-radius: 0; -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0; /*background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #eeeeee), color-stop(80%, #ffffff)); background-image: -webkit-linear-gradient(#eeeeee 20%, #ffffff 80%); background-image: -moz-linear-gradient(#eeeeee 20%, #ffffff 80%); background-image: -o-linear-gradient(#eeeeee 20%, #ffffff 80%); background-image: linear-gradient(#eeeeee 20%, #ffffff 80%);*/ box-shadow: 0 1px 0 #fff inset; } .chosen-container-active.chosen-with-drop .chosen-single div { border-left: none; background: transparent; } .chosen-container-active.chosen-with-drop .chosen-single div b { background-position: -18px 2px; } .chosen-container-active .chosen-choices { border: 1px solid #5897fb; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } .chosen-container-active .chosen-choices li.search-field input[type="text"] { color: #222 !important; } /* @end */ /* @group Disabled Support */ .chosen-disabled { opacity: 0.5 !important; cursor: default; } .chosen-disabled .chosen-single { cursor: default; } .chosen-disabled .chosen-choices .search-choice .search-choice-close { cursor: default; } /* @end */ /* @group Right to Left */ .chosen-rtl { text-align: right; } .chosen-rtl .chosen-single { overflow: visible; padding: 0 8px 0 0; } .chosen-rtl .chosen-single span { margin-right: 0; margin-left: 26px; direction: rtl; } .chosen-rtl .chosen-single-with-deselect span { margin-left: 38px; } .chosen-rtl .chosen-single div { right: auto; left: 3px; } .chosen-rtl .chosen-single abbr { right: auto; left: 26px; } .chosen-rtl .chosen-choices li { float: right; } .chosen-rtl .chosen-choices li.search-field input[type="text"] { direction: rtl; } .chosen-rtl .chosen-choices li.search-choice { margin: 3px 5px 3px 0; padding: 3px 5px 3px 19px; } .chosen-rtl .chosen-choices li.search-choice .search-choice-close { right: auto; left: 4px; } .chosen-rtl.chosen-container-single-nosearch .chosen-search, .chosen-rtl .chosen-drop { left: 9999px; } .chosen-rtl.chosen-container-single .chosen-results { margin: 0 0 4px 4px; padding: 0 4px 0 0; } .chosen-rtl .chosen-results li.group-option { padding-right: 15px; padding-left: 0; } .chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div { border-right: none; } .chosen-rtl .chosen-search input[type="text"] { padding: 4px 5px 4px 20px; background: white url("../img/chosen-sprite.png") no-repeat -30px -20px; background: url("../img/chosen-sprite.png") no-repeat -30px -20px; direction: rtl; } .chosen-rtl.chosen-container-single .chosen-single div b { background-position: 6px 2px; } .chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b { background-position: -12px 2px; } /* @end */ /* @group Retina compatibility */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) { .chosen-rtl .chosen-search input[type="text"], .chosen-container-single .chosen-single abbr, .chosen-container-single .chosen-single div b, .chosen-container-single .chosen-search input[type="text"], .chosen-container-multi .chosen-choices .search-choice .search-choice-close, .chosen-container .chosen-results-scroll-down span, .chosen-container .chosen-results-scroll-up span { background-image: url("../img/chosen-sprite@2x.png") !important; background-size: 52px 37px !important; background-repeat: no-repeat !important; } } /* @end */ /** * Chosen JS: * `.chosen-select` - there is a basic layout of short tabbed footer for mobile apps * * @example * * * * * documentation here */ nav.top-bar { background-color: #00386b; } nav.top-bar .top-bar-section ul li, nav.top-bar .top-bar.expanded .title-area { background-color: #00386b; } .top-bar .name h1 { font-family: 'Roboto Slab', "Times New Roman", 'Lucida Bright', Georgia, serif; font-weight: 700; } .top-bar-section ul li > a { font-family: 'Roboto Slab', "Times New Roman", 'Lucida Bright', Georgia, serif; font-weight: 400; } .top-bar-section li.hover > a:not(.button) { background-color: #19354f; background: #28343e; color: #FFF; } .top-bar-section li:not(.has-form) a:not(.button) { background: #00386b; } .top-bar-section li:not(.has-form) a:not(.button):hover { background-color: #19354f; background: #28343e; } .top-bar-section li.active:not(.has-form) a:not(.button) { color: #FFF; background: #00386b; } .top-bar-section li.active:not(.has-form) a:not(.button):hover { background: #00386b; color: #FFF; } .pagination-holder, .result-selector-holder { border-top: 2px solid #198dae; width: 100%; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; max-width: 114.28571rem; max-width: none; } .pagination-holder:before, .result-selector-holder:before, .pagination-holder:after, .result-selector-holder:after { content: " "; display: table; } .pagination-holder:after, .result-selector-holder:after { clear: both; } ul.pagination li a, ul.pagination li button { border-radius: 0px 0px 0px 0px; color: #999999; } ul.pagination li i { margin: 0 .25rem; } ul.pagination li.current a, ul.pagination li.current a:hover, ul.pagination li.current button, ul.pagination li.current button:hover { background-color: #198dae; color: #fff; } ul.pagination li.arrow a, ul.pagination li.arrow button { background-color: #e6e6e6; color: #5c5c5c; font-weight: 700; } ul.pagination li.arrow a:hover, ul.pagination li.arrow button:hover { background-color: #b3b3b3; color: #333333; } ul.pagination li.arrow.left a, ul.pagination li.arrow.left button { border-radius: 0px 0px 0px 5px; } ul.pagination li.arrow.right a, ul.pagination li.arrow.right button { border-radius: 0px 0px 5px 0px; } ul.pagination li.disable a, ul.pagination li.disable a:hover { border-color: #b3b3b3; background: url("../img/subtlenet2.png") repeat; color: #999999; cursor: not-allowed; } .pagination-holder.top, .top.result-selector-holder { border-top: 0 none; border-bottom: 2px solid #198dae; margin-bottom: 1.42857rem; width: 100%; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; max-width: 114.28571rem; } .pagination-holder.top ul.pagination, .top.result-selector-holder ul.pagination { margin-bottom: 0; } .pagination-holder.top:before, .top.result-selector-holder:before, .pagination-holder.top:after, .top.result-selector-holder:after { content: " "; display: table; } .pagination-holder.top:after, .top.result-selector-holder:after { clear: both; } .pagination-holder.top ul.pagination li.arrow.left a, .top.result-selector-holder ul.pagination li.arrow.left a, .pagination-holder.top ul.pagination li.arrow.left button, .top.result-selector-holder ul.pagination li.arrow.left button { border-radius: 5px 0 0 0; } .pagination-holder.top ul.pagination li.arrow.right a, .top.result-selector-holder ul.pagination li.arrow.right a, .pagination-holder.top ul.pagination li.arrow.right button, .top.result-selector-holder ul.pagination li.arrow.right button { border-radius: 0 5px 0 0; } @media only screen and (max-width: 1024px) { .pagination a > .text { display: none; } } .pagination--compact a > .text { display: none; } /** * Pagination: * `.pagination-holder .pagination` - Pagination is often used when there is a table or page of results or repeated items. The Container defaultly styles the paginator to be at the bottom of the area of repeated content but render it at the top just add the class '.top' to render the pagination upside down. The paginator has a single modifier to condense the screen size by adding the class `.pagination--compact`. * * @example *

*
*
*/ .pagination.result-selector li.label, .pagination.result-selector li.value { color: #5c5c5c; font-weight: 700; } .pagination.result-selector li.label { padding-left: .25em; padding-right: .25em; background-color: #e6e6e6; } .top .pagination.result-selector li.label { border-radius: 5px 0px 0px 0px; } .bottom .pagination.result-selector li.label { border-radius: 0px 0px 0px 5px; } /** * Pagination with Result Selector: * `.pagination-holder .pagination.result-selector` - used often with a paginator is a ruslt selector. This allows the user to limit the amount of returned items on a single page. Because the Result Selector is bult on the paginator design it can also be used at the top or bottom like a paginator. * * @example *
* *

*
* *
* */ /** * Modals( Foundation Reveal): * `.reveal-modal` - Popup, modal, reveal - a design pattern to show a hidden a part of content when you want the user to focus on a single task. * * @example * Click Me For A Modal * */ div.reveal-modal, dialog { border-top: 6px solid #198dae; } div.reveal-modal .close-reveal-modal, dialog .close-reveal-modal { background-color: #198dae; color: #fff; font-size: 1rem; padding: .25em .5em .5em .5em; top: 0; right: 0; } /** * Slider (Foundation Override): * `.range-slider .vertical-range` - Sliders are a great peice of UI for mobile and range of numbers !!REQUIRES JAVASCRIPT OF FOUNDATION!!! * * @example *
* * * *
* Foundation Documentation */ .range-slider { display: block; position: relative; width: 100%; height: 1.14286rem; border: 1px solid #DDDDDD; margin: 1.42857rem 0; -ms-touch-action: none; touch-action: none; background: #f4f4f4; } .range-slider.vertical-range { display: block; position: relative; width: 100%; height: 1.14286rem; border: 1px solid #DDDDDD; margin: 1.42857rem 0; -ms-touch-action: none; touch-action: none; display: inline-block; width: 1.14286rem; height: 14.28571rem; } .range-slider.vertical-range .range-slider-handle { margin-top: 0; margin-left: -0.57143rem; position: absolute; bottom: -12rem; } .range-slider.vertical-range .range-slider-active-segment { width: 1rem; height: auto; bottom: 0; } .range-slider.radius { background: #f4f4f4; border-radius: 5px; } .range-slider.radius .range-slider-handle { background: #198dae; border-radius: 5px; } .range-slider.radius .range-slider-handle:hover { background: #167c99; } .range-slider.round { background: #f4f4f4; border-radius: 1000px; } .range-slider.round .range-slider-handle { background: #198dae; border-radius: 1000px; } .range-slider.round .range-slider-handle:hover { background: #167c99; } .range-slider.disabled, .range-slider[disabled] { background: #f4f4f4; cursor: default; opacity: 0.7; } .range-slider.disabled .range-slider-handle, .range-slider[disabled] .range-slider-handle { background: #198dae; cursor: default; opacity: 0.7; } .range-slider.disabled .range-slider-handle:hover, .range-slider[disabled] .range-slider-handle:hover { background: #167c99; } .range-slider-active-segment { display: inline-block; position: absolute; height: 1rem; background: #b1b1b1; } .range-slider-handle { display: inline-block; position: absolute; z-index: 1; top: -0.35714rem; width: 2.28571rem; height: 1.57143rem; border: 1px solid none; cursor: pointer; -ms-touch-action: manipulation; touch-action: manipulation; background: #198dae; } .range-slider-handle:hover { background: #167c99; } .switch-input-space { white-space: nowrap; display: table; padding-bottom: .5rem; padding-top: .5rem; } .switch-input-space .with-underline { border-bottom: 1px dotted #d6d6d6; } .switch { padding: 0; border: none; position: relative; outline: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; display: inline-block; display: table-cell; width: 1%; } .switch label { display: block; margin-bottom: 1rem; position: relative; color: transparent; background: #DDDDDD; text-indent: 100%; width: 4rem; height: 2rem; cursor: pointer; transition: left 0.15s ease-out; } .switch input { opacity: 0; position: absolute; top: 9px; left: 10px; padding: 0; } .switch input + label { margin-left: 0; margin-right: 0; } .switch label:after { content: ""; display: block; background: #FFFFFF; position: absolute; top: .25rem; left: .25rem; width: 1.5rem; height: 1.5rem; -webkit-transition: left 0.15s ease-out; -moz-transition: left 0.15s ease-out; transition: left 0.15s ease-out; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .switch input:checked + label { background: #14B057; } .switch input:checked + label:after { left: 2.25rem; } .switch label { width: 3.5rem; height: 1.75rem; } .switch label:after { width: 1.25rem; height: 1.25rem; } .switch input:checked + label:after { left: 2rem; } .switch label { color: transparent; background: #DDDDDD; } .switch label:after { background: #FFFFFF; } .switch input:checked + label { background: #14B057; } .switch label { border-radius: #14B057; } .switch label:after { border-radius: #14B057; } .switch :focus + label { -webkit-box-shadow: inset 0px 0px 10px 2px #198dae; -moz-box-shadow: inset 0px 0px 10px 2px #198dae; box-shadow: inset 0px 0px 10px 2px #198dae; } .switch :focus + label:after { -webkit-box-shadow: 0px 0px 10px 2px #198dae; -moz-box-shadow: 0px 0px 10px 2px #198dae; box-shadow: 0px 0px 10px 2px #198dae; } .switch-value { display: inline-block; height: 2rem; vertical-align: top; padding: 0 0 0 .75rem; margin: 0; position: relative; background-color: transparent; color: #5c5c5c; font-family: 'Roboto Slab', "Times New Roman", 'Lucida Bright', Georgia, serif; font-weight: 400; white-space: normal; display: table-cell; } .switch.check-visible input + label:after, .switch.dot-visible input + label:after, .switch.x-visible input + label:after { z-index: 100; } .switch.check-visible input + label:before, .switch.x-visible input + label:before, .switch.dot-visible input + label:before { position: absolute; display: block; height: 1.5em; width: 1.5em; z-index: 1; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; text-align: center; vertical-align: middle; } .tiny.switch input + label:before { font-size: 84%; } .large.switch input + label:before { font-size: 140%; } .switch.x-visible input + label:before { content: "\f00d"; left: -1.35em; top: .40em; color: #fff; } .switch.dot-visible input:checked + label:before, .switch.check-visible input:checked + label:before { left: -3.05em; top: .375em; color: #b8e7cc; } .switch.dot-visible input:checked + label:before { content: "\f058"; } .switch.check-visible input:checked + label:before { content: "\f00c"; } .switch.disabled label { background: #b3b3b3 url("../img/subtlenet2.png") repeat; } .switch.disabled label:after { background-color: #e6e6e6; } /** * Switch (Foundation Override): * `.switch` - Switches are a more visible and more touchable versions of checkbox and radio buttons. ADD `.check-visible` to a switch to make a check appear in the selected state of `.x-visible` to show the x when it is shut off. * * @example *

Radio Buttons should use `.round` modifier

*
*
* * *
* *
*
*
* * *
* *
*

Checkboxes should use the `.radius` or no modifier at all

*
*
* * *
* *
*
*
* * *
* *
*
*
* * *
* *
* Foundation Documentation */ .tooltip { background-color: #19354f; } .tooltip.tip-top > .nub { border-color: #19354f transparent transparent; } /** * Twitter Typeahead: * `.twitter-typeahead` - Type ahead javascript * * @example * * * *
* *

Alabama

*

Alaska

*

California

* *
* *




Documentation * **/ .twitter-typeahead { width: 100%; } .typeahead, .tt-query, .tt-hint { height: 30px; padding: .25rem .5rem; font-size: 1rem; line-height: 1; border: 2px solid #b3b3b3; outline: none; } .typeahead { background-color: #fff; } .typeahead:focus { border: 2px solid #198dae; } .tt-query { -webkit-box-shadow: inset 0 1px 1px rgba(102, 102, 102, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .tt-hint { color: #999; } .tt-dropdown-menu { width: inherit; margin-top: .25rem; padding: .25rem .25rem; background-color: #fff; border: 1px solid #b3b3b3; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .tt-suggestion { padding: 3px 20px; font-size: 1.5rem; line-height: 1.75rem; font-family: 'Roboto Slab', "Times New Roman", 'Lucida Bright', Georgia, serif; font-weight: 400; } .tt-suggestion strong { color: #14B057; font-size: 1.10em; margin: 0 2px 0 1px; font-family: 'Roboto Slab', "Times New Roman", 'Lucida Bright', Georgia, serif; font-weight: 700; } .tt-suggestion.tt-cursor { color: #e8f3f6; background-color: #198dae; } .tt-suggestion.tt-cursor strong { color: #fff; } .tt-suggestion p { margin: 0; } /* Component containers ----------------------------------*/ .ui-widget { font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 400; letter-spacing: .01em; } .ui-widget .ui-widget { font-size: 1em; } .ui-widget input, .ui-widget select, .ui-widget textarea { font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 400; letter-spacing: .01em; } .ui-widget button { font-family: 'Roboto Slab', "Times New Roman", 'Lucida Bright', Georgia, serif; font-weight: 400; font-size: 1em; } .ui-widget-content { border: 1px solid #b3b3b3; background-image: none; background-color: white; color: #333333; } .ui-widget-content a { color: #333333; } .ui-widget-header { border: 1px solid #aaaaaa; background-image: none; background-color: #cccccc; color: #1a1a1a; font-weight: bold; } .ui-widget-header a { color: #1a1a1a; } /* Interaction states ----------------------------------*/ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #cccccc; background-image: none; background: #e6e6e6; font-weight: normal; color: #4d4d4d; } .ui-state-default a { color: #4d4d4d; text-decoration: none; } .ui-state-default a:link, .ui-state-default a:visited { color: #4d4d4d; text-decoration: none; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #198dae; background-image: none; background: #25b6e0; font-weight: normal; color: #ffffff; } .ui-state-hover a { color: #ffffff; text-decoration: none; } .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited { color: #ffffff; text-decoration: none; } .ui-state-focus a { color: #ffffff; text-decoration: none; } .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited { color: #ffffff; text-decoration: none; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #14B057; background: #14b057; font-weight: normal; color: #fff; } .ui-state-active a { color: #fff; text-decoration: none; } .ui-state-active a:link, .ui-state-active a:visited { color: #fff; text-decoration: none; } /* Interaction Cues ----------------------------------*/ .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid #c32231; background: #fbe7e9; color: #c32231; } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a { color: #c32231; } .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error { border: 1px solid #c32231; background: #fbe7e9; color: #c32231; } .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a, .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #c32231; } .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; } .ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter: Alpha(Opacity=70); /* support: IE8 */ font-weight: normal; } .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter: Alpha(Opacity=35); /* support: IE8 */ background-image: none; } .ui-state-disabled .ui-icon { filter: Alpha(Opacity=35); /* support: IE8 - See #6059 */ } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: none repeat scroll 0 0 transparent; text-align: center; } .ui-icon :before { font-size: 1em; margin: .25em .5em; display: inline-block; } .ui-widget-content .ui-icon, .ui-widget-header .ui-icon { background: none repeat scroll 0 0 transparent; } .ui-state-default .ui-icon { background: none repeat scroll 0 0 transparent; } .ui-state-hover .ui-icon, .ui-state-focus .ui-icon, .ui-state-active .ui-icon { background: none repeat scroll 0 0 transparent; } .ui-state-highlight .ui-icon { background: none repeat scroll 0 0 transparent; } .ui-state-error .ui-icon, .ui-state-error-text .ui-icon { background: none repeat scroll 0 0 transparent; } /* Font Awesome Override ------------------------------------------------ */ /* Allow Font Awesome Icons in lieu of jQuery UI and only apply when using a FA icon */ .ui-icon[class*=" ui-icon-"] { /* Remove the jQuery UI Icon */ background: none repeat scroll 0 0 transparent; /* Remove the jQuery UI Text Indent */ text-indent: 0; /* Bump it up - jQuery UI is -8px */ margin-top: -0.5em; } .ui-button-icon-only .ui-icon[class*=" ui-icon-"] { /* Bump it - jQuery UI is -8px */ margin-left: -7px; } /* Allow use of icon-large to be properly aligned */ .ui-icon.icon-large { margin-top: -0.75em; } /* positioning */ .ui-icon-carat-1-n:before { content: ""; } .ui-icon-carat-1-ne:before { content: ""; } .ui-icon-carat-1-e:before { content: ""; } .ui-icon-carat-1-se:before { content: ""; } .ui-icon-carat-1-s:before { content: ""; } .ui-icon-carat-1-sw:before { content: ""; } .ui-icon-carat-1-w:before { content: ""; } .ui-icon-carat-1-nw:before { content: ""; } .ui-icon-carat-2-n-s { background-position: -128px 0; } .ui-icon-carat-2-e-w { background-position: -144px 0; } .ui-icon-triangle-1-n:before { content: ""; } .ui-icon-triangle-1-ne:before { content: ""; } .ui-icon-triangle-1-e:before { content: ""; } .ui-icon-triangle-1-se:before { content: ""; } .ui-icon-triangle-1-s:before { content: ""; } .ui-icon-triangle-1-sw:before { content: ""; } .ui-icon-triangle-1-w:before { content: ""; } .ui-icon-triangle-1-nw:before { content: ""; } .ui-icon-triangle-2-n-s { background-position: -128px -16px; } .ui-icon-triangle-2-e-w { background-position: -144px -16px; } .ui-icon-arrow-1-n:before { content: ""; } .ui-icon-arrow-1-ne:before { content: ""; } .ui-icon-arrow-1-e:before { content: ""; } .ui-icon-arrow-1-se:before { content: ""; } .ui-icon-arrow-1-s:before { content: ""; } .ui-icon-arrow-1-sw:before { content: ""; } .ui-icon-arrow-1-w:before { content: ""; } .ui-icon-arrow-1-nw:before { content: ""; } /* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ .ui-icon-circle-triangle-e:before { content: ""; } .ui-icon-circle-triangle-s:before { content: ""; } .ui-icon-circle-triangle-w:before { content: ""; } .ui-icon-circle-triangle-n:before { content: ""; } .ui-icon-circle-arrow-e:before { content: ""; } .ui-icon-circle-arrow-s:before { content: ""; } .ui-icon-circle-arrow-w:before { content: ""; } .ui-icon-circle-arrow-n:before { content: ""; } .ui-icon-circle-zoomin:before { content: ""; } .ui-icon-circle-zoomout:before { content: ""; } .ui-icon-circle-check:before { content: ""; } .ui-icon-circlesmall-plus:before, .ui-icon-circle-plus:before { content: ""; } .ui-icon-circlesmall-minus:before, .ui-icon-circle-minus:before { content: ""; } .ui-icon-circlesmall-close:before, .ui-icon-circle-close:before { content: ""; } .ui-icon-squaresmall-plus:before { content: ""; } .ui-icon-squaresmall-minus:before { content: ""; } .ui-icon-squaresmall-close:before { content: ""; } .ui-icon-grip-dotted-vertical:before { content: ""; } .ui-icon-grip-dotted-horizontal:before { content: ""; } .ui-icon-grip-solid-vertical:before { content: ""; } .ui-icon-grip-solid-horizontal:before { content: ""; } .ui-icon-gripsmall-diagonal-se:before { content: ""; } .ui-icon-grip-diagonal-se:before { content: ""; } /* Misc visuals ----------------------------------*/ /* Corner radius */ .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 5px; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 5px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 5px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 5px; } /* Overlays */ .ui-widget-overlay { background: #6a6a6a url("images/ui-bg_flat_0_6a6a6a_40x100.png") 50% 50% repeat-x; opacity: .3; filter: Alpha(Opacity=30); /* support: IE8 */ } .ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url("images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x; opacity: .3; filter: Alpha(Opacity=30); /* support: IE8 */ border-radius: 8px; } .ui-spinner { border-radius: 0; } .ui-spinner .ui-spinner-button { border-radius: 0; } .ui-spinner .ui-spinner-input { padding: .57143rem; height: 2.64286rem; margin: 0; } /* AutoComplete */ .ui-autocomplete { max-height: 15em; overflow-y: auto; /* prevent horizontal scrollbar */ overflow-x: hidden; font-size: 1.25rem; line-height: 1; } .ui-autocomplete span { padding: 0 .25rem 0 0; font-size: .8em; } .ui-autocomplete .headline { font-family: 'Roboto Slab', "Times New Roman", 'Lucida Bright', Georgia, serif; font-weight: 700; display: block; color: #5c5c5c; font-size: 1em; } .ui-autocomplete .description { font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 300; font-style: italic; color: #999999; font-size: .75em; } .ui-autocomplete .ui-state-focus .headline, .ui-autocomplete .ui-state-focus .description { color: white; } .ui-datepicker-header .ui-datepicker-prev, .ui-datepicker-header .ui-datepicker-next { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: .1em; border-radius: 5px; } .ui-datepicker-header .ui-datepicker-prev:before, .ui-datepicker-header .ui-datepicker-next:before { font-size: 1em; margin: .35em .45em; display: inline-block; } .ui-datepicker-header .ui-datepicker-prev .ui-icon, .ui-datepicker-header .ui-datepicker-next .ui-icon { text-indent: -9999px; } .ui-datepicker-header .ui-datepicker-prev:before { content: ""; } .ui-datepicker-header .ui-datepicker-next:before { content: ""; } .ui-accordion-override .ui-accordion-header { font-size: 1.71429em; line-height: 1.75em; margin-top: 0.65625em; margin-bottom: 0.21875em; font-family: 'Roboto Slab', "Times New Roman", 'Lucida Bright', Georgia, serif; font-weight: 400; color: #333333; padding-left: 2.25em; background: none; margin-bottom: 0; border: 0px none; margin-bottom: 0; } .ui-accordion-override .ui-accordion-header:hover { color: #000; } .ui-accordion-override .ui-accordion-header .ui-accordion-header-icon { font-size: 1.5em; padding: 0; height: 1em; width: 1em; left: .33333333333em; top: .33333333333em; margin-top: 0; display: block; } .ui-accordion-override .ui-icon-triangle-1-e:before { content: "\f138"; color: #25b6e0; } .ui-accordion-override .ui-icon-triangle-1-s:before { content: "\f13a"; color: #14B057; } .ui-accordion-override .ui-accordion-content { border: 0; border-radius: 0; } .ui-accordion-override .ui-accordion-content.ui-accordion-content-active { border-top: 2px solid #25b6e0; border-bottom: 2px solid #666666; } .page-wrapper { max-width: 1200px; margin: 0 auto; padding: 1rem .5rem; } @media only screen and (min-width: 767px) { .page-wrapper { padding: 1.5rem .75rem; } } @media only screen and (min-width: 1024px) { .page-wrapper { padding: 2rem 1rem 3rem; } } .content-padding { padding: 0 .5rem; max-width: 1200px; margin: 0 auto; } @media only screen and (min-width: 767px) { .content-padding { padding: 0 .75rem; } } @media only screen and (min-width: 1024px) { .content-padding { padding: 0 1rem; } } .section-nav.back ~ .page-wrapper { padding-top: 0; } /** * page layouts: * `page-wrapper` - inside all layout divs the page-wrapper is used to make a unified amount of spacing from the content and the vewport edges. * * @example *
Hello this is content
**/ .page.with-group-sections { background-image: url("../img/billie-holiday-lite.png"); } .page.with-group-sections .page-wrapper > .group-section { border: 1px solid #d9d9d9; background-color: white; -webkit-box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.2); } .page.with-group-sections.highlighted { background-image: url("../img/billie-holiday-speck.png"); background-color: #77d2eb; } .page.with-group-sections .page-wrapper { padding: 1rem 0 !important; } .page.with-group-sections .page-wrapper > .section, .page.with-group-sections .page-wrapper > section, .page.with-group-sections .page-wrapper > .row { padding: 0 .75rem; } .page.with-group-sections .page-wrapper > .group-section { margin: 0 .65rem 1rem .5rem; padding: .5rem .5rem; width: auto; position: relative; } .page.with-group-sections .page-wrapper > .group-section.content-padding { margin: 0 auto 1rem auto; max-width: 1200px; } @media only screen and (min-width: 767px) { .page.with-group-sections .page-wrapper > .group-section { padding: .5rem .75rem; } } @media only screen and (min-width: 1024px) { .page.with-group-sections .page-wrapper > .group-section { padding: .5rem 1.5rem 1rem; } } .group-section-tab-holder { margin: -.75rem -.5rem 0; } @media only screen and (min-width: 767px) { .group-section-tab-holder { margin: -.5rem -.75rem 0; } } @media only screen and (min-width: 1024px) { .group-section-tab-holder { margin: -.5rem -1.5rem 0; } } .group-section-tab-holder .nav.tabs { padding: 2px 10px 0; background-image: url("../img/construction-paper.png"); background-color: #198dae; } .group-section-tab-holder .nav.tabs li { border-radius: 8px; display: inline-block; margin: .4rem 1px .4rem; background-color: #c9edf7; } .group-section-tab-holder .nav.tabs li:hover { background-color: #a0dff1; } .group-section-tab-holder .nav.tabs li.selected { border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; margin-bottom: 0; vertical-align: bottom; padding: .4rem; background-color: #fff; } .group-section-tab-holder.secondary .nav.tabs { background-color: #b3b3b3; } .group-section-tab-holder.secondary .nav.tabs li { background-color: #f0f0f0; } .group-section-tab-holder.secondary .nav.tabs li:hover { background-color: #e4e4e4; } .group-section-tab-holder.secondary .nav.tabs li.selected { background-color: #fff; } /** * Paper Card Grouping: * `.page.with-group-sections .page-wrapper .group-section-holder` - by default pages are white but when the need arises to have grouped section 'cards' are introduced and the background area becomes a layer of soft off white construction paper. If the need arises to highlight a collection of cards add `.highlighted` to the `.page.with-group-sections` and the product color will bleed into the construction paper. * * @example *
*
*

Hello

This is content that is showing up in a section group

*
*
*
*
*
*

Hello

This is content that is showing up in a section group

*
*
* **/ /** * Tabs inside Grouping: * `page.with-group-sections > .overlap.tabs` - Tabs placed outside of the groups should use the overlap so they sink into the paper texture. * * @example *
*
* *

Hello

This is content that is showing up in a section group

*
*
* **/ /** * Tabs for Paper Cards: * `.group-section-tab-holder` - Special tabs holders are introduced to the cards so they can fill the full frame of the card. The tab holder has a modification of adding the `secondary` class to convert it to using the secondary color if the need arises. * * @example *
*
*
*
* *
*

Hello

*

This is content that is showing up in a section group

*
* *
*

I am Sub Tab Content

*

This is content under a secondary tab in a card

*
*
*
* **/ /** * Split Layout With Off Canvas Reveal: * `.mobile-offcanvas-wrapper` - This is a structural container that has the ablity to change from content and sidebar to just content and the sidebar being off canvas. Trigger the off canvas reveal by adding `.navOn` to the div.split-layout. Change the switch point by adding `.large`,`.medium`, or `.small`.
!!! must include _layout-split.scss !!!
!!! requires javascripts !!! * * @example *
*
* *
*
*

Content

*

Some extra content in the content area

It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.

*
*
*
*
*/ .full-row, .full-col { overflow: hidden; position: absolute; } .full-row { left: 0; right: 0; } .full-col { top: 0; bottom: 0; } .scroll-x { overflow-x: auto; } .scroll-y { overflow-y: auto; } .mobile-offcanvas-wrapper { position: relative; overflow: hidden; width: 100%; -webkit-transition: 300ms ease all; transition: 300ms ease all; } .mobile-offcanvas-wrapper .split-layout { -webkit-transition: 300ms ease all; transition: 300ms ease all; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: visible; } .mobile-offcanvas-wrapper .split-layout.navOn { -webkit-transform: translateX(83.33333%); transform: translateX(83.33333%); transform: translate3d(83.33333%, 0, 0); -webkit-transform: translate3d(83.33333%, 0, 0); } .mobile-offcanvas-wrapper .split-layout .split-sidebar { display: block; padding-left: 0; padding-right: 0; width: 83.33333%; float: left; position: absolute; left: -83.33333%; right: auto; } .mobile-offcanvas-wrapper .split-layout.reverse.navOn { -webkit-transform: translateX(-83.33333%); transform: translateX(-83.33333%); transform: translate3d(-83.33333%, 0, 0); -webkit-transform: translate3d(-83.33333%, 0, 0); } .mobile-offcanvas-wrapper .split-layout.reverse .split-sidebar { position: absolute; right: -83.33333%; left: auto; } @media only screen { .mobile-offcanvas-wrapper .split-layout.small, .mobile-offcanvas-wrapper .split-layout.small.navOn { -webkit-transform: translateX(0); transform: translateX(0); } } @media only screen and (min-width: 40.063em) { .mobile-offcanvas-wrapper .split-layout.medium, .mobile-offcanvas-wrapper .split-layout.medium.navOn, .mobile-offcanvas-wrapper .split-layout.small, .mobile-offcanvas-wrapper .split-layout.small.navOn { -webkit-transform: translateX(0); transform: translateX(0); } } /** * Split Layout With Off Canvas Reveal: * `.mobile-offcanvas-wrapper` - This is a structural container that has the ablity to change from content and sidebar to just content and the sidebar being off canvas. Trigger the off canvas reveal by adding `.navOn` to the div.split-layout. Change the switch point by adding `.large`,`.medium`, or `.small`.
!!! must include _layout-split.scss !!!
!!! requires javascripts foundation equzlizer will remove the sidebar collapse !!! * * @example *
*
* *
*
*

Outside of the Group Section
I need to be wrapped by a div.content-padding to line up
*

*
*

Inside of a Group Section

*

Some extra content in the content area

*

It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.

*
*
*
*
*/ .page-wrapper > .split-layout { margin: -1rem -.5rem; } @media only screen and (min-width: 767px) { .page-wrapper > .split-layout { margin: -1.5rem -.75rem; } } @media only screen and (min-width: 1024px) { .page-wrapper > .split-layout { margin: -2rem -1rem -3rem; } } .split-layout { width: 100%; margin: 0; max-width: 114.28571rem; max-width: 100%; position: relative; overflow: hidden; clear: both; } .split-layout:before, .split-layout:after { content: " "; display: table; } .split-layout:after { clear: both; } .split-layout .split-sidebar, .split-layout .split-content { margin-bottom: -9998px; padding-bottom: 9998px; } .split-layout.fill-page-height .split-content { margin-bottom: 0px; padding-bottom: 1em; } @media (min-device-height: 320px) { .split-layout.fill-page-height .split-content { min-height: 320px; } } @media (min-device-height: 480px) { .split-layout.fill-page-height .split-content { min-height: 480px; } } @media (min-device-height: 640px) { .split-layout.fill-page-height .split-content { min-height: 640px; } } @media (min-device-height: 768px) { .split-layout.fill-page-height .split-content { min-height: 768px; } } @media (min-device-height: 960px) { .split-layout.fill-page-height .split-content { min-height: 960px; } } @media (min-device-height: 1024px) { .split-layout.fill-page-height .split-content { min-height: 1024px; } } .split-layout .split-sidebar { display: none; padding-left: 0; padding-right: 0; width: 100%; float: left; left: -83.33333%; border: #b3b3b3 solid 0; border-right-width: 1px; } .split-layout .split-content { padding-left: 0; padding-right: 0; width: 100%; float: left; } .split-layout.xlarge.reverse .split-sidebar, .split-layout.xlarge.reverse .split-content, .split-layout.xlarge.reverse.navOn .split-sidebar, .split-layout.xlarge.reverse.navOn .split-content, .split-layout.large.reverse .split-sidebar, .split-layout.large.reverse .split-content, .split-layout.large.reverse.navOn .split-sidebar, .split-layout.large.reverse.navOn .split-content, .split-layout.medium.reverse .split-sidebar, .split-layout.medium.reverse .split-content, .split-layout.medium.reverse.navOn .split-sidebar, .split-layout.medium.reverse.navOn .split-content, .split-layout.small.reverse .split-sidebar, .split-layout.small.reverse .split-content, .split-layout.small.reverse.navOn .split-sidebar, .split-layout.small.reverse.navOn .split-content { padding-left: 0.5rem; padding-right: 0.5rem; float: right; float: right !important; } .split-layout.xlarge.reverse .split-sidebar, .split-layout.xlarge.reverse.navOn .split-sidebar, .split-layout.large.reverse .split-sidebar, .split-layout.large.reverse.navOn .split-sidebar, .split-layout.medium.reverse .split-sidebar, .split-layout.medium.reverse.navOn .split-sidebar, .split-layout.small.reverse .split-sidebar, .split-layout.small.reverse.navOn .split-sidebar { border-right-width: 0; border-left-width: 1px; padding-left: 0; padding-right: 0; } .split-layout.xlarge.reverse .split-content, .split-layout.xlarge.reverse.navOn .split-content, .split-layout.large.reverse .split-content, .split-layout.large.reverse.navOn .split-content, .split-layout.medium.reverse .split-content, .split-layout.medium.reverse.navOn .split-content, .split-layout.small.reverse .split-content, .split-layout.small.reverse.navOn .split-content { padding-left: 0; padding-right: 0; } @media only screen { .split-layout.small .split-sidebar { display: block; padding-left: 0; padding-right: 0; width: 41.66667%; float: left; padding-left: 0; padding-right: 0; } .split-layout.small .split-content { display: block; padding-left: 0; padding-right: 0; width: 58.33333%; float: left; padding-left: 0; padding-right: 0; } } @media only screen and (min-width: 40.063em) { .split-layout.medium .split-sidebar, .split-layout.medium.reverse .split-sidebar, .split-layout.small .split-sidebar, .split-layout.small.reverse .split-sidebar { position: relative; left: 0; right: 0; display: block; padding-left: 0; padding-right: 0; width: 33.33333%; float: left; padding-left: 0; padding-right: 0; } .split-layout.medium .split-content, .split-layout.small .split-content { display: block; padding-left: 0; padding-right: 0; width: 66.66667%; float: left; padding-left: 0; padding-right: 0; } } @media only screen and (min-width: 64.063em) { .split-layout.large .split-sidebar, .split-layout.large.reverse .split-sidebar, .split-layout.medium .split-sidebar, .split-layout.medium.reverse .split-sidebar, .split-layout.small .split-sidebar, .split-layout.small.reverse .split-sidebar { display: block; padding-left: 0; padding-right: 0; width: 25%; float: left; padding-left: 0; padding-right: 0; } .split-layout.large .split-content, .split-layout.medium .split-content, .split-layout.small .split-content { display: block; padding-left: 0; padding-right: 0; width: 75%; float: left; padding-left: 0; padding-right: 0; } } @media only screen and (min-width: 90.063em) { .split-layout.xlarge .split-sidebar, .split-layout.xlarge.reverse .split-sidebar, .split-layout.large .split-sidebar, .split-layout.large.reverse .split-sidebar, .split-layout.medium .split-sidebar, .split-layout.medium.reverse .split-sidebar, .split-layout.small .split-sidebar, .split-layout.small.reverse .split-sidebar { display: block; padding-left: 0; padding-right: 0; width: 25%; float: left; padding-left: 0; padding-right: 0; } .split-layout.xlarge .split-content, .split-layout.large .split-content, .split-layout.medium .split-content, .split-layout.small .split-content { display: block; padding-left: 0; padding-right: 0; width: 75%; float: left; padding-left: 0; padding-right: 0; } } .with-group-sections .split-sidebar { background-color: #fff; } /** * Mobile Header: * `.header.pagel` - there is a basic layout of short tabbed header of apps * * @example *
* * *
*/ .page.header { border-bottom: #00386b 6px solid; padding: 0; background-color: #fff; display: block; clear: both; width: 100%; position: relative; } .page.header:after { content: ""; display: table; clear: both; } .page.header .logo { left: 0; top: 0; display: none; text-align: right; clear: none; float: left; vertical-align: middle; } @media only screen and (min-width: 767px) { .page.header .logo { display: inline-block; } } .page.header .logo img { height: 60px; } @media only screen and (min-width: 1024px) { .page.header .logo img { height: 70px; margin: 10px 10px 0 0; } } @media only screen and (min-width: 1200px) { .page.header .logo img { height: 85px; margin: 10px 10px 0 0; } } .page.header .tabs { clear: none; } @media only screen and (min-width: 767px) { .page.header .tabs { float: right; width: auto; } } /** * Mobile Footer: * `.footer.page` - there is a basic layout of short tabbed footer for mobile apps * * @example * */ .page.footer { border-top: #00386b 4px solid; background: url("../img/crossed_stripes.png"); } .page.footer:after { content: ""; display: table; clear: both; } .page.footer .tabs { float: right; width: auto; } .page.footer .logo img { margin: .25rem 1rem; display: none; } .page.footer .tabs.primary li.selected { border-top-color: #00386b; } .page.footer .tabs.primary li.selected a:after { border-top-color: #00386b; } @media only screen and (max-width: 767px) { .page.footer { text-align: right; } .page.footer .logo img { display: block; width: 320px; } .page.footer .tabs { width: 100%; margin: 0; } .page.footer .logo { display: block; border-bottom: #00386b 4px solid; } .page.footer .logo:after { content: ""; display: table; clear: both; } .page.footer .logo img { max-width: 95%; margin: .25rem 2.5%; } } @media only screen and (max-width: 1024px) { .page.footer .tabs { font-weight: 500; } } @media only screen and (min-width: 1024px) { .page.footer { text-align: center; } .page.footer .tabs.primary.reverse { float: none; display: inline-block; } .page.footer .tabs.primary.reverse li { float: none; display: inline-block; } .page.footer .tabs.primary.reverse, .page.footer .tabs.primary.reverse li { background-color: transparent; border: 0; } .page.footer .tabs.primary.reverse a, .page.footer .tabs.primary.reverse li a { color: #fff; } .page.footer .tabs.primary.reverse a:after, .page.footer .tabs.primary.reverse li a:after { top: auto; bottom: -1px; border-width: 0px 8px; border-bottom: 10px solid #fff; } .page.footer .tabs.primary.reverse a:hover, .page.footer .tabs.primary.reverse li a:hover { text-decoration: underline; } } .page-footer { border-top: #666666 4px solid; background-color: #b3b3b3; padding: 1rem 1rem 1rem 1rem; } .page-footer .logo { height: 50px; } .page-footer h3 { font-size: 1.5rem; font-family: 'Roboto Slab', "Times New Roman", 'Lucida Bright', Georgia, serif; font-weight: 400; } .page-footer h4 { margin-left: 0; font-family: 'Roboto Slab', "Times New Roman", 'Lucida Bright', Georgia, serif; font-weight: 400; } .page-footer ul { margin-left: 0; list-style: none; } .page-footer * { color: #666666; } .page-footer .language-picker { display: none; } .footer-darker { background-color: #666666; margin: 1rem -1rem 1rem -1rem; padding: 30px 40px; margin-bottom: 20px; background: url("../img/crossed_stripes.png"); } @media only screen and (max-width: 767px) { .footer-darker { margin-right: -2rem; } } .footer-darker * { color: #fff; } .footer-darker section + section, .footer-darker .section + .section { margin-top: 1rem; } .address ul { display: inline-block; width: auto; float: left; padding-right: 1.67rem; } .address li { font-size: 1rem; line-height: 1.67rem; } .acc-websites .nav-list.small li, .acc-websites .small.panel-selector li { border-color: #4d4d4d; } .acc-websites .nav-list.small li:hover, .acc-websites .small.panel-selector li:hover { background-color: #595959; } .icon-only { display: inline-block; text-decoration: none; color: #333; } .icon-only .text { display: none; } button.twitter, .button.twitter { background-color: #00aced; border-color: #008abe; color: #FFFFFF; } button.twitter:hover, button.twitter:focus, .button.twitter:hover, .button.twitter:focus { background-color: #008abe; } button.twitter:hover, button.twitter:focus, .button.twitter:hover, .button.twitter:focus { color: #FFFFFF; } button.facebook, .button.facebook { background-color: #3b5998; border-color: #2f477a; color: #FFFFFF; } button.facebook:hover, button.facebook:focus, .button.facebook:hover, .button.facebook:focus { background-color: #2f477a; } button.facebook:hover, button.facebook:focus, .button.facebook:hover, .button.facebook:focus { color: #FFFFFF; } button.linkedin, .button.linkedin { background-color: #007bb6; border-color: #006292; color: #FFFFFF; } button.linkedin:hover, button.linkedin:focus, .button.linkedin:hover, .button.linkedin:focus { background-color: #006292; } button.linkedin:hover, button.linkedin:focus, .button.linkedin:hover, .button.linkedin:focus { color: #FFFFFF; } button.googleplus, .button.googleplus { background-color: #dd4b39; border-color: #be3221; color: #FFFFFF; } button.googleplus:hover, button.googleplus:focus, .button.googleplus:hover, .button.googleplus:focus { background-color: #be3221; } button.googleplus:hover, button.googleplus:focus, .button.googleplus:hover, .button.googleplus:focus { color: #FFFFFF; } button.youtube, .button.youtube { background-color: #bb0000; border-color: #960000; color: #FFFFFF; } button.youtube:hover, button.youtube:focus, .button.youtube:hover, .button.youtube:focus { background-color: #960000; } button.youtube:hover, button.youtube:focus, .button.youtube:hover, .button.youtube:focus { color: #FFFFFF; } button.block, .button.block { width: 100%; text-align: left; min-width: 16px; min-width: 1rem; } button.block i, .button.block i { float: right; } .social-buttons ul { display: block; list-style: none; width: 100%; max-width: 500px; } .social-buttons li { float: left; display: inline-block; padding: 0 1% 5px 0; width: 20%; } .social-buttons a { font-size: 1.25rem; } .language-picker { margin-bottom: 0; } .language-picker li { display: inline-block; } .language-picker label, .language-picker h4 { height: 1.3rem; font-size: 1rem; padding: .15rem; margin: 0; } .language-picker input { margin: 0 .15rem 0 .3rem; } cite { height: 1.3rem; font-size: 1rem; padding: .15rem; } @media only screen and (max-width: 767px) { .page-footer { padding-right: 2rem; } .page-footer ul { width: 100%; position: relative; } } /** * Website Footer (Lite): * `footer` - the ACC.org footer is very large and has many moving parts this is the shorter lighter version for applications * * @example * **/ /** * Headline with Counters: * `.order-marker.` - It is some times useful to add an order-marker to the beginning of headlines. * * @example *

1Header 1 Tag

*

2Header 2 Tag

*

aHeader 3 Tag

*

bHeader 4 Tag

*
cHeader 5 Tag
*/ span.order-marker { background-color: #198dae; color: #fff; border-radius: 1000px; display: inline-block; height: 1.5em; margin-right: 0; margin-bottom: 0; padding: .75em .45em .5em; position: relative; top: -.25em; margin-right: .5em; text-align: center; padding-top: .75em; text-transform: capitalize; line-height: 0; } /** * Header Tags and other Typography States: * `.error, .warning, .etc...` - headers `p` `li` `blockquote` `a` and `p` tags can be fully manipulated to respond to states by adding the modifiying state like `.error`, `.warning`, `.info` etc.... * * @example *

Header 1 Tag * Info State *

*

Header 2 Tag Error State

*

Header 3 TagWarning State

*

Header 4 Tag
Validated/success State

*
Header 5 TagHighlighted State
*

Paragraph that is a highlighted State.Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

*/ h1.error, h2.error, h3.error, h4.error, h5.error, h6.error, p.error, a.error, li.error, blockquote.error, h1.warning, h2.warning, h3.warning, h4.warning, h5.warning, h6.warning, p.warning, a.warning, li.warning, blockquote.warning, h1.validated, h2.validated, h3.validated, h4.validated, h5.validated, h6.validated, p.validated, a.validated, li.validated, blockquote.validated, h1.info, h2.info, h3.info, h4.info, h5.info, h6.info, p.info, a.info, li.info, blockquote.info, h1.highlighted, h2.highlighted, h3.highlighted, h4.highlighted, h5.highlighted, h6.highlighted, p.highlighted, a.highlighted, li.highlighted, blockquote.highlighted, h1.completed, h2.completed, h3.completed, h4.completed, h5.completed, h6.completed, p.completed, a.completed, li.completed, blockquote.completed, h1.disabled, h2.disabled, h3.disabled, h4.disabled, h5.disabled, h6.disabled, p.disabled, a.disabled, li.disabled, blockquote.disabled, h1.attention, h2.attention, h3.attention, h4.attention, h5.attention, h6.attention, p.attention, a.attention, li.attention, blockquote.attention { font-weight: 900; } h1.with-underline { border-bottom: #25b6e0 2px solid; } h2.with-underline { border-bottom: #666666 2px solid; } h3.with-underline { border-bottom: #7cd3ec 1px dotted; } h4.with-underline { border-bottom: #999999 1px solid; } h5.with-underline { border-bottom: #b3b3b3 1px solid; } h6.with-underline { border-bottom: #b3b3b3 1px dotted; } /** * Sub Content in Header Tags: * `[Header Tag] > span.sub-line` - basic styling for sub content in headers. * * @example * h1.with-underline Header 1 Tag * span.sub-line sub lines of content in a `span.sub-line` * h2.with-underline Header 2 Tag * span.sub-line sub lines of content in a `span.sub-line` * h3.with-underline Header 3 Tag * span.sub-line sub lines of content in a `span.sub-line` * h4.with-underline Header 4 Tag * span.sub-line sub lines of content in a `span.sub-line` * h5.with-underline Header 5 Tag * span.sub-line sub lines of content in a `span.sub-line` * h6.with-underline Header 6 Tag * span.sub-line sub lines of content in a `span.sub-line` */ /** * Super Content in Header Tags: * `Header Tag] > span.sub-line` - You can use span.sub-line as super content in headers by just including them at the begining of the tag instead of after the header content. * * @example *

Super line of ContentH1 Tag that has some text above it

*

Super line of ContentH2 Tag that has some text above it

*

Super line of ContentH3 Tag that has some text above it

*

Super line of ContentH4 Tag that has some text above it

*
Super line of ContentH5 Tag that has some text above it
* */ h1 blockquote, h2 blockquote, h3 blockquote, h4 blockquote, h5 blockquote, h6 blockquote, h1 .sub-line, h2 .sub-line, h3 .sub-line, h4 .sub-line, h5 .sub-line, h6 .sub-line { display: block; line-height: 1.1; font-size: .55em; margin: 0; padding: 0; font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 400; letter-spacing: .01em; border: 0 none transparent; opacity: .8; } h1 blockquote, h1 .sub-line { font-size: 0.4em; line-height: 1.5em; margin-top: 0em; margin-bottom: 0em; } h1.with-underline blockquote, h1.with-underline .sub-line { font-size: 0.4em; line-height: 1.5em; margin-top: 0.375em; margin-bottom: 0em; } h2 blockquote, h2 .sub-line { font-size: 0.5em; line-height: 1.75em; margin-top: 0em; margin-bottom: 0em; } h2.with-underline blockquote, h2.with-underline .sub-line { font-size: 0.5em; line-height: 1.75em; margin-top: 0.4375em; margin-bottom: 0em; } h3 blockquote, h3 .sub-line { font-size: 0.7em; line-height: 1.5em; margin-top: 0em; margin-bottom: 0em; } h3.with-underline blockquote, h3.with-underline .sub-line { font-size: 0.7em; line-height: 1.5em; margin-top: 0.375em; margin-bottom: 0em; } h4 blockquote, h4 .sub-line { font-size: 0.70588em; line-height: 1.75em; margin-top: 0em; margin-bottom: 0em; } h5 blockquote, h5 .sub-line { font-size: 0.71429em; line-height: 2.1em; margin-top: 0em; margin-bottom: 0em; } h6 blockquote, h6 .sub-line { font-size: 0.71429em; line-height: 2.1em; margin-top: 0em; margin-bottom: 0em; } .text-highlight-color { color: #25b6e0 !important; } /** * Group-divid: * `.group-divide` - a line above or below the container elemtent * * @example * div.group-divide * p this should be a paragraph a line before it. * div.group-divide-bottom * p this paragraph with line after. */ .group-divide { border-top: #25b6e0 1px dotted; margin-top: .5rem; padding-top: 1rem; } .group-divide-bottom { border-bottom: #25b6e0 1px dotted; margin-bottom: .5rem; } .group-divide-auto + .group-divide-auto { border-top: #25b6e0 1px dotted; margin-top: 1rem; padding-top: .5rem; } /** * A tag and .link: * `.link` - a tags have a basic style but links are a styled with `.link` * * @example * a * span this is a plain "a" tag * br * a.link * span this is an "a" tag with the ".link" class * */ .link { color: #25b6e0; text-decoration: underline; } .link.icon { text-decoration: none; } .link:hover { color: #51c5e6; text-decoration: underline; } .link.reverse { color: #fff; } /** * * Type Modifiers: * `bold, italic or subtle,etc...` - `.bold` - make text bold, `.italic` - make text italic, or `.subtle` - make text subtle * * @example * div.bold this has the `.bold` class added to the container which increases font weight and darkens the color. * div.emphasis this has the `.emphasis` class added to the container which darkens the color and makes the font italic and bold * div.loud this has the `.loud` class added to the container which darkens the color. * div.quiet this has the `.quiet` class added to the container which lightens the color. * div.subtle this has the `.subtle` class added to the container which decreases font weight and lightens the color. * div.italic this has the `.italic` class added to the container which makes it lighter and makes it italic. * div.text-highlight-color this has the `.text-highlight-color` class added to the container which changes the color to the product color * */ .always-wrap { white-space: normal !important; } .phone-only { display: none; } @media only screen and (max-width: 767px) { .phone-only { display: block; display: initial; } } .desktop-hide { display: none; } @media only screen and (max-width: 1024px) { .desktop-hide { display: block; display: initial; } } .desktop-show { display: initial; } @media only screen and (max-width: 1024px) { .desktop-show { display: none; } } .relative-position { position: relative; } .hide { display: none; } .absolute-topright { position: absolute !important; top: 0; right: 0; } .absolute-topleft { position: absolute !important; top: 0; left: 0; } .clearboth:after { content: ' '; display: table; clear: both; } /** * HELPER - Condensable (Condense): * `.condensable.large .condense` - This pattern allows for responsive reduction of content. * Content tagged with `.condense` will turn to display:none when it passes the below the break point. On the container element add '.condensable' and set the break point where you want it by adding the class `.small`, `.medium`, or `.large`. * !! Single word reduction requires adding `condensable-word` see example below. * * @example *

* Condensable Sub-line * The full word is only seen on large screens. It only says Super below on smaller screens * Supercalifragilisticexpialidocious *

*/ /** * HELPER - Swappable (short-text long-text): * `.swappable` - This pattern allows for responsive swapping of content from `.short-text` and `.long-text`. * On the container element add `.swappable` and set the break point where you want it to switch by adding the class `.small`, `.medium`, or `.large`. * The elements with the .short-text and .long-text must be inline elements. * * @example *

* Swappable Sub-line * * Short Title * Long TItle Seen on Medium Screens and Up * *

*/ .condensable.condensable-word { word-spacing: -4px; } .condensable .condense { display: inline; } @media only screen and (max-width: 320px) { .condensable .condense { display: none; } } @media only screen and (max-width: 767px) { .condensable.small .condense { display: none; } } @media only screen and (max-width: 1024px) { .condensable.medium .condense { display: none; } } @media only screen and (max-width: 1200px) { .condensable.large .condense { display: none; } } .swappable .long-text { display: inline; } .swappable .short-text { display: none; } @media only screen and (max-width: 320px) { .swappable .short-text { display: inline; } .swappable .long-text { display: none; } } @media only screen and (max-width: 767px) { .swappable.small .short-text { display: inline; } .swappable.small .long-text { display: none; } } @media only screen and (max-width: 1024px) { .swappable.medium .short-text { display: inline; } .swappable.medium .long-text { display: none; } } @media only screen and (max-width: 1200px) { .swappable.large .short-text { display: inline; } .swappable.large .long-text { display: none; } } .css3columns { -webkit-column-count: 1; /* Chrome, Safari, Opera */ -moz-column-count: 1; /* Firefox */ column-count: 1; } @media only screen and (min-width: 767px) { .css3columns { -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2; } } @media only screen and (min-width: 1024px) { .css3columns { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; } } /** * Take me to [top](#top): */ /* STATE TRUMPING CODE */ .error .input-holder input, .error .input-holder textarea, .error .input-holder select, .error .input-holder .postfix, .error .input-holder .prefix, .error.question .button-group, .error .bar.close, .error.inset .bar.close, .info-text.error, h1.with-underline.error, h2.with-underline.error, h3.with-underline.error, h4.with-underline.error, h5.with-underline.error, h6.with-underline.error { border-color: #c32231; } .nav-list.nav-checklist li.error i, .nav-checklist.panel-selector li.error i, .answer.error .required-holder, .question.error .required-holder, .question-inline.error .required-holder, .question-grid-based.error .required-holder, .error .label-holder label, .error .input-holder .postfix, .error .input-holder .prefix, .error .input-holder .value, .error .bar.close .action-btn, .collapsable-panel.error h1, .collapsable-panel.error h2, .collapsable-panel.error h3, .collapsable-panel.error h4, .collapsable-panel.error h5, .collapsable-panel.error h6, h1.error, h2.error, h3.error, h4.error, h5.error, h6.error, p.error, a.error, li.error, blockquote.error { color: #c32231; } .error .message-holder > .error, .hint .error, .error.inset .bar.close .action-btn, .info-text.error { background-color: #c32231; } .error .fa-holder-dynamic:before, .error.fa:before, .error > .fa-holder:before, .nav-list.nav-checklist li.error .fa-holder-dynamic:before, .nav-checklist.panel-selector li.error .fa-holder-dynamic:before { content: ""; } .warning .input-holder input, .warning .input-holder textarea, .warning .input-holder select, .warning .input-holder .postfix, .warning .input-holder .prefix, .warning.question .button-group, .warning .bar.close, .warning.inset .bar.close, .info-text.warning, h1.with-underline.warning, h2.with-underline.warning, h3.with-underline.warning, h4.with-underline.warning, h5.with-underline.warning, h6.with-underline.warning { border-color: #E08514; } .nav-list.nav-checklist li.warning i, .nav-checklist.panel-selector li.warning i, .answer.warning .required-holder, .question.warning .required-holder, .question-inline.warning .required-holder, .question-grid-based.warning .required-holder, .warning .label-holder label, .warning .input-holder .postfix, .warning .input-holder .prefix, .warning .input-holder .value, .warning .bar.close .action-btn, .collapsable-panel.warning h1, .collapsable-panel.warning h2, .collapsable-panel.warning h3, .collapsable-panel.warning h4, .collapsable-panel.warning h5, .collapsable-panel.warning h6, h1.warning, h2.warning, h3.warning, h4.warning, h5.warning, h6.warning, p.warning, a.warning, li.warning, blockquote.warning { color: #E08514; } .warning .message-holder > .warning, .hint .warning, .warning.inset .bar.close .action-btn, .info-text.warning { background-color: #E08514; } .warning .fa-holder-dynamic:before, .warning.fa:before, .warning > .fa-holder:before, .nav-list.nav-checklist li.warning .fa-holder-dynamic:before, .nav-checklist.panel-selector li.warning .fa-holder-dynamic:before { content: ""; } .validated .input-holder input, .validated .input-holder textarea, .validated .input-holder select, .validated .input-holder .postfix, .validated .input-holder .prefix, .validated.question .button-group, .validated .bar.close, .validated.inset .bar.close, .info-text.validated, h1.with-underline.validated, h2.with-underline.validated, h3.with-underline.validated, h4.with-underline.validated, h5.with-underline.validated, h6.with-underline.validated { border-color: #14B057; } .nav-list.nav-checklist li.validated i, .nav-checklist.panel-selector li.validated i, .answer.validated .required-holder, .question.validated .required-holder, .question-inline.validated .required-holder, .question-grid-based.validated .required-holder, .validated .label-holder label, .validated .input-holder .postfix, .validated .input-holder .prefix, .validated .input-holder .value, .validated .bar.close .action-btn, .collapsable-panel.validated h1, .collapsable-panel.validated h2, .collapsable-panel.validated h3, .collapsable-panel.validated h4, .collapsable-panel.validated h5, .collapsable-panel.validated h6, h1.validated, h2.validated, h3.validated, h4.validated, h5.validated, h6.validated, p.validated, a.validated, li.validated, blockquote.validated { color: #14B057; } .validated .message-holder > .validated, .hint .validated, .validated.inset .bar.close .action-btn, .info-text.validated { background-color: #14B057; } .validated .fa-holder-dynamic:before, .validated.fa:before, .validated > .fa-holder:before, .nav-list.nav-checklist li.validated .fa-holder-dynamic:before, .nav-checklist.panel-selector li.validated .fa-holder-dynamic:before { content: ""; } .info .input-holder input, .info .input-holder textarea, .info .input-holder select, .info .input-holder .postfix, .info .input-holder .prefix, .info.question .button-group, .info .bar.close, .info.inset .bar.close, .info-text.info, h1.with-underline.info, h2.with-underline.info, h3.with-underline.info, h4.with-underline.info, h5.with-underline.info, h6.with-underline.info { border-color: #bbe8f4; } .nav-list.nav-checklist li.info i, .nav-checklist.panel-selector li.info i, .answer.info .required-holder, .question.info .required-holder, .question-inline.info .required-holder, .question-grid-based.info .required-holder, .info .label-holder label, .info .input-holder .postfix, .info .input-holder .prefix, .info .input-holder .value, .info .bar.close .action-btn, .collapsable-panel.info h1, .collapsable-panel.info h2, .collapsable-panel.info h3, .collapsable-panel.info h4, .collapsable-panel.info h5, .collapsable-panel.info h6, h1.info, h2.info, h3.info, h4.info, h5.info, h6.info, p.info, a.info, li.info, blockquote.info { color: #bbe8f4; } .info .message-holder > .info, .hint .info, .info.inset .bar.close .action-btn, .info-text.info { background-color: #bbe8f4; } .info .fa-holder-dynamic:before, .info.fa:before, .info > .fa-holder:before, .nav-list.nav-checklist li.info .fa-holder-dynamic:before, .nav-checklist.panel-selector li.info .fa-holder-dynamic:before { content: ""; } .highlighted .input-holder input, .highlighted .input-holder textarea, .highlighted .input-holder select, .highlighted .input-holder .postfix, .highlighted .input-holder .prefix, .highlighted.question .button-group, .highlighted .bar.close, .highlighted.inset .bar.close, .info-text.highlighted, h1.with-underline.highlighted, h2.with-underline.highlighted, h3.with-underline.highlighted, h4.with-underline.highlighted, h5.with-underline.highlighted, h6.with-underline.highlighted { border-color: #22AFD7; } .nav-list.nav-checklist li.highlighted i, .nav-checklist.panel-selector li.highlighted i, .answer.highlighted .required-holder, .question.highlighted .required-holder, .question-inline.highlighted .required-holder, .question-grid-based.highlighted .required-holder, .highlighted .label-holder label, .highlighted .input-holder .postfix, .highlighted .input-holder .prefix, .highlighted .input-holder .value, .highlighted .bar.close .action-btn, .collapsable-panel.highlighted h1, .collapsable-panel.highlighted h2, .collapsable-panel.highlighted h3, .collapsable-panel.highlighted h4, .collapsable-panel.highlighted h5, .collapsable-panel.highlighted h6, h1.highlighted, h2.highlighted, h3.highlighted, h4.highlighted, h5.highlighted, h6.highlighted, p.highlighted, a.highlighted, li.highlighted, blockquote.highlighted { color: #22AFD7; } .highlighted .message-holder > .highlighted, .hint .highlighted, .highlighted.inset .bar.close .action-btn, .info-text.highlighted { background-color: #22AFD7; } .highlighted .fa-holder-dynamic:before, .highlighted.fa:before, .highlighted > .fa-holder:before, .nav-list.nav-checklist li.highlighted .fa-holder-dynamic:before, .nav-checklist.panel-selector li.highlighted .fa-holder-dynamic:before { content: ""; } .completed .input-holder input, .completed .input-holder textarea, .completed .input-holder select, .completed .input-holder .postfix, .completed .input-holder .prefix, .completed.question .button-group, .completed .bar.close, .completed.inset .bar.close, .info-text.completed, h1.with-underline.completed, h2.with-underline.completed, h3.with-underline.completed, h4.with-underline.completed, h5.with-underline.completed, h6.with-underline.completed { border-color: #14B057; } .nav-list.nav-checklist li.completed i, .nav-checklist.panel-selector li.completed i, .answer.completed .required-holder, .question.completed .required-holder, .question-inline.completed .required-holder, .question-grid-based.completed .required-holder, .completed .label-holder label, .completed .input-holder .postfix, .completed .input-holder .prefix, .completed .input-holder .value, .completed .bar.close .action-btn, .collapsable-panel.completed h1, .collapsable-panel.completed h2, .collapsable-panel.completed h3, .collapsable-panel.completed h4, .collapsable-panel.completed h5, .collapsable-panel.completed h6, h1.completed, h2.completed, h3.completed, h4.completed, h5.completed, h6.completed, p.completed, a.completed, li.completed, blockquote.completed { color: #14B057; } .completed .message-holder > .completed, .hint .completed, .completed.inset .bar.close .action-btn, .info-text.completed { background-color: #14B057; } .completed .fa-holder-dynamic:before, .completed.fa:before, .completed > .fa-holder:before, .nav-list.nav-checklist li.completed .fa-holder-dynamic:before, .nav-checklist.panel-selector li.completed .fa-holder-dynamic:before { content: ""; } .disabled .input-holder input, .disabled .input-holder textarea, .disabled .input-holder select, .disabled .input-holder .postfix, .disabled .input-holder .prefix, .disabled.question .button-group, .disabled .bar.close, .disabled.inset .bar.close, .info-text.disabled, h1.with-underline.disabled, h2.with-underline.disabled, h3.with-underline.disabled, h4.with-underline.disabled, h5.with-underline.disabled, h6.with-underline.disabled { border-color: #b3b3b3; } .nav-list.nav-checklist li.disabled i, .nav-checklist.panel-selector li.disabled i, .answer.disabled .required-holder, .question.disabled .required-holder, .question-inline.disabled .required-holder, .question-grid-based.disabled .required-holder, .disabled .label-holder label, .disabled .input-holder .postfix, .disabled .input-holder .prefix, .disabled .input-holder .value, .disabled .bar.close .action-btn, .collapsable-panel.disabled h1, .collapsable-panel.disabled h2, .collapsable-panel.disabled h3, .collapsable-panel.disabled h4, .collapsable-panel.disabled h5, .collapsable-panel.disabled h6, h1.disabled, h2.disabled, h3.disabled, h4.disabled, h5.disabled, h6.disabled, p.disabled, a.disabled, li.disabled, blockquote.disabled { color: #b3b3b3; } .disabled .message-holder > .disabled, .hint .disabled, .disabled.inset .bar.close .action-btn, .info-text.disabled { background-color: #b3b3b3; } .disabled .fa-holder-dynamic:before, .disabled.fa:before, .disabled > .fa-holder:before, .nav-list.nav-checklist li.disabled .fa-holder-dynamic:before, .nav-checklist.panel-selector li.disabled .fa-holder-dynamic:before { content: ""; } .attention .input-holder input, .attention .input-holder textarea, .attention .input-holder select, .attention .input-holder .postfix, .attention .input-holder .prefix, .attention.question .button-group, .attention .bar.close, .attention.inset .bar.close, .info-text.attention, h1.with-underline.attention, h2.with-underline.attention, h3.with-underline.attention, h4.with-underline.attention, h5.with-underline.attention, h6.with-underline.attention { border-color: #E08514; } .nav-list.nav-checklist li.attention i, .nav-checklist.panel-selector li.attention i, .answer.attention .required-holder, .question.attention .required-holder, .question-inline.attention .required-holder, .question-grid-based.attention .required-holder, .attention .label-holder label, .attention .input-holder .postfix, .attention .input-holder .prefix, .attention .input-holder .value, .attention .bar.close .action-btn, .collapsable-panel.attention h1, .collapsable-panel.attention h2, .collapsable-panel.attention h3, .collapsable-panel.attention h4, .collapsable-panel.attention h5, .collapsable-panel.attention h6, h1.attention, h2.attention, h3.attention, h4.attention, h5.attention, h6.attention, p.attention, a.attention, li.attention, blockquote.attention { color: #E08514; } .attention .message-holder > .attention, .hint .attention, .attention.inset .bar.close .action-btn, .info-text.attention { background-color: #E08514; } .attention .fa-holder-dynamic:before, .attention.fa:before, .attention > .fa-holder:before, .nav-list.nav-checklist li.attention .fa-holder-dynamic:before, .nav-checklist.panel-selector li.attention .fa-holder-dynamic:before { content: ""; } .error .fa-holder-dynamic:before, .error.fa:before, .error > .fa-holder:before, .nav-list.nav-checklist li.error .fa-holder-dynamic:before, .nav-checklist.panel-selector li.error .fa-holder-dynamic:before, .warning .fa-holder-dynamic:before, .warning.fa:before, .warning > .fa-holder:before, .nav-list.nav-checklist li.warning .fa-holder-dynamic:before, .nav-checklist.panel-selector li.warning .fa-holder-dynamic:before, .validated .fa-holder-dynamic:before, .validated.fa:before, .validated > .fa-holder:before, .nav-list.nav-checklist li.validated .fa-holder-dynamic:before, .nav-checklist.panel-selector li.validated .fa-holder-dynamic:before, .info .fa-holder-dynamic:before, .info.fa:before, .info > .fa-holder:before, .nav-list.nav-checklist li.info .fa-holder-dynamic:before, .nav-checklist.panel-selector li.info .fa-holder-dynamic:before, .highlighted .fa-holder-dynamic:before, .highlighted.fa:before, .highlighted > .fa-holder:before, .nav-list.nav-checklist li.highlighted .fa-holder-dynamic:before, .nav-checklist.panel-selector li.highlighted .fa-holder-dynamic:before, .completed .fa-holder-dynamic:before, .completed.fa:before, .completed > .fa-holder:before, .nav-list.nav-checklist li.completed .fa-holder-dynamic:before, .nav-checklist.panel-selector li.completed .fa-holder-dynamic:before, .disabled .fa-holder-dynamic:before, .disabled.fa:before, .disabled > .fa-holder:before, .nav-list.nav-checklist li.disabled .fa-holder-dynamic:before, .nav-checklist.panel-selector li.disabled .fa-holder-dynamic:before, .attention .fa-holder-dynamic:before, .attention.fa:before, .attention > .fa-holder:before, .nav-list.nav-checklist li.attention .fa-holder-dynamic:before, .nav-checklist.panel-selector li.attention .fa-holder-dynamic:before { font-family: FontAwesome; } .dark-color-text, .message-holder > .info, .message-holder > .disabled, .hint .info, .hint .disabled, .info-text.error, .info-text.error .required.fa, .info-text.warning, .info-text.warning .required.fa, .info-text.validated, .info-text.validated .required.fa, .info-text.info, .info-text.info .required.fa, .info-text.highlighted, .info-text.highlighted .required.fa, .info-text.completed, .info-text.completed .required.fa, .info-text.disabled, .info-text.disabled .required.fa, .info-text.attention, .info-text.attention .required.fa { color: #333333; } .light-color-text, .message-holder > .error, .message-holder > .warning, .message-holder > .validated, .message-holder > .highlighted, .message-holder > .completed, .message-holder > .attention, .hint .error, .hint .warning, .hint .validated, .hint .highlighted, .hint .completed, .hint .attention { color: #fff; } /*# sourceMappingURL=index.css.map */