<!DOCTYPE html>
<html>
<head>
	<title>Puni Lunch</title>
	<link rel="stylesheet" type="text/css" href="../../stylesheets/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="../../stylesheets/common.css">
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="background-color: beige">
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-8 col-md-offset-2 well">
				<img src="../../images/caf.jpg" class="img-responsive center-block">
				<p class="text-center" id="text">
					Leaving your bag behind, you went to the cafeteria hoping that there are seats available. Why would you eat your lunch at the cafeteria? Think about the other Punis who don't have boxed lunches. While trying to answer that ridiculous question, you arrived at the cafeteria only to find out that it was completely empty. Strange. As you approach the counter, a round figure appears from the kitchen.
				</p>
				<p class="text-left" id="text">
					Kitchen Puni: "Welcome! I see you have a boxed lunch with you. Care for a drink?"
				</p>
				<ul id="choice">
					<li>
						<a href="page1a.html" id="choice">
							Yes.
						</a>
					</li>
					<li>
						<a href="page3no.html" id="bad">	No.
						</a>
					</li>
				</ul>			
			</div>
		</div>
	</div>
</body>
</html>