/* 2015-05_CC update based on the 13-03_BWG template */

/*Course Theme Colors*/
@courseLight: #EBF1FA ;
@courseDark: #5583bc ;
@courseFocus: #FFAA54 ;
@courseCream: #F5D3AC ;

/*Background shading*/
.fade { background-image: url(http://jukebox.esc13.net/spaap_common/EpsilenHeaderFade.png); background-size: contain; background-position: bottom; background-repeat: repeat-x; }
.fadeRight { background-image: url(http://jukebox.esc13.net/spaap_common/EpsilenHeaderFadeRight.png); background-size: contain; background-position: top right; background-repeat: repeat-y; }

/*Header*/
.new_header { background-image: url("http://jukebox.esc13.net/fine_arts/HTML_images/header.jpg"); background-size: cover; height:60px; position:relative; top:-5px; }
.new_header h2 { position:relative; top: 10px; font-size:0.9em; margin-left:5px; }

@media (min-width:481px) {
	.new_header { height:51px; }
}

/* Video player and playlist styling */
#spaap_brightcove { float: right; width: 360px; margin: 2px 5px 15px 10px; }
#spaap_videoIntro { width: 360px; margin: auto; margin-bottom: 15px; }
#spaap_video { width: 360px; margin: 2px 5px 15px 10px; float: right; }
#spaap_playlist { width: 358px; margin: 0px; padding: 0px; background-color: @courseLight; overflow: auto; list-style-type: none; border: 1px solid @courseDark; }
.spaap_media { padding: 0px; border-top: 1px solid @courseDark; }
.spaap_media p { padding: 0px; margin: 0px; }
.spaap_media:hover { background-color: @courseFocus; cursor: pointer; cursor: hand; }
.current { background-color: @courseDark; }
#spaap_disclaimer p { font-size: 10px; color:#999; }
#spaap_playlist li p { padding: 0px 2px; font-size: 12px; }
#spaap_filmDate { color: white; z-index: 1000; font-weight: bold; text-align: right; position: relative; top: 20px; right: 10px; }
.spaap_videoTime { float: right; padding-left: 20px; padding-bottom: 5px; /* For responsive video title - pushes long video total to the left.  Padding matching div.spaap_container p */ }
.captionToggle { float: right; }
.vjs-subtitles-button { display: none; }

/* Making video player responsive */
#spaap_videoFull { margin: 2px 2px 15px 5px; }
#spaap_playlistFull { width: 99.75%; margin: 0 0 25px; padding: 0px; background-color: @courseLight; overflow: auto; list-style-type: none; border: 1px solid @courseDark; }
#video_wrapper { position:relative; height:0; padding-bottom: 56.25%; /*16:9 ratio*/ }
#spaapVideoContainer { position:absolute; top:0; left:0; width:100%; height:100%; }
.vjs-fullscreen { padding-top: 0px; } /* For responsive video - removes padding so the video is not pushed down in fullscreen mode */

@media (min-width:768px) {
	#spaap_videoFull { width:700px; margin: auto; margin-top: 10px; margin-bottom: 15px; }
	#spaap_playlistFull { width: 698px; }
	#spaapVideoContainer { max-width: 700px;  max-height: 394px; }
}


/* Accordion - Responsive */
#accordion { width: 340px; margin-left: 10px; }
#accordionFull { width: 100%; margin: auto; }
.accordionButton { width: 326px; padding: 2px; padding-left: 10px; font-size: 12px; font-weight: bold; text-align: left; float: left; background: @courseLight; cursor: pointer; .fade; border: 1px solid @courseDark; border-bottom: 0px; border-radius: 2px; }
#accordionFull .accordionButton { width: 96%; }
div.accordionButton > span.icon { position: relative; top: 3px; margin-left: -10px; background-image:url(http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_454545_256x240.png); width: 16px; height: 16px; background-position: -32px -16px; display: inline-block; }
div.on > span.icon { background-position: -64px -16px; }
.accordionContent {	width: 320px; padding: 5px 10px; float: left; background: #EBF1FA; border-top: 1px solid @courseDark; display: none; overflow: hidden; border-radius: 0px 0px 2px 2px; }
#accordionFull .accordionContent { width: 94.2%; }
.on { background: @courseDark; .fade; border-radius: 2px 2px 0px 0px; }
.over { background: @courseDark; .fade; }
.Last { margin-bottom: 15px; border-bottom: 1px solid @courseDark; }

@media (min-width:436px) {
	#accordionFull .accordionContent { width: 95.1%; }
}


@media (min-width:768px) {
	#accordionFull { width: 700px; }
	#accordionFull .accordionButton { width: 686px; }
	#accordionFull .accordionContent { width: 680px; }
}


/* Accordion Horizontal*/
#accordionH { margin: 20px auto; overflow: hidden; height: 300px; width: 700px; clear: both; }
.accordionHButton { width: 48px; padding: 2px;  font-size: 12px; font-weight: bold; text-align: left; float: left; background: @courseLight; cursor: pointer; .fadeRight; border: 1px solid @courseDark; border-right: 0px; border-radius: 5px; height: 294px; }
.accordionHContent {	width: 0px; height: 296px; padding: 4px 0px 0px 0px; float: left; background: @courseLight; border-radius: 0px 0px 2px 2px; transition:width 0.5s; -moz-transition:width 0.5s; -webkit-transition:width 0.5s; -o-transition:width 0.5s; opacity: 0; overflow: hidden; }
.accordionHContentMargin { padding: 5px;}
.onHButton { background: @courseDark; .fadeRight; border-radius: 5px; border: 1px solid @courseDark; }
.overHButton {background: @courseDark; .fadeRight; }
.accordionHButton span.rotate { display: block; width: 200px; position: relative; top: 90px; left: -80px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);   }
.accordionHButton span.rotateIE { font-size: 16px; font-weight: 100; display: block; width: 200px; position: relative; top: 100px; left: -85px; 
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=3.061616997868383e-16, M12=1, M21=-1, M22=3.061616997868383e-16, SizingMethod='auto expand')";   
margin-left: 90px; margin-top: -79px; }

/* Drag and Drop */
.draggable p, .droppable p { float: left; margin: 4px;}
#dragDrop { width: 700px; min-height: 400px; margin: auto; display: block; border-radius: 5px; background-color: #FCFCFC; border: 1px solid @courseDark; clear: both; }
#intro { position: relative; width: 665px; min-height: 50px; background-color: @courseLight; padding: 5px 15px 5px 20px; border-bottom: 1px solid @courseDark; border-radius: 5px; }
#container { position: relative; width: 700px; height: 100%; float: left; }
#dragTray { width: 189px; height: 100%; padding: 10px 0px; float: left; }
#dropTray { width: 500px; float: left; padding-left: 10px; }
.draggable { width: 158px; height: 38px; float: left; margin: 2px; border: 1px solid @courseDark; background-color: @courseLight; border-radius: 10px;}
div.draggable p { width: 100%; line-height: 18px; }
.draggable:hover { cursor: move; background-color: @courseFocus; }
.droppable { width: 210px; min-height: 160px; padding: 0.5em; float: left; margin: 10px; border: 1px solid white; background-color: @courseDark; border-radius: 5px; }
p.dropHeading { width: 100%; background-color: #FFFFFF; position: relative; top: -15px; left: -9px; text-align: center; border-radius: 3px 3px 0px 0px; }
.dropped { width: 150px; height: 30px; padding: 0.2em; float: left; margin: 2px; border: 1px solid white; background-color: @courseLight; text-align: center; border-radius: 10px; }
/*.droppable .dropped { clear: both; }*/
.droppedCorrect { background-image: url(../../HTML_images/Accept-icon.png); background-position: bottom right; background-repeat: no-repeat; }
.droppedWrong { background-image: url(../../HTML_images/Deny-icon.png); background-position: bottom right; background-repeat: no-repeat; cursor: pointer; }
.droppableHover { border: 1px solid @courseFocus; }
#reset { width: 100%; margin: auto; padding: 4px 0px; background-color: @courseLight; position: relative; clear: left; text-align: center; font-weight: bold; border-top: 1px solid @courseDark; border-radius: 5px; /*background-image: url(../../HTML_images/Reset-icon.png); background-repeat: no-repeat; background-position: middle left;*/ }
#reset:hover { cursor: pointer; background-color: @courseFocus; }
#dragHelp_icon { position: absolute; bottom: 2px; right: 5px; width: 28px; height: 28px; background-image: url(../../HTML_images/dragHelp_icon.png); }
#dragHelp { position: relative; max-width: 300px; padding: 20px 30px; background-color: white; border: 4px @courseDark solid; top: 25%; left: 25%; cursor: default; border-radius: 10px; }
#dragHelpContain { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../../HTML_images/50pct_trans.png); background-repeat: repeat; z-index: 10000; text-align: center; }
#dragHelpClose { position: absolute; bottom: 0; right: 5px; font-size: .8em; color: @courseFocus; }

/* Card Match - Responsive */
#cardMatchWidget #answerColumn { min-width:134px; }
#cardMatchWidget th { border-right:none; border-left:none; border-top:none; }
#cardMatchWidget td { background-color:#fff; padding:5px; }  
#cardMatchWidget .quizFeedbackMsg { position: relative; font-size: 0.9em; margin: 5px 0px; padding-left: 25px; line-height: 1.4em; }
#cardMatchWidget .textFieldColumn { border-right:none; }
#cardMatchWidget .textFieldColumn input { margin: 0px 8px 0px 5px; }  
#cardMatchWidget .feedbackColumn { border-left:none; }
#cardMatchWidget .correctSmall { background-image: url(../../HTML_images/Accept-icon_20.png); background-repeat: no-repeat; background-position: left top; color:#396; }
#cardMatchWidget .incorrectSmall { background-image: url(../../HTML_images/Deny-icon_20.png); background-repeat: no-repeat; background-position: left top; color:#D90000; }

#cardMatchWidget #printButton { float:left; }
#cardMatchWidget .matchButton { float: left; margin: 10px 5px 5px 0px; padding: 5px 15px; }

#cardMatchWidget input[type="text"]:focus { background: #eee; }


@media (min-width:768px) {
	#cardMatchWidget { max-width: 680px; margin:0 auto;}
	#cardMatchWidget #answerColumn { width:40%; }
	#cardMatchWidget .matchButton { float: right; margin: 10px 0px 10px 0px; padding: 5px 15px; }
	#cardMatchWidget #submitButton	{ margin-left: 5px; }
}



/* Card Sort */
  #widget #sortable { list-style-type: none; margin: 0; padding: 0; width: 650px; float: left; cursor: move; border: 1px solid @courseDark; }
  #widget #sortable li { position: relative; margin: 0 3px 3px 3px; padding: 5px 5px 10px 10px; font-size: .8em; height: 65px; background-color: @courseLight; border-bottom: 1px solid @courseDark; }
  #widget #sortable li:hover { border-left: 5px solid @courseFocus; padding-left: 5px; }
  #widget #sortable li:last-child { border-bottom: 0; }
  #widget #sortable li:first-child { margin-top: 3px; }
  #widget #sortable li select { float: right; margin: 15px 0 0 5px; }
  #widget #sortable li span { position: absolute; margin-left: -1.3em; }
  #widget .numberSection { list-style-type: none; float: left; margin-top: 0; padding: 0; }
  #widget .numberSection li { height: 83px; width: 30px; margin: 2px 0; text-align: center; }
  #widget .numberSection li:first-child { margin-top: 0; }
  
/* Radio Button Quiz */
.radioQuiz { max-width: 750px; background-color: @courseLight; margin-bottom: 15px; }
.radioQuiz ul { list-style-type: none; padding: 10px 5px; }
.radioQuiz ul li { padding: 3px 25px 0; border-top: 2px solid @courseDark; }
.radioQuiz label { display: inline-block; width: 100px; margin-right: 30px; }
.radioQuiz input { margin-left: 20px; }

/* Quiz Activity - Responsive  */
  .quiz { width: 80%; margin: 20px auto; background-color: @courseLight; display: block; border: 1px solid @courseDark; border-radius: 20px; overflow: visible; }
  .quizText { margin: 15px 20px 10px 20px; font-weight: bold; }
  .quizRadio { padding: 0px 10px; }
  .quizFeedback { position: relative; font-size: 1.2em; margin-left: 0px; margin-top: 10px; padding-left: 45px; line-height: 1.4em; }
  .smallTxtFeedback { font-size:14px; margin-right:30px;}
  .quizRadio p { margin: auto; font-size: 1.2em; line-height: 1.6em; }
  .quizRadio input { margin-right: 10px; }
  .quiz button { padding: 5px 15px; margin: 10px 15px 10px 0px; }
  .quiz .qqCheck { text-align: right; }
  .quiz .entryFieldCheck { text-align: right; }
  .quiz .pulldownCheck { text-align: right; }
  .quiz .checkboxCheck { text-align: right; }
  .correct { background-image: url(../../HTML_images/Accept-icon.png); background-repeat: no-repeat; background-position: left top; }
  .incorrect { background-image: url(../../HTML_images/Deny-icon.png); background-repeat: no-repeat; background-position: left top; }
  .quiz textArea { margin-left: 10px; }
  textArea { font-family: Arial, Helvetica, sans-serif; vertical-align: top; -webkit-transition: height 0.2s; -moz-transition: height 0.2s; transition: height 0.2s; resize: vertical; width: 80%; }
  .activityText { margin: 20px 15px; }
  .quiz .pulldownSection { padding: 0px 50px; }
  .quiz .dropDownChoices { background-color:#d1d1d1; }
  .quiz .greenText { color:#00CC33; }
  .quiz .redText { color:#d90000; }
  .quiz .correctGreenBorder { border: 3px solid #00CC33; }
  .quiz .incorrectRedBorder { border: 3px solid #d90000; }
  .quiz .quizFeedbackMsg { display:none; font-size: 0.9em; padding-left: 45px; padding-bottom: 20px; line-height: 1.6em; }
  .quiz .checkboxExplanation { display:none; margin-left: 20px; margin-right: 20px; }

   @media(min-width:768px) {
	    .quiz { max-width: 700px; }
		.quizRadio { padding: 0px 50px; }   
	    .quizFeedback { margin-left: 25px; }
		textArea { width:90%; max-width:500px;  }
   }



/* Print Text */
.printText { width: 95%; overflow: auto; padding: 5px 10px; margin: auto; background-color: @courseLight; clear: both; }
#textArea { font-family: Arial, Helvetica, sans-serif; vertical-align: top; -webkit-transition: height 0.2s; -moz-transition: height 0.2s; transition: height 0.2s; resize: vertical; }

/* Responsive Multiple Print Text */
.printTextMultiple { width: 100%; }
.printTextMultiple .mutipleEntryBox { width: 90%; font-family: Arial, Helvetica, sans-serif; vertical-align: top; -webkit-transition: height 0.2s; -moz-transition: height 0.2s; transition: height 0.2s; resize: vertical !important; }
.printTextMultiple .printTextButton { float:left; padding: 5px 15px; margin: 10px 0px; }

   @media(min-width:768px) {
	   .printTextMultiple { max-width: 690px;  margin: 0 auto; }
	   .printTextMultiple .mutipleEntryBox { width: 100%; max-width: 680px; }
	   .printTextMultiple .printTextButton { float:right; margin: 10px 10px 10px 0px; }
   }



/* Radio Button Quiz */
.radioQuiz { max-width: 750px; background-color: @courseLight; margin-bottom: 15px; }
.radioQuiz ul { list-style-type: none; padding: 10px 5px; }
.radioQuiz ul li { padding: 3px 25px 0; border-top: 2px solid @courseDark; }
.radioQuiz label { display: inline-block; width: 100px; margin-right: 30px; }
.radioQuiz input { margin-left: 20px; }

/* Nested Tabs */
  div#nestedTabs { width:100%; margin: 20px auto; background-color: @courseLight; border-radius: 5px; }
  div#nestedTabs li { padding: 0px; }
  div#nestedTabs > div { border: 1px solid @courseDark; padding: 10px; position: relative; top: -1px; z-index: 1; border-radius: 5px; background-color: @courseLight; background-image: url(../../HTML_images/EpsilenTabFade.png); background-size: contain; background-position: top; background-repeat: repeat-x; }
  div#nestedTabs > div > div { border: 1px solid @courseDark; padding: 10px; position: relative; top: -1px; z-index: 1; border-radius: 5px; background-color: @courseLight; background-image: url(../../HTML_images/EpsilenTabFade.png); background-size: contain; background-position: top; background-repeat: repeat-x; }
  ul.tabs { position: relative; margin: 0px; z-index: 10; }
  ul.tabs li { list-style: none; display: inline; padding: 0px; font-weight: bold; }
  .tabs a { padding: 5px 10px; display: inline-block; background-color: #BBCDE4; color: #fff; text-decoration: none !important; border-radius: 5px 5px 0px 0px; font-size:12px;}
  .tabs a:hover { background-color: @courseFocus; }
  .tabs a.active { border: 1px solid @courseDark; border-bottom: 1px solid #FFF; color: #000; background-color: #FFF; }


   @media(min-width:768px) {
		div#nestedTabs { max-width: 690px; }
   }


/* Touch Slider */
.sliderContainer { width: 680px; height: 400px; margin: 25px auto; border-radius: 15px; overflow: hidden; }
.sliderButton { height: 400px; width: 30px; background-color: @courseDark; float: left; line-height: 400px; text-align: center; color: white; font-weight: bold; font-size: 24px; }
.sliderButton:hover { color: white; background-color: @courseFocus; }
.sliderFloat { float: left; }
.iosSlider { position: relative; top: 0; left: 0; overflow: hidden; width: 620px; height: 400px; }
.iosSlider .slider { width: 100%; height: 100%; }
.iosSlider .slider .slide { float: left; background-color: @courseLight; width: 620px; height: 400px; }

/* Number Generator */
.generator { width: 100%; max-width: 500px; margin: 20px auto; background-color: @courseLight; display: block; border: 1px solid @courseDark; border-radius: 20px; overflow: visible; }
.generatorText { margin: 15px 20px 10px 20px; font-weight: bold; }

.generateResults { padding: 20px; }
.generateBtnWrapper { width: 160px; margin: 0px auto; }
#generateButton { padding: 5px 15px 5px 15px; }
#resultingNumber { width: 13px; margin: auto; font-size: 1.2em; padding: 10px; border: solid 1px; }


/* Card Sort */

  #widget10-1-heading { clear: both; margin: 0px; padding: 0px; }

  #widget10-1-heading1 { float: left; width: 100px; margin: 0px; padding: 0px; font-size: .8em; font-weight:bold; text-align: center; }
  #widget10-1-heading2 { float: left; width: 273px; margin: 0px; padding: 0px; font-size: .8em; font-weight:bold; text-align: center; }
  #widget10-1-heading3 { float: left; width: 356px; margin: 0px; padding: 0px; font-size: .8em; font-weight:bold; text-align: center; }

  #widget10-1 { display: inline-block; width: 730px; margin: auto; border: 1px solid @courseDark; background-color: @courseCream; }
  
  #widget10-1 .numberSection { list-style-type: none; float: left; width: 100px; margin-top: 0; padding: 0; margin-bottom: 0; border-right: 1px solid @courseDark; }
  #widget10-1 .numberSection li { font-size: .8em; height: 87px; width: 100%; margin: 1px 0 1px; padding: 10px 0; text-align: center; border-bottom: 1px solid @courseDark; }
  #widget10-1 .numberSection li:last-child { border-bottom: none; }
  
  #widget10-1 #sortable { list-style-type: none; margin: 0; padding: 0; width: 629px; float: left; cursor: move; }
  #widget10-1 #sortable li { position: relative; padding: 5px 5px 10px 10px; font-size: .8em; height: 93px; background-color: @courseLight; border-bottom: 1px solid @courseDark; }
  #widget10-1 #sortable li:hover { border-left: 5px solid @courseFocus; padding-left: 5px; }
  #widget10-1 #sortable li:last-child { border-bottom: 0; }
  #widget10-1 #sortable li p { width: 280px; }
  #widget10-1 #sortable li select { margin: 5px 0 20px 0; }
  #widget10-1 #sortable li span { position: absolute; margin-left: -1.3em; }
  
  .sortTable { display: block; position: absolute; top: 5px; right: 5px; }
  .sortTable td { width: 50px; font-size: .8em; text-align: center; vertical-align: top; padding: 0 5px; border-right: 1px solid blue; }
  .sortTable td:last-child { border-right: 0; }
  .sortTable tr:last-child td { border-right: 0}
  
/* Card Sort */

  #widget08-9-heading { clear: both; margin: 0px; padding: 0px; }

  #widget08-9-heading1 { float: left; width: 100px; margin: 0px; padding: 0px; font-size: .8em; font-weight:bold; text-align: center; }
  #widget08-9-heading2 { float: left; width: 290px; margin: 0px; padding: 0px; font-size: .8em; font-weight:bold; text-align: center; }
  #widget08-9-heading3 { float: left; width: 338px; margin: 0px; padding: 0px; font-size: .8em; font-weight:bold; text-align: center; }

  #widget08-9 { display: inline-block; width: 730px; margin: auto; border: 1px solid @courseDark; background-color: @courseCream; }
  
  #widget08-9 .strategy { list-style-type: none; float: left; width: 100px; margin-top: 0; padding: 0; margin-bottom: 0; border-right: 1px solid @courseDark; }
  #widget08-9 .strategy li { font-size: .8em; height: 97px; width: 100%; margin: 1px 0 1px; padding: 10px 0; text-align: center; border-bottom: 1px solid @courseDark; }
  #widget08-9 .strategy li:last-child { border-bottom: none; }
  
  #widget08-9 .description { list-style-type: none; float: left; width: 290px; margin-top: 0; padding: 0; margin-bottom: 0; border-right: 1px solid @courseDark; }
  #widget08-9 .description li { font-size: .8em; height: 97px; margin: 1px 0 1px; padding: 10px 5px; text-align: left; border-bottom: 1px solid @courseDark; }
  #widget08-9 .description li:last-child { border-bottom: none; }
  
  #widget08-9 #sortable { list-style-type: none; margin: 0; padding: 0; width: 338px; float: left; cursor: move; }
  #widget08-9 #sortable li { position: relative; padding: 5px 5px 10px 10px; font-size: .8em; height: 103px; background-color: @courseLight; border-bottom: 1px solid @courseDark; }
  #widget08-9 #sortable li:hover { border-left: 5px solid @courseFocus; padding-left: 5px; }
  #widget08-9 #sortable li:last-child { border-bottom: 0; }
  #widget08-9 #sortable li p { width: 280px; }
  #widget08-9 #sortable li span { position: absolute; margin-left: -1.3em; }

   /* OCCRRC - Fill in the blanks  */
#fftb_container { width: 80%; margin: 20px auto; padding: 10px 20px 20px 20px; background-color: @courseLight; border: 1px solid @courseDark; border-radius: 20px; overflow: visible; } 
#fftb_container .dropDownChoices { background-color:#d1d1d1; }
#fftb_container #fftb_showAnswers { text-align: right; }
#fftb_container button { padding: 5px 15px; margin: 10px 15px 10px 0px; }
#fftb_container .greenText { color:#339966; }
#fftb_container .redText { color:#d90000; }
#fftb_container .correctGreenBorder { border: 3px solid #339966; }
#fftb_container .incorrectRedBorder { border: 3px solid #d90000; }
#fftb_container th { background-color:@courseDark; border: 1px solid #808080; }
#fftb_container td { padding: 5px; }

/* Text styling */
div.spaap_container,
div.spaap_container p,
div.spaap_container h1, 
div.spaap_container li, 
div.spaap_courseStage p, 
div.spaap_container td { font-family:Verdana,sans-serif; font-size: 1em; padding: 0px 3px; color:#333; line-height: 1.4em; }
div.spaap_container p { margin-top: 12px; padding-bottom: 5px; }
div.spaap_container h1 { font-weight:bold; }
div.spaap_container td {font-size: 12px} /* materials to download */
.spaap_bold, .spaap_prompt{ font-weight: bold }
.spaap_epsilenMenu { font-style:italic; }
.spaap_handoutTitle{ font-weight:bold; font-style:italic; }
.spaap_otherCourseTitle {font-style: italic;}
.spaap_sectionName {font-weight: bold; font-size: 13px}
.spaap_lessonTitle{text-decoration: underline}
.spaap_media p { font-size: 0.8em !important; }


/* Links */
.spaap_container a { color:#3875d7; text-decoration:underline;}
.spaap_container a:visited { color:#3875d7; }
.spaap_container a:hover { color:#444; }
.spaap_container a:active { color:#444; }
a img { border: none; }

/* Page-Top Background */
.spaap_Header { font-size:14px; font-weight:bold; background-color: @courseDark; border-top: 15px solid @courseDark; padding: 5px 0px; .fade; }

/* Misc Elements and Layout */
body { margin-top: -10px; overflow-x: hidden; }
.spaap_image{ padding:0px 10px 10px 10px;}
.spaap_container { width:100%; margin:20px auto; background-color:#fefefe; overflow:auto; }
.spaap_content { margin-top: -14px; }
div.spaap_FloatLeft { float:left; }
div.spaap_FloatRight { float:right; }
div.spaap_FloatClear { clear: both; }

   @media(min-width:768px) {
	   .spaap_container { width:735px; }
   }


/* Focus Question */
.spaap_focusQuestion { padding: 0px; font-size:14px; border-left:5px solid @courseFocus; clear: left; }
.spaap_focusQuestion ul { padding-left: 25px; *margin-left:0px}

/* Quote Block */
.spaap_quote { display: block; margin: 0px 15%; padding: 10px; background-color: @courseLight; font-style: italic; border: 2px outset @courseDark; }

/* Fine Arts Blockquotes */
blockquote {
    padding: 1em 2em;
    border-radius: .25em;
    border-left: 0;
    border-right: 0;
    font-style: italic;
    clear: both;
}

blockquote.overview {
    border-top: 0.5em solid #e74c3c;
    border-bottom: 0.5em solid #e74c3c;
    color: #e74c3c;
}

blockquote.art {
    border-top: 0.5em solid #1c75bc;
    border-bottom: 0.5em solid #1c75bc;
    color: #1c75bc;
}

blockquote.dance {
    border-top: 0.5em solid #8136b4;
    border-bottom: 0.5em solid #8136b4;
    color: #8136b4;
}

blockquote.music {
    border-top: 0.5em solid #2bb673;
    border-bottom: 0.5em solid #2bb673;
    color: #129D5A;
}

blockquote.theatre {
    border-top: 0.5em solid #c01e24;
    border-bottom: 0.5em solid #c01e24;
    color: #c01e24;
}

cite {
    font-style: normal;
    font-size: 0.8em;
}

.spaap_container cite a {
    text-decoration: underline;
}




/* Tables */
.spaap_table { overflow:auto; clear: both; margin:0px auto; width: 100%; text-align: left; cell-spacing: 0px; cellpadding: 2px; border: 1px gray solid; background-color: @courseLight; border-collapse: collapse; margin-top: 10px;}
.spaap_tableTop{ padding:5px; }
.spaap_table table { border-collapse:collapse;}
.spaap_table td { padding: 5px; vertical-align: middle; border: 1px gray solid; }
.spaap_table th { padding: 5px; text-align: center; }

   @media(min-width:768px) {
		.spaap_table { max-width: 690px; }
   }



/* Materials To Download Links */
.spaap_container td a { color:#3875d7; text-decoration:none; font-size: 12px}
.spaap_container td a:visited { color:#3875d7; }
.spaap_container td a:hover { color:#444; }
.spaap_container td a:active { color:#444; }

/* Spaap Citation */
div.spaap_citation{ padding: 10px 0 0 0; }
div.spaap_citation p{ font-size: 10px; color:#999; padding-bottom: 5px; }
div.spaap_citation a{ font-size: 10px; color:#3875d7; text-decoration:underline; }

/* Spaap Footer */
.spaap_footer { clear: both; margin:20px 0; background-image: url("http://jukebox.esc13.net/spaap_common/footer_logo_2015.jpg"); background-repeat: no-repeat; width:90px; height:35px; margin:10px auto; }