#courseList{  }
.coursesCategory { text-align:center; }

.stars { margin-top:5px; font-size: 14px; }
.stars a
{
	color:#2c61b0;
	text-decoration: none;
	font-weight: bold;
}

/* new coursebox */
.courseBox
{
	width:250px;
	min-height:335px;
	border: #B0B0B0 solid 1px;
	background-color:#F4F4F4;
	box-shadow: 4px 4px 13px 0px rgba(50,50,50,0.15);
	margin:12px;
	margin-bottom:24px;
	display:inline-block;
	position:relative;
	color: #333;
	border-radius:5px;
}

.courseImage
{
	position: relative;
	background-size: cover;
	background-position: 50% 33%;
	background-color: #999;
	width:250px;
	height:190px;
}

.courseTitle
{
	position: absolute;
	bottom: 0px;
	left: 0px;
	background-color:rgba(0,0,0,0.66);
	color:#FFF;
	width:100%;
	display:block;
	margin:0px;
	padding:2px 10px;
	font-weight:bold;
	text-align:center;
	text-shadow:1px 1px 1px rgba(0,0,0,0.25);
}

.courseTitle.noIMG
{
	position: absolute;
	top:0px;
	left: 0px;
	background-color:transparent;
}

.courseImage.noIMG
{
	position: relative;
	background-size: cover;
	background-position: 50% 33%;
	background-color: #999;
	width:248px;
	height:45px;
	border-radius:5px 5px 0px 0px;
}

.courseBox.noIMG { min-height:180px; }

.courseBoxDescription
{
	padding:10px 9px;
	text-align:left;
}

.courseBoxDescription span
{
	background-image:url("/frontend/img/iconYes.gif");
	background-repeat: no-repeat;
	background-position: 0px 50%;
	padding-left:17px;
	font-size:14px;
	line-height:17px;
}

.courseBoxDescription span small { line-height:10px; }

.courseBoxDescription img { width:12px; } /* tiny stars! */

.courseBoxPrices { position:absolute; right:5px; bottom:6px; width: 238px; }
.courseBoxPrices .btnSubmit { font-size:13px !important; }


/* desktop css*/
@media only screen and (min-width: 600px) and (max-width: 9999px)
{
	.courseBox.noIMG { min-height:233px; }
	.courseBoxPrices .left, .courseBoxPrices .right { float:none; display:block; }
	.courseBoxPrices a { margin-top:5px; }
	.courseBoxPrices { bottom:unset; }
}
/* mobile/tablet sizing */

@media only screen and (min-width: 1px) and (max-width: 600px)
{
	.coursesCategory { font-size: 24px; }
	.courseBox
	{
		font-size:14px;
		width:95%;
		height:115px;
		min-height:0px;
		text-align:left !important;
	}

	.courseBox.noIMG { min-height: inherit; }
	.courseBox.noIMG.a124 { min-height:124px; }
	.courseBox.noIMG.a138 { min-height:138px; }
	.courseBox.noIMG.a152 { min-height:152px; }
	.courseBox.noIMG.a166 { min-height:166px; }
	.courseBox.noIMG.a200 { min-height:200px; }
	.courseBox.noIMG.a217 { min-height:217px; }
	.courseBox.noIMG.a230 { min-height:230px; }

	.courseTitle
	{
		background:none;
		color:#000;
		top:1px;
		bottom:0px;
		left:10px;
		position:inherit;
		font-size:16px;
		text-align:left;
	}

	.courseTitle.noIMG
	{
		position: absolute;
		top:0px;
		left: 10px;
		background-color:transparent;
		width:100%;
	}

	.courseImage
	{
		width:inherit;
		height:inherit;
		background:none;
	}

	.courseImage.noIMG
	{
		height:110px;
		background:none;
	}

	.courseBoxDescription.noIMG
	{
		position:absolute;
		left:0px;
		top:23px;
	}

	.courseBoxDescription
	{
		position:absolute;
		left:115px;
		top:23px;
	}

	.courseBoxDescription span { line-height:14px !important; }
	.courseBoxPrices { margin-top:-25px; width: 165px; }
	.stars { margin-top:4px; }
	.courseBoxPrices .left { float:right !important; margin-bottom:5px; }
	.courseBoxDescription img { width:10px; } /* tiny stars! */
	.courseBoxPrices .left, .courseBoxPrices .right
	{
		font-weight:normal !important; font-size: 12px !important;
	}
}

/* super tiny mobile mode */
@media only screen and (min-width: 1px) and (max-width: 475px)
{
	.courseImage img { display:none; }
	.courseBoxDescription { left:0px; }
	.courseTitle { font-size:15px; }
	.courseBox { width:98%; height:unset; }
	.courseImage.noIMG
	{
		height:110px;
		width:unset;
	}
}

/* make list of courses not extend beyond a single line. */
#courseWrapperFront { max-height:435px; overflow:hidden; }