html 
{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

*, *:before, *:after 
{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit;}

html {font-size:16px;}

body 
{
	margin: 0px; 
	padding: 0px; 
	font-family: "Palatino Linotype", "Book Antiqua", "URW Palladio L", serif;
	background-color:#FFFFFF;	
}

a:active {outline:none;position:relative;top:1px;}

img {display:block;}

.center {text-align:center;}
	
.center-bl {display:block;margin-left:auto;margin-right:auto;/* ADDED */text-align:center;}

.bold {font-weight:700;}

.hidden 
{
	display: none !important;
	visibility: hidden;
}

.clearfix:before, .clearfix:after, .row:before, .row:after {content: "";display: table;}
.clearfix:after, .row:after {clear:both;}
.clearfix, .row  {*zoom: 1;}

/* ============================================================================================= */		

.borderimg {outline:3px solid #000000;}
	
.borderimg2 {outline:3px solid #000000;}

.img--border {outline:3px solid #000000;/*border:3px solid #000000;*/}

.img--landscape
{width:500px;height:333px;}

.img--portrait
{width:333px;height:500px;}


.fuchsia {color: #FF008C}

ul.square > li,
.square 
{list-style-type:square;}

h3
{
	font-size:1.1875em; /* 19px */
	font-weight:700;
	margin-top:1em;
	margin-bottom:1em;
}

.caption {font-size:0.8125em;margin-top:0.25em;}

.font-sc {font-variant: small-caps;}

/* ============================================================================================= */
/* ===  CUSTOM HR  === */
/* ============================================================================================= */
	/*
	hr
	{
		height: 1px;
		border: 0;
		border-top: 1px solid #CCCCCC;
		margin:5px 0px;
	}
	*/
/* ============================================================================================= */	

/* ============================================================================================= */	
/* ===  CONTAINERS  === */
/* ============================================================================================= */	

.container
{
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:780px;
	top:10px;
	z-index:99;
	outline:3px solid #000000;
	background-color:#FFFFFF;
}

	.container.container--welcome {height:1200px;}
	.container.container--ceremony {height:1310px;}
	.container.container--reception {height:1850px;}
	.container.container--travel-accommodations {height:3780px;}
	.container.container--registry {height:780px;}
	.container.container--contact {height:780px;}
	.container.container--contacted {height:780px;}
	.container.container--rsvp {height:880px;}
	.container.container--done {height:780px;}
	
	@media screen and (max-width: 480px)
	{	
		.container {display:none;}
	}

.header
{
	width:100%;
	height:330px;/* TO REMOVE */
}

.content
{width:100%;}

.content.content--padded
{padding:10px;}

/* ============================================================================================= */	

.col-1 {width:100%;}

.col-1-2 {width:50%;float:left;}

/* NOT ACTUALLY 1/3, 2/3, BUT SPECIFIC TO IMAGE SIZES */
.col-1-3 {width:280px;float:left;} .col-2-3 {width:500px;float:left;}


.col-padding {padding:10px;}
.col-padding-l-r {padding-left:10px;padding-right:10px;}

.img-test
{
	max-width: 100%;
	height: auto;
}

/* ============================================================================================= */	
/* ===  BORDER  === */
/* ============================================================================================= */	

.border
{
	width:125px;
	z-index:1;
	position:absolute;
	top:0px;
}

	.border--left
	{
		left:0px;
		background-image: url(/images/lborder.jpg);
	}

	.border--right
	{
		right:0px;
		background-image: url(/images/rborder.jpg);
	}

	 .border--welcome {height:1220px;}
	 .border--ceremony {height:1330px;}
	 .border--reception {height:1870px;}
	 .border--travel-accommodations {height:3800px;}
	 .border--registry {height:800px;}
	 .border--contact {height:800px;}
	 .border--contacted {height:800px;}
	 .border--rsvp {height:900px;}
	 .border--done {height:800px;}

/* ============================================================================================= */	
/* ===    === */
/* ============================================================================================= */	


/* ============================================================================================= */	
/* ===  HEADER   === */
/* ============================================================================================= */	

.header-txt {width:780px;height:74px;}
.header-img {width:780px;height:205px;}

.header-img--mobile {width:240px;height:36px;}

.img-header-1 {width:780px;height:74px;}
.img-header-2 {width:780px;height:205px;}
.img-header-3 {width:780px;height:205px;}

/* ============================================================================================= */	
/* ===  NAVBAR  === */
/* ============================================================================================= */	

.nav 
{
	margin:0;padding:0;
	
	background-image: url(/images/navbar.png);
	background-repeat: no-repeat;
	height:30px;
	position:relative;
}

.nav > li
{
	display: block;
	position: absolute;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav > li > a
{
	display: block;
	text-indent: -9999px;
	text-decoration: none;
	outline: none;
}

.nav > li {top:0px;}
.nav > li > a {height:30px;}

.nav > .nav__welcome {left: 0px;}
.nav > .nav__ceremony {left: 101px;}
.nav > .nav__reception {left: 199px;}
.nav > .nav__travel-accomodations {left: 299px;}
.nav > .nav__registry {left: 535px;}
.nav > .nav__contact {left: 625px;}
.nav > .nav__rsvp {left: 710px;}

.nav > .nav__welcome > a {width: 101px;}
.nav > .nav__ceremony > a {width: 98px;}
.nav > .nav__reception > a {width: 100px;}
.nav > .nav__travel-accomodations > a {width: 236px;}
.nav > .nav__registry > a {width: 90px;}
.nav > .nav__contact > a {width: 85px;}
.nav > .nav__rsvp > a {width: 70px;}

.nav > .nav__welcome > a:hover, 
.nav > .nav__welcome.nav--active > a
{background: url(/images/navbar.png) -0px -30px no-repeat;}

.nav > .nav__ceremony > a:hover,
.nav > .nav__ceremony.nav--active > a
 {background: url(/images/navbar.png) -101px -30px no-repeat;}
 
.nav > .nav__reception > a:hover,
.nav > .nav__reception.nav--active > a
{background: url(/images/navbar.png) -199px -30px no-repeat;}
 
.nav > .nav__travel-accomodations > a:hover,
.nav > .nav__travel-accomodations.nav--active > a
{background: url(/images/navbar.png) -299px -30px no-repeat;}
 
.nav > .nav__registry > a:hover,
.nav > .nav__registry.nav--active > a
{background: url(/images/navbar.png) -535px -30px no-repeat;}
 
.nav > .nav__contact > a:hover,
.nav > .nav__contact.nav--active > a
{background: url(/images/navbar.png) -625px -30px no-repeat;}
 
.nav > .nav__rsvp > a:hover,
.nav > .nav__rsvp.nav--active > a
{background: url(/images/navbar.png) -710px -30px no-repeat;}

/* ============================================================================================= */	
/* ===  BUTTONS  === */
/* ============================================================================================= */

/* ============================================================================================= */
/* ============================================================================================= */	
/* ===  INDIVIDUAL PAGES  === */
/* ============================================================================================= */
/* ============================================================================================= */

/* ============================================================================================= */	
/* ===  LANDING PAGE  === */
/* ============================================================================================= */

	.btn--rsvp
	{
		background: url(/images/rsvp.png);
		width:307px;
		height:55px;	
	}

	.btn--rsvp:hover 
	{background: url(/images/rsvp.png) -0px -55px no-repeat;}

	.countdown 
	{
		padding:10px;
	}

	.slideshow 
	{
		width:506px;
		height:506px;
	}

/* ============================================================================================= */	
/* ===  CEREMONY PAGE  === */
/* ============================================================================================= */

	.ceremony-top
	{padding-bottom:1.75em;}

	.map--ceremony
	{padding-top:1.5em;}

/* ============================================================================================= */	
/* ===  RECEPTION PAGE  === */
/* ============================================================================================= */

	.reception-bottom
	{margin-top:2em;margin-bottom:2em;}
	
	.map--reception
	{padding-top:1.5em;}
	
/* ============================================================================================= */	
/* ===  TRAVEL AND ACCOMODATIONS PAGE  === */
/* ============================================================================================= */

.nav--travel-accomodations
{
	height:54px;
	width:100%;
	position:relative;
}

.nav--travel-accomodations > a
{display:block;width: 260px;position:absolute;height:54px;}

.lnk--hotels
{
	left:0px;
	background: url(/images/hotels.png);
}

.lnk--airport 
{
	left:260px;
	background: url(/images/airport.png);
}

.lnk--skaneateles
{
	left:520px;
	background: url(/images/skaneateles.png);
}

.lnk--hotels:hover 
{background: url(/images/hotels.png) -0px -54px no-repeat;}

.lnk--airport:hover 
{background: url(/images/airport.png) -0px -54px no-repeat;}

.lnk--skaneateles:hover 
{background: url(/images/skaneateles.png) -0px -54px no-repeat;}

.travel1
{
	width:100%;
	padding:0px 10px;
}

.content.content--travel-accommodations
{/*padding-left:10px;padding-right:10px;*/}

/* ============================================================================================= */	
/* ===  SPRY PANELS ON TRAVEL AND ACCOMODATIONS PAGE  === */
/* ============================================================================================= */

.CollapsiblePanel 
{
	margin: 0;padding: 0;
	border-left: solid 1px #CCC;
	border-right: solid 1px #999;
	border-top: solid 1px #999;
	border-bottom: solid 1px #CCC;
}

.CollapsiblePanelTab /* HEADER */
{
	-webkit-user-select: none;
	-moz-user-select: -moz-none;
	-ms-user-select: none;
	user-select: none;	
	cursor: pointer;
	
	margin: 0;
	
	background-color: #DDD;
	border-bottom: solid 1px #CCC;
	
	padding-left:0.5em;padding-right:0.5em;
	padding-top:1.1em;padding-bottom:1.1em;
}

	.CollapsiblePanelTab a 
	{color:black;text-decoration:none;}
	
	
	.CollapsiblePanelOpen > .CollapsiblePanelTab 
	{background-color: #EEE;}
	
	.CollapsiblePanelClosed > .CollapsiblePanelTab 
	{/* background-color: #EFEFEF */}
	
.CollapsiblePanelContent 
{
	margin: 0;
	padding:0 0.5em 1em 0.5em;
}

.CollapsiblePanelTabHover,  
.CollapsiblePanelOpen .CollapsiblePanelTabHover 
{background-color: #CCC;}

.CollapsiblePanelFocused .CollapsiblePanelTab 
{
	background-color: #000;
	color: #FFF;
}

/* ============================================================================================= */	
/* ===  REGISTRY PAGE  === */
/* ============================================================================================= */

.content--registry > p 
{
	margin-top:1em;
	margin-bottom;1em;
}

.registry-top,
.registry-center,
.registry-bottom
{padding-top:0.5em;padding-bottom:0.5em;}

.registry-top
{padding-top:2em;}

.registry-center-left,
.registry-center-right
{
	/*adjustment*/
	padding-top:1.5em;
	padding-bottom:0.25em;
}

.registry-center-left {padding-left:125px;}
.registry-center-right {padding-right:125px;}

.registry-center-right > a {float:right;}

/*
	390 each
	if centered: 
	left: 70px, 70px
	right: 95px, 95px

*/
.registry-bottom
{clear:both;}

/* 
	space: 125px
	icon: 250px;
	space: 80px;
	icon: 200px;
	space: 125px
*/

.lnk--amzn
{
	width:201px;
	height:40.5px;
	background: url(/images/amazon.png);
}

.lnk--amzn:hover 
{background: url(/images/amazon.png) -0px -40.5px no-repeat;}

.lnk--cb,
.lnk--cb2
{display:block;}

.lnk--cb
{
	width:250px;
	height:77.5px;
	background: url(/images/cb.png);
}

.lnk--cb:hover 
{background: url(/images/cb.png) -0px -77.5px no-repeat;}

.lnk--cb2
{
	width:200px;
	height:62px;
	background: url(/images/cb2.png);
}

.lnk--cb2:hover 
{background: url(/images/cb2.png) -0px -62px no-repeat;}

.lnk--myregistry
{
	width:249px;
	height:74px;
	background: url(/images/myregistry.png);
}

.lnk--myregistry:hover 
{background: url(/images/myregistry.png) -0px -74px no-repeat;}

/* ============================================================================================= */	
/* ===  CONTACT PAGE  === */
/* ============================================================================================= */
/*
.contact1 
{width:100%;}

.contact1 > p
{	
	margin-top:1em;
	margin-bottom:1em;
}

.contact1 > p:first-child {margin-top:0;}
*/


/*
.btn-submit
{
	padding: 1px 6px;
	text-align: center;
    cursor: default;
    color: buttontext;
    background-color: buttonface;
	border-width: 2px;
    border-style: outset;
    border-color: buttonface;
    border-image: initial;
	-webkit-appearance: push-button;
    user-select: none;
    white-space: pre;
	margin: 0em;
    font: 400 13.3333px Arial;
	letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
}

.form-input.form-input-textarea
{
	font-family: monospace;
    border-color: rgb(169, 169, 169);
	 -webkit-appearance: textarea;
    background-color: white;
    -webkit-rtl-ordering: logical;
    flex-direction: column;
    resize: auto;
    cursor: text;
    white-space: pre-wrap;
    word-wrap: break-word;
    border-width: 1px;
    border-style: solid;
    padding: 2px;
	text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 400 13.3333px Arial;
}
*/
/* ============================================================================================= */	
/* ===  RSVP PAGE  === */
/* ============================================================================================= */

.form-label
{
	float:left;
}

.form-group
{
	margin-top:1em;
	margin-bottom:1em;
}

.form-group--inset {left:2em;position:relative;}

/* ============================================================================================= */
/* ============================================================================================= */	
/* ===  MOBILE  === */
/* ============================================================================================= */
/* ============================================================================================= */

#mobile 
{display:none}

@media screen and (max-width: 480px) and (orientation: portrait)
{	
	.container,
	.border
	{display:none;}

	a 
	{
		text-decoration: none;
		text-align:center;
		margin-left:auto;
		margin-right:auto;
	}

	#mobile 
	{
		display:block;
		height:416px;
		border:1px solid black;
		/*
		width:320px;
		height:416px;
		margin-left:auto;
		margin-right:auto;
		text-align:center;
		position:absolute;
		*/
	}

	#mobile1 
	{
		/*
		display:block;
		height:36px;
		width:240px;
		margin-left:auto;
		margin-right:auto;
		*/
		margin-top:15px;
	}	
	
	/*
		assume old height is 416
		
		15px margin top
		36px banner
		60px x 4(240) = 25px margin top each 391, 25 on bottom?
		
	
	*/
	
	
	
	.btn--mobile
	{
		margin-top:25px;
		
		width:75%;
	}
	
	
	.btn--mobile__txt
	{
		line-height:54px;
		
		background-color:#FF008C;
		
		color:#FFFFFF;

		font-size:25px;
		
		border:3px solid #000000;
		
		font-variant:small-caps;

		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;		
	}
	
	
	
	
	.mobilebutton1,
	.mobilebutton2,
	.mobilebutton3,
	.mobilebutton4
	{
		display:block;
		height:60px;
		/*width:240px;*/
		position:relative;
		left:40px;
		margin-top:25px;
	}

	.mobilelink 
	{
		display:block;
		
		height:54px;
		
		width:240px;
		
		background-color:#FF008C;
		
		color:#FFFFFF;
		
		margin-left:auto;
		
		margin-right:auto;
		
		line-height:54px;
		
		font-size:25px;
		
		border:3px solid #000000;
		
		font-variant:small-caps;

		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;		
		
	}	
	
}

@media screen and (max-width: 480px) and (orientation: landscape)
{	

	#maindiv, #lborder, #rborder
	{display:none;}

	a 
	{
		text-decoration: none;
		text-align:center;
		margin-left:auto;
		margin-right:auto;
	}

	#mobile 
	{
		display:block;
		width:480px;
		height:268px;
		margin-left:auto;
		margin-right:auto;
		text-align:center;
		position:relative;
	}

	#mobile1
	{
		display:block;
		height:36px;
		width:240px;
		left:120px;
		position:absolute;
		top:15px;
	}
	
	.mobilebutton1,
	.mobilebutton2,
	.mobilebutton3,
	.mobilebutton4
	{
		display:block;
		height:71px;
		width:195px;
		position:absolute;
	}
	

	.mobilebutton1 
	{
		left:30px;
		top:76px;
	}

	.mobilebutton2 
	{
		left:255px;
		top:76px;
	}

	.mobilebutton3 
	{
		left:30px;
		top:172px;
	}

	.mobilebutton4 
	{
		left:255px;
		top:172px;
	}

	.mobilelink 
	{
		display:block;
		height:65px;
		width:189px;
		background-color:#FF008C;
		color:#FFFFFF;
		margin-left:auto;
		margin-right:auto;
		line-height:65px;
		font-size:20px;
		border:3px solid #000000;
		font-variant:small-caps;
		border-radius:15px;
	}

}