/*!
 * Creya Learning Tablet App Stylesheet
 * Author: Arunace
 * Copyright 2014, IndexStudio.net 
 */
 
 /**** CSS Reset ****/
html, body, div, span,   
m, h2, h3, h4, h5, h6, p, blockquote, pre,  
a, abbr, acronym, address, big, cite, code,  
img, ins, kbd, q, s, samp,  
small, strike, strong,   
dl, dt, dd, ol, ul, li,  
figure, figcaption, 
iframe,
fieldset, form, label, legend {  
    margin: 0;  
    padding: 0;  
    border: 0;  
    outline: 0;  
    vertical-align: text-top;  
    background: transparent;  
}  

a 						{ text-decoration: none; }
button:focus 	{ outline:0; }

/*****************/
body { background-color: #222; }

#wrapper { 
	max-width: 1280px;
	height: 100vh;
	margin: 0px auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
}

.left-panel { 
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	background-color: #fff;
	min-width: 120px;
	width: 13%;
	padding: 25px 20px;
	text-align: center;
}

.left-panel img { max-width: 100%; }

.mid-panel { 
	position: absolute;
	left: 13%;
	overflow-y: auto;
	bottom: 0;
	top: 0;
	background: url("../images/app-bg.jpg") no-repeat;
	background-size: cover; 
	width: 87%;
	min-height: 100%;
	height: 100vh;
	padding: 65px 60px 20px 10px;
}

.right-panel { 
	background: url("../images/white-trans.png") repeat;
	position: absolute;
	right: -200px;
	bottom: 0;
	top: 0;
	width: 200px;
	padding: 30px 0px;
	color: #df4204; 
	transition: right .3s;
	-webkit-transition: right .3s;
	-moz-transition: right .3s;
	-o-transition: right .3s;
}

.right-panel.blue-bg {
	width: 100%;
	right: -100%;
}

.right-panel.blue-bg ul.left-nav { 
	width: 200px;
}

.right-panel.blue-bg ul.left-nav li.current-context { 
	background-color: #119ACD;
}

.right-panel.blue-bg .contextual { 
	position: absolute;
	left: 200px;
	right: 0;
	top: 0;
	bottom: 0;
	padding: 80px 40px 30px 30px;
	border-left: 1px solid #999;
	background-color: #fff;
	color: #666;
}

.right-panel .contextual .content { 
	padding-right: 25px;
	overflow-x: hidden;
	overflow-y: auto;
	height: 100%;
}

.right-panel .contextual .content ul {
	list-style-type: normal;
	padding-left: 20px;
}

.right-panel .contextual .content ol { 
	list-style-type: normal;
	padding-left: 22px;
}

.right-panel.blue-bg .cross {
	position: absolute;
	top: 30px;
	right: 40px;
	font: 700 26px  arial;
	color: #666;
	cursor: pointer;
}

.right-panel.blue-bg .cross:hover {
	color: #333; 
}

.right-active 					{ right: 0px; }
.right-panel.blue-bg.right-active { right: 0px; }

.right-panel ul.left-nav { 
	list-style-type: none; 
}

.right-panel ul.left-nav li { 
	padding: 5px 0;
	transition: background .2s;
	-webkit-transition: background .2s;
	-moz-transition: background .2s;
	-o-transition: background .2s;	
}

.right-panel .left-nav a 					{ padding: 0 25px; display: block; width: 100%; font: normal 15px  arial; color: #df4204; line-height: 1.9em; }
.right-panel .left-nav a:hover 		{ color: #fff; text-decoration: none; }
.right-panel ul.left-nav li:hover  	{ background-color:  #df4204; }
.right-panel .sticky-foot 					{ position: absolute; text-align: center; left: 0; right: 0; bottom: 30px; } 
.sticky-foot a:hover 						{ color: #df4204; text-decoration: underline; }

.right-panel.blue-bg .left-nav a 				{ color: #fff; }
.right-panel.blue-bg ul.left-nav li:hover  { background-color:  #119ACD; }

/*****************/
.dash-left 	{ float: left; width: 50%; }
.dash-right 	{ float: left; width: 50%; }

.dash-left a, 
.dash-right a {
	text-decoration: none;
}

.trans-block { 	
	background: url("../images/trans-bg.png") repeat;
	position: relative;
	width: 33%;
	height: 158px;
	display: inline-block;
	margin-right: .2%;
	margin-top: 1px;
	padding: 20px;
	color: #fff;
	font: normal 12px  arial;
	transition: background .3s;
	-webkit-transition: background .3s;
	-moz-transition: background .3s;
	-o-transition: background .3s;
}

.trans-block:hover 							{ background: url("../images/selected-trans-bg.png") repeat; }
.locked-block 									{ background: url("../images/dark-trans-bg.png") repeat; color: #cf9a30; }
.trans-block.locked-block:hover 	{ background: url("../images/selected-dark-trans-bg.png") repeat; }
.trans-block h2 								{ font: 300 24px  arial; }
.trans-block .details 						{ position: absolute; bottom: 20px; font: 300 12px  arial; }
.trans-block .details img 					{ margin-top: 2px; }
.trans-block .details img.lock 			{ display: block; margin-bottom: 10px; margin-left: -2px; }

.hori-1 		{ width: 65%; height: 158px; }
.vert-1 		{ width: 34%; height: 239px; }
.right-most 	{ margin-right: 0px; } 

/*****************/
.menu { 
	position: absolute;
	top: 10px;
	right: 0px;
	padding: 20px;
	transition: all .3s;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-o-transition: all .3s;
}

.menu-active 	{ right: 200px; }
.menu-inner 	{ padding: 15px 40px 10px 10px; }

.footer { 
	position: absolute; 
	bottom: 15px;
	left: 43%;
	color: #fff;
	font: 300 11px  arial;
}

.footer a 	{ color: #fff; } 

/*****************/
.header {
	height: 100px;
	padding: 16px 20px 0px 20px;
	background-color: #fff;
}

.logo-area	{ float: left; width: 15%; }
.small-logo 	{ height: 78px; width: auto;}
.adjust-xel 	{ margin-top: 28px; }

.page-heading { 
	float: left;
	font: 300 24px  arial;
	color: #333;
	padding: 28px 0px 5px 0px;
	width: 790px;
    height: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-area {  
	float: right;
	margin-top: 10px; 
	padding: 20px 20px 5px 5px;
}

.school-logo { 
	float: right;
	margin: 8px 18px 0 0; 
	max-width: 82px;
	max-height: 66px;
}

/*****************/
.unit-nav {
	position: absolute;
	top: 100px;
	bottom: 0;
	left: 0;
	background-color: #ebeded;
	min-width: 120px;
	width: 15%;
	padding: 25px 20px 10px 0px;
}

.vert-nav-list {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.vert-nav-list a {
	text-decoration: none;
}

.vert-nav-list li {
	font: 300 22px  arial;
	color: #999;
	padding: 2px 0px 2px 30px;
	margin: 20px 0px;
	border-left: 8px solid transparent;
	display: block;
	cursor: pointer;
	transition: border .2s;
	-webkit-transition: border .2s;
	-moz-transition: border .2s;
	-o-transition: border .2s;
}

.vert-nav-list li.current ,
.vert-nav-list li:hover {
	border-left: 8px solid #777;
	font-weight: normal;
	color: #777;
}

.mid-panel-inner { 
	position: absolute;
	left: 15%;
	bottom: 0;
	top: 100px;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: #fff; 
	width: 85%;
	padding: 20px 55px 20px 25px;
	font: normal 20px arial;
	line-height: 150%;
	color: #666;
	border-top: 1px solid #ebeded;
}

.mid-panel-inner p {
	font: normal 20px arial;
	line-height: 150%;
	color: #666;
	margin-bottom: 10px;
}

.mid-panel-inner > div img {
	padding: 5px 35px;
	max-width: 100%;
}

.main-heading { 
	padding: 0px;
	margin: 10px 0px;
	font: 300 27px arial;
	color: #666;
}

.sub-heading { 
	padding: 0px;
	margin: 10px 0px;
	font-size: 24px;
	font-weight: bold;
	color: #666;
}

/*****************/
.grey-box {
	font: 300 18px arial;
	color: #666;
	float: left;
	padding: 30px;
	margin: 20px 1px 20px 0;
	background-color: #ebeded;
	transition: background .3s;
	-webkit-transition: background .3s;
	-moz-transition: background .3s;
	-o-transition: background .3s;
}

.grey-box:hover {
	cursor: pointer;
	background-color: #dadada;
}

.light-blue-box {
	font: 300 16px arial;
	color: #666;
	float: left;
	padding: 80px 30px 10px 15px;
	margin: 0 1px 20px 0;
	background-color: #d4e9f1;
	transition: background .3s;
	-webkit-transition: background .3s;
	-moz-transition: background .3s;
	-o-transition: background .3s;
}

.light-blue-box:hover {
	cursor: pointer;
	background-color: #b9d7e2;
}

div.background, div.unit_ncf {
    display: none;
}

div.background, div.unit_ncf, div.overview {
    font-size: 20px;
    font-weight: normal;
    line-height: 30px;
}

div.background b, div.unit_ncf b {
    font-size: 20px;
    font-weight: bold;
}

div.background p, div.unit_ncf p, div.overview p,
div.background ul li, div.background ol li {
    font-size: 20px;
    font-weight: normal;
    line-height: 30px;
}

div.unit_ncf div {
    margin: 10px 0px;
}

div.background img {
    clear: both;
    display: block;
    text-align: center;
	max-width: 100%;
}

/*****************/
.action-bar {
	position: absolute;
	top: 100px;
	left: 0;
	right: 0;
	height: 70px;
	background-color: #FFCB08;
	color: #666;
	font: 300 18px  arial;
}	

.back-button 	{ float: left; }
.headline 		{ float: left; padding: 16px 10px 0px 30px; }
.headline > img { margin: 4px 2px 0px 0px; }

.adjust-hdline { padding: 8px 0px; }
 
.mid-panel-full { 
	position: absolute;
	left: 0;
	bottom: 0;
	top: 170px;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: #fff; 
	width: 100%;
	max-height: 100%;
	padding: 20px 80px 20px 45px;
	font: normal 20px arial;
	line-height: 150%;	
	color: #666;
	border-top: 1px solid #ebeded;
}

.mid-panel-full p {
	font: normal 20px arial;
	line-height: 150%;
}

.mid-panel-full ul, 
.mid-panel-inner ul {
	padding-left: 20px;
}

.mid-panel-full ol,
.mid-panel-inner ol { 
	padding-left: 22px;
}
	
.mid-panel-full ul li, 
.mid-panel-full ol li, 
.mid-panel-inner ul li,  
.mid-panel-inner ol li {
	font-size: 20px;
	line-height: 30px;
}

.blue-box { 
	background-color: #ceeffb;
	font-size: 20px;
	color: #666;
	padding: 20px;
	margin-bottom: 20px;
}	

.border-box { 
	border: 1px solid #ebeded;
	font: normal 18px  arial;
	line-height: 1.4em;
	color: #666;
	padding: 20px;
	margin-bottom: 10px;
}	

.border-box p {
	margin: 5px 0px;
	font: normal 20px  arial;
}

.border-box .list-item {
    font-size: 20px;
    line-height: 30px;
    margin: 5px 0px;
}

.border-box .list-item img {
    clear: both;
    margin: 20px 0px;
}

.border-box .list-item p  {
        display: inline;
}

.title-heading { 
	padding: 0;
	margin: 0;
	margin-bottom: 3px;
	font-size: 27px;
	font-weight: bold;
	color: #666;
}


/**************/
.contextual .border-box { 
	font: normal 20px  arial;
	line-height: 100%;
	padding: 15px;
}

.contextual .border-box b { 
	font: bold 20px  arial;
}

.contextual .border-box p { 
	font: normal 20px  arial;
	margin-bottom: 10px;
}

.contextual .title-heading { 
	font: normal 26px arial;
	color: #00aeef;
	margin-bottom: 10px;
}

/**************/
div.intro {
    font-size: 20px;
    font-weight: normal;
    line-height: 30px;    
}

div.border-box div.background {
    display: block;
}

div.intro ul li, div.intro ol li, div.intro p {
    font-size: 20px;
    font-weight: normal;
    line-height: 30px;    
}

div.background b {
    font-weight: bold;
}

div.background a {
    font-size: 20px;
    vertical-align: baseline;
}

.single-item { 
	float: left;
	width: 48%; 
	padding-right: 20px;
	margin: 1%; 
	position: relative;
}

.single-item .item-title { 
	position: relative;
	padding: 14px 28px 0px 0px;
	height: 75px;
	word-wrap: break-word;
	font-size: 20px;
	color: #666;
}

.single-item .item-fig { 
	float: left;
	padding-right: 15px; 
	min-width: 80px;
	width: auto;
}

.single-item .fix-figure { 
	max-height: 60px;
	height: 60px;
	width: auto;
}

.single-item .item-count { 
	position: absolute;
	bottom: 2px;
	right: 2px;
	background-color: #ebeded;
	padding: 4px 12px;
	color: #666;
	font-size: 28px;
}

.single-step { 
	position: relative;
	padding-left: 68px;
}

.single-step a {
    font-size: 20px;
}

.single-step .item-count { 
	position: absolute;
	top: 2px;
	left: 2px;
	background-color: #666;
	padding: 4px 12px;
	color: #fff;
	font-size: 28px;
}

.single-step .details {
	float: left;
	font-size: 20px;
	line-height: 30px;
	color: #666;
	width: 75%;
}

.single-step .prop {
	position: relative;
	float: right;
	margin: 5px 0px 5px 10px;
}

.single-step .prop img {
	max-height: 100px;
	width: auto;
}

.single-step .prop img.mag { 
	position: absolute;
	left: 5px;
	bottom: 5px;
	width: 16px;
	height: auto;
}
	
/*****************/
.grey-bg 			{ background-color: #666; }
.blue-bg 			{ background: none; background-color: #00aeef; }

.clear 				{ clear: both;	height: 0px; line-height: 0px; }
.spacer 			{ clear: both; height: 5px; line-height: 5px; }
.spacer-large 	{ clear: both; height: 10px; line-height: 10px; }
.spacer-huge 	{ clear: both; height: 20px; line-height: 20px; }
.spacer-mega 	{ clear: both; height: 40px; line-height: 20px; }
.spacer-wow 	{ clear: both; height: 60px; line-height: 20px; }

/**** Overriding Bootstrap ****/
.nav-tabs 	{ border: 0px }

.nav-tabs > li > a {
	background-color: transparent;
	border: 0px;
	padding: 9px 2px 20px 2px; 
	margin: 0px 15px;
	color: #000;
	transition: all .3s;
}

.nav-tabs > li > a:hover {
	color: #000;
	margin-top: 2px;
	background-color: transparent;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover, 
.nav-tabs > li.active > a:focus { 
	background-color: transparent;
	border: 0px;	
	margin: 0px 15px;
	color: #000;
	border-bottom: 3px solid #000;
}

.nav-tabs > li > a				{ color: #000; }
.nav-tabs > li						{ margin-top: -3px !important; }
.nav > li > a > img 			{ margin-top: 4px; }

/**** Media Queries ****/
@media screen and (max-width: 1024px) {
	.mid-panel 					{ width: 91%; }
	.vert-1 						{ width: 42%; height: 239px; }
	.single-item .item-title { width: 70%; }
	
	.single-step .details 	{ width: 70%; }
	.footer { 
		display: block;
		margin-top: 60px;
		left: auto;
		position: relative; 
		text-align: center;
	}
}

@media screen and (max-width: 950px) {
	.mid-panel 		{ width: 91%; }
	.trans-block 	{ width: 38%; }
	.hori-1 			{ width: 60%; }
	.vert-1 			{ width: 46%; }
	
	.single-item .item-title 	{ width: 85%; padding: 15px 15px 0px 0px; font-size: 16px; }
	.single-item .item-count { padding: 2px 8px; font: normal 20px arial; }
	
	.single-step .details 		{ font-size: 20px; width: 60%; padding-left: 30px; }
	.single-step .item-count 	{ padding: 2px 10px; font: normal 20px arial; }
	.single-step .prop img 	{ max-height: 70px; }
	
	.left-panel 		{ width: 15%; padding: 15px 10px; }
	.mid-panel 		{ left: 15%; width: 93%; }
	.mid-panel-full { padding: 20px 45px; }
	.border-box 	{ font-size: 20px;	padding: 10px; }	
	
}

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