/*
	This is an example CSS file. None of these styles is mandatory and you should feel free to delete those
	that aren't used in your piece, to modify these styles to fit your piece, and to add styles needed.
	Note that the url paths for common images vary depending on the development environment. Make changes to
	these values when publishing to TeamSite.
*/

@charset "UTF-8";
/* =============================================================================
   Template Overrides 
   ========================================================================== */

/* Change the overall width */
body > header > div, body > section > div, body > footer > div, #mainContainer  {width: 970px;}

/* Remove the Header border if using the tabbed navigation */
/* body > header {border:none; */

/* Set background to white */
body > section {background:#fff;}

/* apply a natural box layout model to all elements */
#mainContainer * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

/* Clear fixes */
.clearfix:before,
.clearfix:after {
display: table; /* 2 */
	content: " "; /* 1 */
}

.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}

ul, li{list-style-type:none;}




/* =============================================================================
   Header and Progress Bar
   ========================================================================== */
#mainContainer{
	background:url(../images/headerBG.jpg) no-repeat;
	padding-bottom:50px;
}

#mainContainer header{
	padding:28px 35px 0 35px;
	height:320px;
	color:#fff;
	text-shadow: 0px 0px 6px #000;
}

header .courseNumber{
	font-weight:400;
	font-size:22px;
}


header h1{
	margin:6px 0 12px 0;
	width:450px;
	text-transform:uppercase;
	font-weight:600;
	font-size:28px;
	line-height:32px;
}

.progressPercent{margin:0;}

.percentNumber{
	font-weight:600;
	font-size:100px;
	line-height:60px;
	
}

.percentSign{font-weight:600;font-size:70px;
}
.progressBreakdown{
	padding:10px 0;
	font-size:18px;}
	
.assignmentsProgress{padding-right:12px;letter-spacing:2px;color:#F6921E;}	
.tasksProgress{letter-spacing:2px;color:#25A9E0;}
	
.statusGreen{color:#8BC53F;}
.statusYellow{color:#F9EC31;}
.statusRed{color:#EC1C24;}

.progressBarWrapper{
	position:relative;
	margin:0;
	width:900px;
	height:30px;
	background: rgb(224,224,224);
	background: -moz-linear-gradient(top,  rgb(224,224,224) 0%, rgb(238,238,238) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(224,224,224)), color-stop(100%,rgb(238,238,238)));
	background: -webkit-linear-gradient(top,  rgb(224,224,224) 0%,rgb(238,238,238) 100%);
	background: -o-linear-gradient(top,  rgb(224,224,224) 0%,rgb(238,238,238) 100%);
	background: -ms-linear-gradient(top,  rgb(224,224,224) 0%,rgb(238,238,238) 100%);
	background: linear-gradient(to bottom,  rgb(224,224,224) 0%,rgb(238,238,238) 100%);
	-webkit-box-shadow:  0px 0px 9px 3px #000;

	        box-shadow:  0px 0px 9px 3px #000;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#eeeeee',GradientType=0 );
}

.targetProgressBar{
	position:absolute;
	top:0px;
	left:0px;
	width:50%;
	height:30px;
	background:#ccc;
}


.currentProgressBar{
	position:absolute;
	top:0px;
	left:0px;
	width:0%;
	height:30px;
			-webkit-box-shadow:  0px 0px 6px 2px rgba(0,0,0,.2);

			        box-shadow:  0px 0px 6px 2px rgba(0,0,0,.2);
	-webkit-transition: width 400ms ease-in-out;
			-moz-transition: width 400ms ease-in-out;
	        -ms-transition: width 400ms ease-in-out;
	        -o-transition: width 400ms ease-in-out;
			transition: width 400ms ease-in-out;
}


.currentProgressBar.statusGreen{
	background: rgb(18,158,0);
	background: -moz-linear-gradient(top,  rgb(18,158,0) 0%, rgb(2,107,57) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(18,158,0)), color-stop(100%,rgb(2,107,57)));
	background: -webkit-linear-gradient(top,  rgb(18,158,0) 0%,rgb(2,107,57) 100%);
	background: -o-linear-gradient(top,  rgb(18,158,0) 0%,rgb(2,107,57) 100%);
	background: -ms-linear-gradient(top,  rgb(18,158,0) 0%,rgb(2,107,57) 100%);
	background: linear-gradient(to bottom,  rgb(18,158,0) 0%,rgb(2,107,57) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#129e00', endColorstr='#026b39',GradientType=0 );

}

.currentProgressBar.statusYellow{ }

.currentProgressBar.statusRed{
	background: rgb(255,48,25);
	background: -moz-linear-gradient(top,  rgb(255,48,25) 0%, rgb(207,4,4) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,48,25)), color-stop(100%,rgb(207,4,4)));
	background: -webkit-linear-gradient(top,  rgb(255,48,25) 0%,rgb(207,4,4) 100%);
	background: -o-linear-gradient(top,  rgb(255,48,25) 0%,rgb(207,4,4) 100%);
	background: -ms-linear-gradient(top,  rgb(255,48,25) 0%,rgb(207,4,4) 100%);
	background: linear-gradient(to bottom,  rgb(255,48,25) 0%,rgb(207,4,4) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );

	
}


.targetProgressMark{
	position:absolute;
	top:0px;
	left:0px;
	width:50%;
	height:30px;
	border-right:2px solid #fff;
}

.goalMarkerWrapper{
	height:25px;
	margin-top:6px;
	width:900px;
	background:url('../images/goalStripeBG.png') repeat-x;
}
.goalMarker{
	margin-left:-24px;
	width:48px;
	height:24px;
}

.goalArrow{
	height:10px;
	width:48px;
	background:url('../images/goalArrow.png') repeat-x;
}

.goalText{
	height:14px;
	width:48px;
	background:#000;
	font-size:12px;
	line-height:12px;
	text-align:center;
}

/* =============================================================================
   Navigation
   ========================================================================== */

#mainContainer nav{
	margin-bottom:12px;
	padding-left:35px;
	height:35px;
	background: rgb(255,255,255);
	background: -moz-linear-gradient(top,  rgb(255,255,255) 0%, rgb(238,238,238) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(238,238,238)));
	background: -webkit-linear-gradient(top,  rgb(255,255,255) 0%,rgb(238,238,238) 100%);
	background: -o-linear-gradient(top,  rgb(255,255,255) 0%,rgb(238,238,238) 100%);
	background: -ms-linear-gradient(top,  rgb(255,255,255) 0%,rgb(238,238,238) 100%);
	background: linear-gradient(to bottom,  rgb(255,255,255) 0%,rgb(238,238,238) 100%);
	color:#666;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
	
}
#mainContainer nav span {float:left;width:100px;padding:8px 0px;}
#mainContainer nav ul{margin-left:12px;float:left;width:600px;}
#mainContainer nav ul li{display:inline-block;}
#mainContainer nav ul li a{
	display:block;
	padding:8px 10px;
	color:#25A9E0;
	text-decoration:none;
	font-weight:600;
	}	
	
#mainContainer nav ul li a:hover{
background:#fff;
color:#000;	
}

#mainContainer nav ul li a.current{
	color:#000;
	}

/* =============================================================================
   Assignment and Task lists
   ========================================================================== */

.tabbedContent{
	padding-bottom:10px;
}

.tabbedContent h1{
	width:100px;
	float:left;
	padding:0;
	margin:12px 0 0 35px;
	font-size:26px;
	font-weight:400;
	text-transform:uppercase;
}
	
.assignment{
	position:relative;
	float:right;
	width:800px;
	margin:0 20px 12px 0;
	border-bottom:6px solid #f4f4f4;
	padding-bottom:12px;
}

.tabbedContent .assignment:first-child{background:#ccc;height:600px}

.titles{
	margin-top:10px;
	
	border-bottom:2px solid #25A9E0;
}

.titles h2{
	display:inline-block;
	width:310px;
	font-size:20px;
	font-weight:400;
	line-height:24px;
	padding:0 35px 6px 3px;
}

.titles h3{
	display:inline;
	font-size:14px;
	line-height:10px;
	font-weight:400;
	text-transform:uppercase;
	
}
	
.description{
	width:315px;
	float:left;
	padding:20px 35px 30px 3px;

}	

.completeMessage{
	display:none;
	padding:3px 0 10px 33px;
	margin:8px 0 0 0;
	background:url(../images/completeCheckMark.png) no-repeat;
}
	
.assignment.complete .completeMessage{display:block;color:green;}

.taskList{
	float:left;
	width:480px;
}


.taskList h2{border-bottom:2px solid #25A9E0;}

.taskBlock{width:36px;border-bottom:5px solid #25A9E0}


form ul{
	margin-top:6px;
}

form li{
	clear:both;
	position:relative;
    min-height:36px;
}

form  li:hover{background:#f3f9ff;}

.taskList li{
	margin:6px 0;
	padding:3px 6px 6px 40px
}



/* =============================================================================
   Checkbox replacement styles

#F6921E
#25A9E0
   ========================================================================== */

.ui-radio-state-disabled,
.ui-radio-state-checked-disabled,
.ui-radio-state-disabled-hover,
.ui-radio-state-checked-disabled-hover {
color: #999;
}

span.ui-checkbox,
span.ui-radio {
display: block;
position:absolute;
left:3px;
top:3px;
width: 30px;
height: 30px;
background:#92d4f0 url(../images/check.png) 2px 2px no-repeat;
cursor:pointer;
}

span.ui-helper-hidden {
display: none;
}

span.ui-radio-state-hover,
span.ui-checkbox-state-hover {
background:#25A9E0 url(../images/check.png) 2px 2px no-repeat;
	
}

span.ui-checkbox-state-checked {
background:#25A9E0 url(../images/checked.png) 2px 2px no-repeat;
	
}

span.ui-checkbox-state-checked-hover {
	background:#25A9E0 url(../images/checked.png) 2px 2px no-repeat;

}

span.ui-radio-state-checked-disabled-hover,
span.ui-radio-state-checked-disabled,
span.ui-radio-state-checked {
}

span.ui-radio-state-checked-hover {
	background:#25A9E0 url(../images/checked.png) 2px 2px no-repeat;
}

.ui-radio-disabled,
.ui-checkbox-disabled {
}		

.ui-helper-hidden-accessible {
position: absolute;
left: -999em;
}