@import url('https://fonts.googleapis.com/css?family=Akronim|Creepster|Gothic+A1|Joti+One|Love+Ya+Like+A+Sister|Nosifer');
html{background-color: rgba(10,17,30,1.00);}
#css-zen-garden{
	background-image: url(img/HalloweenScape.jpg);
	background-repeat: no-repeat;
	background-size:1778px;
}
body{
	width: 1778px;
	margin: 70px auto;
	position: relative;
	font-family: 'Gothic A1', sans-serif;
	color:rgba(223,206,183,1.00);
}
.page-wrapper{
	width:900px;
	margin: -50px auto 0px auto;
}
a{text-decoration: none;color:rgba(72,41,12,1.00);}
h1{
	position:absolute;
	transform: rotate(-90deg);
	top:285px;
	left:-340px;
	font-family: 'Akronim', cursive;
	font-size: 10em;
	color:rgba(25,36,72,0);
	text-shadow: 10px 10px 9px rgba(255,255,255,.3);
	animation-name: ghost;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}
h2{
	font-family: 'Nosifer', sans-serif;
	font-size: 3.7em;
	color: rgba(149,22,22,1.0);
	text-shadow: 2px 2px 10px rgba(8,8,16,.40);
	position:absolute;
	top:-65px;
	left:140px;
}
.summary {
	width:535px;
	position: absolute;
	top:50px;
	right:3px;
	color:rgba(180,152,114,1.00);
	font-size: 1.3em;
	overflow: visible;

}
.summary p:last-child{
	width:255px;
	position:absolute;
	top:92px;
	right:25px;
	text-align: center;
	font-size: 1.1em;
	background-image: url(img/bat1.png);
	background-size: 60%;
	background-repeat: no-repeat;
	animation-name: bats;
	animation-duration: 3s;
	animation-iteration-count:infinite;
}
#zen-summary a{
	color:rgba(28,43,82,1.00);
	font-family: 'Creepster', cursive;
	font-size: 2em;
	}
#zen-summary a:hover{
	color:rgba(245,237,227,1.00);
}
h3{
	font-family: 'Love Ya Like A Sister', cursive;
	font-size: 1.5em;
	text-align: right;
	padding: 10px;
	border-radius: 5px;
	text-shadow: 1px 1px 2px rgba(121,17,17,0.50);
}
#zen-preamble h3{
	width:200px;
	position: absolute;
	top:80px;
	left:180px;
}
#zen-preamble p{
	position: relative;
	top: 110px;
	left: -20px;
	width: 615px;
}
#zen-explanation h3{
	width:150px;
	position: absolute;
	top:280px;
	left:305px;
}
#zen-explanation p{
	position: relative;
	width: 530px;
	top: 120px;
	left: 60px;
}
#zen-participation h3{
	width:150px;
	position: absolute;
	top:540px;
	left:220px;
}
#zen-participation p{
	position: relative;
	width: 620px;
	top: 130px;
	left: -20px;

}
#zen-benefits h3{
	text-align: left;
	width:150px;
	position: absolute;
	top:130px;
	left:1050px;
}
#zen-benefits p{
	position: relative;
	width: 360px;
	top: -540px;
	left: 640px;
}
#zen-requirements h3{
	text-align: left;
	width:150px;
	position: absolute;
	top:330px;
	left:1050px;
}
#zen-requirements p{
	position: relative;
	width: 650px;
	top: -495px;
	left: 640px;

}
#zen-requirements p:last-child {
	position: absolute;
	top:945px;
	left:50px;
	width:1200px;
	color:rgba(50,29,6,1.00);
	font-family: 'Love Ya Like A Sister', cursive;
	font-size: 1.2em;
}
a{
	font-family: 'Creepster', cursive;
	font-size: 1.1em;
	color:rgba(247,97,0,1.00);
}
a:hover{
	color: rgba(47,174,9,1.00);
}

footer{
	position: absolute;
	top:965px;
	right:50px;
	font-size: 1.4em;
}
footer a{
	color: rgba(28,43,82,1.00);
	padding: 10px;
}

ul{
	list-style: none;
	list-style-image: url(img/pumpkin-small.png);
	font-family: 'Joti One', cursive;
	color: rgba(93,95,95,1.00);
}
li{
	padding:2px;
}
#design-selection{
	position: absolute;
	top:620px;
	left:60px;
	width: 320px;
}
#design-selection h3{
	position:absolute;
	transform: rotate(-90deg);
	top:90px;
	left:-180px;
	font-family: 'Joti One', cursive;
	font-size: 2.3em;
	color: rgba(178,144,117,1.00);
}
#design-selection a{
	font-family: 'Joti One', cursive;
	color: rgba(178,144,117,1.00);
}
#design-selection a:hover{
	color: rgba(47,174,9,1.00);
}

#design-archives{
	position: absolute;
	top:850px;
	left:405px;
	width: 900px;
}
.next{
	position: absolute;
	left:300px;
	top:51px;
}
.viewall{
	position: absolute;
	left:135px;
	top:51px;
}
#design-archives h3{
	position:absolute;
	top:15px;
	left:0px;
	font-family: 'Joti One', cursive;
	font-size: 1.5em;
	color: rgba(178,144,117,1.00);
}
#design-archives a{
	font-family: 'Joti One', cursive;
	color: rgba(178,144,117,1.00);
}
#design-archives a:hover{
	color: rgba(47,174,9,1.00);
}
#design-archives ul{
list-style: none;
}

#zen-resources{
	position:absolute;
	top:850px;
	left:1035px;
	width:900px;
}
#zen-resources h3{
	position:absolute;
	top:15px;
	left:-140px;
	font-family: 'Joti One', cursive;
	font-size: 1.5em;
	color: rgba(178,144,117,1.00);
}
.view-css{
	position: absolute;
	left:20px;
	top:51px;
}
.css-resources{
	position: absolute;
	left:240px;
	top:51px;
}
.zen-faq{
	position: absolute;
	left:375px;
	top:51px;
}
.zen-submit{
	position: absolute;
	left:430px;
	top:51px;
}
.zen-translations{
	position: absolute;
	left:600px;
	top:51px;
}
#zen-resources a{
	font-family: 'Joti One', cursive;
	color: rgba(178,144,117,1.00);
	padding:15px;
}
#zen-resources a:hover{
	color: rgba(47,174,9,1.00);
}
#zen-resources ul{
list-style: none;
}

.extra1{
	width: 2000px;
	height:200px;
	position: absolute;
	top:370px;
	left:260px;
	background-image: url(img/witch.png);
	background-repeat: no-repeat;
	background-size: 10%;
	animation-name: witch;
	animation-duration: 5s;
}
.extra2{
	width: 230px;
	height:1600px;
	position: absolute;
	top:-20px;
	left:1015px;
	background-image: url(img/spider.png);
	background-repeat: no-repeat;
	background-size: 35%;
	animation-name: spider;
	animation-duration: 10s;

}
abbr{
	text-decoration: none;
}

@keyframes bats{
	0%{background-size: 10%;background-position: top;}
	50%{background-size: 100%;}
	100%{background-size: 10%;background-position: bottom;}
}
@keyframes witch{
	0% {left:1800px;}
	100% {left:260px;}
}
@keyframes spider{
	0%{top:-900px;}
	100%{top:-20px;}
}
@keyframes ghost{
	0%{color:rgba(25,36,72,0);text-shadow: 10px 10px 9px rgba(255,255,255,.3);}
	50%{color:rgba(25,36,72,.05);text-shadow: 10px 10px 10px rgba(255,255,255,.4);transform: rotate(-89deg);}
	100%{color:rgba(25,36,72,0);text-shadow: 10px 10px 9px rgba(255,255,255,.3);}
}