﻿/* MAIN ********************************************************************************/
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-image: linear-gradient(345deg, #F8F8F8 0%, #FFFFFF 50%, #F8F8F8 50%, #FFFFFF 100%);
  background-image: -webkit-linear-gradient(345deg, #F8F8F8 0%, #FFFFFF 50%, #F8F8F8 50%, #FFFFFF 100%);
  background-image: -moz-linear-gradient(345deg, #F8F8F8 0%, #FFFFFF 50%, #F8F8F8 50%, #FFFFFF 100%);
  background-image: -ms-linear-gradient(345deg, #F8F8F8 0%, #FFFFFF 50%, #F8F8F8 50%, #FFFFFF 100%);
  background-image: -o-linear-gradient(345deg, #F8F8F8 0%, #FFFFFF 50%, #F8F8F8 50%, #FFFFFF 100%);
}
/* HEADER ******************************************************************************/
#header {
  background-color: #193177;
}
#header h1,
#header i {
  color: #FFF;
}
/* BANNER ******************************************************************************/
.banner {
  background-color: #bdd41f;
  color: white;
}
/* COLOR SCHEMES ************************************************************************/
.blue-scheme {
  background-color: #2196da;
  color: #eee;
}
.canvas-scheme {
  background-color: #E53C2E;
  color: #eee;
}
.blue-scheme-reverse i {
  background-color: #FFF;
  color: #2196da;
}
.blue-scheme-reverse .title,
.blue-scheme-reverse .description {
  color: #FFF;
}
.lime-scheme {
  background-color: #bdd41f;
  color: #eee;
}
.navy-scheme {
  background-color: #193177;
  color: #eee;
}
.gray-scheme {
  background-color: #337ab7;
  color: #eee;
}
#mycoursedevicemenu {
  border-top: 5px solid #2196da;
}
#myapplicationsdevicemenu {
  border-top: 5px solid #193177;
}
#myaccountdevicemenu {
  border-top: 5px solid #bdd41f;
}
.container-fluid {
  padding: 0;
  max-width: 1200px;
}
.title-icon {
  background-color: #E53C2E;
  color: white;
}
.aspNetDisabled .lime-scheme {
  background-color: #acacac;
}
.aspNetDisabled .title,
.aspNetDisabled .description {
  color: #acacac;
}
/* CH V2 */
#header #title {
  display: none;
}
.default-icon {
  background-color: #e7e7e7;
  color: #fff;
}
.sub-tile {
  display: block;
}
.sub-tile:hover {
  text-decoration: none;
}
.sub-tile span {
  display: block;
  padding: 5px;
  text-align: center;
}
.sub-tile i {
  border-radius: 100%;
  font-size: 2.5em;
  height: 75px;
  line-height: 75px;
  text-align: center;
  width: 75px;
}
.sub-tile .title {
  color: #666;
  font-size: 1em;
  font-weight: 600;
  max-width: 90%;
  margin: 0 auto;
}
.sub-tile .description {
  color: #555;
  margin: 0 auto;
  text-align: center;
  max-width: 75%;
  font-size: 0.8em;
}
.sub-tile .img-icon-wrapper {
  display: table;
  padding: 0;
  width: 100%;
}
.sub-tile .canvas-icon,
.sub-tile .jmsu-icon,
.office365-icon {
  display: table-cell;
  height: 75px;
  vertical-align: middle;
}
/* QUICKLINKS *************************/
.quicklinks .icon2 {
  background-color: #193177;
}
.quicklinks .icon3 {
  background-color: #337ab7;
}
.quicklinks .icon4 {
  background-color: #bdd41f;
}
/* GROUP HEADERS ***********************/
.group-title {
  font-size: 1.5em;
  font-weight: bold;
  padding: 20px;
  text-align: center;
}
.mainlink {
  display: block;
}
.group-header span {
  display: block;
  padding: 5px;
  text-align: center;
}
.group-header .default-icon {
  border-radius: 100%;
  color: #fff;
  font-size: 35px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  width: 60px;
}
.active-heading {
  color: #fff;
}
.active-heading span {
  color: #fff;
}
.mycourseheader .active-heading {
  background-color: #2196da;
}
.mycoursetiles .group-title {
  background-color: #2196da;
  color: #fff;
}
.mycourseicon,
.mycoursemainlink i,
.mycoursemainlink:hover {
  background-color: #2196da;
}
.mycourseheader .active-heading .title,
.mycoursemainlink:hover .title {
  color: #FFF;
}
.myapplicationsheader .active-heading {
  background-color: #193177;
}
.myapplicationstiles .group-title {
  background-color: #193177;
  color: #fff;
}
.myapplicationsicon,
.myapplicationsmainlink i,
.myapplicationsmainlink:hover {
  background-color: #193177;
}
.myapplicationsheader .active-heading .title,
.myapplicationsmainlink:hover .title {
  color: #FFF;
}
.myaccountheader .active-heading {
  background-color: #bdd41f;
}
.myaccounttiles .group-title {
  background-color: #bdd41f;
  color: #fff;
}
.myaccounticon,
.myaccountmainlink i,
.myaccountmainlink:hover {
  background-color: #bdd41f;
}
.myaccountheader .active-heading .title,
.myaccountmainlink:hover .title {
  color: #FFF;
}
.ljmuresourcesheader .active-heading {
  background-color: #337ab7;
}
.ljmuresourcestiles .group-title {
  background-color: #337ab7;
  color: #fff;
}
.ljmuresourcesicon,
.ljmuresourcesmainlink i,
.ljmuresourcesmainlink:hover {
  background-color: #337ab7;
}
.ljmuresourcesheader .active-heading .title,
.ljmuresourcesmainlink:hover .title {
  color: #FFF;
}
.mycoursemainlink,
.myapplicationsmainlink,
.myaccountmainlink,
.ljmuresourcesmainlink {
  border-radius: 15px 15px 0 0;
  display: block;
  height: 100%;
}
.tile-icon {
  height: 75px;
  width: 75px;
}
.studentsunion-icon img {
  border-radius: 100%;
}
/*Extra small devices (portrait phones, less than 576px) // No media query since this is the default in Bootstrap // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .mobile-header {
    display: none;
  }
  .group-header .default-icon {
    font-size: 2.5em;
    height: 75px;
    line-height: 75px;
    width: 75px;
  }
  .group-header .title {
    font-weight: bold;
    font-size: 1em;
    color: #666;
  }
}
/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .group-header .default-icon {
    font-size: 3em;
    height: 90px;
    line-height: 90px;
    width: 90px;
  }
  .group-header .title {
    font-weight: bold;
    font-size: 1em;
    color: #666;
    padding: 10px 0 20px;
  }
  .group-title {
    margin-bottom: 25px;
  }
}
/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .group-title {
    margin-bottom: 40px;
  }
  .mainlink {
    padding: 10px 0;
  }
}
/*// Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
  .group-title {
    margin-bottom: 50px;
  }
}