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

body{
  background-color: #f2f2f2;
}

.icon-gears{color:#0079c2;}
.icon-person{color:#9fcf67;}
.icon-hands{color:#F0A800;}
.icon-brain{color:#e01a22;}


/***************************************

  1. TYPOGRAPHY
  2. MAIN WRAPPERS
  3. COURSE CARDS
  4. LEGEND
  5. IT
  6. HR

***************************************/



/*  1. TYPOGRAPHY
**************************************/

.path-wrapper h2 {
  font-family: arial, helvetica, sans-serif;
  /*color: #55c4e9;*/
  font-weight: 100;
  font-size: 24px;
}



/*  2. MAIN WRAPPERS
**************************************/


.path-wrapper {     /* wrapper for pathed course blocks */
  display:inline-block;
  background-color: #FFF;
  min-height: 200px;
  padding: 5px 30px 20px 30px;
  margin: 20px 10px 20px 10px;
}

.course-wrapper{    /* wrapper for non pathed course blocks */
  display:inline-block;
  margin: 0 10px 20px 10px;
  background-color: #FFF;
  padding: 5px 30px 20px 30px;  
}



/*  3. COURSE CARDS
**************************************/

.course-card-wrapper {
  position: relative;
  float: left;
}

.course-card {
  color: #4c4c4c;
  height: 125px;
  width: 125px;
  padding: 1px 15px;
  margin-top: 10px;
}

.course-card:hover {
  cursor: pointer;
}

.time{
  position:absolute;
  bottom:15px;
}

.light {
	background-color: #E5E5E5;
}

.dark {
	background-color: #d9d9d9;
}

.course-card ul {
  padding-right: 15px;
  position: absolute;
  right: 0;
  bottom: 2px;
  text-align: right;
}

.course-card li {
  display: inline;
  vertical-align: bottom;
  list-style: none;
}

.icon {
  font-size: 20px;
  text-shadow: none;
}

.small {
  position:relative;
  height:90px;
  display:block;
}

.optional {
  background: repeating-linear-gradient(45deg, #E5E5E5, #E5E5E5 3px, #d9d9d9 3px, #d9d9d9 8px);
}

.optional.dark2 {
  background: repeating-linear-gradient(45deg, #d9d9d9, #d9d9d9 3px, #cccccc 3px, #cccccc 8px);
}

.optional:hover {
  background: repeating-linear-gradient(45deg, #55c4e9, #55c4e9 3px, #55c4e9 3px, #55c4e9 8px);
}

.arrow-right-light {
  position: absolute;
  right: -10px;
  margin-top: -70px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #E5E5E5;
  z-index: 99;
}

.arrow-right-dark {
  position: absolute;
  right: -10px;
  margin-top: -70px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #d9d9d9;
  z-index: 99;
}

.stacked-arrow {
  position: absolute;
  right: -10px;
  margin-top: -50px;
}



/*  4. LEGEND
**************************************/

.legend-wrapper {
  margin-right: 30px;
}

.legend {
  height: 30px;
  width: 20px;
  display: inline-block;
  margin-bottom: -10px;
}

.legend-text {
  margin-bottom: 20px;
}

.legend-icon {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
    padding-bottom:5px;
    display:block;
}

.legend-icon span {
  vertical-align:middle;
}

.legend-block{
  display:inline-block;
  width: 160px;
  vertical-align: top;
}


/*  5. IT LEARNING
**************************************/

.course-card.it:hover {
  background-color: #55c4e9;
}

.course-card.it:hover + .arrow-right-light  {
  border-left-color: #55c4e9;
}

.course-card.it:hover + .arrow-right-dark  {
  border-left-color: #55c4e9;
}




/*  6. HR LEARNING
**************************************/

.content-wrapper {
  display: table;
  position: relative;
  width: 100%;
  margin: 20px 10px 20px 10px;  
}

.text-wrapper{
  display: table-cell;
  margin-right: 20px;
  height: 100%;
  min-width: 250px;
  max-width: 930px;
  float: left;
  background-color: #ff8d7b;
  padding: 15px 30px 20px 30px;
  /* shadow */
  box-shadow: 0px 2px 5px 0px rgba(170, 170, 170, 0.5);
}

#BA-introtext {
  color: #FFFFFF;
  margin-bottom: 5px;
  padding-top: 15px;
}

@media screen and (min-width: 1080px) {
  #BA-introtext {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    padding-top:15px;
    }
}

#BA-introtext p {
  font-size: 14px;
  margin-top:0px;
}

#BA-introtext li {
  font-size: 14px;
  list-style: circle;
}
#BA-introtext ul {
  margin-left: 15px;
}

#BA-introtext a {
  font-weight: bold;
  text-decoration: underline;
  list-style: none;
}
#BA-introtext a:hover {
  color: #666;
}

.competency {
  display: inline-block;
  text-align: center;
  background-color: #fff;
  padding-top: 15px;
  min-width: 50px;
  /*border-right: 1px dotted #ccc;*/
}

#leader {
  padding: 5px 15px;
  border-top: 10px solid #ff8d7b;
  box-sizing: content-box;
}

.course-card.hr {
  margin-right: 10px;
}
.course-card.hr:hover {
  background-color: #ff8d7b;
}

.course-wrapper div {
  margin-right: 10px;
}

.hr .course-card-wrapper .icon {
  background-color: #000000;
}