body { font-family: Arial, sans-serif; padding-top: 50px; } body p, body h1, body h2, body h3, body h4, body h5, body h6, body label, body input, body button { font-weight: normal; } .mc-tool { display: block; width: 100%; max-width: 500px; overflow: hidden; font-size: 16px; line-height: 1.25; color: #6f6f6f; background: #ffffff; border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; } .mc-tool p, .mc-tool h1, .mc-tool h2, .mc-tool h3, .mc-tool h4, .mc-tool h5, .mc-tool h6, .mc-tool label, .mc-tool input, .mc-tool button { margin: 0 0 10px; } .mc-tool .wrapper.active { background-color: #ffffff; background-color: rgba(255, 255, 255, 0.65); } .mc-tool .mc-header h2 { font-size: 30px; color: #008ccc; margin: 13px 0px 20px; display: block; } .mc-tool .mc-entry p, .mc-tool .questionset p { color: #54585a; } .mc-tool .mc-entry label, .mc-tool .questionset label, .mc-tool .mc-entry legend, .mc-tool .questionset legend { display: block; color: #008ccc; font-weight: bold; position: relative; max-width: 100%; } .mc-tool .mc-entry .input, .mc-tool .questionset .input, .mc-tool .mc-entry select, .mc-tool .questionset select { font-size: 18px; line-height: 18px; height: 37px; appearance: textfield; -webkit-appearance: textfield; font-weight: bold; color: #1e1e1e; border-radius: 5px; border: 1px solid #d9d9d9; padding: 0 9px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .mc-tool .mc-entry select, .mc-tool .questionset select { padding: 0 0 0 9px; } .mc-tool .mc-entry fieldset span.sub, .mc-tool .questionset fieldset span.sub { margin-bottom: 0; margin-top: 0; } .mc-tool .mc-entry span.sub, .mc-tool .questionset span.sub { display: block; color: #008ccc; font-size: 14px; margin-top: -10px; margin-bottom: 10px; position: relative; } .mc-tool .mc-entry #units, .mc-tool .questionset #units { background-color: #f5f5f3; background-image: url("/~/media/KCMS/GBS/Interactive Tools/Images/BMI/icons/world.ashx"); background-position: 7px center; background-repeat: no-repeat; border-radius: 5px; border: none; height: 27px; padding-left: 33px; padding-right: 12px; font-size: 14px; line-height: 1; margin-bottom: 20px; color: #616161; } .mc-tool .mc-entry #units span, .mc-tool .questionset #units span { font-weight: bold; } .mc-tool .mc-entry #units:hover, .mc-tool .questionset #units:hover, .mc-tool .mc-entry #units:focus, .mc-tool .questionset #units:focus { background-color: #deded7; } .mc-tool .mc-entry span.unit, .mc-tool .questionset span.unit { height: 35px; color: #6f6f6f; font-weight: normal; font-size: 14px; line-height: 35px; margin: 0 7px; } .mc-tool .mc-results h3 { color: #6f6f6f; } .mc-tool .mc-results h4 { color: #008ccc; font-size: 15px; } .mc-tool .mc-results p { font-size: 12px; color: #6f6f6f; } .mc-tool .mc-footer { overflow: hidden; clear: both; background: #ffffff; z-index: 1; position: relative; } .mc-tool .mc-footer p { font-size: 11px; color: #959595; } .mc-tool .mc-footer p.copyright { border-top: 1px solid #d9d9d9; padding: 8px 0; margin: 0px 3px 10px; } .mc-tool .mc-footer p.privacy { margin: 0px 3px 10px; } .mc-tool .disclaimer { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; clear: both; background: #fffbe1; padding: 10px 12px; margin-bottom: 20px; border-radius: 5px; } .mc-tool .disclaimer p { font-size: 12px; color: #b35d08; margin: 0; } .mc-tool .error { z-index: 1000; cursor: pointer; min-width: 151px; display: none; position: absolute; left: 35px; text-align: left; line-height: 1.25; bottom: 120%; background: #f47d20; color: #ffffff; font-size: 12px; font-weight: normal; padding: 8px 10px; } .mc-tool .error:after { content: ''; display: block; position: absolute; top: 100%; border-left: 13px solid #f47d20; border-bottom: 14px solid transparent; } .mc-tool .button { color: #ffffff; font-size: 16px; line-height: 1; border: none; background: #008ccc; padding: 10px 15px; border-radius: 5px; cursor: pointer; } .mc-tool .button:hover { background-color: rgba(0, 140, 204, 0.75); } .mc-tool .button:focus { background-color: rgba(0, 140, 204, 0.75); } .mc-tool .button:focus { outline: none; } .mc-tool .clear { display: block; clear: both; overflow: hidden; } .mc-tool a { color: inherit; } .mc-tool ::-webkit-input-placeholder { font-size: 14px; color: #54585a; } .mc-tool :-moz-placeholder { font-size: 14px; color: #54585a; } .mc-tool ::-moz-placeholder { font-size: 14px; color: #54585a; } .mc-tool :-ms-input-placeholder { font-size: 14px; color: #54585a; } #bodyMassIndex.mc-tool { background: #ffffff; position: relative; } #bodyMassIndex.mc-tool .wrapper { min-height: 305px; width: 100%; position: relative; } #bodyMassIndex.mc-tool .wrapper:after, #bodyMassIndex.mc-tool .wrapper:before { content: ''; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; clear: both; float: none; } #bodyMassIndex.mc-tool .mc-entry, #bodyMassIndex.mc-tool .mc-results { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; float: left; position: absolute; transition: left 1s ease-in-out, opacity 1s ease; -webkit-transition: left 1s ease-in-out, opacity 1s ease; -moz-transition: left 1s ease-in-out, opacity 1s ease; -o-transition: left 1s ease-in-out, opacity 1s ease; opacity: 0; left: 100%; } #bodyMassIndex.mc-tool .mc-entry.prevset, #bodyMassIndex.mc-tool .mc-results.prevset { left: -100%; } #bodyMassIndex.mc-tool .mc-entry.active, #bodyMassIndex.mc-tool .mc-results.active { transition: left 1s ease-in-out 1s, opacity 1s ease 1s; -webkit-transition: left 1s ease-in-out 1s, opacity 1s ease 1s; -moz-transition: left 1s ease-in-out 1s, opacity 1s ease 1s; -o-transition: left 1s ease-in-out 1s, opacity 1s ease 1s; position: relative; left: 0; opacity: 1; } #bodyMassIndex.mc-tool .mc-header { position: absolute; top: 0px; left: 0px; overflow: hidden; } #bodyMassIndex.mc-tool .mc-header h2 { margin-right: 100px; } #bodyMassIndex.mc-tool .mc-entry { background: url("/~/media/KCMS/GBS/Interactive Tools/Images/BMI/bmi/scale.ashx") no-repeat right bottom; padding-top: 72px; padding-bottom: 35px; } #bodyMassIndex.mc-tool .mc-entry p { margin-bottom: 30px; } #bodyMassIndex.mc-tool .mc-entry fieldset { position: relative; margin: 0; border: none; display: block; padding: 0; } #bodyMassIndex.mc-tool .mc-entry fieldset legend { float: left; line-height: 35px; display: block; width: 77px; text-align: right; margin-right: 11px; } #bodyMassIndex.mc-tool .mc-entry fieldset .input { float: left; } #bodyMassIndex.mc-tool .mc-entry fieldset .input#weight, #bodyMassIndex.mc-tool .mc-entry fieldset .input#centimeters { width: 59px; } #bodyMassIndex.mc-tool .mc-entry fieldset .input#feet { width: 35px; } #bodyMassIndex.mc-tool .mc-entry fieldset .input#inches { width: 43px; } #bodyMassIndex.mc-tool .mc-entry fieldset label { display: block; float: left; line-height: 35px; margin: 0 13px 0 7px; font-weight: normal; color: #6f6f6f; } #bodyMassIndex.mc-tool .mc-entry fieldset#sex .forminput { appearance: radio-button; -webkit-appearance: radio; -moz-appearance: radio; height: 35px; width: 20px; float: left; padding: 0; } #bodyMassIndex.mc-tool .mc-entry fieldset#birthdate label { display: none; } #bodyMassIndex.mc-tool .mc-entry fieldset #month { float: left; overflow: hidden; margin-bottom: 15px; margin-right: 8px; width: 69px; border: 1px solid #d9d9d9; border-radius: 5px; } #bodyMassIndex.mc-tool .mc-entry fieldset #day { float: left; overflow: hidden; margin-bottom: 15px; margin-right: 8px; width: 59px; border: 1px solid #d9d9d9; border-radius: 5px; } #bodyMassIndex.mc-tool .mc-entry fieldset #year { float: left; overflow: hidden; width: 78px; border: 1px solid #d9d9d9; border-radius: 5px; } #bodyMassIndex.mc-tool .mc-entry .button { margin-left: 4px; height: 35px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #bodyMassIndex.mc-tool .mc-entry .button#units { margin-left: 58px; color: #54585a; } #bodyMassIndex.mc-tool .mc-results { z-index: 0; padding-top: 72px; } #bodyMassIndex.mc-tool .mc-results #tabs { font-size: 16px; padding: 0; } #bodyMassIndex.mc-tool .mc-results #tabs ul.ui-tabs-nav { background: none; padding: 0; } #bodyMassIndex.mc-tool .mc-results #tabs ul.ui-tabs-nav li { font-weight: normal; background: #f5f5f3; margin-right: 10px; } #bodyMassIndex.mc-tool .mc-results #tabs ul.ui-tabs-nav li a { color: #999999; } #bodyMassIndex.mc-tool .mc-results #tabs ul.ui-tabs-nav .ui-tabs-active { background: none; position: relative; border: 1px solid #dadada; border-bottom: 0; } #bodyMassIndex.mc-tool .mc-results #tabs ul.ui-tabs-nav .ui-tabs-active a { color: #8c4d94; } #bodyMassIndex.mc-tool .mc-results #tabs ul.ui-tabs-nav .ui-tabs-active:before { content: ""; display: block; height: 0px; width: 100%; border-bottom: 1px solid #dadada; position: absolute; bottom: 0; right: 100%; } #bodyMassIndex.mc-tool .mc-results #tabs ul.ui-tabs-nav .ui-tabs-active:after { content: ""; display: block; height: 0px; width: 500%; border-bottom: 1px solid #dadada; position: absolute; bottom: 0; left: 100%; } #bodyMassIndex.mc-tool .mc-results #tabs #tabs-1 .result { color: #8c4d94; margin-bottom: 10px; line-height: 1; } #bodyMassIndex.mc-tool .mc-results #tabs #tabs-1 .whatitmeans { text-transform: capitalize; color: transparent; position: absolute; text-indent: -9999px; font-size: 16px; } #bodyMassIndex.mc-tool .mc-results #tabs #tabs-1 .whatitmeans.active { color: #8c4d94; text-indent: 0; position: relative; } #bodyMassIndex.mc-tool .mc-results #tabs #tabs-1 .whatitmeans.active span { display: block; margin: 10px 0 20px; text-transform: none; } #bodyMassIndex.mc-tool .mc-results #tabs #tabs-1 .scale { display: block; border-radius: 5px; overflow: hidden; margin-bottom: 20px; } #bodyMassIndex.mc-tool .mc-results #tabs #tabs-1 .scale div { float: left; width: 25%; text-align: center; background: #cacaca; border-right: 1px solid #ffffff; color: #ffffff; font-size: 11px; padding: 10px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #bodyMassIndex.mc-tool .mc-results #tabs #tabs-1 .scale div:last-child { border-right: none; } #bodyMassIndex.mc-tool .mc-results #tabs #tabs-1 .scale div span { font-size: 12px; display: block; font-weight: bold; } #bodyMassIndex.mc-tool .mc-results #tabs #tabs-1 .scale #underweight.active { background: #2aace1; } #bodyMassIndex.mc-tool .mc-results #tabs #tabs-1 .scale #normal.active { background: #62bb46; } #bodyMassIndex.mc-tool .mc-results #tabs #tabs-1 .scale #overweight.active { background: #d13100; } #bodyMassIndex.mc-tool .mc-results #tabs #tabs-1 .scale #obese.active { background: #f47d20; } #bodyMassIndex.mc-tool .mc-results #tabs #tabs-1 .whatyoucando { font-size: 14px; } #bodyMassIndex.mc-tool .mc-results #tabs #tabs-1 .whatyoucando h4 { color: #8c4d94; font-size: 16px; } #bodyMassIndex.mc-tool .mc-results #tabs #tabs-1 .whatyoucando .message { max-height: 140px; overflow-y: scroll; } #bodyMassIndex.mc-tool .mc-results #tabs #tabs-2 .whatbmimeans { max-height: 283px; overflow-y: scroll; } #bodyMassIndex.mc-tool .mc-results .reset { float: right; } #bodyMassIndex.mc-tool .error { left: 88px; bottom: 40px; } #bodyMassIndex.mc-tool .error.inches { left: 155px; } #bodyMassIndex.mc-tool #sex .error { left: 88px; bottom: 33px; } .ui-tabs { position: relative; padding: .2em; } .ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 1px .2em 0 0; border-bottom-width: 0; padding: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; } .ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; } .ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a { cursor: text; } .ui-tabs .ui-tabs-nav li a, .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a { cursor: pointer; } .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } @media only screen and (max-width: 450px) { .mc-tool { width: 100%; max-width: 320px; margin-left: 0px; margin-right: 0px; } #bodyMassIndex.mc-tool .mc-entry { background: none; } #bodyMassIndex.mc-tool .mc-results .ui-tabs .ui-tabs-panel { padding-left: 0; padding-right: 0; } }