/* 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;
}


/* Remove default margin and padding. Also, set the font. */
* {
margin: 0;
padding: 0;
font-family: KomikaTextRegular, arial;
}


/* Page Header */
div#header {
padding: 2px;
/* Fallback for IE/Non-CSS3 Browsers */
background: rgba(156, 199, 70, 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 {
margin-left: 5px;
}

div#header h1 a {
color: white;
text-decoration: none;
}


/* Wrapping div for the menu bar */
div#menuBar {
width: 984px;
margin: 30px auto 0;
padding: 10px;
}

/* Wrapping div for the buttons */
div#menuButtons {
float: left;
}

/* Menu Buttons */
div#menuButtons a {
color: black;
text-decoration: none;
padding: 3px 103px;
font-size: 1.3em;
margin-left: 10px;
}

/* Wrapping div for the search terms */
div#searchChain {
float: right;
}

/* Label for the search terms */
.chainTileLabel {
display: inline;
margin: 5px;
padding: 5px 0;
}

/* Tiles for each search term */
.chainTile {
display: inline;
margin: 5px;
padding: 5px;
background-color: rgba(218, 253, 167, 1);
border: 1px solid #777;
border-radius: 3px;
box-shadow: 0px 2px 3px #bbb;
}


/* Wrapping div for the main content */
div#contentWrapper {
width: 1008px;
margin: 15px auto 25px;
}


/* Style for the navigational and recipe divs */
.vanillaBox {
/* 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);
border: 2px solid black;
border-radius: 15px;
box-shadow: 0px 0px 5px #888;
}

/* Style for the ingredient lists and directions */
.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 black;
border-radius: 6px;
box-shadow: 0px 0px 5px #888;
}


/* div containing the navigational controls (ingredient search) */
div#controls {
float: left;
width: 300px;
min-height: 550px;
text-align: center;
}

/* input text search bar */
div#controls input#searchBar {
width: 250px;
font-size: 1.15em;
margin: 12px 0 0;
padding: 3px;
border-radius: 3px;
}

/* The div that wraps the ingredient <ul> */
div#ingredientMenu {
text-align: left;
}

/* The menu populated by ingredients */
ul#ingredientItems {
list-style: none;
}

/* An ingredient item/button */
li.ingredientItem {
width: 250px;
margin: 10px auto;
padding: 5px;
font-size: 1.2em;
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;
}

/* The following 3 declarations are style for different food groups */
.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));
}
.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));
}
.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));
}

/* Constrain the size of the ingredient's thumbnail */
li.ingredientItem img.thumbnail {
width: 50px;
height: 35px;
vertical-align: middle;
margin-right: 15px;
border: 1px solid black;
}

/* 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;
}


/* This div contains the recipe information */
div#recipeDisplay {
float: left;
width: 660px;
height: 530px;
margin-left: 20px;
padding: 10px;
overflow: auto;
}

/* The div containing the recipe's title */
div#titleWrapper {
margin-bottom: -5px;
}

/* The title of the recipe */
div#titleWrapper h2 {
float: left;
margin-left: 5px;
}

/* The secondary title of the recipe (optional) */
div#titleWrapper h3 {
float: right;
margin-right: 5px;
font-weight: normal;
}

/* The div that contains the actual recipe details */
div#recipeWrapper {
margin-top: 20px;
}

/* The div that contains an image of the recipe */
div#photoBox {
float: left;
margin-left: 15px;
}

/* The recipe image itself */
div#photoBox img {
width: 350px;
border: 1px solid black;
}

/* The div containing a recipe's ingredients */
div#ingredientBox {
float: right;
margin-top: -10px;
margin-right: 15px;
}

/* The <ul> containing each ingredient item */
div#ingredientBox ul {
padding: 5px;
list-style: none;
font-size: 1.3em;
}

/* Declaration for the ingredient items */
div#ingredientBox ul li {
padding: 3px;
border-radius: 3px;
}


/* Used to highlight icons upon selection */
.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;
}

/* Also used to highlight icons upon selection */
.highlight2 {
cursor: pointer;
/* Fallback for IE/Non-CSS3 Browsers */
background: rgba(255, 239, 110, 1);
/* Firefox Gradient */
background: -moz-linear-gradient(top, rgba(255, 248, 197, 1), rgba(255, 239, 110, 1));
/* Webkit Gradient for Chrome/Safari */
background: -webkit-linear-gradient(rgba(255, 248, 197, 1), rgba(255, 239, 110, 1));
}

/* Additional hover class to color highlighted items red for deselection */
.highlight2:hover {
/* Fallback for IE/Non-CSS3 Browsers */
background: rgba(255, 147, 124, 1);
/* Firefox Gradient */
background: -moz-linear-gradient(top, rgba(255, 212, 204, 1), rgba(255, 147, 124, 1));
/* Webkit Gradient for Chrome/Safari */
background: -webkit-linear-gradient(rgba(255, 212, 204, 1), rgba(255, 147, 124, 1));
}


/* Constrain the width of the ingredient list */
div#ingredientBox ul {
width: 220px;
}

/* The div containing the recipe's directions */
div#directionsBox {
margin: 10px 15px 0;
}

/* The recipe's directions */
div#directionsBox div {
padding: 5px;
font-size: 1.2em;
}
div#directionsBox ul {
margin-left: 25px;
}


/* A custom horizontal rule */
.shadowRule {
height: 1px;
margin: 6px 0;
background: steelblue;
box-shadow: 0px 0px 3px steelblue;
}


/* This div is used for dragging and dropping ingredients */
div#mixingBowl {
float: left;
width: 660px;
height: 530px;
margin-left: 20px;
padding: 10px;
text-align: center;
overflow: auto;
border: 2px solid black;
border-radius: 15px;
/* Fallback for IE/Non-CSS3 Browsers */
background: rgba(44, 93, 152, 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: 0px 0px 5px #888, inset 0px 1px 0px rgba(255,255,255,0.3), inset 0px 6px 0px rgba(255,255,255,0.2);
color: white;
}

/* This class is added to #mixingBowl when the user is dragging an ingredient and hovers over the div */
.mixingBowlHover {
/* Fallback for IE/Non-CSS3 Browsers */
background: rgba(44, 93, 152, .9) !important;
/* Firefox Gradient */
background: -moz-linear-gradient(top, rgba(58, 124, 203, .9), rgba(44, 93, 152, .9)) !important;
/* Webkit Gradient for Chrome/Safari */
background: -webkit-linear-gradient(rgba(58, 124, 203, .9), rgba(44, 93, 152, .9)) !important;
}

/* This is for the instructions inside the #mixingBowl div */
div#mixingBowl p {
margin-top: 80px;
margin-bottom: 30px;
font-size: 1.8em;
font-weight: bold;
}

/* This formats the mixing bowl image */
div#mixingBowl img {
width: 400px;
border: 1px solid black;
}


/* This formats an error message when there are no more results available */
#noResults {
margin: 20px;
text-align: center;
font-size: 1.4em;
}
#noResults p {
margin-bottom: 20px;
}

/* This positions the "reset the search" button */
#resetButton {
margin: 10px 50px;
}


/* This formats the page's footer */
div#footer {
text-align: center;
}


/* For validation purposes, lists must be populated. This prevents the required item from being displayed */
#requiredItem {
display: none;
}


/*
	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) */
}