@charset "ISO-8859-1";
/* Clear margins and padding, a good start to any CSS */
* {margin:0;padding:0;}

/* START STAGING */
html {
background:#ecf5fb url(../images/background.jpg) repeat-x;
/* Height is 100%, so the body can be 100% */
height:100%;
}

body {
background:url(../images/containerbg.jpg) no-repeat;
background-position: 50% 0;
margin:0;
padding:0;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Tahoma, sans-serif;
	font-size: 14px;
/* Height is 100%, so the tiled BG will tile all the way down
the page, not just as far down as the page's content
(when the content's height < window's height) */
height:100%;
}
/*
Hackety-hack-hack...
FF2, with the above code, will only display the repeat-y image for as
high as the window's viewport is; higher content (upon
scrolling) will not have the bg.
This "hack" makes the tiled background work properly in FF2.
This type of "advanced selector" is not understood by IE6...dunno
'bout IE7.
*/
html>body {
min-height:100%;
height:auto;
}

/* END STAGING */

/* START FUNCTIONALS */

#container {
	width: 950px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 50px;
	margin-left: auto;
}

a { color: #08c; }
a:link, a:visited, a:active { text-decoration: none; }
a:hover { text-decoration: underline; }
a.more {
	white-space: nowrap;
	padding-right: 10px;
	zoom: 1;
	background-image: url(../images/morearrow_08c.gif);
	background-repeat: no-repeat;
	background-position: 100% 50%;
}

a.before {
	white-space: nowrap;
	padding-left: 25px;
	zoom: 1;
	background-image: url(../images/newcoursesbullet.gif);
	background-repeat: no-repeat;
	background-position: 0% 50%;
}

/* begin header stuff*/

div.header {
	height: 88px;
	z-index: 20;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

div.header {
	margin: 0;
	width: 950px;
}

a.button {
	display: block;
	text-align: left;
	text-indent: -9999px;
}

#logo {
	height: 60px;
	width: 954px;
	/*background-image: url(../images/logo.png);*/
	position: absolute;
	margin-top: 24px;
	margin-left: -4px;
}

div.header div.language {
	float: right;
	opacity: 1;
	/*background-image: url(../images/getstartednow.png);*/
	background-repeat: no-repeat;
	background-position: 0 0;
	margin-top: 5px;
	color: #FFFFFF;
	font-size: 12px;
}
select {
	font-size: 10px;
	background-color: #CCDFEF;
}


/* end header stuff*/

div.navigation_cell {
	margin-top: 40px;
	margin-bottom: 0px;
	margin-left: 93px;
	position: absolute;
}


/* END FUNCTIONALS */


#mtnlogo {
	position: absolute;
	z-index: 1000;
	background-image: url(../images/mtnlogo.png);
	background-repeat: no-repeat;
	background-position: left;
	height: 87px;
	width: 123px;
	left: -100px;
	top: -26px;
	/*top: 108px; */
}

#content_cell {
	padding-bottom: 20px;
	background-color: #ecf5fb;
	margin-top: 90px;
	padding-top: 40px;
	padding-left: 20px;
}

#content_cell h1{
	font-size: 18px;
	font-weight: normal;
	color: #0E3664;
}

#content_cell .subtext{
	font-size: 12px;
	font-weight: normal;
	color: #666666;
}

/* start leftside stuff*/

#leftside {
	float: left; /* since this element is floated, a width must be given */
	width: 404px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	} 

.courses_container {
	margin-top: 28px;
}
.courses_cell {
	width: 404px;
	border: 1px solid #79A5CD;
}
#course_list {
	padding-left: 15px;
	padding-top: 15px;
}

.newlist {
	font-size: 15px;
	padding-bottom: 25px;
	font-weight: normal;
}

.newcourses{
	content: url(../images/newcoursesbullet.gif);
	text-decoration: none;
}

.viewallcourses {
	margin-right: auto;
	margin-left: auto;
	width: 364px;
	margin-bottom: 45px;
	margin-top: 25px;
}

/* end leftside stuff*/

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

/* start rightside stuff*/

#rightside {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 416px;
	padding-top: 0;
	padding-right: 20px;
	padding-bottom: 0;
	padding-left: 0px;
}

.brandlogos {
	margin-right: auto;
	margin-left: auto;
	width: 406px;
	margin-bottom: 44px;
}
.new_container {
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #1B4C7E;
  width: 450px;
}
.new_cell {
	width: 457px;
	margin-left: 10px;
	border: 1px solid #79A5CD;
}
.headline_cell {
	background-image: url(../images/headlinebg.jpg);
	height: 26px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #8CB2D4;
	padding-left: 10px;
}
.headline_cell  h1 {
	font-size: 18px;
	font-weight: normal;
	color: 0c2f57;
	padding-top: 2px;
}

/* end rightside stuff*/
#options {
	padding-top: 0px;
}


#options .logo {
	margin-right: 10px;
	background-image: url(../images/small_mtn.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
	height: 52px;
}
#options .logo .headline {
	padding-top: 32px;
	padding-left: 77px;
	font-size: 18px;
	font-weight: normal;
	color: #0E3664;
}
#options .images {
	margin-right: auto;
	margin-left: auto;
	padding-top: 35px;
	width: 763px;
}

#footer {
	background-color: #ECF5FB;
	margin-top: 180px;
	padding-top: 0;
	padding-right: 28px;
	padding-bottom: 0;
	padding-left: 20px;
	margin-right: 0px;
	text-align: right;
	font-size: 10px;
	color: #90B6D7;
} 

#footer a { color: #90B6D7; }
#footer a:link, a:visited, a:active { text-decoration: none; }
#footer a:hover { text-decoration: underline; }
#footer p {
	padding-top: 10px;
	padding-right: 10;
	padding-bottom: 10px;
	margin: 0;
}