body {
	margin: 0;
	padding: 0;
	background: #d1c2ae;
	background: hsl(35, 28%, 80%);
	color: #443526;
	font-family: 'PT Serif', serif;
}
.wrapper {
	min-width: 320px;
	width: 90%;
	margin: 0 auto;
}
article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; }

/* Text */
h1, h2, h3 {
	font-family: 'Hammersmith One', sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	text-align: center;
}
h1 {
	font-size: 300%;
	line-height: 1;
}
a {
	color: #F0470F;
}
.link-bold {
	display:block;
	padding: 20px;
	border-radius: 2px;
	border: 1px solid #E9E2D8; /* IE fallback */
	border: 1px solid hsla(0,0%,100%,.3);
	background: #E1D8CA; /* IE fallback */
	background: hsla(0,0%,100%,.2);
	text-align:center;
	font-size: 125%;
}
.intro {
	margin-bottom: 1.5em;
	font-size: 125%;
	line-height: 1.5;
}

/* Header --------------------------------- */
.logo {
	text-align: center;
}
.tagline {
	display: block;
	margin-top: 5px;
	color: #fff;
	font-family: 'Hammersmith One', sans-serif;
}
.list-nav {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: 'Hammersmith One', sans-serif;
	font-weight: normal;
	text-transform: uppercase;
}
.list-nav-item {
	/* since they don't have flex set, they just shrinkwrap to longest content */
	text-align: center;
}

/* Forms ------------------------------ */
button::-moz-focus-inner { border:0; }
button {
	background: #F0470F; /* IE fallback */
	background: hsla(15,88%,50%,1.0);
	border: 1px solid hsla(15,80%,40%,1.0);
	border-radius: 3px;
	-webkit-box-shadow: inset 0 0 1px 1px hsla(0,0%,100%,.5);
	box-shadow: inset 0 0 1px 1px hsla(0,0%,100%,.5);
	color: #fff;
	padding: 12px 20px 14px 20px;
	text-align: center;
	text-shadow: 0 1px 0 hsla(0,0%,0%,.5);
	font-family: 'Hammersmith One', sans-serif;
	font-weight: normal;
	font-size: 112.5%;
	text-transform: uppercase;
}
button:hover {
    background: hsla(15,88%,47%,1.0);
    cursor: pointer;
}
button:active {
    background: hsla(15,90%,52%,1.0);
    color: #000;
}
input[type="text"] {
	padding: 2px 2px 4px 4px;
	border: 1px solid hsl(35,28%,70%);
	border-radius: 2px;
	box-shadow: inset 0 0 2px #fff;
	background: hsl(35,28%,97%);
	background: -webkit-linear-gradient(top, hsl(35,28%,90%), #fff);
	background: -moz-linear-gradient(top, hsl(35,28%,90%), #fff); /* ADD other versions */
}
input[type="checkbox"], input[type="radio"] {
	margin:0 4px 0 0;
	padding:0;
	width:16px;
}
input[type="checkbox"] + label, input[type="radio"] + label {
	position: relative;
	padding-left: 4px;
}
input[type="checkbox"] + label::before, input[type="radio"] + label::before {
	position: absolute;
	left: -21px;
	top: 0;
	display: inline-block;
	width: 10px;
	height: 10px;
	padding: 2px 2px 4px 4px;
	background: #fff;
	background: -webkit-linear-gradient(top, hsl(35,28%,90%), #fff);
	background: -moz-linear-gradient(top, hsl(35,28%,90%), #fff); /* add other variations */
	content: " ";
	margin-top: 2px;
	cursor: pointer;
	border: 1px solid hsl(35, 28%, 70%);
	border-radius: 2px;
	text-align: center;
	line-height: 10px;
	vertical-align: top;
	box-shadow: inset 0 0 1px #fff;
	color: #F0470F;
}
input[type="radio"] + label::before {
	width: 9px;
	height: 9px;
	padding: 1px 3px 5px 3px;
	border-radius: 50%;
}
input[type="checkbox"] + label:hover::before, input[type="checkbox"]:focus + label::before {
	box-shadow: inset 0 0 2px 1px #fd2;
}
input[type="checkbox"]:checked + label:before {
	content: "\2713";
}
input[type="radio"]:checked + label:before {
	content: "\25CF";
}
input:disabled + label:before {
	border-color: #bbb;
	color: #bbb;
	text-shadow: 0 -1px #ccc, 0 1px #666;
	background: -moz-linear-gradient(top, #d5d5d5, #e5e5e5); /* add other variations */
}

/* S'mores Builder ---------------------------- */
.builder {
	margin: 0 0 40px -20px;
}
.flexwrap .builder {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.builder-component {
	-ms-flex: 1 1 200px;
	-webkit-flex: 1 1 200px;
	flex: 1 1 200px; /* can't use 1 as value, because that makes flex-basis 0, which means each is allowed to shrink to 0px, so .action will never have to wrap */
	
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column; /* only has one flex item child, the ul, but we want it to stretch its height, so we set direction to column so that flex property affects height not width */
	
	margin: 20px 0 20px 20px;
	padding: 20px;
	border-radius: 2px;
	border: 1px solid #E9E2D8; /* IE fallback */
	border: 1px solid hsla(0,0%,100%,.3);
	background: #E1D8CA; /* IE fallback */
	background: hsla(0,0%,100%,.2);
}
.builder-component-name {
	position: relative;
	margin: 0 0 .5em 0;
	padding: 10px 0 0 0;
}
.builder-component-name:before {
	content: '';
	display: block;
	position: absolute;
	top: -40px;
	left: 50%;
	width: 40px;
	height: 40px;
	margin-left: -20px;
	background-image: url(../images/icons.png);
}
.builder-component_marshmallow .builder-component-name:before { background-position: -40px 0; }
.builder-component_candy .builder-component-name:before { background-position: -80px 0; }
.builder-component_accessories .builder-component-name:before { background-position: -120px 0; }
.ingredients-list {
	/*-ms-flex: 1; not feeding to IE 10 because it has bug that collapses .components when this flexes vertically */
	-webkit-flex: 1;
	flex: 1; /* force it to stretch to full height. height:100% won't work because parent doesn't have height declared */
	
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
	
	margin: 0;
	padding: 0;
	list-style: none;
}
.ingredients-list-item {
	margin-bottom: .5em;
}
.ingredients-list-item:last-child {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	
	margin-top: auto; /* set to whatever free space is left, effectively pushing item to bottom of container */
}
.other-ingredient-label {
	margin-right: 4px;
}
.other-ingredient-field {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	
	display: block; /* FALLBACK */
	-moz-box-sizing: border-box; /* FALLBACK */
	box-sizing: border-box; /* FALLBACK */
	width: 100%; /* FALLBACK */
	margin: 0;
}
.builder-action {
	-ms-flex: 1 1 100%;
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
	
	margin: 0 0 0 20px;
	text-align: center; /* FALLBACK */
}
.flexwrap .builder-action {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.flexwrap .builder-action-label {
	margin-right: 10px; /* Hide from non-flexbox browsers because it screws up centered appearance of label text */
}
.builder-action-label {
	font-family: 'Hammersmith One', sans-serif;
	font-weight: normal;
	font-size: 112.5%;
	text-transform: uppercase;
}
.builder-action-field {
	-ms-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	
	display: block; /* FALLBACK */
	width: 100%; /* FALLBACK */
	-moz-box-sizing: border-box; /* FALLBACK */
	box-sizing: border-box; /* FALLBACK */
}
.builder-action-button {
	-ms-flex: 1 1 100%;
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
	
	margin-top: 10px;
}

/* S'mores Gallery --------------------------- */
.gallery {
	margin-left: -20px;
	text-align: center; /* FALLBACK, test */
}
.flexwrap .gallery {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.gallery-item {
	display: inline-block; /* FALLBACK */
	width: 12em; /* FALLBACK, test */
	height: 9em; /* FALLBACK, test */
	margin: 0 0 20px 20px;
	padding: 20px;
	border-radius: 2px;
	border: 1px solid #413324; /* IE fallback */
	border: 1px solid hsl(30,28%,20%);
	background: #614C37; /* IE fallback */
	background: hsl(30,28%,30%);
	color: #E9E2D8; /* IE fallback */
	color: hsl(30,28%,90%);
	text-align: center;
	vertical-align: top; /* FALLBACK, test */
}
.flexwrap .gallery-item {
	-ms-flex: 1 0 200px;
	-webkit-flex: 1 0 200px;
	flex: 1 0 200px; /* wrapping won't happen with 1 as value because of flex-basis equal to 0 again. can use auto as flex-basis, but then each box is different width. using an absolute value acts as min-width but also ensures they start out same size so when flex gets added it gets added equally and each box on same line stays same width */

	width: auto;
	height: auto;
}
.gallery-item:hover {
	background: #413324; /* fallback */
	background: hsl(30,28%,20%);
	color: #fff;
}
.gallery-item-name {
	margin: 0 0 .5em 0;
}
.gallery-item-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Pagination ------------------------------- */
.pagination {	
	margin: 0 0 40px 0;
	padding: 0;
	list-style: none;
	text-align: center; /* FALLBACK */
}
.flexwrap .pagination {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.pagination-item {
	-ms-flex-order: 2;
	-webkit-order: 2;
	order: 2;
	
	display: inline-block; /* FALLBACK */
}
.pagination-item:first-child {
	-ms-flex-order: 0;
	-webkit-order: 0;
	order: 0;
	
	text-align: left;
}
.pagination-item:last-child {
	-ms-flex-order: 1;
	-webkit-order: 1;
	order: 1;
	
	text-align: right;
}
.flexwrap .pagination-item:first-child, 
.flexwrap .pagination-item:last-child { /* Have to scope to only flexbox and flex-wrap browsers, using Modernizr .flexwrap class, because setting width to 50% only makes sense if order property is supported */
	width: 50%;
}
.pagination-link {
	display: inline-block; /* just keeps padded boxes from overlapping each other vertically */
	margin: 0 0 10px 0;
	padding: 10px;
	border-radius: 2px;
	border: 1px solid #E9E2D8; /* IE fallback */
	border: 1px solid hsla(0,0%,100%,.3);
	background: #E1D8CA; /* IE fallback */
	background: hsla(0,0%,100%,.2);
}

@media screen and (min-width:600px) {
	/* Header ---------- */
	.list-nav {
		letter-spacing: 1px;
		text-align: center; /* FALLBACK */
	} 
	.list-nav-item {
		display: inline-block; /* FALLBACK */
		padding: 0 .5em; /* FALLBACK */
	}
	.list-nav-item:first-child {
		padding-left: 0;
	}
	.list-nav-item:last-child {
		padding-right: 0;
	}
	
	/* S'mores Builder ---------- */
	.builder-action {
		margin: 0 0 0 20px;
	}
	.flexbox .builder-action,
	.flexboxtweener .builder-action {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex; /* Turn flexbox on for flexbox but non-flex-wrap browsers, since we're going back to a single line for this section here */

		-ms-flex-align: stretch;
		-webkit-align-items: stretch;
		align-items: stretch; /* Override align-items:center from earlier '.flexwrap .builder-action' rule */
		
		margin: 0 0 0 20px;
	}
	.builder-action-field {
		display: inline; /* FALLBACK */
		width: 20em; /* FALLBACK */
		margin: 0 10px 0 0;
	}
	.builder-action-label {
		-ms-flex-item-align: center;
		-webkit-align-self: center;
		align-self: center;
	}
	.builder-action-button {
		-ms-flex: none;
		-webkit-flex: none;
		flex: none;
		
		margin: 0;
	}
	
	/* Pagination ---------- */
	.pagination {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex; /* Turn flexbox on for flexbox but non-flex-wrap browsers, since we're going back to a single line for the pagination here */
		
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
	.pagination-item,
	.flexbox .pagination-item:first-child,
	.flexboxtweener .pagination-item:first-child,
	.flexbox .pagination-item:last-child,
	.flexboxtweener .pagination-item:last-child { /* Need .flexbox class just for specificity, to override earlier rule that set width to 50% */
		-ms-flex-order: 0;
		-webkit-order: 0;
		order: 0;
		
		width: auto;
		text-align: center;
	}
}
@media screen and (min-width:860px) {
	/* Header ---------- */
	.flexbox .list-nav,
	.flexboxtweener .list-nav {
		-ms-flex-pack: start;
		-webkit-justify-content: flex-start;
		justify-content: flex-start; /* back to the default */
		
		position: relative; /* you can use positioning with flexbox */
		top: -70px; /* This is the reason why we have to scope this rule to only apply in flexbox browsers. We don't want the jump up to happen unless flexbox is shoving the items to the edges. */
	}
	.flexbox .list-nav-item_home,
	.flexboxtweener .list-nav-item_home {
		margin-right:15px;
	}
	.flexbox .list-nav-item_tumblr,
	.flexboxtweener .list-nav-item_tumblr {
		margin-left:15px;
	}
	.flexbox .list-nav-item_party,
	.flexboxtweener .list-nav-item_party { /* make the break between left and right sides happen before this link */
		margin-left: auto;
	}

	/* S'mores Builder ---------- */
	.builder-component {
		float: left;
		width: 18%; /* IE fallback */
		width: calc(25% - 62px); /* 62px = 20px margin + 40px padding + 2px border */
	}
	.builder-action {
		clear: left;
	}
	.flexwrap .builder-component {
		float: none;
		width: auto;
	}
	
	/* Pagination ---------- */
	.flexbox .pagination,
	.flexboxtweener .pagination { /* Need .flexbox class just for specificity */
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
	}
	.pagination-link {
		margin: 0 10px;
	}
}
@media screen and (min-width:1200px) {
	/* Header ---------- */
	.list-nav { letter-spacing: 2px; }
	.flexbox .list-nav-item_home, .flexboxtweener .list-nav-item_home { margin-right:30px; }
	.flexbox .list-nav-item_tumblr, .flexboxtweener .list-nav-item_tumblr { margin-left:30px; }
	
	/* S'mores Builder ---------- */
	.flexwrap .builder-component { max-width: 14em; }
}