html{padding:0;margin:0;width:100%;height:100%;}
body{
	box-sizing:border-box;
	padding:0;
	margin:0;
	
	background: url('../img/background.jpg') 50% 0 repeat;
	width:100%;
	height:100%;
	
	border-top: 7px solid #9f5c48;
	
	font-family: "Roboto Slab", serif;
}

.game{
	width:950px;
	margin:0 auto;
	background:url('../img/page-header.png') 40px -7px no-repeat;
	padding-top:147px;
	min-height:585px;
	/*overflow:hidden;*/
	position:relative;
}
.game .game-options{
	min-height:550px;
}
/*HOME CSS*/
.game ul.home{
	list-style:none;
	padding:0;
	margin:0;
	font-size:15px;
	line-height:1.4;
	overflow:auto;
}
.game ul.home li{
	width:310px;
	margin-right:10px;
	float:left;
}
.game ul.home li:last-child{margin-right:0;}
.game ul.home a{
	box-sizing:border-box;
	display:block;
	width:310px;
	cursor:pointer;
	text-align:center;
	color:white;
    font-weight:bold;
	position:relative;
	padding:190px 25px 0;
}
.game ul.home a h2{font-size:30px;margin:0 0 30px}
.game ul.home a:after{
	width:151px;
	height:151px;
	position:absolute;
	border-radius:50%;
	left:80px;
	top:20px;	
}
.game ul.home a:before{
	position:absolute;
	left:69px;
	top:9px;
	width:173px;
	height:173px;
	border-radius:50%;
}
.game ul.home a:hover:before{
	content:'';
	background-color:currentColor;
	box-shadow:0 0 0 8px #fff;
}

.game ul.home a.learn{color:#b58729;}
.game ul.home a.learn:after{content:url('../img/learn.png');background-color:#b58729;}

.game ul.home a.find-places{color:#81515f;}
.game ul.home a.find-places:after{content:url('../img/find-places.png');background-color:#81515f;}

.game ul.home a.find-objects{color:#486266;}
.game ul.home a.find-objects:after{content:url('../img/find-objects.png');background-color:#486266;}

/*PLACES CSS*/
.game ul.places,
.game ul.objects{
	list-style:none;
	padding:0 0 30px;
	margin:35px 0 0;
	font-size:15px;
	line-height:1.4;
	background: url('../img/perfore-horizontal.png') center bottom repeat-x;
	height:324px;
}
.game ul.places li,
.game ul.objects li{
	width:230px;
	height:324px;
	margin-right:10px;
	float:left;
	background: none top left no-repeat;
	box-sizing:border-box;
	border-radius:5px;
	position:relative;
}
.game ul li.era > span{
    font-size: 22px;
    display: block;
    text-align: center;
    color: #b48729;
    line-height: 1.2;
    position: relative;
    z-index: 100;
    font-weight: bold;
}
.game ul.places li.highlight,
.game ul.objects li.highlight{
	background-color:rgba(255,255,255,0.4);
}
.game ul.places li:last-child,
.game ul.objects li:last-child{
	margin-right:0;
}
.game ul.places > li + li:before,
.game ul.objects > li + li:before{
	content:'';
	position:absolute;
	width:10px;
	height:100%;
	top:0;
	left:-10px;
	background:url('../img/perfore-vertical.png') center 0 repeat-y;
}

.game ul.place-items{
	margin:45px auto 0 auto;
	padding:0;
	list-style:none;
	width:747px;
	text-align:center;
}
.game ul.place-items li{
	display:inline-block;
	width:80px;
	height:54px;
	margin:0 7px 10px;
	box-sizing:border-box;
	transition:border 0.2s linear;
}
.game ul.place-items li .photo{
	width:80px;
	transform-origin: 50% 50%;
	transition:transform 0.2s linear 0s, z-index 0.2s linear 0s;
	z-index:1!important;
	box-shadow:1px 1px 5px -2px #000;
}
.game ul.place-items li:not(.placed) .photo:hover {
    transform: scale(3.875);
	z-index:30!important;
	border:2px solid #bf9c51;
}

.game ul.place-items li.active{border:4px solid #bf9c51;}
.game ul.place-items li.active .photo{box-shadow:0 0 3px -1px #000;}
.game ul.place-items li.placed{border:1px solid #bf9c51;}
.game ul.place-items li:last-child{margin-right:0;}
.game ul.place-items li img{display:block;cursor:pointer;width:100%;}

.game ul.place-items li.placed .photo {
    background-color: white;
    box-shadow: 0 0 4px -1px #000000;
    padding: 5px 5px 25px;
	z-index:auto!important;
}
.game ul.place-items li.placed .photo img{
	outline: 1px solid #999;
}
.game  li:nth-child(1).placed .photo{ transform:  rotate(10deg);}
.game  li:nth-child(2n).placed .photo{ transform: rotate(-13deg);}
.game  li:nth-child(3n).placed .photo{ transform: rotate(6deg);}
.game  li:nth-child(4n).placed .photo{ transform: rotate(18deg);}
.game  li:nth-child(5n).placed .photo{ transform: rotate(-9deg);}
.game  li:nth-child(6n).placed .photo{ transform: rotate(-2deg);}
.game  li:nth-child(7n).placed .photo{ transform: rotate(9deg);}

.game ul.place-items li.placed .photo:hover,
.game ul.object-items li.placed .photo:hover{transform:scale(3);z-index:999!important;}

/*OBJECTS CSS*/
.game ul.object-items{
	margin:45px auto 0 auto;
	padding:0;
	list-style:none;
	width:747px;
	text-align:center;
}
.game ul.object-items li{
	display:inline-block;
	width:80px;
	height:54px;
	box-sizing:border-box;
	transition:border 0.1s linear;
	margin:0 7px 10px;
}
.game ul.object-items li .photo{
	width:80px;
	cursor:pointer;
	transform-origin: 50% 50%;
	transition:transform 0.2s linear 0s, z-index 0.2s linear 0s;
	z-index:1!important;
	box-shadow:1px 1px 5px -2px #000;
}
.game ul.object-items li:not(.placed) .photo:hover {
    transform: scale(3.875);
	z-index:30!important;
	border:2px solid #bf9c51;
}
.game ul.object-items li.active{border:4px solid #bf9c51;}
.game ul.object-items li.active .photo{box-shadow:0 0 3px -1px #000;}
.game ul.object-items li.placed{border:1px solid #bf9c51;}
.game ul.object-items li:last-child{margin-right:0;}
.game ul.object-items li img{display:block;width:100%;}

.game ul.object-items li.placed .photo {
    background-color: white;
    box-shadow: 0 0 4px -1px #000000;
    padding: 5px 5px 25px;
	z-index:auto!important;
}
.game ul.object-items li.placed .photo img{
	outline: 1px solid #999;
}


/*GENERIC CSS*/

.game .message{
	box-sizing:border-box;
	position:absolute;
	top:130px;
	width:570px;
	padding:30px 65px;
	left:185px;
	box-shadow:0 0 4px -1px #000;
	color:white;
	z-index:2000;
}
.game .message > *{position:relative;z-index:2500;text-align:center;}
.game .message .overlay{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:1500;
}
.game .message h1{font-size:28px;line-height:28px;padding:0 0 10px 0;margin:0;font-weight:normal;}
.game .message h3{font-size:17px;line-height:1.2;padding:0 0 25px 0;margin:0;/*font-weight:normal;*/}
.game .message h3 a {
    color: #E6C02F;
    display: inline-block;
    font-size: 17px;
    font-style: italic;
    margin-top: 20px;
    padding: 5px;
}
.game .message .description{font-size:13px;line-height:1.35;padding:0 0 25px 0;margin:0;font-weight:normal;}
.game .retry{background:transparent;}
.game .message.retry{box-shadow: none;top: 230px;}
.game .continue{background:#b16d57;}
.game .finished{background:#915f7a;}
.game .info{background:#b58729;}
.game .startup{background:#b58729;}
.game .replay{background:#517383;}

.game .info h3{font-size:15px;line-height:1.4;}

.game .actions{text-align:center;position:static;}
.game .button{
	position:relative;
	z-index:268500;
	color:white;
	font-size:20px;
	/*font-weight:bold;*/
	display:inline-block;
	cursor:pointer;
	box-sizing:border-box;
	border-radius:6px;
	text-align:center;
	transition:transform 0.2s;
}

.game .retry .button{background:#11556e;width:270px;line-height:55px;box-shadow:5px 5px 1px #b08428}
.game .continue .button{background:#85ced4;width:215px;line-height:55px;box-shadow:5px 5px 1px #895543}
.game .finished .button{background:#b48729;width:371px;line-height:55px;box-shadow:5px 5px 1px #664356}
.game .replay .button{background:#85ced4;width:412px;line-height:55px;box-shadow:5px 5px 1px #105169}
.game .startup .button{background:#85ced4;width:215px;line-height:55px;box-shadow:5px 5px 1px #9c6927}

.game .replay .button.close{
	position:absolute;
	right:5px;
	top:0px;
	font-size:36px;
	font-weight:normal;
	line-height:1;
	font-family:courier;
	width:auto;
	background:none;
	box-shadow:none;
}
.game .info .button{
	position:absolute;
	right:5px;
	top:0px;
	font-size:36px;
	font-weight:normal;
	line-height:1;
	font-family:courier;
}
.stage{
	margin-top:9px;
	float:left;
	width:693px;
	height:512px;
	position:relative;
	margin-left:-7px;
}

/*Fancybox Overrides*/
#objects-popup{
	border-top:7px solid #b9642b;
	background:#ffffff;
	padding:20px 15px 45px 20px;
	height:365px;
	width:766px;
	display:none;
}
/*Fancybox specifics*/
.timeline-popup .fancybox-skin{
	border-radius:0;
}
.timeline-popup .custom-close-button{
	color: #F1F0EC;
	font-size: 40px;
	position: absolute;
	right: -30px;
	top: 0;
	cursor:pointer;
}

.objects-popup .fancybox-skin{
	border-radius:0;
}
.objects-popup .custom-close-button{
	color: #F1F0EC;
	font-size: 40px;
	position: absolute;
	right: -30px;
	top: 0;
	cursor:pointer;
}

footer {
    height: 70px;
    font-family: "Roboto Slab",serif;
    color: #7C7D80;
    font-size: 15px;
    z-index: 100;
	width: 960px;
	margin: 0px auto;
	position: relative;
}

/*temporary kiosk styling*/
.kiosk-return {
	cursor:pointer;
    display: block;
    height: 93px;
    left: 0;
    position: absolute;
    top: 0;
    width: 245px;
}