/*13-04_Phase_4.0*/

@courseLight: #EBF1FA ;
@courseDark: #7FB8E5 ;
@courseFocus: #FFAA54 ;

.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 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; font-size: 13px}
.spaap_otherCourseTitle {font-style: italic;}
.spaap_sectionName {font-weight: bold; font-size: 13px}
.spaap_lessonTitle{text-decoration: underline}

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

/*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; }
.spaap_image{ padding:0px 10px 10px 10px;}
.spaap_container { width:735px; margin:0 auto; background-color:#fefefe; overflow:auto; }
.spaap_content { margin-top: -10px; }
div.spaap_FloatLeft { float:left; }
div.spaap_FloatRight { float:right; }
div.spaap_FloatClear { clear: both; }

/*Accordion*/
#accordion { width: 340px; margin-left: 10px; }
.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; }
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; }
.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; }

/*Accordion-h*/
#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; }
.lastHButton { border-right: 1px double @courseDark; }
.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; }

/*Quick Quiz*/
.quiz { width: 500px; margin: 20px auto; background-color: @courseLight; display: block; border: 1px solid @courseDark; border-radius: 20px; overflow: visible; }
.quizSmall { width: 348px; 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.4em; margin-left: 25px; margin-top: 10px; padding-left: 45px; line-height: 1.4em; }
.quizRadio p { margin: auto; font-size: 1.2em; line-height: 1.6em; }
.quizRadio input { margin-right: 10px; }
.quiz #qqCheck { text-align: right; }
.quizSmall #qqCheck { text-align: right; }
.quiz button { padding: 5px 15px; margin: 10px 15px 10px 0px; }
.quizSmall 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; }


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

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

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

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

/*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; height:44px; margin-top:10px; background-image:url(http://jukebox.esc13.net/spaap_common/footer2015.jpg); background-repeat:no-repeat; overflow-x: hidden; overflow-y: hidden;}