html, body
{
	overflow-x: hidden;
}

/* Default is British English. It's older (arguably). */
*[lang=en-us]
{
	display: none;
}

a:link, a:visited
{
	color: #4b8077;
}

body
{
	background-image: url(texture.png);
	margin: 0;
	padding: 0;
	font-family: "museo-sans",Arial,sans-serif;
	
}
p
{
	line-height: 1.5;
	font-size: 130%;
	font-family: "museo-sans",Arial,sans-serif;
}
h1,h2,h3,h4,h5,h6
{
	font-family: "de-walpergens-pica","IM Fell Great Primer",serif;
	font-weight: normal;
}
h3,h4,h5,h6
{
 font-family: "museo-sans", Arial;
}
h3.significant-heading
{
font-family: "de-walpergens-pica","IM Fell Great Primer",serif;
font-size: 190%;
}
	
h2
{
	font-size: 240%;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
h3
{
	margin-top: 0.75em;
	margin-bottom: 0.75em;
}
header
{
	background-color: rgb(103,175,164);
}
.language-selection
{
	background-color: rgba(0,0,0,0.3);
	padding: 0.5em;
	font-size: 85%;
	font-family: "museo-sans", Arial, sans-serif;
}
.language-selection ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: block;
	text-align: right;
}
@media screen and (max-width: 580px) 
{
	.language-selection ul
	{
		text-align: center;
	}
}
.language-selection li
{
	display: inline;
}
.language-selection a
{
	color: White;
	text-decoration: none;
}
.language-select-british
{
	margin-right: 1em;
}
.language-select-american
{

}
#language-selection
{
}
.cuddle
{
	max-width: 57em;
	padding: 0 2em;
	margin: 0 auto;
}
#floating-nav .cuddle
{
	padding: 0;
}
#top-nav h2
{
	font-size: 180%;
}
nav
{
	font-size: 200%;
	font-family:	"de-walpergens-pica","IM Fell Great Primer",serif;
	text-align: center;
	margin: 0;
	padding: 1em;
}

nav a:link, nav a:visited
{
	text-decoration: none;
	color: Black;
}

nav a:hover
{
	padding-bottom: 0.3em;
	border-bottom: solid 3px black;
}

nav ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: block;
	text-align: center;
}
nav li
{
	display: inline;
	margin: 0;
	padding: 0;
	margin-right: 1em;
}
@media screen and (max-width: 580px) 
{
	nav .cuddle
	{
		padding: 0;
	}
	nav li
	{
		display: block;
		margin-right: 0;
	}
	nav a:hover
	{
		padding-bottom: 0;
		border-bottom: 0;
		text-decoration: underline;
	}	
}
nav li:last-child
{
	margin-right: 0;
}

.heroes
{
	text-align: center;
	font-size: 200%;
	color: white;
	background-image: url(thehappycouple.png);
	background-position: center 600%;
	background-repeat: no-repeat;
	min-height: 600px;
}

.heroes h1
{
	margin-top: 0;
	padding-top: 0.3em;
	margin-bottom: 0;
	font-family: "de-walpergens-pica","IM Fell Great Primer",serif;
}

.heroes p
{
	margin-top: 0;
	margin-bottom: 0;
/*	font-family: "de-walpergens-pica","IM Fell Great Primer SC",serif; */
}

.the-date
{
 font-family: "de-walpergens-pica","IM Fell Great Primer",serif;
}

@media screen and (max-width: 480px) 
{
	.heroes 
	{
		font-size: 150%;
	}
}

.prose
{
	/*float: left;
	width: 35%;*/
}

.intro 
{
	/*font-size: 150%;*/
}

.in-pictures
{
	float: right;
	width: 55%;
	position: relative;
	margin-left: 5%;
	margin-bottom: 3%;
	border: solid 8px white;
	border-left: solid 10px white;
	transition: width 2s linear;
	-webkit-transition: width 2s linear;
	-moz-transition: width 2s linear;
}

@media screen and (max-width: 670px) 
{
	.in-pictures 
	{
		width: auto;
		float: none;
		max-width: 96%;
		border: solid 2% white;
		margin-left: 0;
		margin-right: 0;
	}	
} 

.outro {
	clear: both;
}

.in-pictures li
{
	position: relative;
}

.in-pictures .prev, .in-pictures .next
{
	position: absolute;
	top: 45%;
	left: -24px;
	background-image: url("nav.png");
    height: 42px;
    width: 40px;
    z-index: 100;
    overflow: hidden;
}

.in-pictures .next span, .in-pictures .prev span
{
	display: block;
	text-indent: 60px;
}

.in-pictures img
{
	width: 100%;
    height: 100%;

}

.in-pictures .next
{
	right: -24px;
	left: auto;
	background-position: 140px center;
}

.in-pictures img
{
	
}

.in-pictures .caption
{
	position: absolute;
	bottom: 1em;
	left: 0;	
}

.in-pictures .top-caption
{
	bottom: auto;
	top: 1em;
}

.in-pictures h3, .in-pictures p
{
	margin: 0;
}

.in-pictures h3 span
{
	background-color: rgb(103,175,164);
	color: white;
	font-size: 110%;
	padding: 0.1em 0.3em 0.1em 0.3em;
	display: inline-block;
}

.in-pictures p span
{
background-color: rgb(103,175,164);
	color: white;
	font-size: 90%;
	padding: 0.1em 0.3em 0.1em 0.3em;
	display: inline-block;
}
@media screen and (max-width: 390px) 
{
	.in-pictures h3 span
	{
		display: none;
	}

	.in-pictures p span
	{
		display: none;
	}
}

.in-pictures .pagination
{
	display: none;
}



/*.prose
{
	float: left;
	width: 45%;
}*/

section
{
	clear: both;
}

.in-pictures ul 
{
	padding: 0;
	margin: 0;
	list-style-type: none;
}

.in-pictures li
{
	padding: 0;
	margin: 0;
}



.legal
{
	font-size: 70%;
}

.legal a, .legal a:hover
{
	color: #738695 !important;
	text-decoration: underline !important;
	border: 0 !important;
}

.rsvp-container
{
	width: 22em;
	position: relative;
	height: 30em;
	float: right;
	width: 31%;
        /*backface-visibility: hidden;*/
	/*overflow: hidden;*/
}

.csstransforms3d .rsvp-container
{
	perspective: 50em;
	-webkit-perspective: 50em;
}

.rsvp h4
{
	text-transform: uppercase;
}

.rsvp h4
{
	margin-top: 0;
	color: #666;	
}

.rsvp h3
{
	font-family: "de-walpergens-pica","IM Fell Great Primer",serif;
	color: #67AFA4;
	font-size: 170%;
	margin-top: 0;
}

.rsvp input[type=submit]
{
	font-size: 90%;
	padding: 0.5em;
	background-color: #67AFA4;
	color: white;
  -webkit-appearance: none;
	width: 100%;
	border: 0;
}

.rsvp input[type=number], .rsvp input[type=text].number
{
	width: 2em;
	border: 2px solid black;
	padding: 0.15em;
	text-align: center;
	font-size: 120%;
	margin-bottom: 0.3em;
	 -webkit-appearance: none;
}

.rsvp
{

	padding: 0;
	text-align: center;
	width: 100%;
  height: 100%;
  position: absolute;
}

.csstransforms3d .rsvp
{
  transform-style: preserve-3d;
  transition: transform 1s;
/*  backface-visibility: hidden;*/
  -webkit-transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 1s;
}

.rsvp .extras-notcoming
{
	display: none;
}

.rsvp .submit
{
	margin-bottom: 0;
}

.rsvp .p-back
{
	margin-top: 0.3em;
}

.rsvp .side
{
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 5%;
	background-color: white;
	background-image: url(texture-invite.png);

}

.csstransforms3d .rsvp .side
{
	backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
	transition: opacity 1s;
	-webkit-transition: opacity 1s;
}

.rsvp .final
{
display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rsvp .secondary, .rsvp .tertiary, .rsvp .quaternary, .rsvp .final
{
	display: none;
}

.rsvp.flipped-1 .secondary
{
	display: block;
}

.rsvp.flipped-2 .tertiary
{
	display: block;
}

.rsvp.flipped-3 .quaternary
{
	display: block;
}

.rsvp.flipped-4 .final
{
	display: block;
}

.rsvp.flipped-4 .primary
{
	display: none;
}

.csstransforms3d .rsvp .secondary, .csstransforms3d .rsvp .tertiary, .csstransforms3d .rsvp .quaternary, .csstransforms3d .rsvp .final
{
	display: block;
}


.csstransforms3d .rsvp .final
{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.csstransforms3d .rsvp.flipped-1
{
   transform: translateX(-100%);
   -webkit-transform: translateX(-100%);
}

.csstransforms3d .rsvp.flipped-2
{
  transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
}

.csstransforms3d .rsvp.flipped-3
{
  transform: rotateY(-180deg) translateX(100%);
  -webkit-transform: rotateY(-180deg) translateX(100%);
}

.csstransforms3d .rsvp.flipped-4
{
  transform: rotateY(-180deg) translateX(100%) translateY(-100%);
  -webkit-transform: rotateY(-180deg) translateX(100%) translateY(-100%);
}

.csstransforms3d .rsvp.flipped-0 .secondary
{
	opacity: 0;
}

.csstransforms3d .rsvp.flipped-1 .primary
{
	opacity: 0;
}

.csstransforms3d .rsvp.flipped-2 .quaternary
{
	opacity: 0;
}

.csstransforms3d .rsvp.flipped-3 .tertiary, .rsvp.flipped-4 .tertiary
{
	opacity: 0;
}

.csstransforms3d .rsvp.flipped-4 .quaternary
{
	opacity: 0;
}

.csstransforms3d .rsvp.flipped-0 .final, .rsvp.flipped-1 .final, .rsvp.flipped-2 .final, .rsvp.flipped-3 .final
{
	opacity: 0;
}

.rsvp .primary
{

}

.csstransforms3d .rsvp .secondary 
{
	transform: translateX(100%);
	-webkit-transform: translateX(100%);
}

.csstransforms3d .rsvp .tertiary
{
	transform: rotateY( 180deg );
	-webkit-transform: rotateY( 180deg );
}

.csstransforms3d .rsvp .quaternary
{
	transform: rotateY( 180deg ) translateX(100%);
	-webkit-transform: rotateY( 180deg ) translateX(100%);
}

.csstransforms3d .rsvp .final
{
	transform: rotateY( 180deg ) translateX(100%) translateY(100%);
	-webkit-transform: rotateY( 180deg ) translateX(100%) translateY(100%);
}

.rsvp .final .coming, .rsvp .final .notcoming
{
	display: none;
}

.rsvp .final .coming
{
  padding-top: 28%;
}

.rsvp .final .notcoming
{
  padding-top: 45%;
}

.rsvp .final .pleasewait
{
  padding-top: 35%;
}

.rsvp .cancome, .rsvp .mainoptions
{
	font-size: 110%;
	display: inline-block;
	text-align: left;
	line-height: 1.9;
	cursor: pointer;
}
.rsvp .cancome label
{
	padding-left: 0.5em; padding-right: 1em;
}

.rsvp .secondary p
{
	font-size: 110%;
}

.rsvp .custom-checkbox
{
	border: solid 2px black;
	padding-left: 0.25em;
	padding-right: 0.25em;
	padding-top: 0.12em;
	padding-bottom: 0.12em;
	text-indent: -10%;
	color: white;
}

.rsvp .smaller
{
	font-size: 90%;
}

.rsvp .checkbox-checked
{
	color: black;
}

.rsvp input[type=text], .rsvp textarea
{
	width: 96%;
	margin-bottom: 0.5em;
	font-size: 150%;
	padding: 1%;
	border: 0;
	border-bottom: solid 1px #f0f0f0;
	background-color: transparent;
	font-family: "Patrick Hand", cursive;
	text-align: center;
}

 .rsvp textarea
{
	border: solid 1px #f0f0f0;
	text-align: left;
	font-size: 110%;
}

.invite-picture
{
	border: solid 8px white;
	float: left;
	width: 64%;
}

@media screen and (max-width: 880px) 
{
	.invite-picture {
		display: none;
	}
	.rsvp-container {
		width: 100%;
		margin: 0 auto;
	}
}

.ideas
{
counter-reset: li;
list-style-type: none;
margin-left: 0;
padding: 0;
}

.ideas > li::before {
    color: rgba(0, 0, 0, 0.2);
    content: counter(li, decimal);
    counter-increment: li;
    font-family: "de-walpergens-pica","IM Fell Great Primer",serif;
    font-size: 500%;
    left: 0;
    line-height: 1;
    position: absolute;
    top: -0.4em;
		text-shadow: 1px 1px 1px white;
}

.ideas > li
{
 margin: 0;
 padding: 0;
 margin-bottom: 2em;
 position: relative;
}

.ideas > li h4
{
 font-size: 150%;
 margin-bottom: 1em;

}

.ideas > li p , .ideas > li h4
{
 margin-left: 70px;	
 margin-top: 0;
}

@media screen and (max-width: 470px) 
{
	.ideas > li p
	{
		margin-left: 0;
		margin-top: 2em;
	}
	
}

.hotel-stars
{
 color: rgba(0,0,0,0.2);
 display: block;
}

#floating-nav
{
 width: 200px;
 position: fixed;
 top: 0;
 padding-top: 100px;
 left: 0;
 bottom: 0;
 font-size: 140%;
 display: none;
font-family: "de-walpergens-pica",Arial,sans-serif;
 	background-color: rgb(103,175,164);
	color: white;
	margin: 0;
	padding-right: 20px;
	opacity: 0;
}

@media screen and (min-width: 1400px) 
{
	#floating-nav
	{
		display: block;
	}
}



#floating-nav:before
{
 content:"Jim & Joe 2013";
 text-align: right;
 font-family: "de-walpergens-pica","IM Fell Great Primer",serif;
 display: block;
 margin-bottom: 1em;
 font-size: 130%;
}

#floating-nav li
{
display: block;
 text-align: right;
 margin-bottom: 0.5em;
 margin-right: 0;
}

#floating-nav li a
{
 color: white;
}

#floating-nav li a:hover
{
 border-bottom: 0;
 text-decoration: underline;
}

.ampersand
{
 font-size: 86%;
}

hr
{
  border-bottom: 1px solid black;
	background-color: black;
    color: transparent;
    height: 1px;
    margin: 3em auto 3em;
    opacity: 0.7;
    width: 400px;
    max-width: 80%;
}

.three-columns {
    margin: 0;
    padding: 0;
    list-style-type: none;
    overflow: hidden;
}
.three-columns h4 {
    font-size: 140%;
    font-weight: bold;
		margin-top: 0;
		margin-bottom: 0.5em;
}
.three-columns > li {
    float: left;
    width: 27%;
    margin-right: 3.5%;
    padding: 2%;
    background-color: rgb(255,255,255);
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}

@media screen and (max-width: 720px) 
{
	.three-columns > li {
		float: none;
		width: auto;
		margin: 1em 0;
		padding: 1em;
	}
}

.three-columns > li.last-column
{
	margin-right: 0;
}

.map { height: 380px; border: solid 8px white;  }
#hotel-map { margin-bottom: 2em; }

.event-days
{
 margin-top: 2em;
}

.event-days ol
{
 list-style-type: none;
 padding: 0;
 margin: 0;
}

.event-days h4
{
	font-weight: bold;
	font-size: 130%;
}

.date
{
	display: inline-block;
	vertical-align: middle;
	margin-right: 1em;
}

.date-month
{
	display: block;
	text-transform: uppercase;
	font-size: 55%;
}

.day-of-week
{
	display: inline;
}

.event-days h3
{
 margin-top: 0;
 margin-bottom: 1em;
 background-color: rgb(103,175,164);
 color: White;
 padding: 0.4em 1.5em 0.4em 1.5em;
}

.the-big-day .event-time
{
	width: 15%;
	float: left;
}

li.the-big-day ol li
{
	margin-bottom: 1.24em;
	overflow: hidden;
}


.the-big-day .event-location, .event-days .the-big-day  h4, .the-big-day p
{
	width: 83%;
	float: right;
	margin-top: 0;
	margin-bottom: 0.3em;
}


.event-days h4
{
 float: right;
 width: 58%;
 margin: 0;
 line-height: 1;
}
.event-location
{
	color: #666;
	font-size: 90%;
 clear: both;
 float: right;
 width: 58%;
 margin: 0;
 margin-bottom: 1em;
}
.event-time
{
 float: left;
 width: 40%;
 margin: 0;
	line-height: 1;
	clear: none !important;
}

.event-days p
{
 clear: both;
}

.event-days li li
{
 margin-bottom: 2em;
}

.event-days > li
{
    padding: 0;
    background-color: rgb(255,255,255);
		margin: 0;
		margin-top: 1.6em;
	 width: 26.5%;
	 					 float: left;
						 transition: width 2s;
}

.event-days > li ol
{
	padding-left: 1.5em;
	padding-right: 1.5em;
}

.event-days > li.the-big-day
{
	
}

.event-days
{
 					 list-style-type: none;
					 padding: 0;
					 margin: 0;
					 overflow: hidden;
}

.the-big-day
{
float: right !important;
width: 70% !important;
margin-left: 10%;
}

@media screen and (max-width: 870px) 
{
	.event-days > li	
	{
		width: auto;
		float: none;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding-bottom: 1em;
	}	
	.event-location, .event-days h4
	{
		width: 83%;
		float: right;
		margin-top: 0;
		margin-bottom: 0.3em;
	}
	.event-days .event-time
	{
		width: 15%;
	}
	.the-big-day
	{
		float: none !important;
		width: auto !important;
	}
	.event-days
	{
		display: block;
	}
}

@media screen and (max-width: 640px)
{
	.event-location, .event-days h4, .event-days .event-time, .event-days p
	{
		width: auto !important;
		float: none !important;
	}
}

.hotels li ul
{
	list-style-type: square;
	padding: 0;
	margin: 0;
	margin-left: 1em;
	margin-bottom: 1.5em;
}

.hotels li ul li
{
	margin-bottom: 0.5em;
	padding-left: 0;
}

.copyright
{
	font-size: 75%;
	text-align: center;
	margin-bottom: 2em;
}

#mini-menu
{
	position: fixed;
	padding: 0.5em;
	margin: 0;
	list-style-type: none;
	display: block;
	overflow: hidden;
	background-color: rgb(103,175,164);
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999999999999;
	text-align: center;
	display: none;
	opacity: 0;
}

@media screen and (max-width: 1399px) 
{
	#mini-menu
	{
		display: block;
	}
}

#mini-menu li
{
	display: inline;
	margin-right: 1em;
}

#mini-menu a:link, #mini-menu a:visited
{
	color: White;
	font-family: "museo-sans",Arial,sans-serif;
	font-size: 80%;
	text-decoration: none;
}

#mini-menu a.menu:link, #mini-menu a.menu:visited
{
	padding-left: 30px;
	background-image: url(nav-sprite.png);
	background-repeat: no-repeat;
	background-position: left -131px;
}

#mini-menu a.totop:link, #mini-menu a.totop:visited
{
	padding-left: 30px;
	background-image: url(nav-sprite.png);
	background-repeat: no-repeat;
	background-position: left -5px;
}

.promoted-message
{
	padding: 2%;
	background-color: rgb(103,175,164);
	margin-bottom: 1.5em;
	color: white;
	margin-top: 1em;
}

.promoted-message h4
{
	font-size: 130%;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
}

.promoted-message p
{
	margin-bottom: 0;
	margin-top: 0.3em;
}
.promoted-message a:link, .promoted-message a:visited
{
	color: white;
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

.archive
{
	text-align: center;
	font-size: 90%;
}

.archive a:after
{
	content: " →";
}

.fluid-video
{
	height: 0;
	padding-bottom: 56.25%;
	position: relative;
	border-color: #FFFFFF;
    border-image: none;
    border-style: solid;
    border-width: 8px 8px 8px 10px;
}

.fluid-video iframe
{
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.slideshow-wrapper
{
	margin-bottom: 2em;
	border-color: #FFFFFF;
    border-image: none;
    border-style: solid;
    border-width: 8px 8px 8px 10px;
	overflow: hidden;
	background: rgba(0,0,0,0.2);
}

.post-wedding .heroes
{
	min-height: 0;
	color: rgb(103,175,164);
}

.post-wedding header
{
	background: none;
}

.post-wedding .intro
{
	text-align: center;
}

.post-wedding #thanks
{
  margin-bottom: 4em;
}

.post-wedding .thanks
{
	display: block;
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: center;
	margin-bottom: 2em;
	margin-top: 2em;
}

.post-wedding .thanks li
{
	display: inline;
	margin: 0;
	padding: 0;
}

.post-wedding .thanks li:after
{
	content: " - ";
}

.post-wedding .thanks li:last-child:after
{
	content: "";
}