/*<-#-#-#-#-#DRINKS PROFILE STYLES#-#-#-#-#->*/

/*INFO*/
/*This style sheet includes styles used by the drinks profile pages*/
/*The same styles are used for every profile*/

/*<--Text Formatting-->*/

h2.sectionTitles {
	margin: 0px;
	padding: 5px 0px 5px 2%;
	font-size: 1.2rem;
	background-color: white;
	border-top: dashed #9a0000 3px;
	border-bottom: dashed #9a0000 3px;
}

p.drinkProfileText {
	margin: 0px;
	padding: 5px 2% 5px 2%;
}	

/*<----------Left Profile Information---------->*/

div.leftProfileInfo {
	margin: 0px;
	margin-left: 2%;
	padding: 0px;
	width: 30%;
	border-left: solid #9a0000 3px;
	border-right: solid #9a0000 3px;
	float: left;
	overflow: hidden;
	border-bottom: dashed #9a0000 3px;
	background-color: rgba(255, 255, 255, 0.5);
}

/*<--Drink GIF-->*/

div.drinkGIF {
	margin: 0px;
	padding: 0px;
	width: 100%;
}

img.drinkGIF {
	margin: 10px 0px 10px 0px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	height: 200px;
	display: block;
}

/*<--Drink Stats-->*/

div.drinkStats {
	margin: 0px;
	margin-left: 2%;
	padding: 0px;
}	

/*<----------Center Profile Information---------->*/

div.centerProfileInfo {
	margin: 0px;
    margin-left: 2%;
	padding: 0px;
	width: 30%;
	border-left: solid #9a0000 3px;
	border-right: solid #9a0000 3px;
	float: left;
	overflow: hidden;
	border-bottom: dashed #9a0000 3px;
	background-color: rgba(255, 255, 255, 0.5);
}

/*<--Drink Nutrition-->*/

div.drinkNutrition {
	margin: 0px;
	padding: 5px 2% 5px 2%;
}

table.drinkNutrition, th, td {
	margin: 0px;
	padding: 0px;
	text-align: left;
	border: solid 1px black;
	border-collapse: collapse;
}

#nutrient {
	width: 60%;
}

#amount {
	width: 40%;
}	

/*<----------Right Profile Information---------->*/

div.rightProfileInfo {
	margin: 0px;
	margin-left: 2%;
	padding: 0px;
	width: 30%;
	float: left;
	border-left: solid #9a0000 3px;
	border-right: solid #9a0000 3px;
	overflow: hidden;
	border-bottom: dashed #9a0000 3px;
	background-color: rgba(255, 255, 255, 0.5);
}

/*<----------Media Queries for PC Version---------->*/

@media only screen and (max-width:650px){
	div.leftProfileInfo {
		width: 45%;
	}
	
	div.centerProfileInfo {
		width: 45%;
		float: right;
	}
	
	div.rightProfileInfo {
		width: 45%;
		margin-top: -4px;
	}
}

@media only screen and (max-width:450px){
	div.leftProfileInfo {
		width: 95%;
	}
	
	div.centerProfileInfo {
		width: 95%;
		float: left;
		margin-top: -4px;
	}
	
	div.rightProfileInfo {
		width: 95%;
		margin-top: -4px;
	}
}

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

/*<--NONE YET-->*/

}