/* Header */

#header h1 {
  font-size: 28px;
}

#header h1 span {
  font-size: 26px;
}

.cover-image{
  min-height:450px;
}

figure {
  margin-bottom: 30px;
}

figcaption{
  font-size: 18px;
}

/* Table styling*/

.table>thead>tr>th {
    line-height: 20px;
    padding: 10px; 
    vertical-align: middle;
}

.table>tbody>tr>td, .table>thead>tr>th {
    font-size: 16px;
    line-height: 20px;
    padding: 10px;
    vertical-align: top;
    border:0px!important;
}

.contents-table>tbody>tr>td {
    font-size: 16px;
    line-height: 22px;
    padding: 0;
    padding-left: 20px;
    vertical-align: top;
}

.contents-table>tbody>tr>td.labels-holder{
    border:0px !important;
}

.contents-table>thead>tr>th {
    background: transparent;
    color: darkred;
    font-size: 16px;
    line-height: 20px;
    padding: 0px 10px;
    vertical-align: middle;
}

 .contents-table > tbody > tr {
  border-top:1px solid #D3D3D3;

}
.page-number{
  text-align:right;
  font-weight:800;
  min-width:40px;
}

.labels-holder{
  min-width:70px;
  display: inline-block;
  border-top: 0;
}

/* Label styling */

.drag-label {
  cursor: move;
  display: inline-block;
  text-align:center;
  color: #FFF;
}

.circle{
  width: 30px;
  height: 30px;
  background: red;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
}

.triangle{
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 30px solid blue;
}

.square{
  width:30px;
  height:30px;
  background:purple;
}

.ui-draggable.being-dragged {
  background: #5a8647 !important;
  cursor: move;
  box-shadow: 10px 10px 8px -1px rgba(0, 0, 0, .32);
  -moz-box-shadow: 10px 10px 8px -1px rgba(0, 0, 0, .32);
  -webkit-box-shadow: 10px 10px 8px -1px rgba(0, 0, 0, .32);
   z-index: 6;
}

.btn{
  margin:0 5px;
}

.drop-hover{
  background:orange;
  opacity:0.5;
}

.dropped{
  margin:2px;
}

.circle.dropped{
  height:20px;
  width:20px;
   -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.triangle.dropped{
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid blue;
}

.square.dropped{
  width:20px;
  height:20px;
}

/* Tablet */
@media(min-width: 768px){

.cover-image{
  max-height:350px;
}

}

/* Desktop */
@media(min-width:992px){

  #header h1 {
    font-size: 35px;
  }

  #header h1 span {
    font-size: 30px;

  }

}


/* Large Desktop */
@media(min-width:1200px){


}


@page {
  size:A4 portrait;
  margin:2px; 
}

@media print {

  #activity-intro{
    page-break-after:avoid;
    margin-bottom:30px;
    margin-top:20px;
    display:block;
  }

  table{
    display:none;
  }

  .page-number{
    text-align:right;
    font-weight:800;
    width:40px;
  }

  .content-details{
    width:950px;
  }

  .dropped, .contents-table{
    display:inline-block !important;
  }

  p.lead{
    font-size:18pt;
  }

  .cover-image{
    height:8cm;
  }

  .circle{
    background: red !important;
  }

  .triangle{
    border-bottom: 20px solid blue !important;
  }

  .square{
    background:purple !important;
  }
  
  .btn, hr, .tooltip, .well, #footer{
    display:none !important;
  }

}