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

/*-------------------------------------
| Global Sass Stuff
-------------------------------------*/
/*
=======================
* FONTS
=======================
*/
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700italic,900&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Quattrocento&subset=latin,latin-ext);
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,900;1,900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

/* Latest font awesome included with Design Tools */
/*@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);*/
/*-------------------------------------
| Mitch Shared
-------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700italic,900&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Quattrocento&subset=latin,latin-ext);
/*********************************************************************/
/***** BEGIN DESIGNPLUS THEME IMPORT & CUSTOMIZATION  ****************/
/*********************************************************************/
/* Import statements need to be at the top of your CSS file */

/*** Legacy Sidebar ***/
/* For Main CSS file */
@import url(https://designtools.ciditools.com/css/themes.css);
/* For Mobile app CSS file */
/*@import url(https://designtools.ciditools.com/css/app.css);*/
/* Institution color customizations */
@import url(https://designtools.ciditools.com/css/inst_theme_overrides.css);

/*** New Sidebar ***/
/* For Main CSS files */
@import url(https://designplus.ciditools.com/css/content.css);
@import url(https://designplus.ciditools.com/css/editor.css);
/* For Mobile app CSS file */
/*@import url(https://designplus.ciditools.com/css/mobile.css);*/

:root {
    --dt-color-primary: #553377;
    --dt-color-primary-contrast: #FFFFFF;
    --dt-color-primary-dark-text: #553377;
    --dt-color-secondary: #391a55;
    --dt-color-secondary-contrast: #EEAA11;
    --dt-color-secondary-dark-text: #391a55;
    --dt-color-accent: #6BC4E8;
    --dt-color-accent-contrast: #000000;
    --dt-color-accent-dark-text: #694A87;
    --dt-color-gray: #E6E1EB;
    --dt-color-gray-contrast: #553377;
    --dt-color-gray-dark-text: #585754;
    --dt-color-white: #FFFFFF;
    --dt-color-white-contrast: #391a55;
    --dt-color-white-dark-text: #000000;
    --dt-color-graybg: #595959;
    --dt-color-graybg-contrast: #FFFFFF;
}

/*********************************************************************/
/***** END DESIGNPLUS THEME IMPORT & CUSTOMIZATION   *****************/
/*********************************************************************/

/*-------------------------------------
| Global Sass Stuff
-------------------------------------*/

/*-------------------------------------
| Mitch Shared
-------------------------------------*/
h1.sample-section-h1 {
  font-family: Impact;
  margin-top: 20px;
  border-top: 1px solid #999;
  padding-top: 20px;
  font-size: 50px;
  text-transform: uppercase;
}

/*-------------------------------------
| Legacy Layouts
-------------------------------------*/
/*
=======================
* GRID
=======================
*/
#msmu_wrapper .grid {
  margin: 0 0 10px;
  display: table;
  table-layout: fixed;
  width: 100%;
}

#msmu_wrapper .grid:last-child {
  margin-bottom: 0;
}

#msmu_wrapper .grid-pad {
  border-spacing: 20px;
}

#msmu_wrapper .grid-pad > [class*=col-] {
  padding-bottom: 20px !important;
}

#msmu_wrapper [class*="col-"] {
  display: table-cell;
  vertical-align: top;
}

#msmu_wrapper .col-1 {
  width: 100%;
}

#msmu_wrapper .col-1-2 {
  width: 50%;
}

#msmu_wrapper .col-1-3 {
  width: 33.33333%;
}

#msmu_wrapper .col-2-3 {
  width: 66.66666%;
}

#msmu_wrapper .col-1-4 {
  width: 25%;
}

#msmu_wrapper .col-3-4 {
  width: 75%;
}

#msmu_wrapper .col-1-5 {
  width: 20%;
}

#msmu_wrapper .col-2-5 {
  width: 40%;
}

#msmu_wrapper .col-3-5 {
  width: 60%;
}

#msmu_wrapper .col-4-5 {
  width: 80%;
}

#msmu_wrapper .col-1-6 {
  width: 16.666%;
}

#msmu_wrapper .col-5-6 {
  width: 83.33%;
}

#msmu_wrapper .col-1-8 {
  width: 12.5%;
}

#msmu_wrapper .col-3-8 {
  width: 37.5%;
}

#msmu_wrapper .col-5-8 {
  width: 62.5%;
}

#msmu_wrapper .col-7-8 {
  width: 87.5%;
}

#msmu_wrapper .col-1-12 {
  width: 8.3333%;
}

#msmu_wrapper .col-5-12 {
  width: 41.6666%;
}

#msmu_wrapper .col-7-12 {
  width: 58.3333%;
}

#msmu_wrapper .col-11-12 {
  width: 91.6666%;
}

#msmu_wrapper .col-1-24 {
  width: 4.1666%;
}

#msmu_wrapper .col-5-24 {
  width: 20.8333%;
}

#msmu_wrapper .col-7-24 {
  width: 29.1666%;
}

#msmu_wrapper .col-11-24 {
  width: 45.8333%;
}

#msmu_wrapper .col-13-24 {
  width: 54.1666%;
}

#msmu_wrapper .col-17-24 {
  width: 70.8333%;
}

#msmu_wrapper .col-19-24 {
  width: 79.1666%;
}

#msmu_wrapper .col-23-24 {
  width: 95.8333%;
}

/* Add extra space between sections*/
#msmu_wrapper div.discussion_schedule ~ div.guidelines {
  margin-top: 40px;
}

#msmu_wrapper .col-2-3 .guidelines {
  margin-top: 0;
}

.left_border {
  border-left: 2px solid #D1D3D4;
  padding-left: 20px;
}

.right_border {
  border-right: 2px solid #D1D3D4;
  padding-right: 20px;
}

#msmu_wrapper .right {
  float: right;
}

/*
=======================
HIGHLIGHT
=======================
*/
#msmu_wrapper .highlight {
  background-color: #FFF8EB;
  padding: 10px 20px;
  border: 1px #AAAAAA solid;
}

#msmu_wrapper .highlight_2 {
  background-color: #ebebeb;
  padding: 10px 20px;
  border: 1px #AAAAAA solid;
}

/*
=======================
* BASE
=======================
*/
#msmu_wrapper {
  background: no-repeat fixed center top;
  margin: 0;
  padding: 0;
  font-family: Avenir, AvenirNextLTPro-Regular, sans-serif !important;
  font-size: 16px;
  line-height: 1.6rem;
  color: #4C4C4C;
  max-width: 960px;
}

#msmu_wrapper p {
  margin: 0 0 1.0rem;
  line-height: 1.7rem;
}

/*#msmu_wrapper p:last-of-type{
    margin-bottom: 4.0rem;
}*/
#msmu_wrapper p:only-of-type {
  margin-bottom: 1.0rem !important;
}

#msmu_wrapper a {
  /*white-space: nowrap;*/
  word-wrap: break-word;
}

#msmu_wrapper h1,
#msmu_wrapper h2,
#msmu_wrapper h3,
#msmu_wrapper h4,
#msmu_wrapper h5,
#msmu_wrapper h6 {
  font-family: "Montserrat", sans-serif !important;
  color: #553377;
  margin: 0 0 1rem 0;
}

#msmu_wrapper h1 {
  font-size: 2.4rem;
  line-height: 1.25;
  letter-spacing: -0.05rem;
}

#msmu_wrapper h2 {
  font-size: 2.0rem;
  line-height: 1.3;
  letter-spacing: -0.04rem;
}

#msmu_wrapper h3 {
  font-size: 1.8rem;
  line-height: 1.3;
  letter-spacing: -0.03rem;
}

#msmu_wrapper h4 {
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: -.02rem;
}

#msmu_wrapper h5 {
  font-size: 1.2rem;
  line-height: 1.4;
  letter-spacing: 0;
}

#msmu_wrapper h6 {
  font-size: 1.0rem;
  line-height: 1.6;
  letter-spacing: 0;
}

#msmu_wrapper [class*="co"] * + h3 {
  margin-top: 2.4rem;
}

/* Add top margin to all headers, except the first one*/
#msmu_wrapper [class*="col-"] * + h1,
#msmu_wrapper [class*="col-"] * + h2,
#msmu_wrapper [class*="col-"] * + h3,
#msmu_wrapper [class*="col-"] * + h4,
#msmu_wrapper [class*="col-"] * + h5,
#msmu_wrapper [class*="col-"] * + h6,
#msmu_wrapper [class*="co"] * + h1,
#msmu_wrapper [class*="co"] * + h2,
#msmu_wrapper [class*="co"] * + h3,
#msmu_wrapper [class*="co"] * + h4,
#msmu_wrapper [class*="co"] * + h5,
#msmu_wrapper [class*="co"] * + h6 {
  margin-top: 2.6rem;
}

/* Remove top margin for the first item inside these sections*/
/*#msmu_wrapper.activity .highlight h3:first-of-type{
  margin-top: 0;
}*/
/* ---------------------
  ORDERED LISTS
  ---------------------*/
/* ---------------------
  FONT COLORS
  ---------------------*/
.dark_grey {
  color: #4C4C4C;
}

/*
=======================
SYLLABUS: TABLE
=======================
*/
#msmu_wrapper.syllabus table {
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: none;
  margin: 20px 0 40px;
}

#msmu_wrapper.syllabus thead th,
#msmu_wrapper.syllabus thead tr {
  border-top: none !important;
  font-weight: bold;
  border-bottom: 2px solid #553377;
  vertical-align: text-bottom;
  text-align: left;
}

#msmu_wrapper.syllabus th {
  text-align: left;
  margin: 20px 0;
  padding: 4px 6px;
  vertical-align: text-top;
}

#msmu_wrapper.syllabus table tr {
  border-top: 1px #ACACAC solid;
  overflow: hidden;
}

#msmu_wrapper.syllabus table tr td {
  border: none;
  margin: 20px 0;
  padding: 4px 6px;
  vertical-align: text-top;
}

#msmu_wrapper.syllabus table tr td:first-of-type {
  padding: 4px;
  width: auto;
}

#msmu_wrapper.syllabus table tr:first-of-type {
  border-top: none;
}

#msmu_wrapper.syllabus table tr:last-of-type {
  border-bottom: none;
}

/* SYLLABUS DATES - overwriting common css */
#syllabus thead th {
  text-align: left;
  background-color: transparent;
  color: #4C4C4C;
  padding: 3px 10px;
  border-bottom: 2px solid #553377;
  border-top: none;
  font-weight: bold;
  font-size: 14px;
}

/*
=======================
SYLLABUS: Textbooks
=======================
*/
/*
=======================
SECTION: OVERVIEW
=======================
*/
/*
=======================
* Cover Image/Graphic
=======================
 */
/*
Set Back-up Background Color
*/
#msmu_wrapper.syllabus .top_container,
#msmu_wrapper.syllabus .top_container .cover {
  background-color: #0a0a15;
}

#msmu_wrapper.overview .top_container,
#msmu_wrapper.overview .top_container .cover,
#msmu_wrapper.simple_1 .top_container,
#msmu_wrapper.simple_1 .top_container .cover,
#msmu_wrapper.simple_2 .top_container,
#msmu_wrapper.simple_2 .top_container .cover {
  background-color: #241b3a;
}

#msmu_wrapper.discussion .top_container,
#msmu_wrapper.discussion .top_container .cover {
  background-color: #2f030b;
}

#msmu_wrapper.activity .top_container,
#msmu_wrapper.activity .top_container .cover {
  background-color: #012229;
}

#msmu_wrapper.content .top_container,
#msmu_wrapper.content .top_container .cover {
  background-color: #1f1b05;
}

/*
Draw Circles
*/
#msmu_wrapper.syllabus .top_container .cover,
#msmu_wrapper.overview .top_container .cover,
#msmu_wrapper.discussion .top_container .cover,
#msmu_wrapper.activity .top_container .cover,
#msmu_wrapper.content .top_container .cover,
#msmu_wrapper.simple_1 .top_container .cover,
#msmu_wrapper.simple_2 .top_container .cover {
  height: 200px;
  background-image: -webkit-gradient(radial, 50% 50%, 36, 50% 50%, 40, from(rgba(150, 111, 195, 0.2)), color-stop(0.3, rgba(150, 111, 195, 0.3)), to(transparent)), -webkit-gradient(radial, 50% 50%, 16, 50% 50%, 20, from(rgba(224, 124, 203, 0.1)), color-stop(0.2, rgba(224, 124, 203, 0.2)), to(transparent)), -webkit-gradient(radial, 50% 50%, 16, 50% 50%, 20, from(rgba(224, 124, 203, 0.1)), color-stop(0.2, rgba(224, 124, 203, 0.2)), to(transparent)), -webkit-gradient(radial, 50% 50%, 38, 50% 50%, 46, from(rgba(145, 75, 113, 0.3)), color-stop(0.3, rgba(145, 75, 113, 0.4)), to(transparent)), -webkit-gradient(radial, 50% 50%, 20, 50% 50%, 80, from(rgba(145, 75, 113, 0)), color-stop(0.3, rgba(145, 75, 113, 0.2)), to(transparent)), -webkit-gradient(radial, 50% 50%, 30, 50% 50%, 90, from(rgba(145, 75, 113, 0)), color-stop(0.5, rgba(145, 75, 113, 0.2)), to(transparent)), -webkit-gradient(radial, 50% 50%, 30, 50% 50%, 50, from(rgba(37, 85, 79, 0.2)), color-stop(0.2, rgba(37, 85, 79, 0.3)), to(transparent)), -webkit-gradient(radial, 50% 50%, 16, 50% 50%, 20, from(rgba(37, 85, 79, 0.2)), color-stop(0.2, rgba(37, 85, 79, 0.3)), to(transparent)), -webkit-gradient(radial, 50% 50%, 26, 50% 50%, 30, from(rgba(37, 85, 79, 0.2)), color-stop(0.2, rgba(37, 85, 79, 0.3)), to(transparent)), -webkit-gradient(radial, 50% 50%, 36, 50% 50%, 40, from(rgba(37, 85, 79, 0.3)), color-stop(0.2, rgba(37, 85, 79, 0.4)), to(transparent)), -webkit-gradient(radial, 50% 50%, 30, 50% 50%, 50, from(rgba(114, 209, 244, 0.1)), color-stop(0.2, rgba(114, 209, 244, 0.1)), to(transparent)), -webkit-gradient(radial, 50% 50%, 16, 50% 50%, 20, from(rgba(114, 209, 244, 0.1)), color-stop(0.2, rgba(114, 209, 244, 0.2)), to(transparent)), -webkit-gradient(radial, 50% 50%, 26, 50% 50%, 30, from(rgba(114, 209, 244, 0.1)), color-stop(0.2, rgba(114, 209, 244, 0.2)), to(transparent)), -webkit-gradient(radial, 50% 50%, 36, 50% 50%, 40, from(rgba(114, 209, 244, 0.2)), color-stop(0.2, rgba(114, 209, 244, 0.3)), to(transparent));
  background-image: -webkit-radial-gradient(circle contain, rgba(150, 111, 195, 0.2) 36px, rgba(150, 111, 195, 0.3) 38px, transparent 40px), -webkit-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), -webkit-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), -webkit-radial-gradient(circle contain, rgba(145, 75, 113, 0.2) 38px, rgba(145, 75, 113, 0.3) 41px, transparent 46px), -webkit-radial-gradient(circle contain, rgba(145, 75, 113, 0) 20px, rgba(145, 75, 113, 0.2) 38px, transparent 80px), -webkit-radial-gradient(circle contain, rgba(145, 75, 113, 0) 30px, rgba(145, 75, 113, 0.2) 60px, transparent 90px), -webkit-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 30px, rgba(37, 85, 79, 0.3) 34px, transparent 50px), -webkit-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 16px, rgba(37, 85, 79, 0.3) 17px, transparent 20px), -webkit-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 26px, rgba(37, 85, 79, 0.3) 27px, transparent 30px), -webkit-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 36px, rgba(37, 85, 79, 0.3) 37px, transparent 40px), -webkit-radial-gradient(circle contain, rgba(114, 209, 244, 0.1) 30px, rgba(114, 209, 244, 0.1) 34px, transparent 50px), -webkit-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 16px, rgba(114, 209, 244, 0.3) 17px, transparent 20px), -webkit-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 26px, rgba(114, 209, 244, 0.3) 27px, transparent 30px), -webkit-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 36px, rgba(114, 209, 244, 0.3) 37px, transparent 40px);
  background-image: -moz-radial-gradient(circle contain, rgba(150, 111, 195, 0.2) 36px, rgba(150, 111, 195, 0.3) 38px, transparent 40px), -moz-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), -moz-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), -moz-radial-gradient(circle contain, rgba(145, 75, 113, 0.2) 38px, rgba(145, 75, 113, 0.3) 41px, transparent 46px), -moz-radial-gradient(circle contain, rgba(145, 75, 113, 0) 20px, rgba(145, 75, 113, 0.2) 38px, transparent 80px), -moz-radial-gradient(circle contain, rgba(145, 75, 113, 0) 30px, rgba(145, 75, 113, 0.2) 60px, transparent 90px), -moz-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 30px, rgba(37, 85, 79, 0.3) 34px, transparent 50px), -moz-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 16px, rgba(37, 85, 79, 0.3) 17px, transparent 20px), -moz-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 26px, rgba(37, 85, 79, 0.3) 27px, transparent 30px), -moz-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 36px, rgba(37, 85, 79, 0.3) 37px, transparent 40px), -moz-radial-gradient(circle contain, rgba(114, 209, 244, 0.1) 30px, rgba(114, 209, 244, 0.1) 34px, transparent 50px), -moz-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 16px, rgba(114, 209, 244, 0.3) 17px, transparent 20px), -moz-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 26px, rgba(114, 209, 244, 0.3) 27px, transparent 30px), -moz-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 36px, rgba(114, 209, 244, 0.3) 37px, transparent 40px);
  background-image: -o-radial-gradient(circle contain, rgba(150, 111, 195, 0.2) 36px, rgba(150, 111, 195, 0.3) 38px, transparent 40px), -o-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), -o-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), -o-radial-gradient(circle contain, rgba(145, 75, 113, 0.2) 38px, rgba(145, 75, 113, 0.3) 41px, transparent 46px), -o-radial-gradient(circle contain, rgba(145, 75, 113, 0) 20px, rgba(145, 75, 113, 0.2) 38px, transparent 80px), -o-radial-gradient(circle contain, rgba(145, 75, 113, 0) 30px, rgba(145, 75, 113, 0.2) 60px, transparent 90px), -o-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 30px, rgba(37, 85, 79, 0.3) 34px, transparent 50px), -o-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 16px, rgba(37, 85, 79, 0.3) 17px, transparent 20px), -o-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 26px, rgba(37, 85, 79, 0.3) 27px, transparent 30px), -o-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 36px, rgba(37, 85, 79, 0.3) 37px, transparent 40px), -o-radial-gradient(circle contain, rgba(114, 209, 244, 0.1) 30px, rgba(114, 209, 244, 0.1) 34px, transparent 50px), -o-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 16px, rgba(114, 209, 244, 0.3) 17px, transparent 20px), -o-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 26px, rgba(114, 209, 244, 0.3) 27px, transparent 30px), -o-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 36px, rgba(114, 209, 244, 0.3) 37px, transparent 40px);
  background-image: radial-gradient(circle contain, rgba(150, 111, 195, 0.2) 36px, rgba(150, 111, 195, 0.3) 38px, transparent 40px), radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), radial-gradient(circle contain, rgba(145, 75, 113, 0.2) 38px, rgba(145, 75, 113, 0.3) 41px, transparent 46px), radial-gradient(circle contain, rgba(145, 75, 113, 0) 20px, rgba(145, 75, 113, 0.2) 38px, transparent 80px), radial-gradient(circle contain, rgba(145, 75, 113, 0) 30px, rgba(145, 75, 113, 0.2) 60px, transparent 90px), radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 30px, rgba(37, 85, 79, 0.3) 34px, transparent 50px), radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 16px, rgba(37, 85, 79, 0.3) 17px, transparent 20px), radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 26px, rgba(37, 85, 79, 0.3) 27px, transparent 30px), radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 36px, rgba(37, 85, 79, 0.3) 37px, transparent 40px), radial-gradient(circle contain, rgba(114, 209, 244, 0.1) 30px, rgba(114, 209, 244, 0.1) 34px, transparent 50px), radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 16px, rgba(114, 209, 244, 0.3) 17px, transparent 20px), radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 26px, rgba(114, 209, 244, 0.3) 27px, transparent 30px), radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 36px, rgba(114, 209, 244, 0.3) 37px, transparent 40px);
  -moz-background-size: 300px 300px;
  background-size: 300px 300px;
  background-position: 30px -5px, 80px -70px, 10px -40px, 50px -50px, 20px -80px, 60px -10px, -50px -60px, -60px -20px, -80px -80px, -160px -30px, 20px -30px, 130px -60px, 180px -40px, 180px 0;
}

.no-cssgradients #msmu_wrapper .top_container .cover {
  background: #131123 url(data:image/svg+xml;base64,H4sICBWwZk0AA2Jva2VoLnN2ZwC9lmtuozAUhf9nFZZHlRIpAV%2BDgVY4lUYjdQGzAkocQEOhMiRkdj82xIzCI30o7R9jlPicz%2FceW4SPp5ccHYWssrLgGCyCH7eLsDomqMl2dcoxIwSjVGRJWnPs6Be1oqg4Tuv69cG2m6axGscqZWJTQoitluLtYoHCndhX2wVC4T7LayFRtuP4OT9I%2BC%2BnFtxhY9S9%2FOV4w%2FTkdJ5oCaUhnqJDVWVR8VNJoKre%2FRLHLKo7aowy9fhdHmQsnmT0mmYxtltvuzOf4mA352Cf4vBvzuG%2Fg0M1yO46pGYJqmVUVPtSvnDcTvOoFksKZI3AIyuM1LKc46IsRNtcFMaZjHOBpMpEgFF80tlQzxYXKx5Z%2FhEcy%2BQ5WgLTMgBquGdrRCxnZf6xMXttHRQYxweZL3%2B0Oeltp1Wo%2Bt0ewoDfwQQGxicDGkpdJaEHShytw0Y0FnsbZyQDHc4ljdfRgKFxv53mEsiFDoj1vRoCgauK6zNdaufzvZoQGdbGxIYalODjKLquIxZ%2FhYdeHum8POMFb3nRCTNn1mywM7dz2%2FRV9oZ2jr9GgXa8N0m%2B9JqyGtT4UgLYVPzOh2HT75teB4EvAqEGJJht9veAOAYE%2BpI410nGOfgwCZ0%2BiyYmdJYEoD3QSoS67nRZpu4GNj4AJgngzEbyHWZwvorya0vmeg%2FB7CV4C2tyrd2995ds%2Buwc2oke1PfP9h%2F9egCnVgkAAA%3D%3D), url(data:image/svg+xml;base64,H4sICBWwZk0AA2Jva2VoLnN2ZwC9lmtuozAUhf9nFZZHlRIpAV%2BDgVY4lUYjdQGzAkocQEOhMiRkdj82xIzCI30o7R9jlPicz%2FceW4SPp5ccHYWssrLgGCyCH7eLsDomqMl2dcoxIwSjVGRJWnPs6Be1oqg4Tuv69cG2m6axGscqZWJTQoitluLtYoHCndhX2wVC4T7LayFRtuP4OT9I%2BC%2BnFtxhY9S9%2FOV4w%2FTkdJ5oCaUhnqJDVWVR8VNJoKre%2FRLHLKo7aowy9fhdHmQsnmT0mmYxtltvuzOf4mA352Cf4vBvzuG%2Fg0M1yO46pGYJqmVUVPtSvnDcTvOoFksKZI3AIyuM1LKc46IsRNtcFMaZjHOBpMpEgFF80tlQzxYXKx5Z%2FhEcy%2BQ5WgLTMgBquGdrRCxnZf6xMXttHRQYxweZL3%2B0Oeltp1Wo%2Bt0ewoDfwQQGxicDGkpdJaEHShytw0Y0FnsbZyQDHc4ljdfRgKFxv53mEsiFDoj1vRoCgauK6zNdaufzvZoQGdbGxIYalODjKLquIxZ%2FhYdeHum8POMFb3nRCTNn1mywM7dz2%2FRV9oZ2jr9GgXa8N0m%2B9JqyGtT4UgLYVPzOh2HT75teB4EvAqEGJJht9veAOAYE%2BpI410nGOfgwCZ0%2BiyYmdJYEoD3QSoS67nRZpu4GNj4AJgngzEbyHWZwvorya0vmeg%2FB7CV4C2tyrd2995ds%2Buwc2oke1PfP9h%2F9egCnVgkAAA%3D%3D) repeat 180px 0, -155px 0;
  background-size: auto;
  text-align: center;
}

/*
=======================
PAGE TITLE
=======================
*/
#msmu_wrapper .top_container .cover h2 {
  color: #ffffff;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 12px;
  background-color: rgba(85, 51, 119, 0.6);
  padding: 10px 14px 5px;
  display: inline-block;
  float: right;
  margin: 70px 20px 0;
  text-align: center;
}

#msmu_wrapper .top_container .cover .col-xs h2 {
  display: inline-block;
  margin: 0 auto;
  float: none;
}

#msmu_wrapper .cover h2 span {
  display: block;
  clear: both;
  font-weight: bold;
  font-size: 54px;
  line-height: 50px;
  color: #D1D3D4;
}

#msmu_wrapper .cover h2 span:before,
#msmu_wrapper .cover h2 span:after {
  font-family: 'Quattrocento', serif;
  font-weight: normal;
  color: #D1D3D4;
  font-size: 60px;
}

#msmu_wrapper .cover h2 span:before {
  content: "{";
  padding-right: 8px;
}

#msmu_wrapper .cover h2 span:after {
  content: "}";
  padding-left: 8px;
}

/*
=======================
CONTENT
=======================
*/
/*
=======================
OVERVIEW
=======================
*/
#msmu_wrapper .introduction,
#msmu_wrapper .topics {
  padding-bottom: 3rem;
}

/*
=======================
LISTS: CIRCLE STYLE: RIGHT ANGLE BRACKET, CHECKMARK
=======================
*/
/* REGULAR UNORDERED LIST:  CIRCLE RIGHT ANGLE BRACKET
-----------------*/
#msmu_wrapper .syllabus ul > li,
#msmu_wrapper .topics ul > li,
#msmu_wrapper .instructions ul > li,
#msmu_wrapper .content ul > li,
#msmu_wrapper ul > li {
  list-style-type: none;
  margin: 14px 0;
  padding: 0 0 0 20px;
  /* make room for the circle*/
  position: relative;
  /*because we want to position the circle in an absolute fashion*/
}

#msmu_wrapper .syllabus ul > li:before,
#msmu_wrapper .topics ul > li:before,
#msmu_wrapper .instructions ul > li:before,
#msmu_wrapper .content ul > li:before,
#msmu_wrapper ul > li:before,
#msmu_wrapper div:not([class*="overview_schedule"]) ul > li:before {
  content: " ";
  /*the circle itself is empty*/
  display: block;
  border: solid 8px #553377;
  /*create a colored area...*/
  border-radius: 8px;
  /*... and turn it into a circle*/
  height: 0;
  width: 0;
  position: absolute;
  /*the circle is then put into place*/
  left: -10px;
  margin-top: 2px;
}

#msmu_wrapper .syllabus ul > li:before,
#msmu_wrapper .topics ul > li:before,
#msmu_wrapper .instructions ul > li:before,
#msmu_wrapper.content .instructions ul > li:before,
#msmu_wrapper div:not([class*="overview_schedule"]) ul > li:before {
  border-color: #553377;
  /*create a colored area...*/
}

#msmu_wrapper .syllabus ul > li:after,
#msmu_wrapper .syllabus ul ul li:after,
#msmu_wrapper .topics ul > li:after,
#msmu_wrapper .topics ul ul li:after,
#msmu_wrapper .instructions ul > li:after,
#msmu_wrapper .instructions ul ul li:after,
#msmu_wrapper .instructions ol ul > li:after,
#msmu_wrapper .instructions ol ul li:after,
#msmu_wrapper .content ul > li:after,
#msmu_wrapper .content ul ul li:after,
#msmu_wrapper div:not([class*="overview_schedule"]) ul > li:after,
#msmu_wrapper div:not([class*="overview_schedule"]) ul ul li:after {
  content: " ";
  display: block;
  width: 4px;
  height: 4px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  /*creates the shape of a right angle bracket*/
  position: absolute;
  left: -6px;
  /*position the right angle bracket*/
  top: 7px;
  -webkit-transform: rotate(-45deg);
  /*tilts the shape*/
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* CHECKMARK LISTS
---------------------*/
/* Change the circle color for the checkmark
   ------------------------------------ */
/* DARK CIRCLE BACKGROUND */
#msmu_wrapper ul.checkmark li:before,
#msmu_wrapper.syllabus ul.checkmark li:before,
#msmu_wrapper .parameters ul.checkmark li:before {
  border: solid 8px #FFFFFF !important;
}

/* LIGHT BACKGROUND*/
#msmu_wrapper.discussion .guidelines ul li:before,
#msmu_wrapper ul.checkmark li:before,
#msmu_wrapper.syllabus ul.checkmark li:before,
#msmu_wrapper div:not([class*="col-"]) ~ div.objectives ul > li:before {
  border-color: #553377 !important;
}

/* Change color and appearance of the checkmark
   -------------------------------------------- */
/* DARK BACKGROUND */
#msmu_wrapper .objectives ul li:after,
#msmu_wrapper .objectives ul ul li:after,
#msmu_wrapper ul.checkmark li:after,
#msmu_wrapper ul.checkmark ul li:after,
#msmu_wrapper.syllabus ul.checkmark li:after,
#msmu_wrapper.syllabus ul.checkmark ul li:after,
#msmu_wrapper .parameters ul.checkmark li:after,
#msmu_wrapper .parameters ul.checkmark ul li:after {
  border: solid #553377;
  border-width: 0 2px 2px 0;
}

/* LIGHT BACKGROUND */
#msmu_wrapper.discussion .guidelines ul li:after,
#msmu_wrapper.discussion .guidelines ul ul li:after,
#msmu_wrapper.syllabus ul.checkmark li:after,
#msmu_wrapper.syllabus ul.checkmark ul li:after,
#msmu_wrapper ul.checkmark li:after,
#msmu_wrapper ul.checkmark ul li:after,
#msmu_wrapper div:not([class*="col-"]) ~ div.objectives ul li:after,
#msmu_wrapper div:not([class*="col-"]) ~ div.objectives ul ul li:after {
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
}

/* Sets up the checkmark
   --------------------- */
#msmu_wrapper .objectives ul > li,
#msmu_wrapper.discussion .guidelines ul > li,
#msmu_wrapper ul.checkmark > li,
#msmu_wrapper.syllabus ul.checkmark > li,
#msmu_wrapper .parameters ul.checkmark > li,
#msmu_wrapper div:not([class*="col-"]) ~ div.objectives ul > li {
  list-style-type: none;
  margin-bottom: 14px;
  padding: 0 20px 0 20px;
  position: relative;
}

/* positions the circle background */
#msmu_wrapper .objectives ul li:before,
#msmu_wrapper.discussion .guidelines ul li:before,
#msmu_wrapper ul.checkmark li:before,
#msmu_wrapper.syllabus ul.checkmark li:before,
#msmu_wrapper .parameters ul.checkmark li:before,
#msmu_wrapper div:not([class*="col-"]) ~ div.objectives ul li:before {
  content: " ";
  display: block;
  border: 8px solid;
  border-radius: 8px;
  height: 0;
  width: 0;
  position: absolute;
  left: -10px;
  margin-top: 1px;
}

/* Draws the checkmark
   -------------------  */
#msmu_wrapper .objectives ul li:after,
#msmu_wrapper .objectives ul ul li:after,
#msmu_wrapper.discussion .guidelines ul li:after,
#msmu_wrapper.discussion .guidelines ul ul li:after,
#msmu_wrapper ul.checkmark li:after,
#msmu_wrapper ul.checkmark ul li:after,
#msmu_wrapper.syllabus ul.checkmark li:after,
#msmu_wrapper.syllabus ul.checkmark ul li:after,
#msmu_wrapper .parameters ul.checkmark li:after,
#msmu_wrapper .parameters ul.checkmark ul li:after,
#msmu_wrapper div:not([class*="col-"]) ~ div.objectives ul li:after,
#msmu_wrapper div:not([class*="col-"]) ~ div.objectives ul ul li:after {
  content: " ";
  display: block;
  width: 3px;
  height: 6px;
  position: absolute;
  left: -4.2px;
  top: 4px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*
=======================
SECTION: AHEAD - SCHEDULE TABLE
=======================
*/
/*Overview Schedule Table*/
#msmu_wrapper .overview_schedule table {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: none;
  margin: 20px 0 40px;
}

#msmu_wrapper .overview_schedule table tr {
  border-top: 1px #9C7FB3 solid;
  width: 50px;
  overflow: hidden;
}

#msmu_wrapper .overview_schedule table tr td {
  vertical-align: text-top;
}

#msmu_wrapper .overview_schedule table tr:first-of-type {
  border-top: none;
}

#msmu_wrapper .overview_schedule table tr td:first-of-type {
  font-weight: bold;
  width: 50px;
  vertical-align: text-top;
  padding-top: 0;
  margin-top: 0;
}

/*Items listed */
#msmu_wrapper .overview_schedule table tr td ul {
  list-style: none;
  padding: 0 6px 10px;
  margin: 0;
}

#msmu_wrapper.overview .overview_schedule table p {
  padding: 0 0 1.2rem;
  margin: 0;
}

#msmu_wrapper .overview_schedule table tr td ul li,
#msmu_wrapper.overview .overview_schedule table p {
  border-bottom: 1px #D1D3D4 solid;
  padding: 0 6px 6px;
}

#msmu_wrapper .overview_schedule table tr td ul li:last-of-type {
  border-bottom: none;
}

#msmu_wrapper.overview .overview_schedule table p:first-of-type {
  padding-top: 0;
  margin-top: 0;
}

#msmu_wrapper.overview .overview_schedule table p:last-of-type {
  border-bottom: none;
}

#msmu_wrapper.overview .overview_schedule table p:only-of-type {
  margin-bottom: 0 !important;
}

#msmu_wrapper.overview .overview_schedule table tr td ul li:before,
#msmu_wrapper.overview .overview_schedule table tr td ul li:after {
  border: 0 solid #ffffff !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/*
=======================
SECTION: BOTTOM: STUDENT LEARNING OBJECTIVES
=======================
*/
#msmu_wrapper .bottom_container {
  background-color: #553377;
  padding: 20px;
  color: #ffffff;
}

#msmu_wrapper .bottom_container h3 {
  color: #FFFFFF;
}

#msmu_wrapper .bottom_container ul {
  color: #FFFFFF;
  margin: 18px 10px 20px;
}

#msmu_wrapper .bottom_container a {
  color: rgba(255, 255, 255, 0.7);
  margin: 18px 10px 20px;
}

/*
=======================
SECTION: DISCUSSION - Deadlines
=======================
*/
#msmu_wrapper.discussion .discussion_schedule table {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: none;
  margin: 0;
  padding: 0;
}

#msmu_wrapper.discussion .discussion_schedule table tr:not(:last-child) {
  border-bottom: 1px #9C7FB3 solid;
}

#msmu_wrapper.discussion .discussion_schedule table tr td {
  padding: 10px 4px;
}

#msmu_wrapper.discussion .discussion_schedule table tr td:nth-child(1) {
  font-size: 1.2rem;
  color: #000000;
  padding: 2px 6px;
  width: 144px;
  overflow: hidden;
}

#msmu_wrapper.discussion .discussion_schedule table tr td:nth-child(2) {
  font-size: 1.2rem;
  color: #000000;
  width: 100px;
}

/*
=======================
ACTIVITY: BOOK
=======================
*/
#msmu_wrapper.activity .top_container ~ .grid {
  margin: 2rem 0 0;
}

/*#msmu_wrapper.activity .grid:nth-of-type(2n+3){
    margin: 0 0 6rem 0;
}*/
#msmu_wrapper.activity .grid:last-of-type {
  margin: 0;
}

#msmu_wrapper.activity .col-1-4,
#msmu_wrapper .cover_wrapper {
  width: 200px;
  flex-basis: 200px;
  -webkit-flex-basis: 200px;
  max-width: 200px;
}

#msmu_wrapper .book_container .col-md {
  flex-basis: auto;
}

.book,
.item,
#msmu_wrapper .book_container .image,
#msmu_wrapper .item_container .image {
  display: inline-block;
  margin: 10px;
}

.book_cover,
.item_cover,
#msmu_wrapper .book_container .cover_container,
#msmu_wrapper .item_container .cover_container {
  padding-left: 20px !important;
  -moz-perspective: 100px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  margin-bottom: 10px;
}

.book,
#msmu_wrapper .book_container .image {
  position: relative;
  -moz-perspective: 100px;
  -moz-transform: rotateY(-3deg);
  -webkit-transform: perspective(100) rotateY(-3deg);
  outline: 1px solid transparent;
  /* Helps smooth jagged edges in Firefox */
  box-shadow: none;
  margin: 0;
}

/*creates front cover thickness*/
.book img,
.item img,
#msmu_wrapper .book_container .image img,
#msmu_wrapper .item_container .image img {
  position: relative;
  max-width: 100%;
  border-right: 2px solid #d7d0e5;
  vertical-align: middle;
  width: 130px;
  height: auto;
}

.book:before,
.book:after,
#msmu_wrapper .book_container .image:before,
#msmu_wrapper .book_container .image:after,
.image:before,
.image:after {
  position: absolute;
  top: 2%;
  height: 96%;
  content: ' ';
  z-index: -1;
}

/*creates back cover color*/
.book:before,
#msmu_wrapper .book_container .image:before {
  width: 100%;
  left: 7.5%;
  background-color: #514e5c;
}

/*creates book shadow*/
.book_cover::after,
#msmu_wrapper .book_container .cover_container::after {
  content: ' ';
  position: absolute;
  z-index: -10;
  background-color: rgba(81, 78, 92, 0.1);
  bottom: -10px;
  left: 25px;
  right: 0;
  max-width: 160px;
  height: 25px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  transform: rotateX(45deg) rotateZ(4deg) translateZ(0px) translateX(0px) translateY(0px);
}

/*create inside pages and it's shadows*/
.book:after,
#msmu_wrapper .book_container .image:after {
  width: 5%;
  left: 100%;
  background-color: #EFEFEF;
  box-shadow: inset 0 0 5px #AAAAAA;
  -moz-transform: rotateY(20deg);
  -webkit-transform: perspective(100) rotateY(20deg);
}

/*SYLLABUS BOOK*/
/* */
/* */
#msmu_wrapper.syllabus .col-1-4 {
  width: 190px;
}

/*BOOK INFORMATION */
/* */
/* */
#msmu_wrapper.syllabus .book_information h6,
#msmu_wrapper.syllabus .item_information h6,
#msmu_wrapper .book_information h4,
#msmu_wrapper .item_information h4,
#msmu_wrapper .information h4 {
  margin-top: 0;
  margin-bottom: 0.5rem !important;
  line-height: 1.6rem;
}

#msmu_wrapper.syllabus .item_information h6,
#msmu_wrapper .item_information h4,
#msmu_wrapper .information h4 {
  padding-top: 0.8rem;
}

.book_information p,
.item_information p,
.information p {
  line-height: 1em;
  margin: 0 0 0 20px !important;
}

.book_information p:first-of-type,
.item_information p:first-of-type,
.information p:first-of-type {
  margin: 0 !important;
}

.book_information p a,
.book_information p a:link,
.book_information p a:visited,
.item_information p a,
.item_information p a:link,
.item_information p a:visited,
.information p a,
.information p a:link,
.information p a:visited {
  color: #553377;
  background-color: #FFFFFF;
  text-decoration: none;
  padding: 2px 6px;
  border: 1px solid #553377;
  border-radius: 4px;
  margin: 4px 0 0 -20px;
  display: inline-block;
  /*todo:add this effect to all buttons on the system*/
  -webkit-transition: background 0.15s linear;
  -moz-transition: background 0.15s linear;
  -ms-transition: background 0.15s linear;
  -o-transition: background 0.15s linear;
  transition: background 0.15s linear;
}

.book_information p a:last-of-type,
.item_information p a:last-of-type,
.information p a:last-of-type {
  margin-bottom: 2rem;
}

.book_information p a:hover,
.book_information p a:active,
.item_information p a:hover,
.item_information p a:active,
.information p a:hover,
.information p a:active {
  background-color: #553377;
  color: #FFFFFF;
}

/*----------------------
Numbered Lists
-----------------------*/
#msmu_wrapper .instructions ol,
#msmu_wrapper.content ol {
  list-style: none;
  /* Remove default numbering */
  list-style: decimal;
  /* Keep using default numbering for IE6/7 */
}

#msmu_wrapper .instructions ol ul,
#msmu_wrapper .instructions ol ol,
#msmu_wrapper .instructions ul ul,
#msmu_wrapper .instructions ul ol,
#msmu_wrapper.content ol ul,
#msmu_wrapper.content ol ol,
#msmu_wrapper.content ul ul,
#msmu_wrapper.content ul ol {
  margin: 0;
}

#msmu_wrapper .instructions ol li,
#msmu_wrapper.content ol li {
  position: relative;
  display: block;
  margin: .5em 0 .5em 24px;
  text-decoration: none;
}

#msmu_wrapper .instructions ol > li:before,
#msmu_wrapper.content ol > li:before {
  content: counter(number_counter);
  counter-increment: number_counter;
  position: absolute;
  left: -34px;
  top: 0;
  background: #553377;
  color: #FFFFFF;
  height: 18px;
  width: 18px;
  line-height: 1.8em;
  text-align: center;
  border-radius: 1.5em;
  font-size: 0.70em;
}

#msmu_wrapper .instructions ol ol > li:before,
#msmu_wrapper.content ol ol > li:before {
  content: counter(number_counter_embedded);
  counter-increment: number_counter_embedded;
  position: absolute;
  top: 0.4em;
  background: #553377;
  color: #FFFFFF;
  height: 1.5em;
  width: 1.5em;
  line-height: 1.5em;
  text-align: center;
  border-radius: 6px;
  font-size: 1em;
}

/*Reset counter*/
#msmu_wrapper .instructions ol ol,
#msmu_wrapper.content ol ol {
  counter-reset: number_counter_embedded;
}

#msmu_wrapper .instructions h1,
#msmu_wrapper .instructions h2,
#msmu_wrapper .instructions h3,
#msmu_wrapper .instructions h4,
#msmu_wrapper .instructions h5,
#msmu_wrapper .instructions h6,
#msmu_wrapper.content h1,
#msmu_wrapper.content h2,
#msmu_wrapper.content h3,
#msmu_wrapper.content h4,
#msmu_wrapper.content h5,
#msmu_wrapper.content h6 {
  counter-reset: number_counter !important;
}

#msmu_wrapper.activity .instructions,
#msmu_wrapper.discussion .middle_container {
  align-items: stretch !important;
}

#msmu_wrapper.activity .highlight {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right: none;
}

#msmu_wrapper.activity .parameters {
  background-color: #553377;
  border-right: 1px #AAAAAA solid;
  color: #FFFFFF;
  padding: 14px 20px 10px 10px;
}

#msmu_wrapper .parameters h4 {
  color: #ffffff;
  padding-left: 15px;
}

/* ENHANCEMENTS
==================*/
/* ASSIGNMENTS: Adjust Height Dynamically */
#assignment_show .description.teacher-version {
  height: inherit;
}



/*add white top container to the nav logo background*/
.ic-app-header__logomark-container {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  height: 85px;
  background: linear-gradient(to bottom, white, white 40px, transparent 40px, transparent);
  background-size: 100% 85px;
}

/* MODULES: Add Emphasis to Title items*/
.ig-published span.title.locked_title {
  color: black;
}

/*MODULES: Change all published items' icon to be purple*/
.ig-published .published-status.published,
.ig-list .ig-row.ig-published .ig-title,
.publish-icon.publish-icon-published {
  color: #775599;
}

/*CONTENT PAGE: Change all buttons to be purple*/
.btn-success, .Button--success,
.btn-published {
  background-color: #775599;
}

.btn-success:hover, .Button--success:hover,
.btn-published, .btn-published:hover {
  background-color: #553377;
}

/* MEDIA QUERIES
---------------- */
@media only screen and (max-width: 768px) {
  #msmu_wrapper [class*="col-"] {
    width: 100%;
    display: table-row;
  }
}

/*# sourceMappingURL=layout_2a.css.map */
/*
=======================
* FONTS
=======================
*/
/*
=======================
* GRID
=======================
*/
#msmu_wrapper .grid {
  margin: 0 0 10px;
  display: table;
  table-layout: fixed;
  width: 100%;
}

#msmu_wrapper .grid:last-child {
  margin-bottom: 0;
}

#msmu_wrapper .grid-pad {
  border-spacing: 20px;
}

#msmu_wrapper .grid-pad > [class*=col-] {
  padding-bottom: 20px !important;
}

#msmu_wrapper [class*="col-"] {
  display: table-cell;
  vertical-align: top;
}

#msmu_wrapper .col-1 {
  width: 100%;
}

#msmu_wrapper .col-1-2 {
  width: 50%;
}

#msmu_wrapper .col-1-3 {
  width: 33.33333%;
}

#msmu_wrapper .col-2-3 {
  width: 66.66666%;
}

#msmu_wrapper .col-1-4 {
  width: 25%;
}

#msmu_wrapper .col-3-4 {
  width: 75%;
}

#msmu_wrapper .col-1-5 {
  width: 20%;
}

#msmu_wrapper .col-2-5 {
  width: 40%;
}

#msmu_wrapper .col-3-5 {
  width: 60%;
}

#msmu_wrapper .col-4-5 {
  width: 80%;
}

#msmu_wrapper .col-1-6 {
  width: 16.666%;
}

#msmu_wrapper .col-5-6 {
  width: 83.33%;
}

#msmu_wrapper .col-1-8 {
  width: 12.5%;
}

#msmu_wrapper .col-3-8 {
  width: 37.5%;
}

#msmu_wrapper .col-5-8 {
  width: 62.5%;
}

#msmu_wrapper .col-7-8 {
  width: 87.5%;
}

#msmu_wrapper .col-1-12 {
  width: 8.3333%;
}

#msmu_wrapper .col-5-12 {
  width: 41.6666%;
}

#msmu_wrapper .col-7-12 {
  width: 58.3333%;
}

#msmu_wrapper .col-11-12 {
  width: 91.6666%;
}

#msmu_wrapper .col-1-24 {
  width: 4.1666%;
}

#msmu_wrapper .col-5-24 {
  width: 20.8333%;
}

#msmu_wrapper .col-7-24 {
  width: 29.1666%;
}

#msmu_wrapper .col-11-24 {
  width: 45.8333%;
}

#msmu_wrapper .col-13-24 {
  width: 54.1666%;
}

#msmu_wrapper .col-17-24 {
  width: 70.8333%;
}

#msmu_wrapper .col-19-24 {
  width: 79.1666%;
}

#msmu_wrapper .col-23-24 {
  width: 95.8333%;
}

/* Add extra space between sections*/
#msmu_wrapper div.discussion_schedule ~ div.guidelines {
  margin-top: 40px;
}

#msmu_wrapper .col-2-3 .guidelines {
  margin-top: 0;
}

.left_border {
  border-left: 2px solid #D1D3D4;
  padding-left: 20px;
}

.right_border {
  border-right: 2px solid #D1D3D4;
  padding-right: 20px;
}

#msmu_wrapper .right {
  float: right;
}

/*
=======================
HIGHLIGHT
=======================
*/
#msmu_wrapper .highlight {
  background-color: #FFF8EB;
  padding: 10px 20px;
  border: 1px #AAAAAA solid;
}

#msmu_wrapper .highlight_2 {
  background-color: #ebebeb;
  padding: 10px 20px;
  border: 1px #AAAAAA solid;
}

/*
=======================
* BASE
=======================
*/
#msmu_wrapper {
  background: no-repeat fixed center top;
  margin: 0;
  padding: 0;
  font-family: Avenir, AvenirNextLTPro-Regular, sans-serif !important;
  font-size: 16px;
  line-height: 1.6rem;
  color: #4C4C4C;
  max-width: 960px;
}

#msmu_wrapper p {
  margin: 0 0 1.0rem;
  line-height: 1.7rem;
}

#msmu_wrapper p:last-of-type {
  margin-bottom: 4.0rem;
}

#msmu_wrapper p:only-of-type {
  margin-bottom: 1.0rem !important;
}

#msmu_wrapper a {
  /*white-space: nowrap;*/
  word-wrap: break-word;
}

#msmu_wrapper h1,
#msmu_wrapper h2,
#msmu_wrapper h3,
#msmu_wrapper h4,
#msmu_wrapper h5,
#msmu_wrapper h6 {
  font-family: "Montserrat", sans-serif !important;
  color: #553377;
  margin: 0 0 0.5rem;
}

#msmu_wrapper h1 {
  font-size: 2.2rem;
  line-height: 1.25;
  letter-spacing: -0.05rem;
}

#msmu_wrapper h2 {
  font-size: 1.8rem;
  line-height: 1.8;
  letter-spacing: -0.04rem;
}

#msmu_wrapper h3 {
  font-size: 1.4rem;
  line-height: 2;
  vertical-align: baseline;
  letter-spacing: -0.03rem;
}

#msmu_wrapper h4 {
  font-size: 1.25rem;
  line-height: 1.5;
  letter-spacing: -.02rem;
}

#msmu_wrapper h5 {
  font-size: 1.15rem;
  line-height: 1.5;
  letter-spacing: 0;
}

#msmu_wrapper h6 {
  font-size: 1.0rem;
  line-height: 1.6;
  letter-spacing: 0;
}

/*#msmu_wrapper [class*="co"] * + h3 {
  margin-top: 2.4rem;
}*/
/* Add top margin to all headers, except the first one*/
#msmu_wrapper [class*="co"] * + h1,
#msmu_wrapper [class*="co"] * + h2,
#msmu_wrapper [class*="co"] * + h3,
#msmu_wrapper [class*="co"] * + h4,
#msmu_wrapper [class*="co"] * + h5,
#msmu_wrapper [class*="co"] * + h6,
#msmu_wrapper [class*="col-"] * + h1,
#msmu_wrapper [class*="col-"] * + h2,
#msmu_wrapper [class*="col-"] * + h3,
#msmu_wrapper [class*="col-"] * + h4,
#msmu_wrapper [class*="col-"] * + h5,
#msmu_wrapper [class*="col-"] * + h6 {
  margin-top: 2.6rem;
}

/*
=======================
Image Figure
=======================
*/
#msmu_wrapper figure {
  display: table;
  table-layout: fixed;
  width: 100%;
  border: 0;
  margin: 0 0 30px;
}

#msmu_wrapper figure img {
  width: 100%;
  border: 0;
  margin: 0;
  padding: 0;
}

#msmu_wrapper figure figcaption {
  font-size: 1em;
  font-style: italic;
  color: #9D7CB3;
  margin: 0;
  padding: 0;
}

#msmu_wrapper figure figcaption:before {
  content: "Image: ";
  font-size: 0.8em;
  column-rule: #7C539A;
  vertical-align: text-top;
}

/* Remove top margin for the first item inside these sections*/
/*#msmu_wrapper.activity .highlight h3:first-of-type{
  margin-top: 0;
}*/
/* ---------------------
  ORDERED LISTS
  ---------------------*/
/* ---------------------
  FONT COLORS
  ---------------------*/
.dark_grey {
  color: #4C4C4C;
}

/*
=======================
SYLLABUS: TABLE
=======================
*/
#msmu_wrapper.syllabus table {
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: none;
  margin: 20px 0 40px;
}

#msmu_wrapper.syllabus thead th,
#msmu_wrapper.syllabus thead tr {
  border-top: none !important;
  font-weight: bold;
  border-bottom: 2px solid #553377;
  vertical-align: text-bottom;
  text-align: left;
}

#msmu_wrapper.syllabus th {
  text-align: left;
  margin: 20px 0;
  padding: 4px 6px;
  vertical-align: text-top;
}

#msmu_wrapper.syllabus table tr {
  border-top: 1px #ACACAC solid;
  overflow: hidden;
}

#msmu_wrapper.syllabus table tr td {
  border: none;
  margin: 20px 0;
  padding: 4px 6px;
  vertical-align: text-top;
}

#msmu_wrapper.syllabus table tr td:first-of-type {
  padding: 4px;
  width: auto;
}

#msmu_wrapper.syllabus table tr:first-of-type {
  border-top: none;
}

#msmu_wrapper.syllabus table tr:last-of-type {
  border-bottom: none;
}

/* SYLLABUS DATES - overwriting common css */
#syllabus thead th {
  text-align: left;
  background-color: transparent;
  color: #4C4C4C;
  padding: 3px 10px;
  border-bottom: 2px solid #553377;
  border-top: none;
  font-weight: bold;
  font-size: 14px;
}

/*
=======================
SYLLABUS: Textbooks
=======================
*/
/*
=======================
SECTION: OVERVIEW
=======================
*/
/*
=======================
* Cover Image/Graphic
=======================
 */
/*
Set Back-up Background Color
*/
#msmu_wrapper.syllabus .top_container,
#msmu_wrapper.syllabus .top_container .cover {
  background-color: #0a0a15;
}

#msmu_wrapper.overview .top_container,
#msmu_wrapper.overview .top_container .cover,
#msmu_wrapper.simple_1 .top_container,
#msmu_wrapper.simple_1 .top_container .cover,
#msmu_wrapper.simple_2 .top_container,
#msmu_wrapper.simple_2 .top_container .cover {
  background-color: #241b3a;
}

#msmu_wrapper.discussion .top_container,
#msmu_wrapper.discussion .top_container .cover {
  background-color: #2f030b;
}

#msmu_wrapper.activity .top_container,
#msmu_wrapper.activity .top_container .cover {
  background-color: #012229;
}

#msmu_wrapper.content .top_container,
#msmu_wrapper.content .top_container .cover {
  background-color: #1f1b05;
}

/*
Draw Circles
*/
#msmu_wrapper.activity .top_container .cover,
#msmu_wrapper.content .top_container .cover,
#msmu_wrapper.discussion .top_container .cover,
#msmu_wrapper.overview .top_container .cover,
#msmu_wrapper.simple_1 .top_container .cover,
#msmu_wrapper.simple_2 .top_container .cover,
#msmu_wrapper.syllabus .top_container .cover {
  min-height: 200px;
  background-image: -webkit-gradient(radial, 50% 50%, 36, 50% 50%, 40, from(rgba(150, 111, 195, 0.2)), color-stop(0.3, rgba(150, 111, 195, 0.3)), to(transparent)), -webkit-gradient(radial, 50% 50%, 16, 50% 50%, 20, from(rgba(224, 124, 203, 0.1)), color-stop(0.2, rgba(224, 124, 203, 0.2)), to(transparent)), -webkit-gradient(radial, 50% 50%, 16, 50% 50%, 20, from(rgba(224, 124, 203, 0.1)), color-stop(0.2, rgba(224, 124, 203, 0.2)), to(transparent)), -webkit-gradient(radial, 50% 50%, 38, 50% 50%, 46, from(rgba(145, 75, 113, 0.3)), color-stop(0.3, rgba(145, 75, 113, 0.4)), to(transparent)), -webkit-gradient(radial, 50% 50%, 20, 50% 50%, 80, from(rgba(145, 75, 113, 0)), color-stop(0.3, rgba(145, 75, 113, 0.2)), to(transparent)), -webkit-gradient(radial, 50% 50%, 30, 50% 50%, 90, from(rgba(145, 75, 113, 0)), color-stop(0.5, rgba(145, 75, 113, 0.2)), to(transparent)), -webkit-gradient(radial, 50% 50%, 30, 50% 50%, 50, from(rgba(37, 85, 79, 0.2)), color-stop(0.2, rgba(37, 85, 79, 0.3)), to(transparent)), -webkit-gradient(radial, 50% 50%, 16, 50% 50%, 20, from(rgba(37, 85, 79, 0.2)), color-stop(0.2, rgba(37, 85, 79, 0.3)), to(transparent)), -webkit-gradient(radial, 50% 50%, 26, 50% 50%, 30, from(rgba(37, 85, 79, 0.2)), color-stop(0.2, rgba(37, 85, 79, 0.3)), to(transparent)), -webkit-gradient(radial, 50% 50%, 36, 50% 50%, 40, from(rgba(37, 85, 79, 0.3)), color-stop(0.2, rgba(37, 85, 79, 0.4)), to(transparent)), -webkit-gradient(radial, 50% 50%, 30, 50% 50%, 50, from(rgba(114, 209, 244, 0.1)), color-stop(0.2, rgba(114, 209, 244, 0.1)), to(transparent)), -webkit-gradient(radial, 50% 50%, 16, 50% 50%, 20, from(rgba(114, 209, 244, 0.1)), color-stop(0.2, rgba(114, 209, 244, 0.2)), to(transparent)), -webkit-gradient(radial, 50% 50%, 26, 50% 50%, 30, from(rgba(114, 209, 244, 0.1)), color-stop(0.2, rgba(114, 209, 244, 0.2)), to(transparent)), -webkit-gradient(radial, 50% 50%, 36, 50% 50%, 40, from(rgba(114, 209, 244, 0.2)), color-stop(0.2, rgba(114, 209, 244, 0.3)), to(transparent));
  background-image: -webkit-radial-gradient(circle contain, rgba(150, 111, 195, 0.2) 36px, rgba(150, 111, 195, 0.3) 38px, transparent 40px), -webkit-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), -webkit-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), -webkit-radial-gradient(circle contain, rgba(145, 75, 113, 0.2) 38px, rgba(145, 75, 113, 0.3) 41px, transparent 46px), -webkit-radial-gradient(circle contain, rgba(145, 75, 113, 0) 20px, rgba(145, 75, 113, 0.2) 38px, transparent 80px), -webkit-radial-gradient(circle contain, rgba(145, 75, 113, 0) 30px, rgba(145, 75, 113, 0.2) 60px, transparent 90px), -webkit-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 30px, rgba(37, 85, 79, 0.3) 34px, transparent 50px), -webkit-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 16px, rgba(37, 85, 79, 0.3) 17px, transparent 20px), -webkit-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 26px, rgba(37, 85, 79, 0.3) 27px, transparent 30px), -webkit-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 36px, rgba(37, 85, 79, 0.3) 37px, transparent 40px), -webkit-radial-gradient(circle contain, rgba(114, 209, 244, 0.1) 30px, rgba(114, 209, 244, 0.1) 34px, transparent 50px), -webkit-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 16px, rgba(114, 209, 244, 0.3) 17px, transparent 20px), -webkit-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 26px, rgba(114, 209, 244, 0.3) 27px, transparent 30px), -webkit-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 36px, rgba(114, 209, 244, 0.3) 37px, transparent 40px);
  background-image: -moz-radial-gradient(circle contain, rgba(150, 111, 195, 0.2) 36px, rgba(150, 111, 195, 0.3) 38px, transparent 40px), -moz-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), -moz-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), -moz-radial-gradient(circle contain, rgba(145, 75, 113, 0.2) 38px, rgba(145, 75, 113, 0.3) 41px, transparent 46px), -moz-radial-gradient(circle contain, rgba(145, 75, 113, 0) 20px, rgba(145, 75, 113, 0.2) 38px, transparent 80px), -moz-radial-gradient(circle contain, rgba(145, 75, 113, 0) 30px, rgba(145, 75, 113, 0.2) 60px, transparent 90px), -moz-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 30px, rgba(37, 85, 79, 0.3) 34px, transparent 50px), -moz-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 16px, rgba(37, 85, 79, 0.3) 17px, transparent 20px), -moz-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 26px, rgba(37, 85, 79, 0.3) 27px, transparent 30px), -moz-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 36px, rgba(37, 85, 79, 0.3) 37px, transparent 40px), -moz-radial-gradient(circle contain, rgba(114, 209, 244, 0.1) 30px, rgba(114, 209, 244, 0.1) 34px, transparent 50px), -moz-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 16px, rgba(114, 209, 244, 0.3) 17px, transparent 20px), -moz-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 26px, rgba(114, 209, 244, 0.3) 27px, transparent 30px), -moz-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 36px, rgba(114, 209, 244, 0.3) 37px, transparent 40px);
  background-image: -o-radial-gradient(circle contain, rgba(150, 111, 195, 0.2) 36px, rgba(150, 111, 195, 0.3) 38px, transparent 40px), -o-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), -o-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), -o-radial-gradient(circle contain, rgba(145, 75, 113, 0.2) 38px, rgba(145, 75, 113, 0.3) 41px, transparent 46px), -o-radial-gradient(circle contain, rgba(145, 75, 113, 0) 20px, rgba(145, 75, 113, 0.2) 38px, transparent 80px), -o-radial-gradient(circle contain, rgba(145, 75, 113, 0) 30px, rgba(145, 75, 113, 0.2) 60px, transparent 90px), -o-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 30px, rgba(37, 85, 79, 0.3) 34px, transparent 50px), -o-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 16px, rgba(37, 85, 79, 0.3) 17px, transparent 20px), -o-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 26px, rgba(37, 85, 79, 0.3) 27px, transparent 30px), -o-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 36px, rgba(37, 85, 79, 0.3) 37px, transparent 40px), -o-radial-gradient(circle contain, rgba(114, 209, 244, 0.1) 30px, rgba(114, 209, 244, 0.1) 34px, transparent 50px), -o-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 16px, rgba(114, 209, 244, 0.3) 17px, transparent 20px), -o-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 26px, rgba(114, 209, 244, 0.3) 27px, transparent 30px), -o-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 36px, rgba(114, 209, 244, 0.3) 37px, transparent 40px);
  background-image: radial-gradient(circle contain, rgba(150, 111, 195, 0.2) 36px, rgba(150, 111, 195, 0.3) 38px, transparent 40px), radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), radial-gradient(circle contain, rgba(145, 75, 113, 0.2) 38px, rgba(145, 75, 113, 0.3) 41px, transparent 46px), radial-gradient(circle contain, rgba(145, 75, 113, 0) 20px, rgba(145, 75, 113, 0.2) 38px, transparent 80px), radial-gradient(circle contain, rgba(145, 75, 113, 0) 30px, rgba(145, 75, 113, 0.2) 60px, transparent 90px), radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 30px, rgba(37, 85, 79, 0.3) 34px, transparent 50px), radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 16px, rgba(37, 85, 79, 0.3) 17px, transparent 20px), radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 26px, rgba(37, 85, 79, 0.3) 27px, transparent 30px), radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 36px, rgba(37, 85, 79, 0.3) 37px, transparent 40px), radial-gradient(circle contain, rgba(114, 209, 244, 0.1) 30px, rgba(114, 209, 244, 0.1) 34px, transparent 50px), radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 16px, rgba(114, 209, 244, 0.3) 17px, transparent 20px), radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 26px, rgba(114, 209, 244, 0.3) 27px, transparent 30px), radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 36px, rgba(114, 209, 244, 0.3) 37px, transparent 40px);
  -moz-background-size: 300px 400px;
  background-size: 300px 400px;
  background-position: 30px -5px, 80px -70px, 10px -40px, 50px -50px, 20px -80px, 60px -10px, -50px -60px, -60px -20px, -80px -80px, -160px -30px, 20px -30px, 130px -60px, 180px -40px, 180px 0;
}

.no-cssgradients #msmu_wrapper .top_container .cover {
  background: #131123 url(data:image/svg+xml;base64,H4sICBWwZk0AA2Jva2VoLnN2ZwC9lmtuozAUhf9nFZZHlRIpAV%2BDgVY4lUYjdQGzAkocQEOhMiRkdj82xIzCI30o7R9jlPicz%2FceW4SPp5ccHYWssrLgGCyCH7eLsDomqMl2dcoxIwSjVGRJWnPs6Be1oqg4Tuv69cG2m6axGscqZWJTQoitluLtYoHCndhX2wVC4T7LayFRtuP4OT9I%2BC%2BnFtxhY9S9%2FOV4w%2FTkdJ5oCaUhnqJDVWVR8VNJoKre%2FRLHLKo7aowy9fhdHmQsnmT0mmYxtltvuzOf4mA352Cf4vBvzuG%2Fg0M1yO46pGYJqmVUVPtSvnDcTvOoFksKZI3AIyuM1LKc46IsRNtcFMaZjHOBpMpEgFF80tlQzxYXKx5Z%2FhEcy%2BQ5WgLTMgBquGdrRCxnZf6xMXttHRQYxweZL3%2B0Oeltp1Wo%2Bt0ewoDfwQQGxicDGkpdJaEHShytw0Y0FnsbZyQDHc4ljdfRgKFxv53mEsiFDoj1vRoCgauK6zNdaufzvZoQGdbGxIYalODjKLquIxZ%2FhYdeHum8POMFb3nRCTNn1mywM7dz2%2FRV9oZ2jr9GgXa8N0m%2B9JqyGtT4UgLYVPzOh2HT75teB4EvAqEGJJht9veAOAYE%2BpI410nGOfgwCZ0%2BiyYmdJYEoD3QSoS67nRZpu4GNj4AJgngzEbyHWZwvorya0vmeg%2FB7CV4C2tyrd2995ds%2Buwc2oke1PfP9h%2F9egCnVgkAAA%3D%3D), url("data:image/svg+xml;base64,H4sICBWwZk0AA2Jva2VoLnN2ZwC9lmtuozAUhf9nFZZHlRIpAV%2BDgVY4lUYjdQGzAkocQEOhMiRkdj82xIzCI30o7R9jlPicz%2FceW4SPp5ccHYWssrLgGCyCH7eLsDomqMl2dcoxIwSjVGRJWnPs6Be1oqg4Tuv69cG2m6axGscqZWJTQoitluLtYoHCndhX2wVC4T7LayFRtuP4OT9I%2BC%2BnFtxhY9S9%2FOV4w%2FTkdJ5oCaUhnqJDVWVR8VNJoKre%2FRLHLKo7aowy9fhdHmQsnmT0mmYxtltvuzOf4mA352Cf4vBvzuG%2Fg0M1yO46pGYJqmVUVPtSvnDcTvOoFksKZI3AIyuM1LKc46IsRNtcFMaZjHOBpMpEgFF80tlQzxYXKx5Z%2FhEcy%2BQ5WgLTMgBquGdrRCxnZf6xMXttHRQYxweZL3%2B0Oeltp1Wo%2Bt0ewoDfwQQGxicDGkpdJaEHShytw0Y0FnsbZyQDHc4ljdfRgKFxv53mEsiFDoj1vRoCgauK6zNdaufzvZoQGdbGxIYalODjKLquIxZ%2FhYdeHum8POMFb3nRCTNn1mywM7dz2%2FRV9oZ2jr9GgXa8N0m%2B9JqyGtT4UgLYVPzOh2HT75teB4EvAqEGJJht9veAOAYE%2BpI410nGOfgwCZ0%2BiyYmdJYEoD3QSoS67nRZpu4GNj4AJgngzEbyHWZwvorya0vmeg%2FB7CV4C2tyrd2995ds%2Buwc2oke1PfP9h%2F9egCnVgkAAA%3D%3D") repeat 180px 0, -155px 0;
  background-size: auto;
  text-align: center;
}

/*
=======================
PAGE TITLE
=======================
*/
#msmu_wrapper .top_container .cover h2 {
  color: #ffffff;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 14px;
  background-color: rgba(85, 51, 119, 0.6);
  padding: 10px 14px 5px;
  display: inline-block;
  float: right;
  margin: 70px 20px 0;
  text-align: center;
}

#msmu_wrapper .top_container .cover .col-xs h2 {
  display: inline-block;
  margin: 0 auto;
  float: none;
}

#msmu_wrapper .cover h2 span {
  display: block;
  clear: both;
  font-weight: bold;
  font-size: 34px;
  line-height: 36px;
  color: #D1D3D4;
  margin-top: 4px;
}

#msmu_wrapper .cover h2 span:after,
#msmu_wrapper .cover h2 span:before {
  font-family: 'Quattrocento', serif;
  font-weight: normal;
  color: #D1D3D4;
  font-size: 40px;
}

#msmu_wrapper .cover h2 span:before {
  content: "{";
  padding-right: 6px;
}

#msmu_wrapper .cover h2 span:after {
  content: "}";
  padding-left: 6px;
}

/*
=======================
CONTENT
=======================
*/
/*
=======================
OVERVIEW
=======================
*/
/*
=======================
LISTS: CIRCLE STYLE: RIGHT ANGLE BRACKET, CHECKMARK
=======================
*/
/* REGULAR UNORDERED LIST:  CIRCLE RIGHT ANGLE BRACKET
-----------------*/
#msmu_wrapper .content ul > li,
#msmu_wrapper .instructions ul > li,
#msmu_wrapper .syllabus ul > li,
#msmu_wrapper .topics ul > li,
#msmu_wrapper ul > li {
  list-style-type: none;
  margin: 14px 0 10px;
  padding: 0 0 0 20px;
  /* make room for the circle*/
  position: relative;
  /*because we want to position the circle in an absolute fashion*/
}

#msmu_wrapper .content ul > li:before,
#msmu_wrapper .instructions ul > li:before,
#msmu_wrapper .syllabus ul > li:before,
#msmu_wrapper .topics ul > li:before,
#msmu_wrapper div:not([class*="overview_schedule"]) ul > li:before,
#msmu_wrapper ul > li:before {
  content: " ";
  /*the circle itself is empty*/
  display: block;
  border: solid 8px #553377;
  /*create a colored area...*/
  border-radius: 8px;
  /*... and turn it into a circle*/
  height: 0;
  width: 0;
  position: absolute;
  /*the circle is then put into place*/
  left: -10px;
  margin-top: 2px;
}

#msmu_wrapper .instructions ul > li:before,
#msmu_wrapper .syllabus ul > li:before,
#msmu_wrapper .topics ul > li:before,
#msmu_wrapper div:not([class*="overview_schedule"]) ul > li:before,
#msmu_wrapper.content .instructions ul > li:before {
  border-color: #553377;
  /*create a colored area...*/
}

#msmu_wrapper .content ul > li:after,
#msmu_wrapper .content ul ul li:after,
#msmu_wrapper .instructions ol ul > li:after,
#msmu_wrapper .instructions ol ul li:after,
#msmu_wrapper .instructions ul > li:after,
#msmu_wrapper .instructions ul ul li:after,
#msmu_wrapper .syllabus ul > li:after,
#msmu_wrapper .syllabus ul ul li:after,
#msmu_wrapper .topics ul > li:after,
#msmu_wrapper .topics ul ul li:after,
#msmu_wrapper div:not([class*="overview_schedule"]) ul > li:after,
#msmu_wrapper div:not([class*="overview_schedule"]) ul ul li:after {
  content: " ";
  display: block;
  width: 4px;
  height: 4px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  /*creates the shape of a right angle bracket*/
  position: absolute;
  left: -6px;
  /*position the right angle bracket*/
  top: 7px;
  -webkit-transform: rotate(-45deg);
  /*tilts the shape*/
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* CHECKMARK LISTS
---------------------*/
/* Change the circle color for the checkmark
   ------------------------------------ */
/* DARK CIRCLE BACKGROUND */
#msmu_wrapper .parameters ul.checkmark li:before,
#msmu_wrapper ul.checkmark li:before,
#msmu_wrapper.syllabus ul.checkmark li:before {
  border: solid 8px #FFFFFF !important;
}

/* LIGHT BACKGROUND*/
#msmu_wrapper div:not([class*="col-"]) ~ div.objectives ul > li:before,
#msmu_wrapper ul.checkmark li:before,
#msmu_wrapper.discussion .guidelines ul li:before,
#msmu_wrapper.syllabus ul.checkmark li:before {
  border-color: #553377 !important;
}

/* Change color and appearance of the checkmark
   -------------------------------------------- */
/* DARK BACKGROUND */
#msmu_wrapper .objectives ul li:after,
#msmu_wrapper .objectives ul ul li:after,
#msmu_wrapper .parameters ul.checkmark li:after,
#msmu_wrapper .parameters ul.checkmark ul li:after,
#msmu_wrapper ul.checkmark li:after,
#msmu_wrapper ul.checkmark ul li:after,
#msmu_wrapper.syllabus ul.checkmark li:after,
#msmu_wrapper.syllabus ul.checkmark ul li:after {
  border: solid #553377;
  border-width: 0 2px 2px 0;
}

/* LIGHT BACKGROUND */
#msmu_wrapper div:not([class*="col-"]) ~ div.objectives ul li:after,
#msmu_wrapper div:not([class*="col-"]) ~ div.objectives ul ul li:after,
#msmu_wrapper ul.checkmark li:after,
#msmu_wrapper ul.checkmark ul li:after,
#msmu_wrapper.discussion .guidelines ul li:after,
#msmu_wrapper.discussion .guidelines ul ul li:after,
#msmu_wrapper.syllabus ul.checkmark li:after,
#msmu_wrapper.syllabus ul.checkmark ul li:after {
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
}

/* Sets up the checkmark
   --------------------- */
#msmu_wrapper .objectives ul > li,
#msmu_wrapper .parameters ul.checkmark > li,
#msmu_wrapper div:not([class*="col-"]) ~ div.objectives ul > li,
#msmu_wrapper ul.checkmark > li,
#msmu_wrapper.discussion .guidelines ul > li,
#msmu_wrapper.syllabus ul.checkmark > li {
  list-style-type: none;
  margin-bottom: 14px;
  padding: 0 20px;
  position: relative;
}

/* positions the circle background */
#msmu_wrapper .objectives ul li:before,
#msmu_wrapper .parameters ul.checkmark li:before,
#msmu_wrapper div:not([class*="col-"]) ~ div.objectives ul li:before,
#msmu_wrapper ul.checkmark li:before,
#msmu_wrapper.discussion .guidelines ul li:before,
#msmu_wrapper.syllabus ul.checkmark li:before {
  content: " ";
  display: block;
  border: 8px solid;
  border-radius: 8px;
  height: 0;
  width: 0;
  position: absolute;
  left: -10px;
  margin-top: 1px;
}

/* Draws the checkmark
   -------------------  */
#msmu_wrapper .objectives ul li:after,
#msmu_wrapper .objectives ul ul li:after,
#msmu_wrapper .parameters ul.checkmark li:after,
#msmu_wrapper .parameters ul.checkmark ul li:after,
#msmu_wrapper div:not([class*="col-"]) ~ div.objectives ul li:after,
#msmu_wrapper div:not([class*="col-"]) ~ div.objectives ul ul li:after,
#msmu_wrapper ul.checkmark li:after,
#msmu_wrapper ul.checkmark ul li:after,
#msmu_wrapper.discussion .guidelines ul li:after,
#msmu_wrapper.discussion .guidelines ul ul li:after,
#msmu_wrapper.syllabus ul.checkmark li:after,
#msmu_wrapper.syllabus ul.checkmark ul li:after {
  content: " ";
  display: block;
  width: 3px;
  height: 6px;
  position: absolute;
  left: -4.2px;
  top: 4px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*
=======================
SECTION: AHEAD - SCHEDULE TABLE
=======================
*/
/*Overview Schedule Table*/
#msmu_wrapper .overview_schedule table {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: none;
  margin: 20px 0 40px;
}

#msmu_wrapper .overview_schedule table tr {
  border-top: 1px #9C7FB3 solid;
}

#msmu_wrapper .overview_schedule table tr td {
  vertical-align: text-top;
}

#msmu_wrapper .overview_schedule table tr:first-of-type {
  border-top: none;
}

#msmu_wrapper .overview_schedule table tr td:first-of-type {
  font-weight: bold;
  width: 50px;
}

/*Items listed */
#msmu_wrapper .overview_schedule table tr td ul {
  list-style: none;
  padding: 0 6px 10px;
  margin: 0;
}

#msmu_wrapper.overview .overview_schedule table p {
  padding: 0 0 1.2rem;
  margin: 0;
}

#msmu_wrapper .overview_schedule table tr td ul li,
#msmu_wrapper.overview .overview_schedule table p {
  border-bottom: 1px #D1D3D4 solid;
  padding: 0 6px;
}

#msmu_wrapper .overview_schedule table tr td ul li:last-of-type {
  border-bottom: none;
}

#msmu_wrapper.overview .overview_schedule table p:first-of-type {
  padding-top: 0;
  margin-top: 0;
}

#msmu_wrapper.overview .overview_schedule table p:last-of-type {
  border-bottom: none;
}

#msmu_wrapper.overview .overview_schedule table p:only-of-type {
  margin-bottom: 0 !important;
}

#msmu_wrapper.overview .overview_schedule table tr td ul li:after,
#msmu_wrapper.overview .overview_schedule table tr td ul li:before {
  border: 0 solid #ffffff !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/*
=======================
SECTION: BOTTOM: STUDENT LEARNING OBJECTIVES
=======================
*/
#msmu_wrapper .bottom_container {
  background-color: #553377;
  padding: 20px;
  color: #ffffff;
}

#msmu_wrapper .bottom_container h3 {
  color: #FFFFFF;
}

#msmu_wrapper .bottom_container ul {
  color: #FFFFFF;
  margin: 18px 10px 20px;
}

/*
=======================
SECTION: DISCUSSION - Deadlines
=======================
*/
#msmu_wrapper.discussion .discussion_schedule table {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: none;
  margin: 0;
  padding: 0;
}

#msmu_wrapper.discussion .discussion_schedule table tr:not(:last-child) {
  border-bottom: 1px #9C7FB3 solid;
}

#msmu_wrapper.discussion .discussion_schedule table tr td {
  padding: 10px 4px;
}

#msmu_wrapper.discussion .discussion_schedule table tr td:nth-child(1) {
  font-size: 1.00rem;
  color: #000000;
  padding: 2px 6px;
  width: 110px;
  overflow: hidden;
}

#msmu_wrapper.discussion .discussion_schedule table tr td:nth-child(2) {
  font-size: 1.00rem;
  color: #000000;
  width: 70px;
}

/*
 =======================
 SECTION: DISCUSSION - Guidelines: Horizontal lines
 =======================
 */
.guidelines ul hr {
  border: 0;
  border-top: 1px solid #C1C1C1;
  padding-bottom: 16px;
}

/*
=======================
ACTIVITY: BOOK
=======================
*/
#msmu_wrapper.activity .top_container ~ .grid {
  margin: 2rem 0 0;
}

/*#msmu_wrapper.activity .grid:nth-of-type(2n+3){
    margin: 0 0 6rem 0;
}*/
#msmu_wrapper.activity .grid:last-of-type {
  margin: 0;
}

#msmu_wrapper .cover_wrapper,
#msmu_wrapper.activity .col-1-4 {
  width: 200px;
  flex-basis: 200px;
  -webkit-flex-basis: 200px;
  max-width: 200px;
}

#msmu_wrapper .book_container .col-md {
  flex-basis: auto;
}

#msmu_wrapper .book_container .image,
#msmu_wrapper .item_container .image,
.book,
.item {
  display: inline-block;
  margin: 10px;
}

#msmu_wrapper .book_container .cover_container,
#msmu_wrapper .item_container .cover_container,
.book_cover,
.item_cover {
  padding-left: 20px !important;
  -moz-perspective: 100px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  margin-bottom: 10px;
}

#msmu_wrapper .book_container .image,
.book {
  position: relative;
  -moz-perspective: 100px;
  -moz-transform: rotateY(-3deg);
  -webkit-transform: perspective(100) rotateY(-3deg);
  outline: 1px solid transparent;
  /* Helps smooth jagged edges in Firefox */
  box-shadow: none;
  margin: 0;
}

/*creates front cover thickness*/
#msmu_wrapper .book_container .image img,
#msmu_wrapper .item_container .image img,
.book img,
.item img {
  position: relative;
  max-width: 100%;
  border-right: 2px solid #d7d0e5;
  vertical-align: middle;
  width: 130px;
  height: auto;
}

#msmu_wrapper .book_container .image:after,
#msmu_wrapper .book_container .image:before,
.book:after,
.book:before,
.image:after,
.image:before {
  position: absolute;
  top: 2%;
  height: 96%;
  content: ' ';
  z-index: -1;
}

/*creates back cover color*/
#msmu_wrapper .book_container .image:before,
.book:before {
  width: 100%;
  left: 7.5%;
  background-color: #514e5c;
}

/*creates book shadow*/
#msmu_wrapper .book_container .cover_container::after,
.book_cover::after {
  content: ' ';
  position: absolute;
  z-index: -10;
  background-color: rgba(81, 78, 92, 0.1);
  bottom: -10px;
  left: 25px;
  right: 0;
  max-width: 160px;
  height: 25px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  transform: rotateX(45deg) rotateZ(4deg) translateZ(0px) translateX(0px) translateY(0px);
}

/*create inside pages and it's shadows*/
#msmu_wrapper .book_container .image:after,
.book:after {
  width: 5%;
  left: 100%;
  background-color: #EFEFEF;
  box-shadow: inset 0 0 5px #AAAAAA;
  -moz-transform: rotateY(20deg);
  -webkit-transform: perspective(100) rotateY(20deg);
}

/*SYLLABUS BOOK*/
/* */
/* */
#msmu_wrapper.syllabus .col-1-4 {
  width: 190px;
}

/*BOOK INFORMATION */
/* */
/* */
#msmu_wrapper .book_information h4,
#msmu_wrapper .information h4,
#msmu_wrapper .item_information h4,
#msmu_wrapper.syllabus .book_information h6,
#msmu_wrapper.syllabus .item_information h6 {
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.6rem;
}

#msmu_wrapper .information h4,
#msmu_wrapper .item_information h4,
#msmu_wrapper.syllabus .item_information h6 {
  padding-top: 0.8rem;
}

.book_information p,
.information p,
.item_information p {
  line-height: 1em;
  margin: 0 0 0 20px !important;
}

.book_information p:first-of-type,
.information p:first-of-type,
.item_information p:first-of-type {
  margin: 0 !important;
}

.book_information p a,
.book_information p a:link,
.book_information p a:visited,
.information p a,
.information p a:link,
.information p a:visited,
.item_information p a,
.item_information p a:link,
.item_information p a:visited {
  color: #553377;
  background-color: #FFFFFF;
  text-decoration: none;
  padding: 2px 6px;
  border: 1px solid #553377;
  border-radius: 4px;
  margin: 0;
  display: inline-block;
  /*todo:add this effect to all buttons on the system*/
  -webkit-transition: background 0.15s linear;
  -moz-transition: background 0.15s linear;
  -ms-transition: background 0.15s linear;
  -o-transition: background 0.15s linear;
  transition: background 0.15s linear;
}

.book_information p a:last-of-type,
.information p a:last-of-type,
.item_information p a:last-of-type {
  margin-bottom: 2rem;
}

.book_information p a:active,
.book_information p a:hover,
.information p a:active,
.information p a:hover,
.item_information p a:active,
.item_information p a:hover {
  background-color: #553377;
  color: #FFFFFF;
}

/*----------------------
Numbered Lists
-----------------------*/
#msmu_wrapper .instructions ol,
#msmu_wrapper.content ol {
  list-style: none;
  /* Remove default numbering */
  list-style: decimal;
  /* Keep using default numbering for IE6/7 */
}

#msmu_wrapper .instructions ol ol,
#msmu_wrapper .instructions ol ul,
#msmu_wrapper .instructions ul ol,
#msmu_wrapper .instructions ul ul,
#msmu_wrapper.content ol ol,
#msmu_wrapper.content ol ul,
#msmu_wrapper.content ul ol,
#msmu_wrapper.content ul ul {
  margin: 0;
}

#msmu_wrapper .instructions ol li,
#msmu_wrapper.content ol li {
  position: relative;
  display: block;
  margin: 0.5em 0 0.5em 24px;
  text-decoration: none;
}

#msmu_wrapper .instructions ol > li:before,
#msmu_wrapper.content ol > li:before {
  content: counter(number_counter);
  counter-increment: number_counter;
  position: absolute;
  left: -34px;
  top: 0;
  background: #553377;
  color: #FFFFFF;
  height: 18px;
  width: 18px;
  line-height: 1.8em;
  text-align: center;
  border-radius: 1.5em;
  font-size: 0.70em;
}

#msmu_wrapper .instructions ol ol > li:before,
#msmu_wrapper.content ol ol > li:before {
  content: counter(number_counter_embedded);
  counter-increment: number_counter_embedded;
  position: absolute;
  top: 0.4em;
  background: #553377;
  color: #FFFFFF;
  height: 1.5em;
  width: 1.5em;
  line-height: 1.5em;
  text-align: center;
  border-radius: 6px;
  font-size: 1em;
}

/*Reset counter*/
#msmu_wrapper .instructions ol ol,
#msmu_wrapper.content ol ol {
  counter-reset: number_counter_embedded;
}

#msmu_wrapper .instructions h1,
#msmu_wrapper .instructions h2,
#msmu_wrapper .instructions h3,
#msmu_wrapper .instructions h4,
#msmu_wrapper .instructions h5,
#msmu_wrapper .instructions h6,
#msmu_wrapper.content h1,
#msmu_wrapper.content h2,
#msmu_wrapper.content h3,
#msmu_wrapper.content h4,
#msmu_wrapper.content h5,
#msmu_wrapper.content h6 {
  counter-reset: number_counter !important;
}

#msmu_wrapper.activity .instructions,
#msmu_wrapper.discussion .middle_container {
  align-items: stretch !important;
}

#msmu_wrapper.activity .highlight {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right: none;
}

#msmu_wrapper.activity .parameters {
  background-color: #553377;
  border-right: 1px #AAAAAA solid;
  color: #FFFFFF;
  padding: 14px 20px 10px 10px;
}

#msmu_wrapper .parameters h4 {
  color: #ffffff;
  padding-left: 15px;
}

#msmu_wrapper .parameters a {
  color: #9D7CB3;
}

/* ENHANCEMENTS
==================*/
/* ASSIGNMENTS: Adjust Height Dynamically */
/*#assignment_show .description.teacher-version {
  height: inherit;
}*/



/*add white top container to the nav logo background*/
.ic-app-header__logomark-container {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  height: 85px;
  background: linear-gradient(to bottom, white, white 40px, transparent 40px, transparent);
  background-size: 100% 85px;
}

/*CONTENT PAGE: Change all buttons to be purple*/
.Button--success,
.btn-published,
.btn-success {
  background-color: #775599;
}

.Button--success:hover,
.btn-published,
.btn-published:hover,
.btn-success:hover {
  background-color: #553377;
}

/* MEDIA QUERIES
---------------- */
@media only screen and (max-width: 768px) {
  #msmu_wrapper [class*="col-"] {
    width: 100%;
    display: table-row;
  }
}

/*
Set Back-up Background Color
*/
.m_masthead {
  background-color: #0a0a15;
  height: 200px;
  text-align: center;
  color: #ffffff;
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 12px;
  position: relative;
  /*so we can position the children*/
  background-image: -webkit-gradient(radial, 50% 50%, 36, 50% 50%, 40, from(rgba(150, 111, 195, 0.2)), color-stop(0.3, rgba(150, 111, 195, 0.3)), to(transparent)), -webkit-gradient(radial, 50% 50%, 16, 50% 50%, 20, from(rgba(224, 124, 203, 0.1)), color-stop(0.2, rgba(224, 124, 203, 0.2)), to(transparent)), -webkit-gradient(radial, 50% 50%, 16, 50% 50%, 20, from(rgba(224, 124, 203, 0.1)), color-stop(0.2, rgba(224, 124, 203, 0.2)), to(transparent)), -webkit-gradient(radial, 50% 50%, 38, 50% 50%, 46, from(rgba(145, 75, 113, 0.3)), color-stop(0.3, rgba(145, 75, 113, 0.4)), to(transparent)), -webkit-gradient(radial, 50% 50%, 20, 50% 50%, 80, from(rgba(145, 75, 113, 0)), color-stop(0.3, rgba(145, 75, 113, 0.2)), to(transparent)), -webkit-gradient(radial, 50% 50%, 30, 50% 50%, 90, from(rgba(145, 75, 113, 0)), color-stop(0.5, rgba(145, 75, 113, 0.2)), to(transparent)), -webkit-gradient(radial, 50% 50%, 30, 50% 50%, 50, from(rgba(37, 85, 79, 0.2)), color-stop(0.2, rgba(37, 85, 79, 0.3)), to(transparent)), -webkit-gradient(radial, 50% 50%, 16, 50% 50%, 20, from(rgba(37, 85, 79, 0.2)), color-stop(0.2, rgba(37, 85, 79, 0.3)), to(transparent)), -webkit-gradient(radial, 50% 50%, 26, 50% 50%, 30, from(rgba(37, 85, 79, 0.2)), color-stop(0.2, rgba(37, 85, 79, 0.3)), to(transparent)), -webkit-gradient(radial, 50% 50%, 36, 50% 50%, 40, from(rgba(37, 85, 79, 0.3)), color-stop(0.2, rgba(37, 85, 79, 0.4)), to(transparent)), -webkit-gradient(radial, 50% 50%, 30, 50% 50%, 50, from(rgba(114, 209, 244, 0.1)), color-stop(0.2, rgba(114, 209, 244, 0.1)), to(transparent)), -webkit-gradient(radial, 50% 50%, 16, 50% 50%, 20, from(rgba(114, 209, 244, 0.1)), color-stop(0.2, rgba(114, 209, 244, 0.2)), to(transparent)), -webkit-gradient(radial, 50% 50%, 26, 50% 50%, 30, from(rgba(114, 209, 244, 0.1)), color-stop(0.2, rgba(114, 209, 244, 0.2)), to(transparent)), -webkit-gradient(radial, 50% 50%, 36, 50% 50%, 40, from(rgba(114, 209, 244, 0.2)), color-stop(0.2, rgba(114, 209, 244, 0.3)), to(transparent));
  background-image: -webkit-radial-gradient(circle contain, rgba(150, 111, 195, 0.2) 36px, rgba(150, 111, 195, 0.3) 38px, transparent 40px), -webkit-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), -webkit-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), -webkit-radial-gradient(circle contain, rgba(145, 75, 113, 0.2) 38px, rgba(145, 75, 113, 0.3) 41px, transparent 46px), -webkit-radial-gradient(circle contain, rgba(145, 75, 113, 0) 20px, rgba(145, 75, 113, 0.2) 38px, transparent 80px), -webkit-radial-gradient(circle contain, rgba(145, 75, 113, 0) 30px, rgba(145, 75, 113, 0.2) 60px, transparent 90px), -webkit-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 30px, rgba(37, 85, 79, 0.3) 34px, transparent 50px), -webkit-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 16px, rgba(37, 85, 79, 0.3) 17px, transparent 20px), -webkit-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 26px, rgba(37, 85, 79, 0.3) 27px, transparent 30px), -webkit-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 36px, rgba(37, 85, 79, 0.3) 37px, transparent 40px), -webkit-radial-gradient(circle contain, rgba(114, 209, 244, 0.1) 30px, rgba(114, 209, 244, 0.1) 34px, transparent 50px), -webkit-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 16px, rgba(114, 209, 244, 0.3) 17px, transparent 20px), -webkit-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 26px, rgba(114, 209, 244, 0.3) 27px, transparent 30px), -webkit-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 36px, rgba(114, 209, 244, 0.3) 37px, transparent 40px);
  background-image: -moz-radial-gradient(circle contain, rgba(150, 111, 195, 0.2) 36px, rgba(150, 111, 195, 0.3) 38px, transparent 40px), -moz-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), -moz-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), -moz-radial-gradient(circle contain, rgba(145, 75, 113, 0.2) 38px, rgba(145, 75, 113, 0.3) 41px, transparent 46px), -moz-radial-gradient(circle contain, rgba(145, 75, 113, 0) 20px, rgba(145, 75, 113, 0.2) 38px, transparent 80px), -moz-radial-gradient(circle contain, rgba(145, 75, 113, 0) 30px, rgba(145, 75, 113, 0.2) 60px, transparent 90px), -moz-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 30px, rgba(37, 85, 79, 0.3) 34px, transparent 50px), -moz-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 16px, rgba(37, 85, 79, 0.3) 17px, transparent 20px), -moz-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 26px, rgba(37, 85, 79, 0.3) 27px, transparent 30px), -moz-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 36px, rgba(37, 85, 79, 0.3) 37px, transparent 40px), -moz-radial-gradient(circle contain, rgba(114, 209, 244, 0.1) 30px, rgba(114, 209, 244, 0.1) 34px, transparent 50px), -moz-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 16px, rgba(114, 209, 244, 0.3) 17px, transparent 20px), -moz-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 26px, rgba(114, 209, 244, 0.3) 27px, transparent 30px), -moz-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 36px, rgba(114, 209, 244, 0.3) 37px, transparent 40px);
  background-image: -o-radial-gradient(circle contain, rgba(150, 111, 195, 0.2) 36px, rgba(150, 111, 195, 0.3) 38px, transparent 40px), -o-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), -o-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), -o-radial-gradient(circle contain, rgba(145, 75, 113, 0.2) 38px, rgba(145, 75, 113, 0.3) 41px, transparent 46px), -o-radial-gradient(circle contain, rgba(145, 75, 113, 0) 20px, rgba(145, 75, 113, 0.2) 38px, transparent 80px), -o-radial-gradient(circle contain, rgba(145, 75, 113, 0) 30px, rgba(145, 75, 113, 0.2) 60px, transparent 90px), -o-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 30px, rgba(37, 85, 79, 0.3) 34px, transparent 50px), -o-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 16px, rgba(37, 85, 79, 0.3) 17px, transparent 20px), -o-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 26px, rgba(37, 85, 79, 0.3) 27px, transparent 30px), -o-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 36px, rgba(37, 85, 79, 0.3) 37px, transparent 40px), -o-radial-gradient(circle contain, rgba(114, 209, 244, 0.1) 30px, rgba(114, 209, 244, 0.1) 34px, transparent 50px), -o-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 16px, rgba(114, 209, 244, 0.3) 17px, transparent 20px), -o-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 26px, rgba(114, 209, 244, 0.3) 27px, transparent 30px), -o-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 36px, rgba(114, 209, 244, 0.3) 37px, transparent 40px);
  background-image: radial-gradient(circle contain, rgba(150, 111, 195, 0.2) 36px, rgba(150, 111, 195, 0.3) 38px, transparent 40px), radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), radial-gradient(circle contain, rgba(145, 75, 113, 0.2) 38px, rgba(145, 75, 113, 0.3) 41px, transparent 46px), radial-gradient(circle contain, rgba(145, 75, 113, 0) 20px, rgba(145, 75, 113, 0.2) 38px, transparent 80px), radial-gradient(circle contain, rgba(145, 75, 113, 0) 30px, rgba(145, 75, 113, 0.2) 60px, transparent 90px), radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 30px, rgba(37, 85, 79, 0.3) 34px, transparent 50px), radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 16px, rgba(37, 85, 79, 0.3) 17px, transparent 20px), radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 26px, rgba(37, 85, 79, 0.3) 27px, transparent 30px), radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 36px, rgba(37, 85, 79, 0.3) 37px, transparent 40px), radial-gradient(circle contain, rgba(114, 209, 244, 0.1) 30px, rgba(114, 209, 244, 0.1) 34px, transparent 50px), radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 16px, rgba(114, 209, 244, 0.3) 17px, transparent 20px), radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 26px, rgba(114, 209, 244, 0.3) 27px, transparent 30px), radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 36px, rgba(114, 209, 244, 0.3) 37px, transparent 40px);
  -moz-background-size: 300px 300px;
  background-size: 300px 300px;
  background-position: 30px -5px, 80px -70px, 10px -40px, 50px -50px, 20px -80px, 60px -10px, -50px -60px, -60px -20px, -80px -80px, -160px -30px, 20px -30px, 130px -60px, 180px -40px, 180px 0;
}

.m_masthead h1 {
  display: inline-block;
  margin: 61px 0;
  padding: 10px 14px 5px;
  background-color: rgba(85, 51, 119, 0.6);
  line-height: 16px;
}

.m_masthead h1 span {
  display: block;
}

.m_masthead h1 .prefix {
  font-size: 14px;
  color: #D9D5E2;
}

.m_masthead h1 .primary {
  font-weight: bold;
  font-size: 54px;
  line-height: 50px;
  color: #ffffff;
}

.m_masthead h1 .primary:after,
.m_masthead h1 .primary:before {
  font-family: 'Quattrocento', serif;
  font-weight: normal;
  color: #D1D3D4;
  font-size: 60px;
}

.m_masthead h1 .primary:before {
  content: "{";
  padding-right: 8px;
}

.m_masthead h1 .primary:after {
  content: "}";
  padding-left: 8px;
}

.m_masthead .details {
  font-size: 12px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  color: #B5B0BF;
}

.m_masthead .details .dueDate,
.m_masthead .details .points {
  position: absolute;
  bottom: 0;
  padding: 15px;
}

.m_masthead .details .points {
  left: 0;
}

.m_masthead .details .dueDate {
  right: 0;
}

.m_masthead.discussion {
  background-color: #2f030b;
}

.m_masthead.activity {
  background-color: #012229;
}

.m_masthead.content {
  background-color: #1f1b05;
}

/*-------------------------------------
| If the browser does not support gradients, degrade gracefully
-------------------------------------*/
.no-cssgradients .m_masthead {
  background: #131123 url(data:image/svg+xml;base64,H4sICBWwZk0AA2Jva2VoLnN2ZwC9lmtuozAUhf9nFZZHlRIpAV%2BDgVY4lUYjdQGzAkocQEOhMiRkdj82xIzCI30o7R9jlPicz%2FceW4SPp5ccHYWssrLgGCyCH7eLsDomqMl2dcoxIwSjVGRJWnPs6Be1oqg4Tuv69cG2m6axGscqZWJTQoitluLtYoHCndhX2wVC4T7LayFRtuP4OT9I%2BC%2BnFtxhY9S9%2FOV4w%2FTkdJ5oCaUhnqJDVWVR8VNJoKre%2FRLHLKo7aowy9fhdHmQsnmT0mmYxtltvuzOf4mA352Cf4vBvzuG%2Fg0M1yO46pGYJqmVUVPtSvnDcTvOoFksKZI3AIyuM1LKc46IsRNtcFMaZjHOBpMpEgFF80tlQzxYXKx5Z%2FhEcy%2BQ5WgLTMgBquGdrRCxnZf6xMXttHRQYxweZL3%2B0Oeltp1Wo%2Bt0ewoDfwQQGxicDGkpdJaEHShytw0Y0FnsbZyQDHc4ljdfRgKFxv53mEsiFDoj1vRoCgauK6zNdaufzvZoQGdbGxIYalODjKLquIxZ%2FhYdeHum8POMFb3nRCTNn1mywM7dz2%2FRV9oZ2jr9GgXa8N0m%2B9JqyGtT4UgLYVPzOh2HT75teB4EvAqEGJJht9veAOAYE%2BpI410nGOfgwCZ0%2BiyYmdJYEoD3QSoS67nRZpu4GNj4AJgngzEbyHWZwvorya0vmeg%2FB7CV4C2tyrd2995ds%2Buwc2oke1PfP9h%2F9egCnVgkAAA%3D%3D), url("data:image/svg+xml;base64,H4sICBWwZk0AA2Jva2VoLnN2ZwC9lmtuozAUhf9nFZZHlRIpAV%2BDgVY4lUYjdQGzAkocQEOhMiRkdj82xIzCI30o7R9jlPicz%2FceW4SPp5ccHYWssrLgGCyCH7eLsDomqMl2dcoxIwSjVGRJWnPs6Be1oqg4Tuv69cG2m6axGscqZWJTQoitluLtYoHCndhX2wVC4T7LayFRtuP4OT9I%2BC%2BnFtxhY9S9%2FOV4w%2FTkdJ5oCaUhnqJDVWVR8VNJoKre%2FRLHLKo7aowy9fhdHmQsnmT0mmYxtltvuzOf4mA352Cf4vBvzuG%2Fg0M1yO46pGYJqmVUVPtSvnDcTvOoFksKZI3AIyuM1LKc46IsRNtcFMaZjHOBpMpEgFF80tlQzxYXKx5Z%2FhEcy%2BQ5WgLTMgBquGdrRCxnZf6xMXttHRQYxweZL3%2B0Oeltp1Wo%2Bt0ewoDfwQQGxicDGkpdJaEHShytw0Y0FnsbZyQDHc4ljdfRgKFxv53mEsiFDoj1vRoCgauK6zNdaufzvZoQGdbGxIYalODjKLquIxZ%2FhYdeHum8POMFb3nRCTNn1mywM7dz2%2FRV9oZ2jr9GgXa8N0m%2B9JqyGtT4UgLYVPzOh2HT75teB4EvAqEGJJht9veAOAYE%2BpI410nGOfgwCZ0%2BiyYmdJYEoD3QSoS67nRZpu4GNj4AJgngzEbyHWZwvorya0vmeg%2FB7CV4C2tyrd2995ds%2Buwc2oke1PfP9h%2F9egCnVgkAAA%3D%3D") repeat 180px 0, -155px 0;
  background-size: auto;
  text-align: center;
}

/*-------------------------------------
| Layout Flag
-------------------------------------*/
div.layout2C {
  height: 0;
  font-size: 0;
  margin: 0;
  padding: 0;
}

/*-------------------------------------
| Layout Enhancements
-------------------------------------*/
/* MODULES: Add Emphasis to Title items*/
.ig-published span.title.locked_title {
  color: black;
}

/*MODULES: Change all published items' icon to be purple*/
.ig-list .ig-row.ig-published .ig-title,
.ig-published .published-status.published,
.publish-icon.publish-icon-published {
  color: #7C539A !important;
}

/* published item icon::change green background color to purple */
/* Published item: change left green border to purple*/
.ig-list .ig-row.ig-published:before {
  background-color: #7C539A !important;
}

.ig-published:not(.student-view) .ig-type-icon {
  color: #ff6c00 !important;
  background-color: transparent !important;
}

/* Unpublished item: change to lighter grey*/
.ig-list .ig-row a.ig-title {
  color: #666;
}

/*CONTENT PAGE: Change all buttons to be purple*/
.Button--success,
.btn-published,
.btn-success {
  background-color: #553377 !important;
}

.Button--success:hover,
.btn-published,
.btn-published:hover,
.btn-success:hover {
  background-color: #553377 !important;
}

/* reduce Discussion padding */
@-moz-document url-prefix() {
  .discussion-section {
    padding: 4px 0 3px 0 !important;
  }
}

/*-------------------------------------
| Canvas Body Classes Page Specific
| syllabus, discussions, assignments, pages, home, grades
-------------------------------------*/
.mm {
  padding: 10px;
}

.mm a {
  display: inline-block;
  background-color: #90E5FF;
  width: 150px;
  line-height: 50px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
  color: #162529;
  border-radius: 5px;
  text-align: center;
  margin-right: 10px;
}

.mm a:hover {
  background-color: #59F2FF;
}

.mm a.chosen {
  background-color: #FFCC49;
}

/*-------------------------------------
| Header Styles
-------------------------------------*/
.m_masthead {
  background-color: #0a0a15;
  height: 200px;
  text-align: center;
  color: #ffffff;
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 12px;
  position: relative;
  /*so we can position the children*/
  background-image: -webkit-gradient(radial, 50% 50%, 36, 50% 50%, 40, from(rgba(150, 111, 195, 0.2)), color-stop(0.3, rgba(150, 111, 195, 0.3)), to(transparent)), -webkit-gradient(radial, 50% 50%, 16, 50% 50%, 20, from(rgba(224, 124, 203, 0.1)), color-stop(0.2, rgba(224, 124, 203, 0.2)), to(transparent)), -webkit-gradient(radial, 50% 50%, 16, 50% 50%, 20, from(rgba(224, 124, 203, 0.1)), color-stop(0.2, rgba(224, 124, 203, 0.2)), to(transparent)), -webkit-gradient(radial, 50% 50%, 38, 50% 50%, 46, from(rgba(145, 75, 113, 0.3)), color-stop(0.3, rgba(145, 75, 113, 0.4)), to(transparent)), -webkit-gradient(radial, 50% 50%, 20, 50% 50%, 80, from(rgba(145, 75, 113, 0)), color-stop(0.3, rgba(145, 75, 113, 0.2)), to(transparent)), -webkit-gradient(radial, 50% 50%, 30, 50% 50%, 90, from(rgba(145, 75, 113, 0)), color-stop(0.5, rgba(145, 75, 113, 0.2)), to(transparent)), -webkit-gradient(radial, 50% 50%, 30, 50% 50%, 50, from(rgba(37, 85, 79, 0.2)), color-stop(0.2, rgba(37, 85, 79, 0.3)), to(transparent)), -webkit-gradient(radial, 50% 50%, 16, 50% 50%, 20, from(rgba(37, 85, 79, 0.2)), color-stop(0.2, rgba(37, 85, 79, 0.3)), to(transparent)), -webkit-gradient(radial, 50% 50%, 26, 50% 50%, 30, from(rgba(37, 85, 79, 0.2)), color-stop(0.2, rgba(37, 85, 79, 0.3)), to(transparent)), -webkit-gradient(radial, 50% 50%, 36, 50% 50%, 40, from(rgba(37, 85, 79, 0.3)), color-stop(0.2, rgba(37, 85, 79, 0.4)), to(transparent)), -webkit-gradient(radial, 50% 50%, 30, 50% 50%, 50, from(rgba(114, 209, 244, 0.1)), color-stop(0.2, rgba(114, 209, 244, 0.1)), to(transparent)), -webkit-gradient(radial, 50% 50%, 16, 50% 50%, 20, from(rgba(114, 209, 244, 0.1)), color-stop(0.2, rgba(114, 209, 244, 0.2)), to(transparent)), -webkit-gradient(radial, 50% 50%, 26, 50% 50%, 30, from(rgba(114, 209, 244, 0.1)), color-stop(0.2, rgba(114, 209, 244, 0.2)), to(transparent)), -webkit-gradient(radial, 50% 50%, 36, 50% 50%, 40, from(rgba(114, 209, 244, 0.2)), color-stop(0.2, rgba(114, 209, 244, 0.3)), to(transparent));
  background-image: -webkit-radial-gradient(circle contain, rgba(150, 111, 195, 0.2) 36px, rgba(150, 111, 195, 0.3) 38px, transparent 40px), -webkit-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), -webkit-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), -webkit-radial-gradient(circle contain, rgba(145, 75, 113, 0.2) 38px, rgba(145, 75, 113, 0.3) 41px, transparent 46px), -webkit-radial-gradient(circle contain, rgba(145, 75, 113, 0) 20px, rgba(145, 75, 113, 0.2) 38px, transparent 80px), -webkit-radial-gradient(circle contain, rgba(145, 75, 113, 0) 30px, rgba(145, 75, 113, 0.2) 60px, transparent 90px), -webkit-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 30px, rgba(37, 85, 79, 0.3) 34px, transparent 50px), -webkit-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 16px, rgba(37, 85, 79, 0.3) 17px, transparent 20px), -webkit-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 26px, rgba(37, 85, 79, 0.3) 27px, transparent 30px), -webkit-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 36px, rgba(37, 85, 79, 0.3) 37px, transparent 40px), -webkit-radial-gradient(circle contain, rgba(114, 209, 244, 0.1) 30px, rgba(114, 209, 244, 0.1) 34px, transparent 50px), -webkit-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 16px, rgba(114, 209, 244, 0.3) 17px, transparent 20px), -webkit-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 26px, rgba(114, 209, 244, 0.3) 27px, transparent 30px), -webkit-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 36px, rgba(114, 209, 244, 0.3) 37px, transparent 40px);
  background-image: -moz-radial-gradient(circle contain, rgba(150, 111, 195, 0.2) 36px, rgba(150, 111, 195, 0.3) 38px, transparent 40px), -moz-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), -moz-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), -moz-radial-gradient(circle contain, rgba(145, 75, 113, 0.2) 38px, rgba(145, 75, 113, 0.3) 41px, transparent 46px), -moz-radial-gradient(circle contain, rgba(145, 75, 113, 0) 20px, rgba(145, 75, 113, 0.2) 38px, transparent 80px), -moz-radial-gradient(circle contain, rgba(145, 75, 113, 0) 30px, rgba(145, 75, 113, 0.2) 60px, transparent 90px), -moz-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 30px, rgba(37, 85, 79, 0.3) 34px, transparent 50px), -moz-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 16px, rgba(37, 85, 79, 0.3) 17px, transparent 20px), -moz-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 26px, rgba(37, 85, 79, 0.3) 27px, transparent 30px), -moz-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 36px, rgba(37, 85, 79, 0.3) 37px, transparent 40px), -moz-radial-gradient(circle contain, rgba(114, 209, 244, 0.1) 30px, rgba(114, 209, 244, 0.1) 34px, transparent 50px), -moz-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 16px, rgba(114, 209, 244, 0.3) 17px, transparent 20px), -moz-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 26px, rgba(114, 209, 244, 0.3) 27px, transparent 30px), -moz-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 36px, rgba(114, 209, 244, 0.3) 37px, transparent 40px);
  background-image: -o-radial-gradient(circle contain, rgba(150, 111, 195, 0.2) 36px, rgba(150, 111, 195, 0.3) 38px, transparent 40px), -o-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), -o-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), -o-radial-gradient(circle contain, rgba(145, 75, 113, 0.2) 38px, rgba(145, 75, 113, 0.3) 41px, transparent 46px), -o-radial-gradient(circle contain, rgba(145, 75, 113, 0) 20px, rgba(145, 75, 113, 0.2) 38px, transparent 80px), -o-radial-gradient(circle contain, rgba(145, 75, 113, 0) 30px, rgba(145, 75, 113, 0.2) 60px, transparent 90px), -o-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 30px, rgba(37, 85, 79, 0.3) 34px, transparent 50px), -o-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 16px, rgba(37, 85, 79, 0.3) 17px, transparent 20px), -o-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 26px, rgba(37, 85, 79, 0.3) 27px, transparent 30px), -o-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 36px, rgba(37, 85, 79, 0.3) 37px, transparent 40px), -o-radial-gradient(circle contain, rgba(114, 209, 244, 0.1) 30px, rgba(114, 209, 244, 0.1) 34px, transparent 50px), -o-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 16px, rgba(114, 209, 244, 0.3) 17px, transparent 20px), -o-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 26px, rgba(114, 209, 244, 0.3) 27px, transparent 30px), -o-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 36px, rgba(114, 209, 244, 0.3) 37px, transparent 40px);
  background-image: radial-gradient(circle contain, rgba(150, 111, 195, 0.2) 36px, rgba(150, 111, 195, 0.3) 38px, transparent 40px), radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px), radial-gradient(circle contain, rgba(145, 75, 113, 0.2) 38px, rgba(145, 75, 113, 0.3) 41px, transparent 46px), radial-gradient(circle contain, rgba(145, 75, 113, 0) 20px, rgba(145, 75, 113, 0.2) 38px, transparent 80px), radial-gradient(circle contain, rgba(145, 75, 113, 0) 30px, rgba(145, 75, 113, 0.2) 60px, transparent 90px), radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 30px, rgba(37, 85, 79, 0.3) 34px, transparent 50px), radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 16px, rgba(37, 85, 79, 0.3) 17px, transparent 20px), radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 26px, rgba(37, 85, 79, 0.3) 27px, transparent 30px), radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 36px, rgba(37, 85, 79, 0.3) 37px, transparent 40px), radial-gradient(circle contain, rgba(114, 209, 244, 0.1) 30px, rgba(114, 209, 244, 0.1) 34px, transparent 50px), radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 16px, rgba(114, 209, 244, 0.3) 17px, transparent 20px), radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 26px, rgba(114, 209, 244, 0.3) 27px, transparent 30px), radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 36px, rgba(114, 209, 244, 0.3) 37px, transparent 40px);
  -moz-background-size: 300px 300px;
  background-size: 300px 300px;
  background-position: 30px -5px, 80px -70px, 10px -40px, 50px -50px, 20px -80px, 60px -10px, -50px -60px, -60px -20px, -80px -80px, -160px -30px, 20px -30px, 130px -60px, 180px -40px, 180px 0;
}

.m_masthead h1 {
  font-family: 'Josefin Sans', sans-serif;
  display: inline-block;
  margin: 71px 0 0;
  padding: 10px 14px 5px;
  background-color: rgba(85, 51, 119, 0.6);
  line-height: 16px;
}

.m_masthead h1 span {
  display: block;
}

.m_masthead h1 .prefix {
  font-size: 14px;
  color: #D9D5E2;
}

.m_masthead h1 .primary {
  font-weight: bold;
  font-size: 54px;
  line-height: 50px;
  color: #ffffff;
}

.m_masthead h1 .primary:after, .m_masthead h1 .primary:before {
  font-family: 'Quattrocento', serif;
  font-weight: normal;
  color: #D1D3D4;
  font-size: 60px;
}

.m_masthead h1 .primary:before {
  content: "{";
  padding-right: 8px;
}

.m_masthead h1 .primary:after {
  content: "}";
  padding-left: 8px;
}

.m_masthead .details {
  font-size: 12px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  color: #B5B0BF;
}

.m_masthead .details .dueDate,
.m_masthead .details .points {
  position: absolute;
  bottom: 0;
  padding: 15px;
}

.m_masthead .details .points {
  left: 0;
}

.m_masthead .details .dueDate {
  right: 0;
}

.m_masthead.discussion {
  background-color: #2f030b;
}

.m_masthead.activity {
  background-color: #012229;
}

.m_masthead.content {
  background-color: #1f1b05;
}

/*-------------------------------------
| If the browser does not support gradients, degrade gracefully
-------------------------------------*/
.no-cssgradients .m_masthead {
  background: #131123 url(data:image/svg+xml;base64,H4sICBWwZk0AA2Jva2VoLnN2ZwC9lmtuozAUhf9nFZZHlRIpAV%2BDgVY4lUYjdQGzAkocQEOhMiRkdj82xIzCI30o7R9jlPicz%2FceW4SPp5ccHYWssrLgGCyCH7eLsDomqMl2dcoxIwSjVGRJWnPs6Be1oqg4Tuv69cG2m6axGscqZWJTQoitluLtYoHCndhX2wVC4T7LayFRtuP4OT9I%2BC%2BnFtxhY9S9%2FOV4w%2FTkdJ5oCaUhnqJDVWVR8VNJoKre%2FRLHLKo7aowy9fhdHmQsnmT0mmYxtltvuzOf4mA352Cf4vBvzuG%2Fg0M1yO46pGYJqmVUVPtSvnDcTvOoFksKZI3AIyuM1LKc46IsRNtcFMaZjHOBpMpEgFF80tlQzxYXKx5Z%2FhEcy%2BQ5WgLTMgBquGdrRCxnZf6xMXttHRQYxweZL3%2B0Oeltp1Wo%2Bt0ewoDfwQQGxicDGkpdJaEHShytw0Y0FnsbZyQDHc4ljdfRgKFxv53mEsiFDoj1vRoCgauK6zNdaufzvZoQGdbGxIYalODjKLquIxZ%2FhYdeHum8POMFb3nRCTNn1mywM7dz2%2FRV9oZ2jr9GgXa8N0m%2B9JqyGtT4UgLYVPzOh2HT75teB4EvAqEGJJht9veAOAYE%2BpI410nGOfgwCZ0%2BiyYmdJYEoD3QSoS67nRZpu4GNj4AJgngzEbyHWZwvorya0vmeg%2FB7CV4C2tyrd2995ds%2Buwc2oke1PfP9h%2F9egCnVgkAAA%3D%3D), url("data:image/svg+xml;base64,H4sICBWwZk0AA2Jva2VoLnN2ZwC9lmtuozAUhf9nFZZHlRIpAV%2BDgVY4lUYjdQGzAkocQEOhMiRkdj82xIzCI30o7R9jlPicz%2FceW4SPp5ccHYWssrLgGCyCH7eLsDomqMl2dcoxIwSjVGRJWnPs6Be1oqg4Tuv69cG2m6axGscqZWJTQoitluLtYoHCndhX2wVC4T7LayFRtuP4OT9I%2BC%2BnFtxhY9S9%2FOV4w%2FTkdJ5oCaUhnqJDVWVR8VNJoKre%2FRLHLKo7aowy9fhdHmQsnmT0mmYxtltvuzOf4mA352Cf4vBvzuG%2Fg0M1yO46pGYJqmVUVPtSvnDcTvOoFksKZI3AIyuM1LKc46IsRNtcFMaZjHOBpMpEgFF80tlQzxYXKx5Z%2FhEcy%2BQ5WgLTMgBquGdrRCxnZf6xMXttHRQYxweZL3%2B0Oeltp1Wo%2Bt0ewoDfwQQGxicDGkpdJaEHShytw0Y0FnsbZyQDHc4ljdfRgKFxv53mEsiFDoj1vRoCgauK6zNdaufzvZoQGdbGxIYalODjKLquIxZ%2FhYdeHum8POMFb3nRCTNn1mywM7dz2%2FRV9oZ2jr9GgXa8N0m%2B9JqyGtT4UgLYVPzOh2HT75teB4EvAqEGJJht9veAOAYE%2BpI410nGOfgwCZ0%2BiyYmdJYEoD3QSoS67nRZpu4GNj4AJgngzEbyHWZwvorya0vmeg%2FB7CV4C2tyrd2995ds%2Buwc2oke1PfP9h%2F9egCnVgkAAA%3D%3D") repeat 180px 0, -155px 0;
  background-size: auto;
  text-align: center;
}

/*-------------------------------------
| Canvas Content Styles
-------------------------------------*/
.pages.show .user_content {
  padding-bottom: 50px;
}

ul.upNext, ol.upNext {
  box-shadow: 0px 0px 4px rgba(121, 121, 121, 0.5);
  margin: 50px 0px;
  padding: 0px;
}

ul.upNext:before, ol.upNext:before {
  content: "Where To Go From Here";
  font-size: 1.8em;
  display: block;
  padding: 10px;
}

ul.upNext li, ol.upNext li {
  list-style-type: none;
  padding: 10px;
  border: solid 1px #eee;
  border-top: none;
  border-left: none;
  border-right: none;
}

ul.upNext li:nth-of-type(1), ol.upNext li:nth-of-type(1) {
  border-top: solid 1px #eee;
}

ul.upNext li:hover, ol.upNext li:hover {
  background-color: #fef8ff;
}

ul.upNext li a, ol.upNext li a {
  font-weight: bold;
}

ul.upNext li a strong, ol.upNext li a strong {
  float: none !important;
}

ul.upNext li .fa, ol.upNext li .fa {
  font-size: 20px;
  margin-right: 5px;
}

ul.upNext li b.title, ol.upNext li b.title {
  display: inline-block;
  width: 60px;
  margin-right: 15px;
  display: none;
}

.md ul.upNext li.prevNext, .md ol.upNext li.prevNext {
  height: 25px;
}

.md ul.upNext li.prevNext a, .md ol.upNext li.prevNext a {
  display: block;
}

.md ul.upNext li.prevNext .prev, .md ul.upNext li.prevNext .next, .md ol.upNext li.prevNext .prev, .md ol.upNext li.prevNext .next {
  box-sizing: border-box;
  width: 50%;
  float: left;
}

.md ul.upNext li.prevNext .next, .md ol.upNext li.prevNext .next {
  text-align: right;
}

.md ul.upNext li.prevNext .next .fa, .md ol.upNext li.prevNext .next .fa {
  margin: 0px 0px 0px 5px;
}

.md ul.upNext li.prevNext .next b.title, .md ol.upNext li.prevNext .next b.title {
  margin: 0px 0px 0px 15px;
  width: 30px;
}

/*-------------------------------------
| Mobile Styles
-------------------------------------*/
html.xs {
  background-image: none;
  background-color: #537;
}

html.xs.md {
  background-color: transparent;
}

#f1_container {
  background-image: url(https://instructure-uploads.s3.amazonaws.com/account_30000000000288/attachments/35397011/login_logo_2.svg?AWSAccessKeyId=AKIAJFNFXH2V2O7RPCAA&Expires=1925463612&Signature=DdZEJicrP1h3PF3MC8uyHV3owjM%3D&response-cache-control=Cache-Control%3Amax-age%3D473364000%2C%20public&response-expires=473364000);
  background-repeat: no-repeat;
  background-position: 14px 13px;
  background-size: 65%;
  background-color: #fff;
  padding: 182px 0;
  width: 97%;
  border: 5px solid #9d7cb3;
  border-radius: 5px;
}

#f1_container .face {
  position: static;
}

#f1_container .ic-Form-control .ic-Input {
  width: 100%;
  height: 50px;
  display: block;
  margin-top: 0;
  margin-bottom: 0;
  box-shadow: none;
  box-sizing: border-box;
  transition: all 0.2s ease-out;
  border-width: 1px;
  border-style: solid;
  outline-color: transparent;
  outline-offset: -12px;
  background: #fff;
  padding: 8px 12px;
  -webkit-appearance: none;
  border-color: #d9d9d9;
  outline-style: solid;
  outline-width: 12px;
  font-size: 25px;
}

#f1_container .btn {
  width: 100%;
}

/*-------------------------------------
||
|| Columns
||
-------------------------------------*/
.quad-column .column {
  width: 22.75%;
  float: left;
  margin-right: 3%;
}

.quad-column .column:nth-of-type(4) {
  margin-right: 0px;
}

.tri-column .column {
  width: 31.3333333333%;
  float: left;
  margin-right: 3%;
}

.tri-column .column:nth-of-type(3) {
  margin-right: 0px;
}

/*-------------------------------------
| Success Coach Bios
-------------------------------------*/
.bios .bio img {
  width: 100%;
}

.bios .bio .name {
  font-weight: bold;
  font-size: 20px;
}

/*-------------------------------------
||
|| Step By Step Styles Clarify
||
-------------------------------------*/
#clarify-article-content .rule {
  height: 2px;
  background-color: #eee;
  margin: 30px 0px;
}

#clarify-article-content .rule * {
  display: none;
}

#clarify-article-content .clarify-step-instructions,
#clarify-article-content .clarify-step-image-wrapper {
  margin-left: 50px;
}

#clarify-article-content img {
  max-width: 100% !important;
  height: auto;
}

.clarify-article-description p, .opener {
  background-color: #cde3ef;
  padding: 35px;
  font-size: 30px;
  color: #666;
  margin: 15px 0px 50px;
}

/*-------------------------------------
| Taste of MSMU
-------------------------------------*/
.call-now {
  text-align: center;
}

.call-now h1 {
  font-size: 40px;
  margin: 0px;
  font-weight: bold;
}

.call-now h2 {
  font-size: 30px;
  margin: 0px;
}

.call-now p {
  margin: 0px;
}

#wrapper > .phone {
  position: absolute;
  right: 49px;
  top: 30px;
  font-size: 30px;
  font-weight: bold;
}

@media screen and (max-width: 920px) {
  #wrapper > .phone {
    position: static;
  }
}

/* Programs -------------------------------*/
.flex-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.flex-row .program {
  width: 100%;
  margin-bottom: 15px;
}

.flex-row .program img {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
}

@media screen and (min-width: 800px) {
  .flex-row .program {
    width: 47%;
  }
}

@media screen and (min-width: 1200px) {
  .flex-row .program {
    width: 30%;
  }
}

/*-------------------------------------
| DashBoard All Courses Link
-------------------------------------*/
.ic-DashboardCard.allCourses a {
  display: block;
  height: 279px;
}

.ic-DashboardCard.allCourses a:hover, .ic-DashboardCard.allCourses a:active {
  text-decoration: none;
}

.ic-DashboardCard.allCourses a h1 {
  margin: 0px;
  background-color: #7c539a;
  color: white;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 40px;
  line-height: 37px;
  padding: 36px 15px;
}

.ic-DashboardCard.allCourses a h2 {
  padding: 37px 29px;
  margin: 0px;
  line-height: 100%;
}

.ic-DashboardCard.allCourses a h2 span {
  color: #6c8a9f;
  font-size: 14px;
  line-height: 14px;
  text-align: left;
}

/*-------------------------------------
| Darls Certificate
-------------------------------------*/
.certificate {
    text-align: center;
    margin: 200px 0px;
}


/*-------------------------------------
| Hide Teacher/Parent Registration
-------------------------------------*/

/* Moves Registration Student button on Registration page */
#signup_student {
    right: 155px;
    background-position: 5px -125px;
}

/* Removes Teacher on Registration Page */
a#signup_teacher {
    display: none;
}    
    /* Removes Parent on Registration Page */
a#signup_parent {
    display: none;
}


/*-------------------------------------
| CSS overrides for registration
-------------------------------------*/

a#registration_login{
  display:none;
}

#registration_header h1 a{
      background: url(https://msmu.us/img/MSMU-SingleLine-LA.png) no-repeat !important; 
      width: 300px;
   margin: 0 auto;
      background-size: contain !important;
}

#registration_header {
    background: #fff;
    height: 122px;
    padding-top: 12px;
    color: #fff;
    margin-bottom: -20px;
}

#registration_content {
    background: #fff !important;
     padding-top: 20px;
}

#registration_video {
    display: none !important;
}

#registration_footer{
    color: #fff !important;
}

#registration_footer a{
    color: #fff !important;
}

#registration_options {
    margin: 20px auto 0;
    width: 495px;
    text-align: center;
    padding-top: 200px;
    height: 90px;
    background: transparent url(https://msmu.us/img/SignUpBGN.png) 0 0 no-repeat;
    position: relative;
}

#signup_student {
    outline-width: 0.125rem;
    outline-color: transparent;
    outline-style: solid;
    position: absolute;
    background-image: url(https://msmu.us/img/landing_buttons.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 157px;
    width: 180px;
    height: 65px;
    text-indent: -9999em;
}


/*--------------------------------------------------
| CSS overrides for login page - Hide Register Link
---------------------------------------------------*/

a#register_link{
 display:none;
}













/* ==========================================================================
   //v2.0
   ========================================================================== */


/**
 * ==========================================================================
 *  FAUX DESCRIPTION LIST - UL TO LOOK LIKE A HORIZONTAL DESCRIPTION LIST
 * ========================================================================== 
 *
 * Create your unordered list, and bold the first word/phrase to set as
 * a label. This will automatically format the rest of the line. Cannot 
 * use bold for emphasis outside of the label. Please use italic formatting
 * to provide additional emphasis if needed.
 * 
 * 
 * HOW TO ACTIVATE:
 * --------------------
 * The following [class] needs to be added to a [ul] tag: 
 *
 * msmu_description_list
 *
 */


/* remove the bullet, and indent the list */
ul.msmu_description_list {
    list-style : none;
    margin-left: 0;
    padding-top: 10px;
    margin-left: 200px;
}

/* Set margin for each item inside the list */
ul.msmu_description_list>li {
    margin: 0 0 14px 0;
}

/* Set Label formating */
ul.msmu_description_list>li>strong {
    display      : inline-block;
    min-width    : 200px;
    padding-right: 20px;
    text-align   : right;
    line-height  : 1rem;
    margin-left  : -200px;
}

/* Display one horizontal list on smaller screen devices */
@media only screen and (max-width: 800px) {

    /* Reset the margin to be flushed to the left and center */
    ul.msmu_description_list {
        margin-left: 0;
        text-align : center;
    }

    /* Format each item inside the list */
    ul.msmu_description_list>li {
        margin    : 0 0 14px 0;
        text-align: center;
    }

    /* Format the label inside the list to be displayed on it's own line */
    ul.msmu_description_list>li>strong {
        display      : block;
        clear        : both;
        text-align   : center;
        margin-left  : 0;
        padding-right: 0;
    }
}

/**
 * ==========================================================================
 *  SIDEBAR - THEME: UNSTOPPABLE - HEADING STYLES CLASSES 
 * ========================================================================== 
 *
 * Use these free fonts from Google. 
 * These fonts best resemble our branded fonts. 
 *
 */


/* Custon Heading Fonts  */

.msmu-wrapper-unstoppable h2{
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900 !important;
    font-size: 2.2em !important;
    font-style: normal;
    font-variation-settings:
      "wdth" 100,
      "YTLC" 500;
  }

.msmu-wrapper-unstoppable :is(h3, h4, h5, h6) {
  font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 850 !important;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
}

.msmu-wrapper-unstoppable h3{
    font-size: 1.9em !important;
}

.msmu-wrapper-unstoppable h4{
    font-size: 1.65em !important;
}

.msmu-wrapper-unstoppable h5{
    font-size: 1.4em !important;
}

.msmu-wrapper-unstoppable h6{
    font-size: 1.15em !important;
}

.msmu-wrapper-unstoppable :is(h4, h5, h6){
    margin-top: 1rem;
    margin-right: 0;
    margin-left: 0;
}

/* Removes heading padding on accordoin panels  */
.msmu-wrapper-unstoppable :is(h3.dp-panel-heading, h4.dp-panel-heading, h5.dp-panel-heading, h6.dp-panel-heading){
    margin: 0;
}

/* ==========================================================================
   UNSTOPPABLE THEME: add flex display options
   ========================================================================== */
.msmu_flex_column{ 
  display: flex;
  flex-direction: column; 
}

.msmu_flex_column_reverse{ 
  display: flex;
  flex-direction: column-reverse; 
}

.msmu_flex_row{ 
  display: flex;
  flex-direction: row; 
}

.msmu_flex_row_reverse{ 
  display: flex;
  flex-direction: row-reverse; 
}

/* ==========================================================================
   FIXES: DESIGNPLUS
   ========================================================================== */


/* EXPANDING ACCORDIANS
   ========================================================================== */

/* Expanding Accordians - fix icon color and background-color */
.msmu_wrapper a.kl_panels_expander_toggler>i {
    background: none !important;
    color     : inherit !important;
}

/* Accordian Panel - Display the bottom border and shrink font size */
#kl_wrapper_3.msmu_wrapper .kl_custom_accordion.ui-accordion .ui-accordion-header, #kl_wrapper_3.msmu_wrapper .kl_panels_accordion.ui-accordion .ui-accordion-header, #kl_wrapper_3.msmu_wrapper .kl_panels_expander.ui-accordion .ui-accordion-header, .kl_custom_accordion.ui-accordion .ui-accordion-header, .kl_panels_accordion.ui-accordion .ui-accordion-header, .kl_panels_expander.ui-accordion .ui-accordion-header{
    border-bottom: 1px solid lightgrey!important;
    font-size: 1.2em;
}

/* SETTING UP A PAGE AS A MODULE REPLACEMENT - WITH A MODULE ITEM DETAILS BLOCK
   ========================================================================== */

/* MODULE ITEM DETAILS BLOCK - Remove the grey background margin color */
.msmu_wrapper .item-group-condensed {
    padding      : 0;
    margin-bottom: 60px;
}

/* Remove the module title */
.msmu_wrapper .ig-header {
    display: none !important;
}

/* Add back the top border (it was removed with the Title) */
.msmu_wrapper .content li:first-child {
    border-top: 1px solid #c7cdd1 !important;
}


/* DESIGNPLUS - THEME: FLAT SECTION - HEADINGS
   ========================================================================== */

/* Override the letter spacing, increase size, and color for Heading 3 to improve readibility */
#kl_wrapper_3.kl_flat_sections_main.msmu_wrapper h3:not(.ui-state-default),
#kl_wrapper_3.kl_flat_sections.msmu_wrapper h3:not(.ui-state-default) {
    letter-spacing: 0 !important;
    font-size     : 1.8em !important;
    color         : var(--dt-color-primary);
}

/* ADD OUR CLASS TO THE BODY to improve readibility, and make it black*/
/*#kl_wrapper_3.kl_flat_sections.msmu_wrapper [att^=h] */
#kl_wrapper_3.kl_flat_sections_main.msmu_wrapper h3:not(.ui-state-default),
#kl_wrapper_3.kl_flat_sections.msmu_wrapper h3:not(.ui-state-default) {
    letter-spacing: 0;
    color         : #000000;
    font-weight   : bolder;
}

/* Fix icon in headers to be aligned properly in the circle */
#kl_wrapper_3.kl_flat_sections_main.msmu_wrapper>div>i,
#kl_wrapper_3.kl_flat_sections_main.msmu_wrapper h3:not(.ui-state-default) i:first-child,
#kl_wrapper_3.kl_flat_sections.msmu_wrapper>div>i,
#kl_wrapper_3.kl_flat_sections.msmu_wrapper h3:not(.ui-state-default) i:first-child {
    font-size   : 25px !important;
    padding-left: 1px !important;
}


/* Headings 4-6: Remove bottom border, improve readibility */
#kl_wrapper_3.kl_flat_sections_main.msmu_wrapper h4,
#kl_wrapper_3.kl_apple.kl_flat_sections_main.msmu_wrapper h5,
#kl_wrapper_3.kl_flat_sections_main.msmu_wrapper h5,
#kl_wrapper_3.kl_flat_sections_main.msmu_wrapper h6,
#kl_wrapper_3.kl_flat_sections.msmu_wrapper h4,
#kl_wrapper_3.kl_apple.kl_flat_sections.msmu_wrapper h5,
#kl_wrapper_3.kl_flat_sections.msmu_wrapper h5,
#kl_wrapper_3.kl_flat_sections.msmu_wrapper h6 {
    letter-spacing: 0;
    border-bottom : none !important;
    font-weight   : bolder;
    color         : var(--dt-color-primary);
}

/* Re-Establish Heading 4 size */
#kl_wrapper_3.kl_flat_sections_main.msmu_wrapper h4,
#kl_wrapper_3.kl_flat_sections.msmu_wrapper.msmu_wrapper h4 {
    font-size: 1.5em;
}

/* Re-Establish Heading 5 size */
#kl_wrapper_3.kl_flat_sections_main.msmu_wrapper h5,
#kl_wrapper_3.kl_flat_sections.msmu_wrapper h5 {
    font-size: 1.2em;
}

/* Change color of line behind the Content Block's Icon */
#kl_wrapper_3.kl_flat_sections.msmu_wrapper :is(h1, h2, h3, h4, h5, h6).lineseparator {
    border-top : solid lightgray 1px;
    padding-top: 40px;
}


/* DESIGNPLUS - THEME: FLAT SECTION - BANNER TEXT 
   ========================================================================== */

/* Unit Name (Course Number) Container - Widen  */
#kl_wrapper_3.kl_flat_sections.msmu_wrapper #kl_banner #kl_banner_left {
    width    : 280px;
    font-size: 12px;
}

/* Unit Name (Course Number) Container - Shrink Text */
.msmu_wrapper #kl_wrapper_3.kl_flat_sections.msmu_wrapper h2#kl_syllabus_nav_link_0 #kl_banner_right {
    font-size: 20px;
}



/**
  * ==========================================================================
  *  NAVIGATION BLOCK - FOR TWO ITEMS  - TURN IT INTO A PILL
  * ========================================================================== 
  * 
  * This will only work when a Navigation Block contains only TWO items.
  *
  * 
  * HOW TO ACTIVATE:
  * --------------------
  * The following [class] needs to be added to the [body] tag: 
  *
  * msmu_nav_block_2_items
  *
  */


/* Remove background color */
#kl_wrapper_3.kl_flat_sections.msmu_nav_block_2_items #kl_navigation,
#kl_wrapper_3.kl_flat_sections_main.msmu_nav_block_2_items #kl_navigation {
    background-color: transparent;
}

/* Align pill in the center, and shape the ends to look like a pill  */
body.course-menu-expanded #kl_wrapper_3.kl_flat_sections.msmu_nav_block_2_items #kl_navigation>ul,
body.course-menu-expanded #kl_wrapper_3.kl_flat_sections_main.msmu_nav_block_2_items #kl_navigation>ul {
    text-align   : center;
    border-radius: 3em;
}

/* Remove the border around the list */
#kl_wrapper_3.kl_flat_sections_main.msmu_nav_block_2_items #kl_navigation>ul>li>a,
#kl_wrapper_3.kl_flat_sections.msmu_nav_block_2_items #kl_navigation>ul>li>a {
    border: none;
}

/* Set up Animation For the First Item */
body.course-menu-expanded #kl_wrapper_3.kl_flat_sections.msmu_nav_block_2_items #kl_navigation ul li:first-of-type a,
body.course-menu-expanded #kl_wrapper_3.kl_flat_sections_main.msmu_nav_block_2_items #kl_navigation ul li:first-of-type a {
    /* ANIMATION setup -link underline */
    background-image   : linear-gradient(#EEAA11, #EEAA11);
    background-position: 100% 100%;
    background-repeat  : no-repeat;
    background-size    : 0% 3px;
    transition         : background-size .3s;
    -webkit-transition : background-size .3s;
    -moz-transition    : background-size .3s;
    -ms-transition     : background-size .3s;
    -o-transition      : background-size .3s;
}

/* Set up Animation For the Second Item */
body.course-menu-expanded #kl_wrapper_3.kl_flat_sections.msmu_nav_block_2_items #kl_navigation ul li:last-of-type a,
body.course-menu-expanded #kl_wrapper_3.kl_flat_sections_main.msmu_nav_block_2_items #kl_navigation ul li:last-of-type a {
    /* ANIMATION setup -link underline */
    background-image   : linear-gradient(#EEAA11, #EEAA11);
    background-position: 0% 100%;
    background-repeat  : no-repeat;
    background-size    : 0% 3px;
    transition         : background-size .3s;
    -webkit-transition : background-size .3s;
    -moz-transition    : background-size .3s;
    -ms-transition     : background-size .3s;
    -o-transition      : background-size .3s;
}

/* Icon - Remove border, remove background color, set color */
#kl_wrapper_3.kl_flat_sections.msmu_nav_block_2_items #kl_navigation i,
#kl_wrapper_3.kl_flat_sections_main.msmu_nav_block_2_items #kl_navigation i {
    color        : #eeaa11;
    border-radius: unset;
    background   : unset;
    border       : none;
}


/* Hovering - set text color and background */
#kl_wrapper_3.kl_flat_sections.msmu_nav_block_2_items #kl_navigation li:focus,
#kl_wrapper_3.kl_flat_sections_main.msmu_nav_block_2_items #kl_navigation li:focus,

#kl_wrapper_3.kl_flat_sections.msmu_nav_block_2_items #kl_navigation li:focus a,
#kl_wrapper_3.kl_flat_sections_main.msmu_nav_block_2_items #kl_navigation li:focus a,

#kl_wrapper_3.kl_flat_sections.msmu_nav_block_2_items #kl_navigation li:hover,
#kl_wrapper_3.kl_flat_sections_main.msmu_nav_block_2_items #kl_navigation li:hover,

#kl_wrapper_3.kl_flat_sections.msmu_nav_block_2_items #kl_navigation li:hover a,
#kl_wrapper_3.kl_flat_sections_main.msmu_nav_block_2_items #kl_navigation li:hover a,

#kl_wrapper_3.kl_flat_sections.msmu_nav_block_2_items #kl_navigation li a:focus,
#kl_wrapper_3.kl_flat_sections_main.msmu_wrapper.msmu_nav_block_2_items #kl_navigation li a:focus,

#kl_wrapper_3.kl_flat_sections.msmu_nav_block_2_items #kl_navigation li a:hover,
#kl_wrapper_3.kl_flat_sections_main.msmu_nav_block_2_items #kl_navigation li a:hover {
    color           : #eeaa11;
    background-color: #42275C;
    /*ANIMATION link underline*/
    background-size : 100% 3px !important;
}

/* Hovering - set icon color and background */
#kl_wrapper_3.kl_flat_sections.msmu_nav_block_2_items #kl_navigation a:hover i,
#kl_wrapper_3.kl_flat_sections_main.msmu_nav_block_2_items #kl_navigation a:hover i {
    color        : #eeaa11;
    border-radius: unset;
    background   : unset;
    border       : none;
}

/* Ensure it still displays as a vertical pill on smaller devices */
@media only screen and (max-width: 800px) {

    #kl_wrapper_3.kl_flat_sections.msmu_nav_block_2_items #kl_navigation li,
    #kl_wrapper_3.kl_flat_sections_main.msmu_nav_block_2_items #kl_navigation li {
        float: left !important;
        width: 50% !important;
    }
}



/**
  * ==========================================================================
  *  MSMU: OBJECTIVE, OUTCOME, AND ACTIVITIES LISTS 
  * ========================================================================== 
  *
  * 
  * HOW TO ACTIVATE:
  * --------------------
  * The following [ID] needs to be added to the [ol] tag: 
  *
  * msmu_outcomes_list 
  * 
  * or
  * 
  * msmu_objectives_list
  *
  */


/* Set up as a Flex, Remove default margins and padding */
ol#msmu_objectives_list,
ol#msmu_outcomes_list,
ol#msmu_activities_list {
    list-style: none;
    display   : flex;
    flex-wrap : wrap;
    margin    : 0;
    padding   : 0;
}

/* Objective - reset counter */
ol#msmu_objectives_list {
    counter-reset: msmu-objectives;
}

/* Outcome - reset counter */
ol#msmu_outcomes_list {
    counter-reset: msmu-outcomes;
}

/* Outcome - reset counter */
ol#msmu_activities_list {
    counter-reset: msmu-activities;
}

/* Objective - increase counter */
ol#msmu_objectives_list>li {
    counter-increment: msmu-objectives;
}

/* Outcome - increase counter */
ol#msmu_outcomes_list>li {
    counter-increment: msmu-outcomes;
}

/* Outcome - increase counter */
ol#msmu_activities_list>li {
    counter-increment: msmu-activities;
}

/* Set Items inside the list to display horizontally, 3 at a time, etc. */
ol#msmu_objectives_list>li,
ol#msmu_outcomes_list>li,
ol#msmu_activities_list>li {
    display      : flex;
    width        : 32%;
    font-size    : 11pt;
    padding      : 0 10px;
    margin-bottom: 2rem;
    margin-left  : auto;
    margin-right : auto;
}


/* Format the number portions of the lists */
ol#msmu_objectives_list>li::before,
ol#msmu_outcomes_list>li::before,
ol#msmu_activities_list>li::before {
    font-weight  : bold;
    font-size    : 3rem;
    margin-right : 0.5rem;
    line-height  : 1;
    padding-right: 0.5rem;
    border-right : solid lightgray 1px;
}

/* Objective - Set color */
ol#msmu_objectives_list>li::before {
    color: var(--dt-color-gray-dark-text);
}

/* Outcome - Set color */
ol#msmu_outcomes_list>li::before {
    color: var(--dt-color-gray-dark-text);
}

/* Activity - Set color */
ol#msmu_activities_list>li::before {
    color: var(--dt-color-gray-dark-text);
}

/* Objective - Place the number before the content */
ol#msmu_objectives_list>li::before {
    content: counter(msmu-objectives); 
}

/* Outcome - Place the number before the content */
ol#msmu_outcomes_list>li::before {
    content: counter(msmu-outcomes);
}

/* Activity - Place the number before the content */
ol#msmu_activities_list>li::before {
    content: counter(msmu-activities);
}


/* Have the list display vertically on smaller devices */
@media only screen and (max-width: 1300px) {

    ol#msmu_outcomes_list>li,
    ol#msmu_objectives_list>li,
    ol#msmu_activities_list>li {
        width: 100%;
    }
}

/* On Syllabus Page - Display the content as a vertical block when viewed in a smaller device */
@media only screen and (max-width: 1380px) {
    #course_syllabus ol#msmu_outcomes_list>li, 
    #course_syllabus ol#msmu_objectives_list>li,
    #course_syllabus ol#msmu_activities_list>li {
        width: 100%;
    }
}


/**
  * ==========================================================================
  *  Unstoppable Theme: OBJECTIVE, OUTCOME, AND ACTIVITIES LISTS 
  * ========================================================================== 
  *
  * 
  * HOW TO ACTIVATE:
  * --------------------
  * The following [ID] needs to be added to the [ol] tag: 
  *
  * unstoppable_outcomes_list 
  * 
  * or
  * 
  * unstoppable_objectives_list
  *
  * or
  * 
  * unstoppable_activities_list
  *
  */

  /* Remove list style and set up left padding */
  ol#unstoppable_objectives_list,
  ol#unstoppable_outcomes_list,
  ol#unstoppable_activities_list{
    list-style: none!important;
    padding-left: 40px;
  }
  

  
  /* Objective - reset counter */
 ol#msmu_unstoppable_list {
  counter-reset: unstoppable-objectives;
  
}

/* Outcome - reset counter */
ol#unstoppable_outcomes_list {
  counter-reset: unstoppable-outcomes;
}

/* Outcome - reset counter */
ol#unstoppable_activities_list {
  counter-reset: unstoppable-activities;
}

/* Style the list items */
ol#unstoppable_objectives_list li,
ol#unstoppable_outcomes_list li,
ol#unstoppable_activities_list li{
  margin: 0 0 1.8rem;
  position: relative;
  padding-left: 10px;
  border-left : solid lightgray 2px;
  line-height: 1.4rem;
}

/* Objective - increase counter */
ol#unstoppable_objectives_list>li {
  counter-increment: unstoppable-objectives;
}

/* Outcome - increase counter */
ol#unstoppable_outcomes_list>li {
  counter-increment: unstoppable-outcomes;
}

/* Outcome - increase counter */
ol#unstoppable_activities_list>li {
  counter-increment: unstoppable-activities;
}
  
/* Add the new counter to the begining of each list item, and prefix with a zero */
ol#unstoppable_objectives_list li::before {
    content: counter(unstoppable-objectives);
}

ol#unstoppable_outcomes_list li::before {
    content: counter(unstoppable-outcomes);
}

ol#unstoppable_activities_list li::before {
    content: counter(unstoppable-activities);
}

/* Format the number portions of the lists */
ol#unstoppable_objectives_list li::before,
ol#unstoppable_outcomes_list li::before,
ol#unstoppable_activities_list li::before {
    font-weight: bold;
    position: absolute;
    --size: 1.4rem;
    left: calc(-1 * var(--size) - 26px);
    width: calc(2 * var(--size));
    text-align: center;
    font-weight: bold;
    font-size: var(--size);
    line-height: var(--size);
  }


  /* Format the color of the number on the list */
ol#unstoppable_objectives_list>li::before {
  color: var(--dt-color-primary);
}

/* Outcome - Set color */
ol#unstoppable_outcomes_list>li::before {
    color: var(--dt-color-accent-contrast);
}

/* Activity - Set color */
ol#unstoppable_activities_list>li::before {
    color: var(--dt-color-gray-dark-text);
}
  




/**
  * ==========================================================================
  *  MSMU: CUSTOM BLOCK - FIND MATERIALS SEARCH LINKS
  * ========================================================================== 
  *
  * 
  * HOW TO ACTIVATE:
  * --------------------
  * The following [class] needs to be added to the outtermost [div] from the 
  * container that has the class [bs-container]: 
  *
  * msmu_find
  *
  * 
  */


/* Set layout and text color */
.msmu_find {
    margin: 60px 0 20px 0;
    color : #FFFFFF;
}

/* Set the margins for the first instance of this block*/
.msmu_find:first-of-type {
    margin: 40px 0 20px 0;
}

/* Set display, background color, text for the block's heading */
.msmu_find div[class^="bs-col-"]:first-child {
    display         : flex;
    background-color: #775C92;
    border-right    : solid #553377 1px;
    text-align      : left !important;
    border-radius   : 10px 0 0 10px;
}

/* Set text and layout properties for the header */
.msmu_find div[class^="bs-col-"]:first-child h4:first-of-type {
    text-align : center !important;
    font-size  : 1.3em !important;
    line-height: 1.2em !important;
    orphans    : 2 !important;
    display    : flex;
    align-self : stretch;
    align-items: center;
    padding    : 6px 10px 3px;
    color      : #FFFFFF !important;
}

.msmu_find div[class^="bs-col-"]:first-child h4 {
    text-align   : center;
    margin       : 0 !important;
    border-bottom: none;
}

/* Format the icon in the heading block */
.msmu_find div[class^="bs-col-"]:first-child i:first-of-type {
    color       : #FFFFFF;
    border-right: solid #9985AD 1px !important;
    padding     : 12px 22px 12px 0;
    margin      : 4px 14px 4px 0;
}

/* Format the find links container */
.msmu_find div[class^="bs-col-"]:last-child {
    background-color: #42275C;
    border-radius   : 0 10px 10px 0;
    display         : flex;
    align-items     : center;
    text-align      : center;
}

/* Format the text inside the links container */
.msmu_find div[class^="bs-col-"]:last-child p {
    margin: 12px auto;
}

/* Display the content as a vertical block when viewed in a smaller device */
@media only screen and (max-width: 1099px) {
    .msmu_find div[class^="bs-col-"]:first-child {
        border-radius: 10px 10px 0 0 !important;
    }

    .msmu_find div[class^="bs-col-"]:last-child {
        border-radius: 0 0 10px 10px !important;
        flex         : 0 0 100%;
        max-width    : 100%;
    }
}

/* On Syllabus Page - Display the content as a vertical block when viewed in a smaller device */
@media only screen and (max-width: 1380px) {
    #course_syllabus .msmu_find div[class^="bs-col-"]:first-child {
        border-radius: 10px 10px 0 0 !important;
    }

    #course_syllabus .msmu_find div[class^="bs-col-"]:last-child {
        border-radius: 0 0 10px 10px !important;
        flex         : 0 0 100%;
        max-width    : 100%;
    }
}



/**
  * ==========================================================================
  *  MSMU: MATERIALS SECTIONS - REQUIRED AND RECOMMENDED 
  * ========================================================================== 
  * 
  * This is to be added as an html snipet. There are three different types of
  * materials you can add: a book, a movie, or a miscellaneous item. 
  * 
  * To update the item's image, redirect the image's link to a new image. 
  * 
  * To update the item's details, you can do so in a paragraph or a list. You 
  * can also format the list to look like a description list by adding the 
  * [msmu_description_list] class to it. If you need to add a link for
  * additional information or download purposes, style it as a button using
  * DesignPlus. 
  *
  * 
  * HOW TO ACTIVATE:
  * --------------------
  * Add as an html snippet through DesignPlus: 
  *
  * Book with Details
  * Item with Details
  * Movie with Details
  *
  */


/* Set paragraph text color for this container */
.msmu_material p,
.msmu_material li {
    color: rgba(45, 59, 69);
}

/* Set up item display */
.msmu_book {
    flex-basis: auto;
    display   : inline-block;
    margin    : 10px auto !important;
    position  : relative;
    outline   : 1px solid transparent;
    /*Helps smooth jagged edges in Firefox*/
    box-shadow: none;
    margin    : 0;

    perspective        : 100px;
    -moz-perspective   : 100px;
    -webkit-perspective: 100px;
    -ms-perspective    : 100px;
    -moz-perspective   : 100px;

    transform        : rotateY(-3deg);
    -moz-transform   : rotateY(-3deg);
    -webkit-transform: rotateY(-3deg);
    -ms-transform    : rotateY(-3deg);
    -o-transform     : rotateY(-3deg);
}

/* Align item to be centered in its container */
.msmu_book_cover,
.msmu_item_cover {
    text-align: center;
}

/* Transform the image to become a Book Cover */
.msmu_book_cover {
    margin-bottom: 10px;
    margin-left  : -10px;

    perspective        : 100px;
    -moz-perspective   : 100px;
    -webkit-perspective: 100px;
    -ms-perspective    : 100px;
    -o-perspective     : 100px;

    transform-style        : preserve-3d;
    -moz-transform-style   : preserve-3d;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style    : preserve-3d;
    -o-transfor-style      : preserve-3d;

}

/* Make sure the image always stays the same width */
.msmu_item img {
    position      : relative;
    max-width     : 100%;
    vertical-align: middle;
    width         : 130px;
    height        : auto;
    margin-bottom : 10px;
}

/* Creates front cover thickness */
.msmu_book img {
    position      : relative;
    max-width     : 100%;
    border-right  : 2px solid #757186;
    vertical-align: middle;
    width         : 130px;
    height        : auto;
}

/* Set up the pages and back cover space */
.msmu_book:before,
.msmu_book:after {
    position: absolute;
    top     : 2%;
    height  : 96%;
    content : ' ';
    z-index : -1;
}

/* Create back cover and color */
.msmu_book:before {
    width           : 100%;
    left            : 7.5%;
    background-color: #514e5c;
}

/* Create inside pages and it's shadows*/
.msmu_book:after {
    width           : 5%;
    left            : 100%;
    background-color: #EFEFEF;
    box-shadow      : inset 0 0 5px #AAAAAA;

    transform        : rotateY(20deg);
    -moz-transform   : rotateY(20deg);
    -webkit-transform: rotateY(20deg);
    -ms-transform    : rotateY(20deg);
    -o-transform     : rotateY(20deg);
}

/* Format the item's title */
.msmu_material div[class^="bs-col-"] h4:first-of-type {
    text-align    : left;
    border        : none !important;
    font-size     : 1.4em;
    letter-spacing: 0 !important;
    margin        : 0 0 4px !important;
    padding       : 0;
}

/* Add seperating lines between each item */
.msmu_material {
    padding   : 20px 0;
    border-top: 1px solid lightgray;
}

/* Except the first material item that follows the find materials block */
div[id^="msmu_materials_"] h3+.msmu_material,
[id^="msmu_materials_"] .msmu_find+p+.msmu_material {
    border-top: none !important;
}

/* Unstoppable Theme: Remove the top line for the materials */
div.msmu_material.container-fluid {
    border-top: 1px solid transparent !important;
    border-top: none!important;
}

/* Added paragraph tag after the material block and find materials block to allow for easier adding/deleting of a material in the editor  */
.msmu_material+p {
    display         : block;
    height          : 20px;
    padding         : 0;
    margin          : 0;
    border-bottom   : 1px solid lightgrey;
    /* margin-bottom: 20px; */
}

/* Hide the line below the last item */
.msmu_material:last-of-type+p {
    border-bottom: 1px solid transparent;
}

/* Format the empty paragraph following the find materials block */
.msmu_find+p {
    display: block;
    height : 20px;
    padding: 0;
    margin : 0;
}


/* Center Material Header when viewed in a smaller device */
@media only screen and (max-width: 1300px) {

    /* [id^="msmu_materials_"] .msmu_material h4 { */
    .msmu_material h4 {
        text-align: center !important;
    }
}



/**
  * ==========================================================================
  *  MSMU: ASSESSMENT GROUP BREAKDOWN - 3 COLUMNS  - TITLE, POINTS, DESCRIPTION
  * ========================================================================== 
  * 
  * This is to be added as an html snipet.  
  *
  * 
  * HOW TO ACTIVATE:
  * --------------------
  * Add as an html snippet through DesignPlus: 
  *
  * Assessment Overview
  *
  */


/* Set border and background for each block */
.msmu_assessment_overview {
    border          : 1px solid lightgrey;
    margin          : 0;
    border-radius   : 10px;
    background-color: #FAFAFA;
}

.msmu_assessment_overview+p {
    height : 20px;
    padding: 0;
    margin : 0;
}

/* Second Column - Set background color and borders */
.msmu_assessment_overview div[class^="bs-col-"]:nth-child(2) {
    background-color: #E7E8EA;
    border-left     : 1px solid lightgrey;
    border-right    : 1px solid lightgrey;
}

/* Second Column - Display as a vertical block when viewed in a smaller window */
@media only screen and (max-width: 1379px) {
    .msmu_assessment_overview div[class^="bs-col-"]:nth-child(2) {
        border-left  : none;
        border-right : none;
        border-top   : 1px solid lightgrey;
        border-bottom: 1px solid lightgrey;
    }
}

/* Group's Title - Format the Header */
.msmu_assessment_overview div[class^="bs-col-"]:first-of-type h5:first-of-type {
    font-size: 1.15em;
    text-align   : left;
    border-bottom: none !important;
}

/* Group's Title - Format the icon  */
.msmu_assessment_overview div[class^="bs-col-"]:first-of-type i:first-of-type {
    text-align : left;
    display    : block;
    margin     : -30px 0 0;
    width      : 45px;
    height     : 45px;
    line-height: 60px;
    position   : relative;
    color      : rgba(85, 51, 119, 0.60);
    font-size  : 20px;
}

/* Group's Title - Display as a vertical and centered block when viewed in a smaller window */
@media only screen and (max-width: 1379px) {
    .msmu_assessment_overview div[class^="bs-col-"]:first-of-type h5 {
        text-align: center!important;
    }

    .msmu_assessment_overview div[class^="bs-col-"]:first-of-type i {
        text-align: center!important;
        margin: -30px auto 0 !important;
    }
}

/* Second column's (Points/Percentage) Header */
.msmu_assessment_overview div[class^="bs-col-"]:nth-child(2) p:first-of-type{
    padding      : 0 0 10px 0;
    border-bottom: 1px solid grey;
    margin       : 53px auto 20px;
    font-weight  : bold;
    font-size    : 16px;
}

.msmu_assessment_overview div[class^="bs-col-"]:nth-child(2) p:first-of-type{
    display   : block;
    text-align: center;
    color     : #000000;
}

/* Second column's (Points/Percentage) Header's Icon */
.msmu_assessment_overview div[class^="bs-col-"]:nth-child(2) i:first-of-type {
    display              : block;
    line-height          : 18px;
    position             : relative;
    border               : 1px solid gray;
    padding-left         : 1px !important;
    font-size            : 14px !important;
    background-color     : #E7E8EA;
    box-sizing           : border-box;
    width                : 20px;
    height               : 20px;
    border-radius        : 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius   : 20px;
    -ms-border-radius    : 20px;
    -o-border-radius     : 20px;
    margin               : 0 auto -50px;
    color                : #5e5e5e;
}


/* Second Column - Format the rest of the lines */
.msmu_assessment_overview div[class^="bs-col-"]:nth-child(2) p:not(:first-of-type) {
    display      : block;
    text-align   : center;
    border-bottom: 1px solid lightgrey;
    padding      : 10px 5px;
    margin       : 0;
}

/* Second Column - Remove the last item's border */
.msmu_assessment_overview div[class^="bs-col-"]:nth-child(2) p:last-of-type {
    border: none;
}


/* Total Row - Make it Centered */
.bs-container:last-of-type .bs-row.msmu_assessment_overview div[class^="bs-col-"]:last-of-type {
    display                   : flex;
    align-items               : center;
    justify-content           : center;
    border-top-right-radius   : 10px;
    border-bottom-right-radius: 10px;
    font-weight               : bold;
}


/* Total Row - Points: Reset properties so that it centers */
.bs-container:last-of-type .bs-row.msmu_assessment_overview div[class^="bs-col-"]:nth-child(2) p:last-of-type {
    display: block;
    margin : 0;
    padding: 0;
}

/* Total Row - Keep it as a horizontal roww when viewed in a smaller window */
@media only screen and (max-width: 1379px) {
    .bs-container:last-of-type .bs-row.msmu_assessment_overview div[class^="bs-col-"] {
        width: 50% !important;
    }

    .bs-container:last-of-type .bs-row.msmu_assessment_overview div[class^="bs-col-"]:last-of-type {
        border     : none;
        border-left: 1px solid lightgrey;
    }
}


/**
 * ==========================================================================
 *  MSMU: UNSTOPPABLE COURSE OUTLINE - TABLES WITH CAPTIONS
 * ========================================================================== 
 * 
 * This is to be added as a content block under the syllabus category.  
 *
 * 
 * HOW TO ACTIVATE:
 * --------------------
 * Add as a Content Block, under Syllabus category, through DesignPlus: 
 *
 * Unit Insert_Unit_Number: Insert_Unit_Name
 *
 */

/* Allow spacing between each table */
table.msmu_unstoppable_table {
  margin-bottom: 20px 0;
}

/* Caption to look like a header */
table.msmu_unstoppable_table caption {
  text-align : left;
  color      : var(--dt-color-white-dark-text);
  font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 850 !important;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
  font-size: 1.75em; 
  caption-side: top!important;
  margin-top: 10px;
}





/**
 * ==========================================================================
 *  MSMU: COURSE OUTLINE - TABLES WITH CAPTIONS
 * ========================================================================== 
 * 
 * This is to be added as an html snipet.  
 *
 * 
 * HOW TO ACTIVATE:
 * --------------------
 * Add as an html snippet through DesignPlus: 
 *
 * Course Outline Table
 *
 */

/* Allow spacing between each table */
table.msmu_table {
    margin: 30px 0;
}

/* Caption to look like a header */
table.msmu_table caption {
    text-align : left;
    color      : var(--dt-color-primary);
    font-size  : 1.3em;
    font-weight: bold;
    caption-side: top;
}

/* Remove the border on the last row */
table.msmu_table tr:last-of-type th,
table.msmu_table tr:last-of-type td {
    border-bottom-color: transparent;
}



/**
  * ==========================================================================
  *  MSMU: CUSTOM FRONT PAGE - FILM DEPARTMENT
  * ========================================================================== 
  * 
  * This needs to be set up as a page template within DesignPlus. Need to add
  * key items to the instructions on how to add additional content within the 
  * required materials section.
  *
  * 
  * HOW TO ACTIVATE:
  * --------------------
  * Select the template from DesignPlus.
  *
  * [Template] [Film Department ] Custom Front Page
  *
  */


/* BANNER IMAGE - Department image swap to different logo image in mobile
   ========================================================================== */

/* Hide Mobile Image when viewed on a large screen devices */
.banner_visible_mobile {
    display: none;
}

/* Swap Banner Image when viewed on a mobile or small screen devices */
@media only screen and (max-width: 639px) {

    /* Hide the desktop Banner Image on smaller screens devices */
    #kl_banner_image {
        display: none !Important;
    }

    /* Display the mobile image on smaller screens devices */
    .banner_visible_mobile {
        display: block;
    }
}


/* PILL LIST - Recreate
   ========================================================================== */

/* Remove bullets, Shape it into a pill, Have it expand depending on the contents */
.msmu_wrapper ul.msmu_pill_center {
    list-style-type: none;
    border         : solid lightgrey 1px;
    border-radius  : 1.5em;
    margin         : 5px auto;
    width          : max-content;
    font-size      : 11pt;
}

/* Set up each item, Add pipelines between each Item  */
.msmu_wrapper .msmu_pill_center li {
    display     : inline-block;
    padding     : 6px 10px 5px;
    border-right: solid lightgrey 1px;
    text-align  : center;
    font-size   : 12pt; 
}

/* Add extra padding on the left to the first item in the list */
.msmu_wrapper .msmu_pill_center li:first-child {
    padding-left: 16px;
}

/* Add extra padding on the right to the last item in the list, and remove the pipeline */
.msmu_wrapper .msmu_pill_center li:last-child {
    padding-right: 16px;
    border-right : none;
}

/* Break into two lines */
.msmu_wrapper .msmu_pill_center li > strong{
    display     : block !important;
    text-align  : center !important;
    font-size   : 10pt;
    color       : #553377;
}

/* Convert the Pill to a List when it is a large list (add excisting class .msmu_large to ul) */
@media only screen and (max-width: 1200px) {
    .msmu_wrapper ul.msmu_pill_center.msmu_large li {
        display     : block;
        max-width   : 100%;
        clear       : both;
        margin      : 5px auto !important;
        padding     : 6px 16px;
        text-align  : center;
        border-right: none;
    }
}

/* Convert the Pill to a List when it viewed on a small screen */
@media only screen and (max-width: 500px) {
    .msmu_wrapper ul.msmu_pill_center li {
        display     : block;
        max-width   : 100%;
        clear       : both;
        margin      : 5px auto !important;
        padding     : 6px 16px;
        text-align  : center;
        border-right: none;
    }
}


/* MSMU: Custom Styled Block - 01 - Getting Arround
   ========================================================================== */

/* Set wrapper container */
.msmu_block_01 {
    border-radius   : 10px;
    border          : solid lightgrey 1px;
    margin          : 5px;
    background-color: #FFFFFF;
}

/* Set Headers */
.msmu_block_01 h4:first-of-type {
    background-color       : var(--dt-color-primary);
    margin                 : 0 -15px !important;
    padding                : 10px 10px 14px 10px;
    text-align             : center;
    font-size              : 1.2em !important;
    color                  : #FFFFFF !important;
    border-top-left-radius : 10px;
    border-top-right-radius: 10px;
    min-height             : 110px;
}

/* Set Icons insdie of Headers */
.msmu_block_01 h4>i:first-of-type {
    display: block;
    margin : 5px auto;
    color  : rgba(255, 255, 255, 0.50)
}

/* Set Remaining headers inside these blocks */
.msmu_block_01 h5,
.msmu_block_01 h6 {
    margin    : 14px 0 6px !important;
    text-align: center;
}

/* Lists: Remove list bullets */
.msmu_block_01 ul {
    list-style : none;
    margin-left: 0;
}

/* Set seperating line between each list item */
.msmu_block_01 li {
    border-bottom: 1px solid lightgrey;
    padding      : 5px 0;
    text-align   : center;
}

/* Remove the bottom border on the last list item */
.msmu_block_01 li:last-of-type {
    border-bottom: none;
}

/* Faux Header by using the strong tag */
.msmu_block_01 li>strong {
    display   : block;
    clear     : both;
    font-size : 0.7em;
    text-align: center;
}



/**
  * ==========================================================================
  *  MSMU MEET YOUR INSTRUCTOR BLOCK
  * ========================================================================== 
  * 
  * A brief introduction to the instructor, followed by a photograph and
  * general information in a list format.
  *
  * 
  * HOW TO ACTIVATE:
  * --------------------
  * The following [ID] needs to be added to the content block's [div] tag: 
  *
  * #msmu_meet_instructor
  *
  */

/* Format the bootstrap columns */
#msmu_meet_instructor div[class^="bs-col-"]:first-of-type img {
    max-width: 100%;
    display  : block;
    margin   : 0 auto;
}

/* Format the bootstrap columns when using a smaller screen size */
@media only screen and (max-width: 1100px) {
    #msmu_meet_instructor div[class^="bs-col-"]:first-of-type img {
        max-width: 200px;
    }
}



/**
  * ==========================================================================
  *  MSMU - MODULES RECREATED/REIMAGED AS A PAGE 
  * ========================================================================== 
  *
  * 
  * HOW TO ACTIVATE:
  * --------------------
  * The following [class] needs to be added to a [ul] tag: 
  *
  * msmu_medium_link_grid
  *
  */


/* MSMU NAVIGATION LINK GRID - 3 Columns, with Icon On Top
   ========================================================================== */

/* Set Display Properties and remove bullets */
ul.msmu_medium_link_grid {
    list-style-type: none;
    margin         : 0;
    flex-wrap      : wrap;
    align-items    : stretch;
    align-content  : center;
}

/* Format each item in the list to display as a block */
ul.msmu_medium_link_grid>li {
    white-space          : unset !important;
    min-height           : 6em;
    background           : var(--dt-color-primary);
    font-size            : 1em;
    text-align           : center;
    margin               : 1em 0;
    border-radius        : 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius   : 10px;
    -ms-border-radius    : 10px;
    -o-border-radius     : 10px;
    line-height          : 1em;

    display        : flex;
    justify-content: center;
}

/* Display as vertical blocks on smaller screens */
@media screen and (min-width:800px) {
    ul.msmu_medium_link_grid {
        list-style-type: none;
        column-count   : unset !important;
        margin         : 0;
        display        : flex;
        flex-wrap      : wrap;
        align-items    : stretch
    }

    ul.msmu_medium_link_grid>li {
        white-space: unset !important;
        width      : 32%;
        min-height : 6em;
        background : var(--dt-color-primary);
        font-size  : 1em;
        margin     : 0.5em 0;
        text-align : center;
    }

    ul.msmu_medium_link_grid>li:nth-child(3n+2) {
        margin-left : 2%;
        margin-right: 2%;
    }

}

/* Format item inside the list to display as a block */
ul.msmu_medium_link_grid>li>a {
    padding              : .5em;
    min-height           : 6em;
    padding-top          : 1em;
    text-decoration      : none !important;
    color                : #FFFFFF;
    border-radius        : 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius   : 10px;
    -ms-border-radius    : 10px;
    -o-border-radius     : 10px;
    /* ANIMATION setup for animation link underline */
    background-image     : linear-gradient(#EEAA11, #EEAA11);
    background-position  : 0% 100%;
    background-repeat    : no-repeat;
    background-size      : 0% 6px;
    transition           : background-size .3s;
    width                : 100%;
}

/* Change the icon color */
ul.msmu_medium_link_grid>li .dp-icon,
ul.msmu_medium_link_grid>li i {
    color: #eeaa11;
}

/* Format the icon inside the list item */
ul.msmu_medium_link_grid>li>a>i {
    display      : block;
    font-size    : inherit;
    text-align   : center;
    margin-bottom: .5em
}

ul.msmu_medium_link_grid>li>a>i:before {
    font-size: 1em;
}

ul.msmu_medium_link_grid>li>a>.dp-icon {
    display      : block;
    font-size    : inherit;
    text-align   : center;
    margin-bottom: .5em
}

ul.msmu_medium_link_grid>li>a>.dp-icon:before {
    /* font-size:1.5em */
    font-size: 1em;
}

ul.msmu_medium_link_grid>li img {
    max-width: 100% !important
}

/* Set block's interaction style */
ul.msmu_medium_link_grid>li:focus,
ul.msmu_medium_link_grid>li:focus a,
ul.msmu_medium_link_grid>li:hover,
ul.msmu_medium_link_grid>li:hover a,
ul.msmu_medium_link_grid>li>a:focus,
ul.msmu_medium_link_grid>li>a:hover {
    background-color     : #42275C;
    color                : #eeaa11;
    border-radius        : 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius   : 10px;
    -ms-border-radius    : 10px;
    -o-border-radius     : 10px;
    background-size      : 100% 6px;
}


@media print {
            .noprint {
                visibility: visible;
            }

            /* widen the container so that content is not as large when printed */
            #course_syllabus{
                width: 3500px!important;
            }

            /* add this class to items that we don't want to be split between pages */
            .no_break {
                break-inside: avoid;
                display: table
             }
              
             /* prevent edit syllabus button and custom navigation from printing*/
              #course_syllabus button, button#dp-toggle-action-item, button.edit_syllabus_link, nav{
                display: none!important;
              }
             
              /* shrink banner image and move it to the very top */
              #course_syllabus .dp-banner-image{
                width: 50%;
                margin: auto;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                text-align: center;
                z-index: 1;
              }

              /* move header content down to accomodate the banner image on top */
              #course_syllabus header.msmu-header-unstoppable{
                margin-top: 180px;
              }
              
               /* print colors black*/
              #course_syllabus h2, #course_syllabus h3, #course_syllabus p.dp-header-subtitle, #course_syllabus h4.card-title{
                color: black!important;
              }

              /* add a vertical thick line on each content block */
              #course_syllabus .dp-wrapper .dp-content-block h3{
                border-bottom-color: var(--dt-color-primary)!important;
                border-bottom-style: solid!important;
                border-bottom-width: 10px!important;
                padding-bottom: 6px!important;
              }

               /* except the first header 3 - remove the border */
              #course_syllabus .dp-wrapper .dp-content-block:first-child h3{
                border-bottom-style: none!important;
                border-bottom-width: 0!important;
              } 


              /* change the icon color for heading 3 to purple, and move it down */
              #course_syllabus .dp-hdg-i-bg-h3-dp-secondary h3.dp-has-icon i{
                color:var(--dt-color-primary)!important;
                background-color: transparent!important;
                padding-top: 40px!important;
              }


            /* Panel - headers and icon text black and bold */

              #course_syllabus h5[id^=dpPanel] a.dp-panel-toggler.dp-has-icon.active{
                color:black!important;
                font-family: "Nunito Sans", sans-serif;
                font-optical-sizing: auto;
                font-weight: 850 !important;
                font-style: normal;
                font-variation-settings:
                    "wdth" 100,
                    "YTLC" 500;
              }
              
              /* remove UI arrow on panel heading */
              #course_syllabus .dp-wrapper .dp-expander-default .dp-panel-icon{
                display:none;
              }
        }