/* 13-07_BWG */

/*Course Theme Colors*/
@courseLight: #EBF1FA;
@courseDark: #709DBC;
@courseFocus: #FFAA54;
@courseCream: #F5D3AC;
@courseHeader: #FF0000;
/*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; }

/*Text Area Formatting*/
.normal {
				vertical-align: top;
				-webkit-transition: height 0.2s;
				-moz-transition: height 0.2s;
				transition: height 0.2s;
				margin-bottom: 15px;
				resize: vertical;
			}

/* 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_videoFull { width: 700px; margin: auto; margin-top: 10px; margin-bottom: 15px; }
#spaap_video_nestedTabs { width: 500px; margin:auto; z-index:1000; }
#spaap_playlist { width: 358px; margin: 0px; padding: 0px; background-color: @courseLight; overflow: auto; list-style-type: none; border: 1px solid @courseDark; }
#spaap_playlistFull { width: 698px; margin: 0 0 25px; padding: 0px; background-color: @courseLight; overflow: auto; list-style-type: none; border: 1px solid @courseDark; }
#spaap_playlist_nestedTabs { width: 498px; 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_disclaimer_nestedTabs 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; margin-left: 10px; }
.captionToggle { float: right; display: none; }
.vjs-subtitles-button { display: none; }
.brightcove_player_center { margin:5px 0px 20px 0px; }

/* Accordion */
#accordion { width: 340px; margin-left: 10px; }
#accordionOccrrc { width: 450px; margin-left: 10px; }

#accordionFull { width: 700px; margin: auto; }
.accordionButton { width: 326px; padding: 2px; padding-left: 10px; padding-top: 8px; font-size: 14px; font-weight: bold; text-align: left; float: left; background: @courseLight; cursor: pointer; .fade; border: 1px solid @courseDark; border-bottom: 0px; border-radius: 2px; }
.accordionButtonAddResources { padding-bottom: 20px;}
#accordionOccrrc .accordionButton { width: 436px; 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-radius: 2px; }
#accordionFull .accordionButton { width: 686px; height: 30px;}
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; }
#accordionOccrrc .accordionContent { width: 430px; 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: 680px; }
.on { background: @courseDark; .fade; border-radius: 2px 2px 0px 0px; }
.over { background: @courseDark; .fade; }
.Last { margin-bottom: 15px; border-bottom: 1px solid @courseDark; }
.Last.on { margin-bottom: 0px; } 


/* Nested Tabs Stop and Think */
#stopNThinkContainer { width: 600px; margin: 0 auto; }
#stopNThinkContainer .accordionButton { width: 584px; height: 30px; background: @courseDark; .fade; border-radius: 2px 2px 0px 0px; cursor: auto;}
#stopNThinkContainer .accordionContent { width: 576px; display:block; border: 1px solid @courseDark; margin-bottom: 0px; }
#stopNThinkContainer .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: -64px -16px; display: inline-block; }

/* 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(-90deg); -moz-transform: rotate(-90deg);   }
.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; }

/* OCCRRC - Drag and Drop 7.4 */
#occrrc_07_04 p { font-size: 12px; }
#occrrc_07_04 .draggable p, #occrrc_07_04 .droppable p { float: left; margin: 4px;}
#occrrc_07_04 #dragDrop { width: 700px; min-height: 400px; margin: auto; display: block; border-radius: 5px; /*background-color: #FCFCFC;*/ border: 1px solid @courseDark; clear: both; }
#occrrc_07_04 #intro { width: 665px; min-height: 50px; background-color: @courseLight; padding: 5px 15px 5px 20px; border-bottom: 1px solid @courseDark; border-radius: 5px; }
#occrrc_07_04 #container { position: relative; width: 700px; height: 100%; float: left; }
#occrrc_07_04 #dragTray { width: 100%; height: 100%; padding: 5px 0; float: left; }
#occrrc_07_04 #dropTray { width: 100%; float: left; }
#occrrc_07_04 .draggable { width: 169px; height: 48px; float: left; margin: 2px; border: 1px solid @courseFocus; border-radius: 10px; box-shadow: 0 1px 1px rgba(0,0,0,0.3); }
#occrrc_07_04 div.draggable p { margin: 0; padding: 0; margin: 4px; width: 160px; line-height: 18px; }
#occrrc_07_04 .draggable:hover { cursor: move; background-color: @courseFocus; border: 1px solid white; position: relative; top: -5px; left: -3px; box-shadow: 3px 6px 3px rgba(0,0,0,0.3); }
#occrrc_07_04 .droppable { width: 315px; min-height: 160px; padding: 0.5em; float: left; margin: 4px; border: 1px solid white; border-radius: 5px; border: 1px solid @courseFocus; background-color: rgba(248, 152, 29, 0.5); background-image: url(../../HTML_images/key_background.png); background-position: center; background-repeat: no-repeat; }
#occrrc_07_04 p.dropHeading { font-size: 14px; width: 100%; background-color: #FFFFFF; position: relative; top: -10px; left: -9px; text-align: center; border-radius: 3px 3px 0px 0px; }
#occrrc_07_04 .dropped { width: 305px; height: 40px; padding: 2px; float: left; margin: 2px; border: 1px solid @courseFocus; border-radius: 10px; background-color: white; text-align: left;}
#occrrc_07_04 .droppedCorrect { background-image: url(../../HTML_images/Accept-icon_50.png); background-position: bottom right; background-repeat: no-repeat; }
#occrrc_07_04 .droppedWrong { background-image: url(../../HTML_images/Deny-icon_50.png); background-position: bottom right; background-repeat: no-repeat; cursor: pointer; }
#occrrc_07_04 .droppableHover { border: 1px solid @courseFocus; }
#occrrc_07_04 #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;  }
#occrrc_07_04 #reset:hover { cursor: pointer; background-color: @courseDark; color: white; }

/* OCCRRC - Drag and Drop 8.3 */
#occrrc_08_03 p { font-size: 10px; }
#occrrc_08_03 .draggable p, .droppable p { margin: 10px 10px 0px 0px;}
#occrrc_08_03 .draggable { width: 170px; height: 70px; float: left; margin: 2px; padding-right: 4px; border: 1px solid @courseDark; background-color: @courseLight; border-radius: 10px;}
#occrrc_08_03 .dropped { width: 185px; height: 70px; padding: 0.2em; float: left; margin: 2px; border: 1px solid white; background-color: @courseLight; border-radius: 10px; text-align: left;}
#occrrc_08_03 p.dropHeading { width: 100%; background-color: #FFFFFF; position: relative; top: -15px; left: -9px; text-align: center; border-radius: 3px 3px 0px 0px; font-size: 14px; font-weight:bold; }

/* OCCRRC - Drag and Drop 13.7 */
#occrrc_13_07 p { font-size: 12px; }
#occrrc_13_07 .draggable p, .droppable p { margin: 10px 10px 0px 0px;}
#occrrc_13_07 .draggable { width: 170px; height: 70px; float: left; margin: 2px; padding-right: 4px; border: 1px solid @courseDark; background-color: @courseLight; border-radius: 10px;}
#occrrc_13_07 .dropped { width: 185px; height: 70px; padding: 0.2em; float: left; margin: 2px; border: 1px solid white; background-color: @courseLight; border-radius: 10px; text-align: left;}
#occrrc_13_07 p.dropHeading { width: 100%; background-color: #FFFFFF; position: relative; top: -15px; left: -9px; text-align: center; border-radius: 3px 3px 0px 0px; font-size: 14px; font-weight:bold; }

/* OCCRRC - Drag and Drop 16.11 */
#occrrc_16_11 .droppable { width: 410px; min-height: 160px; padding: 0.5em; float: left; margin: 10px; border: 1px solid white; background-color: @courseDark; border-radius: 5px; }
#occrrc_16_11 .dropped { width: 390px; height: 30px; padding: 0.2em; float: left; margin: 2px; border: 1px solid white; background-color: @courseLight; border-radius: 10px; text-align: left;}
#occrrc_16_11 .draggable { width: 170px; height: 60px; float: left; margin: 2px; padding-right: 4px; border: 1px solid @courseDark; background-color: @courseLight; border-radius: 10px;}

/* OCCRRC - Drag and Drop 18.17 */
#occrrc_18_17 p { font-size: 12px; }
#occrrc_18_17 .draggable p, #occrrc_07_04 .droppable p { float: left; margin: 4px;}
#occrrc_18_17 #dragDrop { width: 700px; min-height: 400px; margin: auto; display: block; border-radius: 5px; /*background-color: #FCFCFC;*/ border: 1px solid @courseDark; clear: both; }
#occrrc_18_17 #intro { width: 665px; min-height: 50px; background-color: @courseLight; padding: 5px 15px 5px 20px; border-bottom: 1px solid @courseDark; border-radius: 5px; }
#occrrc_18_17 #container { position: relative; width: 700px; height: 100%; float: left; }
#occrrc_18_17 #dragTray { width: 100%; height: 100%; padding: 5px 0; float: left; }
#occrrc_18_17 #dropTray { width: 100%; float: left; }
#occrrc_18_17 .draggable { width: 340px; height: 80px; float: left; margin: 2px; border: 1px solid @courseFocus; border-radius: 10px; box-shadow: 0 1px 1px rgba(0,0,0,0.3); }
#occrrc_18_17 div.draggable p { margin: 0; padding: 0; margin: 4px; width: 320px; line-height: 18px; }
#occrrc_18_17 .draggable:hover { cursor: move; background-color: @courseFocus; border: 1px solid white; position: relative; top: -5px; left: -3px; box-shadow: 3px 6px 3px rgba(0,0,0,0.3); }
#occrrc_18_17 .droppable { width: 315px; min-height: 160px; padding: 0.5em; float: left; margin: 4px; border: 1px solid white; border-radius: 5px; border: 1px solid @courseFocus; background-color: rgba(248, 152, 29, 0.5); background-image: url(../../HTML_images/key_background.png); background-position: center; background-repeat: no-repeat; }
#occrrc_18_17 p.dropHeading { font-size: 14px; width: 100%; background-color: #FFFFFF; position: relative; top: -10px; left: -9px; text-align: center; border-radius: 3px 3px 0px 0px; }
#occrrc_18_17 .dropped { width: 305px; height: 90px; padding: 2px; float: left; margin: 2px; border: 1px solid @courseFocus; border-radius: 10px; background-color: white; text-align: left;}
#occrrc_18_17 .droppedCorrect { background-image: url(../../HTML_images/Accept-icon_50.png); background-position: bottom right; background-repeat: no-repeat; }
#occrrc_18_17 .droppedWrong { background-image: url(../../HTML_images/Deny-icon_50.png); background-position: bottom right; background-repeat: no-repeat; cursor: pointer; }
#occrrc_18_17 .droppableHover { border: 1px solid @courseFocus; }
#occrrc_18_17 #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;  }
#occrrc_18_17 #reset:hover { cursor: pointer; background-color: @courseDark; color: white; }

/* Drag and Drop - OCCRRC 2.3 - Four Content Areas */
#dragDropFourContentAreas { margin: 0px; padding: 0px; }
#dragDropFourContentAreas .draggable p, .droppable p { float: left; margin: 4px;}
#dragDropFourContentAreas #dragDrop { width: 700px; min-height: 400px; margin: auto; display: block; border-radius: 5px; /*background-color: #FCFCFC;*/ border: 1px solid @courseDark; clear: both; }
#dragDropFourContentAreas #intro { width: 665px; min-height: 50px; background-color: @courseLight; padding: 5px 15px 5px 20px; border-bottom: 1px solid @courseDark; border-radius: 5px; }
#dragDropFourContentAreas #container { position: relative; width: 700px; height: 100%; float: left; }
#dragDropFourContentAreas #dragTray { width: 650px; height: 100%; padding: 5px 20px; float: left; }
#dragDropFourContentAreas #dropTray { width: 650px; float: left; }
#dragDropFourContentAreas .draggable { width: 550px; height: 52px; float: left; margin: 2px; border: 1px solid @courseFocus; border-radius: 10px; box-shadow: 0 1px 1px rgba(0,0,0,0.3); }
#dragDropFourContentAreas div.draggable p { margin: 0; padding: 0; margin: 4px; width: 500px; line-height: 18px; }
#dragDropFourContentAreas .draggable:hover { cursor: move; background-color: @courseFocus; border: 1px solid white; position: relative; top: -5px; left: -3px; box-shadow: 3px 6px 3px rgba(0,0,0,0.3); }
#dragDropFourContentAreas .droppable { width: 600px; min-height: 100px; padding: 0.5em; float: left; margin: 4px; border: 1px solid white; border-radius: 5px; border: 1px solid @courseFocus; background-color: rgba(248, 152, 29, 0.5); background-image: url(../../HTML_images/key_background.png); background-position: center; background-repeat: no-repeat; }
#dragDropFourContentAreas p.dropHeading { width: 100%; background-color: #FFFFFF; position: relative; top: -15px; left: -9px; text-align: left; border-radius: 3px 3px 0px 0px; }
#dragDropFourContentAreas .dropped { width: 590px; height: 52px; padding: 2px; float: left; margin: 2px; border: 1px solid @courseFocus; border-radius: 10px; background-color: white; }
#dragDropFourContentAreas .dropped p { text-align:left; }
#dragDropFourContentAreas .droppedCorrect { background-image: url(../../HTML_images/Accept-icon_50.png); background-position: bottom right; background-repeat: no-repeat; }
#dragDropFourContentAreas .droppedWrong { background-image: url(../../HTML_images/Deny-icon_50.png); background-position: bottom right; background-repeat: no-repeat; cursor: pointer; }
#dragDropFourContentAreas .droppableHover { border: 1px solid @courseFocus; }
#dragDropFourContentAreas #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;*/ }
#dragDropFourContentAreas #reset:hover { cursor: pointer; background-color: @courseDark; color: white; }
#dragDropFourContentAreas .secondLevel { margin-left:20px; }
#dragDropFourContentAreas .thirdLevel { margin-left:40px; }
#dragDropFourContentAreas .fourthLevel { margin-left:60px; }
#dragDropFourContentAreas .occrrc_10_04_draggable { height: 62px; }
#dragDropFourContentAreas .occrrc_10_04_droppable { height: 120px; }
#dragDropFourContentAreas .occrrc_10_04_dropped { height: 80px;  }

/* Drag and Drop - OCCRRC 22.3  */
#occrrc_22_03 { margin: 0px; padding: 0px; }
#occrrc_22_03 .draggable p, .droppable p { float: left; margin: 4px;}
#occrrc_22_03 #dragDrop { width: 700px; min-height: 400px; margin: auto; display: block; border-radius: 5px; /*background-color: #FCFCFC;*/ border: 1px solid @courseDark; clear: both; }
#occrrc_22_03 #intro { width: 665px; min-height: 50px; background-color: @courseLight; padding: 5px 15px 5px 20px; border-bottom: 1px solid @courseDark; border-radius: 5px; }
#occrrc_22_03 #container { position: relative; width: 700px; height: 100%; float: left; }
#occrrc_22_03 #dragTray { width: 650px; height: 100%; padding: 5px 20px; float: left; }
#occrrc_22_03 #dropTray { width: 650px; float: left; }
#occrrc_22_03 .draggable { width: 550px; height: 95px; float: left; margin: 2px; border: 1px solid @courseFocus; border-radius: 10px; box-shadow: 0 1px 1px rgba(0,0,0,0.3); }
#occrrc_22_03 div.draggable p { margin: 0; padding: 0; margin: 4px; width: 500px; line-height: 18px; }
#occrrc_22_03 .draggable:hover { cursor: move; background-color: @courseFocus; border: 1px solid white; position: relative; top: -5px; left: -3px; box-shadow: 3px 6px 3px rgba(0,0,0,0.3); }
#occrrc_22_03 .droppable { width: 600px; min-height: 100px; padding: 0.5em; float: left; margin: 4px; border: 1px solid white; border-radius: 5px; border: 1px solid @courseFocus; background-color: rgba(248, 152, 29, 0.5); background-image: url(../../HTML_images/key_background.png); background-position: center; background-repeat: no-repeat; }
#occrrc_22_03 p.dropHeading { width: 100%; background-color: #FFFFFF; position: relative; top: -15px; left: -9px; text-align: left; border-radius: 3px 3px 0px 0px; }
#occrrc_22_03 .dropped { width: 590px; height: 95px; padding: 2px; float: left; margin: 2px; border: 1px solid @courseFocus; border-radius: 10px; background-color: white; }
#occrrc_22_03 .dropped p { text-align:left; }
#occrrc_22_03 .droppedCorrect { background-image: url(../../HTML_images/Accept-icon_50.png); background-position: bottom right; background-repeat: no-repeat; }
#occrrc_22_03 .droppedWrong { background-image: url(../../HTML_images/Deny-icon_50.png); background-position: bottom right; background-repeat: no-repeat; cursor: pointer; }
#occrrc_22_03 .droppableHover { border: 1px solid @courseFocus; }
#occrrc_22_03 #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;*/ }
#occrrc_22_03 #reset:hover { cursor: pointer; background-color: @courseDark; color: white; }
#occrrc_22_03 .secondLevel { margin-left:20px; }
#occrrc_22_03 .thirdLevel { margin-left:40px; }
#occrrc_22_03 .fourthLevel { margin-left:60px; }
#occrrc_22_03 .occrrc_10_04_draggable { height: 62px; }
#occrrc_22_03 .occrrc_10_04_droppable { height: 120px; }
#occrrc_22_03 .occrrc_10_04_dropped { height: 80px;  }


/* 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; }
 

/* 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; }


/* OCCRRC - Print Text */
#occrrc_11_05 { width: 680px; margin: 20px auto; padding: 15px 0px 0px 20px; background-color: @courseLight; display: block; border: 1px solid @courseDark; border-radius: 20px; overflow: visible; }
#occrrc_11_05 input { padding: 5px 15px; margin: 10px 15px 10px 0px; float: right;}

/* OCCRRC - Print Text */
.occrrc_11_08_entryFields { clear:both; width: 550px; margin: 20px auto; padding: 15px 0px 0px 20px; display: block; overflow: visible; }
.occrrc_11_08_entryFields input { padding: 5px 15px; margin: 10px 15px 10px 0px; float: right;}

/* 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: 700px; margin: 20px auto; background-color: @courseLight; border-radius: 5px; }
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: @courseDark; color: #fff; text-decoration: none; border-radius: 5px 5px 0px 0px; }
.tabs a:hover { background-color: @courseFocus; }
.tabs a.active { border: 1px solid @courseDark; border-bottom: 1px solid #FFF; color: #000; background-color: #FFF; }

/* Nested Tabs - OCCRRC 11.08 */
.occrrc_11_08 .tabs { font-size: 14px; }

/* Nested Tabs - OCCRRC 15.07 */
.margin-scenario { margin-left:30px; }
.margin-or { margin-left:60px; }
.footnote-scenario { font-size:12px !important; }

/* Slider Bar */
.sliderBarQuestion { margin:0px; padding:0px; }
.sliderBarQuestion .labelText { margin-left:20px; font-size:14px; }
.sliderBarQuestion .levelSelected { border:0; color:#f6931f; font-weight:bold; font-size:16px; }
.sliderBarQuestion .sliderBar { width:300px; margin-left:30px; }

/* Slider Bar - OCCRRC 19.8 */
.sliderBarQuestion .sliderBar { width:300px; margin-left:100px; }
.sliderBarQuestion .scaleLabel { display:inline-block; margin-right:57px; }
.sliderBarQuestion .firstLabel { margin-left: 100px; }


/* 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: 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 #generateButton { padding-left: 20px;}
#generateButton { padding: 5px 15px; margin: 10px 15px 10px 15px; }
#resultingNumber { display: inline; margin: auto; font-size: 1.2em; padding: 15px; }


/* 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; }


/* Quiz Activity - OCCRRC course  */
  .quiz { width: 550px; 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 50px; }
  .quizFeedback { position: relative; font-size: 1.2em; margin-left: 25px; 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 .qqCheck { text-align: right; }
  .quiz .entryFieldCheck { text-align: right; }
  .quiz .pulldownCheck { text-align: right; }
  .quiz button { padding: 5px 15px; margin: 10px 15px 10px 0px; }
  .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; }
  .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 { margin-left: 20px; margin-right: 20px; }

/* Filtered List */
	#filteredList { width:500px; margin-left: 20px; }
	#resourceList { list-style-type: none; font-size:14px; margin: 0px; padding: 0px; }
	#resourceList .items { padding: 10px 10px 10px 20px; border-bottom:1px solid #cccccc; }
	#resourceList .items:hover { background-color:#e5e5e5; cursor:pointer; }
	#searchInput:focus { background-color:#e5e5e5; border:2px solid #5a91c0; }
	#searchInput:hover { background-color:#e5e5e5; }
	#searchInput { border:0px; background-color:#cccccc; font-size:14px; padding-left:20px; margin-bottom: 10px; width:250px; height:30px; border-radius: 20px; }
	.listContainer { border:1px solid #cccccc; }
	#resourceList .categoryTitle { padding: 10px 10px 10px 20px; background-color:#5c94c2; color:#ffffff; font-weight:bold;}
	
	/* Filtered List 2 */
	#resources { width:600px !important; margin-left: 30px !important; }
	.resourcesCategory { color:white !important; padding:10px 10px 10px 10px !important;}
	.resourceItem { font-weight:normal !important;}

/* Prompts */
	#boxContainer { position:relative; width:605px; display:block; margin:0 auto; height:480px; overflow:hidden;}
	#contentBox { position:absolute; top:0; left:0; background-color:#cde8ee; width:600px; height:480px; border-top-right-radius: 60px 250px; border-bottom-right-radius:60px 250px; border-right:5px solid #2dbfc2; }
	#shapeBox { position:absolute; top:0; left:-40px; background-color:white; width:100px; height:480px; border-top-right-radius: 60px 250px; border-bottom-right-radius:60px 250px; border-right:5px solid #2dbfc2;}
	
	.promptQ { width:480px; height:430px; margin: 20px 40px 20px 80px; }
	.promptQText { font-weight:bold; }
	.qqCheck { text-align:right; }
	.qqCheck button { padding: 5px 15px; }
	.promptNext { position:absolute; right:0px; bottom:15px;}
	.promptNext button { padding: 5px 15px;}
	#q1 {position:absolute; left:0px; top:0; transition: left 2s; -webkit-transition: left 2s; }
	#q2 {position:absolute; left:-550px; top:0; transition: left 2s; -webkit-transition: left 2s; }
	#q3 {position:absolute; left:-550px; top:0; transition: left 2s; -webkit-transition: left 2s; }
	
	.askYourselfQText { display:none; font-weight:bold; }
	.whyLink { font-style:italic; text-decoration: none !important;}
	.whyLink:hover { cursor:pointer; }
	.whyAnswer { display:none; }
	
	#nextQ3 { position:absolute; left:0px; bottom:15px; }




/* Prompts Stop and Think - 17.3 */
#stopNThinkContainer_17_3 {  width: 600px; margin: 0 auto; }
#stopNThinkContainer_17_3 #contentContainer { position:absolute; }
#stopNThinkContainer_17_3 .accordionButton { width: 584px; height: 30px; background: @courseDark; .fade; border-radius: 2px 2px 0px 0px; cursor: auto;}
#stopNThinkContainer_17_3 .accordionContent { width: 576px; height:600px; display:block; border: 1px solid @courseDark; margin-bottom: 0px; }
#stopNThinkContainer_17_3 .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: -64px -16px; display: inline-block; }

#stopNThinkContainer_17_3 .respondLink { font-style:italic; font-weight:bold; text-decoration: none !important;}
#stopNThinkContainer_17_3 .respondLink:hover { cursor:pointer; }
#stopNThinkContainer_17_3 .respondLinkAnswer { display:none; }

#stopNThinkContainer_17_3 .promptQ { position:relative; margin: 0px 0px 0px 10px; width:530px; }
#stopNThinkContainer_17_3 .promptQText { font-weight:bold; font-style:italic; }
#stopNThinkContainer_17_3 .promptNext { position:absolute; right:0px; bottom:-100px;}
#stopNThinkContainer_17_3 .promptNext button { padding: 5px 15px;}
#stopNThinkContainer_17_3 #q1 { left:0px; top:0px; transition: left 2s; -webkit-transition: left 2s; }
#stopNThinkContainer_17_3 #q2 { left:-550px; top:0px; transition: left 2s; -webkit-transition: left 2s; }
#stopNThinkContainer_17_3 #q3 { left:-550px; top:0px; transition: left 2s; -webkit-transition: left 2s; }
#stopNThinkContainer_17_3 #q4 { left:-550px; top:0px; transition: left 2s; -webkit-transition: left 2s; }

#stopNThinkContainer_17_3 #nextQ3 { position:absolute; left:450px; bottom:-100px; }
#stopNThinkContainer_17_3 #nextQ4 { position:absolute; left:0px; bottom:-140px; }
#stopNThinkContainer_17_3 #smallMug { position:absolute; right:-20px; bottom:-150px; }

/* Prompts Stop and Think - 19.5 */
#stopNThinkContainer_17_3 .accordionContent_19_05 { height:400px; }

/* Table Quiz */
.tableQuiz { font-size: 12px; }
.tableQuiz .mainTable { border:1px solid black; border-collapse: collapse; }
.tableQuiz .mainTable th { border:1px solid black; }
.tableQuiz .mainTable td { border:1px solid black; text-align:center; }
.tableQuiz .rowHeader { text-align:left; }
.tableQuiz .columnHeader { background-color:#9C9; }
.tableQuiz .yesCell { color:#339966; font-weight:bold;  }
.tableQuiz .noCell { color:#d90000; font-weight:bold; }
.tableQuiz .actionButton { float: right; margin: 10px 15px 10px 0px; padding: 5px 15px; }
.tableQuiz .yellowBackground { background-color:#FFFFCC; }
	











/* Card Match */

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

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

  #widget08-9 { display: inline-block; width: 650px; margin: auto; border: 1px solid @courseDark; background-color: @courseCream; }
    
  #widget08-9 .strategy { list-style-type: none; float: left; width: 400px; margin-top: 0; padding: 0; margin-bottom: 0; border-right: 1px solid @courseDark; }
  #widget08-9 .strategy li { font-size: .8em; height: 20px; margin: 1px 0 1px; padding: 10px 5px; text-align: left; border-bottom: 1px solid @courseDark; }
  #widget08-9 .strategy li:last-child { border-bottom: none; }

  #widget08-9 #matchTable { list-style-type: none; margin-top: 0; margin-bottom:0; padding: 0; width: 60px; float: left; }
  #widget08-9 #matchTable li { position: relative; padding: 5px 5px 10px 10px; font-size: .8em; height: 26px; background-color: @courseLight; border-bottom: 1px solid @courseDark; }
  #widget08-9 #matchTable li:last-child { border-bottom: 0; margin-bottom:1px; }
  #widget08-9 #matchTable li p { width: 280px; }
  #widget08-9 #matchTable li span { position: absolute; margin-left: -1.3em; }
  #widget08-9 #matchTable input { float: right; }
  
  #widget08-9 .feedback { list-style-type: none; float: left; width: 189px; margin-top: 0; padding: 0; margin-bottom: 0; border-right: 0px; }
  #widget08-9 .feedback li { position: relative; padding: 5px 5px 10px 10px; font-size: .8em; height: 26px; background-color: @courseLight; border-bottom: 1px solid @courseDark; font-color: red;}
  #widget08-9 .feedback li:last-child { border-bottom: none; }
  
  #widget08-9 .quizFeedbackMsg { position: relative; font-size: 0.9em; margin-left: 0px; padding-left: 25px; line-height: 1.2em; }
  #widget08-9 .correctSmall { background-image: url(../../HTML_images/Accept-icon_20.png); background-repeat: no-repeat; background-position: left top; }
  #widget08-9 .incorrectSmall { background-image: url(../../HTML_images/Deny-icon_20.png); background-repeat: no-repeat; background-position: left top; }
  
  .matchButton { float: right; margin: 10px 15px 10px 0px; padding: 5px 15px; }
  #submitButton { margin-right: 82px; }

  #act1_feedback { display:none; }


/* Card Match - OCCRRC 21.7 */

#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-left: 0px; padding-left: 25px; line-height: 1.2em; }
#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; }
#cardMatchWidget .incorrectSmall { background-image: url(../../HTML_images/Deny-icon_20.png); background-repeat: no-repeat; background-position: left top; }

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

#cardMatchWidget .twoLineField { position:relative; top:15px; left:0px; }
#cardMatchWidget .twoLineLabel { position:relative; top:-10px; left:50px; }

/* Card Match - OCCRRC 22.3 */
#cardMatchWidget .cardMatch_definitions { width:286px; float:right; }

/* OCCRRC - Drag and Drop Outline Example */
#outline { width: 500px; margin: 20px auto; padding: 5px; background-color: @courseLight; display: block; border: 1px solid @courseDark; border-radius: 10px; overflow: visible; }
#outline .keyTheme { font-weight:bold; font-size:18px; }
#outline .component { color:#00649d; font-weight:bold; }
#outline .expectation { font-weight:bold; }
#outlineDetails .keyTheme { font-weight:bold; font-size:18px; }
#outlineDetails .component { color:#00649d; font-weight:bold;}
#outlineDetails .expectation { font-weight:bold; }

/* OCCRRC - Fill in the blanks  */
#fftb_container { width: 640px; margin: 0 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; }

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



/* 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 5px; color:#333; line-height: 1.4em; }
div.spaap_container p { margin-top: 10px; }
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_italic { font-style:italic; }
ul.spaap_stopNThinkBullet { margin-left: 140px; padding-left: 0;}
img.spaap_stopNThink { float:left; margin:5px 15px 20px 5px; width: 80px; height: 80px;} 


/* 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: @courseHeader; border-top: 15px solid @courseHeader; padding: 5px 0px; .fade; }
.spaap_Header_OCCRRC_01 { text-shadow: none !important; font-size:14px; font-weight:bold; padding: 5px 0px; background-image: url(http://jukebox.esc13.net/OCCRRC/HTML_images/headers-01.png); background-repeat:no-repeat; margin-top: 15px;}
.spaap_Header_OCCRRC_02 { text-shadow: none !important; font-size:14px; font-weight:bold; padding: 5px 0px; background-image: url(http://jukebox.esc13.net/OCCRRC/HTML_images/headers-02.png); background-repeat:no-repeat; margin-top: 15px;}
.spaap_Header_OCCRRC_03 { text-shadow: none !important; font-size:14px; font-weight:bold; padding: 5px 0px; background-image: url(http://jukebox.esc13.net/OCCRRC/HTML_images/headers-03.png); background-repeat:no-repeat; margin-top: 15px;}
.spaap_Header_OCCRRC_04 { text-shadow: none !important; font-size:14px; font-weight:bold; padding: 5px 0px; background-image: url(http://jukebox.esc13.net/OCCRRC/HTML_images/headers-04.png); background-repeat:no-repeat; margin-top: 15px;}
.spaap_Header_OCCRRC_05 { text-shadow: none !important; font-size:14px; font-weight:bold; padding: 5px 0px; background-image: url(http://jukebox.esc13.net/OCCRRC/HTML_images/headers-05.png); background-repeat:no-repeat; margin-top: 15px;}
.spaap_Header_OCCRRC_06 { text-shadow: none !important; font-size:14px; font-weight:bold; padding: 5px 0px; background-image: url(http://jukebox.esc13.net/OCCRRC/HTML_images/headers-06.png); background-repeat:no-repeat; margin-top: 15px;}

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

/* Focus Question */
.spaap_focusQuestion { padding: 0px; font-size: 1em; 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; }

/* Tables */
.spaap_table { overflow:auto; clear: both; margin:0px auto; width: 700px; 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; }

/* 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: 20px 0 0 0; clear:left; }
div.spaap_citation p { font-size: 10px; color:#999; }
div.spaap_citation a { font-size: 10px; color:#999; text-decoration:none; }
div.spaap_citation a:hover { color:#999; text-decoration:none; }
div.spaap_citation sup { font-size: 10px; color:#999; }
div.spaap_citation hr { height:1px !important; background-color:#00649D; border:none; width:735px; float:left; margin-bottom: 0;}  
a.spaap_citation { font-size: 10px; color:#3875d7; text-decoration:underline; }
sup.spaap_citation { font-size: 10px; }


/* Spaap Footer */
.spaap_footer { clear: both; height:44px; margin-top:10px; background-image:url(http://jukebox.esc13.net/gt_images/footer_02.jpg); background-repeat:no-repeat; overflow-x: hidden; overflow-y: hidden;}