html, body { margin: 0; padding: 0; border: 0;  background: transparent; font-size:10px; }

div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li, 
table, tr, th, td, tbody, tfoot, thead {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	background: transparent;
	}

img 	{ margin:0; padding:0; border:0; }

table, tr, th, td, tbody, tfoot, thead {
	margin: 0; padding: 0; border: 0;
	vertical-align: baseline;
	background: transparent;
	}
	
table { border-collapse: collapse; border-spacing: 0; }
	
input, select, textarea, form, fieldset {
	margin: 0; padding: 0; border: 0;
	}

blockquote, q { quotes: none; }

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

h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, b, i, u, strike { 
    
	font-family: Arial, Helvetica, sans-serif;
	font-size:100%;
	font-weight: normal;
	font-style: normal;
	line-height: 100%; 
	text-indent: 0;
	text-decoration: none;
	text-align: left;
	color: #000;
	}


ol, ul { list-style: decimal; list-style-type: none;}


h1, h2, h3, h4, h5, h6, b, strong { font-weight: bold; color: #000; }
/*h1 { font-size:24px; }
h2 { font-size:20px; }
h3 { font-size:16px; }
h4 { font-size:14px; }
h5 { font-size:14px; }
h6 { font-size:14px; }*/

/*********************** IPhone *********************************/

@media only screen and (min-width: 320px) and (max-width: 599px){


body{width: 100%; margin: 0% auto; background-color: #E7D7C2;}
h1{margin: 4% 2% 2% 2%; text-align: center; font-size: 225%;}
h2{font-size: 175%; width: 90%}
#frontpage{float: right; width: 100%; background: white;}
#frontpage h2{margin: auto; padding: 4% 0% 0% 0%; font-size: 1.7em;}
#maintitle{font-size:330%;}
#secondtitle{font-size:214%; width: 100%;}
p{line-height: 150%; font-size: 175%;}
ol{font-size: 155%; font-weight: bold; margin-left: 2%;}
li{font-size: 115%; line-height: 140%; margin-left: 2%; list-style-type: disc;}

#wrapper{width: 100%;}
#header img{display: none;}

#content{width: 85%; padding: 1%; margin: 2% auto; border-radius: 15px; background-color: #D2B48C;}
#content #headerContent{width: 98%; padding: 1%;}
#content #videoContent{min-width: 240px; margin: 2% 4% 10% 2%;}
#videoContent iframe{max-width: 100%;}
#content #headerContent #ctaImage{position: relative; padding-bottom: 56.25%;}
#content #headerContent #ctaImage iframe{position: absolute; width: 100%; height: 100%;}
#content #headerContent #banner{margin: 15% auto; padding: 0.50%; border-radius: 15px; background-color: #AA000A; width: 90%; font-size: 100%;}
#content #headerContent #banner p{color: white; padding: 2%; margin-left: 2%; width: 90%;}	
#content #headerContent #banner img{width: 90%; padding: 2%; margin: 2%;}					   
#content #headerContent #basicRules{margin: 2% auto; padding: 2%; border-radius: 15px; width: 90%; min-width: 68%; background-color:  #F5CB47; color: white;}

.article1 p{padding: 1%; width: 85%; margin: 2%;  border-radius: 5px;}
.article1 span{font-size: 120%; font-weight: bold;}
.article1 img{float: left; margin: 2%;}
#article2{overflow: hidden; border-radius: 15px; width: 90%; padding: 4%; margin: 1%; background-color: #D2B48C;}
#article2 h2{width: 75%; margin-bottom: 4%;  text-align: left;}
#article2 #standardHowto{width: 80%; padding: 0.50%; margin-left: 10%; font-size: 100%;}
#article2 #metricHowto{width: 80%; padding: 0.50%; margin-left: 10%; font-size: 100%;}
#article2 #understandResults{float: left; clear: both; border-radius: 15px; width: 95%; padding: 2%; margin: 1%; background-color: #D2B48C;}
#article2 #understandResults h2{width: 95%;}

#formcaloriesBurned{width: 85%; padding: 2%; margin: 2% auto; margin-top: 8%; background-color: #9E9181; border-radius: 15px;}
#formcaloriesBurned #fieldscaloriesBurned div{margin: 0% auto; width: 85%; padding: 2%;}
#formcaloriesBurned #fieldscaloriesBurned label{float: left; text-align: right; width: 38%; font-size: 175%; margin: 2%; font-weight: bold;}
#formcaloriesBurned #fieldscaloriesBurned select{font-size: 175%; margin: 2%; width: 46%; font-weight: bold;}
#formcaloriesBurned #fieldscaloriesBurned input{font-size: 175%; margin: 2%; width: 46%; font-weight: bold;}
#formcaloriesBurned #buttoncaloriesBurned input{width: 40%; text-align: center; padding: 2%; font-size: 120%; background-color: #786750; border-radius: 5px; color: white; margin-top: 8%;}
#formcaloriesBurned .subHeader h2{color: #AA000A; margin: 4% auto;}

#calculator{overflow: hidden; width: 98%; background-color: #D2B48C; padding: 1%; margin: 1%; border-radius: 15px;}
#formcalorieCalc .mainHeader h1{margin: 12% auto;}
#formcalorieCalc .subHeader h2{color: #AA000A; margin: 4% auto;}
#formcalorieCalc{width: 80%; padding: 1%; margin: 2% auto; background-color: #A89070; border-radius: 15px;}
#formcalorieCalc #fieldscalorieCalc div{margin: 0% auto; width: 85%; padding: 2%;}
#formcalorieCalc #fieldscalorieCalc label{float: left; text-align: right; width: 35%; font-size: 175%; margin: 2%; font-weight: bold;}
#formcalorieCalc #fieldscalorieCalc select{font-size: 175%; margin: 2%; width: 46%; font-weight: bold;}
#formcalorieCalc #fieldscalorieCalc input{font-size: 175%; margin: 2%; width: 46%; font-weight: bold;}
#formcalorieCalc #buttoncalorieCalc input{width: 40%; text-align: center; padding: 2%; font-size: 120%; background-color: #786750; border-radius: 5px; color: white; margin-top: 8%;}

#pdfDocument{border-radius: 5px; width: 90%; padding: 4%;}
#pdfDocument h2{padding: 1%; margin: 2% auto; text-align: center; font-size: 175%; width: 85%;}
#pdfDocument li{padding: 1%; font-size: 175%; list-style-type: none; text-align: center;}
#pdfDocument li a{color: blue; background-color: #FAE8AE; padding: 2%; text-align: center; width: 40%; font-size: 70%; border-radius: 5px;}

#footer{clear: both; padding: 4%; text-align: center; font-size: 175%; background-color: #786750; line-height: 150%}

}

/*********************** IPhone ******************************/

@media only screen and (min-width: 600px) and (max-width: 767px){


body{width: 100%; margin: 0% auto; background-color: #E7D7C2;}
h1{margin: 4% 2% 2% 2%; text-align: center; font-size: 225%;}
h2{font-size: 175%; width: 90%;}
#frontpage{float: right; width: 100%; background: white;}
#frontpage h2{margin: auto; padding: 4% 0% 0% 0%; font-size: 1.7em;}
#maintitle{font-size:500%;}
#secondtitle{font-size:235%;}
p{line-height: 150%; font-size: 175%;}
ol{font-size: 155%; font-weight: bold; margin-left: 2%;}
li{font-size: 115%; line-height: 140%; margin-left: 2%; list-style-type: disc;}

#wrapper{width: 100%;}
#header img{display: none;}

#content{width: 65%; padding: 1%; margin: 2% auto; border-radius: 15px; background-color: #D2B48C;}
#content #headerContent{width: 98%; padding: 1%;}
#content #videoContent{width: 30%; margin: 2% 4% 10% 2%;}
#videoContent iframe{max-width: 100%;}
#content #headerContent #ctaImage{position: relative; padding-bottom: 56.25%;}
#content #headerContent #ctaImage iframe{position: absolute; width: 100%; height: 100%;}
#content #headerContent #banner{margin: 2% auto; padding: 0.50%; border-radius: 15px; background-color: #AA000A; width: 80%; font-size: 100%;}
#content #headerContent #banner p{color: white; padding: 2%; margin-left: 2%; width: 90%;}	
#content #headerContent #banner img{width: 90%; padding: 2%; margin: 2%;}					   
#content #headerContent #basicRules{margin: 2% auto; padding: 2%; border-radius: 15px; width: 80%; min-width: 68%; background-color:  #F5CB47; color: white;}

.article1 p{padding: 1%; width: 85%; margin: 2%;  border-radius: 5px;}
.article1 span{font-size: 120%; font-weight: bold;}
.article1 img{float: left; margin: 2%;}
#article2{overflow: hidden; border-radius: 15px; width: 90%; padding: 4%; margin: 1%; background-color: #D2B48C;}
#article2 h2{width: 75%; margin-bottom: 4%;  text-align: left;}
#article2 #standardHowto{width: 80%; padding: 0.50%; margin: 1%; font-size: 95%;}
#article2 #metricHowto{width: 80%; padding: 0.50%; margin: 1%; font-size: 95%;}
#article2 #understandResults{float: left; clear: both; border-radius: 15px; width: 85%; padding: 2%; margin: 1%; background-color: #D2B48C;}
#article2 #understandResults h2{width: 95%;}

#formcaloriesBurned{width: 85%; padding: 2%; margin: 2% auto; margin-top: 8%; background-color: #9E9181; border-radius: 15px;}
#formcaloriesBurned #fieldscaloriesBurned div{margin: 0% auto; width: 85%; padding: 2%;}
#formcaloriesBurned #fieldscaloriesBurned label{float: left; text-align: right; width: 38%; font-size: 175%; margin: 2%; font-weight: bold;}
#formcaloriesBurned #fieldscaloriesBurned select{font-size: 175%; margin: 2%; width: 46%; font-weight: bold;}
#formcaloriesBurned #fieldscaloriesBurned input{font-size: 175%; margin: 2%; width: 46%; font-weight: bold;}
#formcaloriesBurned #buttoncaloriesBurned input{width: 40%; text-align: center; padding: 2%; font-size: 180%; background-color: #786750; border-radius: 5px; color: white; margin-top: 8%;}
#formcaloriesBurned .subHeader h2{color: #AA000A; margin: 4% auto;}

#calculator{overflow: hidden; width: 95%; background-color: #D2B48C; padding: 1%; margin: 1%; border-radius: 15px;}
#formcalorieCalc .mainHeader h1{margin: 12% auto;}
#formcalorieCalc .subHeader h2{color: #AA000A; margin: 4% auto;}
#formcalorieCalc{width: 80%; padding: 1%; margin: 2% auto; background-color: #A89070; border-radius: 15px;}
#formcalorieCalc #fieldscalorieCalc div{margin: 0% auto; width: 85%; padding: 2%;}
#formcalorieCalc #fieldscalorieCalc label{float: left; text-align: right; width: 35%; font-size: 175%; margin: 2%; font-weight: bold;}
#formcalorieCalc #fieldscalorieCalc select{font-size: 175%; margin: 2%; width: 46%; font-weight: bold;}
#formcalorieCalc #fieldscalorieCalc input{font-size: 175%; margin: 2%; width: 46%; font-weight: bold;}
#formcalorieCalc #buttoncalorieCalc input{width: 40%; text-align: center; padding: 2%; font-size: 180%; background-color: #786750; border-radius: 5px; color: white; margin-top: 8%;}

#pdfDocument{border-radius: 5px; width: 90%; padding: 4%;}
#pdfDocument h2{padding: 1%; margin: 2% auto; text-align: center; font-size: 175%; width: 85%;}
#pdfDocument li{padding: 1%; font-size: 175%; list-style-type: none; text-align: center;}
#pdfDocument li a{color: blue; background-color: #FAE8AE; padding: 2%; text-align: center; border-radius: 5px;}

#footer{clear: both; padding: 4%; text-align: center; font-size: 175%; background-color: #786750; line-height: 150%}

}


/*********************** large IPhone & Tablets *******************************/

@media only screen and (min-width: 768px) and (max-width: 1023px){

body{width: 100%; margin: 0% auto; background-color: #E7D7C2;}
h1{margin: 4% 2% 2% 2%; text-align: center; font-size: 225%;}
h2{font-size: 175%; width: 90%;}
#frontpage{float: right; width: 100%; background: white;}
#frontpage h2{margin: auto; padding: 4% 0% 0% 0%; font-size: 2em;}
#maintitle{font-size:500%;}
#secondtitle{font-size:250%;}
p{line-height: 150%; font-size: 175%;}
ol{font-size: 155%; font-weight: bold; margin-left: 2%;}
li{font-size: 115%; line-height: 140%; margin-left: 2%; list-style-type: disc;}

#wrapper{width: 100%;}
#header img{width: 100%;}

#content{width: 65%; padding: 1%; margin: 2% auto; border-radius: 15px; background-color: #D2B48C;}
#content #headerContent{width: 98%; padding: 1%;}
#content #videoContent{min-width: 340px; margin: 2% 4% 10% 2%;}
#videoContent iframe{max-width: 100%;}
#content #headerContent #ctaImage{position: relative; padding-bottom: 56.25%;}
#content #headerContent #ctaImage iframe{position: absolute; width: 100%; height: 100%;}
#content #headerContent #banner{margin: 2% auto; padding: 0.50%; border-radius: 15px; background-color: #AA000A; width: 80%; font-size: 100%;}
#content #headerContent #banner p{color: white; padding: 2%; margin-left: 2%; width: 90%;}	
#content #headerContent #banner img{width: 90%; padding: 2%; margin: 2%;}					   
#content #headerContent #basicRules{margin: 2% auto; padding: 2%; border-radius: 15px; width: 80%; min-width: 68%; background-color:  #F5CB47; color: white;}

.article1 p{padding: 1%; width: 85%; margin: 2%;  border-radius: 5px;}
.article1 span{font-size: 120%; font-weight: bold;}
.article1 img{float: left; margin: 2%;}
#article2{overflow: hidden; border-radius: 15px; width: 90%; padding: 4%; margin: 1%; background-color: #D2B48C;}
#article2 h2{width: 75%; margin-bottom: 4%;  text-align: left;}
#article2 #standardHowto{float: left; width: 40%; padding: 0.50%; margin: 1%; font-size: 95%;}
#article2 #metricHowto{float: right; width: 34%; padding: 0.50%; margin: 1%; font-size: 95%;}
#article2 #understandResults{float: left; clear: both; border-radius: 15px; width: 85%; padding: 2%; margin: 1%; background-color: #D2B48C;}
#article2 #understandResults h2{width: 95%;}

#formcaloriesBurned{width: 78%; padding: 2%; margin: 2% auto; margin-top: 8%; background-color: #9E9181; border-radius: 15px;}
#formcaloriesBurned #fieldscaloriesBurned div{margin: 0% auto; width: 85%; padding: 2%;}
#formcaloriesBurned #fieldscaloriesBurned label{float: left; text-align: right; width: 38%; font-size: 175%; margin: 2%; font-weight: bold;}
#formcaloriesBurned #fieldscaloriesBurned select{font-size: 175%; margin: 2%; width: 46%; font-weight: bold;}
#formcaloriesBurned #fieldscaloriesBurned input{font-size: 175%; margin: 2%; width: 46%; font-weight: bold;}
#formcaloriesBurned #buttoncaloriesBurned input{width: 40%; text-align: center; padding: 2%; font-size: 180%; background-color: #786750; border-radius: 5px; color: white; margin-top: 8%;}
#formcaloriesBurned .subHeader h2{color: #AA000A; margin: 4% auto;}

#calculator{overflow: hidden; width: 85%; background-color: #D2B48C; padding: 1%; margin: 1%; border-radius: 15px;}
#formcalorieCalc .mainHeader h1{margin: 12% auto;}
#formcalorieCalc .subHeader h2{color: #AA000A; margin: 4% auto;}
#formcalorieCalc{width: 80%; padding: 1%; margin: 2% auto; background-color: #A89070; border-radius: 15px;}
#formcalorieCalc #fieldscalorieCalc div{margin: 0% auto; width: 85%; padding: 2%;}
#formcalorieCalc #fieldscalorieCalc label{float: left; text-align: right; width: 35%; font-size: 175%; margin: 2%; font-weight: bold;}
#formcalorieCalc #fieldscalorieCalc select{font-size: 175%; margin: 2%; width: 46%; font-weight: bold;}
#formcalorieCalc #fieldscalorieCalc input{font-size: 175%; margin: 2%; width: 46%; font-weight: bold;}
#formcalorieCalc #buttoncalorieCalc input{width: 40%; text-align: center; padding: 2%; font-size: 180%; background-color: #786750; border-radius: 5px; color: white; margin-top: 8%;}

#pdfDocument{border-radius: 5px; width: 90%; padding: 4%;}
#pdfDocument h2{padding: 1%; margin: 2% auto; text-align: center; font-size: 175%; width: 85%;}
#pdfDocument li{padding: 1%; font-size: 175%; list-style-type: none; text-align: center;}
#pdfDocument li a{color: blue; background-color: #FAE8AE; padding: 2%; text-align: center; border-radius: 5px;}

#footer{clear: both; padding: 4%; text-align: center; font-size: 175%; background-color: #786750; line-height: 150%}

}



/* ****************************** TABLET STYLES ******************************/

@media only screen and (min-width: 1024px) and (max-width: 1279px){

body{width: 100%; margin: 0% auto; background-color: #E7D7C2;}
h1{margin: 4% 2% 2% 2%; text-align: center; font-size: 225%;}
h2{font-size: 175%; width: 90%;}
#frontpage{float: right; width: 100%; background: white;}
#frontpage h2{margin: auto; padding: 4% 0% 0% 0%; font-size: 2.1em;}
#maintitle{font-size:530%;}
#secondtitle{font-size:290%;}
p{line-height: 150%; font-size: 175%;}
ol{font-size: 155%; font-weight: bold; margin-left: 2%;}
li{font-size: 120%; line-height: 140%; margin-left: 2%; list-style-type: disc;}

#wrapper{width: 100%;}
#header{width: 100%;}

#content{width: 65%; padding: 1%; margin: 2% auto; border-radius: 15px; background-color: #D2B48C;}
#content #headerContent{width: 98%; padding: 1%;}
#content #videoContent{margin: auto; width: 65%;}
#videoContent iframe{max-width: 100%;}
#content #headerContent #ctaImage{position: relative; padding-bottom: 56.25%;}
#content #headerContent #ctaImage iframe{position: absolute; width: 100%; height: 100%;}
#content #headerContent #banner{margin: 2% auto; padding: 0.50%; border-radius: 15px; background-color: #AA000A; width: 80%; font-size: 100%;}
#content #headerContent #banner p{color: white; padding: 2%; margin-left: 2%; width: 90%;}	
#content #headerContent #banner img{width: 90%; padding: 2%; margin: 2%;}					   
#content #headerContent #basicRules{margin: 2% auto; padding: 2%; border-radius: 15px; width: 68%; min-width: 68%; background-color:  #F5CB47; color: white;}

.article1 p{float: left; padding: 1%; width: 85%; margin: 2%;  border-radius: 5px;}
.article1 span{font-size: 120%; font-weight: bold;}
.article1 img{float: left; padding: 0%; margin: 1%;}
#article2{overflow: hidden; border-radius: 15px; width: 90%; padding: 4%; margin: 1%; background-color: #D2B48C;}
#article2 h2{width: 60%; margin-bottom: 4%;  text-align: left;}
#article2 #standardHowto{float: left; width: 38%; padding: 0.50%; margin: 4%;}
#article2 #metricHowto{float: right; width: 32%; padding: 0.50%; margin: 4%;}
#article2 #understandResults{float: left; clear: both; border-radius: 15px; width: 50%; padding: 2%; margin: 1%; background-color: #D2B48C;}
#article2 #understandResults h2{width: 95%;}

#formcaloriesBurned{width: 80%; padding: 2%; margin: 2% auto; margin-top: 8%; background-color: #9E9181; border-radius: 15px;}
#formcaloriesBurned #fieldscaloriesBurned div{margin: 0% auto; width: 85%; padding: 2%;}
#formcaloriesBurned #fieldscaloriesBurned label{float: left; text-align: right; width: 38%; font-size: 175%; margin: 2%; font-weight: bold;}
#formcaloriesBurned #fieldscaloriesBurned select{font-size: 175%; margin: 2%; width: 46%; font-weight: bold;}
#formcaloriesBurned #fieldscaloriesBurned input{font-size: 175%; margin: 2%; width: 46%; font-weight: bold;}
#formcaloriesBurned #buttoncaloriesBurned input{width: 40%; text-align: center; padding: 2%; font-size: 180%; background-color: #786750; border-radius: 5px; color: white; margin-top: 8%;}
#formcaloriesBurned .subHeader h2{color: #AA000A; margin: 4% auto;}

#calculator{overflow: hidden; float: right; width: 38%; background-color: #D2B48C; padding: 1%; margin: 1%; border-radius: 15px;}
#formcalorieCalc .mainHeader h1{margin: 12% auto;}
#formcalorieCalc .subHeader h2{color: #AA000A; margin: 4% auto;}
#formcalorieCalc{width: 80%; padding: 1%; margin: 2% auto; background-color: #A89070; border-radius: 15px;}
#formcalorieCalc #fieldscalorieCalc div{margin: 0% auto; width: 85%; padding: 2%;}
#formcalorieCalc #fieldscalorieCalc label{float: left; text-align: right; width: 35%; font-size: 175%; margin: 2%; font-weight: bold;}
#formcalorieCalc #fieldscalorieCalc select{font-size: 175%; margin: 2%; width: 46%; font-weight: bold;}
#formcalorieCalc #fieldscalorieCalc input{font-size: 175%; margin: 2%; width: 46%; font-weight: bold;}
#formcalorieCalc #buttoncalorieCalc input{width: 40%; text-align: center; padding: 2%; font-size: 180%; background-color: #786750; border-radius: 5px; color: white; margin-top: 8%;}

#pdfDocument{border-radius: 5px; width: 90%; padding: 4%;}
#pdfDocument h2{padding: 1%; margin: 2% auto; text-align: center; font-size: 175%; width: 85%;}
#pdfDocument li{padding: 1%; font-size: 175%; list-style-type: none; text-align: center;}
#pdfDocument li a{color: blue; background-color: #FAE8AE; padding: 2%; text-align: center; border-radius: 5px; width: 40%;}

#footer{clear: both; padding: 4%; text-align: center; font-size: 175%; background-color: #786750; line-height: 150%}

}


/******************************* DESKTOP STYLES ******************************/

@media only screen and (min-width: 1280px){

body{width: 100%; margin: 0% auto; background-color: #E7D7C2;}
h1{margin: 4% 2% 2% 2%; text-align: center; font-size: 225%;}
h2{font-size: 175%; width: 90%;}
#frontpage{float: right; width: 100%; background: white;}
#frontpage h2{margin: auto; padding: 4% 0% 0% 0%; font-size: 2.6em;}
#maintitle{font-size:530%;}
#secondtitle{font-size:290%;}
p{line-height: 150%; font-size: 175%;}
ol{font-size: 155%; font-weight: bold; margin-left: 2%;}
li{font-size: 120%; line-height: 140%; margin-left: 2%; list-style-type: disc;}

#wrapper{width: 100%;}
#header{width: 100%;}

#content{width: 65%; padding: 1%; margin: 2% auto; border-radius: 15px; background-color: #D2B48C;}
#content #headerContent{width: 98%; padding: 1%;}
#content #videoContent{margin: auto; width: 65%;}
#videoContent iframe{max-width: 100%;}
#content #headerContent #ctaImage{position: relative; padding-bottom: 56.25%;}
#content #headerContent #ctaImage iframe{position: absolute; width: 100%; height: 100%;}
#content #headerContent #banner{margin: 2% auto; padding: 0.50%; border-radius: 15px; background-color: #AA000A; width: 80%; font-size: 100%;}
#content #headerContent #banner p{color: white; padding: 2%; margin-left: 2%; width: 90%;}	
#content #headerContent #banner img{width: 90%; padding: 2%; margin: 2%;}					   
#content #headerContent #basicRules{margin: 2% auto; padding: 2%; border-radius: 15px; width: 68%; min-width: 68%; background-color:  #F5CB47; color: white;}

.article1 p{float: right; padding: 1%; width: 90%; margin: 2%;  border-radius: 5px;}
.article1 span{font-size: 120%; font-weight: bold;}
.article1 img{float: left; margin: 0.50%;}
#article2{overflow: hidden; border-radius: 15px; width: 90%; padding: 4%; margin: 1%; background-color: #D2B48C;}
#article2 h2{width: 60%; margin-bottom: 4%;  text-align: left;}
#article2 #standardHowto{float: left; width: 38%; padding: 0.50%; margin: 4%;}
#article2 #metricHowto{float: right; width: 32%; padding: 0.50%; margin: 4%;}
#article2 #understandResults{float: left; clear: both; border-radius: 15px; width: 50%; padding: 2%; margin: 1%; background-color: #D2B48C;}
#article2 #understandResults h2{width: 95%;}

#formcaloriesBurned{width: 80%; padding: 2%; margin: 2% auto; margin-top: 8%; background-color: #9E9181; border-radius: 15px;}
#formcaloriesBurned #fieldscaloriesBurned div{margin: 0% auto; width: 85%; padding: 2%;}
#formcaloriesBurned #fieldscaloriesBurned label{float: left; text-align: right; width: 38%; font-size: 175%; margin: 2%; font-weight: bold;}
#formcaloriesBurned #fieldscaloriesBurned select{font-size: 175%; margin: 2%; width: 46%; font-weight: bold;}
#formcaloriesBurned #fieldscaloriesBurned input{font-size: 175%; margin: 2%; width: 46%; font-weight: bold;}
#formcaloriesBurned #buttoncaloriesBurned input{width: 40%; text-align: center; padding: 2%; font-size: 180%; background-color: #786750; border-radius: 5px; color: white; margin-top: 8%;}
#formcaloriesBurned .subHeader h2{color: #AA000A; margin: 4% auto;}

#calculator{overflow: hidden; float: right; width: 38%; background-color: #D2B48C; padding: 1%; margin: 1%; border-radius: 15px;}
#formcalorieCalc .mainHeader h1{margin: 12% auto;}
#formcalorieCalc .subHeader h2{color: #AA000A; margin: 4% auto;}
#formcalorieCalc{width: 80%; padding: 1%; margin: 2% auto; background-color: #A89070; border-radius: 15px;}
#formcalorieCalc #fieldscalorieCalc div{margin: 0% auto; width: 85%; padding: 2%;}
#formcalorieCalc #fieldscalorieCalc label{float: left; text-align: right; width: 35%; font-size: 175%; margin: 2%; font-weight: bold;}
#formcalorieCalc #fieldscalorieCalc select{font-size: 175%; margin: 2%; width: 46%; font-weight: bold;}
#formcalorieCalc #fieldscalorieCalc input{font-size: 175%; margin: 2%; width: 46%; font-weight: bold;}
#formcalorieCalc #buttoncalorieCalc input{width: 40%; text-align: center; padding: 2%; font-size: 180%; background-color: #786750; border-radius: 5px; color: white; margin-top: 8%;}

#pdfDocument{border-radius: 5px; width: 90%; padding: 4%;}
#pdfDocument h2{padding: 1%; margin: 2% auto; text-align: center; font-size: 175%; width: 85%;}
#pdfDocument li{padding: 1%; font-size: 175%; list-style-type: none; text-align: center;}
#pdfDocument li a{color: blue; background-color: #FAE8AE; padding: 2%; text-align: center; border-radius: 5px;}

#footer{clear: both; padding: 4%; text-align: center; font-size: 175%; background-color: #786750; line-height: 150%}

}

/* Note: 
 1. to get elements to float right and up in place make sure you float one left and the other right
 2. for background images to show up in Internet Explorer they must be in .jpg not .png format 
 3.  place code in body ----> height: 000px; background-size: cover; background-image: url("../images/success.jpg");
 */