body {
	background: #b8c9d9;
}

iframe {
	border: 0px;
	width:400px;
	height:350px;
	background: transparent;
}

.resize{
	width:135px;
	height:auto;
}

.resize{
	width:auto;
	height:135px;
}

#reception{
	position:absolute;
	top:150px;
	left:330px;
	background: transparent;
}

#lodging{
	position:absolute;
	top:150px;
	left:580px;
	background: transparent;
}

#registry{
	position:absolute;
	top:360px;
	left:120px;
	background: transparent;
}

#music{
	position:absolute;
	top:390px;
	left:350px;
	background: transparent;
}

#todo{
	position:absolute;
	top:380px;
	left:580px;
	background: transparent;
}

#content{
	
	font-family:Sans-serif;
	font-size:0.8em;
	position:absolute;
	top:170px;
	left:200px;
	border:1px solid #87AACA;
	padding:10px;
	margin-top:10px;
	width:400px;
	height:350px;
	background: url(../images/transparent.png);	
	background-color: transparent;
}

#container {
	/* declaring left+right margins will center the div. the width must also be declared for this to work */
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
	width: 855px;
	height: 655px;
	background-image: url(../images/beach_bkgd.jpg);
	background-repeat: no-repeat;
	position: relative; /* we're setting the container <div> to position relative not to position the container div itself, but to give the <p> within, which is positioned absolute, it's reference for positioning. */
}

#home {
	background: transparent;
	font-family:Sans-serif;
	font-size:0.9em;
	position:absolute;
	top:350px;
	left:103px;

}

#home a, #home a:visited {
	color: #CC3A45;
	text-decoration: none;
	background: transparent;
}

#home a:hover, #home a:active {
	color: black;
	text-decoration: underline;
	background: transparent;
}