/**
* 틀린 그림 찾기 index.html 용 css
*/

/** 공용 */
.clearB{clear:both;}
.transitionAll{
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}


/** 디자인 */
html,body{padding:0; margin:0;width:100%; height:100%; -webkit-tap-highlight-color:transparent;}

#layout{min-width:300px;; top:0;left:0;right:0;bottom:0;}
#contnets{max-width:1000px; margin:0 auto;}

header{padding:1px; margin:0; background-color:#eee;}
header h1{font-size:20px;text-align:center;padding:0;margin:0;}

section{padding:1px;}
#stageTitle{font-size:18px;text-align:center;padding:2px 0;margin:0;}
progress#gameTimer{display:block;padding:0;margin:0;width:100%; height:20px;}

#divL,#divR,#divD{float:left;width:50%;}
#divDivL,#divDivR,#divDivD{padding:2px;background-color:#eee;}
#divDivL{background-image:url('./img/gate_L.png');background-position:center center;background-repeat:no-repeat;}
#divDivR{background-image:url('./img/gate_R.png');background-position:center center;background-repeat:no-repeat;}
#divDivL,#divDivD{border-right:1px solid #ccc;}
#divDivR{border-left:1px solid #ccc;}
#figureL,#figureR,#figureD{padding:0;margin:0;position:relative;}
#imgL,#imgR{max-width:100%;position:relative;margin:0 auto; display:block;}
.divCanvas{max-width:100%;width:100%;position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer;margin:0 auto;}
.divCanvasD{display:none}
#canvasL,#canvasR,#canvasD,#divClickL,#divClickR{max-width:100%;cursor:pointer;margin:0 auto;display:block}
#divClickL,#divClickR{background-color:#fff;height:100%;border-width:0; padding:0;margin:0 auto; opacity:0; display:block;}


#secCnt{text-align:center;height:0px; overflow:visible;position:relative;z-index:1;font-size:24px; opacity:0.5}
#searchCnt{color:green; font-weight:bold}
#goalCnt{color:red; font-weight:bold}

/**
* 상태에 따른 동작
*/
.stat-0 .stat-2-obj {display:none !important;}
.stat-1 .stat-2-obj {display:none !important;}

.stat-0 .stat-0-hidden {visibility:hidden !important;}
.stat-1 .stat-1-hidden {visibility:hidden !important;}


/*.divCanvasD{display:block !important;}*/



/** progress bar 관련 */

progress:not(value) {
	/* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
}

/* Styling the determinate progress element */

progress[value] {
	/* Get rid of the default appearance */
	appearance: none;
	
	/* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
	border: none;
	
	/* Add dimensions */
	width: 100%; 
	
	/* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
	  background-color: whiteSmoke;
	  border-radius: 3px;
	  box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
	
	/* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
	color: royalblue;
	
	position: relative;
	margin: 0 0 1.5em; 
}

/*
Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element.
-webkit-progress-bar -> To style the progress element container
-webkit-progress-value -> To style the progress element value.
*/

progress[value]::-webkit-progress-bar {
	background-color: whiteSmoke;
	border-radius: 3px;
	box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
}

progress[value]::-webkit-progress-value {
	position: relative;
	
	background-size: 35px 20px, 100% 100%, 100% 100%;
	border-radius:3px;
	
	/* Let's animate this */
	animation: animate-stripes 5s linear infinite;
}

@keyframes animate-stripes { 100% { background-position: -100px 0; } }

/* Let's spice up things little bit by using pseudo elements. */
progress[value]::-webkit-progress-value {
  background-image:
	   -webkit-linear-gradient(-45deg, 
	                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
	                           rgba(0,0, 0, .1) 66%, transparent 66%),
	   -webkit-linear-gradient(top, 
	                           rgba(255, 255, 255, .25), 
	                           rgba(0, 0, 0, .25)),
	   -webkit-linear-gradient(left, #09c, #f44);

    border-radius: 2px; 
    background-size: 35px 20px, 100% 100%, 100% 100%;
}
progress[value]::-webkit-progress-value:after {
	/* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! */
	content: '';
	position: absolute;
	
	width:5px; height:5px;
	top:7px; right:7px;
	
	background-color: white;
	border-radius: 100%;
}

/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */

progress[value]::-moz-progress-bar {
	/* Gradient background with Stripes */
	background-image:
	-moz-linear-gradient( 135deg,
													 transparent,
													 transparent 33%,
													 rgba(0,0,0,.1) 33%,
													 rgba(0,0,0,.1) 66%,
													 transparent 66%),
    -moz-linear-gradient( top,
														rgba(255, 255, 255, .25),
														rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #f44);
	
	background-size: 35px 20px, 100% 100%, 100% 100%;
	border-radius:3px;
	
	/* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */
}