#weight_comparison { margin-bottom: 16px; position: relative; width: 624px; } #weight_comparison .hide_no_js { display: none; } .blq-js #weight_comparison .hide_no_js { display: block; clear: both; margin-bottom: 8px; } #weight_comparison .header_information { margin-bottom: 40px; height: 300px; } /* FORM START */ #weight_comparison .form_container { width: 624px; height: 114px; background-color: #ECECEC; float: left; } #weight_comparison .form_container form { padding: 4px 8px 6px 8px; width: 608px; display: block; float: left; margin: 0px; overflow: visible; border: 0; } #weight_comparison .form_container form label { display: block; margin-top: 14px; margin-bottom: 10px; padding: 0px; height: 20px; font-weight: bold; width: auto; margin-right: 10px; font-size: 1.2em; float: left; } #weight_comparison .form_container form .select_input { float: left; margin-top: 14px; } #weight_comparison .form_container form .select_input a { color: #505050; font-weight: normal; } #weight_comparison .form_container form .select_input a.selected { font-weight: bold; } #weight_comparison .form_container form input { padding: 4px; border: 1px solid white; background: white; width: 140px; margin: 0px; margin-bottom: 12px; outline: none; float: left; } #weight_comparison .form_container form .invalid { border-color: red !important; } #weight_comparison .form_container form input.placeholder { color: #999; font-weight: bold; } #weight_comparison .form_container form input.wide { width: 250px !important; } #weight_comparison .form_container form input.weight, #weight_comparison .form_container form input.height { width: 116px; margin-right: 8px; } #weight_comparison .form_container form input.height_2, #weight_comparison .form_container form input.weight_2 { clear: none; width: 116px; display: none; } #weight_comparison .form_container form input.disabled { border: 1px solid #AAA; background-color: #ECECEC; } #weight_comparison .form_container form .form_left { float: left; width: 150px; } #weight_comparison .form_container form .form_right { float: right; width: 114px; } #weight_comparison .form_container form .gender_switch_container { border: 1px solid #ECECEC; } #weight_comparison .form_container form a.gender_switch { padding: 4px 8px; background: #505050; color: white; display: inline-block; } #weight_comparison .form_container form a.gender_2 { margin-left: 1px; } #weight_comparison .form_container form a.active { background: #505050; } #weight_comparison .form_container form label.gender { margin-bottom: 6px; } #weight_comparison .form_container form a.gender_switch:hover { text-decoration: underline; } #weight_comparison .form_container form .form_error { float: left; font-weight: bold; padding-top: 0; } #weight_comparison .form_container form .submit, #weight_comparison .form_container form .bmi_switch { float: right; padding: 3px 8px; background: #BBB; color: white; text-decoration: none; font-size: 2em; font-weight: bold; line-height: 1em; cursor: default; } /* #weight_comparison .form_container form .bmi_switch { float: left; } */ #weight_comparison .form_container form .submit_active { background: #505050; color: white; cursor: pointer; margin-top: 41px; } #weight_comparison .form_container form .submit_active:hover { background: black; } /* AUTO SUGGEST */ #country_results { background: white; z-index: 10; position: absolute; width: 293px; border: 1px solid #CCC; display: none; top: 268px; left: 8px; } #country_results li { background: none; padding: 0px; margin: 0px; } #country_results li.country_result_error, #country_results li a { padding: 4px; color: #505050; display: block; font-weight: normal; } #country_results li a:hover { background-color: #EDEDED; text-decoration: none; } /* END AUTO SUGGEST */ /* FORM END */ /* RESULTS START #weight_comparison .result_holder, #weight_comparison .result_container { width: 665px; height: 335px; float: right; background-color: #ECECEC; } */ #blq-main #weight_comparison .result_container .bbc-st { float: left; } #weight_comparison .result_share { padding: 12px 12px; width: 641px; height: 62px; } #weight_comparison .result_share span.share_text { float: left; margin-right: 8px; font-weight: bold; } #weight_comparison .result_numbers { height: 240px; width: 641px; background-position: 0px -11px; border-bottom: 1px solid white; padding: 10px 12px; } #weight_comparison .result_numbers_male { background-image: url('/news/special/2012/newsspec_3843/img/male.png'); } #weight_comparison .result_numbers_female { background-image: url('/news/special/2012/newsspec_3843/img/female.png'); } #weight_comparison .result_container h1 { font-size: 1.7em; line-height: 1em; margin-bottom: 4px; } #weight_comparison .result_container h2 { font-size: 1.2em; margin: 0 0 4px 0; line-height: 1em; } #weight_comparison .result_container #share_buttons { display: inline-block; } #weight_comparison .result_container .result_column { width: 182px; height: 135px; float: left; } #weight_comparison .result_container .result_column2 { width: 165px; margin: 0 61px 0 44px; } #weight_comparison .result_container .result_column3 { width: 165px; } #weight_comparison .result_container .number { color: #f3661e; font-weight: bold; } #weight_comparison .result_container .bmi_number { font-size: 1.2em; margin-left: 42px; margin-top: 16px; font-weight: bold; line-height: 1em; margin-bottom: 12px; } #weight_comparison .result_container .result_national, #weight_comparison .result_container .result_global { font-size: 1.7em; margin-left: 52px; margin-top: 14px; font-weight: bold; line-height: 1em; margin-bottom: 12px; } #weight_comparison .result_container .result_national_number, #weight_comparison .result_container .result_global_number { color: #f3661e; font-weight: bold; } #weight_comparison .result_container .number span { font-size: 2.8em; color: #f3661e; font-weight: bold; line-height: 1em; } /* RESULTS END */ /* GRAPH START */ #weight_comparison strong.graph_title { font-size: 1.15em; } #weight_comparison .graph_container { position: relative; display: none; /* height: 500px; */ } #weight_comparison .graph_container .global_pointer, #weight_comparison .graph_container .pointer { height: 100%; position: absolute; z-index: 2; pointer-events:none; } #weight_comparison .graph_container .pointer { height: 100%; margin-top: 0px; width: 85px; } #weight_comparison .graph_container .pointer_left { background: rgb(209, 112, 3) transparent; background: rgba(209, 112, 3, 0.1); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33D17003, endColorstr=#33D17003); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33D17003, endColorstr=#33D17003)"; float: left; height: 100%; border-right: 2px solid #f3661e; } #weight_comparison .graph_container .pointer_right { background: rgb(209, 112, 3) transparent; background: rgba(209, 112, 3, 0.1); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33D17003, endColorstr=#33D17003); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33D17003, endColorstr=#33D17003)"; height: 100%; float: left; } #weight_comparison .graph_container .global_pointer .text, #weight_comparison .graph_container .pointer .text { display: block; margin-top: -20px; margin-left: -3px; color: #f3661e; background: white; padding: 2px; } #weight_comparison .graph_container .pointer .text { font-size: 18px; font-weight: bold; width: 68px; } #weight_comparison .graph_container .global_pointer { width: 2px; left: 548px; border-left: 2px solid #58c2cf; } #weight_comparison .graph_container .global_pointer .text { color: #58c2cf; font-weight: bold; margin-left: -50px; width: 100px; } #weight_comparison .graph_container .country_bars { float: left; color: white; margin-top: 5px; width: 770px; font-size: 10px; line-height: 8px; text-indent: 8px; } .blq-js #weight_comparison .graph_container .country_bars { text-indent: -200px; margin-bottom: 0px; } #weight_comparison .graph_container .country_bars li { background-color: #C4C4C4; z-index: 1; position: relative; height: 8px; margin-bottom: 6px; margin-top: 2px; background-image: none; text-indent: -500px; padding: 0px; } .ie7 #weight_comparison .graph_container .country_bars li { margin-bottom: -3px; line-height: 0px; } #weight_comparison .graph_container .country_bars li.selected { background-color: #999; } #weight_comparison .graph_container .country_labels { text-align: right; margin-top: 5px; margin-right: 10px; margin-bottom: 0px; width: 175px; float: left; font-size: 12px; line-height: 12px; } #weight_comparison .graph_container .country_labels li.selected { font-weight: bold; } #weight_comparison .graph_container .country_labels li { background-image: none; padding: 0px; clear: both; margin-bottom: 2px; font-size: 12px; line-height: 12px; } #weight_comparison .graph_container .bg_lines li { background: none; height: 100%; position: absolute; left: 155px; border-left: 1px solid #ECECEC; z-index: 0; padding: 0px; } #weight_comparison .graph_container .bg_lines li .text { color: #999; } #weight_comparison .graph_container .bg_lines li.bg1 { left: 185px; } #weight_comparison .graph_container .bg_lines li.bg2 { left: 339px; } #weight_comparison .graph_container .bg_lines li.bg3 { left: 493px; } #weight_comparison .graph_container .bg_lines li.bg4 { left: 647px; } #weight_comparison .graph_container .bg_lines li.bg5 { left: 801px; } #weight_comparison .graph_container .bg_lines li.bg6 { left: 955px; } #weight_comparison .graph_container .bg_lines li .text { display: block; margin-top: -18px; margin-left: -4px; } #weight_comparison .graph_container .bg_lines li.bg6 .text { margin-left: -8px; } #weight_comparison .graph_container .bg_lines li.bg11 .text { margin-left: -25px; } #weight_comparison .graph_container .graph_key { position: absolute; top: 3px; left: 840px; } #weight_comparison .graph_container .graph_key .marker { display: inline-block; border-top: 2px solid #58c2cf; width: 10px; height: 4px; margin-right: 6px; } #weight_comparison .graph_container .graph_key .sd_marker { width: 10px; height: 10px; margin-right: 6px; display: inline-block; background: rgb(209, 112, 3) transparent; background: rgba(209, 112, 3, 0.1); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33D17003, endColorstr=#33D17003); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33D17003, endColorstr=#33D17003)"; } /* Rollover */ div#rollover { display: none; position: absolute; z-index: 25; top: -6px; left: 812px; background-image: url('/news/special/2012/newsspec_3843/img/pointer.png'); background-repeat: repeat-y; background-position: -0px -82px; } div#rollover .rollover_container { background-color: #FFF; margin-left: 10px; padding: 12px; padding-left: 12px; border: 1px solid black; border-width: 1px 1px 1px 0; } div#rollover .help { width: 400px; } br.clear { clear: both; } #weight_comparison .form_container .bmi_col { /*width: 240px;*/ float: left; margin-right: 8px; } #weight_comparison .result_container { width: 608px; padding: 0 8px; float: left; } #weight_comparison .result_container .mass_scale { display: block; height: 28px; float: left; } #weight_comparison .result_container .mass_scale span { position: relative; margin-right: -7px; float: right; padding-top: 6px; font-weight: bold; } #weight_comparison .result_container .mass_scale p { padding-top: 34px; text-align: center; } #weight_comparison .result_container .underweight { background-color: #FFFF99; width: 249.96px; } #weight_comparison .result_container .normal { background-color: #FFCC00; width: 87.82px; } #weight_comparison .result_container .overweight { background-color: #FF9900; width: 67.55px; } #weight_comparison .result_container .obese { background-color: #FF6600; width: 135.1px; } #weight_comparison .result_container .veryobese { background-color: #FF3300; width: 67.55px; } #weight_comparison .result_container .veryobese p { width: 73px; } #weight_comparison .result_container #bmi_scale { width: 607.98px; position: relative; } #weight_comparison .result_container .bmi_text { font-size: 18px; font-weight: bold; text-align: right; margin-top: 18px; } #weight_comparison .form_container form .bmi_switch:first-child { margin-right: 1px; } #weight_comparison .form_container form .select_input .bmi_switch { float: left; font-size: 14px; padding: 9px 12px; } #weight_comparison .form_container form .select_input .bmi_switch, #weight_comparison .form_container form .select_input .bmi_switch.selected { font-weight: normal; } #weight_comparison .form_container form .select_input .bmi_switch.active { color: #FFFFFF; } #weight_comparison .result_container .bmi_switch_container .new, #weight_comparison .result_container .bmi_switch_container .new span { color: #333366; } #weight_comparison .result_container .bmi_switch_container .old, #weight_comparison .result_container .bmi_switch_container .old span { color: #6688BB; } #weight_comparison .your_bmi_new { background: url(/news/special/2013/newsspec_4841/img/new.png) no-repeat 0 0; width: 19px; height: 16px; left: -9.5px; top: -10px; position: absolute; } #weight_comparison .your_bmi_old { background: url(/news/special/2013/newsspec_4841/img/old.png) no-repeat 0 0; width: 14px; height: 12px; left: -7px; top: -10px; position: absolute; } #weight_comparison .result_container .bmi_text.new { margin-bottom: 6px; } #weight_comparison .result_container .bmi_text.old { margin-top: 0; } #weight_comparison .result_container #bmi_results { width: 145px; } #weight_comparison #share_tools_container { float: left; margin-top: 48px; display: none; position: relative; } #weight_comparison #share_tools_container .bbc-st-heading, #weight_comparison #share_tools_container .bbc-st-count { display: none; } #weight_comparison #share_tools_container .bbc-st-full { background: #FFF; } #weight_comparison .bbc-st-buttons { margin: 0; } #weight_comparison #share_tools { position: absolute; top: -15px; left: 126px; width: 158px; } #weight_comparison .bmi_col.col1 { width: 261px; } #weight_comparison .bmi_col.col2 { width: 272px; }