/*////////////////////////////////////////////////////////
///
/// base
///
////////////////////////////////////////////////////////*/
body{
	background: url(http://jsrun.it/assets/v/X/V/Z/vXVZ7.jpg) no-repeat right top;
	min-height:465px;
    	padding:70px 10px 10px 135px;
}

#popup{
	width:300px;
    	background-color:#ffffff;
	border:solid 1px #b1b1b1;
	padding:3px;
	overflow:hidden;
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	font-size:14px;
    
    	-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.5);
}

#wrap{
	min-height:300px;
	overflow:hidden;
	position:relative;

    background: -moz-linear-gradient(top, #00c4d5, #00749b);
    background: -webkit-gradient(linear, left top, left bottom, from(#00c4d5), to(#00749b));
	
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	
	-webkit-box-shadow: inset 0px 0px 5px 0px rgba(0,40,53,0.3);
	-moz-box-shadow: inset 0px 0px 5px 0px rgba(0,40,53,0.3);
	box-shadow: inset 0px 0px 5px 0px rgba(0,40,53,0.3);
	padding-top:10px;
}


/*////////////////////////////////////////////////////////
///
/// edit
///
////////////////////////////////////////////////////////*/

#editArea{
	background-color:#FFFFFF;
	margin-right:10px;
	padding-left:10px;
	
	border-top-right-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
	
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,40,53,0.3);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,40,53,0.3);
	box-shadow: 0px 0px 5px 0px rgba(0,40,53,0.3);
}

#editArea input{
	background-color:#FFFFFF;
	border:none;
	line-height:2.0;
	width:240px;
	color:#18333c;
}

#editArea a img{
	vertical-align:bottom;
	float:right;
	padding:2px;
}


/*////////////////////////////////////////////////////////
///
/// list
///
////////////////////////////////////////////////////////*/

#todoList{
	line-height:1.5;
	margin:0 10px 70px;
	-webkit-transition:height 1.0s ease-out;
}

#todoList li{/*h45px*/
	border-bottom: solid 1px rgba(200,245,255,0.3);
	padding:8px 5px;
	position:absolute;
	width:270px;
	letter-spacing: 0.2em;
}

#todoList .yAnimeON{
	-webkit-transition: top 1.0s ease-out;
}

#todoList li span{
	color:#FFFFFF;
	display:block;
	padding:4px 0 2px;
	/*word-break: break-all;*/
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width:240px;
	margin-right:-50px;
	-webkit-transition: width 1.0s ease-out,text-shadow 1.0s ease-out,color 1.0s ease-out;
	float:left;
}

#todoList li a{
	display:block;
	float:right;
	margin-left:5px;

	border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
}

#todoList li a img{
	-webkit-transition: opacity 0.2s ease-out;
}

/* open
//////////////////////////////////////////////////////////*/

#todoList li.new span{
	text-shadow: 0px 1px 3px rgba(0,40,53,0.4);
}

#todoList li.new a{
	background-color:rgba(200,245,255,0.3);
	-webkit-box-shadow: 0px 0px 3px 0px rgba(0,40,53,0.2);
	-moz-box-shadow: 0px 0px 3px 0px rgba(0,40,53,0.2);
	box-shadow: 0px 0px 3px 0px rgba(0,40,53,0.2);
	height:25px;
	width:25px;
}

#todoList li.new a img{
	opacity: 0.2;
}

/* checked
//////////////////////////////////////////////////////////*/

#todoList li.checked span{
	color:rgba(200,245,255,0.5);
	text-shadow: 0px 1px 3px rgba(200,245,255,0.8);
	text-decoration: line-through;
}

#todoList li.checked a{
	background-color:rgba(200,245,255,0.2);
	-webkit-box-shadow: 0px 0px 5px 0px rgba(200,245,255,0.5);
	-moz-box-shadow: 0px 0px 5px 0px rgba(200,245,255,0.5);
	box-shadow: 0px 0px 5px 0px rgba(200,245,255.0.5);
	height:25px;
	width:25px;
}

#todoList li.checked span{
	width:210px;
}

#todoList li.checked a img{
	opacity: 1.0;
}

/* edit
//////////////////////////////////////////////////////////*/

#todoList li.edit{
	height:30px;
	border:none;
	color:rgba(200,245,255,0.0);
	text-shadow: 0px 1px 4px rgba(200,245,255,0.8);
	text-decoration: line-through;
}

#todoList li.edit a{
	background-color:rgba(200,245,255,0.2);
	-webkit-box-shadow: 0px 0px 3px 0px rgba(200,245,255,0.1);
	-moz-box-shadow: 0px 0px 3px 0px rgba(200,245,255,0.1);
	box-shadow: 0px 0px 3px 0px rgba(200,245,255.0.1);
}

#todoList li.edit a img{
	opacity: 0.3;
}

/* delete
//////////////////////////////////////////////////////////*/

#todoList li.delete{
	opacity: 0.0;
	background-color:rgba(200,245,255,0.0);
	-webkit-box-shadow: 0px 0px 5px 0px rgba(200,245,255,0.0);
	-moz-box-shadow: 0px 0px 5px 0px rgba(200,245,255,0.0);
	box-shadow: 0px 0px 5px 0px rgba(200,245,255.0.0);
	-webkit-transform: rotate(-10deg);
	
	-webkit-transition:top 2.5s ease-in-out,-webkit-transform 2.5s ease-in-out,opacity 2.5s ease-in-out;
}

#todoList li.cell0{
	top:0px;
}

/* move
//////////////////////////////////////////////////////////*/
#todoList li.move{
	height:30px;
	border:none;
	color:rgba(200,245,255,0.0);
	text-shadow: 0px 1px 4px rgba(200,245,255,0.8);
	background:rgba(200,245,255,0.2);
}

#todoList li.move a{
	background-color:rgba(200,245,255,0.2);
	-webkit-box-shadow: 0px 0px 3px 0px rgba(200,245,255,0.1);
	-moz-box-shadow: 0px 0px 3px 0px rgba(200,245,255,0.1);
	box-shadow: 0px 0px 3px 0px rgba(200,245,255.0.1);
}



/*////////////////////////////////////////////////////////
///
/// kazari
///
////////////////////////////////////////////////////////*/

/* worter
//////////////////////////////////////////////////////////*/

#worter div{
	background-color:rgba(200,245,255,0.1);
	position:absolute;
	
	-webkit-transition: width 2.0s ease-out,
						height 2.0s ease-out,
						bottom 2.0s ease-out,
						left 2.0s ease-out,
						left 2.0s ease-out,
						background-color 1.5s ease-out;
}


#worter div.size1{
	background-color:rgba(200,245,255,0.1);
	width:20px;
	height:3px;
	bottom:20px;
	left: 140px;
	
	border-radius: 15px 15px 15px 15px / 3px 3px 3px 3px;
}

#worter div.size2{
	background-color:rgba(200,245,255,0.0);
	width:250px;
	height:80px;
	
	bottom:-10px;
	left: 25px;
	
	border-radius: 125px 125px 125px 125px / 40px 40px 40px 40px;
}

/* star
//////////////////////////////////////////////////////////*/

#star{
	
}

#star span{
	position:absolute;
	top:-20px;
}

#star span.s1 {-webkit-transition: color 2.0s ease-out,text-shadow 2.0s ease-out,top 2.0s ease-out; font-size:16xp; color:rgba(200,245,255,0.45); text-shadow: 0px 1px 3px rgba(200,245,255,0.45);}
#star span.s2 {-webkit-transition: color 2.5s ease-out,text-shadow 2.5s ease-out,top 2.5s ease-out; font-size:14xp; color:rgba(200,245,255,0.40); text-shadow: 0px 1px 3px rgba(200,245,255,0.40);}
#star span.s3 {-webkit-transition: color 3.0s ease-out,text-shadow 3.0s ease-out,top 3.0s ease-out; font-size:12xp; color:rgba(200,245,255,0.35); text-shadow: 0px 1px 3px rgba(200,245,255,0.35);}
#star span.s4 {-webkit-transition: color 3.5s ease-out,text-shadow 3.5s ease-out,top 3.5s ease-out; font-size:10xp; color:rgba(200,245,255,0.30); text-shadow: 0px 1px 3px rgba(200,245,255,0.30);}
#star span.s5 {-webkit-transition: color 4.0s ease-out,text-shadow 4.0s ease-out,top 4.0s ease-out; font-size:8xp;  color:rgba(200,245,255,0.25); text-shadow: 0px 1px 3px rgba(200,245,255,0.25);}
#star span.s6 {-webkit-transition: color 4.5s ease-out,text-shadow 4.5s ease-out,top 4.5s ease-out; font-size:6xp;  color:rgba(200,245,255,0.20); text-shadow: 0px 1px 3px rgba(200,245,255,0.20);}

#star span.s7 {-webkit-transition: color 2.0s ease-out,text-shadow 2.5s ease-out,top 2.5s ease-out; font-size:16xp; color:rgba(200,245,255,0.45); text-shadow: 0px 1px 3px rgba(200,245,255,0.45);}
#star span.s8 {-webkit-transition: color 3.0s ease-out,text-shadow 3.0s ease-out,top 3.0s ease-out; font-size:14xp; color:rgba(200,245,255,0.40); text-shadow: 0px 1px 3px rgba(200,245,255,0.40);}
#star span.s9 {-webkit-transition: color 3.5s ease-out,text-shadow 3.5s ease-out,top 3.5s ease-out; font-size:12xp; color:rgba(200,245,255,0.35); text-shadow: 0px 1px 3px rgba(200,245,255,0.35);}
#star span.s10{-webkit-transition: color 4.0s ease-out,text-shadow 4.0s ease-out,top 4.0s ease-out; font-size:10xp; color:rgba(200,245,255,0.30); text-shadow: 0px 1px 3px rgba(200,245,255,0.30);}
#star span.s11{-webkit-transition: color 4.5s ease-out,text-shadow 4.5s ease-out,top 4.5s ease-out; font-size:8xp;  color:rgba(200,245,255,0.25); text-shadow: 0px 1px 3px rgba(200,245,255,0.25);}
#star span.s12{-webkit-transition: color 5.0s ease-out,text-shadow 5.0s ease-out,top 5.0s ease-out; font-size:6xp;  color:rgba(200,245,255,0.20); text-shadow: 0px 1px 3px rgba(200,245,255,0.20);}

#star span.s13{-webkit-transition: color 2.0s ease-out,text-shadow 2.0s ease-out,top 2.0s ease-out; font-size:18xp; color:rgba(200,245,255,0.55); text-shadow: 0px 1px 3px rgba(200,245,255,0.45);}
#star span.s14{-webkit-transition: color 2.5s ease-out,text-shadow 2.5s ease-out,top 2.5s ease-out; font-size:16xp; color:rgba(200,245,255,0.50); text-shadow: 0px 1px 3px rgba(200,245,255,0.40);}
#star span.s15{-webkit-transition: color 3.0s ease-out,text-shadow 3.0s ease-out,top 3.0s ease-out; font-size:14xp; color:rgba(200,245,255,0.45); text-shadow: 0px 1px 3px rgba(200,245,255,0.35);}
#star span.s16{-webkit-transition: color 3.5s ease-out,text-shadow 3.5s ease-out,top 3.5s ease-out; font-size:12xp; color:rgba(200,245,255,0.40); text-shadow: 0px 1px 3px rgba(200,245,255,0.30);}
#star span.s17{-webkit-transition: color 4.0s ease-out,text-shadow 4.0s ease-out,top 4.0s ease-out; font-size:10xp; color:rgba(200,245,255,0.35); text-shadow: 0px 1px 3px rgba(200,245,255,0.25);}
#star span.s18{-webkit-transition: color 4.5s ease-out,text-shadow 4.5s ease-out,top 4.5s ease-out; font-size:8xp;  color:rgba(200,245,255,0.30); text-shadow: 0px 1px 3px rgba(200,245,255,0.20);}

#star span.close{
	color:rgba(200,245,255,0.0);
	text-shadow: 0px 1px 3px rgba(200,245,255,0.0);
}

/* upStar
//////////////////////////////////////////////////////////*/

#upStar{
	
}

#upStar span{
	position:absolute;
	top:300px;
}

#upStar span.s1 {-webkit-transition: color 3.0s ease-out,text-shadow 3.0s ease-out,top 3.0s ease-out; font-size:16xp; color:rgba(200,245,255,0.10); text-shadow: 0px 1px 3px rgba(200,245,255,0.30);}
#upStar span.s2 {-webkit-transition: color 3.5s ease-out,text-shadow 3.5s ease-out,top 3.5s ease-out; font-size:14xp; color:rgba(200,245,255,0.10); text-shadow: 0px 1px 3px rgba(200,245,255,0.30);}
#upStar span.s3 {-webkit-transition: color 4.0s ease-out,text-shadow 4.0s ease-out,top 4.0s ease-out; font-size:12xp; color:rgba(200,245,255,0.05); text-shadow: 0px 1px 3px rgba(200,245,255,0.20);}
#upStar span.s4 {-webkit-transition: color 4.5s ease-out,text-shadow 4.5s ease-out,top 4.5s ease-out; font-size:10xp; color:rgba(200,245,255,0.05); text-shadow: 0px 1px 3px rgba(200,245,255,0.20);}
#upStar span.s5 {-webkit-transition: color 5.0s ease-out,text-shadow 5.0s ease-out,top 5.0s ease-out; font-size:8xp;  color:rgba(200,245,255,0.01); text-shadow: 0px 1px 3px rgba(200,245,255,0.10);}
#upStar span.s0 {-webkit-transition: color 5.5s ease-out,text-shadow 5.5s ease-out,top 5.5s ease-out; font-size:6xp;  color:rgba(200,245,255,0.01); text-shadow: 0px 1px 3px rgba(200,245,255,0.10);}

#upStar span.close{
	color:rgba(200,245,255,0.0);
	text-shadow: 0px 1px 3px rgba(200,245,255,0.0);
	top:-10px !important;
}