@import "compass/css3";
@import "settings/gradient";
@import "settings/vars";

/* Set up Variable Colors */
$windowBorder: #AAA;
$dividerBorder: #888;

$black90: rgba(0,0,0,.90);
$black90hex: #141414;

$white75: rgba(255,255,255,.75);
$black75: rgba(0,0,0,.75);
$black75hex: #404040;

$white50: rgba(255,255,255,.50);
$black50: rgba(0,0,0,.50);
$black50hex: #7f7f7f;

$white25: rgba(255,255,255,.25);
$black25: rgba(0,0,0,.25);
$black25hex: #bfbfbf;

$black10: rgba(0,0,0,.10);
$black10hex: #DFDFDF;

$fontFamily: Arial, sans-serif;

$frameBorderRadius: 6px;

$buttonBorderRadius: 4px;
$buttonBorder: #666;

/* ========================== */
/* = Begin Timeline Styling = */
/* ========================== */
table.timelineTable {
	thead {
		th.monthLabel {
			font: bold 14px/14px $fontFamily;
			text-align: left;
			color: #333;
/*			border-left: 1px solid #DDD;*/
			padding: 5px;
			width: 200px;
		}
		th.weekLabel {
			font: normal 11px/12px $fontFamily;
			color: #888;
			width: 80px;
			text-align: left;
			padding: 0 5px 5px 5px;
			white-space: nowrap;
			&.beginMonth {
				border-left: 1px solid #DDD;
			}
		}
	}
	tbody {
		tr:first-child {
			th, td {
				border-top: 1px solid #AAA;
			}
			td {
				padding-top: 2px;
			}
		}
		th {
			padding: 5px;
			font: bold 11px/12px Arial, sans-serif;
			text-align: left;
			width: 200px;
			a {
				color: #333;
				text-decoration: none;
				white-space: nowrap;
				&:hover {
					text-decoration: underline;
				}
			}
		}
		td {
			border-left: 1px solid #EEE;
			padding: 0 2px 2px 2px;
			a {
				display: block;
				padding: 0;
				font: normal 11px/22px $fontFamily;
				color: #333;
				text-indent: 5px;
				background: #F0F0F0;
				border: 1px solid #AAA;
				text-decoration: none;
				@include border-radius(3px);
				@include transition(all, .1s);
				span {
					display: block;
					font: normal 12px/22px $fontFamily;
					text-decoration: none;
					text-indent: 0;
					&.spanPrev {
						float: left;
						padding-left: 5px;
					}
					&.spanNext {
						float: right;
						padding-right: 5px;
					}
				}
				&:hover {
					background-color: #E0E0E0;
					text-decoration: underline;
				}
				&.lateMilestone {
					background-color: #f7cdcd;
					border-color: #962a2a;
					color: #660000;
					&:hover {
						background-color: #deb8b8;
					}
				}
				&.completedMilestone {
					background-color: #dff6da;
					border-color: #778e73;
					&:hover {
						background-color: #c8dbc3;
					}
				}
			}
		}
	}
}