* {
	margin: 0px;
	font-family: arial;
	font-size: 11px;
	-ms-user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
body {
	margin: 10px;
}

#header {
	height: 30px;
	width: calc(100% - 4px);
	border: solid 2px black;
	border-width: 2px 2px 0px 2px;
}
	#header > div {
		height: 100%;
	}
	#tableHeader {
		width: 410px;
		border-right: solid 2px black;
		float: left;
	}
		#tableHeader div {
			font-weight: bold;
			font-size: 12px;
		}
	#timelineContainer {
		overflow: hidden;
		float: right;
		border-left: solid 2px black;
	}
		#timeline {
			position: relative;
			height: 100%;
		}
			#timeline > div {
				width: 239px;
				border-right: solid 1px black;
				text-align: center;
				float: left;
				height: 100%;
				line-height: 30px;
			}
			
#tableContainer {
	width: 410px;
	float: left;
	border: solid 2px black;
	overflow: auto;
}
	#table {
		position: relative;
	}
		.tableRow {
			width: 100%;
			position: absolute;
			height: 29px;
			border-bottom: solid 1px black;
			left: 0px;
			cursor: pointer;
		}
			.tableRow > div, #tableHeader > div {
				line-height: 30px;
				float: left;
				border-right: solid 1px black;
				text-align: center;
				height: 100%;
			}
			.tableRow > div:nth-child(1), #tableHeader > div:nth-child(1) {
				width: 50px;
			}
			.tableRow > div:nth-child(2), #tableHeader > div:nth-child(2) {
				width: 150px;
			}
			.tableRow > div:nth-child(3), #tableHeader > div:nth-child(3) {
				width: 100px;
			}
			.tableRow > div:nth-child(4), #tableHeader > div:nth-child(4) {
				width: 50px;
			}
			.tableRow > div:nth-child(5), #tableHeader > div:nth-child(5) {
				width: 30px;
			}

#ganttContainer {
	float: right;
	overflow: auto;
	border: solid 2px black;
}
	#gantt {
		position: relative;
		background-image: url('img/bg.png');
		cursor: move;
	}
	
		.task {
			height: 20px;
			margin: 5px 0px;
			position: absolute;
			z-index: 10;
			cursor: pointer;
		}
			.task div {
				width: 120px;
				color: black;
				height: 20px;
				line-height: 20px;
				background: #ddd;
				margin-left: -140px;
				text-align: center;
				overflow: hidden;
			}
		.task.change {
			opacity: 0.4;
			z-index: 30;
		}
		.task.black {
			background: black;
		}
		.task.red {
			background: red;
			background-image: -webkit-gradient(
				linear,
				left top,
				left bottom,
				color-stop(0, rgb(255, 0, 0)),
				color-stop(1, rgb(237, 125, 125))
			);
			background-image: -o-linear-gradient(bottom, rgb(255, 0, 0) 0%, rgb(237, 125, 125) 100%);
			background-image: -moz-linear-gradient(bottom, rgb(255, 0, 0) 0%, rgb(237, 125, 125) 100%);
			background-image: -webkit-linear-gradient(bottom, rgb(255, 0, 0) 0%, rgb(237, 125, 125) 100%);
			background-image: -ms-linear-gradient(bottom, rgb(255, 0, 0) 0%, rgb(237, 125, 125) 100%);
			background-image: linear-gradient(to bottom, rgb(255, 0, 0) 0%, rgb(237, 125, 125) 100%);
		}
		.task.blue {
			background: blue;
			background-image: -webkit-gradient(
				linear,
				left top,
				left bottom,
				color-stop(0, rgb(132, 0, 255)),
				color-stop(1, rgb(165, 124, 235))
			);
			background-image: -o-linear-gradient(bottom, rgb(132, 0, 255) 0%, rgb(165, 124, 235) 100%);
			background-image: -moz-linear-gradient(bottom, rgb(132, 0, 255) 0%, rgb(165, 124, 235) 100%);
			background-image: -webkit-linear-gradient(bottom, rgb(132, 0, 255) 0%, rgb(165, 124, 235) 100%);
			background-image: -ms-linear-gradient(bottom, rgb(132, 0, 255) 0%, rgb(165, 124, 235) 100%);
			background-image: linear-gradient(to bottom, rgb(132, 0, 255) 0%, rgb(165, 124, 235) 100%);
		}
		.task.yellow {
			background: yellow;
			background-image: -webkit-gradient(
				linear,
				left top,
				left bottom,
				color-stop(0, rgb(60, 255, 0)),
				color-stop(1, rgb(100, 191, 97))
			);
			background-image: -o-linear-gradient(bottom, rgb(60, 255, 0) 0%, rgb(100, 191, 97) 100%);
			background-image: -moz-linear-gradient(bottom, rgb(60, 255, 0) 0%, rgb(100, 191, 97) 100%);
			background-image: -webkit-linear-gradient(bottom, rgb(60, 255, 0) 0%, rgb(100, 191, 97) 100%);
			background-image: -ms-linear-gradient(bottom, rgb(60, 255, 0) 0%, rgb(100, 191, 97) 100%);
			background-image: linear-gradient(to bottom, rgb(60, 255, 0) 0%, rgb(100, 191, 97) 100%);
		}
		.task.green {
			background: green;
			background-image: -webkit-gradient(
				linear,
				left top,
				left bottom,
				color-stop(0, rgb(255, 132, 0)),
				color-stop(1, rgb(189, 96, 96))
			);
			background-image: -o-linear-gradient(bottom, rgb(255, 132, 0) 0%, rgb(189, 96, 96) 100%);
			background-image: -moz-linear-gradient(bottom, rgb(255, 132, 0) 0%, rgb(189, 96, 96) 100%);
			background-image: -webkit-linear-gradient(bottom, rgb(255, 132, 0) 0%, rgb(189, 96, 96) 100%);
			background-image: -ms-linear-gradient(bottom, rgb(255, 132, 0) 0%, rgb(189, 96, 96) 100%);
			background-image: linear-gradient(to bottom, rgb(255, 132, 0) 0%, rgb(189, 96, 96) 100%);
		}
		
		.arrow {
			background: black;
			position: absolute;
			width: 2px;
			height: 2px;
			z-index: 20;
			cursor: move;
		}
		.arrow.change {
			z-index: 40;
		}
		.arrowCont {
			position: absolute;
			left: 0px;
			top: 0px;
		}
		
		.arrowLeft {
			width:         0;
			height:        0;
			border-right:  11px solid black;
			border-top:    6px solid transparent;
			border-bottom: 6px solid transparent; 
			position: absolute;
			z-index: 20;
		}
		.arrowRight {
			width:         0;
			height:        0;
			border-left:   11px solid black;
			border-top:    6px solid transparent;
			border-bottom: 6px solid transparent;
			position: absolute;
			z-index: 20;
		}

#overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: blue;
	opacity: 0.1;
	z-index: 90;
	cursor: no-drop;
}

#popup {
	width: 600px;
	height: 400px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -343px;
	margin-top: -243px;
	border: solid 3px black;
	z-index: 100;
	border-radius: 8px;
	background: rgb(250, 250, 250);
	padding: 40px
}
	#popup p {
		font-size: 20px;
		margin-bottom: 50px;
	}
	#popup > div {
		width: 50%;
		height: 50px;
		text-align: left;
	}
		#popup > div span {
			line-height: 100%;
			font-size: 15px;
		}
	#popup input {
		margin-left: 20px;
		height: 30px;
		vertical-align: middle;
		font-size: 15px;
		text-align: center;
	}
	#popupStart {
		width: 160px;
	}
	#popupDuration {
		width: 70px;
	}
	#popupState {
		width: 40px
	}
	#popup button {
		width: 150px;
		height: 50px;
		font-size: 20px;
		margin-top: 40px;
		cursor: pointer;
	}
	
.displayNone {
	display: none;
}

#btnReinit {
	position: absolute;
	width: 100px;
	height: 30px;
	right: 50px;
	bottom: 50px;
	font-weight: bold;
	z-index: 200;
}

#label {
	position: absolute;
	z-index: 200;
	font-size: 20px;
	top: 65px;
	right: 50px;
}