/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#fff; z-index:9999;}
#colorbox{outline:0;}
    #cboxContent{margin:50px;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
    #cboxLoadedContent .lessonPopup { overflow: hidden;}       
		#cboxLoadedContent .basicLesson {border:3px solid #ffca53; border-radius:6px; text-align:left; width:564px; height:auto; box-shadow:rgba(0, 0, 0, 0.15) 0px 10px 1px -4px; -webkit-box-shadow:rgba(0, 0, 0, 0.15) 0px 10px 1px -4px; -moz-box-shadow:rgba(0, 0, 0, 0.15) 0px 10px 1px -4px;}
		#cboxLoadedContent .basicLesson h5{ color:#f8a300; font-weight:bold; font-size:24px; font-size:2.4rem; margin-bottom:10px; }
		#cboxLoadedContent .basicLesson img.left { float:left; border:1px solid #ffca53;}
		#cboxLoadedContent .basicLesson p.right{ width:320px; font-size:16px; font-size:1.2rem; color:#ab7d0f;}
		#cboxLoadedContent .basicLesson p.right span{ width:90px; background: red; color:#fff; padding: 5px;}
		#cboxLoadedContent .basicLesson p.right span a { color:#fff; }
		#cboxLoadedContent .basicLesson p.right span.movie_list { background: none; color: #f8a300; padding: 0; width: 100%;}
		#cboxLoadedContent .basicLesson p.right span.movie_list a { color:#f8a300; background: none;}
		#cboxLoadedContent .basicLesson .popupTop{ background:#fffaee; padding:15px; }
		#cboxLoadedContent .basicLesson .popupBottom .time{ float:right; color:#f4a100; font-size:13px; font-size:1.3rem;}
		#cboxLoadedContent .basicLesson .popupBottom .time strong{ font-weight:bold; font-size:26px; font-size:2.6rem;}

		#cboxLoadedContent .healthLesson {border:3px solid #C5DD4E; border-radius:6px; text-align:left; width:564px; height:auto; box-shadow:rgba(0, 0, 0, 0.15) 0px 10px 1px -4px; -webkit-box-shadow:rgba(0, 0, 0, 0.15) 0px 10px 1px -4px; -moz-box-shadow:rgba(0, 0, 0, 0.15) 0px 10px 1px -4px;}
		#cboxLoadedContent .healthLesson h5{ color:#799100; font-weight:bold; font-size:24px; font-size:2.4rem; margin-bottom:10px; }
		#cboxLoadedContent .healthLesson img.left { float:left; border:1px solid #C5DD4E;}
		#cboxLoadedContent .healthLesson p.right{ width:320px; font-size:16px; font-size:1.2rem; color:#ab7d0f;}
		#cboxLoadedContent .healthLesson p.right span { width:90px; background: red; color: #fff; padding: 5px;}
		#cboxLoadedContent .healthLesson p.right span a { color: #fff; }
		#cboxLoadedContent .healthLesson p.right span.movie_list { background: none; color: #f8a300; padding: 0; width: 100%;}
		#cboxLoadedContent .healthLesson p.right span.movie_list a { color:#f8a300; background: none;}
		#cboxLoadedContent .healthLesson .popupTop{ background:#F7FAE5; padding:15px; }
		#cboxLoadedContent .healthLesson .popupBottom .time{ float:right; color:#f4a100; font-size:13px; font-size:1.3rem;}
		#cboxLoadedContent .healthLesson .popupBottom .time strong{ font-weight:bold; font-size:26px; font-size:2.6rem;}

      	#cboxLoadedContent .dietLesson {border:3px solid #F6A17C; border-radius:6px; text-align:left; width:564px; height:auto; box-shadow:rgba(0, 0, 0, 0.15) 0px 10px 1px -4px; -webkit-box-shadow:rgba(0, 0, 0, 0.15) 0px 10px 1px -4px; -moz-box-shadow:rgba(0, 0, 0, 0.15) 0px 10px 1px -4px;}
		#cboxLoadedContent .dietLesson h5{ color:#F47A7C; font-weight:bold; font-size:24px; font-size:2.4rem; margin-bottom:10px; }
		#cboxLoadedContent .dietLesson img.left { float:left; border:1px solid #F6A17C;}
		#cboxLoadedContent .dietLesson p.right{ width:320px; font-size:16px; font-size:1.2rem; color:#ab7d0f;}
		#cboxLoadedContent .dietLesson p.right span{ width:90px; background: red; color:#fff; padding: 5px;}
		#cboxLoadedContent .dietLesson p.right span a{ color:#fff;}
		#cboxLoadedContent .dietLesson p.right span.movie_list { background: none; color: #f8a300; padding: 0; width: 100%;}
		#cboxLoadedContent .dietLesson p.right span.movie_list a { color:#f8a300; background: none;}
		#cboxLoadedContent .dietLesson .popupTop{ background:#FEF2ED; padding:15px; }
		#cboxLoadedContent .dietLesson .popupBottom .time{ float:right; color:#f4a100; font-size:13px; font-size:1.3rem;}
		#cboxLoadedContent .dietLesson .popupBottom .time strong{ font-weight:bold; font-size:26px; font-size:2.6rem;}


      	#cboxLoadedContent .stepupLesson {border:3px solid #92E1F2; border-radius:6px; text-align:left; width:564px; height:auto; box-shadow:rgba(0, 0, 0, 0.15) 0px 10px 1px -4px; -webkit-box-shadow:rgba(0, 0, 0, 0.15) 0px 10px 1px -4px; -moz-box-shadow:rgba(0, 0, 0, 0.15) 0px 10px 1px -4px;}
		#cboxLoadedContent .stepupLesson h5{ color:#62D9EE; font-weight:bold; font-size:24px; font-size:2.4rem; margin-bottom:10px; }
		#cboxLoadedContent .stepupLesson img.left { float:left; border:1px solid #92E1F2;}
		#cboxLoadedContent .stepupLesson p.right{ width:320px; font-size:16px; font-size:1.2rem; color:#ab7d0f;}
		#cboxLoadedContent .stepupLesson p.right span{ width:90px; background: red; color:#fff; padding: 5px;}
		#cboxLoadedContent .stepupLesson p.right span a{ color:#fff;}
		#cboxLoadedContent .stepupLesson p.right span.movie_list { background: none; color: #f8a300; padding: 0; width: 100%;}
		#cboxLoadedContent .stepupLesson p.right span.movie_list a { color:#f8a300; background: none;}
		#cboxLoadedContent .stepupLesson .popupTop{ background:#F0FBFD; padding:15px; }
		#cboxLoadedContent .stepupLesson .popupBottom .time{ float:right; color:#f4a100; font-size:13px; font-size:1.3rem;}
		#cboxLoadedContent .stepupLesson .popupBottom .time strong{ font-weight:bold; font-size:26px; font-size:2.6rem;}

        #cboxLoadedContent .exerciseLesson {border:3px solid #E65489; border-radius:6px; text-align:left; width:564px; height:auto; box-shadow:rgba(0, 0, 0, 0.15) 0px 10px 1px -4px; -webkit-box-shadow:rgba(0, 0, 0, 0.15) 0px 10px 1px -4px; -moz-box-shadow:rgba(0, 0, 0, 0.15) 0px 10px 1px -4px;}
		#cboxLoadedContent .exerciseLesson h5{ color:#E65489; font-weight:bold; font-size:24px; font-size:2.4rem; margin-bottom:10px; }
		#cboxLoadedContent .exerciseLesson img.left { float:left; border:1px solid #E65489;}
		#cboxLoadedContent .exerciseLesson p.right{ width:320px; font-size:16px; font-size:1.2rem; color:#ab7d0f;}
		#cboxLoadedContent .exerciseLesson p.right span{ width:90px; background: red; color:#fff; padding: 5px;}
		#cboxLoadedContent .exerciseLesson p.right span a{ color:#fff;}
		#cboxLoadedContent .exerciseLesson p.right span.movie_list { background: none; color: #f8a300; padding: 0; width: 100%;}
		#cboxLoadedContent .exerciseLesson p.right span.movie_list a { color:#f8a300; background: none;}
		#cboxLoadedContent .exerciseLesson .popupTop{ background:#FDEEF3; padding:15px; }
		#cboxLoadedContent .exerciseLesson .popupBottom .time{ float:right; color:#f4a100; font-size:13px; font-size:1.3rem;}
		#cboxLoadedContent .exerciseLesson .popupBottom .time strong{ font-weight:bold; font-size:26px; font-size:2.6rem;}

        #cboxLoadedContent .surfexerciseLesson {border:3px solid #1a274d; border-radius:6px; text-align:left; width:564px; height:auto; box-shadow:rgba(0, 0, 0, 0.15) 0px 10px 1px -4px; -webkit-box-shadow:rgba(0, 0, 0, 0.15) 0px 10px 1px -4px; -moz-box-shadow:rgba(0, 0, 0, 0.15) 0px 10px 1px -4px;}
		#cboxLoadedContent .surfexerciseLesson h5{ color:#1a274d; font-weight:bold; font-size:24px; font-size:2.4rem; margin-bottom:10px; }
		#cboxLoadedContent .surfexerciseLesson img.left { float:left; border:1px solid #1a274d;}
		#cboxLoadedContent .surfexerciseLesson p.right{ width:320px; font-size:16px; font-size:1.2rem; color:#1a274d;}
		#cboxLoadedContent .surfexerciseLesson p.right span { width:90px; background: red; color:#fff; padding: 5px;}
		#cboxLoadedContent .surfexerciseLesson p.right span a { color:#fff;}
		#cboxLoadedContent .surexerciseLesson p.right span.movie_list { background: none; color: #f8a300; padding: 0; width: 100%;}
		#cboxLoadedContent .surexerciseLesson p.right span.movie_list a { color:#f8a300; background: none;}
		#cboxLoadedContent .surfexerciseLesson .popupTop{ background:#e7edff; padding:15px; }
		#cboxLoadedContent .surfexerciseLesson .popupBottom .time{ float:right; color:#f4a100; font-size:13px; font-size:1.3rem;}
		#cboxLoadedContent .surfexerciseLesson .popupBottom .time strong{ font-weight:bold; font-size:26px; font-size:2.6rem;}
		
		#cboxLoadedContent .popupTop a.btn{ background:url(../common/arrow8.png) left top no-repeat #ffffff; padding-left:30px; height:28px; border:1px solid #ffb40a; box-sizing:border-box; padding-right:3px; border-radius:100px; text-align:center; font-size:13px; font-size:1.3rem; color:#f67a00; padding-top:4px; margin:10px 0 0; float:right; display:inline-block; box-shadow:rgba(0, 0, 0, 0.15) 0px 4px 1px -4px; -webkit-box-shadow:rgba(0, 0, 0, 0.15) 0px 4px 1px -4px; -moz-box-shadow:rgba(0, 0, 0, 0.15) 0px 4px 1px -4px;}
		#cboxLoadedContent .popupBottom{ background:#fff; padding:15px; text-align:center; padding-left:70px;}
		#cboxLoadedContent .popupBottom img{ margin-top:7px; }
		#cboxLoadedContent .popupBottom.ok{background: url(../images/program/basic_point2_ok.gif) left 10px center no-repeat #fff;}
#cboxTitle{position:absolute; top:-30px; left:0; color:#ccc; font-size:12px; font-size:1.2rem;}
        #cboxCurrent{position:absolute; bottom:-20px; right:0px; color:#ccc;}
        #cboxLoadingGraphic{background:url(../common/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
        
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:-30px; margin-top:-9px; background:url(../images/prev_orange.png) no-repeat top left; width:11px; height:18px; text-indent:-9999px;}
        #cboxNext{position:absolute; top:50%; right:-30px; margin-top:-9px; background:url(../images/next_orange.png) no-repeat top right; width:11px; height:18px; text-indent:-9999px; z-index:1000;}
        #cboxClose:hover ,#cboxNext:hover ,#cboxPrevious:hover{opacity: 0.75; filter: alpha(opacity=75); -moz-opacity: 0.75; -ms-filter: "alpha(opacity=75)";}


@media screen and (max-width:480px){

#cboxOverlay{background:none;}

#cboxLoadedContent .basicLesson , #cboxLoadedContent .healthLesson , #cboxLoadedContent .dietLesson , #cboxLoadedContent .stepupLesson , #cboxLoadedContent .exerciseLesson, #cboxLoadedContent .surfexerciseLesson { width:100%; box-sizing:border-box; text-align:center;}

#cboxLoadedContent .basicLesson p.right , #cboxLoadedContent .healthLesson p.right , #cboxLoadedContent .dietLesson p.right , #cboxLoadedContent .stepupLesson p.right , #cboxLoadedContent .exerciseLesson p.right, #cboxLoadedContent .surfexerciseLesson p.right { width:100%; text-align:left; float:none; font-size:12px; font-size:1.2rem;}

#cboxLoadedContent .basicLesson img.left , #cboxLoadedContent .healthLesson img.left , #cboxLoadedContent .dietLesson img.left , #cboxLoadedContent .stepupLesson img.left , #cboxLoadedContent .exerciseLesson img.left, #cboxLoadedContent .surfexerciseLesson img.left{ float:none; margin-bottom:10px;}

#cboxLoadedContent .basicLesson h5 , #cboxLoadedContent .healthLesson h5 , #cboxLoadedContent .dietLesson h5 , #cboxLoadedContent .stepupLesson h5 , #cboxLoadedContent .exerciseLesson h5, #cboxLoadedContent .surfexerciseLesson h5 { text-align:left; font-size:14px; font-size:1.4rem;}

#cboxLoadedContent .popupTop a.btn{ padding-left:25px; font-size:11px; font-size:1.1rem; width:100%;}

#cboxLoadedContent .basicLesson .popupBottom .time , #cboxLoadedContent .healthLesson .popupBottom .time , #cboxLoadedContent .dietLesson .popupBottom .time , #cboxLoadedContent .stepupLesson .popupBottom .time , #cboxLoadedContent .exerciseLesson .popupBottom .time, #cboxLoadedContent .surfexerciseLesson .popupBottom .time{ float:right; font-size:11px; font-size:1.1rem;}

#cboxLoadedContent .basicLesson .popupBottom .time strong , #cboxLoadedContent .healthLesson .popupBottom .time strong , #cboxLoadedContent .dietLesson .popupBottom .time strong , #cboxLoadedContent .stepupLesson .popupBottom .time strong , #cboxLoadedContent .exerciseLesson .popupBottom .time strong, #cboxLoadedContent .surfexerciseLesson .popupBottom .time storing { font-size:16px; font-size:1.6rem;}

#cboxLoadedContent .popupBottom{ padding-left:0; padding-top:10px; }
#cboxLoadedContent .popupBottom.ok{background-size:70px; background-position:left 5px; padding-top:20px;}

#cboxLoadedContent .popupBottom img{ text-align:left; margin:0; padding:5px 0 0 0; width:70%; height:auto;}

#cboxLoadedContent .popupBottom.ok img{}

}