/* === Styles for SWE (supporting web experience) pages === */

/* === General Styles === */

#content{ overflow: hidden; position: relative; }
	
#content > .error, #content > .notice, #content > .alert { margin: 10px; }

input[type=text], input[type=password], select {
	margin-left: 10px;
	float: left;
	}
textarea, input[type=text], input[type=password], select {
	padding: 5px;
	border: 1px solid #c3bba4;
	border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	box-shadow: 2px 2px 5px #eee inset;
		-moz-box-shadow: 2px 2px 5px #eee inset;
		-webkit-box-shadow: 2px 2px 5px #eee inset;
	}
.register-section { width: 902px; overflow: hidden; }
.register-nav {
	float: right;
	}
	.register-nav .button {
		float: left;
		margin-top: -5px;
		margin-left: 10px;
		font-size: 14px;
		}
#already-have-account {
	display: block;
	text-align: center;
	background: #ffc;
	font-style: italic;
	padding: 10px; margin: 10px;
	border: 1px solid #c3bba4;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	}
#register-joining {
	margin: 10px 10px -10px;
	text-align: center;
	background: #fff;
	padding: 10px;
	border: 1px solid #c3bba4;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	}

/* === Login / Logout Pages === */

#login_area {
	float: left;
	overflow: hidden;
	width: 491px;
	margin-top: -10px;
	}
	#login_form { font-size: 18px; }
		#login_form label[for|=login] { display: block; margin-top: 6px; float: left; width: 100px; }
		#login-username, #login-password { width: 320px; font-size: 18px; }
		#login_form input[type=checkbox] { float: left; margin-right: 10px;}
		#forgot_password { font-style: italic; font-size: 14px; font-weight: bold; }
#login_splash {
	float: right;
	height: 354px; width: 441px;
	margin-right: 10px;
	}
	
/* === Registration Form: Create Account === */

#create_account {
	display: block;
	width: 550px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 20px;
	}
	#create_account .form-section { overflow: visible; margin-bottom: 10px; }
	#create_account label {
		display: block;
		float: left;
		}
	#create_account .text_label {
		margin-top: 8px;
		width: 180px;
		}
	#create_account input[type=text], #create_account input[type=password] {
		font-size: 16px;
		width: 300px;
		}
	#create_account select { font-size: 16px; }
		#create_account #birthday-day { width: 75px; }
		#create_account #birthday-month { width: 132px; }
		#create_account #birthday-year { width: 85px; }
	#create_account input[type=checkbox] { float: left; }
	#create_account .checkbox_label {
		width: 500px;
		margin-left: 10px;
		}
	#create_account input[type=submit] {
		display: block;
		margin: 0 auto;
		}
		
/* === Security Code === */
#security-instructions strong {
	display: block;
	margin-bottom: 20px;
	font-size: 18px;
	}
#security_code {
	width: 660px;
	margin: 0 auto;
	font-size: 20px;
	}
	#security_code input[type=radio] { display: none; }
	#security_code label {
		display: block;
		overflow: hidden;
		float: left;
		text-align: center;
		font-size: 14px; font-weight: bold;
		width: 100px; height: 35px; padding-top: 95px;
		background-color: #eee9da;
		background-repeat: no-repeat; background-position: 10px 10px;
		margin-right: 10px;
		border-radius: 5px;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
		}
	#security_code label:hover { background-color: #fbef6e; }
	#security_code label.active { background-color: #F9CF4C; }
	#security_code input[type=submit] {
		display: block;
		margin: 0 auto;
		}
	label[for=subject-social_studies] { background-image: url('../images/templates/security_code/security_code-subject-social_studies.png'); }
	label[for=subject-english] { background-image: url('../images/templates/security_code/security_code-subject-english.png'); }
	label[for=subject-math] { background-image: url('../images/templates/security_code/security_code-subject-math.png'); }
	label[for=subject-art] { background-image: url('../images/templates/security_code/security_code-subject-art.png'); }
	label[for=subject-science] { background-image: url('../images/templates/security_code/security_code-subject-science.png'); }
	label[for=subject-foreign_language] { background-image: url('../images/templates/security_code/security_code-subject-foreign_language.png'); }
	
	label[for=animal-dog] { background-image: url('../images/templates/security_code/security_code-animal-dog.png'); }
	label[for=animal-snake] { background-image: url('../images/templates/security_code/security_code-animal-snake.png'); }
	label[for=animal-horse] { background-image: url('../images/templates/security_code/security_code-animal-horse.png'); }
	label[for=animal-turtle] { background-image: url('../images/templates/security_code/security_code-animal-turtle.png'); }
	label[for=animal-cat] { background-image: url('../images/templates/security_code/security_code-animal-cat.png'); }
	label[for=animal-rabbit] { background-image: url('../images/templates/security_code/security_code-animal-rabbit.png'); }
	
	label[for=color-white] { background-image: url('../images/templates/security_code/security_code-color-white.png'); }
	label[for=color-red] { background-image: url('../images/templates/security_code/security_code-color-red.png'); }
	label[for=color-green] { background-image: url('../images/templates/security_code/security_code-color-green.png'); }
	label[for=color-black] { background-image: url('../images/templates/security_code/security_code-color-black.png'); }
	label[for=color-purple] { background-image: url('../images/templates/security_code/security_code-color-purple.png'); }
	label[for=color-blue] { background-image: url('../images/templates/security_code/security_code-color-blue.png'); }
	
	label[for=activity-dancing] { background-image: url('../images/templates/security_code/security_code-activity-singing_dancing.png'); }
	label[for=activity-camping] { background-image: url('../images/templates/security_code/security_code-activity-hiking_camping.png'); }
	label[for=activity-drawing] { background-image: url('../images/templates/security_code/security_code-activity-drawing.png'); }
	label[for=activity-sports] { background-image: url('../images/templates/security_code/security_code-activity-sports.png'); }
	label[for=activity-computer] { background-image: url('../images/templates/security_code/security_code-activity-computer.png'); }
	label[for=activity-reading] { background-image: url('../images/templates/security_code/security_code-activity-reading.png'); }
		
/* === Registration Form: Get Started === */
.register-get_started_option {
	width: 233px; height: 700px;
	padding: 10px;
	background: #fff;
	border: 1px solid #c3bba4;
	float: left;
	line-height: 20px;
	position: relative;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	}
	.register-get_started_option h3 {
		text-align: center;
		display: block; margin: -10px -10px 10px; padding: 10px;
		border-bottom: 1px solid #c3bba4;
		}
	.register-get_started_option_section { 
		width: 198px; height: 570px;
		float: left;
		margin-right: 10px; 
		position: relative;
		font-size: 12px;
		line-height: 18px;
		}
		.register-get_started_image { height: 160px; }
		.register-get_started_option_section p, .register-get_started_option_section ul { padding: 0 10px; }
		.register-get_started_actions { position: absolute; bottom: 0; left: 0; padding: 10px; z-index: 10; }
			.register-get_started_option .button { display: block; text-align: center; }
			.register-get_started_more { 
				font-size: 11px; line-height: 13px;
				display: block; 
				margin: 10px 0 0;
				font-style: italic;
				text-align: center;
				line-height: 16px;
				height: 40px;
				}
	#register-get_started_option-quest { width: 615px; margin-right: 0; font-size: 14px; }
		#register-get_started_option_section-1 { 
			background: #fff; 
			width: 196px;
			border: 1px solid transparent;
			-webkit-border-radius: 7px;
			-moz-border-radius: 7px;
			-o-border-radius: 7px;
			border-radius: 7px;
			}
			#register-get_started_option_section-1 .register-get_started_image { 
				background: transparent url('../images/templates/register/register-tile-quest-1.png') 0 0 no-repeat;
				margin: 4px 4px 10px;
				}
		#register-get_started_option_section-2 {}
			#register-get_started_option_section-2 .register-get_started_image { 
				background: transparent url('../images/templates/register/register-tile-quest-2.png') 0 0 no-repeat;
				margin: 5px 5px 10px;
				}
			#register-get_started_option_section-2 .register-get_started_actions { width: 387px; }
		#register-get_started_option_section-3 { margin-right: 0; }  
			#register-get_started_option_section-3 .register-get_started_image { 
				background: transparent url('../images/templates/register/register-tile-quest-3.png') 0 0 no-repeat;
				margin: 5px 5px 10px;
				}
	#register-get_started_option-olp { float: right;  background: #ffc; }
		#register-image-onlinelearning {
			background: transparent url('../images/templates/register/register-tile-olp.png') 0 0 no-repeat;
			margin-bottom: 10px;
			}
		#register-get_started_option-olp p, #register-get_started_option-olp ul { padding: 0 10px; }
		#register-get_started_option-olp .register-get_started_actions { margin-bottom: 6px; }
	.register-get_started_checklist {
		color: #44a54b;
		font-weight: bold;
		}
		.register-get_started_checklist li {
			font-size: 16px;
			padding-left: 40px; margin-bottom: 10px;
			min-height: 25px;
			background: transparent url('../images/templates/register/register-check.png') left top no-repeat;
			}
			
	
	

/* === Registration Form: Checkout === */

#description {
	text-align: center;
	font-size: 20px;
	margin-bottom: 20px;
	}
#checkout {
	width: 500px;
	margin: 0 auto;
	font-size: 16px;
	}
	#checkout .form-section { margin-bottom: 10px;}
	#checkout h3 {
		font-size: 20px;
		margin: 10px;
		padding: 10px 0 2px;
		text-align: center;
		color: #aaa;
		border-bottom: 1px solid #ccc;
		}
	#checkout label {
		padding-top: 8px;
		display: block;
		width: 160px;
		float: left;
		}
	#checkout input[type=text], #checkout select { font-size: 16px; width: 270px; }
	#checkout input[type=checkbox] { float: left; margin-top: 10px; }
	#checkout #address { margin-bottom: 10px; }
	#checkout #address_2 { margin-left: 170px; }
	#checkout #cc_month { margin-right: 10px; width: 100px; }
	#checkout #cc_year { width: 160px; }
	#checkout #cc_csc { width: 100px;}
	#checkout #postal_code { width: 100px;}
	#checkout input[type=submit] {
		display: block;
		margin: 0 auto;
		}
	#checkout .checkbox_label {
		width: 450px;
		margin-left: 10px;
		text-align: left;
		}

/* === Password Recovery Pages === */

#username-recover, #reset_password { font-size: 18px; width: 600px; margin: 0 auto; }
	#username-recover label, #reset_password label { width: 160px; margin: 5px 10px 0 0; text-align: right; }
	#username-recover input[type="text"], #reset_password input[type="password"], #reset_password input[type="text"] { width: 300px; }
#password_reset_or {
	display: block;
	text-align: center;
	padding: 5px; margin: 20px -10px;
	border-top: 1px solid #c3bba4; border-bottom: 1px solid #c3bba4;
	text-transform: uppercase;
	background: #eee; color: #999;
	}

/* === Error 404 Page === */

#error_404 {
	width: 450px;
	float: left;
	margin-top: 0;
	}
#error_404_guidegirl {
	float: right;
	margin-right: 130px;
	}

/* === Help & Report Abuse Page === */

#report_abuse #reason, #help_feedback #reason { width: 888px; }
#report_abuse label, #help_feedback label { margin-top: 5px; margin-bottom: 5px; font-weight: bold; }
#report_abuse .checkbox-label, #help_feedback .checkbox-label { display: inline; float: none; }
#report_abuse small, #help_feedback small {
	font-size: 12px; font-style: italic; 
	display: block; float: left; 
	margin: 8px 0 0 10px;
	}

/* === Edmodo account link page === */
.edmodo_link_form label, .edmodo_link_form input[type=text], .edmodo_link_form input[type=password] {
	font-size: 18px;
	}
.edmodo_link_form label {
	float: left;
	margin-top: 6px;
	}
.edmodo_link_form input[type=text], .edmodo_link_form input[type=password] {
	width: 250px;
	float: right;
	}
#edmodo_link_image {
	background: url('../images/templates/edmodo/edmodo-link.png');
	width: 389px; height: 53px;
	float: right;
	margin: -13px 0;
	}
.edmodo_link_form #agree { margin: 8px 10px 0 0; float: left; }
.edmodo_link_form label[for=agree] { width: 400px; float: left; }



/* ================================== *
 * === Online Learning Experience === *
 * ================================== */

#ol-header {
	font-family: Arial, sans-serif;
	margin: 10px;
	background: #fffaeb;
	border: 1px solid #C3BBA4;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	}
	#ol-header h1 {
		display: block;
		background: #1a82d9 url('../images/templates/onlinelearning/header-banner.png');
		height: 100px;
		text-indent: -9999px;
		border-bottom: 1px solid #c3bba4;
		-webkit-border-radius: 2px 2px 0 0;
		-moz-border-radius: 2px 2px 0 0;
		-o-border-radius: 2px 2px 0 0;
		border-radius: 2px 2px 0 0;
		}
	#ol-header-back { margin: 5px; text-align: right; }
		#ol-header-back .button { font-size: 18px; padding: 5px 10px; }
	#ol-nav {
		height: 76px;
		font-weight: bold;
		text-transform: uppercase;
		}
		#ol-nav > li {
			height: 72px;
			display: block; float: left;
			padding: 2px;
			border-right: 1px solid #c3bba4;
			}
			.ol-nav-link {
				height: 64px;
				display: block;
				padding: 4px 22px;
				position: relative;
				font-size: 18px;
				line-height: 24px;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				-o-border-radius: 3px;
				border-radius: 3px;
				}
			.ol-nav-link.locked { 
				color: #bbb !important;
				background: #EDEAE4; 
				cursor: not-allowed;
				}
			.ol-nav-link.locked:hover:after { 
				content: "Sorry, this unit is locked! You must complete the previous units to unlock it!";
				line-height: 12px;
				position: absolute;
				bottom: 85px; left: 0;
				z-index: 200;
				background-color: #666; color: #fff;
				text-transform: none;
				font-size: 10px;
				width: 220px;
				padding: 4px;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				-o-border-radius: 3px;
				border-radius: 3px;
				}
				.ol-nav-link.locked:hover:before {
					position: absolute;
					content: "";
					left: 40%; bottom: 80px;
					border-right: 5px solid transparent;
					border-left: 5px solid transparent;
					border-top: 5px solid #666;
					}
			.ol-nav-link.complete { background: #dfd; border-color: #9c9; color: #9c9 !important; }
			.ol-nav-link.revise { background: #ffb; }
			.ol-nav-link.active, .ol-nav-link.unlocked:hover {
				background-color: #3295C6;
				color: #fffaeb !important;
				}
				.ol-home-icon { 
					height: 21px; width: 25px;
					background: transparent url('../images/templates/onlinelearning/icons.png') 0 -63px;
					}
				.ol-home-icon, .ol-nav-link .ol-check {
					display: block;
					margin: 10px auto 0;
					}
				.ol-nav-link.unlocked.active .ol-check.incomplete, .ol-nav-link.unlocked:hover .ol-check.incomplete { background-position: 0 -42px; }
				.ol-nav-link.unlocked.active .ol-home-icon, .ol-nav-link.unlocked:hover .ol-home-icon { background-position: 0 -84px; }
				.ol-nav-link.active:after, .ol-nav-link.unlocked:hover:after {
					content: "";
					border-top: 7px solid #3295c6;
					border-left: 7px solid transparent;
					border-right: 7px solid transparent;
					position: absolute;
					top: 100%;
					left: 40%;
					}
			li#ol-instructor {
				float: right;
				width: 281px;
				height: 50px;
				border-right: none;
				padding: 2px;
				margin-top: 15px;
				}
				.ol-instructor-photo {
					display: block;
					float: left;
					margin: 2px 5px;
					background: #333;
					width: 38px; height: 38px;
					overflow: hidden;
					background-position: center center;
					background-size: cover;
					text-indent: -9999px;
					-webkit-border-radius: 3px;
					-moz-border-radius: 3px;
					-o-border-radius: 3px;
					border-radius: 3px;
					}
				.ol-instructor-status {
					display: block; float: left;
					padding-top: 4px;
					font-size: 18px;
					line-height: 16px;
					text-transform: none;
					}
				.ol-instructor-status.online { color: #50b215; }
				.ol-instructor-status.offline { color: #c3bba4; }
				#ol-instructor ul {
					display: block; float: left;
					line-height: 14px;
					}
				#ol-instructor li {
					padding-top: 2px;
					float: left;
					font-size: 12px;
					margin-right: 15px;
					position: relative;
					}
					#ol-chat-link.locked { color: #c3bba4 !important; cursor: not-allowed; }
					.ol-chat-icon {
						display: inline-block;
						width: 10px; height: 10px;
						background-image: url('../images/templates/onlinelearning/icons.png');
						background-position: -25px 0px;
						margin-right: 2px;
						vertical-align: middle;
						}
					a:hover .ol-chat-icon {	background-position: -25px -10px; }
					#ol-chat-link.locked .ol-chat-icon { background-position: -25px -20px; }
					#ol-chat-link.locked:hover:after { 
						content: "No instructors are online right now! Check back soon!";
						line-height: 12px;
						position: absolute;
						bottom: 25px; left: 0;
						z-index: 200;
						background-color: #666; color: #fff;
						text-transform: none;
						font-size: 10px;
						width: 160px;
						padding: 4px;
						-webkit-border-radius: 3px;
						-moz-border-radius: 3px;
						-o-border-radius: 3px;
						border-radius: 3px;
						}
						#ol-chat-link.locked:hover:before {
							position: absolute;
							content: "";
							left: 15px; bottom: 20px;
							border-right: 5px solid transparent;
							border-left: 5px solid transparent;
							border-top: 5px solid #666;
							}
.ol-section {
	font-family: Arial, sans-serif;
	background: #FFFAEB;
	color: #666;
	position: relative;
	overflow: hidden;
	margin: 10px;
	padding: 10px;
	line-height: 20px;
	border: 1px solid #C3BBA4;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	}
	.ol-section > h2, .ol-section > h3 {
		display: block;
		margin: -10px -10px 10px -10px;
		padding: 5px;
		background: #fff;
		color: #999;
		border-bottom: 1px solid #C3BBA4;
		-webkit-border-radius: 3px 3px 0 0;
		-moz-border-radius: 3px 3px 0 0;
		-o-border-radius: 3px 3px 0 0;
		border-radius: 3px 3px 0 0;
		-webkit-box-shadow: 0 0 5px	#ccc;
		-moz-box-shadow: 0 0 5px #ccc;
		-o-box-shadow: 0 0 5px #ccc;
		box-shadow: 0 0 5px #CCC;
		}
	.ol-section > h2 { font-size: 22px; padding: 7px; }
	.ol-section > h4, .ol-assignment-subsection > h4, .ol-resources-subsection > h4, .ol-resources-resourcelist > h4 { 
		font-size: 14px; text-transform: uppercase;
		border: 1px solid #c3bba4;
		margin: 10px 0;
		padding: 3px 6px;
		background: #fff;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-o-border-radius: 3px;
		border-radius: 3px;
		}
	.ol-section h2 .button, .ol-section h3 .button, .ol-section h4 .button {
		text-transform: none;
		font-size: 12px;
		padding: 1px 4px;
		line-height: 14px;
		}
		.ol-section h2 .button { font-size: 14px; padding: 2px 4px; }
	.ol-section .button {
		padding: 5px;
		height: auto;
		}
.ol-alert.blocked {
	text-align: center;
	background: #ffb;
	padding-top: 20px;
	}
.ol-alert.complete {
	text-align: center;
	background: #bfb;
	padding-top: 20px;
	color: #50B215;
	}
.ol-alert.revise {
	text-align: center;
	background: #fb5;
	padding-top: 20px;
	color: #960;
	border-color: #b90;
	}
	.ol-alert.revise .ol-revise-icon { display: inline-block; vertical-align: middle; margin-right: 10px; }
.ol-alert.extra-credit {
	text-align: center;
	padding-top: 20px;
	background: #e0ecfa;
	border-color: #9cc8d7;
	color: #8bb7c6;
	}
.ol-alert .button { margin-left: 20px; font-size: 16px; padding: 2px 5px; }
.ol-check {
	display: inline-block;
	margin-right: 5px;
	width: 25px; height: 21px;
	background: url('../images/templates/onlinelearning/icons.png');
	vertical-align: top;
	}
	.ol-check.complete { background-position: 0 -21px; }

/* === Online Learning HTML Fields styling === */

.caption {
	background: #eee;
	color: #999;
	padding: 10px;
	border: 1px solid #ccc;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	}
	.caption p {
		font-size: 12px;
		text-align: center;
		font-style: italic;
		margin: 10px 0 0;
		}
.ol-html .center {
	display: block;
	text-align: center;
	margin: 0 auto 10px;
	}
.ol-html .left { float: left; margin: 0 10px 10px 0; }
.ol-html .right { float: right; margin: 0 0 10px 10px; }
.ol-html ol, .ol-html ul { margin: 10px 0 10px 40px; }
	.ol-html li { margin-bottom: 10px; }
.ol-html ol { list-style: decimal; }
.ol-html ul li::before {
	content: "- ";
	font-weight: bold;
	margin-left: -10px;
	}
.ol-html blockquote {
	margin: 10px 40px; padding: 10px;
	background: #f0f0f0;
	border-left: 5px solid #ddd;
	}
	

/* === Online Learning Assignment Types === */

.ol-assignment-subsection {
	width: 800px;
	margin: 0 auto;
	}
.ol-respond {
	width: 786px;
	margin-bottom: 10px;
	}
.ol-entry-button-begin { font-size: 16px; }
.ol-entry-button-begin span {
	display: block;
	font-size: 13px;
	line-height: 12px;
	}
.ol-entry-description {
	width: 647px;
	float: left;
	}
.ol-entry-tile {
	float: left;
	border: 1px solid #c3bba4;
	width: 221px;
	margin-right: 20px;
	padding: 10px;
	background: #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	}
	.ol-entry-tile-header { overflow: auto; }
		.ol-entry-tile .ol-check { margin: 10px 5px 10px 0; float: left; }
		.ol-entry-tile h5 { display: inline; }
		.ol-entry-tile .ol-alert {
			color: #fff;
			background: #b00;
			font-size: 10px;
			display: inline-block;
			text-transform: uppercase;
			padding: 2px 2px;
			line-height: 10px;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			-o-border-radius: 3px;
			border-radius: 3px;
			}
	.ol-entry-thumb {
		width: 221px; height: 166px;
		background: #999;
		margin: 10px 0;
		}
.ol-upload-description {
	width: 393px;
	float: left;
	}
.ol-upload-tile {
	float: left;
	border: 1px solid #c3bba4;
	width: 445px;
	margin-right: 20px;
	padding: 10px;
	background: #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	}
	.ol-upload-tile-header { overflow: auto; }
		.ol-upload-tile .ol-check { margin: 5px 5px 10px 0; float: left; }
		.ol-upload-tile h5 { display: inline-block; margin: 5px 5px 0 0; }
		.ol-upload-tile .ol-alert {
			color: #fff;
			background: #b00;
			font-size: 10px;
			display: inline-block;
			text-transform: uppercase;
			padding: 2px 2px;
			line-height: 10px;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			-o-border-radius: 3px;
			border-radius: 3px;
			}
	.ol-upload-file {
		clear: both;
		width: 433px;
		float: left;
		border: 1px solid #c3bba4;
		margin: 0 0 10px;
		padding: 5px;
		background: #fff;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-o-border-radius: 3px;
		border-radius: 3px;
		}
		.ol-upload-file + .ol-entry-file { margin-top: 0; }
		.ol-upload-file h6 {
			font-weight: normal;
			font-size: 14px;
			}
		.ol-upload-file .button {
			font-size: 12px;
			line-height: 12px;
			padding: 3px;
			}
	.uploadifyQueueItem {
		border: 1px solid #c3bba4;
		padding: 10px;
		margin-top: 10px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-o-border-radius: 3px;
		border-radius: 3px;
		}
		.uploadifyQueueItem .fileName { margin-bottom: 10px; }
		.uploadifyQueueItem img { float: right; }
		.uploadifyQueueItem .button { padding: 2px 4px; font-size: 14px; }
.ol-badge {
	width: 128px;
	float: left;
	margin-right: 20px;
	}
	.ol-badge-image {
		width: 128px;
		height: 128px;
		background: #999;
		text-indent: -9999px;
		float: left;
		}
	.ol-badge-title {
		text-align: center;
		margin-top: 5px;
		font-weight: bold;
		}
.ol-badge-description {
	width: 800px;
	}
.ol-assignment-games {
	margin-left: 25px;
	overflow: auto;
	}
.ol-assignment-games { margin-left: 15px; }
.ol-section .page_outer { 
	width: 759px;
	background: transparent; 
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
	}
.ol-game-tile {
	float: left;
	border: 1px solid #c3bba4;
	width: 221px;
	margin: 0 10px 10px 0;
	padding: 10px;
	background: #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	}
	.ol-game-tile-header { overflow: hidden; margin: 0 10px 10px; height: 40px; }
		.ol-game-tile .ol-check { margin: 10px 5px 10px 0; float: left; }
		.ol-game-tile h5 { height: 20px; overflow: hidden; }
			.ol-game-tile h5 a { display: block; width: 9999px; }
		.ol-game-tile .ol-game-tile-byline { display: block; height: 20px; width: 9999px; }
	.ol-game-thumb {
		display: block;
		overflow: hidden;
		width: 221px; height: 166px;
		background: #999;
		position: relative;
		}
		.ol-game-tile .ol-game-tile-meta { 
			display: block;
			padding: 5px;
			text-align: center;
			background: #eee;
			position: absolute; bottom: 4px; left: 4px;
			opacity: 0;
			font-size: 12px; line-height: 14px;
			color: #888;
			border: 1px solid #888;
			border-bottom: none;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			-o-border-radius: 3px;
			border-radius: 3px;
			-webkit-transition-property: opacity;
			-moz-transition-property: opacity;
			-o-transition-property: opacity;
			transition-property: opacity;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s;
			-webkit-transition-timing-function: ease;
			-moz-transition-timing-function: ease;
			-o-transition-timing-function: ease;
			transition-timing-function: ease;
			}
			.ol-game-tile .ol-game-tile-meta .date { display: block; }
			.ol-game-tile:hover .ol-game-tile-meta { opacity: 1; }

/* === Online Learning Unit Page === */

#ol-section-portfolio { font-weight: bold; }
	#ol-section-portfolio .button { margin-left: 10px; }
	#ol-section-portfolio p { margin: 0; }
#ol-section-assignments, #ol-section-todo { background: #E5DDC6; }
#ol-section-assignments { padding-bottom: 0; }
.ol-assignment-tile {
	border: 1px solid #c3bba4;
	margin-bottom: 10px;
	padding: 10px;
	background: #fff;
	overflow: auto;
	position: relative;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.1);
	-o-box-shadow: 0 0 5px rgba(0,0,0,0.1);
	box-shadow: 0 0 5px rgba(0,0,0,0.1);
	}
	.ol-assignment-tile .ol-check, .ol-unit-tile .ol-check { margin: 10px 0; float: left; }
	.ol-assignment-thumb {
		display: block;
		float: left;
		width: 160px; height: 42px;
		background: #999;
		margin: 0 10px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-o-border-radius: 3px;
		border-radius: 3px;
		}
	.ol-assignment-info {
		float: left;
		width: 450px; height: 42px;
		}
		.ol-assignment-tile h4 { 
			display: block; 
			float: left; 
			line-height: 14px;
			margin-top: 5px;
			margin-right: 5px;
			font-size: 20px;
			}
			.ol-assignment-label {
				color: #fff;
				background: #999;
				font-size: 10px !important;
				display: inline-block;
				text-transform: uppercase;
				padding: 2px 2px;
				vertical-align: top;
				line-height: 10px;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				-o-border-radius: 3px;
				border-radius: 3px;
				}
			.ol-assignment-subtitle { 
				display: block;
				font-size: 16px;
				line-height: 28px;
				}
		
		.ol-assignment-description {
			display: block; clear: left;
			font-size: 12px;
			line-height: 14px;
			margin: 0;
			}
	.ol-assignment-right { float: right; }
		.ol-pending {
			width: 40px; height: 40px;
			margin-right: 10px;
			float: left;
			position: relative;
			}
			.ol-pending-icon {
				background: #a90 url('../images/templates/onlinelearning/icons.png') -35px 0;
				color: #fff;
				font-size: 24px;
				font-weight: bold;
				text-align: center;
				width: 40px;
				height: 30px;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				-o-border-radius: 3px;
				border-radius: 3px;
				}
			.ol-pending span {
				color: #a90;
				text-transform: uppercase;
				font-size: 10px;
				font-weight: bold;
				line-height: 12px;
				}
			.ol-pending:hover:after { 
				content: "This Assignment is currently waiting to be reviewed by a mentor!";
				line-height: 12px;
				position: absolute;
				bottom: 5px; right: 50px;
				z-index: 200;
				background-color: #666; color: #fff;
				text-transform: none;
				font-size: 10px;
				width: 280px;
				padding: 4px;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				-o-border-radius: 3px;
				border-radius: 3px;
				}
				.ol-pending:hover:before {
					position: absolute;
					content: "";
					right: 45px; bottom: 15px;
					border-top: 5px solid transparent;
					border-bottom: 5px solid transparent;
					border-left: 5px solid #666;
					}
		.ol-revise {
			width: 40px; height: 40px;
			margin-right: 10px;
			float: left;
			position: relative;
			}
			.ol-revise-icon {
				background: #a90 url('../images/templates/onlinelearning/icons.png') -35px -30px;
				color: #fff;
				font-size: 24px;
				font-weight: bold;
				text-align: center;
				width: 40px;
				height: 30px;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				-o-border-radius: 3px;
				border-radius: 3px;
				}
			.ol-revise span {
				color: #b00;
				text-transform: uppercase;
				font-size: 10px;
				font-weight: bold;
				line-height: 12px;
				}
			.ol-revise:hover:after { 
				content: "Your instructor has asked you to revise your work on this Assignment! They've left feedback for you!";
				line-height: 12px;
				position: absolute;
				bottom: 5px; right: 50px;
				z-index: 200;
				background-color: #666; color: #fff;
				text-transform: none;
				font-size: 10px;
				width: 280px;
				padding: 4px;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				-o-border-radius: 3px;
				border-radius: 3px;
				}
				.ol-revise:hover:before {
					position: absolute;
					content: "";
					right: 45px; bottom: 15px;
					border-top: 5px solid transparent;
					border-bottom: 5px solid transparent;
					border-left: 5px solid #666;
					}
		.ol-todo {
			width: 32px; height: 40px;
			margin-right: 10px;
			float: left;
			}
			.ol-todo-count {
				background: #b00;
				color: #fff;
				padding: 5px;
				font-size: 24px;
				font-weight: bold;
				text-align: center;
				width: 22px;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				-o-border-radius: 3px;
				border-radius: 3px;
				}
			.ol-todo span {
				color: #b00;
				text-transform: uppercase;
				font-size: 10px;
				font-weight: bold;
				line-height: 12px;
				}
		.ol-assignment-tile .button, .ol-unit-tile .button {
			width: 59px;
			text-align: center;
			height: 30px;
			font-size: 50px;
			}
	.ol-assignment-tile.extra-credit {
		background: #e0ecfa;
		border-color: #9cc8d7;
		color: #8bb7c6;
		}
		.ol-assignment-tile.extra-credit .ol-assignment-label {
			background: #8bb7c6; color: #e0ecfa;
			}
	.ol-unit-tile.revise, .ol-assignment-tile.revise {
		background-color: #ffb;
		}
	.ol-assignment-tile.locked {
		background: #edeae4;
		border-color: #ccc;
		color: #bbb;
		cursor: not-allowed;
		}
		.ol-assignment-tile.locked a { color: #bbb !important; }
		.ol-assignment-tile.locked .ol-assignment-label {
			background: #bbb; color: #edeae4;
			}
		.ol-assignment-tile.locked:hover:after { 
			content: "This assignment is locked! All earlier required assignments must be completed to unlock this.";
			line-height: 12px;
			position: absolute;
			bottom: 15px; right: 10px;
			z-index: 200;
			background-color: #666; color: #fff;
			text-transform: none;
			font-size: 10px;
			width: 240px;
			padding: 4px;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			-o-border-radius: 3px;
			border-radius: 3px;
			}
			.ol-assignment-tile.locked:hover:before {
				position: absolute;
				content: "";
				right: 258px; bottom: 25px;
				border-top: 5px solid transparent;
				border-bottom: 5px solid transparent;
				border-right: 5px solid #666;
				}
	.ol-assignment-tile.complete { background: #dfd; border-color: #9c9; }
		.ol-assignment-tile.complete .ol-assignment-info a { color: #9c9 !important; }
		.ol-assignment-tile.complete .ol-assignment-label { background: #9c9 !important; color: #dfd !important;}

/* === Student Dashboard === */

#ol-student-dash-wrapper { overflow: auto; }
#ol-section-todo {
	padding-bottom: 0;
	width: 610px;
	float: left;
	margin-top: 0;
	margin-right: 0;
	}
	.ol-unit-tile {
		position: relative;
		border: 1px solid #c3bba4;
		margin-bottom: 10px;
		padding: 10px;
		background: #fff;
		overflow: auto;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-o-border-radius: 3px;
		border-radius: 3px;
		-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1);
		-moz-box-shadow: 0 0 5px rgba(0,0,0,0.1);
		-o-box-shadow: 0 0 5px rgba(0,0,0,0.1);
		box-shadow: 0 0 5px rgba(0,0,0,0.1);
		}
		.ol-unit-tile h4 {
			font-size: 20px;
			float: left;
			margin: 12px 10px 0;
			width: 388px;
			}
		.ol-unit-tile.locked {
			background: #edeae4;
			border-color: #ccc;
			color: #bbb;
			}
			.ol-unit-tile.locked h4 { width: auto; }
			.ol-unit-tile.locked .ol-unit-subtitle {
				color: #fff;
				background: #bbb;
				font-size: 10px;
				display: inline-block;
				text-transform: uppercase;
				padding: 2px 2px;
				margin-top: 15px;
				line-height: 10px;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				-o-border-radius: 3px;
				border-radius: 3px;
				}
			.ol-unit-tile.locked:hover:after { 
				content: "This unit is locked! All earlier units must be completed to unlock this.";
				line-height: 12px;
				position: absolute;
				bottom: 15px; right: 10px;
				z-index: 200;
				background-color: #666; color: #fff;
				text-transform: none;
				font-size: 10px;
				width: 200px;
				padding: 4px;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				-o-border-radius: 3px;
				border-radius: 3px;
				}
				.ol-unit-tile.locked:hover:before {
					position: absolute;
					content: "";
					right: 218px; bottom: 25px;
					border-top: 5px solid transparent;
					border-bottom: 5px solid transparent;
					border-right: 5px solid #666;
					}
		.ol-unit-tile.complete { background: #dfd; border-color: #9c9; }
			.ol-unit-tile.complete h4 a { color: #9c9 !important; }
		.ol-unit-tile .button { float: right; width: 51px; }
#ol-section-your-instructor {
	width: 258px;
	height: 391px;
	float: right;
	margin-top: 0;
	margin-left: 0;
	}
	#ol-your-instructor-image {
		margin: 0 10px 10px 0;
		float: left;
		width: 100px;
		height: 100px;
		background: #999;
		background-position: center center;
		background-size: cover;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-o-border-radius: 3px;
		border-radius: 3px;
		}
	#ol-your-instructor-name { display: block; font-weight: bold; }
	#ol-your-instructor-username { display: block; font-size: 12px; font-weight: bold; margin-bottom: 2px; line-height: 12px; }
	#ol-your-instructor-status { display: block; font-weight: bold; color: #aaa; }
		#ol-your-instructor-status.online { color: #50B215; }
	#ol-your-instructor-hours { display: block; font-size: 12px; line-height: 12px; }
		#ol-your-instructor-hours strong { display: block; }
		#ol-your-instructor-hours em { display: block; margin-top: 2px; font-size: 10px; color: #aaa; }
	#ol-your-instructor-actions { clear: both; width: 258px; height: 40px;}
		#ol-your-instructor-actions .button { font-size: 18px; line-height: 14px; position: relative; }
			#ol-your-instructor-actions .button span { display: block; font-size: 10px; }
		#ol-your-instructor-actions .button.locked { 
			background: #EDEAE4;
			color: #ccc !important;
			border-color: #ccc;
			cursor: not-allowed;
			-webkit-box-shadow: none;
			-moz-box-shadow: none;
			-o-box-shadow: none;
			box-shadow: none;
			-webkit-text-shadow: none;
			-moz-text-shadow: none;
			-o-text-shadow: none;
			text-shadow: none;
			}
			#ol-your-instructor-actions .button.locked:hover:after { 
					content: "No instructors are online right now! Check back soon!";
					line-height: 12px;
					position: absolute;
					bottom: 47px; left: -60px;
					z-index: 200;
					background-color: #666; color: #fff;
					text-transform: none;
					font-size: 10px;
					width: 160px;
					padding: 4px;
					-webkit-border-radius: 3px;
					-moz-border-radius: 3px;
					-o-border-radius: 3px;
					border-radius: 3px;
					}
					#ol-your-instructor-actions .button.locked:hover:before {
						position: absolute;
						content: "";
						left: 45px; bottom: 42px;
						border-right: 5px solid transparent;
						border-left: 5px solid transparent;
						border-top: 5px solid #666;
						}
	#ol-section-your-instructor p { margin-top: 10px; }
#ol-section-messages, #ol-section-resources {
	margin-top: 0;
	width: 900px;
	}
	#ol-section-messages { padding-bottom: 0; }
	.ol-resources-list {
		font-size: 13px;
		-webkit-column-count: 2;
		-moz-column-count: 2;
		-o-column-count: 2;
		column-count: 2;
		-webkit-column-gap: 1em;
		-moz-column-gap: 1em;
		-o-column-gap: 1em;
		column-gap: 1em;
		}
		.ol-resources-list ul a { font-weight: bold; }
		.ol-resources-list ul li { display: block; margin-left: 20px; }
		.ol-resources-list ul li:before {
			content: "- ";
			font-weight: bold;
			margin-left: -10px;
			}
	.ol-resources-resourcelist {
		margin-top: -10px;
		width: 370px;
		float: right;
		}
		.ol-resources-resourcelist ul { margin-left: 10px; }
#ol-section-your-portfolio {}
	.ol-game-tiles { margin: -10px; padding: 10px 0 0 10px; overflow: auto; }
		.ol-no-game-tiles { margin-bottom: 10px; text-align: center; display: block;}
		.ol-game-tiles .ol-game-tile { width: 195px; }
			.ol-game-tiles .ol-game-thumb { width: 195px; height: 146px; }
.message-unread { font-weight: bold; }
#mechanic-messages { height: 248px;}
	#message-actions {
		margin: 10px -10px -10px;
		padding: 5px;
		border-top: 1px solid #bbb;
		background: #eee;
		text-align: center;
		border-radius: 0 0 2px 2px;
		}
		#message-actions .button {
			font-size: 14px;
			padding: 2px 4px;
			}
	#message-header {
		margin: -10px -10px 10px;
		background: #eee;
		border-bottom: 1px solid #bbb;
		}
		#message-header table { margin: 10px 10px 0; }
			#message-header td { border-right: 1px dotted #bbb; }
	#message-body { height: 169px; overflow: auto; }

/* === OL Instructor Interface === */

#ol-instructor-header {
	padding: 10px;
	background: #fff;
	border-bottom: 1px solid #999;
	overflow: auto;
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.3);
	-o-box-shadow: 0 0 10px rgba(0,0,0,0.3);
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	}
	#ol-instructor-header h1 {
		font-size: 20px;
		background: #6a6; color: #fff;
		padding: 10px;
		webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-o-border-radius: 3px;
		border-radius: 3px;
		}
		#ol-instructor-header h1 span { font-size: 12px; line-height: 12px; }
			#ol-instructor-header h1 span a { margin-left: 10px; color: #ff9; text-decoration: underline;}
			#ol-instructor-header h1 span a:hover { color: #fff;}
			#ol-instructor-header h1 .button {
				font-size: 12px;
				padding: 3px 5px;
				text-decoration: none;
				}
	#ol-instructor-header .ol-section {
		margin: 10px 0 0;
		}
	.ol-instructor-header-nav {
		margin-top: 10px;
		width: 100px;
		float: left;
		}
	#ol-instructor-header-actions {
		margin-top: 15px;
		padding: 0 10px;
		text-align: center;
		width: 702px;
		float: left;
		}
		#ol-instructor-header-actions select  { display: inline-block; float: none; margin: 0 10px 0 0; width: 100px; }
		#ol-instructor-header-actions a  { font-size: 12px;}
		#ol-instructor-header-actions .button  { font-size: 14px; height: auto; padding: 5px; }
	#ol-instructor-header-actions + .ol-instructor-header-nav { text-align: right; }
	#ol-ticket-requires-feedback {
		margin-bottom: 10px;
		font-size: 12px;
		text-transform: uppercase;
		padding: 5px;
		background-color: #b00;
		font-weight: bold;
		text-align: center;
		color: white;
		clear: both;
		}
	#ol-instructor-submit-game {
		padding: 10px; margin: 10px;
		background: #eee;
		border: 1px solid #ccc;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-o-border-radius: 3px;
		border-radius: 3px;
		}
	#ol-instructor-header #ol-ticket-requires-feedback { margin: 60px 0 0; }
.ol-section table {
	width: 920px;
	margin: -10px -10px -11px;
	}
	.ol-section tr { border-bottom: 1px solid #ddd; }
	.ol-section tr:nth-child(even) { background: #fff; }
	.ol-section td.complete{ color: #9c9; background: #dfd; }
	.ol-section td.submitted{ color: #bb8; background: #ffb; }
	.ol-section td.locked{ color: #999; background: #eee; }
	.ol-section td.needs-feedback{ color: #d66; background: #fcc; }
	.ol-section th, .ol-section thead td {
		background: #eee; color: #bbb;
		border-bottom: 1px solid #bbb;
		border-right: 1px dotted #bbb;
		padding: 5px;
		}
		.ol-section th:last-child { border-right: none; }
	.ol-section td {
		padding: 5px;
		text-align: center;
		}
	.ol-section .ol-table-header {
		background: #eee;
		border-top: 1px solid #ccc;
		}
	.ol-section table + h3 {
		margin-top:10px;
		}
.ol-instructor-no-tickets { 
	margin-top: 20px;
	font-weight: bold;
	display: block;
	text-align: center;
	}

/* === OL Instructor Profile === */

#ol-instructor-profile-left { 
	width: 300px;
	margin-right: 10px;
	float: left;
	}

/* === Comments === */

#comments {
	overflow: hidden;
	}
	#comments ul { list-style-type: none; }
	#comments .header { overflow:hidden; }
	#comments h3 {
		float: left; 
		margin-right: 20px; 
		font-family: "OutageCut"; 
		color: #4ea4d8;
		}
	.comment_reply {
		float: left;
		width: 482px;
		}
		.comment_reply textarea {
			width: 395px; height: 20px;
			border: none;
			padding: 0 10px;
			margin-right: 3px;
			float: left;
			font-family: Arial, Verdana, sans-serif;
			line-height: 20px;
			border: 1px solid #999;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			-o-border-radius: 3px;
			border-radius: 3px;
			-webkit-transition-property: height;
			-moz-transition-property: height;
			-o-transition-property: height;
			transition-property: height;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s;
			-webkit-transition-timing-function: ease;
			-moz-transition-timing-function: ease;
			-o-transition-timing-function: ease;
			transition-timing-function: ease;
			}
			.comment_reply textarea:focus {
				height: 100px;
				-webkit-transition-property: height;
				-moz-transition-property: height;
				-o-transition-property: height;
				transition-property: height;
				-webkit-transition-duration: 0.3s;
				-moz-transition-duration: 0.3s;
				-o-transition-duration: 0.3s;
				transition-duration: 0.3s;
				-webkit-transition-timing-function: ease;
				-moz-transition-timing-function: ease;
				-o-transition-timing-function: ease;
				transition-timing-function: ease;
				}
		.comment_reply input[type="submit"] {
			color: #fff; font-weight: bold;
			border: 1px solid #C90;
			background: url("../images/button.png") repeat-x scroll left top #F9CF4C;
			width: 62px; height: 22px;
			padding: 0;
			cursor: pointer;
			float: left;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			-o-border-radius: 3px;
			border-radius: 3px;
			-webkit-text-shadow: 1px 1px #C90;
			-moz-text-shadow: 1px 1px #C90;
			-o-text-shadow: 1px 1px #C90;
			text-shadow: 1px 1px #C90;
			}
			.comment_reply input[type="submit"]:hover { background-position: -60px -20px;}
	.comment_list { float: left; width: 100%; }
		.comment_list > .comment {
			clear: both;
			margin-top: 20px;
			overflow: hidden;
			}
			.comment_list > .comment > .comment_header {
				-webkit-border-radius: 3px 3px 0 0;
				-moz-border-radius: 3px 3px 0 0;
				-o-border-radius: 3px 3px 0 0;
				border-radius: 3px 3px 0 0;
				}
			.comment_list > .comment > .comment_content {
				-webkit-border-radius: 0 0 0 3px;
				-moz-border-radius: 0 0 0 3px;
				-o-border-radius: 0 0 0 3px;
				border-radius: 0 0 0 3px;
				}
			.comment_list > .comment_bad.comment_collapsed > .comment_header {
				-webkit-border-radius: 3px 3px 0 3px;
				-moz-border-radius: 3px 3px 0 3px;
				-o-border-radius: 3px 3px 0 3px;
				border-radius: 3px 3px 0 3px;
				}
		.comment_header {
			background: #fff;
			height: 20px;
			padding: 4px 4px 4px 10px;
			border: 1px solid #999;
			border-bottom: 1px solid #ddd;
			}
			.comment_username { font-weight: bold; }
			.comment_date { font-size: 12px; font-style: italic; color: #ccc; margin-right: 20px; }
			.comment_rating { font-weight: bold; }
				.comment_rating-good { color: #80c680; }
				.comment_rating-bad { color: #c68080; }
			.comment_vote {
				display: inline-block;
				width: 20px; height: 20px;
				text-indent: -9999px;
				background-image: url('../images/realrobots-icons.png');
				}
				.comment_vote-good { background-position: 0 0; }
					.comment_vote-good:hover { background-position: 0 -20px; }
					.comment_vote-good.active { background-position: 0 -40px; }
				.comment_vote-bad { background-position: -20px 0; }
					.comment_vote-bad:hover { background-position: -20px -20px; }
					.comment_vote-bad.active { background-position: -20px -40px; }
			.comment_flag {
				float: right;
				text-indent: -9999px;
				display: block;
				width: 20px; height: 20px;
				background-image: url('../images/realrobots-icons.png');
				background-position: -80px 0;
				}
				.comment_flag:hover { background-position: -80px -20px; } 
		.comment_content {
			background: #f6f6f6;
			padding: 4px 10px;
			border: 1px solid #999;
			border-top: none;
			position: relative;
			overflow: auto;
			}
			.delete-comment { float: right; color: #b00 !important; font-weight: bold; font-size: 10px; text-transform: uppercase; display: block; margin-left: 20px; }
			.delete-comment:hover { color: #f00 !important;}
			.comment_content::-webkit-scrollbar { width: 5px; height: 5px; }
			.comment_content::-webkit-scrollbar-track { margin: 10px; }
			.comment_content:hover::-webkit-scrollbar-track { background:#eee; }
			.comment_content:hover::-webkit-scrollbar-thumb { border-radius: 3px; background: #ccc; }
			.comment_header + .comment_content:before {
				content:"";
				position: absolute;
				top: -7px;
				left: 20px;
				width: 0;
				height: 0;
				border-left: 7px solid transparent;
				border-bottom: 7px solid #ddd;
				border-right: 7px solid transparent;
				}
			.comment_header + .comment_content:after {
				content:"";
				position: absolute;
				top: -6px;
				left: 20px;
				width: 0;
				height: 0;
				border-left: 7px solid transparent;
				border-bottom: 7px solid #f6f6f6;
				border-right: 7px solid transparent;
				}
		.comment_collapsed > .comment_header {
			background: #eee;
			border-bottom: 1px solid #999;
			}
			.comment_collapsed .show_hidden, .comment_collapsed .expand_thread { 
				font-style: italic;	font-size: 12px; 
				}
		.comment_bad > .comment_header { background: #fce2e2; }
		.comment_bad > .comment_content { display: none; }
		.comment_bad > .comment_header > .comment_rating { display: none; }
		.comment_bad > .comment_header > .comment_vote { display: none; }
		.comment_bad > .comment_header > .comment_flag { display: none; }
		
		.comment_replies { float: right; width: 96%; }
			.comment_replies .comment_header { border-top: none; }
			.comment_replies .comment:nth-last-child(2) .comment_content,
			.comment_replies .comment:nth-last-child(2).comment_collapsed .comment_header {
				-webkit-border-radius: 0 0 3px 0;
				-moz-border-radius: 0 0 3px 0;
				-o-border-radius: 0 0 3px 0;
				border-radius: 0 0 3px 0;
				}
		.comment .comment_reply {
			padding: 4px;
			-webkit-border-radius: 0 0 5px 5px;
			-moz-border-radius: 0 0 5px 5px;
			-o-border-radius: 0 0 5px 5px;
			border-radius: 0 0 5px 5px;
			}
		.comment .alert { border: 1px solid #999; }
		.comment_replies .comment .alert { border-top: none; }

/* === Student Profile === */

.ol-student-profile-username {
	display: block;
	font-size: 24px;
	margin-bottom: 10px;
	}
.ol-student-profile-info {
	width: 440px;
	float: left; margin-right: 10px;
	}

/* === Video FAQ === */
#video-review-howto { line-height: 20px;}
	#video-review-howto h2 {
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-o-border-radius: 3px;
		border-radius: 3px;
		border: none;
		padding: 10px;
		margin: 0 0 10px;
		font-size: 18px;
		}
	#video-review-howto p { margin-bottom: 10px; }
	#video-review-howto ul, #video-review-howto ol { margin: 10px 0 10px 40px; }
		#video-review-howto li { margin: 10px 0; }
		#video-review-howto ul { list-style-type: square; }
		#video-review-howto ol { list-style-type: decimal; }
		#vid_review-01 {
			margin-top: 10px;
			width: 571px; height: 481px;
			background: url('../images/templates/faq/video_review/01-vid_review.jpg') center center no-repeat;
			}
		#vid_review-02 {
			margin-top: 10px;
			width: 580px; height: 226px;
			background: url('../images/templates/faq/video_review/02-vid_review.png') center center no-repeat;
			}
		#vid_review-03 {
			margin-top: 10px;
			width: 579px; height: 251px;
			background: url('../images/templates/faq/video_review/03-vid_review.png') center center no-repeat;
			}
		#vid_review-04 {
			margin-top: 10px;
			width: 506px; height: 187px;
			background: url('../images/templates/faq/video_review/04-vid_review.png') center center no-repeat;
			}
		#vid_review-05 {
			margin-top: 10px;
			width: 529px; height: 434px;
			background: url('../images/templates/faq/video_review/05-vid_review.png') center center no-repeat;
			}
		#vid_review-06 {
			margin-top: 10px;
			width: 489px; height: 33px;
			background: url('../images/templates/faq/video_review/06-vid_review.png') center center no-repeat;
			}
		#vid_review-07 {
			margin-top: 10px;
			width: 474px; height: 487px;
			background: url('../images/templates/faq/video_review/07-vid_review.jpg') center center no-repeat;
			}
		#vid_review-08 {
			margin-top: 10px;
			width: 285px; height: 271px;
			background: url('../images/templates/faq/video_review/08-vid_review.png') center center no-repeat;
			}