@charset "UTF-8";
body{
	margin:0;
	padding:0;	
	font-family:"ヒラギノ明朝 Pro W3","ＭＳ Ｐ明朝", "MS PMincho", "Hiragino Mincho Pro", serif;
	font-size:13px;
	line-height:1.3;
	background-image:url(../img/opening.png);
	background-position:center -50px;
	background-repeat:no-repeat;
	background-color:#f5f5f5;
}

#opening_pic{
	position:absolute;
	top:-50px;
	-webkit-transition-property:all;
	-webkit-transition-duration:1s;
	-webkit-transition-timing-function:ease-in;
}

#wrapper{
	width:320px;
	height:356px;
	background:-webkit-gradient(linear,center top,center bottom,from(#222),color-stop(40%,#666),color-stop(50%,#888),color-stop(60%,#666), to(#222) );
	margin:0 auto;
	position:relative;
}


#content{
	padding-top:18px;
	width:320px;
	height:320px;
	overflow:hidden;
	display:-webkit-box;
	-webkit-box-align:center;
	-webkit-box-pack:center;
	position:relative;
}

#photo_area{
	width:280px;
	border-radius:5px;
	background-color:#222;
	position:relative;
	-webkit-transition-property:height,opacity;
}


#tracebox{
	font-size:12px;
	color:black;
	position:absolute;
	top:10px;
	left:10px;
}

@-webkit-keyframes verification_animation{
	0%{-webkit-transform:scale(0,0);}
	30%{-webkit-transform:scale(1.1,1.1);}
	45%{-webkit-transform:scale(0.9,0.9);}
	60%{-webkit-transform:scale(1.05,1.05);}
	75%{-webkit-transform:scale(0.95,0.95);}
	100%{-webkit-transform:scale(1,1);}
}


#welcome{
	padding-top:1.3em;
	width:280px;
	height:255px;
	text-align:center;
	top:40px;
	border-radius:5px;
	margin-left:20px;
	-webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.4);
	background:-webkit-gradient(linear,center top,center bottom,from(rgb(166,194,212)),color-stop(8%,rgb(205,221,230)),color-stop(32%,rgb(179,203,217)),color-stop(75%,rgb(129,169,192)), to(rgb(116,157,179)) );
	opacity:0;
	-webkit-transform:scale(0,0);
	-webkit-transition-property:all;
	-webkit-transition-duration:0.5s;
	-webkit-transition-timing-function:ease-in;
	position:absolute;
	z-index:5;
}

h1,h2{
	font-size:1.1em;	
	width:240px;
	margin: 0 auto;
	text-align:left;
	text-justify:distribute;
}
h1{
	margin-bottom: -0.4em;
}
h2{
	padding-top:1.7em;
	font-weight:100;
	font-size:0.9em;
	
}

.type_select{
	font-weight:100;
}

#select_file_name{
	-webkit-transform:scaleX(1);
	margin-left:24px;
}

#select_web_btn,#select_ready_btn{
	text-align:left;
	margin-left:34px;
}


#upload_btn input,#load_btn input,#select_pic_btn input{
	width:8em;
	padding:0;
	height:1.8em;
	border-radius:6px;
	background-color:white;
	text-decoration:none;
	border:solid 1px rgba(0,0,0,0.6);
	-webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.4);
	background:-webkit-gradient(linear,center top,center bottom,from(rgb(190,190,190)),color-stop(8%,rgb(200,200,200)),color-stop(32%,rgb(255,255,255)),color-stop(75%,rgb(210,210,210)), to(rgb(150,150,150)) );
	margin-top:0.6em;
}

#upload_btn,#input_pic_url,#load_btn,#select_pic_btn{
	-webkit-transform:scaleY(0);
	-webkit-transform-origin:top;
	opacity:0;
	-webkit-transition-property:all;
	-webkit-transition-duration:0.5s;
	-webkit-transition-timing-function:ease-in;
	display:none;
}

#input_pic_url,#load_btn{
	margin-bottom:-1.99em;
}

div.type_select{
	/*margin-left:6.5em;
	padding-left:24px;*/
	font-size:0.9em;
	cursor:pointer;
}

div.type_select input{
		
}

#input_pic_url input{
	width:228px;
}

#error_message_mask{
	background-color:rgba(255,0,0,0);
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	/*bottom:0;
	padding-top:1.3em;
	width:280px;
	height:255px;*/
}

#error_message{
	padding:1em 0.7em;
	padding.bottom:1.5em;
	width:190px;
	border-radius:5px;
	-webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.4);
	position:absolute;
	left:36px;
	line-height:1.25;
	background:-webkit-gradient(linear,center top,center bottom,from(rgba(20,10,5,0.7)),color-stop(40%,rgba(20,10,5,0.5)),to(rgba(20,10,5,0.8)) );
	-webkit-transform:scale(0,0);
	-webkit-transition-property:all;
	-webkit-transition-duration:0.5s;
	-webkit-transition-timing-function:ease-in;
	top:50%;
	color:white;
}
#error_message img{
	position:absolute;
	display:block;
	right:8px;
	bottom:8px;
	cursor:pointer;
}


#palet{
	/*display:none;*/
	padding-top:1em;
	width:210px;
	height:130px;
	text-align:center;
	top:88px;
	border-radius:5px;
	left:160px;
	margin-left:-105px;
	-webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.4);
	background:-webkit-gradient(linear,center top,center bottom,from(rgb(166,194,212)),color-stop(8%,rgb(205,221,230)),color-stop(32%,rgb(179,203,217)),color-stop(75%,rgb(129,169,192)), to(rgb(116,157,179)) );
	opacity:0;
	-webkit-transform:scale(0,0);
	-webkit-transition-property:all;
	-webkit-transition-duration:0.5s;
	-webkit-transition-timing-function:ease-in;
	position:absolute;
	z-index:5;
}

.color_select{
	margin-top:1.7em;
	margin-bottom:0.5em;
	margin-left:-2px;
	font-size:12px;
}

.color_select input{
	width:1.3em;
	height:1.3em;
	border:none;
	content:normal;
	padding:0;
	min-width:1em;
	border-radius:2px;
	margin-left:4px;
	-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.4);
}

.black{
	background:-webkit-gradient(linear,center top,
				center bottom,from(#222),
				color-stop(10%,#333),
				color-stop(40%,#777),
				color-stop(70%,#333),
				to(#111));
}

.white{
	background:-webkit-gradient(linear,center top,
				center bottom,from(#ccc),
				color-stop(5%,#ddd),
				color-stop(40%,#fff),
				color-stop(70%,#ddd),
				to(#aaa));
}

.magenta{
	background:-webkit-gradient(linear,center top,
				center bottom,from(#c0c),
				color-stop(10%,#f4f),
				color-stop(40%,#f9f),
				color-stop(70%,#f4f),
				to(#c0c));
}

.blue{
	background:-webkit-gradient(linear,center top,
				center bottom,from(#00c),
				color-stop(10%,#44f),
				color-stop(40%,#99f),
				color-stop(70%,#44f),
				to(#00c));
}

#write_select{
	font-size:12px;
	margin-top:0.8px;	
	/*background-color:rgba(100,100,0,0.5);*/
	text-align:left;
	width:140px;
	margin-left:auto;
	margin-right:auto;
}

#write_control{
	width:300px;
	
	padding:10px 10px 0;
	position:absolute;
	left:0px;
	bottom:4px;
	opacity:0;
	-webkit-transition-property:opacity;
	-webkit-transition-duration:0.5s;
	-webkit-transition-timing-function:ease-in;
	/*background-color:rgba(100,100,0,0.5);*/
	z-index:4;
}

#write_control .color_select{
	color:white;
	margin-top:0;
	float:left;
}

#write_control .color_select input{
	margin-left:2px;	
}
#stop_btn{
	margin-top:-2px;
	float:right;
	-webkit-transition-property:opacity;
	-webkit-transition-duration:0.5s;
	-webkit-transition-timing-function:ease-out;	
}

#stop_btn input{
	margin:0 0 0 1px;;	
}

#inputbox{
	padding-top:0.8em;
	padding-bottom: 0.8em;
	width:210px;
	height:142px;
	text-align:center;
	top:84px;
	border-radius:5px;
	left:160px;
	margin-left:-105px;
	-webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.4);
	background:-webkit-gradient(linear,center top,center bottom,from(rgb(166,194,212)),color-stop(8%,rgb(205,221,230)),color-stop(32%,rgb(179,203,217)),color-stop(75%,rgb(129,169,192)), to(rgb(116,157,179)) );
	opacity:0;
	-webkit-transform:scale(0,0);
	-webkit-transition-property:all;
	-webkit-transition-duration:0.5s;
	-webkit-transition-timing-function:ease-in;
	position:absolute;
	z-index:5;
}
#text_input_box textarea{
	margin-top:1em;
	resize:none;
	overflow:visible;	
}

#input_control_box{
	margin-top:0.3em;
}

#select_div_qt{
	padding-top:10px;
	width:210px;
	height:140px;
	text-align:center;
	top:88px;
	left:160px;
	margin-left:-105px;
	border-radius:5px;
	-webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.4);
	background:-webkit-gradient(linear,center top,center bottom,from(rgb(166,194,212)),color-stop(8%,rgb(205,221,230)),color-stop(32%,rgb(179,203,217)),color-stop(75%,rgb(129,169,192)), to(rgb(116,157,179)) );
	opacity:0;
	-webkit-transform:scale(0,0);
	-webkit-transition-property:all;
	-webkit-transition-duration:0.5s;
	-webkit-transition-timing-function:ease-in;
	position:absolute;
	z-index:5;
	/*display:none;*/
}

#select_div_message,#select_qt_input,#shuffle_times{
	margin-top:10px;
	margin-bottom:8px;
	
}

#shuffle_times{
	font-size:0.8em;
}
#shuffle_times .select_div_message{
	text-align:left;
	float:left;
	margin-left:35px;
	
	
}

#shuffle_times .select_shuffle_times{
	float:left;
	margin-left:13px;
	
}

#select_qt_radio{
	letter-spacing:-1px;
	margin-left:-4px;
}
#select_qt_radio input{
	margin-right:2px;
	margin-left:6px;
}

#select_qt_radio input:nth-child(4){
	margin-right:1px;
}

#shuffle_times input{
	width:20px;
	margin-right:4px;
}



.select_div{
	width:34px;
	text-decoration:none;
	margin-bottom:15px;
}

#div_qt_end{
	clear:left;	
}

#div_qt_end button{
	padding-left:10px;
	padding-right:10px;	
}

#select_qt_input input,#shuffle_times input{
	vertical-align:1px;
}

#reset_puzzle{
	padding-top:10px;
	width:210px;
	height:120px;
	text-align:center;
	top:112px;
	left:160px;
	margin-left:-105px;
	border-radius:5px;
	-webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.4);
	opacity:0;
	background:-webkit-gradient(linear,center top,center bottom,from(rgb(166,194,212)),color-stop(8%,rgb(205,221,230)),color-stop(32%,rgb(179,203,217)),color-stop(75%,rgb(129,169,192)), to(rgb(116,157,179)) );
	-webkit-transform:scale(0,0);
	-webkit-transition-property:all;
	-webkit-transition-duration:0.5s;
	-webkit-transition-timing-function:ease-in;
	position:absolute;
	z-index:5;
}

#reset_puzzle_message{
	margin-bottom:6px;
	letter-spacing:2px;
}

.reset_puzzle_select{
	font-size:0.85em;
	display:block;
	width:130px;
	margin:0.33em auto;
	text-align:left;
	cursor:pointer;	
}

.reset_puzzle_select input{
	width:1.2em;
	height:1.2em;	
}

#complete_text_box{
	padding-top:1em;
	width:210px;
	height:152px;
	text-align:center;
	top:88px;
	border-radius:5px;
	left:160px;
	margin-left:-105px;
	-webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.4);
	background:-webkit-gradient(linear,center top,center bottom,from(rgb(166,194,212)),color-stop(8%,rgb(205,221,230)),color-stop(32%,rgb(179,203,217)),color-stop(75%,rgb(129,169,192)), to(rgb(116,157,179)) );
	opacity:0;
	-webkit-transform:scale(0,0);
	-webkit-transition-property:all;
	-webkit-transition-duration:0.5s;
	-webkit-transition-timing-function:ease-in;
	position:absolute;
	z-index:5;
}

#complete_clear_btn,#complete_end_btn{
	cursor:pointer;
}

#error_massage_box{
	font-size:0.8em;
	padding-top:1.2em;
	line-height:1.5;
	width:210px;
	height:70px;
	text-align:center;
	top:130px;
	border-radius:5px;
	left:160px;
	margin-left:-105px;
	-webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.4);
	background:-webkit-gradient(linear,center top,center bottom,from(rgb(166,194,212)),color-stop(8%,rgb(205,221,230)),color-stop(32%,rgb(179,203,217)),color-stop(75%,rgb(129,169,192)), to(rgb(116,157,179)) );
	opacity:0;
	-webkit-transform:scale(0,0);
	-webkit-transition-property:all;
	-webkit-transition-duration:0.5s;
	-webkit-transition-timing-function:ease-in;
	position:absolute;
	z-index:5;
}
#reload_btn{
	cursor:pointer;
	margin-top:7px;
}

#preloader{
	position:absolute;
	left:50%;
	margin:-2.5em;
	top:195px;
	z-index:5;
	color:white;
	font-size:1em;
	text-shadow:1px 1px 2px rgba(0,0,0,50);
	-webkit-transition-property:opacity;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;
	-webkit-animation-duration:0.5s;
}

#preloader:hover{
	/*-webkit-animation-name:preload;*/
}

@-webkit-keyframes preload{
	0%{opacity:0}
	100%{opacity:1}
}

/*.piece{
	border":solid 2px rgba(33,33,33,0);
	color":rgba(33,33,33,0);
	-webkit-transition-property:border-color,color;
	-webkit-transition-duration:3s;
	-webkit-transition-timing-function:ease-out;
}*/

.test{
	border:solid 2px black;
	color:red;
	width:100px;
	height:100px;
	font-size:5em;
	-webkit-transition-property:border-color,color;
	-webkit-transition-duration:3s;
	-webkit-transition-timing-function:ease-out;
	
}