body {
	margin:0;
	padding:0;
	border:0;
/*	width:100%;
	background-image: url("../../images/page/linen.jpg"); */
/*	background-image: url("../../images/page/LightWood.jpg");
	background-repeat:repeat; */
	background-color: #111;
	background-image: url("../../images/page/darkwood2.jpg");
	background-size: 1280px, 800px;
	background-repeat:repeat-x;
	overflow:hidden;
	font-size:100%;
}

a:link, a:visited, a:active, a:hover {
	color: #222;
/* 	color: #0099ff; */
	text-decoration: none;
}
#pagesize {
	position:absolute;
	border: 0;
	width: 1000px;
	height: 600px;
	left:50%;
	margin:0 0 0 -500px;
}

#colleft {
	border: 0;
	float: left;
	width: 280px;
	height: 580px;
	padding: 20px 40px 0 0;
	background-image: url("../../images/page/paper2.png");
	background-size: 100%;
	background-repeat:no-repeat;
	overflow: visible;
	z-index: -1;
}

#colright {
	border: 0;
	float: right;
	width: 350px;
	height: 580px;
	padding: 20px 0 0 0;
	overflow: hidden;
	z-index: -1;
}

#colcenter {
	border: 0;
	padding: 0px 320px 0 330px;
	z-index: 0;
}

.clear {
	clear: both;
}

/* Element Styles */
#pencilCard{
	height: 600px;
	background-image: url("../../images/page/pen3.png");
	background-repeat: no-repeat;
	background-position: 0px top;
	background-size: 45%;
	overflow: visible;
}
.cardSwap{
	height: 150px;
	width: 260px;
	position: absolute;
	overflow: visible;
	left: 720px;
	top: 280px;
}

/* CARDS ANIMATION */
.cardfront1, .cardback1 {
	height: 151px;
	width: 265px;
	position: absolute;
	-webkit-box-shadow: -5px 10px 10px -5px #111;
		-moz-box-shadow: -5px 10px 10px -5px #111;
			-ms-box-shadow: -5px 10px 10px -5px #111;
				-o-box-shadow: -5px 10px 10px -5px #111;
					box-shadow: -5px 10px 10px -5px #111;
}
.cardfront1 {
	z-index: -1;
	-webkit-transform:rotate(3.5deg);
		-moz-transform:rotate(3.5deg);
			-ms-transform:rotate(3.5deg);
				-o-transform:rotate(3.5deg);
					transform:rotate(3.5deg);
}
.cardback1 {
	z-index: -2;
	-webkit-transform: rotate(-3.5deg);
		-moz-transform: rotate(-3.5deg);
			-ms-transform: rotate(-3.5deg);
				-o-transform: rotate(-3.5deg);
					transform: rotate(-3.5deg);
}

/*KEYFRAME ANIMATIONS*/
@keyframes cardfront1 {
	0% {z-index: -1; transform: rotate(3.5deg)}
	4% {z-index: -1;transform: rotate(0deg)}
	5% {z-index: -2;transform: rotate(0deg)}
	10% {z-index: -2;transform: rotate(3.5deg)}
	90% {z-index: -2;transform: rotate(3.5deg)}
	94% {z-index: -2;transform: rotate(0deg)}
	95% {z-index: -1;transform: rotate(0deg)}
	100% {z-index: -1; transform: rotate(3.5deg)}
}

@keyframes cardback1 {
	0% {top: 0px; z-index: -2; transform: rotate(-3.5deg)}
	4% {top: -160px; z-index: -2; transform: rotate(0deg)}
	5% {top: -160px; z-index: -1; transform: rotate(0deg)}
	10% {top: 0px; z-index: -1; transform: rotate(-3.5deg)}
	90% {top: 0px; z-index: -1; transform: rotate(-3.5deg)}
	94% {top: -160px; z-index: -1; transform: rotate(0deg)}
	95% {top: -160px; z-index: -2; transform: rotate(0deg)}
	100% {top: 0px; z-index: -2; transform: rotate(-3.5deg)}
}

.cardSwap:hover .cardfront1, .cardSwap:focus .cardfront1 {
	-webkit-animation: cardfront1 10s;
		-moz-animation: cardfront1 10s;
			-ms-animation: cardfront1 10s;
				-o-animation: cardfront1 10s;
					animation: cardfront1 10s;
	-webkit-animation-fill-mode: forwards;
		-moz-animation-fill-mode: forwards;
			-ms-animation-fill-mode: forwards;
				-o-animation-fill-mode: forwards;
					animation-fill-mode: forwards;
}

.cardSwap:hover .cardback1, .cardSwap:focus .cardback1 {
	-webkit-animation: cardback1 10s;
		-moz-animation: cardback1 10s;
			-ms-animation: cardback1 10s;
				-o-animation: cardback1 10s;
					animation: cardback1 10s;
	-webkit-animation-fill-mode: forwards;
		-moz-animation-fill-mode: forwards;
			-ms-animation-fill-mode: forwards;
				-o-animation-fill-mode: forwards;
					animation-fill-mode: forwards;
}

#postIt{
	width:350px;
	height:600px;
	background-image:url("../../images/page/bpostIt.png");
	background-size: 84%;
	background-repeat:no-repeat;
	background-position:100% 55%;
	overflow:visible;
	z-index:-1;
}
.postItCopy{
	position:absolute;
	left:430px;
	top:220px;
	height:175px;
	width:175px;
	overflow:hidden;
	z-index:0;
	margin:10px;
	/*transform*/
	-webkit-transform:rotate(5deg);
		-moz-transform:rotate(5deg);
			-ms-transform:rotate(5deg);
				-o-transform:rotate(5deg);
					transform:rotate(5deg);
	color: #333;
	font-family:'architects_daughterregular', sans-serif;
	font-style:normal;
	font-weight:100;
	font-size:14px;
	text-align:center;
	text-transform: uppercase;
	line-height:1.5;
}

/* fonts */

#colleft p{
	color: #0099ff;
	font-family:'architects_daughterregular', sans-serif;
	font-size:11px;
	font-style:normal;
	font-weight:400;
	text-align: left;
	text-transform: uppercase;
	padding:0 0 0 40px;
}
#colleft h1 {
	color: #fff;
	font-family:'cabinsketchregular', sans-serif;
	font-size:30px;
	font-style:normal;
	font-weight:100;
	text-align: left;
	text-transform: uppercase;
	padding:0 0 0 40px;
}
#colleft p.sig {
	font-size: 14px;
	font-style:italic;
	text-align: left;
	line-height: 1.25;
	margin: 0 0 0 20px;
/*transform*/
	-webkit-transform:rotate(-5deg);
		-moz-transform:rotate(-5deg);
			-ms-transform:rotate(-5deg);
				-o-transform:rotate(-5deg);
					transform:rotate(-5deg);
}
#colright p.top {
	color: #0099ff;
	font-family:'architects_daughterregular', sans-serif;
	font-size:11px;
	font-style:normal;
	font-weight:400;
	line-height: 18px;
	text-transform: uppercase;
 	padding:100px 0 0 150px;
}
#colright p.bottom {
	color: #0099ff;
	font-family:'architects_daughterregular', sans-serif;
	font-size:11px;
	font-style:normal;
	font-weight:400;
	line-height: 18px;
	text-transform: uppercase;
 	padding:430px 0 0 150px;
}
.arrowkey {
	margin-bottom: -5px
}

#colcenter p{
	text-align:center;
	position:relative;
	top:77%;
	color: #0099ff;
	font-family:'architects_daughterregular', sans-serif;
	font-size:9px;
	font-style:normal;
	font-weight:400; 
	text-transform: uppercase;
}
#postIt p{
	position:relative;
	top:86.4%;
	color: #0099ff;
	font-family:'architects_daughterregular', sans-serif;
	font-size:11px;
	font-style:normal;
	font-weight:400;
	text-transform: uppercase;
/*	text-align:center; */
	padding:0 1em 0em 2em;
}