stylesheets/form.css
/* @override http://localhost:4000/stylesheets/form.css */
.layout-claims-new .instructions {
font-size: 15px;
font-family: Merriweather, Georgia, serif;
line-height: 1.67em;
margin-bottom: 1.4em;
}
.layout-claims-new form > div,
.layout-claims-verify-2 form{
padding: 0 16px 32px;
background: #f4f3e7;
margin-bottom: 6em;
position: relative;
}
.layout-claims-new form > div > button,
.layout-claims-verify-2 form > button{
position: absolute;
top: 100%;
left: 0;
margin-top: 1em;
}
.layout-claims-new main h1{
font-size: 32px;
letter-spacing: -0.03em;
font-weight: 600;
margin-bottom: 1em;
}
.layout-claims-new h2,
.layout-claims-verify-2 form > fieldset > legend {
font-weight: 600;
font-size: 21px;
font-family: Merriweather, Georgia, serif;
padding: 32px 0 8px;
color: #234c00;
position: relative;
background: white;
margin: 0 -16px 20px;
border-bottom: 3px solid #67a133;
}
.layout-claims-new h2::after{
content: "";
height: 0;
position: absolute;
left: 0;
bottom: 0;
right: 0;
border-bottom: 3px solid #67a133;
z-index: -1;
}
.layout-claims-verify-2 form > fieldset > legend { width: 480px; }
.layout-claims-new form h2:first-of-type,
.layout-claims-verify-2 form > fieldset:first-of-type > legend{
padding-top: 0;
}
.layout-claims-new form h3,
.layout-claims-verify-2 form fieldset fieldset legend {
margin: 0 0 16px;
font-size: 18px;
font-weight: 600;
clear: both;
}
/* @group widths */
.field-number input{ width: 4em; }
input[name="claimant.ssn"],
input[type=date],
input[name="claimant.telephone"],
.field-phone-number input,
.language .controls { max-width: 12em; }
.email input{ max-width: 75%; }
/* @end */
.control-group{ margin: 0 0 28px; }
.control-group .controls{ position: relative; }
.control-group .controls select {
min-width: 0;
background: white;
padding-right: 24px;
overflow: hidden;
text-overflow: ellipsis;
display: block;
line-height: 1.2;
width: 100%;
}
.field-select::after,
.reason .controls::after,
.relationship.type .controls::after,
.country .controls::after,
.language .controls::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,
.reason .controls:hover > select,
.relationship.type .controls:hover > select,
.country .controls:hover > select,
.language .controls:hover > select{
border-color: #aaa;
}
.field-select:hover::after,
.reason .controls:hover::after,
.relationship.type .controls:hover::after,
.country .controls:hover::after,
.language .controls:hover::after{
border-top-color: #888;
}
.field .help-text,
.p-customize-timeline {
font-size: 14px;
line-height: 1.33em;
display: block;
margin-top: 8px;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.control-group input:focus,
.control-group select:focus,
.control-group textarea:focus{
border-color: #1188ff;
box-shadow: 0 0 0 1px rgba(17, 136, 255, 0.15);
outline: none;
}
.controls label.radio {
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;
text-transform: capitalize;
margin-right: 0.4em;
}
.controls label.radio input{
margin-right: 0.5em;
font-size: 14px;
line-height: 18px;
position: relative;
top: -1px;
}
.control-group .control-label,
form > div > fieldset fieldset > legend {
line-height: 1.25em;
margin-bottom: 0.7em;
display: block;
color: #222;
}
/* @group name */
.fieldset-name{ margin-bottom: 8px; }
.control-group.name,
.fieldset-name .field{
width: 32%;
margin-right: 2%;
float: left;
}
.control-group.name.name-last,
.fieldset-name .field.field-name-last{ margin-right: 0; }
.control-group.name .control-label,
.fieldset.fieldset-name .label-text{
font-size: 16px;
color: #534a43;
}
/* @end */
/* @group address */
.control-group.address .control-label,
.fieldset.fieldset-mailing-address .label-text{
font-size: 16px;
color: #534a43;
}
.control-group.city,
.control-group.state,
.control-group.zip,
.field.field-city,
.field.field-state,
.field.field-zip {
float: left;
margin-right: 2%;
}
.field.field-city,
.field.field-state,
.field.field-zip { margin-bottom: 0; }
.control-group.city,
.field.field-city { width: 50%; }
.control-group.state,
.control-group.zip,
.field.field-state,
.field.field-zip { width: 23%; }
.control-group.zip,
.field.field-zip { margin-right: 0; }
.control-group.country,
.fieldset.fieldset-mailing-address {
clear: both;
margin-bottom: 44px;
}
/* @end */
/* @group layout-claims-new */
.layout-claims-new main > .wrapper > h1{
font-size: 32px;
}
.layout-claims-new aside h1{
font-size: 20px;
font-weight: 400;
margin-bottom: 16px;
letter-spacing: normal;
}
.layout-claims-new aside li,
.layout-claims-new aside p {
margin-bottom: 0.5em;
line-height: 1.25em;
margin-left: 0;
list-style-type: decimal;
list-style-position: inside;
}
.layout-claims-new main form footer button {
margin: 0;
font-size: 24px;
font-weight: 600;
padding: 12px 20px;
border-width: 2px;
margin-bottom: 2em;
}
@media screen and (min-width: 853.333px) {
.layout-claims-new main > .wrapper > h1{ font-size: 36px; }
.layout-claims-new form,
.layout-claims-verify-2 form{
float: left;
width: 480px;
}
.layout-claims-new form > div{ margin-bottom: 4em; }
.layout-claims-new aside{
float: left;
font-size: 16px;
color: #505050;
width: 290px;
margin-left: 28px;
margin-top: -6px;
}
.layout-claims-new aside h1{
color: #444;
}
.layout-claims-new aside .steps{
border-left: 1px solid #ccc;
margin-left: 0.67em;
padding-left: 1em;
counter-reset: step;
}
.layout-claims aside .steps li{
list-style-type: none;
counter-increment: step;
position: relative;
padding-top: 1px;
}
.layout-claims aside .steps li::before{
content: counter(step);
position: absolute;
top: 0;
left: -2.2em;
border-radius: 100%;
font-size: 0.8em;
font-weight: 600;
width: 1.8em;
height: 1.8em;
border: 1px solid #888;
background: white;
text-align: center;
line-height: 1.67em;
color: #5a5a5a;
}
.layout-claims aside a{ color: inherit; }
}
/* @group claim information */
.control-group.employer.name{
float: none;
width: auto;
margin-right: 0;
}
/* @end */
/* @group employment information */
/* @end */
/* @group payment */
.control-group[class*="payment---method"],
.control-group[class*="routing_number_2"]{ margin-bottom: 0; }
.control-group[class*="bank_name"]{ padding-top: 28px; }
/* @end */
/* @end */