/* CSS styling based on recipes from https://www.foodnetwork.com/ */

/* Style rules applied to elements AS A WHOLE */

body
{
	background-color: #e1f7ff;
	background-attachment: fixed;
	width: 800px;
	margin: auto;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	padding: 10px;
	font-family: Lato, sans-serif
}

p
{
	line-height: 160%;
}


/* Style rules applied to groups of elements by CLASS */

.header
{
	font-family: Georgia, serif;
}

.underlined
{
	text-decoration: underline;
}

.info-table-cell
{
	border: 2px solid lightgray;
	padding: 15px;
}

.good
{
	color: green;
}

.bad
{
	color: red;
}

.direction
{
	line-height: 180%;
}

.left-table-cell
{
	padding: 15px;
	vertical-align: top;
	width: 30%;
}

.right-table-cell
{
	padding: 15px;
	vertical-align: top;
	width: 70%;
}


/* Style rules applied to elements by ID */

#main-header
{
	text-align: center;
	font-size: 42px;
}

#bad-pancake-image
{
	width: 60%;
	float: left;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
}

#info-paragraph
{
	padding-right: 20px;
	padding-bottom: 20px;
}

#info-table
{
	border: 2px solid lightgray;
	border-collapse: collapse;
	width: 100%;
}

#ingredients-directions-media-table
{
	border-collapse: collapse;
	width: 100%;
}

#gordon-ramsay-image
{
	width: 100%;
}

#youtube-video-container
{
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
}

#youtube-video
{
	/* fill the container it's placed in */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}