tasks/css/style.less

.background-gradient(@color_top:rgba(255, 255, 255, 0.5), @color_bottom:rgba(255, 255, 255, 0.0)){
	background: -webkit-linear-gradient(top, 		@color_top 0%, @color_bottom 100%) repeat scroll 0 0 transparent;
	background: -moz-linear-gradient(	center top,	@color_top 0%, @color_bottom 100%) repeat scroll 0 0 transparent;
	background: -ms-linear-gradient(	center top,	@color_top 0%, @color_bottom 100%) repeat scroll 0 0 transparent;
	background: -o-linear-gradient(		center top,	@color_top 0%, @color_bottom 100%) repeat scroll 0 0 transparent;
	background: linear-gradient(		top,		@color_top 0%, @color_bottom 100%) repeat scroll 0 0 transparent;
}
.background-stripe(@color_top:#DEE2D0, @color_bottom:#F5F5F5){
	background: -webkit-linear-gradient(bottom,			@color_top 1px, transparent 1px) repeat scroll 0 0 e('/') 100% 26px @color_bottom;
	background: -moz-linear-gradient(	center bottom,	@color_top 1px, transparent 1px) repeat scroll 0 0 e('/') 100% 26px @color_bottom;
	background: -ms-linear-gradient(	center bottom,	@color_top 1px, transparent 1px) repeat scroll 0 0 e('/') 100% 26px @color_bottom;
	background: -o-linear-gradient(		center bottom,	@color_top 1px, transparent 1px) repeat scroll 0 0 e('/') 100% 26px @color_bottom;
	background: linear-gradient(		bottom,			@color_top 1px, transparent 1px) repeat scroll 0 0 e('/') 100% 26px @color_bottom;
	background-color: @color_bottom;
}
.transition-custom(@type:right, @time:0.4s){
	-webkit-transition:	@type @time ease-in-out;
	-moz-transition:	@type @time ease-in-out;
	-ms-transition:		@type @time ease-in-out;
	-o-transition:		@type @time ease-in-out;
	transition:			@type @time ease-in-out;
}

*{
	-moz-user-select: -moz-none;
	margin: 0;
	padding: 0;
	text-decoration: none;
}
#content{
	overflow:hidden;
	color: #423E3E;
	background:url("../img/bgBig.png") repeat scroll 0 0 #F3F3F3;
	#tasks_wrapper{
		height: 100%;
	}
	.icon{
		background-image: url("../img/sprites.svg");
		height:20px;
		width:20px;
		display:inline-block;
		cursor:pointer;
		vertical-align:middle;
		&.none{
			background-position: 0px -20px;
		}
		&.list-list{
			background-position: -40px 0px;
		}
		&.collection-starred{
			background-position: -20px 0px;
		}
		&.collection-today{
			-moz-box-sizing: border-box;
			background-position: -240px 0px;
			color: #909090;
			font-size: 7px;
			font-weight: bold;
			line-height: 9px;
			padding-top: 7px;
			text-align: center;
			text-shadow: 0 1px 0 white;
		}
		&.collection-week{
			background-position: -220px 0px;
		}
		&.collection-completed{
			background-position: -100px 0px;
		}
		&.collection-all{
			background-position: -200px 0px;
		}
		&.collection-current{
			background-position: -240px -80px;
		}
		&.detail-add{
			background-position: -80px 0px;
			cursor: default;
			height: 20px;
			width: 20px;
			opacity: 0.5;
		}
		&.input-date {
			display:none;
			background-position: -160px -100px;
			opacity: 0.4;
			transition: opacity 100ms ease 0s;
			right: 35px;
			top: 7px;
		}
		&.input-star{
			display:none;
			background-position: -100px -180px;
			opacity: 0.5;
			right: 9px;
			&.starred{
				background-position: -120px -180px;
				opacity:1;
			}
		}
		&.detail-delete {
			background-position: 0 -40px;
			height: 20px;
			opacity: 0.4;
			width: 20px;
		}
		&.task-checkbox{
			background-position: -60px 0px;
			height: 20px;
			width: 20px;
			left: 8px;
			position: absolute;
			top: 7px;
		}
		&.task-attachment{
			background-position: 0 -60px;
		}
		&.detail-trash{
			background-position: -260px 0px;
			transition: opacity 100ms ease 0s;
			opacity:0.6;
		}
		&.detail-settings{
			background-position: -200px -40px;
			transition: opacity 100ms ease 0s;
			opacity:0.6;
		}
		// &.search {
		// 	background-position: -80px -20px;
		// 	transition: opacity 100ms ease 0s;
		// 	opacity:0.6;
		// }
		// &.menu-search{
		// 	background-position: -80px -20px;
		// }
		&.detail-close{
			background-position: -260px -20px;
			opacity:0.6;
			transition: opacity 100ms ease 0s;
		}
		&.detail-checkbox{
			left: 18px;
			position: absolute;
			top: 17px;
			background-position: -60px 0px;
		}
		&.detail-reminder {
			background-position: -40px -40px;
			height: 20px;
			width: 20px;
		}
		&.detail-percent{
			background-position: -260px -60px;
		}
		&.task-checked, &.detail-checked {
			background-position: -60px -20px;
			height: 20px;
			width: 20px;
		}
		&.detail-star {
			position: absolute;
			right: 15px;
			top: -2px;
			background-position: -60px -40px;
			height: 60px;
			width: 30px;
			&:hover {
				background-position: -90px -40px;
			}
		}
		&.detail-starred{
			top: -2px !important;
			position: absolute;
			right: 15px;
			top: -2px;
			background-position: -120px -40px !important;
			height: 60px;
			width: 30px;
		}
		&.detail-save{
			background-position: -20px -40px;
		}
		&.note-fullscreen {
			background-position: -140px -60px;
			opacity: 0.6;
			&:hover{
				opacity:1;
			}
		}
		&.toggle-completed-tasks {
			background-position: -120px 0;
			height: 20px;
			opacity: 0.8;
			width: 20px;
			&:hover{
				opacity:1;
			}
		}
	}
	tr:last-child .task-item{
		height: 39px;
	 	div.task-body{
			border-width: 1px;
		}
	}
	li.task-item:last-child{
		height: 39px;
		.task-body{
			border-width: 1px;
		}
	}
	li, div{
		&.task-item{
			cursor:default;
			height: 37px;
			list-style: none outside none;
			overflow: hidden;
			z-index: 100 !important;
			&.done{
				opacity: 0.6;
				.title {
					text-decoration: line-through;
					text-shadow: none;
				}
			}
			.task-body{
				-moz-box-sizing: border-box;
				background: url("../img/bgTask.png") repeat-x scroll 0 0 #FFFFFF;
				height: 37px;
				list-style: none outside none;
				margin: 0;
				position: relative;
				border-style: solid;
				border-width: 1px 1px 0;
				border-color: #CCCCCC;
				.icon{
					&.task-separator {
						cursor: default;
						height: 100%;
						left: 34px;
						position: absolute;
						top: 1px;
						background-position: 0 -20px;
						width: 2px;
					}
					&.task-star {
						float: right;
						margin: 0 8px 0 5px;
						background-position: -140px 0px;
						height: 34px;
						width: 20px;
						&:hover{
							background-position: -160px 0;
						}
					}
					&.task-starred, &.task-starred:hover{
						background-position: -180px 0;
						margin-left: 5px;
						margin-right: 8px;
						margin-top: 0;
					}
				}
				.title-wrapper {
					cursor:pointer;
					color: #423E3E;
					display: block;
					line-height: 16px;
					margin: 0 0 0 44px;
					overflow: hidden;
					padding: 9px 0;
					position: relative;
					text-overflow: ellipsis;
					text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
					white-space: nowrap;
					.title{
						cursor:text;
					}
					&.attachment .task-attachment {
						display: inline-block;
					}
					.task-attachment {
						display: none;
						height: 20px;
						margin-top: -3px;
					}
				}
				.duedate {
					color: #3B6594;
					float: right;
					font-size: 11px;
					line-height: 14px;
					margin: 11px 3px 0 7px;
					text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
					&.overdue {
						color: #B3312D;
					}
				}
				.listname {
					color: #888;
					float: right;
					font-size: 11px;
					line-height: 14px;
					margin: 11px 3px 0 7px;
				}
			}
		}	
	}
}
#app-navigation{	
	background:url("../img/bgTasks.png") repeat scroll 0 0 #E3E3E3;
	font-family: "Helvetica Neue","Helvetica","Arial",Sans-Serif;
	border-right: 1px solid #CFCFCF;
	font-size:13px;
	padding-bottom: 77px !important;
	div.header{
		height:37px;
		border-bottom: 1px solid #AFAFAF;
		.background-gradient();
		a{
			cursor:pointer;
			padding:10px;
			height:20px;
			line-height:20px;
		}
		// &.search{
		// 	#search-toolbar{
		// 		display: block;
		// 	}
		// 	#main-toolbar{
		// 		display: none;
		// 	}
		// }
		// #search-toolbar{
		// 	display:none;
		// 	.icon.menu-search{
		// 		left: 41px;
		// 		position: absolute;
		// 		top: 9px;
		// 		z-index: 100;
		// 	}
		// 	input{
		// 		border-radius: 15px 15px 15px 15px;
		// 		left: 36px;
		// 		padding: 4px 4px 4px 25px;
		// 		position: absolute;
		// 		right: 36px;
		// 		top: 6px;
		// 		width: 210px;
		// 		-moz-box-sizing: border-box;
		// 		background: none repeat scroll 0 0 white;
		// 		border: 1px solid #BDBCBB;
		// 		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
		// 		margin:0;
		// 		&:focus{
		// 			background-color: #F8F8F8;
		// 			border: 1px solid rgba(43, 136, 217, 0.65);
		// 			box-shadow: 0 0 4px rgba(43, 136, 217, 0.32), 0 1px 1px rgba(255, 255, 255, 0.43), 0 2px 4px rgba(43, 136, 217, 0.12) inset, 0 0 4px rgba(43, 136, 217, 0.2) inset;
		// 		}
		// 	}
		// }
		// #search, #cancel-search{
		// 	cursor:pointer;
		// 	padding: 8px;
		// 	display:block;
		// 	float: right;
		// }
		#loading{
			cursor:pointer;
			padding: 8px;
			display:block;
			width: 20px;
			span{
				height:20px;
				width:20px;
				display:inline-block;
				cursor:pointer;
				vertical-align:middle;
				background-size: 20px 20px;
				&.done{
					background: url("../img/sprites.svg") repeat-x scroll center bottom transparent;
					background-position: 0 0;
				}
			}
		}
	}
	div.footer{
		height:40px;
		a{
			cursor:pointer;
			padding:10px;
			height:20px;
			line-height:20px;
			float: left;
			&.settings{
				float: right;
			}
		}
	}
	div.scroll{
		height: 100%;
		overflow:auto;
	}
	a.addlist{
			background: none repeat scroll 0 0 transparent;
	}
	.count{
		color: #909090;
		float: right;
	}
	.addlist{
		&:hover{
			.title{
				color:#625F5F;
			}
			.detail-add{
				opacity:1;
			}
		}
		.title{
			color:#909090;
		}
	}
	.addlist, li a{
		background: url("../img/divider.svg") repeat-x scroll center bottom transparent;
		display:block;
		-moz-box-sizing:border-box;
		-o-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-ms-box-sizing:border-box;
		position:relative;
		height:34px;
		padding:6px 12px 8px 8px !important;
		color: #413D3F;
		font-weight: bold;
		text-shadow: 0 1px 0 white;
		white-space: normal !important;
		line-height: 20px !important;
	}
	#collection_lists li a{
		padding-right: 8px;
	}
	#collection_filters li a{
		padding-right: 16px !important;
	}
	input.edit{
		border: 1px solid #3F84B3;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) inset;
		font-family:"Helvetica Neue","Helvetica","Arial",Sans-Serif;
		font-weight: bold;
		font-size:13px;
		left: 34px;
		padding: 4px;
		position: absolute;
		right: 46px;
		top: 5px;
		width: auto;
		margin:0;
		border-radius:0;
	}
	li{
		height:34px;
		overflow:hidden;
		position:relative;
		transition: height 300ms ease 0s !important;
		&.active{
			a{
				background: url("../img/bgTasksActive.png") repeat scroll 0 0 transparent;
				border-bottom: 1px solid transparent;
				color: white;
				text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);	
				.count{
					color:white;
				}
			}
			.icon{
				&.collection-all{
					background-position: -200px -20px;
				}
				&.collection-current{
					background-position: -240px -100px;
				}
				&.list-list{
					background-position: -40px -20px;
				}
				&.collection-starred{
					background-position: -20px -20px;
				}
				&.collection-today{
					background-position: -240px -40px;
					color: white;
					text-shadow: 0 1px 0 #336692;
				}
				&.collection-week{
					background-position: -220px -20px;
				}
				&.collection-completed{
					background-position: -100px -20px;
				}
			}
		}
		&.dragOver{
			a{
				border:2px solid rgb(43,136,217);
				padding: 6px 10px 6px 6px;
				.title{
					left:38px;
					right:28px;
					top:6px;
				}
			}
		}
		&.animate-up{
			height:0px !important;
			border-bottom:0;
		}
		input.edit{
			border: 1px solid #3F84B3;
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) inset;
			font-family:"Helvetica Neue","Helvetica","Arial",Sans-Serif;
			font-weight: bold;
			font-size:13px;
			left: 34px;
			padding: 4px;
			position: absolute;
			right: 46px;
			top: 5px;
			width: auto;
			margin:0;
			border-radius:0;
		}
	}
	.title{
		position:absolute;
		left:40px;
		right:30px;
		top:6px;
		text-overflow:ellipsis;
		overflow:hidden;
		white-space:nowrap;
	}	
}
#app-content{
	.transition-custom(all,0.5s);
	background: url("../img/bgBig.png") repeat scroll 0 0 #f3f3f3;
	overflow-x:hidden;
	div.content-wrapper{
		padding: 6px 17px 75px;
		box-sizing: border-box;
		height: 100%;
		overflow: hidden;
		.task-list{
			height: 100%;
			overflow-y: auto;
		}
	}
	&.details-visible{
		padding-right: 370px;
	}
	h2{
		font-weight:bold;
		color: #909090;
		font-size: 13px;
		margin-bottom: 10px;
		margin-top: 20px !important;
		text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
		word-wrap: break-word;
		&.heading-hiddentasks{
			height: 21px;
		}
	}
	#add-task{
		margin: 12px 0;
		padding: 6px 12px;
		position: relative;
		border:1px solid #CCCCCC;
		background: none repeat scroll 0 0 #EEEEEE;
		&.focus{
			background-color: #FFFFFF;

			.icon.input-date {
				display:block;
			}
			.icon.input-star{
				display:block;
			}
		}
		.icon{
			position: absolute;
			top: 6px;
		}
		input{
			-moz-box-sizing: border-box;
			font-size: 13px;
			font-weight: bold;
			padding-right: 60px;
			width: 100%;
			color: #505050;
			background: none repeat scroll 0 0 transparent !important;
			border: medium none !important;
			border-radius: 0 0 0 0 !important;
			box-shadow: none !important;
			padding: 0 60px 0 0;
			margin:0;
			cursor:text;
		}
	}
	div.task-list{
		h2.heading, h2.heading-hiddentasks{
			text{
				cursor:pointer;
			}
			.icon.toggle-completed-tasks{
				float:right;
			}
		}

		.loadmore{
			span{
				color: #A0A0A0;
				background-color: #e9e9e9;
				border-radius: 10px;
				padding: 3px 6px;
				&:hover{
					cursor: pointer;
					color: #555;
				}
			}
			font-size: 11px;
			margin-top: 10px;
			text-align: center;
		}
		&.completed-hidden{
			ol.completed-tasks{
				display:none;
			}
			h2.heading-hiddentasks{
				text{
					opacity:0.7;
				}
				.icon.toggle-completed-tasks{
					opacity:0.5;
					background-position: -120px -20px;
				}
				&:hover{
					text{
						opacity: 1;
					}
					.icon.toggle-completed-tasks{
						opacity: 0.7;
					}
				}
			}
			div.loadmore{
				display: none;
			}
		}
		.grouped-tasks{
			position:relative;
		}
	}
}
#task-details{
	.transition-custom(all,0.5s);
	position:absolute;
	right: -400px;
	bottom: 0;
	top: 0;
	width: 370px;
	max-width: 100%;
	padding: 18px 0 17px;
	&.details-visible{
		right: 0;
	}
	div.content-wrapper{
		padding: 0 10px 2px 0;
		height: 100%;
		&>div{
			background: url("../img/bgTaskDetail.png") repeat scroll 0 0 #FFFFFF;
			border:1px solid #CCCCCC;
			height: 100%;
			position: relative;
		}
		div.notice{
			color: #888;
			font-size: 16px;
			position: absolute;
			text-align: center;
			top: 50%;
			width: 100%;
		}
		div.footer{
			background: url("../img/bgTask.png") repeat scroll 0 0 #FFFFFF;
			border-top: 1px solid #D3D3D3;
			bottom: 0;
			box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
			height: 65px;
			left: 0;
			position: absolute;
			right: 0;
			.detail-close .icon{
				left:auto;
				right:8px;
			}
			.icon{
				position:absolute;
				bottom:7px;
				left:8px;
			}
			.detail-addcomment{
				padding: 4px 10px 0;
				input{
					background: none repeat scroll 0 0 white;
					border: 1px solid #bdbcbb;
					border-radius: 0;
					box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
					box-sizing: border-box;
					color: #423e3e;
					font-family: "Helvetica Neue","Helvetica","Arial",Sans-Serif;
					font-size: 13px;
					font-weight: 500;
					margin-top: 2px;
					outline: medium none;
					padding: 4px;
					transition: all 0.2s ease-in-out 0s;
					&[type="text"]{
						width: 230px;
					}
					&[type="button"]{
						float: right;
						margin-right: 0;
						color: #BBB;
						cursor: default;
						&.active{
							color: #fff;
							.background-gradient(#5cb6e7,#317cd7);
							transition: none;
							cursor: pointer;
						}
					}
				}
			}
		}
		&.completed{
			.body{
				.section{
					.section-title{
						color: #9FA2A6 !important;
					}
					.icon{
						&.detail-date{
							background-position: -100px -40px !important;
						}
						&.detail-reminder {
							background-position: -40px -40px !important;
						}
					}
				}			
			}
		}
		.title {
			.background-gradient(rgba(255, 255, 255, 0.1),rgba(0, 0, 0, 0.05));
			border-bottom: 1px solid rgba(0, 0, 0, 0.24);
			font-size: 16px;
			font-weight: bold;
			line-height: 24px;
			min-height: 24px;
			padding: 16px 55px 13px;
			text-shadow: 0 1px 0 white;
			word-wrap: break-word;
			.title-text{
				cursor:text;
				&.strike-through{
					text-decoration: line-through;
					text-shadow: none;
				}
			}
			textarea, pre {
				box-shadow: none;
				font-size: 16px;
				font-weight: bold;
				line-height: 24px;
				word-wrap: break-word;
				background: none repeat scroll 0 0 transparent;
				border: medium none;
				padding: 0;
				white-space: pre-wrap;
				word-wrap: break-word;
			}
			pre{
				border: 0 none !important;
				display: block;
				margin: 0;
				outline: 0 none;
				padding: 0 !important;
				visibility: hidden;
			}
			textarea{
				margin:0;
				border-radius:0;
				height: 100%;
				left: 0;
				overflow: hidden;
				position: absolute;
				resize: none;
				top: 0;
				width: 100%;
			}
			.expandable-container{
				background: none repeat scroll 0 0 #FFFFFF;
				border: 1px solid #AAAAAA;
				margin: -1px -4px -1px -7px;
				padding: 0 5px;
				.expandingArea{
					position: relative;
				}
			}
		}
		.body{
			bottom: 65px;
			left: 0;
			overflow: auto;
			position: absolute;
			right: 0;
			top: 55px;
			.note{
				.background-stripe(#DEE2D0, #F5F5F5);
				border-width: 1px 1px 1px 1px;
				border-style: solid;
				border-color: #CFCFCF;
				font-size: 13px;
				line-height: 26px;
				margin: 0 20px;
				padding: 5px 15px;
				cursor:text;
				.expandingArea{
					position:relative;
					margin-left: -1px;
					textarea, pre {
						box-shadow: none;
						background: none repeat scroll 0 0 transparent;
						border: medium none;
						font-size: 13px;
						line-height: 26px;
						padding: 0;
						white-space: pre-wrap;
						word-wrap: break-word;
					}
					pre {
						border: 0 none !important;
						display: block;
						margin: 0;
						outline: 0 none;
						padding: 0 !important;
						visibility: hidden;
					}
					textarea{
						margin: 0 0 0 1px;
						border-radius:0;
						height: 100%;
						left: 0;
						overflow: hidden;
						position: absolute;
						resize: none;
						top: 0;
						width: 100%;
						color: #423E3E;
						font-weight: 500;
						outline: medium none;
					}
				}
				.note-body, .note-edit {
					cursor:text;
					min-height: 140px;
					word-wrap: break-word;
					a{
						cursor:text;
					}
					.content-fakeable, .edit-view, .display-view{
						cursor:text !important;
					}
					.display-view{
						white-space:pre-wrap;
						a{
							cursor: pointer;
							text-decoration: underline;
						}
					}
				}
				.open-fullscreen-note {
					margin-top: -2px;
					padding-bottom: 10px;
					padding-left: 10px;
					position: absolute;
					right: 23px;
					z-index: 9999;
				}
			}
			.subtasks{
				background: none repeat scroll 0 0 white;
				border: 1px solid #C9C8BD;
				box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
				margin: 20px;
				position: relative;
				&.buffer{
					padding-bottom: 32px;
				}
			}
			.section{
				background: url("../img/divider.svg") repeat-x scroll center bottom transparent;
				height: 28px;
				padding: 9px 20px 9px 55px;
				position: relative;
				text-shadow: 0 1px 0 white;
				border-top:none;
				input{
					-moz-box-sizing: border-box;
					background: none repeat scroll 0 0 white;
					border: 1px solid #BDBCBB;
					border-radius:0;
					margin-top:2px;
					box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
					color: #423E3E;
					font-family: "Helvetica Neue","Helvetica","Arial",Sans-Serif;
					font-size: 13px;
					font-weight: 500;
					outline: medium none;
					padding: 4px;
					transition: all 0.2s ease-in-out 0s;
					&.focus{
						background-color: #F8F8F8;
						border: 1px solid rgba(43, 136, 217, 0.65);
						box-shadow: 0 0 4px rgba(43, 136, 217, 0.32), 0 1px 1px rgba(255, 255, 255, 0.43), 0 2px 4px rgba(43, 136, 217, 0.12) inset, 0 0 4px rgba(43, 136, 217, 0.2) inset;
					}
					&[type="range"]{
						border: medium none;
						box-shadow: none;
						padding-top: 10px;
						width: 200px;
						margin: 0px;
					}
				}
				select{
					background-color: rgba(0, 0, 0, 0);
					border-radius: 0px;
					border: 1px solid #CCC;
					padding:0;
					width: 98px;
					margin:0;
					font-weight: normal;
					height:19px;
				}
				.icon{
					left: 16px;
					position: absolute;
					top: 13px;
					&.detail-delete{
						display: none;
						left: auto;
						right: 22px;
						&:hover {
							opacity: 0.8;
						}
					}
					&.detail-save{
						display: none;
						left: auto;
						right: 40px;
					}
					&.detail-date, &.detail-start  {
						background-position: -220px -80px;
					}
					&.detail-remindertype{
						display: none;
						left: 38px;
						opacity: 0.4;
						&:hover{
							opacity: 0.8;
						}
					}
				}
				.section-title{
					color: #9FA2A6;
					font-weight: bold;
					margin-top: 3px;
				}
				&.date{
					&.editing{
						.icon.detail-save{
							display:inline-block;
						}
						.icon.detail-delete{
							display:block;
						}
					}
					.icon{
						&.detail-date, &.detail-start{
							background-position: -220px -40px;
							&.overdue{
								background-position: -220px -60px;
							}
						}
						&.detail-percent{
							background-position: -260px -80px;
						}
						&.detail-reminder{
							background-position: -40px -60px;
							&.overdue{
								background-position: -40px -80px;
							}
						}
					}
					&:hover .icon.detail-delete{
						display:block;
					}
					.section-title{
						color: #4271A6;
						&.overdue{
							color: #B3312D;
						}
						&.repeat{
							margin-top: -2px;
						}
					}
				}
				&.editing{
					.icon.detail-remindertype{
						display: block;
					}
				}
				.icon.detail-remindertype{
					background-position: -260px -40px;
				}
				&.detail-reminder{
					.section-description{
						display: none;
						font-size: 11px;
						margin-top:-6px;
						&.repeat{
							display:block;
						}
					}
					&.date{
						.section-description{
							display: block;
						}
					}
				}
				&.detail-note{
					padding: 20px 0;
					height:auto;
				}
				&.detail-comments{
					background: none;
					padding: 10px 0;
					height: auto;
					.comment-item{
						padding: 5px 55px 0;
						position: relative;
						.icon.detail-delete{
							top: 5px;
						}
						&:hover{
							.icon.detail-delete{
								display: block;
							}
						}
						.avatar{
							width: 32px;
							height: 32px;
							position: absolute;
							left: 10px;
							top: 10px;
							border-radius: 2px;
							overflow: hidden;
							img{
								height: 100%;
								width: 100%;
							}
						}
						.username{
							display: inline-block;
							font-weight: bold;
						}
						.comment{}
						.time{
							color: #9fa2a6;
							font-size: 11px;
						}
					}
				}
				&.detail-addcomment{
					background: url("../img/divider.svg") repeat-x scroll center top transparent;
					bottom: 0;
					left: 0;
					position: absolute;
					right: 0;
				}
			}
		}
	}
}

#modal-wrapper{
	position: absolute;
	width:100%;
	height: 100%;
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.25);
}

#settings_modal{
    background: url("../img/bgBig.png") repeat scroll 0 0 #f3f3f3;
    border-radius: 6px;
	.header{
		h2{
				font-size: 17px;
				padding: 10px;
				text-align: center;
			}
		.button{
			position: absolute;
			top:3px;
			right:5px;
		}
	}
	.navbar{
		border-color: #ccc;
		border-style: solid;
		border-width: 1px 0;
		height: 50px;
	}
	.content{
		min-height:100px;
	}
}
.button{
    .background-gradient(#5cb6e7, #317cd7);
    border-color: #0c67a5;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    line-height: 14px;
    margin-right: 8px;
    padding: 6px 10px 5px;
    position: relative;
    float:right;
    &:hover{
    	color:#CCCCCC;
    }
}

input, textarea {
	-moz-user-select: text;
}
#content a:hover .icon{
	&.detail-trash{
		opacity:1;
	}
	&.detail-settings{
		opacity:1;
	}
	// &.search{
	// 	opacity:1;
	// }
	&.detail-delete{
		opacity:0.8;
	}
	&.detail-close{
		opacity:1;
	}
	&.input-date{
		opacity:0.8;
	}
	&.input-star{
		opacity:1;
	}
}
input.datepicker-input{
	width: 120px;
}
input.timepicker-input{
	width: 80px;
}
input.duration-input{
	margin: 2px 0 0 0.3em;
	width: 35px;
}
input.percent-input{
	width: 35px;
	margin-top: 0px;
}
.ui-widget-content{
	color: #423E3E;
	background: none repeat scroll 0 0 #F9F9F9;
	border-radius: 4px 4px 4px 4px;
	color: #423E3E;
	max-width: 304px;
	min-height: 15px;
	min-width: 150px;
	z-index: 1000;
}
.ui-widget-content{
	border:none;
}
td.ui-timepicker-hours table{
	border-right: 1px solid #CCCCCC;
}
.ui-timepicker{
	table td a.ui-state-active{
		background: -moz-linear-gradient(center top , #33A3EF, #168AD4) repeat scroll 0 0 transparent !important;
		.background-gradient( #33A3EF, #168AD4);
		border-radius: 3px 3px 3px 3px;
		color: white;
		opacity: 1;
		position: relative;
		text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
	}
}
.ui-datepicker, .ui-timepicker {
	width: 185px;
	.ui-widget-header{
		background: none repeat scroll 0 0 transparent;
		border: none;
		color: #423E3E;
		font-weight: 600;
		font-size:12px;
	}
	.ui-timepicker-title{
		text-align: center;
	}
	.ui-datepicker-next, .ui-datepicker-next-hover{
		right:2px;
		top:2px;
		background: none;
		border: none;
	}
	.ui-datepicker-prev, .ui-datepicker-prev-hover{
		left:2px;
		top:2px;
		background: none;
		border: none;
	}
	.ui-datepicker-prev span, .ui-datepicker-next span {
		margin-left: -4px;
		margin-top: -4px;
	}
	.ui-icon-circle-triangle-w{
		background-image: url("../img/sprites.svg");
		background-position: -20px -60px;
		height: 10px;
		width: 10px;
	}
	.ui-icon-circle-triangle-e{
		background-image: url("../img/sprites.svg");
		background-position: -30px -60px;
		height: 10px;
		width: 10px;
	}
	table{
		width:100%;
		thead{
			th {
				color: #A3A3A3;
				font-size: 9px;
				height: auto;
				padding: 4px 0;
				text-align: center;
				text-transform: uppercase;
			}
		}
		tr{
			line-height:15px;
			&:hover{
				background: none repeat scroll 0 0 transparent;
			}
		}
		td{
			width:14%;
			padding:0;
			&.ui-datepicker-today{
				a{
					color:#2289DA;
				}
			}
			&.selected a{
				background: -moz-linear-gradient(center top , #33A3EF, #168AD4) repeat scroll 0 0 transparent !important;
				border-radius: 3px 3px 3px 3px;
				color: white;
				opacity: 1;
				position: relative;
				text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
			}
		}
		a.ui-state-default{
			border: none;
			background: none repeat scroll 0 0 transparent;
			color:#737272;
			border-radius: 3px 3px 3px 3px;
			cursor: pointer;
			display: block;
			font-size: 12px;
			font-weight: 500;
			padding: 2px 0;
			margin:1px;
			text-align: center;
			&:hover{
				border:none;
				background: none repeat scroll 0 0 #EAEAEA;
			}
		}
	}
}
div.ui-datepicker, div.ui-timepicker{
	background: none repeat scroll 0 0 #F9F9F9;
	border-radius: 4px 4px 4px 4px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
	color: #423E3E;
	max-width: 304px;
	min-height: 15px;
	min-width: 150px;
	position: absolute;
	z-index: 1000;
	margin-top: 9px;
	padding:8px;
	.arrow {
		border-color: transparent transparent #F9F9F9;
		left: 50%;
		margin-left: -12px;
		top: -24px;
		border-style: solid;
		border-width: 12px;
		height: 0;
		position: absolute;
		width: 0;
		z-index: 100;
	}
	&:after{
		border-bottom: 9px solid #F9F9F9;
		border-left: 9px solid rgba(0, 0, 0, 0);
		border-right: 9px solid rgba(0, 0, 0, 0);
		content: "";
		display: inline-block;
		left: 46%;
		position: absolute;
		top: -9px;
	}
	&:before {
		border-bottom: 9px solid rgba(0, 0, 0, 0.2);
		border-left: 9px solid rgba(0, 0, 0, 0);
		border-right: 9px solid rgba(0, 0, 0, 0);
		content: "";
		display: inline-block;
		left: 46%;
		position: absolute;
		top: -9px;
	}
}

li.ui-draggable-dragging{
	width:300px;
	.duedate{
		display:none;
	}
}

.task-item.ng-enter, 
.task-item.ng-leave,
.task-item.ng-move { 
	-webkit-transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	-moz-transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	-ms-transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	-o-transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	position: relative;
	display: block;
} 

.task-item.ng-enter.ng-enter-active,
.task-item.ng-move.ng-move-active, 
.task-item.ng-leave {
	opacity: 1;
	height: 37px !important;
}

.task-item.ng-leave.ng-leave-active,
.task-item.ng-move,
.task-item.ng-enter {
	opacity: 0;
	height: 0px !important;
}
div.percentdone{
        height:3px;
        margin-bottom:-3px;
        background-color: #CCC;
        border-radius: 2px 2px 2px 2px;
}
#searchresults{
	padding-top: 0px !important;
	margin-top: 20px;
	background-color: transparent !important;
	#status{
		padding: 10px 0px 18px !important;
		height: 22px !important;
		background-color: transparent !important;
		font-weight:bold;
		color: #909090;
		font-size: 13px !important;
		text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
	}
	span{
		&.icon.task-checkbox{
			background-position: -260px -20px;
			opacity: 0.6;
			&.task-checked{
				background-position: -260px -20px;
			}
		}
		&.icon.task-star:hover{
			background-position: -140px 0 !important;
		}
	}

}
.template{
	display: none;
}
@media only screen and (max-width: 768px) {
	#app-content.details-visible{
		left:-370px !important;
	}
}