@import url("reset.css");

/*----------------------------------------
=BASIC SETUP
----------------------------------------*/
header, footer, aside, section, article, hgroup {
	display: block;
}

body {
	background-color: #000000;
	font: 16px/18px Cambria, Helvetica, Arial, sans-serif;
	background:url(../images/cropped-burlap-background.jpg) repeat 0 0;
}

p {
	margin-bottom: 18px;
}

a {
	color: #e46f2e;
}

	a:hover, a:active {
		color: #ea2c00;
	}

.clear {
	clear: both;
	height: 0;
	font-size: 0;
	overflow: hidden;
}

#box {
	text-align: center;
}

#content {
	width: 65%;
	top: 400px;
	position: relative;
	margin-left: auto ;
    margin-right: auto ;
	background-color: #faf7ee;
	padding: 20px;
	z-index: 2;
	font-size: 1.5em;
}

#linkbox {
	width: 15%;
	background-color: #3b362c;
	border-top-left-radius:1em;
	border-bottom-left-radius:1em;
	position: fixed;
	padding: 5px;	
	text-decoration: none;
	top: 20%;
	left: 85%;
	z-index: 3;
	font: 1.5em;
}
#canvas {
	background-color: none;
	position: fixed;
	width: 15%;
	height: 15%;
	padding: 5px;
	top: -4.5%;
	left: 65%;
	z-index: 2;
}

.arrow-left {
	width: 0; 
	height: 0; 
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent; 
	border-right:15px solid blue; 
}

#caption {
	height: 55px;
}

#introbox {
	vertical-align: text-top;
	position: absolute;
	bottom: 0px;
	padding: 3%;
	border-top-left-radius :2em;
	border-top-right-radius :2em;
	background: rgba(0, 0, 0,.6);
}

/*----------------------------------------
=HEADER
----------------------------------------*/
#header {
	position: fixed;
	width: 100%;
	padding: 0px;
	background: #3b362c;
	list-style-type: none;
	vertical-align: text-top;
	z-index: 3;
}

#admin {
	position: absolute;
	right: 0;
	top:0;
	padding: 5px;
	color: #514734;
}
	
	.header h1 a {
		float: left;
		margin-left: 1%;
		font: 16px/18px Cambria,Helvetica,Arial,sans-serif;
		text-transform: uppercase;
		text-decoration: none;
		color: #FFF;
		vertical-align: text-top;
	}
	

/*----------------------------------------
=FOOTER
----------------------------------------*/
#footer {
	
	position: relative;
	bottom: -200px;
	left: 0;
	width: 100%;
	clear: both;
	overflow: auto;
	padding: 10px;
	background: #3b362c;
	color: #cbb384;
	font-size: 14px;
	z-index: 4;
}

/*----------------------------------------
=GALLERY
----------------------------------------*/
#gallery {
	margin: 0 auto;
	padding: 18px 0;
	width: 95%;
	overflow-x: hidden;
}

	#gallery h1 {
		margin-bottom: 0px;
		text-align: center;
		font: bold 1.75em Helvetica, Arial, sans-serif;
		
		-moz-text-shadow: #FFF 0 1px 0;
		-webkit-text-shadow: #FFF 0 1px 0;
		text-shadow: #FFF 0 1px 0;
	}
	

	#gallery article {
		position: relative;
		float: left;
		margin: 15px 2%;
		font: 12px/18px Helvetica, Arial, sans-serif;
		width: 23%;
		_width: 22.5%;
	}
	

		#gallery article a.inner {
			display: block;
			padding: 0px;
			text-decoration: none;
			background: #efeadf url("../images/item_background.png") bottom repeat-x;
			border: 1px solid #FFF;
			
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			-moz-box-shadow: #baaa89 0 0 10px;
			-webkit-box-shadow: #baaa89 0 0 10px;
			box-shadow: #baaa89 0 0 10px;
		}
		
			#gallery article a.inner:hover {
				-moz-box-shadow: #7d6d4d 0 0 35px;
				-webkit-box-shadow: #7d6d4d 0 0 35px;
				box-shadow: #7d6d4d 0 0 35px;
			}
		
		#gallery article img {
			display: block;
			margin-left: auto;
			margin-right: auto;
		}


/*----------------------------------------
=RESPONSIVE STYLING
----------------------------------------*/
@media screen and (min-width: 1150px) { /* Columns increased to 5 */
	
	#gallery article {
		width: 31%;
		margin-left: 0.75%;
		margin-right: 0.75%;
		overflow-x: hidden;
	}
	
	#gallery articlet {
		width: 20%;
		margin-left: 0.75%;
		margin-right: 0.75%;
		overflow-x: hidden;
	}
}

@media screen and (max-width: 1370px) { /* Columns decreased to 3 */
	
	#gallery article {
		width: 46%;
		margin-left: 1%;
		margin-right: 1%;
		overflow-x: hidden;
	}
	
}

@media screen and (max-width: 923px) { /* Columns decreased to 2 */

	#gallery article {
		margin-left: auto;
		margin-right: auto;
		width: 60%;
		overflow-x: hidden;
		position: center;
	}
	
		#gallery article a.inner {
			padding-top: 20px;
			padding-bottom: 20px;
		}
		
}

/* BEGIN PARALLAX CODE */

ol, ul  {
	list-style: none;
	font: 1.5em;
	text-decoration: none;
}

p {
	margin:1em 0;
	line-height:1.1em;
}

q {
	font-style:italic;
	color:#333;
}

h1 {
	font-size:2.91em;
	text-align: left;
	bottom: 100px;
}

h3 {
    font-size: 2em;
	text-align: center;
	bottom: 100px;
	color: #cbb384;
	font: Artial;
}


h2 {
	color:inherit;
	text-align: left;
	font-size:1.91em;
	margin:2em 0 1em 0;
}

h2:first-child {margin-top:0;}

h4 {
	color:#444;
	font-size:1.11em;
	margin:1em 0;
}

#progress {
	height:2%;
	background:#444;
	bottom:0;
	z-index:200;
}

#scrollbar {
	position:fixed;
	right:2px;
	height:50px;
	width:6px;
	background:#444;
	background:rgba(0,0,0,0.6);
	border:1px solid rgba(255,255,255,0.6);
	z-index:300;
	border-radius:3px;
}

.skrollr-desktop #scrollbar {display:none;}

#bg1 {
	z-index:-10;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../images/cropped-burlap-background.jpg) repeat 0 0;
}

#bg2 {
	z-index:0;
}

#bg3 {
	z-index:0;
	background-image:url(images/bubbles3.png);
}

#intro {
	width:100%;	
	height:100%;
	margin: 0;
	margin-left:auto;
	margin-right:auto;
	padding: 2%;
	background: #3b362c;
	background-image:url(../images/bg5.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	vertical-align: text-bottom;

	-webkit-transform-origin:0 0;
	-moz-transform-origin:0 0;
	-ms-transform-origin:0 0;
	-o-transform-origin:0 0;
	transform-origin:0 0;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#intro .arrows {
	font-size:2em;
	color:#09f;
}

#transform {
	width:20%;
	left:23%;
	top:15%;
	margin-left:-25%;
	text-align:center;
	font-size:150%;

	background: rgba(0, 0, 0,.6);
	.transform-origin(50%, 50%);
}

#properties {
	width:100%;
	height:100%;
	padding-top:10%;
	text-align:center;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#easing_wrapper {
	width:100%;
	height:100%;
}

#easing {
	top:10%;
	width:50%;
	z-index:101;
}

.drop {
	background:#09f;
	font-weight:bold;
	padding:1em;
}

#download {
	width:80%;
	left:10%;
	height:80%;
	padding:3em;
	border:0 solid #222;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* TABLE EXPANDER */

.removed{
    display:none;
}

.expands{
    cursor:pointer; cursor:hand;
}

.child1 td:first-child{
    padding-left: 1em;
}

.child2 td:first-child{
    padding-left: 2em;
}