/*
*		    ________      .___   
*	__  _  _\_____  \   __| _/
*	\ \/ \/ / _(__  <  / __ |
*	 \     / /       \/ /_/ |
*	  \/\_/ /______  /\____ |
*	               \/      \/
*
*	@author			Jacques Baars <j@w3d.co.za>
*
*	@notice			This is the property of W3Designs, W3Development, W3D,
*					it is illegal to use this source code without the required permission,
*					contact j@w3d.co.za for further advice or permissions.
*
*	@license		Copyright (c) 2016 W3Designs (PTY) Ltd. (http://www.w3d.co.za)
*/

span.study-status{
	color: #fff;
	width: 80px;
	padding: 5px 8px; 
	text-align: center;
	display: inline-block;
	background-color: #222;
}

	span.study-status.cl{background-color: var(--redColor);}
	span.study-status.op{background-color: var(--greenColor);}
	span.study-status.pe{background-color: var(--blueColor);}
	span.study-status.te{background-color: #444;}

/* study */
#study{}

	/* Top Search */
	#study > .course-search{
		margin: 0 auto;
		max-width: 900px;
	}
		
		#study > .course-search h1{
			line-height: 80%;
			text-align: center;
			font-size: var(--fontSize300);
		}
		
		#study > .course-search .form{
			margin: 40px 0;
		}
		
		#study > .course-search .welcome{
			text-align: center;
		}
		
			#study > .course-search .welcome h2{
				font-size: var(--fontSize120);
			}

	/* Side Search */
	#study > .side-course-search{}

	/* Search */
	#study > .search{}
	
		/* Filters */
		#study > .search .filters{
			padding: 0 0 10px;
			margin-bottom: 20px;
			border-bottom: 1px solid #ddd;
		}

		/* Results */
		#study > .search .results{}
		
			#study > .search .results .note{
				padding: 10% 0;
				font-weight: bold;
				text-align: center;
				font-size: var(--fontSize140);
			}
		
			/* Course */
			#study > .search .results .course{
				padding: 10px;
				margin-bottom: 10px;
				border: 1px solid #eee;
				background-color: #fff;
				
				-webkit-transition-duration: 0.3s;
				transition-duration: 0.3s;
				
				-webkit-transition-property: box-shadow, transform;
				transition-property: box-shadow, transform;
			}
			
				#study > .search .results .course a{
					color: #222;
				}
			
				#study > .search .results .course:hover{
					-webkit-box-shadow: -4px 10px 46px -8px rgba(0,0,0,0.75);
					-moz-box-shadow: -4px 10px 46px -8px rgba(0,0,0,0.75);
					box-shadow: -4px 10px 46px -8px rgba(0,0,0,0.75);
				}
		
				#study > .search .results .course:last-child{
					margin-bottom: 0;
				}
			
				#study > .search .results .course .image{}
			
				#study > .search .results .course .title{
					padding: 5px;
					font-weight: bold;
					border-bottom: 1px solid #eee;
				}
			
				#study > .search .results .course .saqa-id{
					padding: 5px;
					font-size: var(--fontSize90);
				}
			
				#study > .search .results .course .description{
					padding: 5px;
					margin-top: 10px;
					font-size: var(--fontSize90);
				}
			
				#study > .search .results .course .module{
					color: #fff;
					padding: 5px;
					margin-top: 10px;
					font-size: var(--fontSize90);
					background-color: var(--bgColor);
				}
		
			/* Enrolment */
			#study > .search .results .enrolment{
				padding: 10px;
				margin-bottom: 10px;
				border: 1px solid #eee;
				background-color: #fff;
				
				-webkit-transition-duration: 0.3s;
				transition-duration: 0.3s;
				
				-webkit-transition-property: box-shadow, transform;
				transition-property: box-shadow, transform;
			}

		/* Loading */
		#study > .search .loading{
			width: 100px;
			padding: 10% 0;
			margin: 0 auto;
		}

	/* Categories */
	#study > .categories{}
		
		#study > .categories .category{}
			
			#study > .categories .category .image{}
			
			#study > .categories .category .title{}

	/* Enrol */
	#study .enrol{
		padding: 20px;
		text-align: center;
		background: var(--softBgColor);
		border: 1px solid var(--softBorderColor);

		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-m-border-radius: 3px;
		-o-border-radius: 3px;
		border-radius: 3px;

		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
		-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
	}

		#study .enrol .total{
			color: var(--redColor);
			font-size: var(--fontSize140);
		}

	/* Course */
	#study > .course{}
	
		#study > .course .enrolment-options{
			padding-top: 50px;
		}
		
			#study > .course .enrolment-options > .buttons{
				text-align: center;
			}
			
			#study > .course .enrolment-options > .info{
				margin-top: 20px;
				text-align: center;
				color: var(--softColor);
			}
			
			#study > .course .enrolment-options > .classrooms{
				margin-top: 50px;
			}
			
	/* Classroom */
	#study .classroom{
		padding: 10px;
		margin-bottom: 10px;
	}

	#study .classroom:last-child{
		margin-bottom: 0;
	}

	#study .classroom:nth-child(even){
		background-color: var(--softBgColor);
	}

		#study .classroom .heading{
			margin-bottom: 10px;
			padding-bottom: 10px;
			justify-content: space-between;
			border-bottom: 1px solid var(--softBorderColor);
		}
		
			#study .classroom .heading .title{
				padding-left: 10px;
			}
			
			#study .classroom .heading .buttons{}
		
				#study .classroom .heading .buttons .btn{
					margin-left: 10px;
				}
	
		#study .classroom .info{
			padding: 10px;
		}

	/* Notice */
	#study .notice{
		padding: 10px;
		margin: 0 0 2%;
		text-align: center;
		background-color: var(--yellowBgColor);
		border: 1px solid var(--yellowBorderColor);
	}
	
	/* My Courses */
	#study .my-courses{}
			
		#study .my-courses table tr td{
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	
	/* My Course */
	#study .my-course{}
	
	/* Submit File */
	#study .submit-file{
		width: 380px;
		padding: 20px;
		background-color: #fff;
	}
	
	/* File List */
	#study .file-list{
		padding: 20px;
	}
	
	/* Module List */
	#study .module-list{}

		#study .module-list table tr td{
			max-width: 300px;
		}

		#study .module-list table tr td[data-label="Files"]{
			text-align: right;
		}

/* 600px */
@media screen and (max-width: 600px){
	#study > .course .enrolment-options .buttons .btn{
		width: 100%;
		display: block;
		padding-left: 0;
		padding-right: 0;
	}

	#study .classroom .heading{
		display: block;
	}
		
		#study .classroom .heading .buttons .btn{
			width: 100%;
			display: block;
			padding-left: 0;
			padding-right: 0;
			margin-top: 10px;
			margin-left: 0;
			text-align: center;
		}
	
	#study .my-courses table tr{
		border-bottom: 5px solid var(--bgColor);
	}
	
	#study .module-list table tr td{
		max-width: 100%;
	}
	
		#study .module-list table tr{
			border-bottom: 5px solid var(--bgColor);
		}
}