
/* Header */

#header h1 {
  font-size: 28px;
}

#header h1 span {
  font-size: 26px;
}


.thought-bubble{
  background-image: url("../../../images/activities/2c-thought-bubble-bg.png");
  background-repeat: no-repeat;
  background-size: 115% 103%;
  background-position: top;
  min-height:700px;
}

.bubble-text-input{
  border: 1px solid #195020;
  border-radius: 10px;
  min-height:400px;
  margin-top:60px;
  margin-bottom:80px;
  color:#195020;
  font-size:18px;
  font-weight:800;
}

/* Label styling */

.drag-label {
  cursor: move;
  display: inline-block;
  height:40px;
  width:300px;
  text-align:center;
  padding:10px;
  background: #195020;
  color: #FFF;
}

#statementStack {
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
  min-height:30px;
}

.dropZone{
  background-color: #5a8647;
  width:100%;
  color: white;
  padding:0;
  padding-bottom: 10px;
}

.organise-drop{
  border: 3px solid #195020;
  border-radius:15px;
}

.ui-draggable {
  color:#FFF;
  font-size: medium;
  display:inline-block;
  min-width:200px;
  cursor:grab;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  border:1px solid #195020;
  border-radius:4px;
  background-color: #195020;
  z-index:2000;
  padding:10px;
}

.organise-drag {
  cursor: move;
  min-height:40px;
  width:100%;
  font-size:medium;
  line-height:20px;
  text-align:left;
  padding:10px;
  background: #195020;
  color: #FFF;
}

.dropZone .ui-draggable{
  width:100%;
}

.dropZone, .organise-drop {
   min-height: 33vh;
   font-size: medium;
   height: 100% !important;
   display: inline-block !important;
   margin: 5px 0 0 5px;
   padding: 5px;
   box-sizing: content-box;
}

.organise-drop{
  width:100%;
}

.glossy-magazine{
  background-image: url("../../../images/activities/2f-vogue-l.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.weekly-magazine{
  background-image: url("../../../images/activities/2f-realm-l.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.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;
}


.totalCorrectHolder {
  font-size: 16px;
  font-weight: bold;
  margin-top: 10px;
}

.totalCorrectHolder.alert {
  border-radius: 0;
  font-size: 16px;
  font-weight: bold;
  padding: 20px;
}

.totalCorrectHolder.alert-warning {
  border: 1px solid #8a6d3b;
}

.totalCorrectHolder.alert-success {
  border: 1px solid #3c763d;
}

.activity-feedback p {
  display: none;
}

.btn{
  margin:0 5px;
}

a.btn{
  text-decoration: none;
}

.questionDiv{

    text-align: center;
    padding: 35px 3px;
    background: #a2a2a2;
    font-size: 19px;
}

.questionQuote{
	text-align: center;
    padding: 8px 3px;
    font-size: 19px;
	height:auto;
	
}


/* Tablet */
@media(min-width: 768px){



}


/* 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 landscape;
  margin:2px; 
}

@media print {

  #activity-intro{
    page-break-after:avoid;
    margin-bottom:10px;
    margin-top:10px;
    display:block;
  }

  p.lead{
    font-size:18pt;
  }
  
  .btn, hr, .ui-draggable{
    display:none;
  }

  .tooltip{
    display:none !important;
  }

  .activity-content{
    overflow-y: hidden;
  }

  .print-bubble{
    position:absolute;
    overflow:hidden;
    left:50pt;
    top:120pt;
    height:600pt;
    width:1400pt;
    margin:0 auto;
    padding:0;
    z-index:-1 !important;
  }

  .bubble-text-input{
    border:0;
    overflow:hidden;
    z-index: 0 !important;
  }
}
