/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);

body{
	overflow: hidden;
}

#month_page, #next_month_page, #prevoius_month_page{
	font-family: 'Droid Serif', serif;
	color: white;
	text-align: center;
	margin-top: -90px;
	margin-left: -105px;
	/*border: 1px solid black;*/
    -webkit-transform: translateZ( 250px ) scale(0.7,0.7);
       -moz-transform: translateZ( 250px ) scale(0.7,0.7);
         -o-transform: translateZ( 250px ) scale(0.7,0.7);
            transform: translateZ( 250px ) scale(0.7,0.7);
}

#prevoius_month_page{
    background-color: #50a4ae;
}

#month_page{
    background-color: #80aa7f;
}

#next_month_page{
    background-color: #f46964;
}

#day_page{
	/*border:1px solid black;*/
	margin-top: -100px;
	margin-left: -100px;		
    -webkit-transform: scale(0.6,0.6);
       -moz-transform: scale(0.6,0.6);
         -o-transform: scale(0.6,0.6);
            transform: scale(0.6,0.6);
}

sup{
	margin-right:2%;
	font-size:12px;
	color: #fff;
	font-weight: bold;
}

#add_task_button{
	color: #000;
	font-size: 25px;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	border:2px solid #fff;
}

textarea{
	background-color: rgba(255,255,255,0.6);
}


a.task_check{
    vertical-align: middle;
    background-color: #39c;
    width: 60px;
    height: 100%;
    float: right;
    opacity: 0;
    /*background-image: url(image/check.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;*/
    text-align: center;
    transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);
    transition: all .3s;
}
a.hold_task_check{
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0); 
}


.line{
	height: 12px;
	margin: 10px 10%;
	border-spacing:0;
}

.line th {
	margin: 0;
	width: 200px;
	border: 3px solid #fff;
}

#month_selection, #prevoius_month_selection, #next_month_selection{
	color: #fff;
	font-size: 45px;
}

#month_selection:after, #prevoius_month_selection:after, #next_month_selection:after{
	content: attr(data_month);
}

#month_container, #prevoius_month_container, #next_month_container{
	height: 600px;
	display: flex;
	flex-flow:column wrap;
}


.not_current_month{
	opacity:0.5;
}
.day_no{
	background-color: #4D4D4D;
	border-radius: 50%;
	font-size: 20px;
	width: 40px;
	padding: 10px 2px;
	color:#fff;
	border:5px #F46964;
	border-style: outset;
	text-align: center;
	margin-left: -40px;
}

.day_container, .task{
	border: 0px dotted white;
}

.task{
	overflow: hidden;
}

.day{
	/*margin:6px;*/
    margin: 10px 25px;
	width: 200px;
	height: 55px;
	padding: 5px;
	background: rgba(255,255,255,0.6);
	border-radius: 15px;
	display:flex;
	flex-flow:row nowrap;
}

.today{background: rgba(255,255,255,1);}

.taskSign{
	display: inline-block;
	border:2px solid #fff;
	border-radius: 50%;
	margin:11px 8px;
	width: 20px;
	height: 20px;
	padding: 3px;
}

.normal_lv{
	background-color: #C69C6D;
}

.medium_lv{
	background-color: #F7931E; 
}

.emergency_lv{
	background-color: #CD5257;
}



/*day_tasks setting page*/
#the_day, #the_day_title{
    text-align: center;
    color: #fff;
}
#the_day_title{
	color: #fff;
	margin: 15px;
}
#the_day_month{
	display: inline;
	font-size: 70px;
}
#the_day_year{
	display: inline;
	font-size: 12px;
}

#day_tasks{
	height: 700px;
	width: 750px;
	display: flex;
	flex-flow:row nowrap;
}

#the_day_tasks{
	flex-grow:3;
	background-color: #333333;
	border-width: 2px 0 2px 2px;
	border-color: #fff;
	border-style: solid;
	border-radius: 3% 0 0 3%; 
}


#the_other_days{
	flex-grow:5;
	background-color:rgba(255,255,255,0.6); 
	border-width: 2px 2px 2px 0;
	border-color: #fff;
	border-style: solid;
	border-radius:  0 3% 3% 0;
}