/* pull in fonts */
@import url(https://fonts.googleapis.com/css?family=Cinzel|Prata);

body, input { margin: 0; padding: 0; font-family: 'Prata'; }
body { min-width: 600px; }

#header { width: 100%; padding: 30px 0; text-align: center; font-family: 'Cinzel'; font-size: 4em; }
#header a { color: #7D89AA; text-decoration: none; }
#header span { color: #C4C9D7; font-size: 1.5em; }

#nav { border-top: 2px solid #97a0bb; border-bottom: 1px solid #7D89AA; }
#nav ul { list-style: none; padding: 0; margin: 0; line-height: 50px; text-align: center; border-top: 1px solid #7D89AA; margin-top: 2px ;}
#nav li { display: inline-block; padding: 0 10px; margin-bottom: 0; }
#nav a { color: #7D89AA; text-decoration: none; }
#nav li.active a { text-decoration: underline; }

#content { width: 66%; margin: 50px auto; }
#content p { line-height: 1.75em; }

#footer { text-align: center; margin: 25px 0 40px; font-size: 0.85em; font-style: italic; padding-bottom: 40px; background-image: url('images/mn-shape.png'); background-size: 30px auto; background-position: 50% bottom; background-repeat: no-repeat; opacity: 0.4; }

/* content page headers */
h1 { text-align: center; margin: 0; line-height: 300px; font-size: 3.5em; color: #FFFFFF; background-image: url('images/story.jpg'); background-size: 100% auto; border-bottom: 1px solid #7D89AA; }
h2 { text-align: center; font-size: 2em; color: #7D89AA; }
h3 { font-size: 1.2em; color: #7D89AA; }
ul { margin: 0 0 30px 0; }
li { margin: 0 0 10px 0; }
p { margin: 0 0 20px 0; }
a { color: #7D89AA; }
a:visited { color: #7D89AA; }

.page- h1 { background-image: url('images/delaware-beach.jpg'); background-position: center 40%; }
.page- h1 { background-image: url('images/dc-backs.jpg'); background-position: center 35%; }

h1.page-header { background-size: cover; }
.page-rsvp h1 { background-image: url('images/french-meadow.jpg'); background-position: center 22%; }
.page-name h1 { background-image: url('images/dc-gardens.jpg'); background-position: center center; }
.page-name h1 { background-image: url('images/american-flag.jpg'); background-position: center 38%; }
.page-wedding h1 { background-image: url('images/tubing.jpg'); background-position: center 73%; }
.page-travel h1 { background-image: url('images/frozen-lake.jpg'); background-position: center 25%; }
.page-registry h1 { background-image: url('images/on-lake.jpg'); background-position: center 41%; }
.page-registry h1 { background-image: url('images/guthrie.jpg'); background-position: center 27%; }
.page-story h1 { background-image: url('images/sonoma4.jpg'); background-position: center 48%; }

/* home page */

/*
body.page- { background-image: url('images/montana-valley.jpg'); background-size: cover; background-position: center 60%; }
body.page- #photo { display: none; }
body.page- #header { position: absolute; bottom: 30px; left: 30px; width: auto; padding: 0; line-height: 1.1em; }
body.page- #header a { color: #FFFFFF; }
body.page- #nav { position: absolute; bottom: 20px; right: 20px; border: none; font-size: 1.2em; }
body.page- #nav ul { margin-top: 0px; border: none; }
body.page- #nav ul li a { color: #FFFFFF; }
body.page- #place-date-small { position: absolute; bottom: 60px; right: 20px; color: #FFFFFF; line-height: 50px; font-size: 1.9em; opacity: 0.8; }
body.page- #footer { display: none; }
*/

#photo { width: 100%; height: 600px; background-image: url('images/montana-valley.jpg'); background-size: cover; background-position: center center; }
#place-date { border-top: 1px solid #7D89AA; border-bottom: 1px solid #7D89AA; font-size: 3em; text-align: center; padding: 75px; background: #C4C9D7; color: #FFFFFF; }
#place-date-small { text-align: center; margin: 25px 0 -10px; color: #AAAAAA; font-size: 1em; font-style: italic; }

/* story page */
div.pic { width: 60%; margin: 20px auto 60px; text-align: center; }
div.pic > img { width: 100%; border: 1px solid #AAAAAA; }
div.pic > div { font-style: italic; color: #AAAAAA; font-size: 0.9em; margin-top: 5px; }

/* wedding page */
.page-wedding #content > div { display: table; width: 100%; margin: 0 0 40px; }
.page-wedding #content > div.multipart { margin-bottom: 30px; }
.page-wedding h2 { width: 25%; padding-right: 6%; display: table-cell; text-align: right; color: #AAAAAA; }
.page-wedding h3 { width: 33%; padding: 0 5% 0 0 !important; display: table-cell; padding: 0; text-align: left; color: #666666; }
.page-wedding #content > div > div { display: inline-block; width: 41%; display: table-cell; text-align: left; }
.page-wedding #content div ul { width: 74%; display: table-cell; padding-left: 20px; }
.page-wedding #content p { line-height: 1.5em; }

img.kid-pic { display: inline-block; width: 40%; border: 4px solid #DDDDDD; margin-right: 5px; }

/* registry page */
.registry-logo { width: 32%; display: inline-block; height: 200px; background-size: 75% auto; background-position: center center; background-repeat: no-repeat; text-indent: -10000px; }
.rl-cb { background-image: url('images/crate-and-barrel.png'); }
.rl-macys { background-image: url('images/macys.png'); }
.rl-rei { background-image: url('images/rei.png'); }

/* rsvp page */
table.rsvps { margin: 0 0 30px 0; }
table.rsvps tr td { padding: 10px 0; }
table.rsvps tr td.col-number { width: 4%; text-align: center; }
table.rsvps tr td.col-name { width: 60%; text-align: left; }
table.rsvps tr td.col-button { width: 15%; text-align: center; }
table.rsvps tr td.col-name input { width: 100%; padding: 5px; border: 1px solid #DDDDDD; font-size: 1.1em; }

#rsvp-count { border: 1px solid #AAAAAA; border-radius: 4px; font-family: 'Prata'; padding: 5px; font-size: 1.1em; }
table.rsvp-responses { border-collapse: collapse; }
table.rsvp-responses td { padding: 3px 10px; border: 1px solid #666666; }

.page-rsvp input.submit { background: #7D89AA; padding: 10px 20px; border-radius: 10px; border: 0; font-size: 1.2em; color: #FFFFFF; cursor: pointer; }

/* mobile responsiveness */
@media only screen and (max-width: 1000px) {
	#content { width: 75%; }
	div.pic { width: 70%; }
}

@media only screen and (max-width: 500px) {
	#content { width: 90%; }
	div.pic { width: 75%; }
}