/* 
    Document   : s
    Created on : Apr 2, 2013, 5:08:47 PM
    Author     : KarlW
    Description:
        Purpose of the stylesheet follows.
*/

/** {
	font-family: 'Patrick Hand SC', cursive;
}*/

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none; /* Disable selection/copy in UIWebView */
}

root { 
    display: block;
}

html, body, .container {
	background-color: transparent !important;
	padding: 0;
	width: 100%;
	height: 100%;
	/*min-height: 320px;*/
	overflow: visible;
	-webkit-overflow-scrolling: none;
	pointer-events: none;
}


body {
	overflow: hidden;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	-webkit-tap-highlight-color: transparent;
	
	padding:0;
	margin:0;
}

h1, h2, h3 {font-family: 'Patrick Hand SC', cursive; }
p, h4, h5, h6, legend, label {font-family: 'Roboto', sans-serif; }
h1, h2, legend, label {
	font-weight: 300;
}
h5 {
	font-weight: 300;
	padding: 0 0 10px 10px;
}
legend, label {
	font-size: 35px;
	background-color: transparent !important;
}
p {
	font-size: 12px;
}

video {
    width: 100% !important;
    height: auto;
}

/* COLORS */
.white { color: #FFF }
.orange { color: #e58c17 }
.teal { color: #239ba6 }
.lightgrey { color: #CCC }
.midgrey { color: #799 }

.shrink { margin:0; padding:0 }

p.small {
	font-size: 10px;
	line-height: 13px;
}
p.medium {
	font-size: 11px;
	line-height: 13px;
}
p.normal {
	font-size: 14px;
	line-height: 17px;
}
p.large {
	font-size: 18px;
	line-height: 22px;
}
#wrapper {
	display: none;
}
#wrapper, #slider {
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	overflow: hidden;
	top:0px;
	bottom:0px;
	pointer-events:auto;
}
#slider {
	-moz-transition: -moz-transform 0.6s ease-in-out;
	-webkit-transition: -webkit-transform 0.6s ease-in-out;
	transition: transform 0.6s ease-in-out;
}
#slider.notransition {
	-moz-transition: none !important;
	-webkit-transition: none !important;
	transition: none !important;
}

#landingslider {
	position: absolute;
	width: 100% !important;
	top:0px;
	bottom:0px;
}
.maincontent {
	position: absolute;
	width: 100% !important;
	top:44px;
	bottom:0px;
	overflow: hidden;
	transition: all 0.3s;
}
.maincontent.fullScr{
	top: 0;
	z-index: 3000;
}

.landingoverlay {
    /*background-image: url('./i/landing-back.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
	background-position: center top;
	min-height: 100% !important;*/
}
.appback {
    background-image: url('./i/background.png');
    background-size: cover;
    background-repeat: no-repeat;
	background-position: left top;
	
	/*min-height: 100% !important;*/
}
.navbar {
	width:100%;
	height:36px !important;
	padding-top:8px;
	overflow:hidden;
	background-image:url('./i/nav-back@2x.png');
	background-size:100% 100%;
}


.navitems {
	position: absolute;
	top: 0;
	width:100%;
	height:36px !important;
	max-height:36px !important;
	overflow:hidden;
	font-family: 'Patrick Hand SC', cursive;
	transition: all 0.3s;
}
.navleft { position:absolute;left:0;top:0px;width:44px;height:100%;text-align:left;z-index: 2; }
.navleft:active { background-color:#e58c17 }
.navleft img { width:40px;height:40px;padding:0 5px; }
.navright { position:absolute;right:0;top:2px;width:auto;height:100%;text-align:right }
.navright.sub { padding-right:4px;z-index: 2; }
.navright.sub img:active { background-color:#e58c17 }
.navright img { width:40px;height:40px;padding:0 5px;border-left:1px solid rgba(55, 55, 55, 0.2); }
.navtitle {
	z-index:200;
	display:block;
	width:auto;
	height:100%;
	margin: 0 auto;
	text-align:center;
	color: #FFF;
	/*text-shadow: 0px -1px 1px #555;*/
	font-size: 26px;
	line-height: 26px;
	font-weight: normal;
	z-index: 1;
}
.navpopup .arrow {
	font-family: 'Patrick Hand SC', cursive;
	position: relative;
	top: 10px;
	font-size: 22px;
	color: rgba(255,255,255,0.75);
}

.tooltipster-base { box-sizing: content-box !important; }
.tooltipster-content { padding: 0 !important }

.row, .columns {
	padding: 0;
}

.imgbutton {
	cursor: pointer;
}

.listbox {
	width: 100%;
	padding: 3px;
	background-color: rgba(255,255,255,0.5);
	overflow-y:auto;
}

/*#slider, */
.scroller, .menuscroller, .maincontent, .accelerate {
	/* Enable hardware acceleration (where available) */
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
}

.scrolls { cursor: move }
.dragscroll-scroller { overflow: hidden !important }
.dragscroll-container { overflow: visible !important }
/*.dragscroll-container,*/
.dragscroll-scroller { position: relative }
.dragscroll-scroller { height: 100% }
.dragscroll-inner { display : block }
.dragscroll-scrollbar-container {
	z-index: 999;
    cursor : pointer;
    position: absolute;
    /*background: rgb(220,220,220);
    background: rgba(0,0,0,.1);*/
    /*-webkit-border-radius : 5px;
    -moz-border-radius : 5px;
    border-radius : 5px;*/
}
.dragscroll-scrollbar-container.autohide { display: none }
.dragscroll-scrollbar-container.h {
	opacity: 0.1;
    width : 100%;
    height : 4px;
    left : 0;
    bottom : 3px;
}
.dragscroll-scrollbar-container.v {
	z-index: 999;
	opacity: 0.1;
    height : auto;
    width : 6px;
    top : 3px;
	bottom : 3px;
    right : 2px;
}
.dragscroll-scrollbar.v {
	z-index: 999;
    width : 8px;
    top : 0;
}
.dragscroll-scrollbar.h {
    height : 8px;
    left : 0;
}
.dragscroll-scrollbar {
    position: absolute;
    cursor : pointer;
    background: rgb(160,160,160);
    /*background: rgba(0,0,0,.2);*/
    /*-webkit-border-radius : 5px;
    -moz-border-radius : 5px;
    border-radius : 5px;*/
}

.tooltipster-base { box-sizing: content-box; }

/* Slider switch */
.slider-frame {
	position: relative;
	display: block;
	/*margin: 0 auto;*/
	width: 84px;
	height: 32px;
	line-height: 32px;
	background-color: rgba(251, 249, 246, 0.5);
	border: 1px solid #ccc;
	-moz-border-radius: 2px;
	border-radius: 2px;
	/*-webkit-box-shadow: inset 0px 0px 4px 0 rgba(0, 0, 0, 0.25);
	-moz-box-shadow: inset 0px 0px 4px 0 rgba(0, 0, 0, 0.25);
	box-shadow: inset 0px 0px 4px 0 rgba(0, 0, 0, 0.25);*/
	/*-webkit-transition: all 0.15s ease-in-out;
	-moz-transition: all 0.15s ease-in-out;
	transition: all 0.15s ease-in-out;*/
	-webkit-box-shadow: inset 0px 1px 2px 0 rgba(0, 0, 0, 0.1);
	-moz-box-shadow: inset 0px 1px 2px 0 rgba(0, 0, 0, 0.1);
	box-shadow: inset 0px 1px 2px 0 rgba(0, 0, 0, 0.1);
}
.slider-button {
	position: absolute;
	display: block;
	width: 50%;
	height: 100%;
	line-height: inherit;
	background: #e58c17;
	-moz-border-radius: 1px;
	border-radius: 1px;
	-webkit-transition: all 0.15s ease-in-out;
	-moz-transition: all 0.15s ease-in-out;
	transition: all 0.15s ease-in-out;
	color: #FFF;
	font-family: 'Lato', sans-serif;
	font-size:14px;
	font-weight:bold;
	text-align: center;
	cursor: pointer;
	-webkit-box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.25);
	box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.25);
}
.slider-off-text, .slider-on-text {
	position: absolute;
	display: block;
	width: 50%;
	height: 100%;
	line-height: inherit;
	background: transparent;
	color: #BBB;
	font-family: 'Lato', sans-serif;
	font-size:14px;
	font-weight:bold;
	text-align: center;
	cursor: pointer;
}
.slider-off-text {
	float: left;
}
.slider-on-text {
	float: right;
	left: 50%;
}
.slider-button.on {
	margin-left: 50%;
	background: #e58c17;
	color: #FFF;
}

#menulist {
	position:absolute;
	width:86%;
	height:96%;
	left:2%;
	top:2%;
	background-image:url('./i/ui/menuboxes7.png');
	background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
	padding:0;
}
/*#lesson1 { background-image:url('./i/ui/menu-lesson1.png'); }
#lesson2 { background-image:url('./i/ui/menu-lesson2.png'); }
#lesson3 { background-image:url('./i/ui/menu-lesson3.png'); }
#lesson4 { background-image:url('./i/ui/menu-lesson4.png'); }*/
/*#lesson1.disabled { background-image:url('./i/ui/menu-disabled1.png'); opacity:1 !important; }
#lesson2.disabled { background-image:url('./i/ui/menu-disabled2.png'); opacity:1 !important; }
#lesson3.disabled { background-image:url('./i/ui/menu-disabled3.png'); opacity:1 !important; }
#lesson4.disabled { background-image:url('./i/ui/menu-disabled4.png'); opacity:1 !important; }*/
.lessonbutton {
	position:absolute;
	width:50%;
    padding-top: 31%;
    height: 0;
    background-repeat: no-repeat;
	background-size: contain;

	opacity: 0;
	-moz-transition: opacity 0.125s ease-in-out;
	-webkit-transition: opacity 0.125s ease-in-out;
	transition: opacity 0.125s ease-in-out;
	transition-delay: 0;
}
.lessonbuttonLeft{
	background-position: left;
	
}
#lesson1{
	background-position: right bottom;
	
}
#lesson2{
	background-position: left bottom;
	
}
#lesson3{
	background-position: right top;
	
}
#lesson4{
	background-position: left top;
	
}
.lessonbutton:active {
	opacity: 1;
	-moz-transition: opacity 0;
	-webkit-transition: opacity 0;
	transition: opacity 0;
}
.lessonbutton.disabled {
	/*opacity: 0.5;*/
	/*pointer-events: none;*/
}

#charanim {
	
    position:absolute !important;
    width:auto;
    height:auto;
    right: 0 !important; /*0*/
	padding-right: 20px;
    bottom:0;
	padding-bottom: 10px;
	pointer-events:none;
}
.charanimgif{
	max-width: 266px;/*266*/
    max-height: 266px;
    width: 30vh;/*30*/
    height: 30vh;
}

#menucolumn {
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	width:40% ;
	overflow:hidden;
	overflow-x:hidden;
	overflow-y:auto;
	-webkit-overflow-scrolling: touch;
	transition: all 0.3s;
}
.navitems.fullScr{
	top: -44px;
}
.fullScr #menucolumn{
	left:-40%;
}
#columnscroll {
	opacity: 1;
	-moz-transition: opacity 0.5s ease-in-out;
	-webkit-transition: opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
}
#columnscroll.disabled {
	opacity: 0.25;
	pointer-events: none;
}
.threadheader {
	font-size: 30px;
	padding:3px 5px;
	margin:0;
	color:#005;
	text-align:right;
	background-color:rgba(60,80,160,0.4);
	/*background-image: -webkit-linear-gradient(left , rgb(145,123,168) 0%, rgb(186,173,199) 100%);*/
	background-image: -webkit-linear-gradient(left , rgb(68,131,189) 0%, rgb(161,193,222) 100%);
}
h5.rowbutton {
	position: relative;
	left: 0;
	padding: 0;
	margin: 0;
}
h5.rowbutton.locked { opacity:0.25; pointer-events:none }
h5.rowbutton.lockeddemo { opacity:0.25; pointer-events:none!important; }
h5.rowbutton .threadhighlight {
	position: absolute;
	left: 0;
	width: 0%;
	height: 100%;
	background-color:rgba(200,120,30,0.3);
}
h5.rowbutton.current .threadhighlight {
	-moz-transition: width 1.8s ease-in-out;
	-webkit-transition: width 1.8s ease-in-out;
	transition: width 1.8s ease-in-out;
	width: 100%;
}
h5.rowbutton.current1 .threadhighlight {
	-moz-transition: width 5.5s ease-in-out;
	-webkit-transition: width 5.5s ease-in-out;
	transition: width 5.5s ease-in-out;
	width: 100%;
}
h5.rowbutton .threadname {
	clear: right;
	display:inline-block;
	font-size: 14px;
	line-height: 40px;
}
h5.rowbutton .threadicon {
	clear: both;
	display: inline-block;
	float: left;
	width: 30px;
	height: 30px;
	margin: 5px;
	background-image: url('./i/ui/thread-unfinished.png');
	background-size: 100% 100%;
}
h5.rowbutton .threadicon.played { background-image: url('./i/ui/thread-finished.png'); }
h5.rowbutton.current .threadicon { background-image: url('./i/ui/thread-current.png'); }


/*@media only screen and (min-device-width : 240px) and (max-device-width : 481px) and (orientation : landscape) {
	.threadheader { font-size: 20px; }
	h5.rowbutton .threadname { font-size: 11px; }
	h5.rowbutton .threadicon { width: 20px; height: 20px; margin: 10px 3px; }
}*/


#videocolumn {
	position:absolute;
	left:40%;
	top:0;
	bottom:0;
	right:0;
	height:100%;
	overflow:hidden;
	z-index: 100;
	transition: all 0.3s
}
.fullScr #videocolumn{
	left:0;
}
#moviebg {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:calc(100% - 75px);
	background-color:#000;
	border-left:2px solid #664499;
	border-bottom:2px solid #664499
}
#loading {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:calc(100% - 75px);
	background-image:url('./i/ui/loading_new.jpg');
	background-size:contain;
    background-repeat: no-repeat;
	background-position:center center;
	border-left:2px solid #664499;
	border-bottom:2px solid #664499;
}
#pickactivity, #initialthumb {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:calc(100% - 75px);
	background-image:url('./i/ui/pick-activity.png');
	background-size: cover;
	background-color: #000000;
	background-position: center;
	border-left:2px solid #664499;
	border-bottom:2px solid #664499;
	box-sizing: border-box;
	background-repeat: no-repeat;
}
#lessonmovie, #lessonhtml {
	/*display:none;*/
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:calc(100% - 75px);
	background-color:transparent;
	border-left:2px solid #664499;
	border-bottom:2px solid #664499;
	overflow:hidden;
}

#moviebutton {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:calc(100% - 75px);
	background-color:transparent;
}
.fullScr #pickactivity, 
.fullScr #initialthumb, 
.fullScr #lessonmovie, 
.fullScr #lessonhtml, 
.fullScr #loading, 
.fullScr #moviebutton, 
.fullScr #moviebg {
	border-left:0;
	border-bottom: 0;
	height: 100%;
}

#playcontrols { 
	position:absolute;
	top:calc(100% - 75px);
	bottom:0;
	left:0;
	right:0;
	background-color:transparent;
	padding:10px; 
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	pointer-events: none;
}

#playcontrols, a#pausebutton, a#pausebutton, a#fullscreenbutton { -moz-transition: opacity 0.5s ease-in-out;-webkit-transition: opacity 0.5s ease-in-out;transition: opacity 0.5s ease-in-out; }
#playcontrols.disabled, #pausebutton.disabled, #playbutton.disabled, #fullscreenbutton.disabled { opacity:0.5;pointer-events:none }
a#pausebutton, a#playbutton { float:left }
a#pausebutton img { content:url('./i/ui/pause.png');height:55px }
a:active#pausebutton img, a:hover#pausebutton img { content:url('./i/ui/pause-hi.png'); }
a#playbutton img { content:url('./i/ui/play_02.png');height:55px }
a:active#playbutton img, a:hover#playbutton img { content:url('./i/ui/play-hi.png'); }
a#fullscreenbutton { float:right; display: none; }
a#fullscreenbutton img { content:url('./i/ui/fullscreen.png');height:55px }
a:active#fullscreenbutton img, a:hover#fullscreenbutton img { content:url('./i/ui/fullscreen-hi.png'); }

#modal-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .25;
    z-index: 1000;
}

#plaque img {
    position: absolute;
    top: calc(50% - 111.25px);
    left: calc(50% - 200px);
    width: 400px;
    height: 222.5px;
    z-index: 2000;
}

.hide-modal {
    display: none;
}

#fullscreenIframe{
	position: absolute;
    background:#000;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	z-index: 5000;
}

iframe{
    border:none;
}


.videoButton{
	height: 100%;
    max-height: 55px;
    display: inline-block;
    width: 55px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
	cursor: pointer;
	pointer-events: all;
}
.imageButton{
	width: 55px;
	height: 55px;
}

#exitFSimage{
	display: none;
}
#enterFSimage{
	display: inline-block;
}
.fullScr #exitFSimage{
	display: inline-block;
}
.fullScr #enterFSimage{
	display: none;
}
#pauseimage{
	display: none;
}
#playimage{
	display: inline-block;
}
.videoPlays #pauseimage{
	display: inline-block;
}
.videoPlays #playimage{
	display: none;
}
.NOvideoContent #pauseimage,
.NOvideoContent #playimage
{
	display: none;
}
.NOvideoContent #playPauseBtn
{
	visibility: hidden;
}