
/*<-#-#-#-#-#INGREDIENTS STYLES#-#-#-#-#->*/

/*INFO*/
/*This style sheet includes styles used by the ingredients page*/

/*<----------Description at Top of Page---------->*/

div.pageDescription {
	background-color: rgba(154, 0, 0, 0.5);
}

h1.pageDescription {
	margin: 0px;
	margin-bottom: 5px;
	padding: 5px 1% 0px 1%;
	font-size: 1.5rem;
}	

p.pageDescription {
	margin: 0px;
	padding: 0px 1% 5px 1%;
	margin-bottom: 10px;
}

/*<----------Searchbar and Table---------->*/

/*<--Searchbar-->*/

div.ingredientInput {
	width: 100%;
	margin: 0px;
	padding: 10px 1% 10px 1%;
	background-color: rgba(141, 141, 141, 0.5);
}	

#ingredientInput {
	margin: 0px;
	padding: 5px;
	font-size: 1.2rem;
	color: black;
	border: solid #9a0000 2px;
	width: 50%;
	min-width: 300px;
}

/*<--Table-->*/

div.ingredientsTable {
	margin: 0px;
	margin-top: 10px;
	padding: 10px 2% 10px 2%;
	background-color: rgba(255, 255, 255, 0.5);
}

#ingredientsTable {
	margin: 0px;
	padding: 0px;
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	border: solid black 1px;
}

tr.header th {
	border-bottom: solid black 1px;
	padding: 5px 2% 5px 2%;
	text-align: center;
}

tr.ingredient td {
	border-bottom: solid black 1px;
	padding: 5px 2% 5px 2%;
}

.columnOne {
	width: 30%;
	border-right: solid black 1px;
}

.columnTwo {
	width: 70%;
}	

/*<----------Media Queries for MOBILE (phone and tablet) Version---------->*/

/*<--Device Pixel Ratio Query for All High DPI Screens-->*/

@media only screen and (-moz-min-device-pixel-ratio: 2), 
       only screen and (-o-min-device-pixel-ratio: 2/1), 
       only screen and (-webkit-min-device-pixel-ratio: 2), 
       only screen and (min-device-pixel-ratio: 2) {
		   
/*<--all contents-->*/
	#ingredientInput {
		width: 98%;
		min-width: 0px;
		max-width: 300px;
	}
}
