* {
  margin: 0;
  padding: 0;
}


@font-face {
    font-family: 'ChunkFiveRegular';
    src: url('fonts/Chunkfive-webfont.eot');
    src: url('fonts/Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Chunkfive-webfont.woff') format('woff'),
         url('fonts/Chunkfive-webfont.ttf') format('truetype'),
         url('fonts/Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'BPreplayRegular';
    src: url('fonts/BPreplay-webfont.eot');
    src: url('fonts/BPreplay-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BPreplay-webfont.woff') format('woff'),
         url('fonts/BPreplay-webfont.ttf') format('truetype'),
         url('fonts/BPreplay-webfont.svg#BPreplayRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'BPreplayItalic';
    src: url('fonts/BPreplayItalics-webfont.eot');
    src: url('fonts/BPreplayItalics-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BPreplayItalics-webfont.woff') format('woff'),
         url('fonts/BPreplayItalics-webfont.ttf') format('truetype'),
         url('fonts/BPreplayItalics-webfont.svg#BPreplayItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'BPreplayBold';
    src: url('fonts/BPreplayBold-webfont.eot');
    src: url('fonts/BPreplayBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BPreplayBold-webfont.woff') format('woff'),
         url('fonts/BPreplayBold-webfont.ttf') format('truetype'),
         url('fonts/BPreplayBold-webfont.svg#BPreplayBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'BPreplayBoldItalic';
    src: url('fonts/BPreplayBoldItalics-webfont.eot');
    src: url('fonts/BPreplayBoldItalics-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BPreplayBoldItalics-webfont.woff') format('woff'),
         url('fonts/BPreplayBoldItalics-webfont.ttf') format('truetype'),
         url('fonts/BPreplayBoldItalics-webfont.svg#BPreplayBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'BloklettersPotlood';
    src: url('fonts/Blokletters-Potlood-webfont.eot');
    src: url('fonts/Blokletters-Potlood-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Blokletters-Potlood-webfont.woff') format('woff'),
         url('fonts/Blokletters-Potlood-webfont.ttf') format('truetype'),
         url('fonts/Blokletters-Potlood-webfont.svg#BloklettersPotlood') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'BloklettersBalpen';
    src: url('fonts/Blokletters-Balpen-webfont.eot');
    src: url('fonts/Blokletters-Balpen-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Blokletters-Balpen-webfont.woff') format('woff'),
         url('fonts/Blokletters-Balpen-webfont.ttf') format('truetype'),
         url('fonts/Blokletters-Balpen-webfont.svg#BloklettersBalpen') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'BloklettersViltstift';
    src: url('fonts/Blokletters-Viltstift-webfont.eot');
    src: url('fonts/Blokletters-Viltstift-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Blokletters-Viltstift-webfont.woff') format('woff'),
         url('fonts/Blokletters-Viltstift-webfont.ttf') format('truetype'),
         url('fonts/Blokletters-Viltstift-webfont.svg#BloklettersViltstift') format('svg');
    font-weight: normal;
    font-style: normal;

}



.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

* {
	box-sizing:border-box;
}


.directionals{
	height:100px;
	position: absolute;
	left:30px;
	top:300px;
	width:950px;
}



.button{
	width:100px;
	height: 130px;
}

a#home{
	display:block;
	display:none;
	text-indent:-3000px;
	height:120px;
	position:absolute;
	left:30px;
	top:40%;
	width:120px;
	background-image:url("images/home_unselected.gif");
}

a#home:hover{
	background-image:url("images/home_selected.gif");
}

.forward{
	text-indent:-3000px;
	background-image:url("images/forward.gif");
	z-index:4;
	position: absolute;
	right: 0;
	top: 40%;
}

.forward:hover{
	background-image:url("images/forward_hover.gif");
}


.back{
	text-indent:-3000px;
	background-image:url("images/back.gif");
	position: absolute;
	left: 0;
	top: 40%;
}

.back:hover{
	background-image:url("images/back_hover.gif");
}

.steps{
	height:630px;
	width:950px;
	padding: 20px;
	margin:0 auto 0 auto;
}

#top{
	height:400px;
}

#bottom {
	position:relative;
	top:0px;
	width:950px;
	height:85px;
	float:left;
}

.questionBox1{
	width:300px;
	height:475px;
	padding-top:65px;
	padding-left:30px;
	font-family:"chunkfiveregular";
	font-weight: normal;
	font-size: 18 ;
	float:left;
	line-height: 167%;
	letter-spacing:+1;
}

.questionBox2{
	width:285px;
	height:500px;
	padding-top:135px;
	padding-left:50px;
	font-family:"chunkfiveregular";
	font-weight: normal;
	font-size: 18 ;
	float:left;
	line-height:170%;
}

.questionBox1 h3 {
	font-size:12pt;
	margin-top:180px;
	width:150px;
	color:grey;
	font-size: 18;
	line-height: 110%;
}

.questionBox1 h2 {
	font-size:10;
	margin-top:5px;
	color:grey;
	font-family: "BPreplayRegular";
	width:150px;
	line-height:110%;
}

#droppable{
	width: 275px;
	height: 250px;
	position:fixed;
	z-index:200;
	top:200px;
	left:350px;
}

.draggables{
	z-index:3;
}

#calorieInputSpace{
	width: 230px;
	height:475px;
	float:left;
	position:absolute;
}


#input-calorie {
	text-align:right;
	float:right;
	margin-top:290px;
	z-index:2;
}


#calorieInputSpace p{
	float:none;
	text-align:right;
	padding-top: 310px;
	font-family:"BPreplayRegular";
	font-size:12;
}

#stepOne{
	background-image:url("images/section1.gif");
}

.foodItems{
	width:120px;
	height:130px;
	margin-left: 10px;
	
}


#icecream{
	background-image:url("images/icecream.png");
}

#pizza{
	background-image:url("images/pizza.png");
}

#chicken{
	background-image:url("images/chicken.png");
}

#cake{
	background-image:url("images/cake.png");
}

#salad{
	background-image:url("images/salad.png");
}

#cookie{
	background-image:url("images/cookie.png");
}

#juice{
	background-image:url("images/juice.png");
}

.enterAmount{
	width:25px;
	margin-left:40%;
}

#shoeSizeQuestion {
	width:300px;
}

.shoes{
	width:240px;
	height:300px;
	margin-top:180px;
}

#female{
	background-image:url("images/female_unselected.gif");
}

#female:hover, #female.on {
	background-image:url("images/female_selected.gif");
}

#male{
	background-image:url("images/male_unselected.gif");
	width:300px;

}

#male:hover, #male.on{
	background-image:url("images/male_selected.gif");
}

div.meter {
	width:375px;
	display: none;
	padding-top:100px;
	float:left;
	}

div.meter.showing{
	display: block;
}

.input-shoeSize{
	height: 20px;
	position: relative;
	cursor: pointer;
	border: 1px solid #333;
	width: 250px;
	float:right;
}

.footprint {
	width:300px;
	height:300px;
	float:right;
	
	-webkit-transition-property:background-image;
	-webkit-transition-duration:1s;
	-webkit-transition-timing-function:linear;
	-webkit-transition-delay:0s;
}

.footprint.size1{
	background-image: url('images/footprint1.png');
}

.footprint.size2{
	background-image: url('images/footprint2.png');
}

.footprint.size3{
	background-image: url('images/footprint3.png');
}

.footprint.size4{
	background-image: url('images/footprint4.png');
}

.footprint.size5{
	background-image: url('images/footprint5.png');
}

.footprint.size6{
	background-image: url('images/footprint6.png');
}

.footprint.size7{
	background-image: url('images/footprint7.png');
}

.footprint.size8{
	background-image: url('images/footprint8.png');
}

.footprint.size9{
	background-image: url('images/footprint9.png');
}

.footprint.size10{
	background-image: url('images/footprint10.png');
}


.numberDisplay{
	display:block;
	font-family: "chunkfiveregular";
	font-size: 70;
	color:grey;
	float:left;
	width:200px;
	height:200px;
	margin-top:300px;
}


.comparisonText{
	width:475px;
	height:400px;
	float:left;
	text-align:right;
	padding-left:200px;
	padding-top:200px;
	font-family:"chunkfiveregular";
	font-size:18;
	line-height: 145%;
}

#comparison {
	width:400px;
	height:400px;
	float:left;
}


.comparisonImage1{
	background-image:url("images/hungry.png");
}

.comparisonImage2{
	background-image:url("images/bus.png");
}


.comparisonImage3{
	background-image:url("images/whale.gif");
}


.comparisonImage4{
	background-image:url("images/goldengate.gif");
}


.comparisonImage5{
	background-image:url("images/eiffel.png");
}


.comparisonImage6{
	background-image:url("images/mountain.gif");
}


.comparisonImage7{
	background-image:url("images/running.png");
}

.fbook{
	position:absolute;
	left:600px;
	margin:460px 0 0 190px;
}

.publish{
	position:absolute;
	margin:470px 0 0 220px;
	left:620px;
	color:grey;
	font-family: "BPreplayRegular";
	width:90px;
}

.people{
	font-family: "BPreplayRegular";
	color:grey;
	width:300px;
}