Nutrition Comparison Form

In this example below you will see how to do a Nutrition Comparison Form with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by MasParaSol, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright MasParaSol ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Nutrition Comparison Form</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
  <div id="wrap"><div id="content">

<div id="rankingform" class="form">
<form action="nutrient-ranking-tool-common.php" method="post">
<p>Select a nutrient to rank.
<select name="nutrient"><option value="Protein" selected="selected">Protein</option><optgroup label="Macronutrients"><option value="Calories">Calories</option><option value="Fat">Fat</option><option value="Protein">Protein</option><option value="Carbohydrates">Carbohydrates</option><option value="Sugar">Sugar</option><option value="Fiber">Fiber</option><option value="Cholesterol">Cholesterol</option><option value="Saturated-Fatty-Acids">Saturated Fatty Acids</option><option value="Net-Carbs">Net Carbs</option><option value="Trans-Fatty-Acids">Trans Fatty Acids</option><optgroup label="Minerals"><option value="Calcium">Calcium</option><option value="Iron">Iron</option><option value="Potassium">Potassium</option><option value="Magnesium">Magnesium</option><option value="Phosphorus">Phosphorus</option><option value="Sodium">Sodium</option><option value="Zinc">Zinc</option><option value="Copper">Copper</option><option value="Manganese">Manganese</option><option value="Selenium">Selenium</option><option value="Fluoride">Fluoride</option><optgroup label="Vitamins"><option value="Vitamin-A">Vitamin A</option><option value="Vitamin-C">Vitamin C</option><option value="Vitamin-B12">Vitamin B12</option><option value="Thiamin-B1">Thiamin (B1)</option><option value="Riboflavin-B2">Riboflavin (B2)</option><option value="Niacin-B3">Niacin (B3)</option><option value="Pantothenic-Acid-B5">Pantothenic acid (B5)</option><option value="Vitamin-B6">Vitamin B6</option><option value="Folate">Folate</option><option value="Folic-Acid">Folic acid</option><option value="Folate">Folate</option><option value="Folate-Dietary-Folate-Equivalents">Folate (Dietary Folate Equivalents)</option><option value="Choline">Choline</option><option value="Vitamin-A-RAE">Vitamin A, RAE</option><option value="Retinol">Retinol</option><option value="Beta-Carotene">Beta Carotene</option><option value="Alpha-Carotene">Alpha Carotene</option><option value="Beta-Cryptoxanthin">Beta Cryptoxanthin</option><option value="Lycopene">Lycopene</option><option value="Lutein-Zeaxanthin">Lutein + Zeaxanthin</option><option value="Vitamin-E">Vitamin E</option><option value="Vitamin-D">Vitamin D</option><option value="Vitamin-D2-Ergocalciferol">Vitamin D2 (Ergocalciferol)</option><option value="Vitamin-D3-Cholecalciferol">Vitamin D3 (Cholecalciferol)</option><option value="Vitamin-K-Phylloquinone">Vitamin K (phylloquinone)</option><option value="Vitamin-K1-Dihydrophylloquinone">Vitamin K1 (Dihydrophylloquinone)</option><option value="Menaquinone-4">Menaquinone-4</option><optgroup label="Other"><option value="Water">Water</option><option value="Alcohol">Alcohol</option><option value="Caffeine">Caffeine</option><option value="Theobromine">Theobromine</option><optgroup label="Carbohydrates"><option value="Sucrose">Sucrose</option><option value="Glucose">Glucose</option><option value="Fructose">Fructose</option><option value="Lactose">Lactose</option><option value="Maltose">Maltose</option><option value="Galactose">Galactose</option><option value="Starch">Starch</option><optgroup label="Fats"><option value="Omega-3">Omega 3s</option><option value="Omega-6">Omega 6s</option><option value="Omega 3 to Omega 6 Ratio">Omega 3 to Omega 6 Ratio</option><option value="Omega 6 to Omega 3 Ratio">Omega 6 to Omega 3 Ratio</option><option value="Monosaturated-Fats">Monosaturated Fats</option><option value="Polyunsaturated-Fats">Polyunsaturated Fats</option><optgroup label="Amino Acids"><option value="Betaine">Betaine</option><option value="Tryptophan">Tryptophan</option><option value="Threonine">Threonine</option><option value="Isoleucine">Isoleucine</option><option value="Leucine">Leucine</option><option value="Lysine">Lysine</option><option value="Methionine">Methionine</option><option value="Cystine">Cystine</option><option value="Phenylalanine">Phenylalanine</option><option value="Tyrosine">Tyrosine</option><option value="Valine">Valine</option><option value="Arginine">Arginine</option><option value="Histidine">Histidine</option><option value="Alanine">Alanine</option><option value="Aspartic-Acid">Aspartic acid</option><option value="Glutamic-Acid">Glutamic acid</option><option value="Glycine">Glycine</option><option value="Proline">Proline</option><option value="Serine">Serine</option><option value="Hydroxyproline">Hydroxyproline</option>
</select></p>
<p>Choose a food group.
<select name="foodgroup">
<option value="">All</option>
<option value="All">All</option><option value="Vegetarian">Vegetarian</option><option value="Vegan">Vegan</option><option value="Fruits">Fruits</option><option value="Vegetables">Vegetables</option><option value="Nuts-and-Seeds">Nuts and Seeds</option><option value="Grains-and-Pasta">Grains and Pasta</option><option value="Dairy-and-Egg-Products">Dairy and Egg Products</option><option value="Spices-and-Herbs">Spices and Herbs</option><option value="Fish">Fish</option><option value="Beans-and-Lentils">Beans and Lentils</option><option value="Meats">Meats</option><option value="Beverages">Beverages</option><option value="Baked-Foods">Baked Foods</option><option value="Processed-Foods">Processed Foods</option>
</select>

<div class="switch-field">
  <div class="switch-title">Highest or Lowest?</div>
<input type="radio" id="switch_left" name="switch_2" value="yes" checked/>
<label for="switch_left">Highest</label>
<input type="radio" id="switch_right" name="switch_2" value="no" />
<label for="switch_right">Lowest</label>
</div>

<div class="switch-field">
<div class="switch-title">Serving Size</div>
      <input type="radio" id="switch_3_left" name="switch_3" value="yes" checked/>
      <label for="switch_3_left">Common</label>
      <input type="radio" id="switch_3_center" name="switch_3" value="maybe" />
      <label for="switch_3_center">200 Cals</label>
			<input type="radio" id="switch_3_right" name="switch_3" value="no" />
      <label for="switch_3_right">100g</label>
    </div>
  
  
</form>
  
<div class="nutformoption"> <label class="nutformoption" for="reveal-sc1">See More Options &#8964;</label><input type="checkbox" id="reveal-sc1" role="button">
<div id="sc1" class="options">
<p>Sort by <a href="https://tools.myfooddata.com/nutrient-ratio-tool.php">Nutrient Ratios</a></p>
Sort only 1700 of the most common foods or all 8000+? (Note choosing to sort more foods also increases the number of food groupings.)<br/>
<input type="radio" name="list" value="Simple" checked="checked">Short List Only<br>
<input type="radio" name="list" value="Detailed" >All 8000+ Foods<br>
<button type="submit" class="buttonsm">Apply Changes</button>
</div>


</div> <!-- /form -->
</div></div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/MasParaSol/nutrition-comparison-form-zEXdjZ */
body {margin: 0 auto;clear: both; font-size: 100%;font-family: sans-serif;height: 100%;width: 100%; line-height: 1.6;text-align: center;color:#4a4a4a;}
header {width:100%;height:55px;background-color:#ffffff;border-bottom:1px solid #ccc;}
.hwrap {font-size: 30px;text-align: left;width: 100%;}
.logo {float:left;width:120px;margin:8px 0 0px 3px;}
.searchsymbol svg {float:right;fill:black;width:25px;height:25px;margin:13px 11px 0px 0px;}
#wrap {text-align:left;clear:both;width:100%;height:auto;z-index:-500;}
#content {font-size:18px;padding:0 19px 0 19px;width:auto;text-align:left;line-height:1.73;}
.login {float:right; margin:10px 5px 0px 0px;}
.introimg {width:360px;height:164px;}
img {max-width:100%; height: auto;}
h1 {font: arial, sans-serif;font-size: 28px;line-height: 35px;color:#333;margin-bottom:1px;}
.header1 {margin:30px 0 30px;border-bottom:1px solid #ccc;color:#444;}
h2 {font-weight: 700; font-family: 'Orienta', sans-serif;}
h3 {font-weight: 600;font-size:18px; font-family: 'Orienta', sans-serif;margin:0 0 5px 0px;padding:0px;border-bottom:1px solid #ccc;color:#444;}
h4 {font-size:18px;}
/*Social share buttons*/
.resp-sharing-button__link,.resp-sharing-button__icon {display: inline-block}
.resp-sharing-button__link__float {text-decoration: none;color: #fff;margin: 0em 0em 0em 0em;}
.resp-sharing-button__link {text-decoration: none;color: #fff;margin: 0 0.2em 0.5em 0;}
.resp-sharing-button {border-radius: 1px;transition: 25ms ease-out;padding: 0.5em 0.95em;font-family: Helvetica Neue,Helvetica,Arial,sans-serif}
.resp-sharing-button__icon svg {width: 1em;height: 1em;margin-right: 0.4em;vertical-align: top}
.resp-sharing-button--small svg {margin: 0;vertical-align: middle}

/* Non solid icons get a stroke */
.resp-sharing-button__icon {stroke: #fff;fill: none}

/* Solid icons get a fill */
.resp-sharing-button__icon--solid,.resp-sharing-button__icon--solidcircle {fill: #fff;stroke: none}
.resp-sharing-button--twitter {background-color: #55acee}
.resp-sharing-button--twitter:hover {background-color: #2795e9}
.resp-sharing-button--pinterest {background-color: #bd081c}
.resp-sharing-button--pinterest:hover {background-color: #8c0615}
.resp-sharing-button--facebook {background-color: #3b5998}
.resp-sharing-button--facebook:hover {background-color: #2d4373}
.resp-sharing-button--tumblr {background-color: #35465C}
.resp-sharing-button--tumblr:hover {background-color: #222d3c}
.resp-sharing-button--google {background-color: #dd4b39}
.resp-sharing-button--google:hover {background-color: #c23321}
.resp-sharing-button--email {background-color: #777}
.resp-sharing-button--email:hover {background-color: #5e5e5e}
.resp-sharing-button--facebook {background-color: #3b5998;border-color: #3b5998;}
.resp-sharing-button--facebook:hover,.resp-sharing-button--facebook:active {background-color: #2d4373;border-color: #2d4373;}
.resp-sharing-button--twitter {background-color: #55acee;border-color: #55acee;}
.resp-sharing-button--twitter:hover,.resp-sharing-button--twitter:active {background-color: #2795e9;border-color: #2795e9;}
.resp-sharing-button--google {background-color: #dd4b39;border-color: #dd4b39;}
.resp-sharing-button--google:hover,.resp-sharing-button--google:active {background-color: #c23321;border-color: #c23321;}
.resp-sharing-button--tumblr {background-color: #35465C;border-color: #35465C;}
.resp-sharing-button--tumblr:hover,.resp-sharing-button--tumblr:active {background-color: #222d3c;border-color: #222d3c;}
.resp-sharing-button--email {background-color: #777777;border-color: #777777;}
.resp-sharing-button--email:hover,.resp-sharing-button--email:active {background-color: #5e5e5e;border-color: #5e5e5e;}
.resp-sharing-button--pinterest {background-color: #bd081c;border-color: #bd081c;}
.resp-sharing-button--pinterest:hover,.resp-sharing-button--pinterest:active {background-color: #8c0615;border-color: #8c0615;}

/*pinterest hover image for introimage*/
.image-container {position: relative;max-width: 550px;max-height: 250px;display:inline-block;}
.image-container .after {position: absolute;top: 0;left: 0;width:100%;height:100%;display: none;overflow:hidden;}
.image-container:hover .after {display: inline;background: rgba(0, 0, 0, .5);}
.image-pin {margin:20px;}

a:active,a:link,a:visited {text-decoration:none;color: #005DB3}
a:hover {text-decoration:none;color:#b9005d}
a.black:active,a.black:link,a.black:visited {text-decoration: none; color:#4a4a4a;font-size:18px;font-weight:800;}
a.blacknf:active,a.blacknf:link,a.blacknf:visited {text-decoration: none; color:#4a4a4a;font-weight:800;}
A.prevnext:link,A.prevnext:visited{text-decoration:none;color:#fff;font-weight:500}
A.prevnext:active,A.prevnext:hover{text-decoration:none;color:#fff}

/*Index page code*/
.introbox {background-color: #88a9bd;padding: 30px 0px;text-align:center;}
.hugefont{font-size: 3.5em;padding:20px 5px;}
.subhuge{font-size: 2.3em;padding:10px;line-height: 50px;margin: 0 auto;max-width: 550px;}
.subsubhuge{font-size: 1.5em;padding:30px;line-height: 25px;margin: 0 auto;max-width: 550px;}
.showbox {float:none;width:95%;padding:20px;font-size:1.3em;border-bottom: 1px solid black;}
.bottombox {border-top: 3px solid #000000;border-bottom: 3px solid #000000;margin:0 auto;clear:both;font-size:22px;}

/*Top 10 List Element Classes*/
.listitem {margin:20px 0 60px;}
.toptenlist {font-family: 'Orienta', sans-serif;}
span.photo2 {float: left;margin:0px 20px 20px 0;width: 125px;height: 125px;border: 1px double #ccc;}
.top_ten {font-weight: 500;height: auto;font-size: 1.2em; line-height:25px;
color: #333; font-family: 'Orienta', sans-serif; letter-spacing:-0.3px;}
span.top_ten {font-weight: 700;height: auto;font-size: 26px; line-height:25px;font-family: 'Orienta', sans-serif;}
ol.top_ten {margin: 0;padding: 0;list-style-position: inside;}
li.top_ten {font-weight: 700;height: auto;font-size: 1.3em; margin-left:140px;}
div.photo5 {text-align:center;margin: 0 auto;}
li.extra {font-weight: 700;height: auto;font-size: 1.3em;}
div.extrainfo{padding:20px;background-color:#f1f1f1;display:inline-block;width:90%;}

table {border-collapse:collapse; width:100%; margin-top:3px; margin-bottom:3px; border: 1px solid #333;padding:0px;}
td {font-size:16px; padding:3px; text-align: center;border:1px solid #ccc;} 
table.noborder{border:none;}td.noborder{border: none;}
#article table {margin:10px 0 10px 0; border:0;}
#article th {border:1px solid #ccc; font-weight:700;padding:5px;text-align:center;font-size:16px;}
#article td {border:1px solid #ccc;padding:5px;font-size:16px;}
td.left {text-align: left;}

.next {width:100%;padding:5px;border-top:1px solid #999999;border-bottom:1px solid #999999;}
.nextimg {width:190px;height:86px;}
span.nextbbtn {padding:5px;margin-top:19px;font-size:19px;letter-spacing:1px; width: auto;background:#236292;text-align: right;display: inline-block;color: #fff;
font-weight: 700;-webkit-border-radius: 4px;float:right;} 

div.prev-nextm {width: 95%;float: left;padding-bottom: 7px;margin-bottom:50px;}
span.arrowR {float: right;margin: 5px;padding: 11px;font-size: 25px;width: 35%;text-align: center;
color: #fff;font-weight: 700;display: inline-block;background: #236292;-webkit-border-radius: 4px}
span.arrowL {float: left;margin: 5px;padding: 11px;font-size: 25px;width: 35%;text-align: center;
color: #fff;font-weight: 700;display: inline-block;background: #6CA0DC;-webkit-border-radius: 4px}

.printbutton, A.printbutton {float:left; margin: 1px 5px 20px 5px;padding: 5px 18px;font-size: 25px;cursor: pointer;text-align: center;color: #fff;
  font-weight: 500; display: inline-block;-webkit-border-radius: 4px;background-color: #2D7BB2;}

.sectionh, .sectionhn {width: auto;margin: 2px 0px 10px 0px;cursor: pointer; position: relative;font-size: 19px;font-weight: 700;color:#02243C;letter-spacing:1.1px;border:3px solid #333; padding: 5px 10px; }
.sectionhc {width: auto;margin: 15px 0px 25px 0px;cursor: pointer; position: relative;font-size: 19px;font-weight: 300;background-color:#3b464d;color:#ffffff;letter-spacing:1.1px;padding: 5px 10px; }
.sectionc {width: auto;margin: 2px 2px 15px 10px; color:#000000;}
.sectionh.active,.sectionh:hover {text-decoration: none; color:#02243C;}
.sectionhc:hover {text-decoration: none; background-color:#5E676D;}
section:last-child .sectionh {border-bottom-width:0;}

label {cursor: pointer;}
input[type=checkbox]{display: none;}
input[type=checkbox]:checked ~ .remove-check{display: none;}
input[type=checkbox]:checked ~ #menuh{display: block;}
input[type=checkbox]:checked ~ #sc1{display: block;}
input[type=checkbox]:checked ~ #sc2{display: block;}
input[type=checkbox]:checked ~ #sc3{display: block;}
input[type=checkbox]:checked ~ #sc4{display: block;}
input[type=checkbox]:checked ~ #sc5{display: block;}
input[type=checkbox]:checked ~ #sc6{display: block;}
input[type=checkbox]:checked ~ #sc7{display: block;}
input[type=checkbox]:checked ~ #sc8{display: block;}
input[type=checkbox]:checked ~ #sc9{display: block;}
input[type=checkbox]:checked ~ #sc10{display: block;}
input[type=checkbox]:checked ~ #sc11{display: block;}
input[type=checkbox]:checked ~ #sc12{display: block;}
input[type=checkbox]:checked ~ #sc13{display: block;}
input[type=checkbox]:checked ~ #sc14{display: block;}
input[type=checkbox]:checked ~ #sc15{display: block;}
input[type=checkbox]:checked ~ #viewlist{display: block;}
input[type=checkbox]:checked ~ #loptions{display: block;}

#menuh, #sc1, #sc2, #sc3, #sc4, #sc5, #sc6, #sc7, #sc8, #sc9, #sc10, #sc11, #sc12, #sc13, #sc14, #sc15, #viewlist, #loptions {display: none;}

.l {font-weight:700; font-size:30px;font-family: 'Orienta', sans-serif;border-bottom:2px solid #333;
padding:0 0 3px 10px;}

span.fontsm {font-size: 80%;}
span.fontlg {font-size: 120%;}
span.fontxlg {font-size: 150%;}
span.fontxxlg {font-size: 200%;font-weight:500;}
span.redsm{color:#CD5C5C;font-weight: 700;font-size: 100%;}
span.red{color:#CD5C5C;font-weight: 700;font-size: 120%;}
span.green{color:#009900;font-weight: 700;font-size: 120%;}
iframe {border-width: 0px;width:310px;}
.dayplan {max-width: 350px;border: 2px solid gray;padding: 10px;margin: 10px}

#sidebar {margin: 20px 15px auto;padding: 0px;width: auto;float: none;text-align: center;z-index:1;}
#sidebar ul {list-style-type: none;list-style: none;margin:0px 0px 0px 0px;line-height: 2.2;padding:10px 15px 10px 15px;}
#sidebar ul a,#sidebar ul a:visited,#sidebar ul a:active {
 list-style-type: none;color:#666666;text-decoration: none;display: block;border-bottom: 1px solid #ddd;padding:3px 0 3px 0;}
#sidebar ul li:last-child a {border-bottom-width:0;}
#sidebar ul a:hover {color:#005db3;text-decoration: none;}
.sidebarunit {width: 100%;padding:0;margin:0 0 20px 0;display: inline-block;text-align: center;border:1px solid #999;}
.sidebarh {display:block;box-sizing:border-box;color:#fff;padding:10px 15px;font-size:25px;background-color:#5190c0;border-radius:0;}
.sidebarad {text-align: center;}
.box-style{border: 2px solid #333333;}
footer {width: auto;clear: both;text-align:center;margin-bottom:43px;}
 .footerstyle {color: #fff;background-color: #3b464d;padding:10px 0 10px 0;}
footer a:link, footer a:visited{color:#fff;text-decoration:none}footer a:hover{color:#b2b2b2;text-decoration:none}

.resp-sharing-button__link__float {float:left;width:16.666666666666667%;text-decoration: none;color: #fff;margin: 0em 0em 0em 0em;} 
.fixedsocial{position:fixed;bottom:0; right:0;
  display: inline-block;text-align: center; width:100%; margin:0 auto;z-index: 5000000;}
.feedback {display:none;}

div.grey {background-color: #ececec; padding: 15px;max-width: 390px;}
div.white {background-color: #fff; padding: 15px;max-width: 390px;}

/*Nutrition Facts Stuff*/
select {font-size:18px;max-width:290px;}
#nutritionfacts table{margin:30px 10px 5px 10px;border:2px solid #333;border-collapse: collapse;max-width:300px;width:100%;padding:5px;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);line-height:1.3;}

#nutritionfacts th {text-align:left;border-bottom:3px solid #333;padding-top:10px;font-size:24px;padding:15px 1px 15px 7px;}
#nutritionfacts tr {border-bottom:1px solid;}

#nutritionfacts td {border:none;padding:7px}

#tablefontsm{font-size:16px;}
#nutritionfacts tbody tr:nth-child(even) td {background:#EBEBEB;}
#nutritionfacts tbody tr:hover {background-color:#517693;color:#EBEBEB;}
#nutritionfacts tbody tr:nth-child(even):hover td {background-color:#517693;color:#EBEBEB;}
td.nutrient{text-align:left;font-size:20px;}
td.nutrientsm{text-align:left;font-size:15px;}
td.number{text-align:center;font-size:20px;}
th.dv, td.dv{text-align:right;font-size:20px;}

.detailed {font-size:14px;color:#999;}

/*Nutrition Facts Compare*/
#nutritionfactscompare table{margin:30px 10px 5px 10px;border:2px solid #333;border-collapse: collapse;max-width:300px;width:100%;padding:5px;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);line-height:1.3;}

#nutritionfactscompare th {text-align:left;border-bottom:3px solid #333;border-left: 1px solid #c4c4c4;padding-top:10px;font-size:20px;padding:15px 1px 15px 7px;}
#nutritionfactscompare tr {border-bottom:1px solid;}

#nutritionfactscompare td {padding:5px 1px 5px 1px;}

#nutritionfactscompare tbody tr:nth-child(even) td {background:#EBEBEB;}
#nutritionfactscompare tbody tr:hover {background-color:#00417D;color:#EBEBEB;}
#nutritionfactscompare tbody tr:nth-child(even):hover td {background-color:#00417D;color:#EBEBEB;}

.formc {padding:10px 20px 10px 20px;max-width: 600px;
margin: 40px auto; border-radius: 4px;
box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);font-family: 'Titillium Web', sans-serif;}

.formca {padding:10px 5px 10px 5px;max-width: 600px;margin: 25px auto; border-radius: 4px;
box-shadow: 0 2px 5px 2px rgba(19, 35, 47, 0.3);font-family: 'Titillium Web', sans-serif;}

#compareform input[type=text] {
    width: 100%;
    padding:2px;
   height:30px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  color:#000; font-size:22px; }

#nutfactsform input[type=text] {
    width: 100%;
    padding:2px;
   height:30px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  color:#000; font-size:22px; }


#compareform select {font-size:16px;width:100%;}

#compareform .button {border:0;outline: none;
  border-radius: 0;padding: 15px 0;
  font-size: 2rem;font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: #00417D;
  color: #ffffff;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-appearance: none;
  margin-top:30px;width:100%;cursor:pointer;}

#compareform p {background-color:#ccdeef;padding:2px 10px 2px 10px;color:#333;border-radius: 4px;}
/*END Nutrition Facts Compare*/
/*Check Box Show/Hide*/
input[type=checkbox]:checked ~ #extran{display: block;}
#extran{display:none;}

*, *:before, *:after {box-sizing: border-box;}

.options {padding:10px;border:1px solid #DFEAF3;border-radius:5px; background-color: #DFEAF3;text-align:left;}

.buttonsm {font-size:16px;}

.form {padding:10px 40px;max-width: 600px;
margin: 40px auto; border-radius: 4px; box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);font-family: 'Titillium Web', sans-serif;}

/*style the label switch*/
input[type=checkbox]{display: none;}
input[type=checkbox]:checked ~ .remove-check{display: none;}

input[type=checkbox]:checked ~ #normal{display:none;}
input[type=checkbox]:checked ~ #ratio{display:inline;}
input[type=checkbox]:checked ~ .tabA{background-color:#00376b;color:#fcfcfc;}
input[type=checkbox]:checked ~ .tabB{background-color:#5190c0;color:#fff;}

#rankingform select {font-size:25px;width:90%;}

#rankingform .button {border:0;outline: none;
  border-radius: 0;padding: 15px 0;
  font-size: 2rem;font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: #00417D;
  color: #ffffff;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-appearance: none;
  margin-top:30px;}

#nutfactsform .button {border:0;outline: none;
  border-radius: 0;padding: 5px 0;
  font-size: 20px;font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: #00417D;
  color: #ffffff;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-appearance: none;
  margin-top:3px;width:100%}

.button:hover, .button:focus {background: #005db3;cursor:pointer;}

.button-block {display: block;width:95%;}

.nomobile {display: none;}
#printablesheet {width:100%;border:1px solid #333;}
img.printableimage{width:100%;}


/*Chart*/
/* SETUP */
#barchart {overflow-x:hidden;font-size:16px;}

/* CHART LISTS */
#barchart {width:90%;list-style-type: none;margin-bottom:20px;padding:0;clear:both;}
 #barchart ul {margin:0px 5px 0px; padding:5px;}
 #barchart li {position: relative;display: block;border-bottom: 1px solid #EEE; 
 _zoom: 1;list-style-type: none;padding: 0.3em 4.5em 0.3em 0.5em; 
 z-index: 2;margin:0;}

 #barchart .name {z-index:10; color: #2D7BB2; font-weight: bold; 
display: block;padding: 0;position: relative; z-index: 2;animation: 1s anim-lightspeed-in ease forwards;}

 #barchart .count  { display: block; position: absolute; top: 0;right: 0; margin: 0 0.3em; text-align: right; color: #666; font-weight: bold; font-size: 0.875em; line-height: 2em;}

.count {z-index:500;}

 #barchart .index {display: block; position: absolute; 
top: 0; left: 0; height: 100%;
background: linear-gradient(to left, #BDD5F7, #B8E4F5);
animation: 1s anim-lightspeed-in ease forwards;
text-indent: -9999px;overflow: hidden;line-height: 2em;}

 #barchart .index{animation: 1s anim-lightspeed-in ease forwards;}

 #barchart li:hover {background: #EFEFEF;z-index:6000;}
 #barchart .name {color: #2D7BB2;}.nameg {color: #304040;}.namec {color: #500805;}

 #barchart .indexg {display: block; position: absolute; 
top: 0; left: 0; height: 100%;
background: linear-gradient(to left, #5b7065, #5FA4A1); 
animation: 1s anim-lightspeed-in ease forwards;
text-indent: -9999px;overflow: hidden;line-height: 2em;padding:0; margin:0;}
.indexc {display: block; position: absolute; 
top: 0; left: 0; height: 100%;
background: linear-gradient(to left, #9d331f, #C44036); 
animation: 1s anim-lightspeed-in ease forwards;
text-indent: -9999px;overflow: hidden;line-height: 2em;padding:0; margin:0;}

#funfacts ol, #funfacts li {margin:1px 5px 8px 15px;padding:1px 5px 8px 5px;font-size:110%;}
.buttontop {margin-top:10px;width:90%;}
@keyframes anim-lightspeed-in {0% {transform: translateX(-200%);opacity: 1;}100% {transform: translateX(0);opacity: 1;}}

.rankinglist{font-size:22px;font-weight:700;}
.floatimg{float:left;padding:5px;}



@media only screen and (min-width:620px) 
{#tabletonly {display: none}
body {line-height: 28px}
iframe {width: 100%;}
header {padding:5px 0px 5px 0px;height:70px;text-align:center;width:100%;clear:both;}
.hwrap {letter-spacing: 0px;width: 935px;margin: 0 auto;}
.logo {float:left;padding:0 20px 10px 0px;display:inline;width: 220px;margin:3px 0 0px 3px; }
.login {margin:15px 5px 0px 0px;} 
.searchsymbol svg {margin:14px 16px 0px 0px; float:right;fill:black;width:35px;height:35px;}
.introimg {width:550px;height:250px;margin:0;}
 div.photo5 {margin:2px;text-align:left;}
 .articlead {width:336px; height: 280px;}
#wrap {width: 935px; text-align:center;margin:0 auto; clear:both;}
#content {float:left;width:600px;text-align: left;padding: 0px 2px 0px 10px;margin:10px 25px 15px 5px;z-index:6;}
table {width:auto;}td {font-size:0.9em;}

.introbox {padding: 50px 0px;}
.hugefont{font-size: 5em;padding:50px 20px;}
.subhuge{font-size: 3.5em;padding:30px;line-height: 60px;margin: 0 auto;max-width: 650px;}
.subsubhuge{font-size: 1.5em;padding:30px;line-height: 60px;margin: 0 auto;max-width: 650px;}
.showbox {width:33%; float:left;padding:20px;font-size:1.3em; border:none;}


#article topten {margin:12px 0 12px 0;}
#article th {font-weight:800;}

div.extrainfo{width:520px;}

select {font-size:25px;max-width:450px;}
.formca {padding:10px 20px 10px 20px;margin: 5px auto;}

.next {width:550px;}
.nextimg {width:300px;height:137px;}
span.nextbbtn {padding: 15px;margin-top: 25px;font-size:39px;letter-spacing:1px;}

div.prev-nextm {width: 530px;float: left}
span.arrowL {display:inline-block;background:#6CA0DC;} span.arrowR {float: right;}
span.arrowL,span.arrowR {padding: 12px;margin: 10px;font-size: 25px;letter-spacing:1px; width: auto;
     text-align: right;display: inline-block;color: #fff;
     font-weight: 700;-webkit-border-radius: 4px} 

.sectionhn {max-width:380px;}

#sccomment {max-height:700px;}

#sidebar {margin: 25px 0px 15px 0px;padding: 0;position: relative;clear: none;background-color: #fff;float: left;text-align: left;width: 290px}
.sidebarunit {padding:0;margin:0 0 30px 0;display: inline-block;text-align: center;border:1px solid #999;text-align:left;}

footer {margin: 0 0 -10px -15px;font-size: 1em;}
.fixedsocial{display: none;}

.nomobile {display: inline-block;}
  
  
/*Switch field stuff*/
.switch-field {
overflow: hidden;
}

.switch-title {
  margin-bottom: 6px;
}

.switch-field input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.switch-field label {
  float: left;
}

.switch-field label {
  display: inline-block;
  width: 90px;
  background-color: #e4e4e4;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  text-shadow: none;
  padding: 6px 14px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition:    all 0.1s ease-in-out;
  -ms-transition:     all 0.1s ease-in-out;
  -o-transition:      all 0.1s ease-in-out;
  transition:         all 0.1s ease-in-out;
}

.switch-field label:hover {
	cursor: pointer;
}

.switch-field input:checked + label {
  background-color: #5190c0;
  color:#fff;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.switch-field label:first-of-type {
  border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
  border-radius: 0 4px 4px 0;
}

  
  .nutformoption{text-align:center;margin-top:20px;}
  
  
}

Comments