body{
	padding:0px;
	font-family:Helvetica , sans-serif;
	font-size:18px;
	line-height:25px;
	letter-spacing:0px;
	background:#fafafa;
	margin:0px;
	
	
}
body,html{
	height:100%;	
}

a{
	color:inherit;
	text-decoration:none;
}
a:focus{
	outline: none; 	
}
.fright{
	float:right;
}
.fleft{
	float:left;
}
.small{
	font-size:12px;
	line-height:20px;
}
.color{
	color:rgba(0,0,255,1);
}

#main{
	dispaly:block;
	position:absolute;
	width:100%;
	height:100%;
	overflow:hidden;
}

/* mobile only header*/

#header{ 
	position:absolute;
	height:40px;
	width:100%;
	background:rgba(100,100,255,0.9);
	background:rgba(0,0,0,0.9);
	background:rgba(0,0,255,0.9);
	background:#09F;
	background:#fafafa;
	z-index:100000;
	color:#000;
	
}
/**/

.panel{
	position:absolute;
	background:#fafafa;
	height:100%;
	overflow:hidden;
	border-left:1px solid rgba(100,100,255,0.25);
	border-left:1px solid rgba(0,0,0,0.12);
	transition:width 0.5s,left 0.5s;
	transform: translateZ(0);
}

#home{	
	border:0px;
	left:0px;
	width:25%;
	z-index:1000;
}

#content{
	left:25%;
	width:25%;
	z-index:2000;
}

#detail{
	left:50%;
	width:50%;
	z-index:3000;
}



/*
.case0 #home{
	left:0px;	
	width:33.3%
}
.case0 #content{
	left:33.3%;
	width:66.7%
}
.case0 #detail{
	left:100%;
	width:66.7%
}



.case1 #home{
	left:0px;	
	width:33.3%
}
.case1 #content{
	left:33.3%;
	width:66.7%
}
.case1 #detail{
	left:100%;
	width:66.7%;
}


.case2 #home{
	left:-15%;
	width:33.3%	
}
.case2 #content{
	left:0px;
	width:33.3%;
}
.case2 #detail{
	left:33.3%;
	width:66.7%;
}

*/


/* panels */

.panel .bar{
	position:absolute;
	padding:0px 0px;
	width:100%;
	height:30px;
	z-index:200;
	color:rgba(0,0,255);
}
.panel .bar.head{
	height:40px;
	background:rgba(100,100,255,0.9);
	background:rgba(0,0,0,0.9);
	background:rgba(0,0,255,0.9);
	background:#fafafa;
	color:#fff;
	color:#000;
	padding:0px 0px;
}
.bar .absleft{
	position:absolute;
	top:0px;
	left:0px;
	width:40px;
}
.bar .absright{
	position:absolute;
	top:0px;
	right:0px;
	width:40px;
}

.panel .canvas {
    bottom: 40px;
    height: auto;
    position: absolute;
    top: 40px;
    width: 100%;
    z-index: 100;
}
.canvas .inner {
	position: absolute;
	z-index: 1;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	width: 100%;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
	
	padding:0px 20px 0px 20px;	
}
.canvas .inner.padding{
}
.iScrollLoneScrollbar{
	width:5px;bottom:0px;top:0px;right:0px;
}
.iScrollIndicator{
	height:25px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	position:absolute;
	background:rgba(0,0,255,1);
}
/* icons */

.icon{
	display:block;
	width:40px;
	height:40px;
	background-repeat:no-repeat; 

}
.icon:hover{
	cursor:pointer;
}
.icon.next{
	background-image:url(../img/icon_next.svg);
}
.icon.prev{
	background-image:url(../img/icon_prev.svg);
}
.icon.back{
	background-image:url(../img/icon_back2.svg)
}
.icon.isearch{
	background-image:url(../img/icon_search2.svg)
}
.icon.iclose{
	background-image:url(../img/icon_close2.svg)
}
.icon.imenu{
	background-image:url(../img/icon_menu.svg)
}

/* search */

.search, .bar .title{
	position:absolute;
	width:100%;
	height:40px;
	padding:9px 50px;
	color:rgba(255,255,255,0.75);
	color:#000;
}
.search{
	padding:0px;
}
.search .field{
	background:none;
	height:40px;
	position:relative;
}
.search .field .iclose{
	display:none;
}
.search.focus{
	background:rgba(50,50,255,1);
	padding:9px 5px  0px 50px;
}
.search.focus .field{
	
}
.search.focus .field .iclose{
	display:block;
}
.search input{
	width:100%;
	border:0px;
	background:none;
	heihgt:30px;
}
.search .icon{
	right:0px;
	top:-8px;
	position:absolute;
}

/* categories*/
#categories{
	margin-top:90px;
	border-bottom:2px solid rgba(0,0,0,1);
}
.cats-title{
	position:relative;
	padding:12px 50px 11px 0px;
	margin:0px;
	border-top:2px solid rgba(0,0,0,1);
	cursor:pointer;
}
.cats-title .right{
	display:none;
	position:absolute;
	width:40px;
	height:50px;
	top:0px;
	right:0px;
	background-image:url(../img/icon_plus.svg);
}
.cats.on .cats-title .right{
	background-image:url(../img/icon_minus.svg);
}
.cats .cats-content{
	//max-height:0;
    //transition:max-height 0.5s; 
	//overflow:hidden;
	max-height:1000px;
	padding-bottom:24px;
}
.cats.on .cats-content{
	max-height:1000px;
}
.cats ul{
	//border-top:1px solid rgba(0,0,0,0.12);
	padding:0px;
	margin:0px;
	list-style:none;
}
.cats li{
	position:relative;
	margin:0px;
	margin-bottom:2px;
	color: rgba(0,0,0,0.5);
	font-size:12px;
	line-height:18px !important;
	
}
.cats li .num{
	display:inline-block;
	margin-left:6px;
	padding:3px 6px 3px;
	color:rgba(0,0,0,0.3);
	
}
.cats li span{
	display:inline-block;
	background:rgba(0,0,0,0.12);
	border-radius:2px;
	padding:3px 6px 3px;
	color:#000;
	cursor:pointer;
}
.cats li span:hover{
	background:rgba(0,0,255,0.5);
	color:#fff;
}

.cats li.on span{
	background:rgba(0,0,255,1);
	color:#fff;
}

.apply{
	position:fixed;
	bottom:0px;
	right:0px;
	width:100%;
	
	z-index:1000;
	padding:0px;
	height:50px;
	background:rgba(0,0,255,1);
	
}
.apply a{
	width:100%;
	margin:0px;	
	height:50px;
	background:rgba(0,0,255,1);
	line-height:30px;
	display:block;
	text-align:center;
	//padding-right:60px;
	background:url(../img/icon_next_w.svg) no-repeat right center;
}

.filters{
	display:block;
	margin:-12px 0px 12px 0px !important;
	padding:12px 0px 0px!important;
	font-size:12px !important;
	line-height:18px !important;
}
.filters li{
	float:left;	
	width:auto !important;
	padding:3px 6px 3px!important;
	height:auto !important;
	background:rgba(0,0,255,1);
	margin:0px 2px 2px 0px!important;
	border-radius:2px;
	color:#fff !important;
}

/* app titles */

h2{
	font-size:42px;
	font-weight:400;
	font-weight:bold;
	line-height:50px;
	color: rgb(100,100,255);
	color: #000;
	border-bottom:1px solid rgba(100,100,255,0.2);
	border-bottom:2px solid #000;
	padding-bottom:16px;
	margin:25px 0px  12px;

}

/* content list */


.list{
}
.list ul{
	padding:0px;
	margin:0px;
}
.list li{
	display:block;
	width:100%;
	height:25px;
	overflow:hidden;
	padding:0px 0px;
	cursor:pointer;
	color:rgb(0,0,0);	
}
.list li a{
	display:block;
	margin-right:20px;	
	float:left;
}
.list li i{
	display:inline-block;
	font-style:normal;
	float:right;
	min-width:20px;
	text-align:center;
	font-size:11px;
	height:20px;
	line-height:20px;
	padding:0px 4px;
	border-radius:10px;
}

.list li:hover, .list li.on{
	color:rgba(0,0,255,0.5);	
}

.list li.on{
	color:rgba(0,0,255,1);	
}

/* content detail */

#detail ul{
	list-style:none;
	margin:0px 0px 20px 00px;
	padding:0px;
}
#detail .rel {
	margin-bottom:12px;
	padding-bottom:12px;
	border-bottom:1px solid rgba(100,100,255,0.2);
}
#detail a{
	color:rgb(0,0,255);	
}
#detail label{
	
	display:inline-block;
	padding:2px 12px 0px;
	margin-bottom:5px;
	color:#fff;
	background:rgba(100,100,255,1);
	border-radius:3px;
	width:100px;
	font-size:11px;
	line-height:20px;
	text-transform:uppercase;
	
}
#detail .rel .source{
	display:block;
	font-size:12px;
}
#detail .rel h3{
	line-height:20px;
	font-size:18px;	
	margin:0px;
	font-weight:bold;
}
#detail .rel p{
	margin:0px;
	max-width:500px;
	padding:2px 0px 0px;
	
}
#detail .rel .textlink{
	margin-left:10px;
	display:inline-block;
}
#detail .close{
	position:absolute;
	top:20px;
	right:20px;
	z-index:200;
}

/* content home */

#home h2{
	margin-top:90px;
	padding-top:10px;
	border-top:2px solid rgba(0,0,0,1);	
}

/*inline help*/

.hint{
	position:absolute;
	bottom:0px;
	width:100%;
	padding:10px 20px;
	background:#fff;
	
	color:rgba(51,204,153,1);
	z-index:100000;
}

/* responsive */

.mobileonly{
	display:none !important;
}
.desktoponly{
	display:block;
}
.desktop-hide{
	display:none;
}

/* media queries */
@media screen and (max-width: 1200px) {
	/*case0*/
	.desktop-hide{
		display:block;
	}
	.tablet-hide{
		display:none;
	}
	
	
	.case0 #home{
		left:0px;
		width:33.3%;
	}
	.case0 #content{
		left:33.3%;
		width:66.7%;
	}
	.case0 #detail{
		left:100%;
		width:66.7%;
	}
	/*case1*/
	.case1 #home{
		left:0px;
		width:33.3%;
	}
	.case1 #content{
		left:33.3%;
		width:66.7%;
	}
	.case1 #detail{
		left:100%;
		width:66.7%;
	}
	#navigate.isearch{
		display:block;
	}
	#navigate.back{
		display:none;
	}
	/*case2*/
	.case2 #home{
		left:-30%;
		width:33.3%;
	}
	.case2 #content{
		left:0px;
		width:33.3%;
	}
	.case2 #detail{
		left:33.3%;
		width:66.7%;
	}
	.case2 #navigate.isearch{
		display:none;
	}
	.case2 #navigate.back{
		display:block;
	}
	
	
	#content.noborderx{
		border-left:0px solid rgba(100,100,255,5);
	}
}

/* media queries */
@media screen and (max-width: 900px) {
	.tablet-hide{
		display:block;
	}
	.mobile-hide{
		display:none;
	}
	.panel{
		width:100% !important;
	}
	.panel.noborder{
		border-left:0px solid rgba(100,100,255,5);
		
	}
	
	/*case0*/
	.case0 #home{
		left:0px;
	}
	.case0 #content{
		left:100%;
	}
	.case0 #detail{
		left:100%;
	}
	/*case1*/
	.case1 #home{
		left:-30%;
	}
	.case1 #content{
		left:0px;
	}
	.case1 #detail{
		left:100%;
	}
	/*case2*/
	.case2 #home{
		left:-30%;
	}
	.case2 #content{
		left:-30%;
	}
	.case2 #detail{
		left:0px;
	}
	
	
	
	/* general */
	body{
		letter-spacing:0.3px;
	}
	.mobileonly{
		display:block !important;
	}
	.desktoponly, .mobilehide{
		display:none !important;
	}

	h2{
		font-size:32px;
		line-height:36px;	
	}
	/* header */
	.bar .title, .bar .search{
		text-align:center;
	}
	.search{
		padding:5px 40px !important;
	}
	/*
	.searchicon{
		margin-left:-9px;	
	}
	.searchicon_close{
		margin-right:9px;	
	}
	*/
	.search input{
		text-align:center;
	}
	/* home */
	#home{
		//text-align:center;
	}
	#home h2{
		margin-top:0px;
		padding:10px 0px;
		border-top:0px solid rgba(100,100,255,0.2);
		border-bottom:1px solid rgba(100,100,255,0.2);
		border-bottom:2px solid rgba(0,0,0,1);
	}
	.line{
		padding:10px 0px 25px;
		border-bottom:1px solid rgba(100,100,255,0.2);
		border-bottom:2px solid rgba(0,0,0,1);
	}
	.button{
		background:rgba(100,100,255,1);
		background:rgba(0,0,255,1);
		padding:10px 20px;
		color:#fff;
	}
	
	.canvas .inner{
		padding:0px 10px 0px 10px;	
	}
	#header #navigate{
		display:none;
	}
	
}