/* The CSS3 font-face rule defines my custom font-family. Source: http://www.fontsquirrel.com */
@font-face {
    font-family: 'KomikaTextRegular';
    src: url('../fonts/Komika-Text-fontfacekit/KOMTXT__-webfont.eot');
    src: url('../fonts/Komika-Text-fontfacekit/KOMTXT__-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Komika-Text-fontfacekit/KOMTXT__-webfont.woff') format('woff'),
         url('../fonts/Komika-Text-fontfacekit/KOMTXT__-webfont.ttf') format('truetype'),
         url('../fonts/Komika-Text-fontfacekit/KOMTXT__-webfont.svg#KomikaTextRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
* {
padding: 0;
margin: 0;
font-family: KomikaTextRegular, arial;
}
body {
background-image: url('../images/texture.png');
}
div#header {
padding: 2px;
color: white;
/* Fallback for IE/Non-CSS3 Browsers */
background: rgba(118, 149, 53, 1);
/* Firefox Gradient */
background: -moz-linear-gradient(top, rgba(156, 199, 70, 1), rgba(118, 149, 53, 1));
/* Webkit Gradient for Chrome/Safari */
background: -webkit-linear-gradient(rgba(156, 199, 70, 1), rgba(118, 149, 53, 1));
border: 1px solid #777;
box-shadow: 0px 2px 3px #bbb, inset 0px 1px 0px rgba(255,255,255,0.3), inset 0px 6px 0px rgba(255,255,255,0.2);
}
div#header h1 {
float: left;
margin-left: 5px;
}
div#header h1 a {
color: white;
text-decoration: none;
}
div#header h3 {
float: right;
margin-top: 12px;
margin-right: 15px;
}
div#wrapper {
position: relative;
width: 368px;
margin: 25px auto;
}
div#stageWrapper {
position: absolute;
left: 24px;
top: 118px;
width: 320px;
height: 480px;
overflow: hidden;
/*-webkit-transition: width 0.5s;
-moz-transition: width 0.5s;*/
}
div#stage {
position: relative;
width: 320px;
height: 480px;
overflow: hidden;
/* Fallback for IE/Non-CSS3 Browsers */
background: #F1EBD6;
/* Firefox Gradient */
background: -moz-linear-gradient(top, #F7EDCB, #F1EBD6, #F7EDCB);
/* Webkit Gradient for Chrome/Safari */
background: -webkit-linear-gradient(#F7EDCB, #F1EBD6, #F7EDCB);
-webkit-transition: left 0.5s;
-moz-transition: left 0.5s;
}
div#stage2 {
position: relative;
top: -480px;
left: 320px;
width: 320px;
height: 480px;
overflow: auto;
/* Fallback for IE/Non-CSS3 Browsers */
background: #F1EBD6;
/* Firefox Gradient */
background: -moz-linear-gradient(top, #F7EDCB, #F1EBD6, #F7EDCB);
/* Webkit Gradient for Chrome/Safari */
background: -webkit-linear-gradient(#F7EDCB, #F1EBD6, #F7EDCB);
-webkit-transition: left 0.5s;
-moz-transition: left 0.5s;
}
div#stage3 {
position: relative;
top: -960px;
left: 640px;
width: 320px;
height: 480px;
overflow: auto;
/* Fallback for IE/Non-CSS3 Browsers */
background: #F1EBD6;
/* Firefox Gradient */
background: -moz-linear-gradient(top, #F7EDCB, #F1EBD6, #F7EDCB);
/* Webkit Gradient for Chrome/Safari */
background: -webkit-linear-gradient(#F7EDCB, #F1EBD6, #F7EDCB);
-webkit-transition: left 0.5s;
-moz-transition: left 0.5s;
}
div#searchTitle {
text-align: center;
}
div#searchTitle h2 {
margin-top: 5px;
}
#backToSearch, #backToRecipes {
font-size: 1em;
margin: 3px;
}
#backToRecipesWrapper {
text-align: center;
margin-bottom: 10px;
}
#searchTerm {
display: inline;
}
#recipeName {
display: inline;
font-size: 1.3em;
}
/* Custom horizontal rule */
.shadowRule {
height: 1px;
margin: 6px 10px;
background: steelblue;
box-shadow: 0px 0px 3px steelblue;
}
div#searchWrapper {
margin: 10px 0;
text-align: center;
}
div#searchWrapper input#searchBar {
position: relative;
width: 290px;
padding: 5px;
font-size: 1.3em;
border: 1px solid black;
border-radius: 3px;
box-shadow: 0 0 3px black;
color: #777;
}
div#searchWrapper img#clearIcon {
position: absolute;
right: 10px;
height: 35px;
cursor: pointer;
display: none;
}
div.panel {
width: 290px;
margin: 0 auto;
padding: 5px;
border-radius: 7px;
text-align: center;
font-size: 1.1em;
color: white;
/* Fallback for IE/Non-CSS3 Browsers */
background: rgba(58, 124, 203, 1);
/* Firefox Gradient */
background: -moz-linear-gradient(top, rgba(58, 124, 203, 1), rgba(44, 93, 152, 1));
/* Webkit Gradient for Chrome/Safari */
background: -webkit-linear-gradient(rgba(58, 124, 203, 1), rgba(44, 93, 152, 1));
box-shadow: inset 0px 1px 0px rgba(255,255,255,0.3), inset 0px 6px 0px rgba(255,255,255,0.2);
}
div.panelHead {
cursor: pointer;
}
div.panelContent {
margin-top: 10px;
display: none;
}
div.panelContent img.timer {
cursor: pointer;
width: 60px;
margin: 0 10px;
}
img#timer1 {
width: 40px;
}
img#timer2 {
width: 50px;
}
div.panelContent span.dollar {
cursor: pointer;
margin: 0 15px;
}
span#dollar1 {
font-size: 2em;
}
span#dollar2 {
font-size: 2.5em;
}
span#dollar3 {
font-size: 3em;
}
div.panelContent span.unselected {
color: #ddd;
}
div.panelContent span.selected {
color: rgba(163, 193, 103, 1);
}
ul#resultList, ul#resultList2 {
list-style: none;
}
li.resultItem {
width: 288px;
margin: 10px auto;
padding: 5px;
font-size: 1.5em;
cursor: pointer;
/* Default to light green background */
background-color: rgba(218, 253, 167, 1);
border: 1px solid #777;
border-radius: 3px;
box-shadow: 0px 2px 3px #bbb;
}
li.resultItem img.thumbnail {
width: 60px;
vertical-align: middle;
margin-right: 15px;
border: 1px solid black;
}
li.vegetable {
/* Fallback for IE/Non-CSS3 Browsers */
background: rgba(218, 253, 167, 1);
/* Firefox Gradient */
background: -moz-linear-gradient(top, rgba(245, 255, 230, 1), rgba(218, 253, 167, 1));
/* Webkit Gradient for Chrome/Safari */
background: -webkit-linear-gradient(rgba(245, 255, 230, 1), rgba(218, 253, 167, 1));
}
li.fruit {
/* Fallback for IE/Non-CSS3 Browsers */
background: rgba(158, 234, 255, 1);
/* Firefox Gradient */
background: -moz-linear-gradient(top, rgba(228, 249, 255, 1), rgba(158, 234, 255, 1));
/* Webkit Gradient for Chrome/Safari */
background: -webkit-linear-gradient(rgba(228, 249, 255, 1), rgba(158, 234, 255, 1));
}
li.meat {
/* Fallback for IE/Non-CSS3 Browsers */
background: rgba(255, 190, 134, 1);
/* Firefox Gradient */
background: -moz-linear-gradient(top, rgba(255, 235, 219, 1), rgba(255, 190, 134, 1));
/* Webkit Gradient for Chrome/Safari */
background: -webkit-linear-gradient(rgba(255, 235, 219, 1), rgba(255, 190, 134, 1));
}
.highlight {
/* Fallback for IE/Non-CSS3 Browsers */
background: rgba(255, 239, 110, 1) !important;
/* Firefox Gradient */
background: -moz-linear-gradient(top, rgba(255, 248, 197, 1), rgba(255, 239, 110, 1)) !important;
/* Webkit Gradient for Chrome/Safari */
background: -webkit-linear-gradient(rgba(255, 248, 197, 1), rgba(255, 239, 110, 1)) !important;
}
.ingredientHead {
margin-top: 4px;
text-decoration: underline;
}
div.instructionTile {
width: 290px;
margin: 15px auto;
padding: 5px;
border: 1px solid #777;
border-radius: 3px;
box-shadow: 0px 2px 3px #bbb;
/* Fallback for IE/Non-CSS3 Browsers */
background: rgba(218, 253, 167, 1);
/* Firefox Gradient */
background: -moz-linear-gradient(top, rgba(245, 255, 230, 1), rgba(218, 253, 167, 1));
/* Webkit Gradient for Chrome/Safari */
background: -webkit-linear-gradient(rgba(245, 255, 230, 1), rgba(218, 253, 167, 1));
}
div.instructionTile img {
margin-left: 10px;
margin-bottom: 5px;
width: 200px;
vertical-align: top;
border: 1px solid black;
}
div.instructionTile h4 {
margin-top: 10px;
}
div.instructionTile ul {
margin-left: 20px;
}
.floatRight {
float: right;
}
.floatLeft {
float: left;
}
.stepNumber {
margin-top: 5px;
padding: 10px;
border: 1px solid #777;
border-radius: 3px;
box-shadow: 0px 2px 3px #bbb;
/* Fallback for IE/Non-CSS3 Browsers */
background-color: rgba(158, 234, 255, 1);
/* Firefox Gradient */
background: -moz-linear-gradient(top, rgba(228, 249, 255, 1), rgba(158, 234, 255, 1));
/* Webkit Gradient for Chrome/Safari */
background: -webkit-linear-gradient(rgba(228, 249, 255, 1), rgba(158, 234, 255, 1));
}
.extraInformation {
display: none;
}
li.icon {
cursor: pointer;
list-style: none;
width: 18px;
padding: 3px;
}
.specialTerm {
color: rgba(212, 153, 6, 1);
text-decoration: underline;
cursor: pointer;
}
/*
	The group hack is Nicolas Gallagher's mini-version of Thierry Koblentz's "clearfix reloaded"
	Source: http://nicolasgallagher.com/micro-clearfix-hack/
	It is protected under MIT and GNU GPLv2 Licenses.
*/
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

#phone {
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
}
#resetWrapper {
text-align: center;
width: 368px;
margin: -150px auto 0;
padding: 5px;
display: none;
}
#videoWrapper {
position: absolute;
left: -56px;
top: 198px;
width: 480px;
height: 320px;
background-color: #000;
overflow: hidden;
display: none;
}

.vanillaBoxLight {
/* Fallback for IE/Non-CSS3 Browsers */
background: rgba(246, 245, 239, 1);
/* Firefox Gradient */
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1), rgba(246, 245, 239, 1));
/* Webkit Gradient for Chrome/Safari */
background: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(246, 245, 239, 1));
border: 2px solid #AD0300;
border-radius: 6px;
box-shadow: 0px 0px 5px red;
}

/* This class formats the error message that appears when the user searches for a non-existant ingredient */
.noSuchIngredient {
font-size: 1.1em;
width: 246px;
padding: 5px;
margin: 10px auto;
}