@font-face {
	font-family: "tecon";
	src: url('../includes/tecon.ttf');
}

@font-face {
	font-family: "scorchedearth";
	src: url('../includes/scorchedearth.otf');
}


html,body{
	margin:0px;
	height:100%;
}
body{
	background:#7f6d68 /* url('../images/test.png') top right repeat-y */;
	overflow-y:scroll;
	overflow-x:hidden;
	transition:background-color 2s ease-in-out;
	-webkit-transition:background-color 2s ease-in-out;
	-moz-transition:background-color 2s ease-in-out;
	font-size:10pt;
	line-height:15pt;
}

#foreground{
	z-index:2;
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
}

#foreground #brand{
	z-index:1;
	height:415px;
	width:84px;
	position:fixed;
	top:60px;
	left:0px;
	opacity:1;
	transition:filter 2s ease-in-out;
	-webkit-transition:filter 2s ease-in-out;
	-moz-transition:filter 2s ease-in-out;
}

	#foreground #brand h1{
		margin:0;
		padding:0;
		position:absolute;
		top:-32pt;
		right:-5px;
		transform: rotate(-90deg);
		transform-origin: bottom right;
		font-size:32pt;
		line-height:32pt;
		text-transform:uppercase;
		font-family:"scorchedearth";
		color: #83776c; 
		background: -webkit-linear-gradient(#EEEEEE, #AAAAAA);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-shadow: 
			-2px -2px 0 #371b1b, 
			2px -2px 0 #371b1b, 
			-2px 2px 0 #371b1b, 
			2px 2px 0 #371b1b, 
			4px 4px 4px rgba(0, 0, 0, 0.5),
			-5px -5px 10px #7d463e,
			5px 5px 10px #7d463e; 
		letter-spacing: 2px; 
		text-wrap:nowrap;
	}

#foreground #loading{
	z-index:1;
	position:fixed;
	top:50%;
	margin-top:-100px;
	left:151px;
	background: rgba(0,0,0,.8);
	width:500px;
	height:200px;
	border:2px solid #927A3D;
	border-radius:15px;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	pointer-events:none;
}

#loading h3{text-align:center;
	margin-top:15px;
	font-family:"Trebuchet MS";
	color:#927A3D;
	font-size:20pt;
	text-shadow: 2px 2px 2px #000;
}

#loading #spin{
	height:66px;
	width:66px;
	background:url('../images/icons/load.gif');
	margin:0px auto;
}

#loading.off{opacity:0;}
#loading.on{opacity:1;}


#foreground #container{
	z-index:1;
	background: url('../images/pill_left.png') repeat-y left, url('../images/pill_right.png') repeat-y right, url('../images/content_bg.png') repeat-y center;
	position:absolute;
	top:0px;
	left:59px;
	min-height:100%;
	width:684px;
}

#foreground #container #content{
	margin-left:42px;
	width:600px;
	height:100%;
	min-height:100%;
}

#foreground #cap_top, 
#foreground #cap_bot{
	z-index:2;
	position:fixed;
	left:101px;
	height:318px;
	width:600px;
	pointer-events:none;
	transition:filter 2s ease-in-out;
	-webkit-transition:filter 2s ease-in-out;
	-moz-transition:filter 2s ease-in-out;
}

#foreground #cap_top{ top:-50px; }
#foreground #cap_bot{ bottom:-50px;}

	#foreground #cap_top #design_eye{
		height:100px;
		width:100px;
		position:absolute;
		z-index:0;
		top:47px;
		left:151px;
		background-size:cover;
		background-repeat:no-repeat;
		background-image:url('../images/eye.png');
		transition:background-position 1s ease-in;
		-webkit-transition:background-position 1s ease-in;
		-moz-transition:background-position 1s ease-in;
	}

	#foreground #cap_top #design_top, 
	#foreground #cap_bot #design_bot{
		height:100%;
		width:100%;
		position:absolute;
		top:0;
		left:0;
		background-repeat:no-repeat;
	}
	
	#foreground #cap_top #design_top{ background-image:url('../images/cap_top_eye.png');background-position:bottom; }
	#foreground #cap_bot #design_bot{ background-image:url('../images/cap_bot.png');background-position:top; }

	#foreground #cap_top #lnks_top,
	#foreground #cap_bot #lnks_bot{
		border-bottom: 1px solid #725415;
		font-size:0;
		position:relative;
		z-index:0;
		height:56px;
		width:100%;
		margin-top:131px;
		pointer-events:all;
	}
	
	#foreground #cap_top #lnks_top{ border-bottom: 1px solid #725415;text-align:right;background:linear-gradient(to bottom, #333333, #535353); }
	#foreground #cap_bot #lnks_bot{ border-top: 1px solid #725415;text-align:left;background:linear-gradient(to top, #333333, #535353); }

		#lnks_top a, 
		#lnks_bot a{
			font-variant:small-caps;
			text-transform:uppercase;
			font-family:"scorchedearth";
			text-shadow:
				-1px -1px 0 #000, 
				1px -1px 0 #000, 
				-1px 1px 0 #000, 
				1px 1px 0 #000,
				-3px -3px 5px #7d463e,
				3px 3px 5px #7d463e; 
			letter-spacing:1px;
			text-decoration:none;
			color:#b2a999;
			font-size:11pt;
			display:inline-block;
			margin:0;
			padding:0 20px 0 20px;
			border-left:1px solid #000;
			border-right:1px solid #444;
			line-height:40px;
			transition:all .5s ease-in-out;
			-moz-transition:all .5s ease-in-out;
			-webkit-transition:all .5s ease-in-out;
		}
		
		#lnks_top a{margin-top:10px;padding-top:6px;}
		#lnks_bot a{margin-bottom:10px;padding-bottom:6px;}

		#lnks_top a:hover, 
		#lnks_bot a:hover{color:#FFF;background-color:#856019;}

	#foreground #cap_bot #footer{
		position:relative;
		z-index:3;
		height:25px;
		line-height:25px;
		width:100%;
		margin-top:55px;
		float:left;
		background-color:rgba(0,0,0,.5);
		font-family:"Trebuchet MS";
		color:#927A3D;
		font-weight:bold;
		text-shadow: 2px 2px 2px #000;
	}

		#foreground #cap_bot #footer a{
			color:#999;
			text-decoration:none;
		}

			#foreground #cap_bot #footer a:hover{
				color:#C8C1B5;
				background:#7F5B19;
			}

			#foreground #cap_bot #footer #copyright{
				float:right;
				margin:0 10px 0 0;
			}

#top_pad {height:145px;}
#bot_pad {height:190px;}

#background{z-index:1;position:fixed;top:0px;left:0px;height:100%;width:100%;}
#background #ocean{z-index:3;position:absolute;bottom:0px;left:0px;background:url('../images/bg_ocean.png') repeat-x;background-position:0px 0px;width:100%;height:307px;opacity:.8;transition:filter 2s ease-in-out;-moz-transition:filter 2s ease-in-out;-wekbit-transition:filter 2s ease-in-out;}
#background #moon{z-index:1;position:absolute;bottom:0px;right:0px;background:url('../images/moon.png') no-repeat;width:521px;height:423px;transition:filter 2s ease-in-out;-moz-transition:filter 2s ease-in-out;-webkit-transition:filter 2s ease-in-out;}
#background #clouds{z-index:3;position:absolute;top:0px;left:0px;background:url('../images/bg_clouds.png') repeat-x;background-position:0px 0px;width:100%;height:608px;transition:filter 2s ease-in-out;-moz-transition:filter 2s ease-in-out;-webkit-transition:filter 2s ease-in-out;}
#background #sprite{z-index:2;position:absolute;bottom:160px;right:380px;height:349px;width:402px;border-radius:5px;background:url('../images/steampunkCastle.png');}


/* Different elements within #content */

#content_main h2:nth-of-type(1){padding-left:120px;}
#content_main h2{
	font-size:16pt;
	font-family:"scorchedearth";
	color:#927A3D;
	font-variant:small-caps;
	margin:0;
	padding-left:15px;
	padding-top:5px;
	padding-bottom:5px;
	background:rgba(0,0,0,.6);
	text-shadow: 2px 2px 2px #000;
}

#content_main h2 a{
	color:#927A3D;
	border-bottom:1px solid #C6B88F;
	text-decoration:none;
}

#content_main h2 a:hover{
	color:#C6B88F;
	border-bottom:1px solid #927A3D;
}

#content_main span.space{display:block;width:100%;height:40px;}

#content_main div.collapsed h3.a, #content_main div.expanded h3.a{
	z-index:2;
	position:sticky;
	top:140px;
	font-family:"Trebuchet MS";
	color:#927A3D;
	font-variant:small-caps;
	margin:0;
	font-size:13pt;
	padding-left:120px;
	padding-top:5px;
	padding-bottom:5px;
	border-top:1px solid #5C4B45;
	text-shadow: 2px 2px 2px #000;
	cursor:pointer;
	-webkit-user-select: none;  /* Chrome all / Safari all */
  	-moz-user-select: none;     /* Firefox all */
  	-ms-user-select: none;      /* IE 10+ */
  	user-select: none;
}
#content_main div.expanded h3.a{background:rgba(50, 50, 50, .8);}
#content_main div.collapsed h3.a{background:rgba(30, 30, 30, .6);}

#content_main div.collapsed h3 span,#content_main div.expanded h3 span{
	height:24px;
	width:24px;
	line-height:20px;
	border-radius:5px;
	background-color:#111;
	float:right;
	text-align:center;
	margin-right:10px;
	transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
}
#content_main div.collapsed h3 span{
	-ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
#content_main div.expanded h3 span{
	-ms-transform: rotate(-90deg); 
    -webkit-transform: rotate(-90deg); 
    transform: rotate(-90deg);	
}

#content_main div.collapsed div,#content_main div.expanded div{
	width:100%;
	overflow:hidden;
	transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
}
#content_main div.collapsed div{max-height:0;opacity:0;padding:0;}
#content_main div.expanded div{max-height:2000px;opacity:1;padding-top:10px;padding-bottom:10px;}

#content_main div.collapsed div a, #content_main div.expanded div a{
	border-radius:5px;
	float:left;
	padding-top:2px;
	padding-bottom:2px;
	font-family:"Trebuchet MS";
	background:rgba(10,10,10,.8);
	width:24%;
	margin:1px;
	text-decoration:none;	
	text-shadow: 2px 2px 2px #000;
	color:#927A3D;
	font-variant:small-caps;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
#content_main div.collapsed div a:hover, #content_main div.expanded div a:hover{
	color:#C6B88F;
}

#content_main .sublinks{
	position:relative;
	top:-30px;
	height:25px;
	width:100%;
	text-align:right;
}

#content .sublinks a{
	font-weight:bold;
	float:right;
	color:#999;
	text-decoration:none;
	padding-left:10px;
	padding-right:10px;
	margin-right:2px;
	height:100%;
	font-family:"Trebuchet MS";
	text-shadow: 2px 2px 2px #40211E;
	border-left:1px solid #927A3D;
}
	
#content .sublinks a:hover{
	color:#C8C1B5;
	background:#7F5B19;
}

#content p{
	text-shadow: 2px 2px 2px #000;
	color:#C6B88F;
	text-align:justify;
	width:95%;
	display:block;
	margin:0px auto;
	font-family:"Trebuchet MS";
	padding-bottom:20px;	
}

#content .story p:first-letter {
	font-family:"tecon";
	color: #927A3D;
	float: left;
	font-size: 35px;
	padding-right: 15px;
} 

#content .story p:first-of-type:first-letter{
	margin-left:30px;
}

#content .story p a{
	color:#927A3D;
	border-bottom:1px solid #C6B88F;
	text-decoration:none;
}

#content .picList{
	width:100%;
	text-align:center;
}

#content .picList a img{
	border-radius:5px;
	margin:10px;
	border:2px solid #705729;
	opacity:.5;
}

#content .picList a:hover img{
	opacity:1;
}

#content .objList, #content .objList div{
	width:100%;
	display:block;
	margin:0;
	padding:0;
}

#content .objList div{
	overflow:hidden;
	cursor:pointer;
}

#content .objList div:nth-child(even){
	background:rgba(0,0,0,.3);	
}

#content .objList div.thbContSq,#content .objList div.thbContRect{
	background:#000 url('../images/icons/load.gif') no-repeat center;
	padding:0;
	border-radius:5px;
	margin-left:1%;
	margin-right:1%;
	margin-top:5px;
	margin-bottom:5px;
	border:2px solid #705729;
	opacity:.5;
	float:left;
	transition:none;
	-moz-transition:none;
	-webkit-transition:none;
}
#content .objList div.thbContSq{max-height:150px;height:150px;width:150px;}
#content .objList div.thbContSq img{height:140%;}
#content .objList div.thbContRect{max-height:100px;height:100px;width:170px;}
#content .objList div.thbContRect img{width:140%;}



#content .objList div:hover div.thbContSq,#content .objList div:hover div.thbContRect{
	opacity:1;
}

#content .objList div span{
	display:block;
	margin-top:5px;
	width:65%;
	float:left;
	text-shadow: 2px 2px 2px #000;
	color:#C6B88F;
	font-family:"Trebuchet MS";
	word-break:break-all;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

#content .objList div span h4{
	margin:0;
	padding:0 0 10px 10px;
	font-size:12pt;
	width:100%;
	font-family:"Trebuchet MS";
	color:#927A3D;
	text-shadow: 2px 2px 2px #000;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}

#toolTip{
	z-index:11;
	background:rgba(0,0,0,.7);
	border-radius:10px;
	min-height:30px;
	width:300px;
	text-shadow: 2px 2px 2px #000;
	color:#C6B88F;
	position:absolute;
	top:0px;
	left:0px;
	font-family:"Trebuchet MS";
	padding:5px;
	transition:opacity .5s ease-in-out;
	-moz-transition:opacity .5s ease-in-out;
	-webkit-transition:opacity .5s ease-in-out;
	pointer-events:none;
}

.toolOpen{
	opacity:1;
}

.toolClose{
	opacity:0;
}

#fullDescript{
	z-index:10;
	overflow:hidden;
	position:fixed;
	top:4%;
	height:92%;
	left:718px;
	background:rgba(0,0,0,.8);
	border-top-right-radius:15px;
	border-bottom-right-radius:15px;
	transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
}

#fullDescript #mainDescript{
	position:relative;
	text-align:center;
	height:90%;
	width:96%;
	margin-left:2%;
	margin-right:2%;
	overflow:hidden;
}

#fullDescript #mainDescript img{
	border-radius:15px;
	border:2px solid #705729;
	max-width:92%;
}

#fullDescript #mainDescript p{
	text-shadow: 2px 2px 2px #000;
	color:#C6B88F;
	max-width:92%;
	display:block;
	margin:0px auto;
	font-family:"Trebuchet MS";
}

#fullDescript h2{
	font-size:16pt;
	margin-top:0;
	padding-top:0;
	color:#C6B88F;
	font-family:"Trebuchet MS";	
	text-shadow: 2px 2px 2px #000;
}

#fullDescript #fdClose{
	line-height:15px;
	float:right;
	font-weight:bold;
	font-family:Arial;
	color:#645751;
	text-decoration:none;
	display:block;
	margin-top:10px;
	margin-right:10px;
	padding:5px;
}

#fullDescript #fdClose:hover{
	background:#645751;
	border-radius:3px;
	color:#231112;
}

.fullDescriptClose{
	width:1px;
	opacity:0;
}

.fullDescriptOpen{
	width:40%;
	opacity:1;
}