/* Holiday piece 2012 */
/* Design, lettering and illustration by Ira F. Cummings */

/* Meyer reset */
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Begin Structure */
body {
	position: relative;
}
nav ul {
	position: fixed;
	top:50px;
	right:50px;
	z-index: 1000;
}
section {
	height: 900px;
	width: 100%;
	margin-bottom: -11px;
	background: #999;
	background-repeat: repeat-x;
	background-position: top center;
}
section div {
	width: 100%;
}
section h1, section h2, section h3 {
	width: 100%;
}
section p {
	width:100%;
	position: relative;
	margin: 0px auto;
	color: #fff;
}
section p span {
	display: block;
	margin: 0 auto
}
.lettering {
	text-indent: -99999px;

	background-position: top center;
	background-repeat: no-repeat;
}
p .deming {

/*	position: relative;*/
	margin: .2em auto 0;
/*	width: 600px;
	left: -50%;*/
}


/* 
Background color/images for the sections 
=====================================================================
*/
.middle {
	position: absolute;
	z-index: 100;
	background-repeat: no-repeat;
	background-position: top center;
}
.top {
	position: absolute;
	z-index: 101;
	background-repeat: no-repeat;
	background-position: top center;
}
#intro {
	height:875px;
	background-color: #22232D;
	background-image: url('../images/bg-intro.jpg');
}
#intro p {
	top:250px;
}
#stars {
	height:1545px;
	background-color: #14273D;
	background-image: url('../images/bg-stars.jpg');
}
#stars .middle {
	height:1545px;
	background-image: url('../images/mid-stars.png');
}
#stars .top {
	height:1545px;
	background-image: url('../images/top-stars.png');
}
#stars p {
	top:570px;
}
#snowflakes {
	height:2999px;
	background-color: #174D71;
	background-image: url('../images/bg-snowflakes.jpg');
}
#snowflakes .middle {
	height:3520px;
	background-image: url('../images/mid-snowflakes.png');
	background-position: center 50px;
}
#snowflakes .top {
	height:2999px;
	background-image: url('../images/top-snowflakes.png');
}
#snowflakes p {
	top:1640px;
}
#lights {
	height:2001px;
	background-color: #1D6862;
	background-image: url('../images/bg-lights.jpg');
}
#lights .top {
	height:2001px;
	background-image: url('../images/top-houses.png');
	background-position: center bottom;
}
#lights p {
	top:530px;
}
#fandf {
	height:3107px;
	background-color: #BF952C;
	background-image: url('../images/bg-fandf.jpg');
}
#fandf .top {
	height:3107px;
	margin-top: 300px;
	background-image: url('../images/top-frames.png');
	background-position: center 1500px;
}
#fandf p {
	top:970px;
}
#outro {
	height:1464px;
	background-color: #915D36;
	background-image: url('../images/bg-outro.jpg');
}
#outro p:first-child {
	padding-top:235px;
}
#outro p {
	margin-bottom: 1.4em;
}

/* 
Sharing
=====================================================================
*/
#sharing {
	width: 100%;
	padding-top: 10px;
	text-align: center;
}
#sharing span {
	margin:0 auto;
}
/* 
Lettering
=====================================================================
*/
#intro .lettering {
	width: 568px;
	height: 433px;
	background-image: url('../images/top-moments.png'); 
}
#stars .lettering {
/*	width: px;*/	
	height: 190px;
/*	background-image: url('../images/top-stars.png');*/
}
/*#snowflakes .lettering {
	width: px;
	height: px;
	background-image: url('../images/mid-snowflakes.png');
}*/
#lights .lettering {
	width: 519px;
	height: 363px;
	background-image: url('../images/lights.png');
}
#fandf .lettering {
	width: 887px;
	height: 230px;
	background-image: url('../images/fandf.png');
}
#outro .lettering {
	width: 1121px;
	height: 268px;
	background-image: url('../images/outro.png');
}

/* 
Nav
=====================================================================
*/
nav ul {
	width: 30px;
}
nav ul li {
	display: block;
	float: left;
	height: 38px;
	width: 27px;
	padding-bottom: 24px;
	background: url('../images/nav-dots.png') bottom center no-repeat;
}
nav ul li:last-child {
	background: none;
}
nav ul li a {
	display: block;
	height: 38px;
	width: 27px;
	text-indent: -9999px;
}
a[href="#intro"] {
	background: url('../images/nav-circle.png') center center no-repeat;
}
a[href="#stars"] {
	background: url('../images/nav-stars.png') center center no-repeat;
}
a[href="#snowflakes"] {
	background: url('../images/nav-snow.png') center center no-repeat;
}
a[href="#lights"] {
	background: url('../images/nav-lights.png') center center no-repeat;
}
a[href="#fandf"] {
	background: url('../images/nav-fandf.png') center center no-repeat;
}
a[href="#outro"] {
	background: url('../images/nav-circle.png') center center no-repeat;
}
/* 
Calaphon 
=====================================================================
*/
.calaphon {
	margin-top: 180px;
}
.calaphon p {
	font-size: 1em;
	color: #492F1B;
}
.calaphon p a:link, .calaphon p a:hover,  .calaphon p a:visited {
	color: #492F1B;

}
/* 
Typography 
=====================================================================
*/
/* Font-face for Deming*/
@font-face {
    font-family: 'deming';
    src: url('../fonts/deming_ep-webfont.eot');
    src: url('../fonts/deming_ep-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/deming_ep-webfont.woff') format('woff'),
         url('../fonts/deming_ep-webfont.ttf') format('truetype'),
         url('../fonts/deming_ep-webfont.svg#deming_epregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
	font-family: 'Helvetica Neue', Helvetica, sans-serif;
}
h1, h2, h3 {
	font-family: 'deming', Georgia, Times, serif;
	font-style: normal;
	line-height: 1.4em;
	text-align: center;
	color: #492F1B;
}
h1 {
	font-size: 1.2em;
}
h2 {
	font-size: 1em;
}
p {
	font-family: Georgia, Times, serif;
	font-style: italic;
	font-size: 1.6em;
	line-height: 1.6em;
	text-align: center;
}
p span.deming {
	font-family: 'deming', Georgia, Times, serif;
	font-size: 1.1em;
	font-style: normal;
	text-align: center;
	letter-spacing: .1em;
	text-transform: uppercase;
}