/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
	bottom: 0;
    z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
    padding-right: 0;
    padding-left: 0;
}
.navbar-wrapper .navbar {
    padding-right: 15px;
    padding-left: 15px;
}
.navbar-wrapper .navbar .container {
    width: auto;
    height: auto;
}
.navbar-brand {
    size: auto;
    padding-bottom: 3%;
    padding-top: 3%;
}

/* TWEAK THE IMAGE
------------------------------------------------ */

#recipe-image{
	max-width:100%;
	height: auto;
}

#main-recipe-pane{
	float: right;
}

#right-recipe-pane{
	float: left
}

.shadow {
	box-shadow: 5px 5px 5px #888888
}

/* RECIPE DIV TWEAKS
------------------------------------------------ */
.alt-recipe{
	padding-top: 5px;
	margin-bottom: 15px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.green{
	background-color: rgb(153,204,153);
}

.red{
	background-color: rgb(204,153,153);
}

.purple{
	background-color: rgb(204,153,204);
}

.grey{
	background-color: rgb(153,153,153);
}

.white-text{
	color: rgb(255,255,255);
}

#recipe-data{
	padding-top: 40px;
	margin-top: 20px;
}

.data-div{
	background-color: rgb(204,204,204);
	margin-right: 10px;
	padding-top: 15px;
	border-radius: 5px;
}

#method{
	padding-left: 10px;
}


.bold{
	font-weight: 400;
}

.affix {
}

@media (min-width: 1200px) {
  .affix {
    width: 263px;
  }         
}