BODY
{
	margin: 0;
	padding: 0;
	background-color: #9b9b92;
	font: normal normal 10pt "Segoe UI Regular", "Segoe UI", helvetica, "sans serif";
	color: #222;
}

.container
{
	width: 100%;
}

.content
{
	width: 100%;
}

.fullimage
{
	width: 100%;
	border-bottom: .25vw solid #3f465c;
	border-top: .25vw solid #3f465c;
}


#header_content
{
	max-height: 70px;
	height: 4vw;
	text-align: center;
	z-index: 2000;
	position: relative;
}

	#header_content A
	{
		text-decoration: none;
		display: inline-block;
		margin: .5em 1em;
		padding: .6em 1.2em;
		text-transform: uppercase;
		color: #FFF;
		font: normal normal 1.2vw "times new roman", serif;
		letter-spacing: .26vw;
		min-width: 11vw;
	}

	#header_content A:hover
	{
		background-color: #FFF;
		color: #444;
	}

	#header_content A.selected
	{
		background-color: #223457;
		color: #FFF;
	}

	#header_content A.menu_right
	{
		margin-right: 4em;
	}

	#header_content A.menu_left
	{
		margin-left: 4em;
	}

	#heart_container
	{
		text-align: center;
		margin: 0 40%;
		width: 20%;
		position: absolute;
		top: .2vw;
		z-index: 1800;
	}

	#heart_container IMG
	{
		width: 35%;
	}


#body_content
{
	position: relative;
}

	#body_content P
	{
		text-align: left;
	}


#counter
{
	margin: -3vw auto 0 auto;
	text-align: center;
	width: 100%;
	max-width: 900px;
	z-index: 2000;
	position: relative;
}

#counter SPAN
{
	display: inline-block;
	color: #FFF;
	font: normal bold 2vw "arial black", helvetica;
	padding: .1em .4em;
	background-color: #333;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
	text-align: center;
	background: #000000; /* Old browsers */
	background: -moz-linear-gradient(top, #000000 0%, #333333 50%, #131313 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #000000 0%,#333333 50%,#131313 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #000000 0%,#333333 50%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
	margin: 0 .1em 0 0;
}

#date
{
	width: 100%;
	text-align: center;
	margin: 1.6em auto 0 auto;
	max-width: 450px;
}

#date IMG
{
	width: 100%;
}


#rule32
{
	position: absolute;
	bottom: .1vw;
	right: .5vw;
	text-align: right;
	font: normal normal .5vw tahoma, helvetica;
	color: #888;
}


#overlay_container
{
	width: 100%;
	text-align: center;
	position: absolute;
	top: .4vw;
	height: 68%;
	display: none;
	z-index: 1500;
}

	#overlay
	{
		background: #FFF;
		opacity: .94;
		width: 94%;
		padding: 1% 3%;
		max-width: 1100px;
		height: 98%;
		margin: 0 auto;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
		-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
		box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
		border: 2px solid #9b9b92;
		z-index: 1500;
		position: relative;
	}

	#overlay A.close_x, #overlay A.close_x:visited
	{
		background: url(/_art/x.png) #FFF no-repeat center center;
		display: block;
		width: 2vw;
		height: 2vw;
		text-decoration: none;
		top: 1vw;
		right: 1vw;
		position: absolute;
		z-index: 3000;
		min-height: 30px;
		min-width: 30px;
	}

	#overlay A.close_x:hover
	{
		background-color: #9b9b92;
	}


H2
{
	color: #223457;
	text-align: left;
	font: normal normal 1.6em "segoe ui semibold", helvetica;
	margin-bottom: 0;
}

H3
{
	color: #223457;
}

H4, SPAN.name B
{
	color: #5f5f5a;
	font-size: 1.2em;
}


.column_third
{
	width: 27%;
	margin: 0 1% 0 1%;
	padding: 1% 2%;
	float: left;
}

	.column_third IMG
	{
		width: 85%;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
		border: 2px solid #9b9b92;
		max-height: 240px;
	}

	.column_third P
	{
		line-height: 1.5em;
	}

	.column_third.indent
	{
		margin-left: 17%;
	}


.column_quarter
{
	width: 21%;
	margin: 1em .5% 0 .5%;
	padding: 1% 1%;
	float: left;
}

	.column_quarter H3
	{

	}

#registry_info_boilerplate
{
	width: 70%;
	margin: 2em 10%;
	border: 3px solid #EEE;
	height: 50%;
	text-align: center;
	padding: 10% 5% 0 5%;
}

#registry_info_boilerplate EM
{
	display: block;
	font-size: 1.2em;
	margin-top: 1em;
}


#registry_info
{
	width: 24%;
	height: 80%;
	float: left;
	margin: 2em 0 0 0%;
	font-size: 1.2em;
	font-style: italic;
	background: url(/_art/gift-poem.png) no-repeat left bottom;
	background-size: 100%;
}

#registry_info EM
{
	text-align: left;
	text-indent: .5em;
	display: block;
	font-size: .9em;
	margin-top: .8em;
	width: 90%;
}

#registry_info P
{
	margin: .8em 0 0 0;
}

#registry_gifts
{
	width: 70%;
	float: left;
	margin: 2em 0 0 4.8%;
	overflow-y: scroll;
}


.registry_gift
{
	min-height: 120px;
	text-align: left!important;
	background: url() no-repeat center top;
	background-size: 100%;
	border: 1px solid #DDD;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
	vertical-align: bottom;
	position: relative;
}


.registry_gift H3
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 97%;
	margin: 0;
	padding: .3em 1% .3em 2%;
	background-color: #DDD;
	height: 2.6em;
}

.registry_gift:hover
{
	border-color: #9b9b92;
	cursor: pointer;
}

.registry_gift:hover H3
{
	background-color: #EEE;
}



#registry_gift_zoom
{
	position: relative;
	border: 1px solid #6a758a;
	padding: 2% 50px;
	min-height: 200px;
	height: 80%;
}

#registry_gift_zoom IMG
{
	float: right;
	width: 45%;
	margin: 0 0 0 5%;
}

.registryzoom_desc
{

}

.registryzoom_amount
{
	position: absolute;
	bottom: 2em;
	left: 50px;
}

.registryzoom_store
{
	margin-top: 1em;
}

.registryzoom_selected
{

}

A.button, A.button:visited
{
	text-decoration: none;
	padding: .5em 1.4em .5em 1.4em;
	background-color: #EEE;
	border: 1px solid #CCC;
}

A.button:hover
{
	background-color: #F2F2F2;
	border-color: #DDD;
}

.registryzoom_amount .button
{
	margin-right: 2em;
}


#registry_gift_zoom A.prev
{
	background: url(/_art/arrow-left.png) no-repeat center top;
	position: absolute;
	top: 45%;
	left: 0%;
	display: block;
	width: 40px;
	height: 40px;
	text-decoration: none;
}

#registry_gift_zoom A.next
{
	background: url(/_art/arrow-right.png) no-repeat center top;
	position: absolute;
	top: 45%;
	right: 0%;
	display: block;
	width: 40px;
	height: 40px;
	text-decoration: none;
}

#registry_gift_zoom A.prev:hover, #registry_gift_zoom A.next:hover
{
	background-position: center bottom;
}


#registry_gifts_selected
{
	margin-bottom: 3em;
}

#registry_gifts_selected H4
{
	margin-bottom: 0;
}

#registry_gifts_selected .registry_gift H3
{
	background: url(/_art/checkmark-white.png) #223457 no-repeat bottom right;
	color: #FFF;
}


.input
{
	text-align: left;
	vertical-align: middle;
	height: 2.4em;
}


SPAN.col_name
{
	width: 20%;
	display: inline-block;
	margin-right: 2.5%;
}

	SPAN.col_name B
	{
		display: inline-block;
		width: 20px;
		color: #333;
	}


SPAN.col_attending
{
	width: 15%;
	display: inline-block;
	margin-right: 2.5%;
}

SPAN.col_food
{
	width: 25%;
	display: inline-block;
}

SPAN.col_food INPUT
{
	position: absolute;
	margin-top: -.5em;
}

.input LABEL
{
	display: inline-block;
	margin-right: 6%;
}

.input LABEL.yes
{

}

.input INPUT[TYPE="RADIO"]
{
	width: 1.3vw;
	height: 1.3vw;
	vertical-align: middle;
}

.input INPUT[TYPE="TEXT"]
{
	padding: .5em;
	width: 96%;
	font: normal normal 1em "Segoe UI Regular", "Segoe UI", helvetica, "sans serif";
	color: #222;
}

.input INPUT[TYPE="TEXT"].guestinput
{
	width: 80%;
	border: 0;
	border-bottom: 1px solid #CCC;
	padding-left: 0;
	padding-top: 0;
	/* outline-color: none; */
	outline-width: 0;
}

.notbringing
{
	cursor: pointer;
}

.input INPUT[TYPE="TEXT"].foodinput
{
	max-width: 25%;
}

.input INPUT[TYPE="TEXT"]#emailentry
{
	max-width: 300px;
}

P.button
{
	margin-top: 2em;
	margin-left: 21%;
	margin-bottom: 4em;
}

INPUT[TYPE="BUTTON"]
{
	padding: .6em 1.4em .5em 1.4em;
	margin: 0 1%;
}

.dietaryinput
{
	display: none;
}

.overlay_right_img
{
	/* position: absolute; */
	/* bottom: 4vw; */
	right: 3vw;
	width: 24%;
	float: right;
	margin-top: -2vw;
}

.col_name B.success
{
	color: #080;
}

.col_name B.failed
{
	color: #800;
}



.itinerary_dot
{
	width: 19.8%;
	padding: 0;
	margin : 2vw 0;
	float: left;
	max-height: 400px;
	min-height: 400px;
	height: 400px;
	background: url(/_art/timeline.png) no-repeat center center;
	position: relative;
	text-align: center;
	/* border: 1px solid #000; */
}

.itinerary_dot DIV
{
	position: absolute;
	bottom: 60%;
	width: 100%;
	padding-bottom: 3em;
}

.itinerary_dot.bottom DIV
{
	top: 60%;
	bottom: auto;
	padding-bottom: 0;
}

.itinerary_dot P
{
	text-align: center!important;
}

.itinerary_dot H5
{
	color: #223457;
	font-size: 1.2em;
}

.itinerary_dot B
{
	font-size: 1.6em;
	color: #333;
	display: block;
}



.itinerary_dot.top B
{
	position: absolute;
	bottom: 0vw;
	width: 100%;
}


.itinerary_dot.start
{
	background-image: url(/_art/timeline-left.png);
}

.itinerary_dot.end
{
	background-image: url(/_art/timeline-right.png);
}


.loading
{
	display: inline-block;
	padding: 5px 0 5px 30px;
	background: url(/_art/loading.gif) no-repeat left center;
}

.aleft, #body_content P.aleft { text-align: left; }
.acenter , #body_content P.acenter { text-align: center; }
.aright, #body_content P.aright { text-align: right; }

.mt1 { margin-top: 1em; }
.mt2 { margin-top: 2em; }
.mt3 { margin-top: 3em; }

.postmarkimage
{
	width: 40%;
	float: right;
}



.mobile_y, .smallmobile_y { display: none!important; }


.portrait_y, .landscape_y
{
	display: none;
}

.portrait .portrait_y
{
	display: inherit;
}

.landscape .landscape_y
{
	display: inherit;
}


/* 800 */

@media screen and (max-width: 800px)
{
	BODY
	{
		font-size: .8em;
	}
}



/* 770 */

@media screen and (max-width: 700px)
{
	BODY
	{
		font-size: .7em;
	}

	.mobile_y { display: inherit!important; }
	.mobile_n { display: none!important; }

	#header_content
	{
		height: 8.6vw;
		max-height: 100px;
	}

	#header_content A
	{
		font-size: 3.4vw;
		margin: 0;
		padding: 2.4vw;
		letter-spacing: .1vw;
	}

	#header_content A.menu_right
	{
		margin-right: 0;
	}

	#header_content A.menu_left
	{
		margin-left: 0;
	}

	#heart_container
	{
		top: 6.6vw;
	}


	H2
	{
		font-size: 1.2em;
	}

	H3
	{
		font-size: 1.05em;
		min-height: 2.6em;
	}

	.itinerary_dot
	{
		min-height: 320px;
		max-height: 320px;
		height: 320px;
	}

	.itinerary_dot H5
	{
		font-size: 1.05em;
		margin: .5em 0;
	}

	#counter SPAN
	{
		font-size: 5vw;
	}

	#date
	{
		width: 75%;
	}

	.column_quarter
	{
		width: 45%;
	}

	#registry_info
	{
		font-size: 1em;
		line-height: 1.2em;
	}

	.registry_gift
	{

	}


}


@media screen and (max-width: 500px)
{

	.smallmobile_n
	{
		display: none!important;
	}

	.smallmobile_y
	{
		display: inherit!important;
	}


	SPAN.col_name
	{
		width: 25%;
	}

	SPAN.col_name B
	{
		width: 10px;
	}

	SPAN.col_attending
	{
		width: 24%;
	}

	SPAN.col_food
	{
		width: 43%;
	}

	.input INPUT[TYPE="RADIO"]
	{
		width: 2.5vw;
		height: 2.5vw;
	}

	.input INPUT[TYPE="TEXT"].foodinput
	{
		max-width: 40%;
	}

	.column_third.indent
	{
		margin-left: inherit;
	}

	.column_third
	{
		width: 42%;
		max-width: 350px;
	}

	.column_third IMG
	{
		width: 50%;
	}

}






	.portrait .itinerary_dot
	{
		min-height: auto;
		max-height: none;
		height: auto;
		display: block;
		width: auto;
		float: none;
		background-size: 7%!important;
		background: url(/_art/timeline-mobile.png) no-repeat left top;
		margin: 0;
		padding-top: 1vw;
		padding-bottom: 1vw;
		text-align: left!important;
		padding-left: 12vw;
	}

	.portrait .itinerary_dot DIV
	{
		position: relative;
		bottom: inherit;
		padding-bottom: 0;
	}

	.portrait .itinerary_dot H5
	{
		margin: .2em 0;
	}

	.portrait .itinerary_dot P
	{
		text-align: left!important;
		margin: 0;
	}

	.portrait .itinerary_dot B
	{
		margin-top: .4em;
		font-size: 1.2em;
	}

	.portrait .itinerary_dot.top B
	{
		position: relative;
		bottom: auto;

	}

	.portrait .itinerary_dot.start
	{
		background-image: url(/_art/timeline-mobile-top.png);
	}

	.portrait .itinerary_dot.end
	{
		background-image: url(/_art/timeline-mobile-bottom.png);
	}