BODY
{
	font-family: cronos-pro-display, sans-serif;
	background-color: #e4ddd5;
	margin: 0px;
}


.Vinyl
{
	font-family: vinyl, sans-serif;
}

H1
{
	margin-top: 0px;
	margin-bottom: 0px;
}

.Red{
	color: #ca4b4b;
}
.RedBG{
	background-color: #ca4b4b;
}

.Orange{
	color: #e39d33;
}
.OrangeBG{
	background-color: #e39d33;
}

.Green{
	color: #54a20b;
}
.GreenBG{
	background-color: #54a20b;
}

.DarkGreen{
	color #3e7708;
}
.DarkGreenBG{
	background-color: #3e7708;
}

.Cyan{
	color: #00abb9;
}
.CyanBG{
	background-color: #00abb9;
}

.Purple{
	color: #b451ff;
}
.PurpleBG{
	background-color: #b451ff;
}

.Black{
	color: #000000;
}

.Grey{
	color: #8a8680;
}
.GreyBG{
	background-color: #8a8680;
}



.FormField
{
	width: 100%;
	margin-bottom: 15px;
}

.FormFieldShort
{
	width: 100px;
	margin-bottom: 15px;
	border: none;
	padding: 5px;
}

TEXTAREA.FormField
{
	height: 150px;
}

.LogFormContainer
{
	margin: 15px;
}



.TopNav
{
	clear: both;
	background-color: #8a8680;
	width: 100%;
	height: 20px;
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 0px;
	margin: 0px;
	list-style: none;
	border-bottom: 5px solid #3b8d41;
}
	
.TopNav LI 
{
	float: left;
	margin-left: 10px;
	margin-top: 1px;
	font-family: vinyl, sans-serif;
	cursor: pointer;
	padding: 0px 10px;
}

.TopNav LI A:hover
{
	color: #e4ddd5;	
}

.TopNav LI.Selected
{
	color: #e4ddd5;	
	background-color: #696969;
}
.TopNav LI A:focus
{
	border:  none;
	outline:  none;
}

.TopNav LI A
{
	color: black;
	text-decoration: none;
}



.CategoryHeader
{
	margin: 30px;
	margin-top: 50px;
	margin-bottom: 10px;
	font-family: vinyl, sans-serif;
	font-size: 32px;
	color: #8a8680;
}

.SectionContainer
{
	margin: 30px;
}

.SectionContainer .FormField
{
	border: none;
	outline: none;
	padding: 3px;
	padding-left: 7px;
}

.SectionContainer .FormField[type="color"]
{
	width: 70px;
}

.SectionContainer SELECT
{
	position: relative;
	top: -3px;
}

.SectionContainer LABEL
{
	font-family: vinyl, sans-serif;
	font-size: 20px;
	text-transform: uppercase;
	color: #8a8680;
	margin-right: 5px;
	margin-bottom: 3px;
}

.SectionContainer .ViewLink
{
	font-family: vinyl, sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	color: #000000;
	margin-left: 5px;
	text-decoration: none;
}
.SectionContainer .ViewLink:hover { color: #3b8d41; }

.SectionContent
{
	margin: 30px;
	margin-top: 0px;
	background-color: white;
	padding: 15px;
}

.SectionContent DIV
{
	font-family: vinyl, sans-serif;
	font-size: 24px;
	margin-bottom: 10px;
	cursor: pointer;
}

.SectionContent DIV:hover
{
	color: black !important;
}




INPUT.Title
{
	font-family: vinyl, sans-serif;
	font-size: 24px;
	margin-bottom: 10px;
	float: left;
	margin-right: 30px;	
}

INPUT[type=date]
{
    float: left;
    margin-left: 5px;
    margin-right: 5px;
    border: none;
    font-family: 'vinyl';
    padding: 3px;
    font-size: 18px;
}


.SaveButton
{
	background-color: #3e7708;
	width: 90px;
	height: 40px;
	padding: 0px;
	border: 0px;
	cursor: pointer;
}

.SaveButton	DIV
{
		width: 78px;
		height: 37px;
		padding-top: 3px;
		margin-left: 3px;
		color: white;
		background-color: #54a20b;
		font-size: 30px;
		font-family: vinyl, sans-serif;

		border-left: 3px solid #e4ddd5;
		border-right: 3px solid #e4ddd5;
}

.SaveButton	DIV:hover
{
		background-color: #3e7708;
}
/*
.SaveButton:disabled
	background-color #b8b8b8
	cursor default

	DIV
		background-color #b8b8b8
*/
/*
.PopupContainer
	position absolute
	top 0px
	left 0px
	width 100%
	height 100%
	background-color rgba( 228, 221, 213, 0.7 )

	.PopupForm
		width 30%
		height 30%
		padding 15px
		margin auto
		margin-top 10%
		background-color white
*/


/* TASKS */

.TitleBar
{
    position: absolute;
    top: 20px;
    left: 0px;
    width: 100%;
    height: 30px;
    background-color: #3e7708;
}

.TitleBar DIV
{
    border: none;
    background-color: #3e7708;
    color: white;
    font-size: 18px;
    font-family: vinyl, sans-serif;
    margin-left: 150px;
    margin-top: 3px;
    width: 500px;
}  

INPUT.TaskTitle {
    border: none;
    height: 35px;
    width: calc( 100% - 85px );
    margin-left: 10px;
    position: relative;
    top: -2px;
    font-size: 20px;
    font-family: 'vinyl';
    padding-left: 10px;
    margin-bottom: 15px;
}

.MainHeader
{
    position: absolute;
    top: 20px;
    left: 0px;
    background-color: #54a20b;
    width: auto;
    height: 25px;
    padding: 10px;
    padding-top: 8px;
    box-shadow: 3px 3px rgba(0,0,0,0.3);
}

 .MainHeader DIV
 {
        border: none;
        background-color: #54a20b;
        font-size: 24px;
        font-family: vinyl, sans-serif;
        color: white;
        text-shadow: 2px 2px rgba(0,0,0,0.3);
 }


.TasksContainer
{
    width: 100%;
}

.TasksContainer TR:nth-child(odd)
{
        background-color: #d8cfc4;
}

.TasksContainer TD.Sidebar
{
        width: 30px;
        text-align: center;
        font-family: vinyl, sans-serif;
        color: #e4ddd5;
        font-size: 36px;
}


.Bucket
{
    float: left;
    width: calc( ( 100% - 30px ) / 3 );
    list-style: none;
    padding-inline-start: 0px;
    margin: 0px;
    padding: 3px;
}

.Bucket > .Header
{
        font-family: vinyl, sans-serif;
        font-size: 30px;
        height: 35px;
        color: white;
        text-align: center;
        margin-bottom: 6px;
        padding: 3px;
}

.Bucket > .Header DIV
{
            height: 35px;
            border-top: 3px solid #e4ddd5;
            border-left: 3px solid #e4ddd5;
            border-right: 3px solid #e4ddd5;
}

.TaskContainer
{
    margin-top: 6px;
    padding: 0px;
    width: 100%;
    border-spacing: 0px;
}

.Task
{
    color: #8a8680;
    background-color: white;
    margin-right: 3px;
    margin-left: 3px;
    padding: 10px 11px;
    font-size: 14px;
    cursor: pointer;
    border-left: 3px solid #e4ddd5;
    border-right: 3px solid #e4ddd5;
}


.Task .ActivityName {
    font-family: 'vinyl';
    font-size: 18px;
    margin-bottom: 3px;
}

.TaskProject {
	height: 20px;
    top: 6px;
    left: 10px;
    right: 10px;
    position: absolute;
    color: #ffffff;
    padding-left: 3px;
    font-family: 'vinyl';
    letter-spacing: .1em;
    font-weight: bold;
    font-size: 18px;
    padding-top: 0px;
 }


.Task .ProjectName {
	position:absolute;
    font-family: vinyl, sans-serif;
    font-size: 20px;
	top: -10px;    
}

.Task .ProjectStatus
{
        float: right;
        font-family: vinyl, sans-serif;
        font-size: 14px;
        text-transform: uppercase;
}
.Task .ProjectStatus .ProjectTitle
{
        margin-bottom: 2px;
}

.ProjectTitle
{
    font-size: 18px;
    margin-bottom: 1px;
}

.Task .ProjectStatus .DetailsNote
{
        font-size: 12px;
        color: #a29d97;
        margin-bottom: 2px;
}

.Task .ProjectStatus .ProgressBar
{
	    height: 8px;
        width: 100%;
        background-color: #a29d97;
        margin-top: 6px;
}

.Task .ProjectStatus .ProgressBar .ProgressProgress
{
            height: 8px;
}

.Task .ProjectStatus .ProgressCurrent
{
        float: left;
        font-size: 12px;
        color: #a29d97;
        margin-top: 1px;
}

.Task .ProjectStatus .ProgressDue
{
        float: right;
        font-size: 12px;
        color: #a29d97;
        margin-top: 1px;
}

.Task:hover
{
    background-color: #f0f0f0;
}

.TaskBorder
{
    background-color: #ca4b4b;
    width: 1px;
}

.TaskContainer:hover .TaskBorder
{
    width: 4px;
}




/* TASK DETAIL */
.NaturalField
{
	background-color: #e4ddd5;
	color: #a29d97;
	font-family: cronos-pro-display, sans-serif;
	font-size: 16px;
	border: none;
}

.TaskProjectName
{
	position: absolute;
	top: 20px;
	left: 0px;
	background-color: #54a20b;
	width: 200px; /*auto;*/
	height: 25px;
	padding: 10px;
	padding-top: 8px;
	box-shadow: 3px 3px rgba(0,0,0,0.3);
	z-index: 1000 !important;	
}

.TaskProjectName SELECT, .TaskProjectName DIV
{
		border: none;
		background-color: #54a20b;
		font-size: 24px;
		font-family: vinyl, sans-serif;
		color: white;
		text-shadow: 2px 2px rgba(0,0,0,0.3);
}

.TaskProjectName SELECT
{
		width: 200px;
}

.TitleBar
{
	position: absolute;
	top: 20px;
	left: 220px;
	width: 100%;
	height: 30px;
	padding-left: 10px;
	background-color: #3e7708;
}

.TitleBar SELECT
{
		border: none;
		background-color: #3e7708;
		color: white;
		font-size: 18px;
		font-family: vinyl, sans-serif;
		/*margin-left: 250px;*/
		margin-top: 3px;
		width: 500px;
}



.TaskEdit
{
	margin: 30px;
}
	
.TaskEdit LABEL, .TaskEdit .Label
{
		color: #8a8680;
		font-size: 24px;
		font-family: vinyl, sans-serif;
		margin-bottom: 10px;
	}

.TaskEdit LABEL SELECT, .TaskEdit .Label SELECT
{
			border: none;
			background-color: #e4ddd5;
			font-family: vinyl, sans-serif;
			font-size: 24px;
		}

.TaskEdit LABEL TEXTAREA, .TaskEdit .Label TEXTAREA
{
			width: calc( 100% - 30px );
			height: 300px;
			color: #8a8680;
			background-color: #ffffff;
			border: none;
			font-family: cronos-pro-display, sans-serif;
			font-size: 14px;
			padding: 15px;
		}


.ProgressBar
{
	width: 100%;
	background-color: #a29d97;
	height: 20px;
	margin-top: 5px;
}

.ProgressBar .ProgressProgress
{
		background-color: #00abb9;
		height: 20px;
		width: 20%;
	}

.ProgressStatus
{
	margin-top: 4px;
	margin-bottom: 18px;
	color: #a29d97;
	font-size: 16px;
}

.ProgressStatus INPUT[type="date"]
{
		/*naturalfield( )*/
		width: 133px;
		position: relative;
		left: 59px;
}

.ProgressStatus INPUT[type="number"]
{
		/*naturalfield( )*/
		width: 50px;
}

.ChecklistItem
{
	width: 100%;
	margin-bottom: 6px;
	clear: both;
}

.ChecklistItem .ChecklistBar
{
	float: right;
	clear: both;
	background-color: #a29d97;
	height: 9px;
	width: 100%;
	margin-right: 5px;
	margin-top: 5px;
	max-width: 120px;
}

.ChecklistItem .ChecklistBar .ChecklistBarComplete
{
	background-color: #ff8e51;
	height: 9px;
}

.DeleteTask
{
	float: right;
	margin-right: 5px;
	cursor: pointer;
}

.Checkbox
{
	float: left;
	width: 20px;
	height: 20px;
	margin-right: 17px;
	margin-top: 12px;
	border-width: 2px;
	border-style: solid;
	cursor: pointer;
}

.Checkbox .Pending
{
	border-color: #b7b1a8;
	background-color: #b7b1a8;
}

.Checkbox .Complete
{
	background-color: #54a20b;
	border-color: #3e7708;
}

.Checkbox .InProgress
{
	border-color: #8a8680;
}


.ListBorder
{
	float: left;
	width: 3px;
	height: 50px;
	margin-right: 3px;
}

.ListBorder .Pending
{
	background-color: #8a8680;
}

.ListBorder .InProgress
{
	background-color: #ff8e51;
}

.ListBorder .Complete
{
	background-color: #3e7708;
}


.ChecklistDetails
{
	float: left;
	padding: 5px;
	width: calc( 100% - 57px );
	background-color: white;
	color: #8a8680	;
}

.ChecklistDetails SPAN
{
		font-size: 12px;
}

.ChecklistDetails INPUT
{
		border: none;
		width: 100%;
		font-family: cronos-pro-display, sans-serif;
		font-size: 16px;
		color: #8a8680;
}


#task_worklog
{
	height:100px;
	overflow: auto;
}




/* TIMELINE */
.TimelineColumn
{
	width: calc( 100% - 30px );
	position: relative;
	left: 30px;
}

.TimelineColumn .TimelineGrid
{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 90vw;
	}

.TimelineColumn .TimelineGrid .TimelineRow
{
			width: 100%;
			clear: both;
		}

.TimelineColumn .TimelineGrid .TimelineRow .TimelineRowTime
{
				float: left;
				width: 40px;
				font-family: vinyl, sans-serif;
				color: #8a8680;
				margin-top: -7px;
			}

.TimelineColumn .TimelineGrid .TimelineRow .TimelineRowRule
{
				float: left;
				height: 2px;
				width: calc( 100% - 40px );
				background-color: #cdc6bf;
			}

.EventBorder
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 10%;
	height: 100%;
	border-left: 3px solid #ff0000;
	border-top: 3px solid #ff0000;
	border-bottom: 3px solid #ff0000;
}
				
.EventContainer
{
	top: 6px;
	left: 6px;
	background-color: white;
	width: 100%;
	height: calc( 100% - 19px );
	position: absolute;
	padding-top: 13px;
	padding-left: 13px;
	padding-right: 13px;
	color: #8a8680;
	font-size: 14px;
}


.EventProjectName
{
	float: left;
	font-family: vinyl, sans-serif;
	font-size: 18px;
	margin-bottom: 5px;
}

.EventTime
{
	float: right;
	font-size: 14px;
	color: #bdb8af;
}

.EventProjectTitle
{
	margin-bottom: 2px;
}

.EventProjectShortTitle
{
	display: none;
	float: left;
	margin-left: 5px;
	margin-top: 3px;
}


.EventProjectDetails
{
	font-size: 12px;
	color: #a29d97;
	margin-bottom: 2px;
}

.EventHover
{
	display: none;
	background-color: white;
	padding: 15px;
	border-right: 3px solid white;
}

.TinyEvent .EventProjectDetails,.TinyEvent .EventTime,.TinyEvent .EventProjectTitle,.TinyEvent .EventProjectShortTitle,.TinyEvent .EventProjectName
{
	display: none;
}

.TinyEvent:hover .EventHover
{	
		display: block;
	}

.TinyEvent:hover .EventHover .EventProjectDetails,.TinyEvent:hover .EventHover .EventTime,.TinyEvent:hover .EventHover .EventProjectTitle,.TinyEvent:hover .EventHover .EventProjectName
{
			display: block;
		}

.SmallEvent .EventProjectDetails,.SmallEvent .EventTime,.SmallEvent .EventProjectTitle
{
		display: none;
	}
.SmallEvent .EventProjectShortTitle
{
		display: block;
	}