.campus-course { width: 100%; position: relative; }
.campus-course:after { content: " "; visibility: hidden; display: block; height: 0; clear: both; }
#cc-nav { width: 33%; float: left; border: 1px solid #DDD; margin-bottom: 10px; }
.course-tree { width: 100% !important; }

#cc-nav li.status0 { border-left: 5px solid #CCCCCC; }
#cc-nav li.status1 { border-left: 5px solid #FF0000; }
#cc-nav li.status2 { font-style: italic; }
#cc-nav li.status3 { border-left: 5px solid #007700; }

#cc-nav.course-tree li.status0 { border-left: 15px solid #CCCCCC; }
#cc-nav.course-tree li.status1 { border-left: 15px solid #FF0000; }
#cc-nav.course-tree li.status3 { border-left: 15px solid #007700; }

#cc-nav ul { margin: 0; padding: 0; background: #EEEEEE; color: #121212; }
#cc-nav ul a { color: #121212; text-decoration: none; display: block; padding: 5px 9px; }
#cc-nav ul a:hover { color: #565656; }
#cc-nav ul li {
  background: #eee;
  background: -ms-linear-gradient(bottom,#eee,#fff);
  background: -moz-linear-gradient(bottom,#eee,#fff);
  background: -o-linear-gradient(bottom,#eee,#fff);
  background: -webkit-gradient(linear,left bottom,left top,from(#eee),to(#fff));
  background: -webkit-linear-gradient(bottom,#eee,#fff);
  background: linear-gradient(bottom,#eee,#fff);
  list-style: none;
  display: block;
  position: relative;
}
#cc-nav ul li a { min-height: 60px; border-bottom: 1px solid #ddd; padding-left: 30px; }
#cc-nav ul li a.nav-menu { padding: 2px 0px 0px 0px; text-align: center; width: 30px; height: 100%; min-height: 0; bottom: 0px; top: 0px; left: 0px; position: absolute; border: none; font-size: 18px; outline: none; }
#cc-nav ul ul li a.nav-menu { padding-left: 25px; font-size: 16px; }

#cc-nav ul ul { background: #BABABA; }
#cc-nav ul ul li {
  background: #ddd;
  background: -ms-linear-gradient(bottom,#ddd,#fff);
  background: -moz-linear-gradient(bottom,#ddd,#fff);
  background: -o-linear-gradient(bottom,#ddd,#fff);
  background: -webkit-gradient(linear,left bottom,left top,from(#ddd),to(#fff));
  background: -webkit-linear-gradient(bottom,#ddd,#fff);
  background: linear-gradient(bottom,#ddd,#fff);
  min-height: 15px;
}
#cc-nav ul ul li a { min-height: 15px; font-size: small; padding-left: 55px; }

#cc-nav ul ul ul { background: #FFFFFF; }
#cc-nav ul ul ul li {
  background: #fff;
  background: -ms-linear-gradient(bottom,#fff,#eee);
  background: -moz-linear-gradient(bottom,#fff,#eee);
  background: -o-linear-gradient(bottom,#fff,#eee);
  background: -webkit-gradient(linear,left bottom,left top,from(#fff),to(#eee));
  background: -webkit-linear-gradient(bottom,#fff,#eee);
  background: linear-gradient(bottom,#fff,#eee);
  min-height: 15px;
}
#cc-nav ul ul ul li a { min-height: 15px; border-bottom: 1px solid #CCC; font-size: smaller; padding-left: 55px; }

#cc-nav li.current {
  background: #2c2c2c;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJjMmMyYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MDQwNDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  #2c2c2c 0%, #404040 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c2c2c), color-stop(100%,#404040));
  background: -webkit-linear-gradient(top,  #2c2c2c 0%,#404040 100%);
  background: -o-linear-gradient(top,  #2c2c2c 0%,#404040 100%);
  background: linear-gradient(to bottom,  #2c2c2c 0%,#404040 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c2c2c', endColorstr='#404040',GradientType=0 );
}
#cc-nav li.current a { color: #fff; }

.campus-course #cc-page { float: left; width: 65%; padding-left: 1%; position: relative;}

#cc-nav ul .leafClosed + li:not([data-type="tool"]) { display: none; }

.campus-course #cc-progress-nav ul {
    margin: 0;
    float: left;
    padding: 0;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
}
.campus-course #cc-progress-nav ul li {
    overflow: hidden;
    display: block;
    float: left;
    text-indent: -999em;
    border-bottom: 7px solid #DDD;
}
.campus-course #cc-progress-nav ul li.status1 {
    border-bottom-color: #f00;
}
.campus-course #cc-progress-nav ul li.status3 {
    border-bottom-color: #009900;
}
.campus-course #cc-progress-nav ul li a {display: block; height: 25px; opacity: 0.7;}
.campus-course #cc-progress-nav ul li a:hover {background-color: #007fc4; opacity: 0.3;}

.campus-course .cc-linkprev { opacity: 0.2; transition: opacity 0.5s ease-in-out; position: absolute; top: 0%; bottom: 0%; left: -60px; width: 30px; border-radius: 0px 60px 60px 0px; text-indent: -999em; color: #000; outline: none; height: 100%; background: #F0F0F0; border: 1px solid #AAA; border-left: none; }
.campus-course .cc-linkprev:hover { opacity: 1; }
.campus-course .cc-linkprev:after { content: '«'; top: 45%; bottom: 55%; vertical-align: -50%; left: 0; position: absolute; width: 100%; height: 100%; text-indent: 0; text-align: center; font-size: 2em; }
.campus-course .cc-linknext { opacity: 0.2; transition: opacity 0.5s ease-in-out; position: absolute; top: 0%; bottom: 0%; right: -60px; width: 30px; border-radius: 60px 0px 0px 60px; text-indent: -999em; color: #000; outline: none; height: 100%; background: #F0F0F0; border: 1px solid #AAA; border-right: none; }
.campus-course .cc-linknext:hover { opacity: 1; }
.campus-course .cc-linknext:after { content: '»'; top: 45%; bottom: 55%; vertical-align: -50%; left: 0; position: absolute; width: 100%; height: 100%; text-indent: 0; text-align: center; font-size: 2em; }

#courseProgressOverview { width: 100%; clear: left; text-align: center; }
.campus-course progress[value] { width: 100%; height: 1.5em; }

.campus-course .progress-bar { border: 1px solid #ccc; }
.campus-course .progress-bar span { background-color: #FF0000; display: block; }

.campus-course .campusProgress { width: 100%; border: 1px solid #aaa; padding: 1px; border-radius: 3px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; display: block; clear: both; position: relative; margin: 10px 0px; background: #F0F0F0; }
.campus-course .campusProgressBar {
  background-color: #adadad;
  background: -ms-linear-gradient(bottom,#adadad,#e0e0e0);
  background: -moz-linear-gradient(bottom,#adadad,#e0e0e0);
  background: -o-linear-gradient(bottom,#adadad,#e0e0e0);
  background: -webkit-gradient(linear,left bottom,left top,from(#adadad),to(#e0e0e0));
  background: -webkit-linear-gradient(bottom,#adadad,#e0e0e0);
  background: linear-gradient(bottom,#adadad,#e0e0e0);
  height: 30px; border-radius: 3px;
}
.campus-course .campusProgressPercent { position: absolute; display: inline-block; top: 2px; left: 0; right: 0; font-size: 14px; margin-left: auto; margin-right: auto; text-align: center; }

.campus-course #courseActivityComplete { padding: 1em; display: inline-block; }
.campus-course #courseActivityComplete button { padding: 1em; }
.campus-course #courseActivityComplete button { border: 1px solid #c00; background-color: #FFA0A0; }
.campus-course.status3 #courseActivityComplete button { background-color: #C3FF88; border: 1px solid green; }

.campus-course #cc-page #loader {
    position: absolute; top: 0; left: 0; bottom: 0; right: 0;
    opacity: 0.8; display: none;
    background: url("../images/ajax-loader.gif") no-repeat center #eee;
}

/** Builtin tools **/
#cc-page .uploadform {}
#cc-page .uploadform input {display: block; width: 100%; font-size: 1.3em; box-sizing: border-box; padding: 3px;}