/* highlighted header text, and, hovered link text */
/* normal header text, nav-bar link sub-text, 'Find Courses' - 'OR' - 'Create Course' text, 'Featured Courses' sub-text, and, '35 minutes ago' & 'p2pu.org' link text */
/*NOTE: $steel is also used for: thumbnail footer-badge-holder background, and nav-bar search box background, also for horizontal dividers in footer */
/* body text, small headers text, small container text, nav-bar link text, search box search text, thumbnail text, thumbnail image dimensions text, AND, nav-bar search box icon*/
/*also: footer header text and footer body text */
/* nav-bar search placeholder text, 'Find Course' & 'Create Course' button text, thumbnail 'OK' badge text, and, thumbnail footer-badge-holder text */
/* highlighted-2 header text */
/*NOTE: $apricot is also used for: 'Find Course' button background */
/* navbar-link-h1-right hover */
/* user dropdown */
/* navbar dropdown menu links (and background) and bold text in large wells (e.g. on the bottom of the Find [FKA Learn] Page) */
/* Background Colors */
/* 'Create Course' button background, and, 'OK' badge background */
/* nav-bar background, small container background, thumbnail background, and, general row-span container background */
/* body background */
/* thumbnail image placeholder background */
/* footer background */
/* delete button */
/*NOTE: $apricot is also used for: 'Find Course' button background */
/*NOTE: $steel is also used for: thumbnail footer-badge-holder background, and nav-bar search box background */
/* Border Colors */
/* bottom-only border on activity posts and 'P2PU Blog' container box */
/* bottom-only border on large well (e.g. at the bottom of the Find [FKA Learn] Page) */
/* top-only border on thumbnail footer-badge-holder */
/* bottom-only border on 'Find Course' & 'Create Course' button container */
/* inner-lower-bottom-only border on 'OK' badges */
/* upper-outer-top-only border on 'OK' badges */
/* top-only border on nav-bar search box */
/* bottom-only border on 'Find Courses' button */
/* bottom-only border on 'Create Course' button */
/* bottom only border on Supporters' image links in footer */
/* bottom only border on slate button */
/* verticle divider in nav bar user logged-in dropdown menu */
/* bottom border only on clemintine buttons and task list progress bar */
body {
  font-family: "sense", Helvetica, sans-serif;
  background-image: url("/static/images/homepage/bgtexture.png"); }

h1, h2, h3, h4, h5 {
  font-family: 'Arvo', serif; }

a:focus {
  outline: none; }

section {
  border-top: 1px solid #d8dbde;
  box-shadow: inset 0 5px 5px -3px rgba(0, 0, 0, 0.1);
  background: #f3f4f8;
  background: url("/static/images/homepage/bgtexture.png"), -moz-linear-gradient(top, #f3f4f8 0%, white 100%);
  background: url("/static/images/homepage/bgtexture.png"), -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f4f8), color-stop(100%, white));
  background: url("/static/images/homepage/bgtexture.png"), -webkit-linear-gradient(top, #f3f4f8 0%, white 100%);
  background: url("/static/images/homepage/bgtexture.png"), -o-linear-gradient(top, #f3f4f8 0%, white 100%);
  background: url("/static/images/homepage/bgtexture.png"), -ms-linear-gradient(top, #f3f4f8 0%, white 100%);
  background: url("/static/images/homepage/bgtexture.png"), linear-gradient(to bottom, #f3f4f8 0%, white 100%); }

footer {
  margin: 0 !important;
  padding: 1em 0 50px 0;
  background-color: #e1e1e1; }

.overflow-hidden {
  overflow: hidden; }

.top-offset-span {
  margin-top: -67px;
  display: block; }

.text-appricot {
  color: #ff7300; }

.text-cyan {
  color: #05c6b4; }

/********* Navigation bar ****************/
.navbar .brand {
  background: url("/static/images/homepage/logo-p2pu-menu.png") !important; }

.action {
  margin: 0; }

/**************Jumbotron**************/
.jumbotron {
  margin-bottom: 50px;
  text-align: center;
  position: relative;
  background-image: url("/static/images/homepage/jumbotron/photo-learn_one.jpg");
  background-size: cover;
  background-position: 50% 44%;
  text-align: center;
  height: 334px;
  margin-bottom: -60px;
  font-size: 21px;
  line-height: 1.3em;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.5), 0 0 32px rgba(0, 0, 0, 0.25), 0 1px rgba(0, 0, 0, 0.75);
  position: relative; }
  .jumbotron .masthead {
    position: relative;
    bottom: -80px; }
  .jumbotron .main-feature {
    color: white; }
  .jumbotron .lead {
    color: white;
    font-size: 21px;
    font-weight: 200;
    text-transform: uppercase;
    line-height: 50px;
    margin-left: 15px;
    font-family: "arvo", Helvetica, sans-serif;
    margin-bottom: 0; }
  .jumbotron .do-something {
    height: 60px;
    text-align: left; }

.p2pu-tour {
  padding: 17px 25px 17px 0;
  font-weight: bold; }
  .p2pu-tour:hover {
    text-decoration: none; }

.call-to-action {
  margin: 0 20px;
  font-weight: bold;
  color: white; }

/*******Main Menu *******/
.actions {
  padding: 0 20px 20px 0;
  margin: 0 0 10px 0;
  background-color: white;
  position: relative;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px; }
  .actions li {
    width: 28%;
    margin-left: 5%;
    margin-top: 10px;
    float: left; }
    .actions li:nth-child(3n + 1):last-child {
      float: none;
      text-align: center;
      clear: both;
      margin: 0 auto 10px auto;
      padding-top: 20px;
      width: 45%; }
      .actions li:nth-child(3n + 1):last-child a {
        margin: 25px 0 0 28%; }
        .actions li:nth-child(3n + 1):last-child a h2 {
          float: left; }
      .actions li:nth-child(3n + 1):last-child p {
        float: left; }
    .actions li a {
      display: block; }
      .actions li a:hover {
        text-decoration: none; }
        .actions li a:hover .actions-icons {
          -webkit-transform: scale(1.2);
          transform: scale(1.2);
          -moz-transform: scale(1.2); }
        .actions li a:hover h2 {
          color: #ff7300; }
      .actions li a .actions-icons {
        background: url("/static/images/homepage/icons_sprite.png") 0px 3px no-repeat;
        background-size: cover; }
      .actions li a.icon-courses
      .actions-icons {
        background-position: 0% 1px; }
      .actions li a.icon-badges
      .actions-icons {
        background-position: 17.3% 1px; }
      .actions li a.icon-schools
      .actions-icons {
        background-position: 34.6% 1px; }
      .actions li a.icon-moocs
      .actions-icons {
        background-position: 51.9% 1px; }
      .actions li a.icon-blog
      .actions-icons {
        background-position: 69.2% 1px; }
      .actions li a.icon-community
      .actions-icons {
        background-position: 86.5% 1px; }
      .actions li a.icon-reports
      .actions-icons {
        background-position: 103.8% 1px; }
      .actions li a .actions-icons {
        float: left;
        margin-right: 20px;
        height: 60px;
        width: 60px; }
    .actions li p {
      overflow: hidden; }

.billboard {
  padding: 20px 0;
  margin-bottom: 40px;
  zoom: 1; }
  .billboard.top {
    margin-top: 0; }
  .billboard .img-large {
    float: left;
    margin-right: 20px;
    width: 165px;
    margin-top: 20px; }
  .billboard .controls a {
    margin: 20px 10px;
    position: relative;
    padding-right: 40px; }
    .billboard .controls a i {
      position: absolute;
      right: 10px;
      top: 40%;
      line-height: 36px;
      margin-top: -13px; }
  .billboard .featured-items-wrap .featured-items-item {
    position: relative;
    margin-left: 30px; }
  .billboard .featured-items-wrap .featured-items-item-wrap {
    background-color: #fcfcfc;
    min-height: 290px;
    padding: 10px 10px 40px 10px; }
  .billboard .featured-items-wrap .featured-items-img-wrap {
    text-align: center;
    height: 155px; }
  .billboard .featured-items-wrap .featured-items-img {
    max-width: 200px;
    max-height: 150px; }
  .billboard .featured-items-wrap .featured-items-item-controls {
    position: absolute;
    bottom: 15px; }
  .billboard .courses .section-caption {
    margin-left: 0; }
    .billboard .courses .section-caption a {
      float: left;
      margin: 20px 10px 20px 0; }
  .billboard .badges .section-caption {
    margin-left: 0; }
    .billboard .badges .section-caption a {
      float: left;
      margin: 20px 10px 20px 0; }
  .billboard .badges .featured-items-img {
    width: auto;
    height: auto; }
  .billboard .schools .featured-items-item-wrap > img,
  .billboard .schools .featured-items-img {
    width: auto;
    height: auto;
    float: left;
    margin-right: 15px;
    margin-top: 10px; }
  .billboard .schools .featured-items-item-caption {
    overflow: hidden; }
  .billboard .schools .featured-items-item-controls {
    right: 15px; }
  .billboard .schools .featured-items-item-wrap {
    min-height: 200px; }
  .billboard .community-members-list .community-member {
    width: 84px;
    height: 84px;
    margin-right: -5px; }
  .billboard .community-member-tooltip {
    display: none; }
  .billboard .we-are {
    list-style-type: none;
    margin-left: 0; }
    .billboard .we-are li {
      margin: 10px;
      position: relative;
      text-align: center;
      background: #fff;
      padding: 10px;
      width: 68px;
      height: 80px;
      border: 1px solid #aaa;
      float: left;
      cursor: pointer;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      -ms-border-radius: 4px;
      -o-border-radius: 4px;
      border-radius: 4px;
      -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
      -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
      .billboard .we-are li:first-child {
        margin-left: 0; }
      .billboard .we-are li img {
        width: 68px;
        height: 68px; }
      .billboard .we-are li .caption {
        text-align: left; }
  .billboard .blog-list {
    margin-left: -30px;
    margin-bottom: 50px; }
    .billboard .blog-list li .blog-feed-wrap {
      height: 140px; }
    .billboard .blog-list li img {
      width: 100px;
      height: 100px;
      float: left;
      margin-right: 20px; }
    .billboard .blog-list li h4 {
      color: #05c6b4; }
    .billboard .blog-list li a {
      font-weight: bold;
      width: 80%;
      display: block;
      position: relative; }
      .billboard .blog-list li a:hover {
        text-decoration: none; }
        .billboard .blog-list li a:hover h3 {
          color: #ff7300; }
    .billboard .blog-list li .icon-chevron-right {
      position: absolute;
      right: -19%;
      top: 20%; }
  .billboard .moocs .section-caption {
    margin-left: 0; }
    .billboard .moocs .section-caption a {
      float: left;
      margin: 20px 10px 20px 0; }
  .billboard .moocs .featured-items-item {
    margin-bottom: 20px; }
  .billboard .moocs .featured-items-item-controls {
    right: 15px; }
  .billboard .description {
    overflow: hidden; }

.timeline .text-align-center {
  text-align: center;
  position: relative;
  z-index: 10; }

.timeline-events {
  margin: 0 auto;
  padding: 0;
  width: 7px;
  height: 760px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background: #848689 url(/static/images/timeline-bg.jpg) no-repeat bottom center;
  position: relative;
  margin-top: 50px; }

.timeline-events li {
  background: white;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  border: 5px solid #848689;
  list-style: none;
  margin-bottom: 107px;
  margin-left: -12px;
  position: relative; }
  .timeline-events li .popover {
    opacity: 1;
    background: #e8ebef;
    color: #848689;
    padding: 15px 0 15px 0;
    font-size: 18px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    display: block;
    top: -20px; }
    .timeline-events li .popover .arrow {
      top: 20%; }
    .timeline-events li .popover.top {
      top: -150px;
      left: -113px; }
      .timeline-events li .popover.top .arrow {
        top: auto; }
    .timeline-events li .popover.left {
      left: -250px; }
    .timeline-events li .popover.right {
      left: 30px; }

.power-users .thumbnail {
  background-color: white;
  padding-left: 20px; }
.power-users .power-user-img {
  margin-right: 30px;
  width: 120px;
  height: 120px;
  margin-top: 30px; }
.power-users .caption {
  overflow: hidden; }
.power-users .user-courses li {
  float: left;
  margin-right: 30px; }
  .power-users .user-courses li img {
    width: 100px;
    height: 100px; }