/*12-10_Phase_4 TXCCRS.org*/

@courseLight: #b8c2d1 ;
@courseDark: #264a7b ;
@courseFocus: #f8981d ;
@courseCream: #ffffcc ;

.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: 0.9em; padding: 0px 5px; color:#333; line-height: 1.4em; }
div.spaap_container p { margin-top: .625em; }
div.spaap_container h1 { font-weight:bold; }
div.spaap_container td { font-size: 1em; } /* materials to download */
.spaap_bold, .spaap_prompt{ font-weight: bold }
.bold { 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: .813em; }
.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; }*/
body {background:none transparent;
}
.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: 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: 100%; display: inline-block; background-color: @courseLight; border-bottom: 1px solid @courseDark; border-radius: 5px; }
#introText { float: left; margin: 10px 25px; }
#reset { position: absolute; bottom: 10px; right: 10px; } /*width: 15%; height: 100%; background-color: @courseFocus; color: white; text-align: center; font-weight: bold; line-height: 7em; box-shadow: 0px 2px 3px rgba(0,0,0,0.3); }
#reset:hover { top: -2px; right: 2px; cursor: pointer; box-shadow: 3px 5px 6px rgba(0,0,0,0.3); }*/
#container { position: relative; width: 100%; height: 100%; float: left; }
#dragTray { width: 250px; margin: auto; }
#dropTray { width: 700px; }
#card_container { width: 520px; margin: 0 auto; }
.dragCard { width: 232px; height: 120px; background-color: white; margin: 5px 10px; margin-bottom: 5px; border: 1px solid @courseFocus; border-radius: 10px; box-shadow: 0 1px 1px rgba(0,0,0,0.3); display: none; }
.ui-draggable-dragging { width: 234px; border-radius: 10px; box-shadow: 0 3px 3px rgba(0,0,0,0.3);font-family: Verdana,sans-serif; font-size:0.9em;}
/*.ui-draggable-dragging p { display: none; }*/
div.draggable p { padding: 0; margin: 1em; line-height: 1.5em; }
.dragCard: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); color: white; }
.dragCard:hover p { color: white; }
.Card { width: 250px; float: left; margin: 5px; background-color: @courseCream; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.droppable { min-height: 560px; margin: 1px; padding: 5px; border: 1px solid white; border-radius: 5px; border: 1px solid @courseFocus; background-color: white; }
.droppableHover { border: 1px solid @courseFocus; background-color: #afd2ed; }
p.dropHeading { width: 100%; background-color: #FFFFFF; position: relative; top: -15px; left: -9px; text-align: center; border-radius: 3px 3px 0px 0px; }
.dropped { padding: 2px; margin: 8px auto; border: 1px solid @courseFocus; border-radius: 10px; background-color: white; }
/* .droppable .dropped { clear: both; } */
.dropped p { padding-bottom: 10px !important; }
.droppedCorrect { background-image: url(../../HTML_images/Accept-icon_50.png); background-position: bottom right; background-repeat: no-repeat; }
.droppedWrong { background-image: url(../../HTML_images/Deny-icon_50.png); background-position: bottom right; background-repeat: no-repeat; cursor: pointer; }
.verifyAnswers { display:none; }

/*Quick Quiz*/
.quiz { width: 500px; margin: 20px auto; background-color: @courseLight; display: block; border: 1px solid @courseDark; border-radius: 20px; }
.quizText { margin: 15px 20px 10px 20px; font-weight: bold; }
.quizRadio { padding: 0px 50px; }
#quizFeedback { position: relative; font-size: 1.5em; float: left; 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; }
.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 bottom; }
.incorrect { background-image: url(../../HTML_images/Deny-icon.png); background-repeat: no-repeat; background-position: left bottom; }

/*Nested Tabs*/
div#nestedTabs { width: 700px; margin: 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; }
.tabs a { padding: 5px 10px; display: inline-block; background-color: @courseDark; color: #fff; text-decoration: none; border-radius: 5px 5px 0px 0px; }
.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: 15px auto; border-radius: 15px; overflow: hidden; }
.sliderButton { height: 400px; width: 30px; background-color: #A4CACE; float: left; line-height: 400px; text-align: center; color: white; font-weight: bold; font-size: 24px; }
.sliderButton:hover { color: #FFAA54; }
.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: #EBF1FA; 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/gt_images/footer.jpg); background-repeat:no-repeat; overflow-x: hidden; overflow-y: hidden;}