@charset "UTF-8";
/* CSS Document */

#bannerBase{
	clear: both;
	height: 285px;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(../images/bannerspotLight.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

.topic1{
	height: 285px;
	width: 868px;
	background-image: url(../images/banner/graspit-lms-screen.png);
	background-repeat: no-repeat;
	background-position: left top;
	position: relative;
	left: 0px;
	top: 0px;
}

.topic1a{
	width: 464px;
	position: relative;
	top: 100px;
	left: 390px;
	font-family: "Times New Roman", Times, serif;
	font-size: 15px;
	color: #FFF;
	font-weight: normal;
}

.topic1b{
	width: 420px;
	position: relative;
	top: 120px;
	left: 420px;
}

.topic1c{
	color: #FF6;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: normal;
	font-size: 18px;
}

.topic1d{
	color: #FF6;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: normal;
	font-size: 12px;
}

.topic1e{
	width: 150px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
}


.topic2{
	height: 285px;
	width: 868px;
	background-image: url(../images/banner/course-screen.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	position: relative;
	left: 0px;
	top: 0px;
}

.topic2a{
	width: 500px;
	position: relative;
	top: 10px;
	left: 20px;
	float: left;
}

.topic2b{
	color: #FF6;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: normal;
	font-size: 18px;
}

.topic2c{
	color: #FF6;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: normal;
	font-size: 12px;
}

.topic2d{
	width: 150px;
	position: relative;
	float: right;
	top: 20px;
}

.topic3{
	height: 285px;
	width: 868px;
	background-image: url(../images/banner/media-screen.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	position: relative;
	left: 0px;
	top: 0px;
}

.topic3a{
	width: 500px;
	position: relative;
	top: 7px;
	left: 20px;
	float: left;
}

.topic3b{
	color: #FF6;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: normal;
	font-size: 16px;
}

.topic3d{
	width: 150px;
	position: relative;
	float: right;
	top: 9px;
}

#bannerNav{
	z-index: 9;
	position: relative;
	top: -25px;
	left: 800px;
	width: 75px;
}

.awesome, .awesome:visited {
	background: #222 url(/images/alert-overlay.png) repeat-x;
	display: inline-block;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
}

.orange.awesome, .orange.awesome:visited {
	background-color: #ff5c00; 
	}
	
.awesome:hover {
	background-color: #111; color: #fff;
	}
.awesome:active {
	top: 1px;
	}
.small.awesome, .small.awesome:visited {
	font-size: 11px; padding: ;
	}
.orange.awesome:hover {
	background-color: #d45500;
	}
	
	
.stepcarousel{
	position: relative;
	overflow: scroll; /*leave this value alone*/
	width: 868px; /*Width of Carousel Viewer itself*/
	height: 285px;
	top: 0px;
	margin-right: auto;
	margin-left: auto;
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
	float: left; /*leave this value alone*/
	overflow: visible; /*clip content that go outside dimensions of holding panel DIV*/
	margin: 0px; /*margin around each panel*/
	width: 868px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
	height: 285px;
}