/*
----------------

BODY

----------------
*/

#intro, #content-wrapper {display:none;}
body {
	background: #6D0C15 url(../images/body-bg.png);
	font-family: Georgia, Times New Roman, Times, serif;
	font-weight: bold;
	font-size: 16px;
	text-align: center;
	margin:0;
	padding:0;
}



/*
----------------

INTRO

----------------
*/

#preloader-loading  {
	position:absolute;
	width:100%;
	
}
#preloader-loading p {
	text-align:center;
	margin-top:20px;
	
}

#intro {width:800px; position:relative; margin:auto;}
#intro-ball {position:absolute; top:-270px; left:-250px;}
#intro-instructions { right:-104px; top:460px; position:absolute; }
#intro p {
    font-size: 23px;
}


/*
----------------

NAV


nav {position:fixed; top:0; left:0; z-index:99999; font-weight:normal !important; margin:0; text-align:center !important; display:none;}
nav ul { font-weight:normal !important; line-height:1em; }
nav ul li{ font-weight:normal !important;   text-align:center !important; padding:8px; }
nav ul li a:link, nav ul li a:visited {color:white; text-decoration:none; font-weight:normal !important; padding:14px; }
nav ul li a:hover, nav ul li a:active { background: url(../images/nav-hover.png) no-repeat center; overflow:visible;
}

----------------
*/


/*
----------------

TYPOGRAPHY

----------------
*/

h1, h3, p, nav {
	font-family: 'Lora', serif;
	font-weight:normal;
	margin:0;
}

 #content-wrapper h2, h1 #title-line3, h1 #title-line4, h2#line2 {
	font-family: 'League Script', cursive;
	font-weight:bold;     }

/* Firefox Fix */ 	 
 @-moz-document url-prefix()
{
 #content-wrapper h2, h1 #title-line3, h1 #title-line4, h2#line2 {
	font-family: 'League Script', cursive;
     text-shadow: -1px -1px 0 #C3962D,   
     1px -1px 0 #C3962D,   
     1px 0px 0 #C3962D;
	 font-weight:normal;     }
}

/* Safari Fix */ 	 
 @media screen and (-webkit-min-device-pixel-ratio:0)
{
 #content-wrapper h2, h1 #title-line3, h1 #title-line4, h2#line2 {
	font-family: 'League Script', cursive;
     text-shadow: -1px -1px 0 #C3962D,   
     1px -1px 0 #C3962D,   
     1px 0px 0 #C3962D;
	 font-weight:normal;     }
}	 



h1 {
	font-size: 80px;
	font-weight:normal;	
	margin: 170px 0 0 0 !important;	
	color: #C3962D;
	line-height: .6em;
	font-family: 'Lora', serif;
	text-align:left;
}

h2 {
	font-size: 84px;
	font-weight: normal;
	margin: 0 0 0em 0.35em !important;
	color: #C3962D;
	padding: 60px;
	line-height:0.55em;
	font-family: Arial, Helvetica, sans-serif;
}

h3 {
    color: white;
    font-size: 1.1em;
    margin: -3.3em 9.5em 8em 0;
    text-align: right;
}
.number {
    font-family: 'Lora',serif !important;
    font-size: 182px;
}
p {
    color: #FFFFFF;
    font-size: 1.5em;
    font-weight: normal;
    line-height: 1.32em;
    margin: auto;
    text-align: left;
    width: 100%;
    z-index: 9999;
}
#intro p {
    top: 100px !important;
}

#title {
    font-size: 180px;
    margin: 0;
    overflow: visible !important;
	height:220px !important;
    padding: 30px 0 100px 0;
    position: relative;
    width: 100%;
    z-index: 99;
}


.title-line {
	display:block;
    position: relative;
}
#title-line1 {
    color: #80A0B5;
    font-size: 77px;
    line-height: 1.3em;	
    text-transform: uppercase;
}
#title-line2 {
    float: left;
    font-size: 182px;
    line-height: 0.85em;
    margin-right: 15px;
}
#title-line3 {
    float: left;
    font-family: 'League Script',cursive;
    font-size: 92px;
    line-height: 0.9em;
}
#day-12 h2 {
    padding-top: 0.85em !important;
    margin-top: -3.5em !important;
}
#day-12 h2 .number {
    margin: 0 1em 0 2.8em !important;
}
#day-11 h2 {
    margin: -2.09em 0 0 -2.55em !important;
    padding-top: 1.1em;
}
#day-11 h2 .number {
    margin: 0 0 0 -1.05em !important;
}
#day-11 h3 {
    margin: -3.3em 33em 2em 0;
}
#day-10 h2 {
    margin: -1.85em 0.9em 0 0 !important;
}
#day-10 h2 .number {
    margin: 0 -0.2em 0 -1.4em !important;
}
#day-10 h3 {
    margin: -3.3em 28.6em 2em 0;
}
#day-9 h2 {
    margin: -1.8em 2.2em 0 0 !important;
}
#day-9 h2 .number {
    margin: 0 0.6em 0 0 !important;
}
#day-9 h3 {
    margin: -3.3em 35em 2em 0;
}
#day-8 h2 {
    margin: -0.75em 1.7em 0 0 !important;
    padding-top: 0.85em;
}
#day-8 h2 .number {
    margin: 0 0.75em 0 0 !important;
}
#day-8 h3 {
    margin: -3.3em 32.5em 2em 0;
}
#day-7 h2 {
    margin: -1.85em 0 0 0.9em !important;
    padding-top: 0.8em;
}
#day-7 h2 .number {
    margin: 0 1.5em 0 0 !important;
}
#day-7 h3 {
    margin: -3.3em 10.3em 2em 0;
}
#day-6 h2 {
    margin: 0em 0 0 -1.5em !important;
    padding-top: 0.87em;
}
#day-6 h2 .number {
    margin: 0 0.85em 0 0 !important;
}
#day-6 h3 {
    margin: -3.3em 33.3em 2em 0;
}
#day-5 h2 {
    line-height: 0.7em;
    margin: 0 2.6em 0 0 !important;
}
#day-5 h2 .number {
    margin: 0 1.62em 0 0 !important;
}
#day-5 h3 {
    margin: -3.3em 35em 2em 0;
}
#day-4 h2 {
    margin: -2.2em 0 0 -3.5em !important;
	padding-top:0;
}
#day-4 h2 .number {
    margin: 0 0.28em 0 0 !important;
}
#day-4 h3 {
    margin: -3.3em 27.5em 2em 0;
}
#day-4 p {
    bottom: 75px;
    color: black;
    font-family: "Comic Sans MS", Comic Sans, comic, cursive !important;
    font-size: 63px;
    font-weight: bold;
    left: 60px;
    position: absolute;
    z-index: 2;
}
#comic {
    display: block;
    position: absolute;
}
#comic span {
    display: inline-block;
    line-height: 1.1;
    overflow: visible !important;
    position: relative;
}
#comic .char6 {
    color: #F5F7E2 !important;
    font-size: 35px;
}
#day-3 h2 {
    margin: 0.12em 0 0 -3.5em !important;
    padding-top: 0.85em;
}
#day-3 h2 .number {
    margin: 0 0.6em 0 0 !important;
}
#day-3 h3 {
    margin: -3.3em 35.6em 2em 0;
}
#day-2 h2 {
    margin: -3.1em 0 0 -3.1em !important;
}
#day-2 h2 .number {
    margin: 0 -1.55em 0 0 !important;
}
#day-2 h3 {
    margin: -3.3em 33.3em 2em 0;
}
#day-1 h2 {
    margin: -1.35em 0 0 -0.3em !important;
    padding-top: 1.14em;
    width: 960px;
}
#day-1 h2 #and {
    margin: 0 2.95em 0 0 !important;
}
#day-1 h2 .number {
    margin: 0 0.15em 0 0 !important;
}
#day-1 h3 {
    margin: -3.3em 40.5em 2em 0;
}

/*
----------------

DAYS

----------------
*/
#content-wrapper {
	margin-top:600px !important;
	position:relative;
	margin:auto;
	width:100%;
}
.day-animation {
	width:960px;
	height:600px;
	position:relative;
	margin:auto;
	border:5px solid #fff;
	background-color:#999999;
	overflow:hidden;

}

article {
	overflow:visible !important;
	width:1000px;
	position:relative;
	margin:auto;
	
}

.day-animation img.layer-1, .day-animation img.layer-2, .day-animation img.layer-3, .day-animation img.layer-4, .day-animation img.layer-5 {
	position: absolute;
}
.day-animation img.layer-1 {
    z-index: 5 !important;
}
.day-animation img.layer-2 {
    z-index: 4 !important;
}
.day-animation img.layer-3 {
    z-index: 3 !important;
}
.day-animation img.layer-4 {
    z-index: 2 !important;
}
.day-animation img.layer-5 {
    z-index: 1 !important;
}


#day-1 .day-animation {
	background: url(../images/day1-bg.jpg) no-repeat center center;
	height:720px;
	
}
#day-2 .day-animation {
	background: url(../images/day2-bg.jpg) no-repeat center center;
}
#day-3 .day-animation {
	background: url(../images/day3-bg.jpg) no-repeat center center;
}
#day-4 .day-animation {
	background: url(../images/day4-bg.jpg) no-repeat center center;
}
#day-5 .day-animation {
	background: url(../images/day5-bg.jpg) no-repeat center center;
}
#day-6 .day-animation {
	background: url(../images/day6-bg.jpg) no-repeat center center;
}
#day-6 img.layer-3 {
    top: 115px;
 right: 430px;
 }

#day-7 .day-animation {
	background: url(../images/day7-bg.jpg) no-repeat center center;
}
#day-8 .day-animation {
	background: url(../images/day8-bg.jpg) no-repeat center center;
}
#day-9 .day-animation {
	background: url(../images/day9-bg.jpg) no-repeat center center;
}
#day-9 .layer-2, #day-2 .layer-1 {
	top:0;
	left:0;
}

#day-10 .day-animation {
	background: url(../images/day10-bg.jpg) no-repeat center center;
}
#day-11 .day-animation {
	background: url(../images/day11-bg.jpg) no-repeat center center;
}
#day-12 .day-animation {
	background: url(../images/day12-bg.jpg) no-repeat center center;
}

#day-1-border {
    background: url("../images/day1-border.png") no-repeat scroll center 232px transparent;
    height: 1049px;
    overflow: visible !important;
    width: 100%;
}
#day-2-border {
    background: url("../images/day2-border.png") no-repeat scroll center 182px transparent;
    height: 1204px;
    overflow: visible !important;
    width: 100%;
}
#day-3-border {
    background: url("../images/day3-border.png") no-repeat scroll center 228px transparent;
    height: 1110px;
    overflow: visible !important;
    width: 100%;
}
#day-4-border {
    background: url("../images/day4-border.png") no-repeat scroll center 186px transparent;
    height: 1102px;
    overflow: visible !important;
    width: 100%;
}
#day-5-border {
    height: 1130px;
}
#special {
    background: none repeat scroll 0 0 #C3962D;
    height: 457px;
    margin-top: -532px;
}
#day-6-border {
    background: url("../images/day6-border.png") no-repeat scroll center 224px transparent;
    height: 1065px;
    overflow: visible !important;
    width: 100%;
}
#day-7-border {
    background: url("../images/day7-border.png") no-repeat scroll center 218px transparent;
    height: 1150px;
    overflow: visible !important;
    width: 100%;
}
#day-8-border {
    background: url("../images/day8-border.png") no-repeat scroll center 207px transparent;
    height: 1150px;
    overflow: visible !important;
    width: 100%;
}
#day-9-border {
    background: url("../images/day9-border.png") no-repeat scroll center 448px transparent;
    height: 1190px;
    overflow: visible !important;
    width: 100%;
}
#day-10-border {
    background: url("../images/day10-border.png") no-repeat scroll center 156px transparent;
    height: 1138px;
    overflow: visible !important;
    width: 100%;
}
#day-11-border {
    background: url("../images/day11-border.png") no-repeat scroll center 166px transparent;
    height: 1116px;
    overflow: visible !important;
    width: 100%;
}
#day-12-border {
    background: url("../images/day12-border.png") no-repeat scroll center 240px transparent;
    height: 1235px;
    overflow: visible !important;
    width: 100%;
}
#day-11 .transition {
    margin: -102px 45px 0 0;
}
#day-10 .transition {
    margin: -221px 0 0 100px;
}
#day-9 .transition {
    margin: -218px 0 0 465px;
}
#day-8 .transition {
    left: -50px;
    margin: -415px 0 0;
    position: absolute;
    z-index: 9999;
}
#day-7 .transition {
    margin: -235px 0 0;
}
#day-6 .transition {
    left: 339px;
    position: absolute;
    top: -198px;
    z-index: 999;
}
#day-5 .transition {
    margin: -180px 0 -185px 260px;
}
#day-4 .transition {
    margin: -280px 0 0 -6px;
}
#day-3 .transition {
    left: 116px;
    position: absolute;
    top: -142px;
    z-index: 999;
}
#day-2 .transition {
    margin: -190px 0 0 75px;
}
#day-1 .transition {
    margin: -319px 598px 0 0;
}

.scroll { position:absolute; z-index:9999;}

#day-12 .scroll {
    right: -103px;
    top: 766px;
}
#day-11 .scroll {
    right: -92px;
    top: 535px;
}
#day-10 .scroll {
    right: -92px;
    top: 520px;
}
#day-9 .scroll {
    right: -92px;
    top: 280px;
}
#day-8 .scroll {
    right: -92px;
    top: 532px;
}
#day-7 .scroll {
    right: -92px;
    top: 240px;
}
#day-6 .scroll {
    right: -92px;
    top: 646px;
}
#day-5 .scroll {
    right: -92px;
    top: 240px;
}
#day-4 .scroll {
    right: -92px;
    top: 671px;
}
#day-3 .scroll {
    right: -92px;
    top: 682px;
}
#day-2 .scroll {
    right: -122px;
    top: 665px;
}

/*
----------------

CONCLUSION

----------------
*/

footer p {
	text-align:center;
	display:none;
	
}

footer a#button:link, footer a#button:visited {
	width:278px;
	height:50px;
	display:none;
    background: url("../images/accurate-button.png") no-repeat top center transparent;
	color:#AB1F25;
	text-decoration:none;
	font-size:38px;
	font-weight:normal;
	text-align:center;
	margin:53px auto 95px auto;
	padding-top:4px;
	
}

footer a#button:hover, footer a#button:active {
    background: url("../images/accurate-button.png") no-repeat bottom center transparent;
	color:white;
}






/* text stroke: http://jsfiddle.net/kovalchik/yJff9/  

http://www.netzgesta.de/dev/text/*/