/**
 * Generic Settings
 */
@import url('http://fonts.googleapis.com/css?family=Galindo');
@import url('http://fonts.googleapis.com/css?family=Alex+Brush');

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}
::selection {
    background: #b3d4fc;
    text-shadow: none;
}

body {
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0NDlmZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top, rgba(30,87,153,1) 0, rgba(68,159,229,1) 700px);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#449FE5), color-stop(100%,#449FE5));
	background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0,rgba(68,159,229,1) 700px);
	background: -o-linear-gradient(top, rgba(30,87,153,1) 0,rgba(68,159,229,1) 700px);
	background: -ms-linear-gradient(top, rgba(30,87,153,1) 0,rgba(68,159,229,1) 700px);
	background: linear-gradient(to bottom, rgba(30,87,153,1) 0,rgba(68,159,229,1) 700px); }
.no-cssgradients body { background: none #449FE5; }

a { 
	color: #1673ff;
	transition: color 0.2s; }
a:hover { color: #00009e; }

h1 { 
	color: rgba(255,255,255,0.8);
	font: 3em 'Galindo', Verdana, serif;
	margin: 0 0 0.67em;
	padding-top: 50px;
	text-align: center;
	text-shadow: 5px 5px 5px rgba(0,0,0,0.25), -2px -2px 1px rgba(255,255,255,0.2); }
.no-rgba h1 { color: #eee; }

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; } /* For IE 6/7 only - Include this rule to trigger hasLayout and contain floats. */

.container { margin: 0 auto; width: 90%; }

#theHeader { position: relative; }
	#clouds { 
		left: 0;
		position: absolute; 
		top: 0;
		width: 100%; }
		.cloud {
			background: url('../images/sprite_clouds.png') no-repeat;
			display: block;
			opacity: 1;
			position: absolute;
			-webkit-transition: opacity 0.5s;
			transition: opacity 0.5s; }
		.cld1a, .cld1b {
			height: 93px;
			width: 171px; }
		.cld1a {
			left: 120px;
			top: 70px; }
		.cld1b {
			background-position: -177px 0;
			left: 50px;
			top: 280px; }
		.cld2a, .cld2b {
			height: 54px;
			width: 100px; }
		.cld2a {
			background-position: -351px -21px;
			right: 20px;
			top: 20px; }
		.cld2b { background-position: -454px -21px; }
		.cld3a, .cld3b {
			height: 111px;
			width: 248px; }
		.cld3a {
			background-position: 0px -97px;
			right: 130px;
			top: 320px; }
		.cld3b { background-position: -255px -97px; }
		.cld4a, .cld4b {
			height: 52px;
			width: 124px; }
		.cld4a { background-position: 0px -221px; }
		.cld4b { background-position: -135px -221px; }
		.cld5a, .cld5b {
			height: 86px;
			width: 140px; }
		.cld5a { background-position:-258px -221px; }
		.cld5b { background-position: -404px -221px; }
		.cld6a, .cld6b {
			height: 122px;
			width: 229px; }
		.cld6a { background-position: -2px -286px; }
		.cld6b { background-position: 0px -410px; }
		.cld7a, .cld7b {
			height: 62px;
			width: 116px; }
		.cld7a { background-position: -272px -317px; }
		.cld7b { background-position: -434px -317px; }

#theNav {
	background-color: rgba(0,0,0,0.75);
	font: 1.5em 'Galindo', Verdana, serif;
	left: 0;
	position: relative;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 5; }
	#theNav li { display: block; }
	#theNav a {
		color: white;
		display: block;
		font-size: 1.25em;
		padding: 10px;
		text-decoration: none;
		transition: color 0.5s; }
	#theNav a:hover { color: #5ed6ff; }

#cursive {
	display: block;
	font: 1.25em 'Alex Brush', Georgia, serif;
	margin-top: 100px; }
	#correction {
		text-decoration: line-through;
		position: relative; }
		#correction:after {
			bottom: 70%;
			content: 'Have Gotten';
			font-size: 11vw;
			left: 10%;
			position: absolute;
			text-decoration: none;
			-webkit-transform: rotate(-5deg);
			transform: rotate(-5deg);
			white-space: nowrap;
			width: 100%; }
		@media (max-width: 500px) {
			#correction::after {
				font-size: inherit;
			}
		}
		@media (min-width: 1200px) {
			#correction::after {
				font-size: 9vw;
			}
		}
	#snarkyNote {
		color: white;
		font-size: 1.5em;
		margin-top: 50px;
		text-align: center;
		text-shadow: 1px 1px 1px black; }

.hasPadding { padding: 50px 0 300px; }

/**
 * Timeline/Timecube
 */
#cubeInterface {
	height: 100px;
	margin-left: 25%;
	-moz-perspective: 800px;
	-webkit-perspective: 800px;
	perspective: 1300px;
	-moz-perspective-origin: 90% 70%;
	-webkit-perspective-origin: 90% 70%;
	perspective-origin: 90% 70%;
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	width: 100px; }

#stills {
	height: 200px;
	position: relative;
	-webkit-transition: all 2s;
	transition: all 2s;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform:
		rotateX(0deg)
		rotateY(-15deg)
		rotateZ(0deg);
	transform:
		rotateX(0deg)
		rotateY(-15deg)
		rotateZ(0deg);
	width: 200px; }
.no-csstransforms3d div#stills { /* only tag qualifying because it is more specific and Chromium was showing the transforms... */
	-webkit-transition: all 2s;
	transition: all 2s;
	-webkit-transform-style: none;
	transform-style: none;
	-webkit-transform: none;
	transform: none; }
#stills.s2 {
	-webkit-transform:
		rotateX(-90deg)
		rotateY(0deg)
		rotateZ(-15deg);
	transform:
		rotateX(-90deg)
		rotateY(0deg)
		rotateZ(-15deg); }

#stills.s3 {
	-webkit-transform:
		rotateX(-180deg)
		rotateY(15deg)
		rotateZ(0deg);
	transform:
		rotateX(-180deg)
		rotateY(15deg)
		rotateZ(0deg); } 

#stills.s4 {
	-webkit-transform:
		rotateX(-270deg)
		rotateY(0deg)
		rotateZ(15deg);
	transform:
		rotateX(-270deg)
		rotateY(0deg)
		rotateZ(15deg); }

#stills.s5 {
	-webkit-transform:
		rotateX(-10deg)
		rotateY(-80deg)
		rotateZ(0deg);
	transform:
		rotateX(-10deg)
		rotateY(-80deg)
		rotateZ(0deg); }

	.no-csstransforms3d .still { display: none; }

	.no-csstransforms3d #stills.s1 #still1,
	.no-csstransforms3d #stills.s2 #still2,
	.no-csstransforms3d #stills.s3 #still3,
	.no-csstransforms3d #stills.s4 #still4,
	.no-csstransforms3d #stills.s5 #blank_slide1 {
		border: 1px solid #777;
		box-shadow: 0 0 20px;
		display: block; } /* for lame old browsers */

	#still1 { 
		-webkit-transform: translateZ(100px);
		transform: translateZ(100px); }
	#still2 { 
		-webkit-transform: 
			rotateX(90deg)
			translateZ(100px);
		transform: 
			rotateX(90deg)
			translateZ(100px); }
	#still3 { 
		-webkit-transform: 
			rotateX(180deg)
			translateZ(100px);
		transform: 
			rotateX(180deg)
			translateZ(100px); }
	#still4 { 
		-webkit-transform: 
			rotateX(-90deg)
			translateZ(100px);
		transform: 
			rotateX(-90deg)
			translateZ(100px); }
	#still5 { 
		-webkit-transform: 
			rotateY(-90deg)
			translateZ(100px);
		transform: 
			rotateY(-90deg)
			translateZ(100px); }
	#still6 { 
		-webkit-transform: 
			rotateY(180deg)
			translateZ(100px);
		transform: 
			rotateY(180deg)
			translateZ(100px); }
	.still {
		height: 100%;
		position: absolute;
		width: 100%; }
	.no-csstransforms3d .still {
		-webkit-transform: none !important;
		transform: none !important; }
		.still figcaption { display: none; }

div.still { background: url('../images/blockSide.png') no-repeat; }
	div.still > * { display: none; }

#blank_slide1 {
	transform:
		rotateY(90deg)
		translateZ(100px);
	-webkit-transform:
		rotateY(90deg)
		translateZ(100px); }
#blank_slide2 {
	transform:
		rotateY(-90deg)
		translateZ(100px);
	-webkit-transform:
		rotateY(-90deg)
		translateZ(100px); }

#timelineCtrls {
	color: rgba(255,255,255,0.9);
	margin-top: 150px;
	text-align: center;
	text-shadow: 1px 1px 3px black;
	width: auto; }
.no-rgba #story { color: white; }
	.ctrls { cursor: pointer; }
	#prev { margin-right: 50px; }

	#story { text-align: left; }
		#story > h2 {
			font: 2em 'Galindo', Verdana, serif;
			margin: 25px 0 5px; }
		#story > p { margin: 0; }

/**
 * Countdown
 */
#countdown { background: url('../images/collage_countdown1b.jpg') 50% 0; }
.countdown_section {
	background-color: #ddd;
	background: -webkit-linear-gradient(to bottom, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%);
	background: -moz-linear-gradient(to bottom, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%);
	background: -o-linear-gradient(to bottom, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%);
	background: -ms-linear-gradient(to bottom, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%);
	background: linear-gradient(to bottom, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%);
	border-radius: 20px;
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5), 3px -3px 2px rgba(0,0,50,0.25) inset;
	box-shadow: 0 0 10px rgba(0,0,0,0.5), 3px -3px 2px rgba(0,0,50,0.25) inset;
	color: rgba(0,0,0,0.25);
	display: inline-block;
	font: 4em/0.85em 'Galadino', Verdana, sans-serif;
	height: 100px;
	margin: 20px;
	overflow: hidden;
	padding: 10px 0 0 0;
	position: relative;
	text-transform: uppercase;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	width: 110px; }
.lt-ie9 .countdown_section { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=0 ); }
.no-rgba .countdown_section { color: #aaa; }
	.countdown_section:first-child { margin-left: 70px; }
	.countdown_section:last-child { margin-right: 0; }
		.countdown_amount {
			color: #333;
			display: block;
			font: 1.1em Galindo, Verdana, sans-serif;
			left: 0;
			position: absolute;
			text-align: center;
			top: 15px;
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			transform: rotate(45deg);
			width: 100%; }
			
#weddingDate { margin-bottom: 0; }
#weddingTime {
	color: white;
	display: block;
	font-size: 2.5em;
	margin-bottom: 3em;
	padding-left: 25%;
	text-shadow: 1px 2px 2px rgba(0,0,0,0.5); }

/**
 * Directions
 */
#directions { 
	background: url('../images/collage_naz1b.jpg') 50% 0;
	border-top: 5px solid white; }
#map_container {
	float: left;
	height: 400px;
	margin-right: 20px;
	width: 95%; }
	#map {
		border: 5px double white;
		border-radius: 30px;
		box-shadow: 0 0 20px 5px #333;
		height: 90%;
		width: 100%; }
.dirBox { /*#nazInfo*/
	background-color: rgba(255,255,255,0.75);
	border-radius: 30px;
	box-shadow: 0 0 15px black inset, 0 0 10px 3px black;
	display: none;
	float: left;
	margin-left: 2%;
	padding: 10px;
	width: 90%; }
.dirBox.show { display: block; }
.no-rgba .dirBox { background: url('../images/opac75white.png'); }
	.dirBox > h2 {
		font: 3em 'Alex Brush', 'Brush Script MT', Georgia, cursive;
		margin: 0 0 0.5em; }
	.dirBox > small { display: block; }
#dirNav {
	font-size: 0;
	margin-bottom: 50px;
	text-align: center; }
	.dirLink { /* http://www.colorzilla.com/gradient-editor/#f2f6f8+0,d8e1e7+50,b5c6d0+51,e0eff9+100;Grey+Gloss+%232 */
		background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZjZmOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2Q4ZTFlNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2I1YzZkMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlMGVmZjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
		background: -moz-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f6f8), color-stop(50%,#d8e1e7), color-stop(51%,#b5c6d0), color-stop(100%,#e0eff9));
		background: -webkit-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%);
		background: -o-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%);
		background: -ms-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%);
		background: linear-gradient(to bottom, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%);
		border-color: #ddd #555 #555 #ddd;
		border-style: solid;
		border-width: 1px;
		color: #333;
		cursor: pointer;
		font-size: 16px;
		font-size: 1rem;
		padding: 10px; }
	.dirLink:first-child { border-radius: 10px 0 0 10px; }
	.dirLink:last-child { border-radius: 0 10px 10px 0; }
	.no-cssgradients .dirLink { background: none #ccc; }
	.lt-ie9 .dirLink { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#b5c6d0',GradientType=0 ); }


/* temporary holder for unfinished areas */
.container { position: relative; }
/*#timeline > .container:before,
#theFooter > .container:before {
	background-color: black;
	background-color: rgba(0,0,0,0.75);
	border: 1px dashed white;
	color: white;
	content: 'Coming Soon!';
	display: block;
	font: 3em 'Galindo', Verdana;
	height: 100%;
	left: 0;
	padding-top: 100px;
	position: absolute;
	-moz-transform: rotate(10deg);
	-webkit-transform: rotate(10deg);
	-o-transform: rotate(10deg);
	-ms-transform: rotate(10deg);
	transform: rotate(10deg);
	text-align: center;
	top: 120px;
	width: 100%; }*/

#regLinks { 
	list-style: none;
	text-align: center; }
	#regLinks li { display: inline-block; }
	.graphics {
		border: 3px double white;
		border-radius: 5px;
		vertical-align: top;
		width: 200px; }

@media screen and (min-width: 34.375em){ /* 550px */
	h1 { font-size: 5em; }
	#cubeInterface { margin: 0 auto; }
}

@media screen and (min-width: 800px){ /* 50px */
	#map_container { width: 50%; }
	.dirBox { width: 40%; }
}

@media screen and (min-width: 61em) { /* 976px - menu sticks to top */
	body { 
		background-attachment: fixed;
		padding-top: 50px; }

	.container { width: 960px; }

	#theNav { position: fixed; }
	#theNav li { display: inline-block; }

	#cubeInterface { margin: 100px; }
	#timelineCtrls {
		position: absolute;
		right: 10%;
		top: 250px;
		width: 50%; }
}

@media screen and (min-width: 65em){ /* 1040 */
	/*.countdown_section {
		height: 120px;
		margin: 0 50px 0 0;
		width: 130px; }*/
}

@media screen and (max-width: 75em){ /* 1200px */
	#clouds .cloud { opacity: 0; }
	.no-opacity .cloud { display: none; }
}