Template:BMI calculator2/bmi.css

/* light grey background so white input fields stand out
Rounded borders as a small inside joke, body ROUNDNESS index.
*/
table {background-color: #F4F4F4; color: #000000; border-radius: 10px; overflow: hidden;} 

/* Right-align field prompts, so they are close to input fields,
Minimum eye movement required. 
Small contrast for field prompts and headers, so focus goes to input fields.
Center-align all input and variable output fields.
*/
td.prompt {background-color: #E0E0E0; color: grey; text-align: right; padding: 0 0.5ex;}
td {text-align: center;}
th {background-color: #E0E0E0; color: grey; font-weight: normal}

/* Yellow color for input values out of min max range.
Why is the following rejected with error mesage: 
Invalid selector list at line xx character 1. 
.calculator-field-live:invalid {background-color: #FEFFC6;}
*/

/* hide text for risk level, health category until consensus on sandbox talk page */
.risk {display: none;}

/* hide row with roundedBoundedBri */
tr.obscured {display: none;} 

/* Hide checkboxes which are checked only if the div should be shown for that BRI.
Hidden checkbox and BRI divs must be siblings, share the same direct parent.
*/
tr.briRow td input {display: none;}

.bri1 { background-color: #AA202F; display: none}
#calculator-field-showSilhouette1:checked ~ .bri1 { display: block; }

.bri2 { background-color: #CCFA7F; display: none; }
#calculator-field-showSilhouette2:checked ~ .bri2 { display: block; }

.bri3 { background-color: #BFFF7F; display: none; }
#calculator-field-showSilhouette3:checked ~ .bri3 { display: block; }

.bri4 { background-color: #FFE97F; display: none; }
#calculator-field-showSilhouette4:checked ~ .bri4 { display: block; }

.bri5 { background-color: #FFBD7F; display: none; }
#calculator-field-showSilhouette5:checked ~ .bri5 { display: block; }

.bri6 { background-color: #FF7F91; display: none; }
#calculator-field-showSilhouette6:checked ~ .bri6 { display: block; }

.bri7 { background-color: #F67587; display: none; }
#calculator-field-showSilhouette7:checked ~ .bri7 { display: block; }

.bri8 { background-color: #F16F80; display: none; }
#calculator-field-showSilhouette8:checked ~ .bri8 { display: block; }

.bri9 { background-color: #EB6879; display: none; }
#calculator-field-showSilhouette9:checked ~ .bri9 { display: block; }

.bri10 { background-color: #E36071; display: none; }
#calculator-field-showSilhouette10:checked ~ .bri10 { display: block; }

.bri11 { background-color: #DB5768; display: none; }
#calculator-field-showSilhouette11:checked ~ .bri11 { display: block; }

.bri12 { background-color: #D34D5E; display: none; }
#calculator-field-showSilhouette12:checked ~ .bri12 { display: block; }

.bri13 { background-color: #CB4455; display: none; }
#calculator-field-showSilhouette13:checked ~ .bri13 { display: block; }

.bri14 { background-color: #C33B4B; display: none; }
#calculator-field-showSilhouette14:checked ~ .bri14 { display: block; }

.bri15 { background-color: #BA3242; display: none; }
#calculator-field-showSilhouette15:checked ~ .bri15 { display: block; }

.bri16 { background-color: #B32938; display: none; }
#calculator-field-showSilhouette16:checked ~ .bri16 { display: block; }

.bri17 { background-color: #AA202F; display: none; }
#calculator-field-showSilhouette17:checked ~ .bri17 { display: block; }

.bri18 { background-color: #A21625; display: none; }
#calculator-field-showSilhouette18:checked ~ .bri18 { display: block; }

.bri19 { background-color: #9A0D1B; display: none; }
#calculator-field-showSilhouette19:checked ~ .bri19 { display: block; }

.bri20 { background-color: #8E000E; display: none; }
#calculator-field-showSilhouette20:checked ~ .bri20 { display: block; }