html {
	height: 100%;
	margin: 0;
	padding: 0;
}

header {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	height: 100%;
	margin: 0;
	padding: 0;
	padding-top: 50px;
}

.starter-template {
  text-align: center;
}

/* USER INTERFACE */
.logo {
	font-size: 300%;
}

.navbar {
	font-family: "Josefin Sans";
	color: #F6B4D0;
}

.searchbar {
	font-family: "Josefin Sans";
	color: #F6B4D0;
	font-size: 150%;
	width: 100%;
}

.nav-tabs {
    border-bottom: none;
}
.nav-tabs a {
	font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
	font-size: 150%;
	text-align: center;

	font-size: 200%;
}

.navRight {
	font-size: 150%;
}

@media only screen and (max-width: 800px) {
	.navbar {
		position: fixed;
		top: auto;
		bottom: 0px;
		margin-bottom: 0px;
	}
	.logo, .navRight {
		width: 33%;
		float: left;
		font-size: 150%;
	}
}


.btn {
	font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
	font-size: 150%;
	border-radius: 300px;

	padding: 12px 20px;
}
.btn-pink {
	background-color: #F6B4D0;
	border: 2px solid #000;
	color: #000;
}
.btn-pink:hover {
	border-radius: 300px;
	background-color: #B3E6FF;
	border: 2px solid #000;

	color: #000;
}
.btn-blue {
	background-color: #B3E6FF;
	border: 2px solid #000;
	color: #000;
}
.btn-blue:hover {
	border-radius: 300px;
	background-color: #F6B4D0;
	border: 2px solid #000;

	color: #000;
}

/* MOBILE */
.mobile-tab-bar {
	position: fixed;
	bottom: 0;
	white-space: nowrap;
}

/* MENU PAGE */
.newsfeed {
  padding: 10px 40px;
  text-align: left;
  background-image: url("../../assets/img/backgroundPink.jpg");
}

.sidebar {
  padding: 40px 40px;
  position: fixed;
  right: 0;
  background-color: #b3e6ff;
  border-radius: 5px;
  border: 5px solid white;
}

.sidemap {
  right: 0;
  background-color: #b3e6ff;
  border-radius: 5px;
  border: 5px solid white;
}

.window {
	background-color: white;
	padding: 15px 15px;
	margin-bottom: 20px;
	border-radius: 5px;
}

.foodWindow {
	border: 5px solid #F6B4D0;
}

.menuFoodWindow:hover {
	border-color: #b3e6ff;
}

.accountWindow {
	border: 5px solid #B3E6FF;
}

.food {
	font-size: 140%;
}

.pickUpTime {
	font-size: 100%;
	opacity: .5;
}

.chef {
	font-size: 100%;
}


/* LANDING PAGE */
#intro {
	min-height: 100%;
}
.header-content {
	overflow: hidden;

	width: 100%;
	height: 100%;
	padding-top: 5%;
}
.header-content img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;

	opacity: 0.6;
}

.header-content-left {
	text-align: center;

	margin-left: auto;
	margin-right: auto;

	padding-left: 10%;
	padding-right: 10%;
}
.header-content-left h1 {
	z-index: 2;
	font-size: 400%;
	padding: auto;
	margin-top: 5%;
	margin-bottom: 10%;
}
.header-content-left p {
	z-index: 2;
	font-size: 200%;
}

.header-content-right {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding-left: 50px;
	padding-right: 50px;
}

.signup-box {
	background-color: #F6B4D0;

	margin-left: auto;
	margin-right: auto;
	padding-bottom: 10px;

	border-radius: 5px;
	border: 2px solid #000;
}

#how-comics {
	background-color: transparent;
	height: 100%;
	min-height: 100%;
}
.bg-primary {
	background-color: #b3e6ff;
	height: 100%;
	padding-top: 2%;
}
.bg-primary h1 {
	z-index: 2;
	font-size: 400%;
	margin-bottom: 10%;
}
.bg-primary p {
	z-index: 2;
	font-size: 200%;
}

.tab-pane {
	border-radius: 5px;
	background-color: #B3E6FF;
    /*
	border-left: 5px solid #000;
	border-right: 5px solid #000;
	border-bottom: 5px solid #000;
    */
    border: 2px solid #000;
	outline: none;
	margin-bottom: 0.5%;
}
.comic-tab {
    top: 1px;
    bottom: -1px;
}
.tab-content {
    /* Required for z-index */
    position: relative;
    /* 2 is in front and 0 is behind tab content */
    z-index: 1;
}
#buy-comic {
	background-color: #B3E6FF
}
#sell-comic{
	background-color: #F6B4D0;
}
#buy-comic-tab {
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	border-left: 2px solid #000;
	background-color: #B3E6FF;

    /* buy tab is default selected tab */
    top: 0px;
    bottom: 0px;
    z-index: 2;
}
#sell-comic-tab {
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	border-left: 2px solid #000;
	background-color: #F6B4D0;
}
.comic-panel {
	padding: 2%;
}
.comic-panel img {
	width: 100%;
	height: 100%;
	background-color: white;
	border-radius: 5px;
	border: 2px solid #000;
}
.comic-panel h3 {
	padding: 2%;
	color: black;
}

.container {
	text-align: center;
}

/* LOG-IN PAGE */
/*
#profile-dropdown {
    display: none;
} 
*/

/* DISH PAGE */
.rating {
    float:left;
}

/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
   follow these rules. Every browser that supports :checked also supports :not(), so
   it doesn’t make the test unnecessarily selective */
.rating:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0);
}

.rating:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
}

.rating:not(:checked) > label:before {
    content: '★ ';
}

.rating > input:checked ~ label {
    color: orange;
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: darkorange;
}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
    color: darkorange;
}

.rating > label:active {
    position:relative;
    top:2px;
    left:2px;
}

.starRating {
	color: orange;
	font-size: 28px;

}

.darkStarRating {
	color: #ddd;
	font-size: 28px;
}

/*POST-FOOD PAGE */
.post-form {
  padding: 10px 40px;
  text-align: left;
  background-image: url("../../assets/img/backgroundPink.jpg");
}

.post-form div {
	padding-left: 2%;
	padding-right: 2%;
}

.tag button {
	margin: 2px;
}

.tag button:hover {
	color: red;
}

/* PROFILE PAGE */
.affix{
	top: 0px;
}
/* GOOGLE MAPS */
#map {
height: 400px;
}

.controls {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
border: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 300px;
}

#pac-input:focus {
border-color: #4d90fe;
}

.pac-container {
font-family: Roboto;
}

#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}

#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#target {
width: 345px;
}