18F/Paid-Leave-Prototype

View on GitHub
stylesheets/screen.css

Summary

Maintainability
Test Coverage
/* @override http://localhost:4000/stylesheets/screen.css */
/* @group bootstrap */

html {
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    font-family: Source Sans Pro, Verdana, sans-serif;
    font-size: 18px;
    font-weight: 400;
    background: #f8f8f8;
    color: #333;
}
a {
    color: #005b9d;
    text-decoration: underline;
}
a:hover {
    color: #00aedf;
    text-decoration: none;
}
a:visited {
    color: #8d0058;
}
.a-skip-to-main {
    position: absolute;
    left: -9999em;
}
.a-back::before {
    content: "\2190";
    position: absolute;
    left: 12px;
}
.a-back {
    padding: 8px 12px 8px 1.85em;
    border-radius: 0 0 4px 4px;
    background: #eee;
    color: #555;
    margin-top: -1em;
    margin-bottom: 1em;
    display: block;
}
.a-back:hover {
    color: #333;
}
::selection {
    background: #ffe4c5;
    /* WebKit/Blink Browsers */
}
::-moz-selection {
    background: #ffe4c5;
    /* Gecko Browsers */
}

.average-claim-time{
  background: lemonchiffon;
  padding: 0 2px;
  color: #333;
}

main {
    background: white;
    color: #333;
    padding: 0.6em 0 24px;
}

.wrapper {
    width: 95%;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}
@media screen and (min-width: 568.88px) {
    .wrapper {
        width: 90%;
    }
}
.wrapper::after {
    content: "";
    display: table;
    clear: both;
}
main {
    padding: 1em 0 1.5em;
}
img {
    max-width: 100%;
}
table {
    color: inherit;
}
.preposition {
    font-family: Merriweather;
    font-style: italic;
    font-size: 0.85em;
    margin-right: 0.1em;
}

.page p.note{
    font-size: 16px;
    line-height: 1.33em;
    max-width: 32em;
}
/* @end */

/* @group typography */
/* @group .page */

.page .page-title,
.page h1,
.page h2,
.page h3,
.page h4,
.page h5,
.page nav,
.page figure,
.page p,
.page ul,
.page ol,
.page dl,
.page li,
.layout-estimator main p{
    line-height: 1.4em;
    margin: 0 0 0.7em;
    max-width: 640px;
}
.page td { line-height: 1.4em; }

.page tr.a td{
    padding: 0;
}
.page tr.a td a{
    padding: 0.25em 0.33em;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
    text-decoration: none;
}


.page tr.a:hover td a{
    background-color: #fff8c3;
}

.page h1,
.page h2,
.page h3,
.page h4,
.page h5 {
    line-height: 1.125em;
}
.page figure.figure-fill {
    width: 100%;
    max-width: none;
    text-align: center;
}
.page ul,
.page ol {
    padding-left: 1.4em;
}
.page ul ol,
.page ul ul,
.page ol ol,
.page ol ul {
    margin-left: 0;
}
.page strong {
    font-weight: 600;
}
.page em {
    font-style: italic;
}
a[id] {
    color: inherit;
    text-decoration: none;
}
.page code {
    background: #eee;
    border: 1px solid #e3e3e3;
    padding: 1px 2px;
    font-family: "Courier New", Courier, mono;
    font-size: 0.8em;
    font-weight: 600;
    border-radius: 2px;
    color: #d40b79;
    top: -1px;
    position: relative;
    clear: none;
}
.page h1,
.page .page-title,
.layout-estimator main .wrapper > h1 {
    margin-bottom: 0.67em;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.125em;
    color: #383838;
    letter-spacing: -1px;
    position: relative;
    left: -1px;
}

.page h1 span.article,
.page h1 span.preposition {
    font-style: italic;
    font-family: merriweather, Georgia;
    font-size: 0.85em;
}
.page h1+p {
    padding-top: 0.4em;
    font-family: Merriweather;
    line-height: 1.55em;
    color: #494949;
    font-size: 17px;
    margin: -1em 0 1.4em;
}
.page h2,
.layout-home .overview h2 {
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3em;
    font-family: Merriweather, Georgia, serif;
    color: #2f683b;
    max-width: 640px;
    margin: 28px 0 16px;
}
.page h3,
.page h4 {
    font-weight: 600;
    font-size: 21px;
    font-family: inherit;
    line-height: 1.4em;
    margin-top: 16px;
    margin-bottom: 10px;
    color: #333;
}
.page blockquote {
    padding-left: 1em;
    position: relative;
    max-width: 640px;
    margin: 0 auto;
}
.page blockquote::after {
    content: "";
    position: absolute;
    left: 1px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #e3e3e3;
    border-radius: 3px;
}
.page blockquote p {
    font-family: Merriweather, Georgia, serif;
    font-style: italic;
    color: #555;
    font-size: 17px;
    line-height: 1.67em;
    width: auto;
    max-width: none;
}
@media screen and (min-width: 568.88px) {
    .page p,
    .page figure,
    .page ul,
    .page ol,
    .page dl,
    .page li,
    .page td,
    .layout-profile form p {
        margin: 0 0 0.8em;
        line-height: 1.6em;
    }
    .layout-profile form p {
        margin-left: 0;
    }
    .page li p {
        margin-left: 0;
        width: auto;
    }
    .page h1,
    .page h2,
    .page h3,
    .page h4 {
        line-height: 1.1em;
    }
    .page h1,
    .page .page-title,
    .layout-estimator main .wrapper > h1 {
    font-size: 36px;
    }
    .page h1+p,
    .page .page-title+p {
        font-size: 20px;
        line-height: 1.6em;
    }
    .page h2 {
        margin-top: 28px;
        font-size: 21px;
        line-height: 1.3em;
    }
}

.page .page-title+h2 {
    margin-top: 20px;
}
.page li {
    list-style-type: square;
    margin-left: 1.125em;
    margin-bottom: 0.33em;
}
.page ol li {
    list-style-type: decimal;
}
.page ol li li {
    list-style-type: lower-latin;
}
.page ol li a {
    text-decoration: none;
}
.page ol > li li {
    margin-bottom: 0.2em;
}
.page ol > li li li {
    margin-bottom: 0.3em;
}
.page table thead td {
    font-weight: 300;
}
.page figcaption {
    font-size: 16px;
    font-style: italic;
    padding-top: 0.4em;
}

.page dl dd,
aside dl dd{
    margin-left: 1.4em;    
}

.page dl dt,
aside dl dt{
        font-size: 16px;
}

.page dl dl dt{
        color: #595959;
}

aside dl dt{
    margin-top: 0.7em;
}

/* @end */
/* @end */
/* @group tables */

table{
    box-shadow: 0 0 0 1px #ddd;
}

table td,
table th {
    border-bottom: 1px solid #ddd;
    padding: 6px 8px 8px;
    line-height: 1.2em;
}

table tbody tr:last-child td,
table tbody tr:last-child th {
    border-bottom: none;
}

th {
    background-color: #eee;
    font-weight: 600;
    color: #555;
}
tr.archived .status {
    color: #999;
    font-weight: 600;
}

/* @group tablesaw.stackonly.js */
/*! Tablesaw - v2.0.3 - 2016-06-03
* https://github.com/filamentgroup/tablesaw
* Copyright (c) 2016 Filament Group; Licensed MIT */

table.tablesaw {
    empty-cells: show;
    max-width: 100%;
    width: 100%;
}
.tablesaw {
    border-collapse: collapse;
    width: 100%;
}
/* Structure */

.tablesaw {
    border: 0;
    padding: 0;
}
.tablesaw th,
.tablesaw td {
    box-sizing: border-box;
    padding: .25em .375em;
}
.tablesaw thead tr:first-child th {
    padding-top: .45em;
    padding-bottom: .375em;
}
/* Table rows have a gray bottom stroke by default */

.tablesaw-stack tbody tr {} .tablesaw-stack td .tablesaw-cell-label,
.tablesaw-stack th .tablesaw-cell-label {
    display: none;
}
/* Mobile first styles: Begin with the stacked presentation at narrow widths */

@media only all {
    /* Show the table cells as a block level element */
    
    .tablesaw-stack td,
    .tablesaw-stack th {
        text-align: left;
        display: block;
    }
    .tablesaw-stack tr {
        clear: both;
        display: table-row;
    }
    /* Make the label elements a percentage width */
    
    .tablesaw-stack td .tablesaw-cell-label,
    .tablesaw-stack th .tablesaw-cell-label {
        display: block;
        padding: 0 .6em 0 0;
        width: 30%;
        display: inline-block;
    }
    /* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */
    
    .tablesaw-stack th .tablesaw-cell-label-top,
    .tablesaw-stack td .tablesaw-cell-label-top {
        display: block;
        padding: .4em 0;
        margin: .4em 0;
    }
    .tablesaw-cell-label {
        display: block;
    }
    /* Avoid double strokes when stacked */
    
    .tablesaw-stack tbody th.group {
        margin-top: -1px;
    }
    /* Avoid double strokes when stacked */
    
    .tablesaw-stack th.group b.tablesaw-cell-label {
        display: none !important;
    }
}
@media (max-width: 39.9375em) {
    .tablesaw-stack thead td,
    .tablesaw-stack thead th {
        display: none;
    }
    .tablesaw-stack tbody td,
    .tablesaw-stack tbody th {
        clear: left;
        float: left;
        width: 100%;
    }
    .tablesaw-cell-label {
        vertical-align: top;
        color: #555;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tablesaw-cell-content {
        max-width: 67%;
        display: inline-block;
    }
    .tablesaw-stack tr {
        border-bottom: 1px solid #ccc;
    }
    .tablesaw-stack td:empty,
    .tablesaw-stack th:empty {
        display: none;
    }
}
/* Media query to show as a standard table at 560px (35em x 16px) or wider */

@media (min-width: 40em) {
    .tablesaw-stack tr {
        display: table-row;
    }
    /* Show the table header rows */
    
    .tablesaw-stack td,
    .tablesaw-stack th,
    .tablesaw-stack thead td,
    .tablesaw-stack thead th {
        display: table-cell;
        margin: 0;
    }
    /* Hide the labels in each cell */
    
    .tablesaw-stack td .tablesaw-cell-label,
    .tablesaw-stack th .tablesaw-cell-label {
        display: none !important;
    }
    .tablesaw-cell-content {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* @end */

table {
    width: 100%;
    table-layout: fixed;
    margin-bottom: 1em;
}
th {
    text-align: left;
}
td .time {
    display: block;
    font-size: 14px;
    padding-top: 1px;
}
.is-blank {
    color: #aaa;
}
.col-title {
    vertical-align: middle;
}
.col-title .note {
    font-size: 14px;
    display: block;
    max-width: 24em;
    line-height: 1.2;
    padding-top: 0.4em;
}
.col-title .note strong {
    font-weight: 600;
}
.col-title .note em {
    font-style: italic;
}
.col-amount,
.col-bid,
.col-duns-number,
.col-github-id {
    width: 6em;
}
.col-opening-date,
.col-closing-date,
.col-ending-date,
.col-timestamp,
.col-delivery,
.col-date,
.col-sam-status,
.col-accepted {
    width: 8em;
}
.col-winner {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/*.layout-admins-index main,
.layout-bids-placed main,
.layout-customers-index main,
.layout-needs-attention main,
.layout-payments-received main,
.layout-vendors-index main{
    overflow-x: auto;
}

.layout-admins-index main .wrapper,
.layout-bids-placed main .wrapper,
.layout-customers-index main .wrapper,
.layout-needs-attention main .wrapper,
.layout-payments-received main .wrapper,
.layout-vendors-index main .wrapper{
    min-width: 960px;
    margin-left: 2.5%;
    margin-right: 2.5%;
}

@media screen and (min-width: 568.88){ 
    .layout-admins-index main .wrapper,
    .layout-bids-placed main .wrapper,
    .layout-customers-index main .wrapper,
    .layout-needs-attention main .wrapper,
    .layout-payments-received main .wrapper,
    .layout-vendors-index main .wrapper{
        margin-left: 5%;
        margin-right: 5%;
    }
}

@media screen and (min-width: 1066.66){ 
    .layout-admins-index main .wrapper,
    .layout-bids-placed main .wrapper,
    .layout-customers-index main .wrapper,
    .layout-needs-attention main .wrapper,
    .layout-payments-received main .wrapper,
    .layout-vendors-index main .wrapper{
        margin-left: auto;
        margin-right: auto;
    }
}*/
/* @end */
/* @group forms */
/* @group widths */

.field.field-social-security-number input,
input[type=date],
.field.field-telephone-number input,
.field.field-preferred-language label {
    max-width: 12em;
}
/* @end */
/* @group summary.error-message */

.form-errors {
    background: #990017;
    color: white;
    padding: 12px;
    border-radius: 3px;
    font-size: 14px;
    line-height: 18px;
    margin: 12px 0 12px;
}
.form-errors ul {
    margin: 0 0 0 1.4em;
    padding-top: 0;
}
.form-errors ul li {
    list-style-type: disc;
    margin-bottom: 0.7em;
    padding: 0;
}
.form-errors ul li:last-of-type {
    margin-bottom: 0.33em;
}
/* @end */

legend {
    padding: 0;
    display: table;
}
fieldset {
    border: 0;
    padding: 0.01em 0 0 0;
    margin: 0;
    min-width: 0;
}
body:not(:-moz-handler-blocked) fieldset {
    display: table-cell;
}
input[type=tel],
input[type=text],
input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
select,
textarea {
    -webkit-appearance: none;
    -webkit-box-sizing: border-box;
    padding: 4px 8px;
    border: 1px solid #bbb;
    border-radius: 3px;
    line-height: 32px;
    min-height: 38px;
    min-width: 4em;
    width: 100%;
    margin: 0;
    outline: none;
    font: inherit;
}
input[type=radio],
input[type=checkbox] {
    outline: none;
    border: none;
}
.field-select select {
    min-width: 0;
    background: white;
    padding-right: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: 1.2;
    width: 100%;
}
.field-select {
    position: relative;
    z-index: 1;
}
.field-select::after {
    content: "";
    border: 6px solid black;
    position: absolute;
    right: 8px;
    bottom: 0;
    margin-bottom: 9px;
    border-color: #aaa transparent transparent transparent;
    z-index: 1;
}
.field-select:hover select {
    border-color: #aaa;
}
.field-select:hover::after {
    border-top-color: #888;
}
textarea {
    display: block;
    width: 100%;
    max-width: 40em;
    min-height: 6em;
    line-height: 1.25;
    color: #333;
}
button,
.button {
    background: none;
    border: 2px solid;
    color: #2e8540;
    font: inherit;
    font-weight: 600;
    padding: 10px 12px;
    margin: 1em 0 0;
    line-height: 16px;
    cursor: pointer;
    text-decoration: none;
    border-radius: 3px;
    display: inline-block;
    vertical-align: middle;
}
button:hover,
.button:hover {
    background: #2e8540;
    border-color: #2e8540;
    color: white;
    box-shadow: 0 1px 0 #f3f3f3;
    text-decoration: none !important;
}
button:active,
.button:active {
    color: #7aa79d;
    background: #1d5529;
    border-color: #006e52;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
}
.button-reject {
    border-color: #981b1e !important;
    color: #981b1e;
}
.button-reject:hover {
    background: #981b1e;
    color: white;
}
form a.a-return + h1 {
    margin-top: 1em !important;
}
fieldset > p {
    font-size: 14px;
    line-height: 1.4;
    color: #444;
    margin-top: 0;
    margin-bottom: 1em;
}
.description-text,
.p-description-text {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.3;
    max-width: 28em;
    display: block;
    color: #333;
}
.description-text a {
    color: inherit;
}
.description-text a:hover {
    text-decoration: none;
}
div.field,
fieldset {
    margin: 0 0 28px;
    max-width: 32em;
}

div.field::after{
    content: "";
    display: table;
    clear: both;
}
.field .help-text,
.p-customize-timeline {
    font-size: 14px;
    line-height: 1.33em;
    display: block;
    margin-top: 8px;
}
fieldset.fieldset-radio {
    margin-bottom: 18px;
}
.fieldset.fieldset-claimant,
.fieldset.fieldset-child,
.fieldset.fieldset-employer {
    border: 1px solid #ccc;
    padding: 16px;
    padding-top: 0;
    padding-bottom: 19px;
    position: relative;
    margin-top: 24px;
    margin-bottom: 32px;
}


.fieldset.fieldset-claimant > legend,
.fieldset.fieldset-child > legend,
.fieldset.fieldset-employer > legend,
.fieldset.fieldset-physician > legend,
.fieldset.fieldset-physician .fieldset.fieldset-patient > legend {
    font-weight: 600;
}
.fieldset-sign-in label:first-child input {
    margin-bottom: 24px;
}
fieldset div.field:last-of-type+fieldset {
    margin-top: 24px;
    margin-bottom: 4px;
}
fieldset > legend,
.field .label-text {
    display: block;
    max-width: 40em;
    margin: 0 0 12px;
    padding: 0;
    position: static;
    font: inherit;
    line-height: 24px;
}
.field.is-disabled span.label-text {
    color: #888;
    cursor: not-allowed;
}
.field.field-radio {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 6px;
    margin-right: 0.4em;
}
.field.field-radio label {
    display: inline-block;
    padding: 8px 12px 8px 12px;
    min-height: 32px;
    line-height: 1;
    vertical-align: middle;
    background: white;
    border: 1px solid #bbb;
    border-radius: 3px;
}
.field.field-radio input,
.field.field-checkbox input {
    margin-right: 0.4em;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.field.field-checkbox.is-focused label,
.field.field-radio.is-focused label {
    border-color: #1188ff;
    box-shadow: 0 0 0 1px rgba(17, 136, 255, 0.15);
    outline: none;
}
main div.field-select.is-focused::after {
    border-top-color: #1188ff;
}
div.field.field-checkbox span.label-text,
div.field.field-radio span.label-text,
div.field.field-radio input {
    display: inline;
    vertical-align: middle;
    font-weight: normal;
}
div.field.field-checkbox {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
}
div.field.field-checkbox input {
    font-size: 1em;
    line-height: 1;
    position: absolute;
    left: 0;
    top: 0;
}
div.field.field-checkbox+.is-branch {
    margin-top: -4px !important;
    margin-left: 3px;
    margin-bottom: 16px;
}
div.field.is-error .label-text {
    color: #a73856;
}
div.field.is-error input,
div.field.is-error textarea {
    border-color: #ce6246;
}
div.field.is-error .error-text,
fieldset.fieldset-radio.is-error .error-text {
    color: #990017;
    display: block;
    padding-top: 12px;
    font-style: italic;
    font-size: 14px;
}
div.field.is-error .error-text,
fieldset.fieldset-radio.is-error .error-text {
    color: #af1830;
    font-size: 14px;
    padding-top: 6px;
    display: block;
    font-style: italic;
}
@media screen and (min-width: 533.33px) {
    fieldset.fieldset-date-range::after {
        content: "";
        display: table;
        clear: both;
    }
    fieldset.fieldset-date-range div.field {
        padding-bottom: 1.4em;
        position: relative;
        width: 50%;
        float: left;
        margin-bottom: 0;
    }
    fieldset.fieldset-date-range span.label-text {
        position: absolute;
        bottom: 0;
        left: 0;
        margin: 0;
        font-size: 12px;
    }
}
fieldset.fieldset-address div.field {
    padding-bottom: 1.4em;
    position: relative;
}
fieldset.fieldset-address div.field span.label-text {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    font-size: 14px;
    line-height: 1;
}
fieldset.fieldset-address div.field-city-state-zip {
    padding-bottom: 0;
}
fieldset.fieldset-address div.field-city-state-zip::after {
    content: "";
    display: table;
    clear: both;
}
fieldset.fieldset-address div.field-city-state-zip {
    margin-right: -0.7em;
    margin-bottom: 0;
}
fieldset.fieldset-address div.field.field-city,
fieldset.fieldset-address div.field.field-state,
fieldset.fieldset-address div.field.field-zip {
    float: left;
    width: 25%;
    padding-right: 0.67em;
    margin-bottom: 0;
}
fieldset.fieldset-address div.field.field-city {
    width: 50%;
}
fieldset.fieldset-address div.field.field-city input,
fieldset.fieldset-address div.field.field-state input,
fieldset.fieldset-address div.field.field-zip input {
    min-width: 0;
}
fieldset.fieldset-address div.field.field-select::after {
    bottom: auto;
    top: 16px;
    right: 8px;
}
fieldset.fieldset-address div.field.field-state.field-select::after {
    right: 20px;
}
fieldset.fieldset-address div.field.field-country.field-select {
    padding-top: 28px;
    margin-bottom: 0;
}
fieldset.fieldset-address div.field.field-country.field-select::after {
    top: 44px;
}
.field.field-diagnosis {
    margin-bottom: 0;
}
/* @end */
/* @group .boilerplate */

.boilerplate {
    clear: both;
    padding: 16px;
    max-width: 39em;
    background: #f3f3f3;
    border: 1px solid #ccc;
    box-shadow: inset 0 0 0 4px #fff;
    border-radius: 4px;
    margin-bottom: 1em;
}
.boilerplate h1 {
    font-weight: 600;
    font-size: 21px;
    font-family: inherit;
    line-height: 1.4em;
    margin-bottom: 12px;
    color: #333;
}
.boilerplate p {
    line-height: 1.4em;
    margin-bottom: 0.7em;
    max-width: 36em;
}
.boilerplate p:last-of-type,
.boilerplate p:last-child {
    margin-bottom: 0;
}
/* @end */

/* @group .prototype-header */

.prototype-header{
    background: #444;
    color: #eee;
    text-shadow: 1px 1px #333;
    font-size: 14px;
    padding: 8px;
}


/* @end */


/* @group .site-header */

.site-header {
    padding: 10px 0 10px;
    background: #e1f2fd;
}
.site-header a { color: inherit; }

.logo {
    padding-bottom: 8px;
}
.logo a {
    font-size: 21px;
    color: #111;
    text-decoration: none;
    line-height: 21px;
    letter-spacing: -0.025em;
}
.logo .logo-site-title {
    font-size: 12px;
    line-height: 12px;
    padding-top: 6px;
    letter-spacing: normal;
    font-weight: 400;
    font-family: Merriweather;
    font-style: italic;
    display: block;
}

.site-header .a-navigation {
    position: absolute;
    right: 0;
    top: 0;
    border: 2px solid;
    padding: 6px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 3px;
    color: #005b9d;
}

.site-header .a-navigation:hover { text-decoration: underline; }

#navigation:target {
    -webkit-animation: target-fade 3s 1;
    -moz-animation: target-fade 3s 1;
}

@-webkit-keyframes target-fade {
    0% { background-color: rgba(255,215,0,1); }
    100% { background-color: rgba(255,215,0,0); }
}
@-moz-keyframes target-fade {
    0% { background-color: rgba(255,215,0,1); }
    100% { background-color: rgba(255,215,0,0); }
}


.site-header nav { 
    display: none; 
       padding-top: 8px;
}

.site-header li,
.site-footer li {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.4em;
    margin-bottom: 0.33em;
}

.site-header li{ margin: 0 -0.1em; }
.site-header nav a {
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    border-bottom: 1px solid transparent;
    padding: 6px 10px;
    border-radius: 99em;
}

.site-header nav a:hover {
    text-decoration: underline;
}
.layout-claims-new .site-header .nav-file-a-claim a,
.layout-claims-search .site-header .nav-check-claim-status a,
.layout-claims-search-results .site-header .nav-check-claim-status a,
.layout-claims-show .site-header .nav-check-claim-status a,
.layout-estimator .site-header .nav-estimator a {
    background: white;
    border-radius: 99em;
    border-bottom-color: #c6d7e4;
}


@media screen and (min-width: 568.888px) {
    
    .site-header { padding: 14px 0 20px; }
    .logo a {
        font-weight: 400;
        font-size: 24px;
        line-height: 25px;
        color: #313334;
    }
    
    .logo .logo-site-title {
        line-height: 16px;
        color: black;
    }
    .site-header .a-navigation { display: none; }
    .site-header .site-header-nav { 
        display: block;
        margin-left: -7px; 
    }
    .site-footer .site-header-nav { display: none; }
}

@media screen and (min-width: 711.111px) {
    .site-header .logo { 
        float: left; 
        padding: 0;
    }
    .site-header li{ margin: 0 -0.1em; }
    .site-header .site-header-nav {
        float: right;
        margin-left: 0;
        margin-right: -5px;
    }
}

/* @end */
/* @group .site-footer */

.site-footer {
    padding-top: 18px;
    padding-bottom: 36px;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.site-footer .site-header-nav,
.site-footer .site-footer-nav { margin-bottom: 0.67em; }

.site-footer .site-header-nav li,
.site-footer .site-footer-nav li{
        display: inline-block;
        border-right: 1px solid #ccc;
        padding-right: 0.67em;
        margin-bottom: 0.5em;
}

.site-footer .site-footer-contact li::after{
    content: ".";
    color: #bbb;
    font-weight: 600;
    position: relative;
    top: -0.125em;
    right: -0.33em;
    
}

.site-footer li a{  color: #444;  }

.site-footer .site-footer-contact a{
    font-size: 14px;
    font-weight: 600;
    color: #555;
}

.site-footer .site-footer-nav li:last-child,
.site-footer .site-footer-contact li:last-child::after{
    content: "";
    border: none;
    padding: 0;
}


@media screen and (min-width: 640px) {
    .site-footer {
        padding-top: 2em;
        padding-bottom: 2em;
    }
    
    .site-footer .site-footer-nav li{
        border-right: 1px solid #ccc;
        margin-bottom: 0.33em;
    }
    
}

/* @end */

/* @group claim */

.claim{ 
    max-width: 480px; 
    border: 1px solid #ccc;
    box-shadow: 0 0 0 3px #eee;
    border-radius: 6px;
    padding: 20px;
    margin-top: 2em;
    position: relative;
}

.claim a.button{ 
    position: absolute;
    right: 18px;
    top: 18px;
    margin-top: 0;
}

.claim h1{
    font-size: 28px; 
    letter-spacing: normal;
    font-weight: normal;
    margin-bottom: 1em;
}

.claim section{
    position: relative;
    margin-bottom: 1.6em;
}

.claim section h1{
    font-weight: 600;
    font-size: 18px;
    font-family: Merriweather, Georgia;
    width: auto;
    max-width: none;
    padding: 0 0 4px;
    border-bottom: 1px solid #aaa;
    letter-spacing: 0;
      color: #444;
}

.claim section dd{ margin-bottom: 0.8em; }
.claim section dd dd{
    margin-bottom: 0.4em;
}
/* @end */


/* @group layouts */

/* @group layout-home */

.layout-home main { padding-top: 0; }

.layout-home .masthead {
    background: #cdebfe;
    padding: 1em 0 1.4em;
    margin-bottom: 1em;
    color: #3a4a54;
}
.layout-home .masthead h1 {
    font-size: 36px;
    color: #3e2f3c;
    font-family: Open Sans Condensed, Roboto Condensed, Trebuchet MS, mono;
        font-weight: 700;
    line-height: 1.1em;
    margin-bottom: 0.4em;
    padding-right: 0.2em;
}

.layout-home .masthead h1+p {
    line-height: 1.33em;
    max-width: 36em;
    font-family: Merriweather, Georgia;
    line-height: 1.6em;
    font-size: 17px;
}
.layout-home .masthead .button {
    background: #005b9c;
    border: none;
    border-bottom: 3px solid #00497e;
    text-shadow: 0 -1px 0 #00497e;
    color: white;
    display: inline-block;
    margin-right: 0.2em;
    margin-bottom: 0.4em;
    padding: 10px 18px;
    font-weight: 600;
    font-size: 16px;
}
.layout-home .masthead .button:hover {
    background: #004a7f;
    border-bottom-color: #003d69;
}
.layout-home .masthead .check-status {
    font-size: 16px;
    padding-top: 0.4em;
}
.layout-home .masthead .sign-in {
    position: absolute;
    right: 0;
    top: 0;
    padding: 12px 16px;
    background: rgba(254, 255, 255, 0.85);
    border-radius: 3px;
    font-size: 16px;
}
.layout-home main h1+p { margin-bottom: 0.8em; }
.layout-home main h1+p+ul { margin-bottom: 1.2em; }

.layout-home .primary-secondary-content .primary-content {
    margin-bottom: 1.4em;
}
@media screen and (min-width: 568.88px) {
    .layout-home .masthead {
        padding: 2em 0;
    }
    .layout-home .masthead h1 {
        font-size: 48px;
        text-transform: none;
        letter-spacing: -0.02em;
    }
    .layout-home .masthead h1+p {
        font-size: 20px;
        line-height: 1.6em;
    }
    .layout-home .masthead .button {
        font-size: 18px;
    }
}
@media screen and (min-width: 853.333px) {
    .layout-home .primary-secondary-content {
        padding-right: 320px;
    }
    .layout-home .primary-secondary-content:after {
        content: "";
        display: table;
        clear: both;
    }
    .layout-home .primary-secondary-content .primary-content,
    .layout-home .primary-secondary-content .secondary-content {
        float: left;
        width: 100%;
        margin-bottom: 0;
    }
    .layout-home .primary-secondary-content .secondary-content {
        width: 320px;
        float: right;
        margin-right: -320px;
        padding-left: 30px;
    }
}
.layout-home aside .claim-processing-time h1 {
    letter-spacing: normal;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.layout-home aside .claim-processing-time span {
    font-weight: 600;
    font-size: 36px;
}
.layout-home aside .contact-us h1 {
    position: absolute;
    left: -9999em;
}
.layout-home .contact-us {
    padding-top: 1.5em;
}
.vcard {
    border: 1px solid #ddd;
    padding: 8px 12px;
    border-radius: 2px;
    position: relative;
    margin-bottom: 1em;
}

.vcard .a-edit{
    font-size: 14px;
    position: absolute;
    right: 16px;
    top: 12px;
}

.vcard .fn {
    font-weight: 600;
    display: block;
    color: #444;
}
.vcard .fn,
.vcard .adr {
    line-height: 1.33em;
}
.vcard .adr p {
    font-size: 16px;
    line-height: 1.33em;
    padding-top: 0.67em;
}

.layout-home .overview h1 {
    margin-bottom: 0.33em;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.125em;
    color: #383838;
    letter-spacing: -0.01em;
    position: relative;
    left: -1px;
}

.overview h2 {
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3em;
    font-family: Merriweather, Georgia, serif;
    margin: 28px auto 16px;
}
.layout-home .overview .primary-content p,
.layout-home .overview .primary-content li {
    line-height: 1.4em;
}
.layout-home .overview li {
    list-style-type: square;
    margin-left: 1.125em;
    margin-bottom: 0.33em;
}

@media screen and (min-width: 568.88px) {
    .layout-home .overview h1 {
        font-size: 32px;
    }
    .layout-home .overview .primary-content p {
        line-height: 1.5em;
    }
}
/* @end */

/* @group layout-claims-verify */
.layout-claims-verify .page ol li a{
    display: block;
}

.layout-claims-verify span.claim-verification-code{
    text-indent: -0.0675em;
    font-size: 96px;
    line-height: 0.85em;
    display: block;
    font-family: Open Sans Condensed, Roboto Condensed, Trebuchet MS, mono;
    color: #348022;
    font-weight: 100;
    margin-bottom: 0.25em;
}

/* @end */

/* @group layout-claims-verify-1 */

  .layout-claims-verify-1 form{
      padding: 32px;
    background: #f5f4ee;
    border-radius: 5px;
    max-width: 24em;
    margin: 0 0 2.1em;
  }
  
  .layout-claims-verify-1 form .label-text{
    font-weight: 600;
    color: #4c3f3a;
  }

/* @end */

/* @group layout-claim-list */

.layout-claim-list section.benefits h1,
.layout-claim-list section.your-information h1{
    font-weight: 600;
    font-size: 21px;
    line-height: 1.3em;
    font-family: Merriweather, Georgia, serif;
    color: #444;
    margin: 28px auto 16px;
}

.layout-claim-list section.benefits p{
    line-height: 1.4em;
  
}


@media screen and (min-width: 711.111px) {

.layout-claim-list section.benefits,
.layout-claim-list section.your-information{
    float: left;
    width: 100%;
    border-top: 3px solid #555;
    margin-top: 1.2em;
    padding-top: 0.3em;
}

.layout-claim-list section.benefits h1,
.layout-claim-list section.your-information h1{
    margin-top: 8px;
}

.layout-claim-list section.benefits{
  width: 61%;
  margin-right: 5%;
}

.layout-claim-list section.your-information{
    width: 33%;
}


}


/* @end */

/* @group layout-estimator */

.layout-estimator{  counter-reset: step;  }

.layout-estimator aside {
    padding: 12px;
    margin-top: 2em;
    background: #f4f3e7;
    border-radius: 4px;
}

.layout-estimator main p { 
    max-width: 32em; 
}

.layout-estimator aside p {
    font-size: 16px;
    line-height: 1.25;
}

.layout-estimator #estimator-results{ display: none; }
.layout-estimator #earnings{
  display: none;
  margin-top: 28px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.layout-estimator form h1{
    counter-increment: step;
    padding-left: 40px;
    position: relative;
}

.layout-estimator form p,
.layout-estimator form .field{ padding-left: 40px; }

.layout-estimator form p{
    font-size: 16px;
    line-height: 1.33em;
    margin-bottom: 1em;
}

.layout-estimator form button{
    margin-top: 1.67em;
    margin-bottom: 1em;
    margin-left: 40px;
}
.layout-estimator form h1::before{
    content: counter(step);
    font-size: 52px;
    float: left;
    font-family: Open Sans Condensed, Roboto Condensed, Trebuchet MS, Mono;
    color: #2f683b;
    font-weight: 300;
    position: absolute;
    left: 0;
    top: 0.2em;
}

.layout-estimator form .field {
    margin-bottom: 0;
    margin-left: 0;
    max-width: 12em;
}

.layout-estimator .how-this-works h1{
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 16px;
  letter-spacing: normal;
}

.layout-estimator main h1 {
    font-size: 20px;
    line-height: 1.2em;
    margin-bottom: 0.67em;
    font-weight: 400;
    max-width: 24em;
}
.layout-estimator form .field .label-text {
    position: absolute;
    left: -9999em;
}

.layout-estimator .how-this-works table{
    font-size: 14px;
    max-width: 32em;
    table-layout: auto;
    margin-top: 1em;
    box-shadow: 0 0 0 1px #e6e4d4;
}

.layout-estimator .how-this-works table thead th{ 
    background-color: #e6e4d4; 
    color: #333;
}

.layout-estimator .how-this-works table th,
.layout-estimator .how-this-works table td{
    border-color: #e6e4d4;
}

.layout-estimator form h1 strong {
    font-weight: 600;
    display: inline-block;
}

@media screen and (min-width: 568.88px) {
    .layout-estimator aside {
        padding: 0.8em 0 0;
        background: none;
        border-top: 3px solid #eee9d8;
    }
    
    .layout-estimator .how-this-works table{ 
        font-size: 16px; 
    }

    .layout-estimator .how-this-works table thead th{ 
        background-color: #eee;
        color: #555;
    }

}
/* @end */
/* @group layout-claims-search */

  .form-search{
      padding: 16px;
    background: #f5f4ee;
    border-radius: 5px;
    max-width: 20em;
    margin: 0 0 1.2em;
  }
  
  .form-search .label-text{
    font-weight: 600;
    color: #4c3f3a;
  }
   

  .form-search .field:last-of-type{ margin-bottom: 1em; }


@media screen and (min-width: 568.888px) {
  .form-search{
    padding: 32px;
    max-width: 24em;
    margin: 0 0 2em;
  }
  .layout-claims-search main .wrapper{ 
      max-width: 32em; 
      position: relative;
  }
}

/* @end */

/* @group layout-claims-show */

.layout-claims-show .claim{ margin: -6px 0 20px; }
.layout-claims-show aside p,
.layout-claims-show aside dl { line-height: 1.4em; }

.layout-claims-show aside h1{
    color: #444;
    font-size: 18px;
    font-weight: 600;
    margin-top: 1em;
    margin-bottom: 0.4em;
}

@media screen and (min-width: 711.111px) {
    
    .layout-claims-show .claim{
        float: left;
        width: 480px;
        margin-top: 0;
    }

    .layout-claims-show aside{
        float: left;
        font-size: 16px;
        color: #505050;
        width: 290px;
        margin-left: 28px;
        margin-top: 12px;
    }
    
}

/* @end */

/* @end */