#courses_list_container.dark
{
	background: linear-gradient(to top, rgba(170,170,170,0.5), rgba(240,240,240,1));
    border: medium none;
    border-radius: 2px;
	color: #222;
    display: inline-block;
    line-height: 19px;
	padding: 5px 10px;
    position: relative;
    float: left;
	margin-right: 50px;
	font-size: 14px;
	transition-duration: 0.3s;
	transition-property: box-shadow;
}

#courses_list_container.dark:hover
{
	box-shadow: 0 0 6px 2px #efefef;
}

#courses_list_container.dark:hover
{
	cursor: default;
}
	
	#courses_list_container.dark:hover .courses_list
	{
		visibility: visible;
		height: auto;
		opacity: 1;
	}

	#courses_list_container.dark .courses_list
	{
		position: absolute;
		top: 100%;
		left: -10px;
		background-color: #343434;
		z-index: 200;
		margin-top: -1px;
		padding: 0;
		max-height: 700px;
		overflow: auto;
		border-radius: 4px;
		line-height: 20px;
		height: 0px;
		opacity: 0;
		transition-duration: 0.3s;
		transition-property: opacity;
		box-shadow: 0 0 4px #343434;
		visibility: hidden;
	}
	
	#courses_list_container.dark .courses_list:hover
	{
		visibility: visible;
	}
	
		#courses_list_container.dark .courses_list LI
		{
			margin: 0;
			list-style: none;
			white-space: nowrap;
			padding: 0;
			transition-property: background-color;
			transition-duration: 0.1s;
			border-bottom: 1px solid rgba(250, 250, 250, 0);
			border-top: 1px solid rgba(250, 250, 250, 0);
		}
		
			#courses_list_container.dark .courses_list LI:nth-child(1)
			{
				margin-top: 0;
			}
			
			#courses_list_container.dark .courses_list LI:hover:nth-child(1)
			{
				border-top: 1px solid rgba(250, 250, 250, 0);
			}
			
			#courses_list_container.dark .courses_list LI:hover:nth-last-child(1)
			{
				border-bottom: 1px solid rgba(250, 250, 250, 0);
			}
		
			#courses_list_container.dark .courses_list LI A
			{
				display: block;
				text-decoration: none;
				font-size: 14px;
				color: #dedede;
				word-wrap: normal;
				padding: 0 20px 0 11px;
				line-height: 20px;
			}
			
			#courses_list_container.dark .courses_list LI:hover
			{
				background-color: #615858;
				border-bottom: 1px solid rgba(250, 250, 250, 0.2);
				border-top: 1px solid rgba(250, 250, 250, 0.2);
			}
			
#courses_list_container.light
{
	background-color: #fff;
    border: 1px solid #ccc;
	color: #555;
    display: inline-block;
    line-height: 19px;
	padding: 5px 10px;
    position: relative;
    float: left;
	margin-right: 50px;
	font-size: 12px;
	height: 20px;
	transition-duration: 0.3s;
	transition-property: box-shadow;
	z-index: 150;
}

#courses_list_container.light:hover
{
	box-shadow: 0 0 4px #333;
}

#courses_list_container.light:hover
{
	cursor: default;
}
	
	#courses_list_container.light:hover .courses_list
	{
		visibility: visible;
		height: auto;
		opacity: 1;
	}

	#courses_list_container.light .courses_list
	{
		position: absolute;
		top: 100%;
		left: -10px;
		background-color: #dde1e5;
		z-index: 20;
		margin-top: -1px;
		padding: 0;
		max-height: 700px;
		overflow: auto;
		line-height: 20px;
		height: 0px;
		visibility: hidden;
		opacity: 0;
		transition-duration: 0.3s;
		transition-property: opacity;
		border: 1px solid #ccc;
	}
	
	#courses_list_container.light .courses_list:hover
	{
		visibility: visible;
	}
	
		#courses_list_container.light .courses_list LI
		{
			margin: 0;
			list-style: none;
			white-space: nowrap;
			padding: 0;
			transition-property: background-color;
			transition-duration: 0.1s;
			border-bottom: 1px solid rgba(250, 250, 250, 0);
			border-top: 1px solid rgba(250, 250, 250, 0);
		}
		
			#courses_list_container.light .courses_list LI:nth-child(1)
			{
				margin-top: 0;
			}
			
			#courses_list_container.light .courses_list LI:hover:nth-child(1)
			{
				border-top: 1px solid rgba(250, 250, 250, 0);
			}
			
			#courses_list_container.light .courses_list LI:hover:nth-last-child(1)
			{
				border-bottom: 1px solid rgba(250, 250, 250, 0);
			}
		
			#courses_list_container.light .courses_list LI A
			{
				display: block;
				text-decoration: none;
				font-size: 14px;
				color: #343434;
				word-wrap: normal;
				padding: 0 20px 0 11px;
				line-height: 22px;
				
			}
			
			#courses_list_container.light .courses_list LI:hover
			{
				background-color: #b8bcc0;
				border-bottom: 1px solid rgba(0, 0, 0, 0.2);
				border-top: 1px solid rgba(0, 0, 0, 0.2);
			}