@charset "UTF-8";
/* CSS Document */

#screen {
	position: absolute;
	width: 100%;
	height: 250px;
	background: #fff;
	overflow: hidden;
	border-bottom: #ddd solid 1px;
}
#screen img, canvas {
	position: absolute;
	left: -9999px;
	/* cursor: pointer; */
	image-rendering: optimizeSpeed;
	border: #eee solid 1px;
	border-radius: 6px;
}
#screen .href {
	border: #ccc dotted 1px;
}
#screen .fog1, #screen .fog2, #screen .fog3 {
	position: absolute;
	opacity: 0.08;
	filter: alpha(opacity=8);
	border-radius: 6px;
}
#screen .fog1 {
	background: #ff00ff;
}
#screen .fog2 {
	background: #0099ff;
}
#screen .fog3 {
	background: #0000cc;
}
#siteid {
	margin: 0;
	padding: 2px;
	position: absolute;
	left: 20px;
	top: 40px;
	width: 164px;
	height: 164px;
	z-index: 30000;
	background: #fff;
	border: #dddddd solid 1px;
	background-color: #ffffff;
	background-size: 150px;
	background-image: url(../img/jca_flag_2014.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 6px;
}
#siteid a {
	display: block;
	width: 100%;
	height: 100%;
}
#like {
	margin: 0;
	padding: 2px;
	position: absolute;
	left: 18px;
	top: 196px;
	width: 80px;
	height: 64px;
	z-index: 30001;
}
#bar {
	position: relative;
	left: 1em;
	top: 1em;
	height: 160px;
}
#bar .button {
	position: absolute;
	background: #222;
	width: 20px;
	height: 20px;
	cursor: pointer;
}
#bar .loaded {
	background: #666;
}
#bar .viewed {
	background: #fff;
}
#bar .selected {
	background: #f00;
}

@media (max-width: 767px) {
#like {
	top: 246px;
}
}