﻿/* --- BANNER AREA STYLE START FROM HERE --- */

#BannerContainer {
	width: 1366px;
	margin-left: auto;
	margin-right: auto;
	height: 445px;
	overflow-x: scroll;
	overflow-y: hidden;
	background-color: #ff6a00;
}

#Row1 {
	float: none;
}

#Row2 {
	float: none;
}

.postRectangleTile {
	float: left;
	height: 200px;
	width: 400px;
	margin-right: 10px;
	margin-top: 10px;
	position: relative;
}

.postSquareTile {
	float: left;
	height: 200px;
	width: 200px;
	margin-right: 10px;
	margin-top: 10px;
	position: relative;
}

.imageRectangle {
	width: 400px;
	height: 200px;
	-moz-background-size: cover;
	-o-background-size: cover;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center;
}

.imageSquare {
	width: 200px;
	height: 200px;
	-moz-background-size: contain;
	-o-background-size: contain;
	-webkit-background-size: contain;
	background-size: contain;
}

/*FOR REPEATER 1*/

.rep1PostSquareTileText {
	position: absolute;
	top: auto;
	bottom: 0px;
	width: 100%;
	height: 100px;
	background-color: rgba(204, 204, 204,0.8);
	-moz-transition: 1s all;
	-o-transition: 1s all;
	-webkit-transition: 1s all;
	transition: 1s all;
}

.postSquareTile:hover .rep1PostSquareTileText {
	height: 200px;
	-moz-transition: 1s all;
	-o-transition: 1s all;
	-webkit-transition: 1s all;
	transition: 1s all;
}

.rep1PostRectangleTileText {
	position: absolute;
	top: auto;
	bottom: 0px;
	width: 100%;
	height: 50px;
	background-color: rgba(204, 204, 204,0.8);
	-moz-transition: 1s all;
	-o-transition: 1s all;
	-webkit-transition: 1s all;
	transition: 1s all;
}

.postRectangleTile:hover .rep1PostRectangleTileText {
	height: 200px;
	-moz-transition: 1s all;
	-o-transition: 1s all;
	-webkit-transition: 1s all;
	transition: 1s all;
}

/*FOR REPEATER 2*/

.rep2PostSquareTileText {
	position: absolute;
	top: auto;
	bottom: 0px;
	width: 100%;
	height: 100px;
	background-color: rgba(204, 204, 204,0.8);
	-moz-transition: 1s all;
	-o-transition: 1s all;
	-webkit-transition: 1s all;
	transition: 1s all;
}

.postSquareTile:hover .rep2PostSquareTileText {
	height: 200px;
	-moz-transition: 1s all;
	-o-transition: 1s all;
	-webkit-transition: 1s all;
	transition: 1s all;
}

.rep2PostRectangleTileText {
	position: absolute;
	top: auto;
	bottom: 0px;
	width: 100%;
	height: 50px;
	background-color: rgba(204, 204, 204,0.8);
	-moz-transition: 1s all;
	-o-transition: 1s all;
	-webkit-transition: 1s all;
	transition: 1s all;
}

.postRectangleTile:hover .rep2PostRectangleTileText {
	height: 200px;
	-moz-transition: 1s all;
	-o-transition: 1s all;
	-webkit-transition: 1s all;
	transition: 1s all;
}

/*FOR REPEATER TEXT*/

.textImg {
	float: left;
	background-image: url(../../Images/postIcon.png);
	width: 32px;
	height: 32px;
	background-repeat: no-repeat;
	margin-top: 5px;
	margin-left: 5px;
}

.textPos {
	float: left;
	width: 78%;
	margin-left: 5px;
}

.textStyle {
	color: #fff;
	text-align: justify;
	font-size: 14px;
}

.textDateStyle {
	text-decoration: none;
	color: #fff;
	font-size: 9px;
}

/* --- BANNER AREA STYLE END HERE --- */

/* --- COURSES AREA STYLE START FROM HERE --- */

#CourseHolder{
	height:1900px;
}

.courseCommon {
	cursor: pointer;
	-moz-transition: ease 2s;
	-o-transition: ease 2s;
	-webkit-transition: ease 2s;
	transition: ease 2s;
	position: absolute;
}

.courseTile {
	height: 200px;
	width: 400px;
	z-index: 2;
	/*background-color: #ff6a00;*/
	background-repeat: no-repeat;
	box-shadow: #000000 0px 0px 3px;
}

.courseTileText {
	margin: 10px;
	background-color: rgba(255, 255, 255,0.4);
	font-size: 21px;
	color: #000000;
	padding: 3px;
	-moz-transition: ease 1s;
	-o-transition: ease 1s;
	-webkit-transition: ease 1s;
	transition: ease 1s;
}

.courseTileDescription {
	margin: 10px;
	background-color: rgba(255, 255, 255,0.4);
	font-size: 13px;
	color: #000000;
	-moz-transition: ease 1s;
	-o-transition: ease 1s;
	-webkit-transition: ease 1s;
	transition: ease 1s;
	text-align: justify;
	padding: 2px;
}

.courseTile:hover .courseTileText {
	background-color: rgba(255, 255, 255,0.7);
	-moz-transition: ease 1s;
	-o-transition: ease 1s;
	-webkit-transition: ease 1s;
	transition: ease 1s;
}

.courseTile:hover .courseTileDescription {
	background-color: rgba(255, 255, 255,0.7);
	-moz-transition: ease 1s;
	-o-transition: ease 1s;
	-webkit-transition: ease 1s;
	transition: ease 1s;
}

.courseDescription {
	height: 198px;
	width: 398px;
	z-index: 1;
	border: 1px solid rgba(128, 128, 128, 0.0);
	overflow: hidden;
	text-align: justify;
	font-size: 14px;
}

#SubCourse {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

.subCourseContainer {
	width: 100%;
	height: 250px;
}

	.subCourseContainer:hover .subCourseDescription {
		background-color: rgba(128, 128, 128, 0.2);
		-moz-transition: ease 1s;
		-o-transition: ease 1s;
		-webkit-transition: ease 1s;
		transition: ease 1s;
	}

.subCourseImageContainer {
	width: 25%;
	float: left;
}

.subCourseImage {
	height: 250px;
	width: 100%;
	-moz-background-size: auto;
	-o-background-size: auto;
	-webkit-background-size: auto;
	background-size: auto;
	background-repeat: no-repeat;
	background-position: center;
}

.subCourseTextContainer {
	float: left;
	width: 75%;
}

.subCourseSubHeading{
	font-size:11px;
	color:#808080;
}

.subCourseSeparator {
	height: 20px;
	border-top: 1px solid #ff6a00;
}

.subCourseTitle {
	padding: 10px;
	font-size: 21px;
}

.subCourseTitleText{
	color:#ff6a00;
	font-weight:bold;
}

.subCourseDescription {
	padding: 10px;
	font-size: 14px;
	text-align: justify;
	color: #808080;
	-moz-transition: ease 2s;
	-o-transition: ease 2s;
	-webkit-transition: ease 2s;
	transition: ease 2s;
}

.courseLeftPanel {
	float: left;
	width: 750px;
}

.courseRightPanel {
	float: right;
	width: 450px;
}

.courseDescriptionTitle {
	font-size: 26px;
	padding: 10px;
	color:#ff6a00;
	font-weight:bolder;
}

/* --- COURSES AREA STYLE END HERE --- */

/* --- REVIEW AREA STYLE START FROM HERE --- */

#ReviewPanel {
	height: 450px;
	overflow-x: scroll;
	overflow-y: hidden;
}

#ReviewPanelRow1 {
	/*width:1500px;*/
}

#ReviewPanelRow2 {
	/*width:1500px;*/
}

.reviewPanelcommonTile {
	float: left;
	background-color: #ff6a00;
}

/* --- REVIEW AREA STYLE END HERE --- */

