/* ====================================================
 * Company: Unity Technologies
 * Author:  Rickard Andersson, rickard@unity3d.com
======================================================= */

/****************************************
  ==== HERO
****************************************/

div.hero {
  padding: 60px 0 120px 0;
}
div.hero:before {
  background-image: url('../../images/assets/backgrounds/unity-overview-dead.jpg');
}

/****************************************
  ==== LEGEND
****************************************/

ul.legend {
  list-style: none;
}
ul.legend li {
  line-height: 15px; float: left; display: block; margin: 0 20px 10px 0; padding: 0 0 0 25px; position: relative;
}
ul.legend li div {
  width: 15px; height: 15px; display: block; position: absolute; top: 0; left: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: black;
}

/****************************************
  ==== LIST HEADER
****************************************/

div.list-header {
  width: 100%; padding: 10px 15px 10px 52px !important; background: #002835; cursor: pointer; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
}
div.list-header:before {
  top: 16px; left: 15px;
}
div.list-header h4 {
  float: left; color: #fff; margin: 0;
}
div.list-header a {
  float: right; margin: 2px 0 0 0;
}
p.subtext {
  margin: 0; padding: 20px 0;
}

/****************************************
  ==== CARD
****************************************/

div.list div.card {
  width: 100%; height: auto; margin: 0 0 1px 0; background: #fff; border-top: #e6e6e6 1px solid; position: relative; z-index: 2; -webkit-transition: all .1s; -moz-transition: all .1s; transition: all .1s;
}
div.list div.card:before {
  content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; -webkit-transition: all .1s; -moz-transition: all .1s; transition: all .1s;
}
.no-touch div.list div.card:hover, div.list div.open {
  z-index: 3; -webkit-box-shadow: 0 0 14px rgba(34,44,55,0.25); -moz-box-shadow: 0 0 14px rgba(34,44,55,0.25); box-shadow: 0 0 15px rgba(34,44,55,0.5);
}
.no-touch div.list div.card:hover:before, div.list div.open:before {
  -webkit-box-shadow: 0 0 0 5px #fff; -moz-box-shadow: 0 0 0 5px #fff; box-shadow: 0 0 0 5px #fff;
}
div.list div.card:last-child {
  border-bottom: #ececec 1px solid;
}
div.list div.card-lbl {
  padding: 20px 15px 0 15px;
}
div.list div.has-description div.card-lbl {
  cursor: pointer;
}
div.list div.card .trello-api-label, div.list div.card .status-label {
  width: 5px; display: block; position: absolute; top: 5px; bottom: 5px; left: 5px; z-index: 10; -webkit-border-radius: 0%; -moz-border-radius: 50%; border-radius: 0%; text-indent: -9999px; background: #f0f0f0;
}
div.list div.card p.lbl {
  line-height: 22px; float: left; position: relative; padding: 0 30px 20px 35px; font-size: 1.0625em;
}
div.list div.open p.lbl {
  font-weight: 700;
}
div.list div.has-description p.lbl:before {
  content: ''; display: block; position: absolute; top: 6px; left: 16px; border: transparent 5px solid; border-left-color: #002835;
}
div.list div.open p.lbl:before {
  top: 9px; left: 15px; border-top-color: #002835; border-left-color: transparent;
}
div.list div.card p.lbl .recent {
  width: 20px; height: 20px; position: absolute; right: 0; top: 2px;
}
div.list div.card p.lbl a.link {
  display: inline-block; position: relative; top: 2px; margin: 0 0 0 5px;
}
div.list div.card .description {
  display: none; cursor: auto; padding: 0 20px 5px 35px;
}
div.list div.open .description {
  display: block;
}
div.list div.open .description p {
  font-size: 0.9375em;
}
div.list div.card div.tags {
  float: right;
}
div.list div.card div.tags div {
  height: 22px; line-height: 22px; float: left; margin: 0 0 0 5px; padding: 0 5px; font-size: 0.75em; color: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: #b83c82;
}

/****************************************
  ==== TAG COLORS
****************************************/

.trello-color-green, .status-on-track { background: #2196F3 !important; color: #fff; }
.trello-color-yellow, .status-at-risk { background: #ff9800 !important; color: #fff; }
.trello-color-orange { background: #ff9800 !important; color: #fff; }
.trello-color-red { background: #f44336 !important; color: #fff; }
.trello-color-black { background: #002835 !important; color: #fff; }
.trello-color-sky { background: #2196f3 !important; color: #fff; }

/**************************************************
  #### MEDIA QUERIES
**************************************************/

@media only screen and (min-width: 150px) and (max-width: 980px){

div.hero {
  padding: 0 0 60px 0;
}
div.list div.card p.lbl {
  line-height: 20px; padding: 0 25px 10px 35px;
}
div.list div.card div.tags {
  width: 100%; float: left; padding: 0 0 10px 10px;
}
div.list div.card div.tags div {
  margin: 0 0 5px 5px;
}
div.list div.card p.lbl .recent {
  width: 16px; height: 16px; top: 2px;
}

}
@media only screen and (max-width: 767px){

.hero:before {
  background-image: url(../../images/assets/backgrounds/unity-roadmap-m.jpg);
}
div.list-header:before {
  top: 12px;
}
div.list-header a {
  display: none;
}

}