html,
body,
div,
span,
applet,
object,
iframe,
h1,
.dataTbl .tblTitle,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}

html {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption,
th,
td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle;
}

.dataTbl th.gap, .dataTbl td.gap {
    width: 10px;
    background: transparent;
}

q,
blockquote {
    quotes: none;
}

    q:before,
    q:after,
    blockquote:before,
    blockquote:after {
        content: "";
        content: none;
    }

a img {
    border: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

.nav-collapse {
    list-style: none;
    width: 100%;
    float: left;
}

@media only screen and (min-width: 768px) {
    .nav-collapse {
        width: auto;
        float: right;
    }
}

.nav-collapse ul {
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
    list-style: none;
    float: left;
}

@media only screen and (min-width: 768px) {
    .nav-collapse ul {
        float: right;
        width: auto;
        margin: 20px 20px 15px 20px;
    }
}

@media only screen and (min-width: 1200px) {
    .nav-collapse ul {
        margin-right: 0;
    }
}

@media only screen and (width: 1920px) and (height: 1080px) {
    .nav-collapse ul {
        display: none;
    }
}

.nav-collapse li {
    width: 100%;
    display: block;
    float: left;
}

@media only screen and (min-width: 768px) {
    .nav-collapse li {
        width: auto;
        display: inline-block;
        float: none;
    }
}

.js .nav-collapse {
    clip: rect(0 0 0 0);
    max-height: 0;
    position: absolute;
    display: block;
    overflow: hidden;
    zoom: 1;
}

.nav-collapse.opened {
    max-height: 9999px;
}

@media only screen and (min-width: 768px) {
    .nav-collapse.opened {
        position: relative;
    }
}

@media only screen and (min-width: 768px) {
    .js .nav-collapse.closed {
        max-height: none;
    }
}

.fixed {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
}

.nav-collapse a {
    color: #000;
    text-decoration: none;
    width: 100%;
    background: #f0bb32;
    border-bottom: 1px solid #fff;
    padding: 16px 23px;
    float: left;
}

@media only screen and (min-width: 768px) {
    .nav-collapse a {
        margin: 0;
        float: right;
        text-align: center;
        border-bottom: 0;
        color: #555;
        width: auto;
        background: transparent;
        font-weight: 700;
        padding: 16px;
    }
}

.nav-collapse ul ul a {
    background: #f0bb32;
    padding-left: 30px;
}

@media only screen and (min-width: 768px) {
    .nav-collapse ul ul a {
        display: none;
    }
}

.nav-toggle {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    position: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    text-indent: -999px;
    position: relative;
    overflow: hidden;
    float: right;
    width: 24px;
    height: 24px;
    background: url("../images/menu-2.png") 0 0 no-repeat;
    background-size: 24px 24px;
    margin: 30px 23px 15px 0;
}

@media only screen and (min-width: 768px) {
    .nav-toggle {
        display: none;
    }
}

html {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 62.5%;
}

*,
*:before,
*:after {
    -moz-box-sizing: inherit;
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

body {
    background: #fff;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.4;
    color: #000;
}

@media only screen and (width: 1920px) and (height: 1080px) {
    form {
        height: 1080px;
        background: url("/~/media/Images/Calculator/spotlight-lg.jpg") 0 0 no-repeat;
        overflow: auto;
    }
}

h1,
.dataTbl .tblTitle {
    font-size: 2.331rem;
    font-weight: 700;
    line-height: 1.1;
    color: #f0bb32;
    text-shadow: rgba(28, 27, 28, 0.5) 0px 2px 10px;
    padding-bottom: 3px;
}

@media only screen and (min-width: 1020px) {
    h1,
    .dataTbl .tblTitle {
        font-size: 3.8rem;
        padding-bottom: 8px;
    }
}

h2 {
    font-size: 1.288rem;
    line-height: 1.5;
    color: #fff;
}

@media only screen and (min-width: 1020px) {
    h2 {
        font-size: 2.1rem;
        line-height: 1.3;
    }
}

p {
    padding-bottom: 18px;
}

b,
strong {
    font-weight: 700;
}

@media only screen and (min-width: 1020px) {
    .container {
        width: 1020px;
        margin: 0 auto;
    }
}

@media only screen and (width: 1920px) and (height: 1080px) {
    .container {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0 100px 0 0;
    }
}

header {
    background: #fff;
}

@media only screen and (width: 1920px) and (height: 1080px) {
    header {
        float: left;
        width: 750px;
        padding: 44px 0 0 81px;
        background: transparent;
    }
}

@media only screen and (min-width: 1020px) {
    .headercontainer {
        width: 1020px;
        margin: 0 auto;
    }
}

.logoLink {
    width: 138px;
    height: 46px;
    display: inline-block;
    background: url("/images/CraneCostComparisonCalc/grove-logo.gif") 0 0 no-repeat;
    margin: 24px 0 15px 23px;
}

@media only screen and (min-width: 768px) {
    .logoLink {
        margin: 24px 0 15px 23px;
    }
}

@media only screen and (min-width: 1200px) {
    .logoLink {
        margin: 24px 0 15px 14px;
    }
}

@media only screen and (width: 1920px) and (height: 1080px) {
    .logoLink {
        background: url("/images/CraneCostComparisonCalc/grove-logo-white.png") 0 0 no-repeat;
        width: 206px;
        height: 64px;
        margin: 0;
    }
}

.banner {
    border-top: 3px solid #f0bb32;
}

@media only screen and (width: 1920px) and (height: 1080px) {
    .banner {
        float: left;
        clear: left;
        width: 750px;
        border-top: none;
    }
}

.banner img {
    width: 100%;
    max-width: 100%;
}

@media only screen and (min-width: 1200px) {
    .banner img {
        height: 286px;
    }
}

@media only screen and (width: 1920px) and (height: 1080px) {
    .banner img {
        display: none;
    }
}

.banner .bannerText {
    position: absolute;
    top: 14px;
    left: 23px;
}

@media only screen and (min-width: 1020px) {
    .banner .bannerText {
        top: 45px;
    }
}

@media only screen and (width: 1920px) and (height: 1080px) {
    .banner .bannerText {
        position: relative;
        display: block;
        top: auto;
        left: auto;
        padding: 40px 81px 0 81px;
    }
}

.banner #intro {
    padding: 29px 23px;
}

@media only screen and (min-width: 1020px) {
    .banner #intro {
        width: 1020px;
        margin: 0 auto;
    }
}

@media only screen and (width: 1920px) and (height: 1080px) {
    .banner #intro {
        padding: 40px 81px 0 81px;
        width: 750px;
        color: #fff;
        line-height: 1.375;
    }
}

.picwrap {
    width: 100%;
}

@media only screen and (min-width: 1200px) {
    .picwrap {
        background: #3d3d3d;
    }
}

@media only screen and (width: 1920px) and (height: 1080px) {
    .picwrap {
        width: 750px;
        background: transparent;
        height: auto;
    }
}

.piccontainer {
    position: relative;
}

@media only screen and (min-width: 1200px) {
    .piccontainer {
        width: 1200px;
        height: 286px;
        overflow: hidden;
        margin: 0 auto;
    }
}

@media only screen and (width: 1920px) and (height: 1080px) {
    .piccontainer {
        width: 750px;
        height: auto;
        margin: 0;
    }
}

section {
    padding: 22px 14px 28px 14px;
    border-top: 1px solid #000;
    overflow: auto;
}

@media only screen and (min-width: 1200px) {
    section {
        padding: 22px 14px 28px 14px;
    }
}

@media only screen and (width: 1920px) and (height: 1080px) {
    section {
        padding: 20px 14px 22px 14px;
    }

        section:first-of-type {
            border-top: none;
        }
}

.formTbl input, .formTbl select {
    background: #f9d33c;
    border: 1px solid #000;
    -moz-box-shadow: rgba(28, 27, 28, 0.5) 1px 1px 4px inset;
    -webkit-box-shadow: rgba(28, 27, 28, 0.5) 1px 1px 4px inset;
    box-shadow: rgba(28, 27, 28, 0.5) 1px 1px 4px inset;
    font-size: 1.6rem;
    text-align: center;
    padding: 7px;
}

.formTbl select {
    width: 92%;
    text-align: left;
}

.formTbl input:active {
    background: #f0bb32;
}

.formTbl input.calcButton {
    -moz-box-shadow: rgba(28, 27, 28, 0.5) 1px 1px 4px;
    -webkit-box-shadow: rgba(28, 27, 28, 0.5) 1px 1px 4px;
    box-shadow: rgba(28, 27, 28, 0.5) 1px 1px 4px;
}

    .formTbl input.calcButton:hover {
        cursor: pointer;
    }

.formTbl input[type="radio"] {
    width: auto;
}

@media only screen and (min-width: 768px) {
    .formTbl input {
        width: 150px;
    }
}

@media only screen and (min-width: 1200px) {
    .formTbl input {
        width: 132px;
    }
}

@media only screen and (width: 1920px) and (height: 1080px) {
    .formTbl input {
        padding: 4px 7px;
    }
}

.formTbl input[type=number]::-webkit-inner-spin-button,
.formTbl input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.styledTbl {
    width: 100%;
}

    .styledTbl caption {
        font-weight: 700;
        font-size: 1.7rem;
    }

    .styledTbl th {
        font-weight: 700;
        text-align: center;
    }

@media only screen and (min-width: 768px) {
    .formTbl {
        float: left;
        width: 50%;
        margin-right: 10px;
    }
}

@media only screen and (min-width: 1200px) {
    .formTbl {
        width: 530px;
        margin-right: 0;
    }
}

.formTbl th {
    display: block;
}

@media only screen and (min-width: 768px) {
    .formTbl th {
        display: table-cell;
    }
}

@media only screen and (min-width: 1200px) {
    .formTbl th {
        padding-bottom: 4px;
    }
}

@media only screen and (width: 1920px) and (height: 1080px) {
    .formTbl th {
        padding-bottom: 2px;
    }
}

.formTbl td {
    display: inline-block;
    padding: 0 6px 6px 0px;
}

@media only screen and (min-width: 768px) {
    .formTbl td {
        display: table-cell;
    }
}

@media only screen and (min-width: 1200px) {
    .formTbl td {
        padding: 0 0 5px 0;
        width: 144px;
    }
}

@media only screen and (width: 1920px) and (height: 1080px) {
    .formTbl td {
        padding: 0 0 4px 0;
    }
}

.formTbl tr td:first-of-type {
    display: block;
}

@media only screen and (min-width: 768px) {
    .formTbl tr td:first-of-type {
        display: table-cell;
        padding: 0;
        width: 289px;
    }
}

.avgTbl {
    margin-top: 30px;
    background: #f2e7c7;
}

@media only screen and (min-width: 768px) {
    .avgTbl {
        float: right;
        width: 40%;
        margin-top: 0;
    }
}

@media only screen and (min-width: 1200px) {
    .avgTbl {
        width: auto;
    }
}

.avgTbl th {
    background: #fff;
    padding: 7px;
}

@media only screen and (min-width: 768px) {
    .avgTbl th {
        padding: 0 0 3px 0;
    }
}

@media only screen and (min-width: 1200px) {
    .avgTbl th {
        padding-bottom: 4px;
    }
}

@media only screen and (width: 1920px) and (height: 1080px) {
    .avgTbl th {
        padding-bottom: 2px;
    }
}

.avgTbl td {
    padding: 7px;
}

@media only screen and (min-width: 1200px) {
    .avgTbl td {
        padding: 8px 30px;
    }
}

@media only screen and (width: 1920px) and (height: 1080px) {
    .avgTbl td {
        padding: 5px 30px;
    }
}

.dataTbl th {
    display: none;
    vertical-align: top;
}

@media only screen and (min-width: 768px) {
    .dataTbl th {
        display: table-cell;
        padding: 10px 0 0 0;
        border-right: 1px solid #000;
    }

        .dataTbl th:last-of-type {
            border-right: none;
        }
}

@media only screen and (width: 1920px) and (height: 1080px) {
    .dataTbl th {
        padding-top: 4px;
    }
}

.dataTbl th[scope=col] {
    background: #e9e9e8;
    border-bottom: 1px solid #fff;
}

.dataTbl th.rowtitle {
    text-align: left;
    font-weight: 400;
    display: block;
    padding: 20px 0 5px 0;
    border-right: none;
}

@media only screen and (min-width: 768px) {
    .dataTbl th.rowtitle {
        display: table-cell;
        width: 300px;
    }
}

@media only screen and (width: 1920px) and (height: 1080px) {
    .dataTbl th.rowtitle {
        padding: 4px 0;
    }
}

@media only screen and (min-width: 1200px) {
    .dataTbl th.rowtitle {
        width: 345px;
    }
}

.dataTbl th.rowtitle .tblSubTitle {
    font-size: 1.7rem;
}

@media only screen and (width: 1920px) and (height: 1080px) {
    .dataTbl th.rowtitle .tblSubTitle {
        font-size: 1.6rem;
    }
}

.dataTbl th.rowtitle.tt {
    background: #fff;
}

.dataTbl .tblTitle {
    text-align: left;
    text-shadow: none;
    display: block;
    padding: 0 0 15px 0;
}

@media only screen and (min-width: 768px) {
    .dataTbl .tblTitle {
        display: table-cell;
    }
}

@media only screen and (min-width: 1020px) {
    .dataTbl .tblTitle {
        font-size: 2.4rem;
    }
}

@media only screen and (width: 1920px) and (height: 1080px) {
    .dataTbl .tblTitle {
        padding-bottom: 10px;
    }
}

.dataTbl td {
    text-align: center;
    display: block;
    padding: 7px 0;
    background: #e9e9e8;
    border-bottom: 1px solid #fff;
}

@media only screen and (min-width: 768px) {
    .dataTbl td {
        display: table-cell;
        border-right: 1px solid #000;
    }

        .dataTbl td:last-of-type {
            border-right: none;
        }
}

.dataTbl td span {
    display: block;
}

@media only screen and (min-width: 768px) {
    .dataTbl td span {
        display: inline;
    }
}

.dataTbl tr.spacer td {
    padding: 16px 0;
    border-bottom: none;
    background: transparent;
}

.dataTbl .dynColTitle {
    font-weight: 600;
    font-size: 1.5rem;
}

@media only screen and (min-width: 768px) {
    .dataTbl .dynColTitle {
        display: none;
    }
}

.fuelTbl tr:last-of-type td {
    font-weight: 700;
}

.carrierDataTbl {
    margin-top: 30px;
}

@media only screen and (min-width: 1200px) {
    .carrierDataTbl {
        width: 797px;
    }
}

@media only screen and (width: 1920px) and (height: 1080px) {
    .carrierDataTbl {
        margin-top: 5px;
    }
}

.carrierDataTbl th {
    width: 300px;
}

@media only screen and (min-width: 1200px) {
    .boldrow th,
    .boldrow td {
        font-weight: 700;
    }
}

.spacer td {
    display: none;
}

@media only screen and (min-width: 768px) {
    .spacer td {
        display: table-cell;
        background: #e9e9e8;
    }
}

@media only screen and (width: 1920px) and (height: 1080px) {
    .spacer td {
        padding: 1px;
    }
}

.tblSubTitle,
th.boldTitle {
    font-weight: 700 !important;
}

.optTD {
    height: 0;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

@media only screen and (width: 1920px) and (height: 1080px) {
    .hideD {
        display: none;
    }
}

@media only screen and (min-width: 768px) {
    .hideS {
        display: none;
    }
}

.hideXS {
    display: none;
}

@media only screen and (min-width: 768px) {
    .hideXS {
        display: block;
    }
}

#maintenance {
    padding-bottom: 31px;
}

@media only screen and (width: 1920px) and (height: 1080px) {
    #maintenance {
        padding-bottom: 0;
    }
}

footer {
    border-top: 1px solid #f0bb32;
    font-size: 1.2rem;
    line-height: 1;
    padding: 34px 23px 41px 23px;
}

@media only screen and (width: 1920px) and (height: 1080px) {
    footer {
        display: none;
    }
}

footer .container {
    padding: 0 14px;
}

#alertLabel {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    display: block;
}

    #alertLabel.alert {
        color: #b94a48;
        background-color: #f2dede;
        border-color: #eed3d7;
    }

    #alertLabel.info {
        color: #8a6d3b;
        background-color: #fcf8e3;
        border-color: #faebcc;
    }

    #alertLabel.invisible {
        padding: 0;
        margin-bottom: 0;
        border: none;
        display: block;
        background-color: #fff;
        border-color: #fff;
    }