﻿/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

	remove all default browsers styles

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

HTML, BODY, DIV, SPAN, H1, H2, H3, P, A, FORM, LABEL, TABLE, TR, TD, TD {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}

/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

	start new default styles

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

BODY {
	margin: 0px;
	padding: 0px;
	background: #fff url('images/bg.png') repeat-x;
	text-align: center;
}
TD {
	font-size: 11px;
}
TR {
	vertical-align: top;
}

BODY, HTML, FORM {
	height: 100%;
}
/* this forces a right scroll bar on all pages. why? on pages with show/hide content (help, etc..) as the page expands, when the scroll bar is displayed, the page shifts to the right. this will keep that from happening */

HTML {
	overflow: scroll;
}

TABLE, TR, TD, DIV {
	vertical-align: top;
	text-align: left;
}

A {
	color: #600; /* blue */
}
A:hover {
	color: #c00; /* redish */
	text-decoration: none;
}
/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

	headers

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

h1 {
	font: bold 22px "Arial Black", Arial, Helvetica, sans-serif;
	color: #333; /* Default */
}
h2 {
	font: bold 14px Arial, Helvetica, sans-serif;
	color: #39c; /* Default */
}



.text-small {
	font-size: 1em;
}
.note-copy {
	font-size: 1em;
	color: #999;
}
.text-large {
	font-size: 1.3em;
}
P {
	font: normal 1.1em/1.4em verdana;
	color: #454545;
	margin: 6px 0 12px 0;
}
DIV {
	vertical-align: top;
	text-align: left;
}

/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

	global

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

.float-left {
	float: left;
}
.float-right {
	float: right;
}
.container {
	clear: both;
	display: table;
	width: 100%;
}
.hide {
	display: none;
}

/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

	layout

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

#outside {
	margin: 0 auto;
	width: 970px;
	min-height: 100%; /* this causes the height to always be a minimum of 100% */
	/*position: relative;  this allows us to absoultely position the footer to align to the bottom of the page */
	/*	height: 100%; DO NOT SET THIS TO 100% */
	/* background: url('img/header-bg.png') repeat-x top; */
	/*	border: 1px solid red; */
}

/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

	header

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

#header {
	width: 970px;
	height: 150px;
}





#mpi-logo {
	float: left;
	vertical-align: top;
	background: transparent url('img/mpi-logo.gif') no-repeat top left;
	margin: 0px;
	width: 300px;
	height: 150px;
}









#welcome {
	width: 650px; /* make this the same width as the #master-layout (970) - padding (60) */
	height: 78px; /* actual height (30) - padding (6) = 24px */
	text-align: right;
	float: left;
}
.welcome {
	float: right;
	font: normal 11px verdana, Arial, Helvetica, sans-serif;
	margin: 4px 12px 0 0;
}
.welcome A {
	color: #fff;
}
.welcome A:hover {
	color: #fff;
}

/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

	SEARCH
	
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

.search {
	height: 20px;
	margin: 8px 0 0 0;
/*	background: url('img/search.bg.jpg') no-repeat center top; */
	float: right;
}
.ms-searchform {
	float: right;	
}
.ms-searchbox {
	height: 20px;
	border: 1px solid #fff;
	background-color: #fff;
	color: #666;
}
SELECT.ms-searchbox {
	display: none;
}
.ms-searchimage {
	border: 1px solid transparent;
	background-color: #fff;
}
















#primary-navigation {
	width: 650px; /* make this the same width as the #master-layout (970) - padding (60) */
	height: 60px; /* actual height (30) - padding (6) = 24px */
	float: left;
}

.ms-topNavContainer {
	margin: 0px;
}
.top-nav {
	height: 60px;
	padding: 0px 10px;
	border-top: none;
	border-right: 1px solid #333;
	border-bottom: none;
	border-left: 1px solid #fff;
	background-image: none;
	background-color: transparent;
    display: table-cell;
    vertical-align: middle;
    width: 100px;
    max-width: 100px;
}
.top-nav-selected {
	height: 60px;
	padding: 0px 10px;
	border-top: none;
	border-right: 1px solid #333;
	border-bottom: none;
	border-left: 1px solid #fff;
	background-image: none;
	background-color: transparent;
    display: table-cell;
    vertical-align: middle;
    width: 100px;
    max-width: 100px;
}
.top-nav-hover {
	height: 60px;
	padding: 0px 10px;
	border-top: none;
	border-right: 1px solid #333;
	border-bottom: none;
	border-left: 1px solid #fff;
	background-image: none;
	background-color: transparent;
    display: table-cell;
    vertical-align: middle;
    width: 100px;
    max-width: 100px;
}

.top-nav A {
	font: bold 11px verdana, Arial, Helvetica, sans-serif;
	color: black;
}

.top-nav-selected A {
	font: bold 11px verdana, Arial, Helvetica, sans-serif;
	color: red;
}

.top-nav-hover A {
	font: bold 11px verdana, Arial, Helvetica, sans-serif;
	color: black;
}
















.slideshow {
	width: 650px; /* make this the same width as the #master-layout (970) - padding (60) */
	height: 200px; /* actual height (30) - padding (6) = 24px */
	float: left;
	border: 2px solid red;
}



#breadcrumb {
	width: 650px; /* make this the same width as the #master-layout (970) - padding (60) */
	height: 40px; /* actual height (30) - padding (6) = 24px */
	float: left;
	font: normal 11px verdana, Arial, Helvetica, sans-serif;
}
.breadcrumb {
	float: left;
	margin: 12px 0 0 8px;
	color: #000;
}
.breadcrumb A {
	color: #000;
}
.breadcrumb A:hover {
	color: #000;
}





.ms-siteaction {
	float: right;
}

/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

	main content area

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

#main {
	width: 970px;
/*	padding-bottom: 65px;    height of the footer */
/*	border: 1px solid green; */
}

/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

	footer

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

#footer {
	background: #eee url('img/footer-bg.png') repeat-x bottom;
	border-top: 1px solid #ccc;
/*	position: absolute;
	bottom: 0; */
	height: 85px;   /* height of the footer must also be the padding-bottom on the #main */
	width: 100%;
	clear: both;
}
#footer-outside, #footer-inside {

}
#footer-left {
	background: url('img/footer.png') no-repeat left bottom;
	width: 250px;
	height: 85px;
	margin: 0 0 0 10px;
	float: left;
}
#footer-right {
}


/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

	main content area

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

#secondary-column {
	width: 300px;
	height: 100%;
	float: left;
	padding: 20px 0 0 0;
}

#secondary-column h1 {
	font: bold 12px verdana, Arial, Helvetica, sans-serif;
	color: #333;
	margin: 0 20px 22px 20px;
}
#secondary-column p {
	font: normal 12px verdana, Arial, Helvetica, sans-serif;
	color: #666;
	margin: 0 20px 12px 20px;
}
#video-thumb {
	width: 300px;
	height: 166px;
	text-align: center;
	margin: 0 0 22px 0;
}





















#primary-column {
	width: 660px;
	height: 100%;
	float: right;
}
#calendar-column {
	width: 970px;
	height: 100%;
	margin: 0 auto;
	float: left;
}



/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

	footer

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

.footer {
	position: absolute;
	height: 65px;
	bottom: 0;
	width: 970px;
	border: 1px solid red;
	display: none;
}

.footer-cell {
	width: 25%;
}
.ms-globalbreadcrumb {
	display: none;
}














.navigation {
	background: url('../../images/navigation.png') repeat-x;
	width: 650px;
	height: 72px;
	float: left;
}                  
.home {
	background: url('../../images/home.png') no-repeat;
	float: left;
	width: 100px;
	height: 72px;
	border: 0;
}

.home-over {
	background: url('../../images/home-on.png') repeat-x;
	float: left;
	width: 100px;
	height: 72px;
	border: 0;
}

.course-schedule {
	background: url('../../images/course-schedule.png') repeat-x;
	float: left;
	width: 100px;
	height: 72px;
	border: 0;
}

.course-schedule-over {
	background: url('../../images/course-schedule-on.png') repeat-x;
	float: left;
	width: 100px;
	height: 72px;
	border: 0;
}

.course-directory {
	background: url('../../images/course-directory.png') repeat-x;
	float: left;
	width: 100px;
	height: 72px;
	border: 0;
}

.course-directory-over {
	background: url('../../images/course-directory-on.png') repeat-x;
	float: left;
	width: 100px;
	height: 72px;
	border: 0;
}

.store {
	background: url('../../images/store.png') repeat-x;
	float: left;
	width: 100px;
	height: 72px;
	border: 0;
}

.store-over {
	background: url('../../images/store-on.png') repeat-x;
	float: left;
	width: 100px;
	height: 72px;
	border: 0;
}

.about {
	background: url('../../images/about.png') repeat-x;
	float: left;
	width: 100px;
	height: 72px;
	border: 0;
}

.about-over {
	background: url('../../images/about-on.png') repeat-x;
	float: left;
	width: 100px;
	height: 72px;
	border: 0;
}

.contact {
	background: url('../../images/contact.png') repeat-x;
	float: left;
	width: 100px;
	height: 72px;
	border: 0;
}

.contact-over {
	background: url('../../images/contact-on.png') repeat-x;
	float: left;
	width: 100px;
	height: 72px;
	border: 0;
}











.sub-tabs {
	margin: 0 1px -1px 0;
	padding: 0 15px;
	list-style: none;
	background: #f7f7f7 url('images/sprite-comment-tabs.gif') repeat-x 0 13px;
	border-top: 1px solid #fff;
	display: block;
	height: 58px;
}
.sub-tabs li {
	float: left;
	background: url('images/sprite-comment-tabs.gif') no-repeat 100% -147px;
	height: 56px;
	font: bold 1.08em Helvetica, Arial, Helvetica, sans-serif;
	color: #c6c6c6;
}
.sub-tabs li a:link, .sub-tabs li a:visited {
	color: #bbb;
	text-decoration: none;
	display: block;
	padding: 22px 15px 21px;
}
.sub-tabs li a:hover {
	color: #3c3c3c;
}
.sub-tabs li a.active {
	color: #3c3c3c;
	background: url('images/sprite-comment-tabs.gif') no-repeat 50% -58px;
	position: relative;
	top: 1px;
	z-index: 999;
}





.ms-cal-navheader {
	font: bold 22px "Arial Black", Arial, Helvetica, sans-serif;
	color: gray;
}

.ms-cal-topday a {
	color: #333;
	text-decoration: none;
}

td.ms-cal-monthitem a,
td.ms-cal-monthitem a:link,
td.ms-cal-monthitem a:active,
td.ms-cal-monthitem a:visited,
td.ms-cal-monthitem a:hover,
td.ms-cal-muworkitem a,
td.ms-cal-muworkitem a:link,
td.ms-cal-muworkitem a:active,
td.ms-cal-muworkitem a:visited,
td.ms-cal-muworkitem a:hover {
	color: #900;
	text-decoration: none;
}

a.ms-cal-nav {
	display: none;
}

span.ms-cal-nav a,
span.ms-cal-nav a:link,
span.ms-cal-nav a:active,
span.ms-cal-nav a:visited {
	font: normal 11px verdana, Arial, Helvetica, sans-serif;
	color: #999;
	text-decoration: none;
}
span.ms-cal-nav a:hover {
	color: #333;
}

span.ms-cal-navselected a,
span.ms-cal-navselected a:link,
span.ms-cal-navselected a:active,
span.ms-cal-navselected a:visited,
span.ms-cal-navselected a:hover {
	font: normal 11px verdana, Arial, Helvetica, sans-serif;
	color: #333;
	text-decoration: none;
}


























.ms-formlabel,
.ms-formbody {
	font-size: 11px;
	font-weight: normal;
}

.ms-calheader {
	background-color: #fff;
}














