// studio - views - user dashboard
// ====================

body.dashboard {

	.my-classes {
	  margin-top: $baseline;
	}

	.class-list {
		margin-top: 20px;
		border-radius: 3px;
		border: 1px solid $darkGrey;	
		background: #fff;
		@include box-shadow(0 1px 2px rgba(0, 0, 0, .1));

		li {
			position: relative;
			border-bottom: 1px solid $mediumGrey;

			&:last-child {
				border-bottom: none;
			}

			.class-link {
				z-index: 100;
				display: block;
				padding: 20px 25px;
				line-height: 1.3;
				
				&:hover {
					background: $paleYellow;

					+ .view-live-button {
						opacity: 1.0;
						pointer-events: auto;
					}
				}
			}
		}

		.class-name {
			display: block;
			font-size: 19px;
			font-weight: 300;
		}

		.detail {
			font-size: 14px;
			font-weight: 400;
			margin-right: 20px;
			color: #3c3c3c;
		}

		// view live button
		.view-live-button {
			z-index: 10000;
			position: absolute;
			top: 15px;
			right: $baseline;		
			padding: ($baseline/4) ($baseline/2);
			opacity: 0.0;
			pointer-events: none;

			&:hover {
				opacity: 1.0;
				pointer-events: auto;
			}
		}
	}

	.new-course {
		padding: 15px 25px;
		margin-top: 20px;
		border-radius: 3px;
		border: 1px solid $darkGrey;	
		background: #fff;
		box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
		@include clearfix;

		.row {
			margin-bottom: 15px;
			@include clearfix;
		}

		.column {
			float: left;
			width: 48%;
		}

		.column:first-child {
			margin-right: 4%;
		}

		.course-info {
			width: 600px;
		}

		label {
			display: block;
			font-size: 13px;
			font-weight: 700;
		}

		.new-course-org,
		.new-course-number,
		.new-course-name {
			width: 100%;
		}

		.new-course-name {
			font-size: 19px;
			font-weight: 300;
		}

		.new-course-save {
			@include blue-button;
		}

		.new-course-cancel {
			@include white-button;
		}
	}
}