/*
 * Custom Style for Cookbook
 */

/*
 * INDEX
 *  - Color Scheme
 *  - List / Nav
 *  - Sidebar
 *  - Content Block
 *  - Recipe Card
 *
 */

 /* 
 * Color Scheme
 *   Blue   -> #004E66
 *   Yellow -> #FCBE32
 *   Orange -> #FF5F2E
 *   Gray   -> #E1EEF6
 */

 * {
  font-family: 'Open Sans', sans-serif;
}

/* ==========
   LIST / NAV
   ========== */

.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eee;
}

.nav .nav-divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.nav > li > a > img {
  max-width: none;
}

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}
.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
}


/* =======
   SIDEBAR
   ======= */

/* Hide for mobile, show later */
.sidebar {
  display: none;
}
@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #fff;
    border-right: 1px solid #337ab7;
  }
}

.sidebar-title {
	font-size: 2em;
	font-weight: bold;
	margin-top: 0px;
}

/* Sidebar navigation */
.nav-sidebar {
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 20px;
  margin-left: -20px;
}
.nav-sidebar > li > a {
  padding-right: 20px;
  padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  color: #fff;
  background-color: #337ab7;
}

#search-box {
	margin-top: 50px;
}


/* =============
   CONTENT BLOCK
   ============= */

.recipe-block {
	margin-top: 20px;
}   


/* ===========
   RECIPE CARD
   =========== */

.panel-heading {
	font-size: 1.2em;
	font-weight: bold;
}  

.card-icon {
	margin-right: 5px;
} 

.panel-footer {
	margin: auto;
}



/* =====
   MODAL
   ===== */

.modal-title {
	font-size: 1.5em;
	font-weight: bold;
}

.modal-body > h3 {
	text-align: center;
}

.modal-steps-list > li {
	margin-bottom: 5px;
}