/* Page: Tasks
=================================================================== */
.page-todo {
	
	.tasks {
		background: white;
		padding: 0;
		border-right: 1px solid lighten(@grey, 15%);
		margin: -30px 15px -30px -15px;

	}

	.task-list {
		padding: 30px 15px;	
		height: 100%;
	}

	.graph {
		height: 100%;
	}

	.priority.high {
		background: lighten(@red, 30%);
		margin-bottom: 1px;

		span {
			background: @red;
			padding: 2px 10px;
			color: white;
			display: inline-block;
			font-size: 12px;
		}
	}

	.priority.medium {
		background: lighten(@lightOrange, 35%);
		margin-bottom: 1px;

		span {
			background: @lightOrange;
			padding: 2px 10px;
			color: white;
			display: inline-block;
			font-size: 12px;
		}
	}

	.priority.low {
		background: lighten(@darkGreen, 35%);
		margin-bottom: 1px;

		span {
			background: @darkGreen;
			padding: 2px 10px;
			color: white;
			display: inline-block;
			font-size: 12px;
		}
	}

	.task {
		border-bottom: 1px solid #f9f9f9;
		margin-bottom: 1px;
		position: relative;

		.desc {
			display: inline-block;
			width: 75%;
			padding: 10px 10px;
			font-size: 12px;

			.title {
				font-size: 18px;
				margin-bottom: 5px;
			}

		}

		.time {
			display: inline-block;
			width: 15%;
			padding: 10px 10px 10px 0px;
			font-size: 12px;
			text-align: right;
			position: absolute;
			top: 0px;
			right: 0px;

			.date {
				font-size: 18px;
				margin-bottom: 5px;	
			}
		}
	}

	.task.last {
		border-bottom: 1px solid transparent;
	}

	.task.high {
		border-left: 2px solid @red;
	}

	.task.medium {
		border-left: 2px solid @lightOrange;
	}

	.task.low {
		border-left: 2px solid @darkGreen;
	}

	.timeline {
		width: auto;
		height: 100%;
		margin: 20px auto;
		position: relative;	 

		&:before {
			position: absolute;
			content: '';
			height: 100%;
			width: 4px;
			background: lighten(@grey,20%);
			left: 50%;
			margin-left:-2px;
		}
	}

	.timeslot {
		display: inline-block;
		position: relative;	
		width: 100%;
		margin: 5px 0px;

		.task {
			position: absolute;
			width: 42%;
			padding-right: 18px;
			display: block;
			height: auto;
			border: none;
			.box-sizing(content-box);

			span {
				border: 2px solid @lightBlue;
				background: lighten(@lightBlue, 30%);
				padding: 5px;
				display: block;
				font-size: 11px;
				.border-radius(2px);

				span.details {
					font-size: 16px;
					margin-bottom: 10px;
				}

				span.remaining{
					font-size: 14px;
				}

				span {
					border: 0px;
					background: transparent;
					padding: 0px;
				}

			}

			.arrow {
				position: absolute;
				top: 6px;
				right: 0px;
				height: 20px;
				width: 20px;
				background: url(../img/timeline-left-arrow.png) no-repeat;
			}
		}

		.icon {
			position: absolute;
			border: 2px solid @grey;
			background: @darkGrey;
			.border-radius(50em);
			height: 30px;
			width: 30px;
			left: 50%;
			margin-left: -16px;
			color: white;
			font-size: 14px;
			line-height: 30px;
			text-align: center;
			text-shadow: none;
			z-index: 2;
			.box-sizing(content-box);

		}

		.time {
			background: lighten(@grey,20%);
			position: absolute;
			.border-radius(4px);
			top: 1px;		
			left: 50%;
			padding: 5px 10px 5px 40px;
			z-index: 1;
			margin-top: 1px;
		}

	}

	.timeslot.alt {

		.task {
			left: auto;
			right: -20px;
			padding-left: 18px;
			.box-sizing(content-box);

			.arrow {
				position: absolute;
				top: 6px;
				left: 0px;
				height: 20px;
				width: 20px;
				background: url(../img/timeline-right-arrow.png) no-repeat;
			}
		}

		.time {
			top: 1px;
			left: auto;		
			right: 50%;
			padding: 5px 40px 5px 10px;
		}

	}
	
}

/* Higher than 992 (desktop devices)
====================================================================== */
@media only screen and (min-width: 992px) and (max-width: 1199px){
	
	.page-todo {
		
		task {

			.desc {
				display: inline-block;
				width: 70%;
				padding: 10px 10px;
				font-size: 12px;

				.title {
					font-size: 16px;
					margin-bottom: 5px;
				}
			}

			.time {
				display: inline-block;
				float: right;
				width: 20%;
				padding: 10px 10px;
				font-size: 12px;
				text-align: right;

				.date {
					font-size: 16px;
					margin-bottom: 5px;	
				}
			}
		}
	}
}	


/* Tablet Portrait (devices and browsers)
====================================================================== */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	.page-todo {
						
		.task {
			border-bottom: 1px solid #f9f9f9;
			margin-bottom: 1px;

			.desc {
				display: inline-block;
				width: 65%;
				padding: 10px 10px;
				font-size: 10px;
				margin-right: -20px;

				.title {
					font-size: 14px;
					margin-bottom: 5px;
				}
			}

			.time {
				display: inline-block;
				float: right;
				width: 25%;
				padding: 10px 10px;
				font-size: 10px;
				text-align: right;

				.date {
					font-size: 14px;
					margin-bottom: 5px;	
				}
			}
		}

		.timeslot {

			.task {

				span {
					border: 2px solid rgba(103, 194, 239, 1);
					background: rgba(103, 194, 239, .1);
					padding: 5px;
					display: block;
					font-size: 10px;

					span {
						border: 0px;
						background: transparent;
						padding: 0px;
					}

					span.details {
						font-size: 14px;
						margin-bottom: 0px;
					}

					span.remaining {
						font-size: 12px;
					}

				}

			}
		
		}
	
	}
			
}

/* All Mobile Sizes (devices and browser)
====================================================================== */
@media only screen and (max-width: 767px) {
	
	.page-todo {
		
		.tasks {
			position: relative;
			margin: 0px !important;
		}

		.graph {
			position: relative;
			margin: 0px !important;
		}

		.task {
			border-bottom: 1px solid #f9f9f9;
			margin-bottom: 1px;

			.desc {
				display: inline-block;
				width: 65%;
				padding: 10px 10px;
				font-size: 10px;
				margin-right: -20px;

				.title{
					font-size: 14px;
					margin-bottom: 5px;
				}
			}

			.time {
				display: inline-block;
				float: right;
				width: 25%;
				padding: 10px 10px;
				font-size: 10px;
				text-align: right;

				.date {
					font-size: 14px;
					margin-bottom: 5px;	
				}
			}
		}

		.timeslot {

			.task {

				span {
					padding: 5px;
					display: block;
					font-size: 10px;

					span {
						border: 0px;
						background: transparent;
						padding: 0px;
					}

					span.details {
						font-size: 14px;
						margin-bottom: 0px;
					}

					span.remaining {
						font-size: 12px;
					}

				}

			}

		}
		
	}	
						
}