/*-------------------------------------------------------------------------------------------
    
    Experiment Dashboard

    Author  : Barrett Cox, http://barrettcox.com
    
-------------------------------------------------------------------------------------------*/


/*-------------------------------------------------
    0.0 - Imports
-------------------------------------------------*/
/* Google Fonts (Loved by the King) */
@import url('http://fonts.googleapis.com/css?family=Loved+by+the+King');
/* Google Fonts (Roboto) */
@import url('//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic');
/*- End - 0.0 - Imports -------------------------*/


/*-------------------------------------------------
    1.0 - Mobile First
-------------------------------------------------*/
/*--------------------------------
    1.1 - Basic table styling
--------------------------------*/
#ed-dashboard-table-container {
  font-family : 'Roboto', sans-serif;
}
.ed-table-dashboard {
  display: block;
  overflow-x: auto;
  border-spacing: 10px;
  border-collapse: separate;
  box-sizing : border-box;
  margin-left : -10px; /*-- Same as -(border-spacing) --*/
  -webkit-font-smoothing: antialiased; /*-- Fixes webkit font aliasing issue during CSS transitions --*/
}
.ed-table-dashboard tr > th {
  background-color : transparent;
  border : none;
  text-transform : uppercase;
  text-align : left;
}
.ed-table-dashboard tr > td {
  background-color : transparent;
  border : none;
  padding : 0;
  text-align : left;  
}
/*- End - 1.1 ------------------*/


/*--------------------------------
    1.2 - Cell dimensions
--------------------------------*/
.ed-table-dashboard tr > th,
.ed-table-dashboard tr > td > a {
  width : 210px;
  height : 121px;
}
.ed-table-dashboard tr > th:first-child,
.ed-table-dashboard tr > td.ed-td-idea-full > a,
.ed-table-dashboard tr > td.ed-td-idea-empty > a {
  width : 234px;
  height : 119px;
}
.ed-table-dashboard tr > th,
.ed-table-dashboard tr > th:first-child {
  height : auto;
}
/*- End - 1.2 ------------------*/


/*--------------------------------
    1.4 - Cell links
--------------------------------*/
.ed-table-dashboard tr > td > a {
  display : block;
  position : relative;
  box-sizing : border-box;
  padding : 20px;
  text-decoration : none;
  color : #333;
  -webkit-transition: background-color 500ms ease-out 0s, color 500ms ease-out 0s;
  -moz-transition: background-color 500ms ease-out 0s, color 500ms ease-out 0s;
  -o-transition: background-color 500ms ease-out 0s, color 500ms ease-out 0s;
  transition: background-color 500ms ease-out 0s, color 500ms ease-out 0s;
}
.ed-table-dashboard tr > td > a > h3 {
  margin-top : 0;
  margin-bottom : 0;
}
.ed-table-dashboard tr > td.ed-td-idea-full > a > h3,
.ed-table-dashboard tr > td.ed-td-idea-empty > a > h3 {
  padding-right : 10px;
} 
.ed-table-dashboard tr > td.ed-td-idea-full > a,
.ed-table-dashboard tr > td.ed-td-idea-empty > a {
  padding-right : 30px;
} 
.ed-table-dashboard tr > td > a:active,
.ed-table-dashboard tr > td > a:hover,
.ed-table-dashboard tr > td > a:visited {
  text-decoration : none;
  color : #333;
}
/*- End - 1.4 ------------------*/

/*--------------------------------
    1.7 - Fonts
--------------------------------*/
.ed-table-dashboard tr > td > a > h3 { 
  font-size : 16px;
  line-height : 1.3em;
  font-family: 'Loved by the King', cursive;
  font-weight : 400;
}
.ed-table-dashboard tr > td > a > h4,
.ed-table-dashboard tr > td > a > p,
.ed-table-dashboard tr > td > a > h4.ed-stage,
.ed-table-dashboard tr > td > a > h4.ed-next {
  font-size : 12px;
  line-height : 1.3em;
}
.ed-table-dashboard tr > td > a > h4.ed-stage,
.ed-table-dashboard tr > td > a > h4.ed-next {
  font-weight : 600;
}
.ed-table-dashboard tr > td > a > p {
  line-height : 1.5em;
  margin : 4px 0;
}
/*- End - 1.7 ------------------*/


/*--------------------------------
    1.8 - Hide/Show
--------------------------------*/
/*
.ed-table-dashboard tr > td > a > p { 
  display : none;
}
*/
/* Only show the idea paragraphs */
/*
.ed-table-dashboard tr > td.ed-td-idea-full > a > p,
.ed-table-dashboard tr > td.ed-td-idea-empty > a > p {
  display : block;
}
*/
/* Hide What's Next on the completed experiments */
/*
.ed-table-dashboard tr > td.ed-td-stage-complete > a > h4.ed-next {
  display : none;
}
*/
/* Hide all What's Next for mobile */
.ed-table-dashboard tr > td > a > h4.ed-next {
  display : none;
}
/*- End - 1.8 ------------------*/


/*--------------------------------
    1.9 - Stage & What's New
--------------------------------*/
.ed-table-dashboard tr > td > a > h4.ed-stage,
.ed-table-dashboard tr > td > a > h4.ed-next {
  position : relative;
  margin : 0;
}
/*- End - 1.8 ------------------*/


/*--------------------------------
    1.10 - Cell backgrounds
--------------------------------*/
.ed-table-dashboard tr > td.ed-td-idea-full > a,
.ed-table-dashboard tr > td.ed-td-idea-empty > a {
  background-image : url("../images/bg-frame-idea.png");
  background-size : 100% auto;
  background-position : 0 -1px;
  background-repeat : no-repeat;
}
.ed-table-dashboard tr > td.ed-td-stage-debrief > a,
.ed-table-dashboard tr > td.ed-td-stage-design > a,
.ed-table-dashboard tr > td.ed-td-stage-running > a,
.ed-table-dashboard tr > td.ed-td-stage-complete > a {
  background-image : url("../images/bg-frame-experiment.png");
  background-size : 100% auto;
  background-position : 0 -1px;
  background-repeat : no-repeat;
}

.ed-table-dashboard tr > td.ed-td-idea-full > a {
  background-color : #b9e5fb;
}
.ed-table-dashboard tr > td.ed-td-idea-empty > a {
  background-color : #e2f4fd;
}
.ed-table-dashboard tr > td.ed-td-stage-debrief > a {
  background-color : #fbc6b4;
}
.ed-table-dashboard tr > td.ed-td-stage-design > a {
  background-color : #ffea88;
}
.ed-table-dashboard tr > td.ed-td-stage-running > a {
  background-color : #8cc751;
}
.ed-table-dashboard tr > td.ed-td-stage-complete > a {
  background-color : #ddd;
}

.ed-table-dashboard tr > td > a:hover,
.ed-table-dashboard tr > td > a:active {
  background-color : #333;
}
.ed-table-dashboard tr > td > a:hover > h3,
.ed-table-dashboard tr > td > a:active > h3,
.ed-table-dashboard tr > td > a:hover > h4,
.ed-table-dashboard tr > td > a:active > h4,
.ed-table-dashboard tr > td > a:hover > p,
.ed-table-dashboard tr > td > a:active > p {
  color : #fff;
}
/*- End - 1.10 -----------------*/


/*--------------------------------
    1.12 - Help Needed icon
--------------------------------*/
.ed-table-dashboard tr > td > a > .ed-help {
  display : none;
}
.ed-table-dashboard tr > td > a > .ed-help.needed {
  display : block;
  position : absolute;
  right : 10px;
  bottom : 10px;
  width : 10px;
  height : 10px;
  background-color : #f1592a;
  border-radius : 50%;
  -moz-border-radius : 50%;
  -webkit-border-radius : 50%;
}
.ed-table-dashboard tr > td > a > .ed-help.needed:hover:after {
  content: attr(data-after);
  display : block;
  position : absolute;
  top : -5px;
  left : 20px;
  width : 100px;
  padding : 4px;
  box-sizing : border-box;
  background-color : #f8f8f8;
  text-align : center;
  visibility: visible;
  font-size: 80%;
  font-style: italic;
}
a#ed-dashboard-feedback:hover:after {
  content: attr(after);
  visibility: visible;
  font-size: 80%;
  font-style: italic;
}
/*- End - 1.12 -----------------*/


/*--------------------------------
    1.13 - Experiment Widget
--------------------------------*/
#ed-widget h2 {
  text-align : center;
}
#ed-widget table {
  width : 100%;
  color : #222;
  border : 4px solid #222;
}
#ed-widget table th,
#ed-widget table td {
  width : 33.3333333333%;
  box-sizing : border-box;
  text-align : center;
  color : #222;
  border : none;
  border-right : 4px solid #222;
}
#ed-widget table th:last-child,
#ed-widget table td:last-child {
  border-right : none;
}
#ed-widget table th.ed-widget-bg-blue,
#ed-widget table td.ed-widget-bg-blue {
  background-color : #5ac9e6;
}
#ed-widget table th.ed-widget-bg-green,
#ed-widget table td.ed-widget-bg-green {
  background-color : #8ec649;
}
#ed-widget table th.ed-widget-bg-orange,
#ed-widget table td.ed-widget-bg-orange {
  background-color : #f69432;
}
#ed-widget table th {
  font-size : 22px;
  font-family: 'Loved by the King', cursive;
  font-weight : 400;
  vertical-align : top;
}
#ed-widget table td {
   font-size : 36px;
   font-weight : 600;
   vertical-align : middle;
}
/*- End - 1.13 -----------------*/


/*--------------------------------
    1.14 - Idea/Experiment
           Detail Tables
--------------------------------*/
.ed-table-details {
  max-width : 700px;
  margin : 0 auto;
  border-collapse : collapse;
}
.ed-table-details th,
.ed-table-details td {
  border : none;
}
.ed-table-details td ul {
  list-style-type : disc;
  list-style-position : outside;
  margin : 0;
  padding-left : 15px;
}
.ed-table-details td li {
  margin : 15px 0;
}
.ed-table-details td li:first-child {
  margin-top : 0;
}
.ed-table-details th {
  background-color : transparent;
  text-align : right;
  font-family : 'Loved by the King', cursive;
  font-weight : 400;
  font-size : 24px;
  line-height : 1.3em;
  vertical-align : top;
  width : 50%;
}
.ed-table-details td {
  vertical-align : top;
  padding-top : 10px;
  padding-bottom : 30px;
}
.ed-table-details td a {
  display : block;
  word-break: break-all;
}
.ed-table-details td.forced-wrap {
  word-break: break-all;
}
/*- End - 1.14 -----------------*/

/*- End - 1.0 - Mobile First --------------------*/


/*-------------------------------------------------
    2.0 - Media (min-width: 600px)
-------------------------------------------------*/
@media screen and (min-width: 600px) {

}
/*- End - 4.0 - Media (min-width: 600px) --------*/


/*-------------------------------------------------
    3.0 - Media (min-width: 768px)
-------------------------------------------------*/
@media screen and (min-width: 768px) {
  /*--------------------------------
      3.1 - Basic table styling
  --------------------------------*/
  .ed-table-dashboard {
    border-spacing : 15px;
    margin-left : -15px; /*-- Same as -(border-spacing) --*/
  }
  /*- End - 3.1 ------------------*/


  /*--------------------------------
      3.2 - Cell dimensions
  --------------------------------*/
  .ed-table-dashboard tr > th,
  .ed-table-dashboard tr > td > a {
    width : 345px;
    height : 200px;
  }
  .ed-table-dashboard tr > th:first-child,
  .ed-table-dashboard tr > td.ed-td-idea-full > a,
  .ed-table-dashboard tr > td.ed-td-idea-empty > a {
    width : 392px;
    height : 200px;
  }
  .ed-table-dashboard tr > th,
  .ed-table-dashboard tr > th:first-child {
    height : auto;
  }
  /*- End - 3.1 ------------------*/


  /*--------------------------------
      3.7 - Fonts
  --------------------------------*/
  .ed-table-dashboard tr > td > a > h3 { 
    font-size : 20px;
  }
  .ed-table-dashboard tr > td > a > h4,
  .ed-table-dashboard tr > td > a > h4.ed-stage,
  .ed-table-dashboard tr > td > a > h4.ed-next,
  .ed-table-dashboard tr > td > a > p {
    font-size : 16px;
    line-height : 1.3em;
  }
  .ed-table-dashboard tr > td > a > p {
    line-height : 1.5em;
  }
  /*- End - 3.7 ------------------*/


  /*--------------------------------
      3.8 - Hide/Show
  --------------------------------*/
  .ed-table-dashboard tr > td > a > p { 
    display : block; 
  }
  
  /* Show What's Next on all experiments */
  .ed-table-dashboard tr > td > a > h4.ed-next {
    display : block;
  }
  /* Hide What's Next on the completed experiments */
  .ed-table-dashboard tr > td.ed-td-stage-complete > a > h4.ed-next {
    display : none;
  }

  /*- End - 3.8 ------------------*/


  /*--------------------------------
      3.9 - Stage & What's New
  --------------------------------*/
  /* Absolutely position the Stage and What's Next text */
  .ed-table-dashboard tr > td > a > h4.ed-stage,
  .ed-table-dashboard tr > td > a > h4.ed-next {
    position : absolute;
    left : 20px;
    white-space : nowrap; /* Prevent text from wrapping */
  }
  .ed-table-dashboard tr > td > a > h4.ed-stage {
    bottom : 37px;
  }
  .ed-table-dashboard tr > td > a > h4.ed-next {
    bottom : 14px;
  }> 
  /*- End - 3.9 ------------------*/


  /*--------------------------------
      3.12 - Help Needed icon
  --------------------------------*/
  .ed-table-dashboard tr > td > a > .ed-help.needed {
    right : 15px;
    bottom : 15px;
    width : 15px;
    height : 15px;
  }
  /*- End - 3.12 ------------------*/
  
}
/*- End - 3.0 - Media (min-width: 768px) --------*/


/*-------------------------------------------------
    4.0 - Media (min-width: 900px)
-------------------------------------------------*/
@media screen and (min-width: 900px) {
  /*--------------------------------
      4.1 - Basic table styling
  --------------------------------*/
  .ed-table-dashboard {
    border-spacing : 15px;
    margin-left : -15px; /*-- Same as -(border-spacing) --*/
  }
  /*- End - 4.1 ------------------*/
  
  
  /*--------------------------------
      4.7 - Fonts
  --------------------------------*/
  .ed-table-dashboard tr > td > a > h3 { 
    font-size : 24px;
  }
  .ed-table-dashboard tr > td > a > h4 { 
    font-size : 18px;
  }
  .ed-table-dashboard tr > td > a > p { 
    font-size : 16px;
  }
  /*- End - 4.7 ------------------*/


  /*--------------------------------
      4.8 - Help Needed icon
  --------------------------------*/
  .ed-table-dashboard tr > td > a > .ed-help.needed {
    right : 15px;
    bottom : 15px;
    width : 20px;
    height : 20px;
  }
  /*- End - 4.8 ------------------*/
}
/*- End - 4.0 - Media (min-width: 900px) --------*/

/*- End - Experiment Dashboard ------------------------------------------------------------*/