/*
Project: 16-17_3-11
Author: Rhys Roberts
Palette: Color: Blue: #157BD0; Blue:Hover #072A47
*/






/* Activity Intro */

#activityIntro {
  margin: 30px 0 1.5em;
}

#activityIntro p {
  font-size: 1.45em;
  font-weight: 500;
  margin-bottom: 0;
}

#instructions {
  margin-bottom: 30px;
}


/* Activity Content */

#activityContainer {
  margin: 1.5em 0 3em;
}


/* Activity Controls */

#activityControls {
  margin-top: 2em;
	margin-bottom: 10px;
}


	


/* Footer */



/* Popup Info Modal */

.modal-header {
  background: #157BD0;
  color: #FFF;
  font-family: 'Roboto Slab', serif;
}

.modal-title {
  font-size: 1.8em;
}

.modal-body {
  padding: 25px;
}

.modal-body p {
  font-size: 1.1em;
  line-height: 1.5em;
}

.modal-header .close {
  color: #FFF;
  opacity: .5; filter: alpha(opacity=50);
  text-shadow: none;
}


/* Other Stuff */


/* Animations */

.animate-first {
  animation-duration: 1s;
  animation-delay: 0s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 0s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0s;
}

.animate-second {
  animation-duration: 1s;
  animation-delay: 0.1s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 0.1s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0.1s;
}

.animate-third {
  animation-duration: 1s;
  animation-delay: 0.2s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 0.2s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0.2s;
}

.animate-fourth {
  animation-duration: 1s;
  animation-delay: 0.3s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 0.3s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0.3s;
}

.animate-fifth {
  animation-duration: 1s;
  animation-delay: 0.4s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 0.4s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0.4s;
}

.animate-sixth {
  animation-duration: 1s;
  animation-delay: 0.5s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 0.5s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0.5s;
}

.animate-seventh {
  animation-duration: 1s;
  animation-delay: 0.6s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 0.6s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0.6s;
}

.animate-eighth {
  animation-duration: 1s;
  animation-delay: 0.7s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 0.7s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0.7s;
}

.animate-ninth {
  animation-duration: 1s;
  animation-delay: 0.8s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 0.8s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0.8s;
}

.animate-tenth {
  animation-duration: 1s;
  animation-delay: 0.9s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 0.9s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0.9s;
}

.animate-eleventh {
  animation-duration: 1s;
  animation-delay: 1s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 1s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 1s;
}

.animate-twelfth {
  animation-duration: 1s;
  animation-delay: 1.1s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 1.1s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 1.1s;
}


.marks {
	text-align:right;
}
.highlight{
	background:#FFF900;
}

.script{
	margin-bottom:1em

}
.speach {
	background:#e6f5ff;
	padding-top:1em;
	padding-bottom:1em;
	    text-align: inherit;
	    padding-left: 100px;
}

.speach:first-child{
	padding-top:2em;
	border-top-right-radius:12px;
	border-top-left-radius:12px;
}
.speach:last-child{
	border-bottom-right-radius:12px;
	border-bottom-left-radius:12px;	
	padding-bottom:2em;
}

.speach:nth-child(even){
	background:#f5fbff;
}

.red {
	background:#4ac;
}

#suggestion {
	display:none;
	background-color:#F5F5F5;
	border:1px solid #e3e3e3;
	border-radius:4px;
	padding:15px 10px;
	box-shadow:inset 0 1px 1px rgba(0,0,0,0.05);
}

.textBlack{
	color: #000;
	
}

.hBlue, .hYellow, .hGreen {
	padding-left:.35em;
	padding-right:.35em;


}
.hBlue {	background:#00FFFF}
.hYellow { background:#FFFF7F}
.hGreen {background:#69B874; }

.color-picker.noScroll {
	position:fixed;
	top:0px;
	z-index:9000;
}
.color-picker .c{
	border-radius:100%;
	width:30px;
	height:30px;
	display:inline-block;
	cursor:pointer;
	margin:4px;
	
}

.color-picker .c.selected {
	box-shadow:0px 0px 2px 1px rgba(0,0,0,0.5);
}

.color-picker{
	
	    padding: 10px;
}
.sortable {
	padding:0;
	margin:0 auto;
	width:500px;
	}
.sortable li, .sortable-item {
	position:relative;
	display:block;
	background:#33aacc;
	color:#FFF;
	padding:10px 15px;
	margin:2px auto;
	padding-right:180px;
	width:100%;
	
	cursor:move;
}


.sortable li button {
	position:absolute;
	height:100%;
	width:180px;
	right:0px;
	top:0px;
	border-radius:0px;
	cursor:pointer;	
}

.page {
	display:none;
}

.extractPop{
	width:100%;
	border-radius:0px;
	
}

.sortable-item.ui-draggable-dragging {
	box-shadow:0px 0px 5px 3px rgba(0,0,0,0.25)
}

.sortable-item h2.correct:after{
	font-family:Glyphicons Halflings;
	content:"\e013";
	position:absolute;
	right:12px;
	font-size:larger;
	}
		
.sortable-item h2.incorrect:after{
	font-family:Glyphicons Halflings;
	content:"\e014";
	position:absolute;
	right:12px;
	font-size:larger;
	}
	
.sortable li h2.incorrect:after{
	font-family:Glyphicons Halflings;
	content:"\e014";
	position:relative;
	right:-70px;
	top:5px;
	font-size:larger;}

.sortable li h2.correct:after{
	font-family:Glyphicons Halflings;
	content:"\e013";
	position:relative;
	right:-70px;
	top:5px;
	font-size:larger;	}


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



  #footer {
    padding: 1em 0;
  }

  #title {
    margin-bottom: 0;
    text-align: left;
  }

  #branding {
    text-align: right;
  }

  #instructions {
    margin-bottom: 0;
  }

}

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




}

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


}

/* Mobile Only */
@media all and (max-width:767px) {

  .btn-change {
    display: block;
    margin-bottom: 3px;
    width: 100%;
  }

}
/* Print Stylesheet */
@media print {


  .btn, footer, #branding, #activityControls, #tools {
    display: none;
  }

  #header, #activityIntro, #activityContainer, #activityControls, #activity {
    padding-top: 0;
    padding-bottom: 0;
  }

  #header {
    padding-top: 1em;
  }

}