/* 
CSS File Last Update : 5 April 2016
Project: juraganseken.com (Juragan Seken)
Website Designed & Coded by: Aditama (pandavamedia.net)
*/

/* HEADER NAVIGATION */
#sysHeaderSection { position:fixed; z-index:10000; top:0px; width:100%; background:#666666; border-bottom:1px #FFFFFF solid; height:53px; 
	-webkit-box-shadow: 0px 0px 10px #CCC;
		 -moz-box-shadow: 0px 0px 10px #CCC;
					box-shadow: 0px 0px 10px #CCC;
}
.sysNavWrapper { position:absolute; top:10px; bottom:10px; left:10px; right:10px; margin:auto; }
.sysLogo { float:left; max-width:130px; max-height:31px; padding:2px; background:#FFFFFF; margin-left:5px;
	-webkit-border-radius: 2px; 
	   -moz-border-radius: 2px; 
					border-radius: 2px;
}
.sysLogo>img { max-width:100%; }
.sysMenu { float:left; width:80%; margin:4px 20px; }
.sysMenu.sysAccMenu { float:right; width:13%; margin:4px 0px; }
.sysMenu>ul { list-style-type:none; }
.sysMenu.sysAccMenu>ul { float:right; }
.sysMenu>ul>li { cursor:pointer; position:relative; float:left; font-size:13px; letter-spacing:0.4px; margin-right:3px; color:#FFFFFF; padding:4px 10px; }
.sysMenu>ul>li.sysDropLnk { padding-right:19px; }
.sysMenu>ul>li.sysOn { background:#adb3b8; }
.sysMenu>ul>li.sysOn>a { color:#FFFF00; }
.sysMenu>ul>li.sysOn>a:hover { color:#FFFF00; }
.sysMenu>ul>li.sysMenuNotif { width:25px; height:25px; margin-top:1px; margin-right:5px; padding:0; background:url('../../i/icons/icn-notification.png') no-repeat center center; opacity:0.4; }
.sysMenu>ul>li.sysMenuNotif:hover { opacity:1.0; }
.sysMenu>ul>li.sysMenuNotif.notifOn { background-image:url('../../i/icons/icn-notification-on.png'); opacity:0.9 !important; }
.sysMenuMobile { display:none; }
.sysNvArr { position:absolute; top:0; bottom:0; right:4px; width:14px; height:8px; margin:auto; background:url('../../i/buttons/btn-nv-arrow.png') no-repeat center center; 
			-webkit-transition: all 0.2s;
			-moz-transition: all 0.2s;
			-ms-transition: all 0.2s;
			-o-transition: all 0.2s;
			transition: all 0.2s;
}
.sysCollapseArr {
	    -webkit-transform: rotate(90deg);
	    -moz-transform: rotate(90deg);
	    -ms-transform: rotate(90deg);
	    -o-transform: rotate(90deg);
	    transform: rotate(90deg);
}
.sysSubBox { z-index:10010; display:none; position:absolute; min-width:170px; top:24px; left:0; background:#adb3b8; padding:7px 6px; text-align:left;
	-webkit-box-shadow: 2px 2px 1px rgba(0,0,0,0.3);
		 -moz-box-shadow: 2px 2px 1px rgba(0,0,0,0.3);
					box-shadow: 2px 2px 1px rgba(0,0,0,0.3);
}
.sysSubBox.subBxRight { left:auto; right:0; text-align:right;
	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
		 -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
					box-shadow: -2px 2px 1px rgba(0,0,0,0.3);	
}
.sysSubBox>ul { list-style-type:none; }
.sysSubBox>ul>li { font-size:12px; cursor:pointer; padding:2px 4px; border-top:1px #999999 dotted; white-space:nowrap; 
			-webkit-transition: all 0.2s;
			-moz-transition: all 0.2s;
			-ms-transition: all 0.2s;
			-o-transition: all 0.2s;
			transition: all 0.2s;
}
.sysSubBox>ul>li>a { color:#FFFFFF; }
.sysSubBox>ul>li:hover { background:rgba(255,255,255,0.4); }
.sysSubBox>ul>li:hover>a { color:#666666; }
.sysSubBox>ul>li.sysSubNote { cursor:auto; border:0; }
.sysSubBox>ul>li.sysSubNote:hover { background:none; }
.sysSubBox>ul>li.sysSubNote>label { display:block; color:#99E5FF; font-weight:bold; line-height:12px; margin-top:3px; white-space:nowrap; }
.sysSubBox>ul>li.sysSubLn { cursor:auto; padding:0; border-top:5px rgba(102,102,102,0.1) solid; margin:6px 0px 4px 0px; }
.sysSubBox>ul>li.sysSubLn:hover { background:none; }
a.sysNvLogOut { color:#FFFF00 !important; font-weight:bold; }

/* NAVIGATION ICON */
.sysMenulbl { padding-left:21px; height:18px; background-repeat:no-repeat; background-position:left center; padding-top:1px; }
.sysMenulbl>a { color:#EEEEEE; }
.sysMenulbl>a:hover { color:#FFFFFF; }
.sysNvAcc { background-image:url('../../i/icons/icn-acc.png'); padding-left:25px; }
.sysNvProduct { background-image:url('../../i/icons/icn-product.png'); padding-left:23px; }
.sysNvDashboard { background-image:url('../../i/icons/icn-dashboard.png'); }
.sysNvSetting { background-image:url('../../i/icons/icn-setting.png'); }
.sysNvBuy { background-image:url('../../i/icons/icn-buy.png'); }
.sysNvPages { background-image:url('../../i/icons/icn-pages.png'); }
.sysNvBanner { background-image:url('../../i/icons/icn-banner.png'); }
.sysNvMember { background-image:url('../../i/icons/icn-member.png'); }
.sysNvUser { background-image:url('../../i/icons/icn-lock.png'); }
.sysNvBlog { background-image:url('../../i/icons/icn-blog.png'); }
.sysNvTeam { background-image:url('../../i/icons/icn-team.png'); }

/* FOOTER NAVIGATION */
#sysFootSection { border-top:1px #EEEEEE solid; background:#FFFFFF; padding:8px 0px 10px 0px; font-size:12px; }
#sysFootSection>span { margin:0px 3px; color:#C0C0C0; }
#sysFootSection a { color:#999999; }
#sysFootSection a:hover { color:#000000; }


/* MOBILE RESPONSIVE */
/* small device ----------- */
@media only screen 
and (max-width: 700px) {
		.sysBuy { display:none; }
		.sysSetting { display:none; }
		.sysMenu { display:none; }
		
		/* MENU NAVIGATION MOBILE */
		.sysMenuMobile { cursor:pointer; z-index:1000; display:block; overflow:hidden; float:right; margin-right:10px; }
		.sysMenuMobile>ul { list-style-type:none; }
		.sysMenuMobile>ul>li { float:left; }
		.sysMnMblLbl { margin-left:10px; width:38px; height:30px; border:1px #909090 solid; background-color:rgba(0,0,0,0.3); background-repeat:no-repeat; background-position:center center;
			-webkit-border-radius: 4px; 
			   -moz-border-radius: 4px; 
							border-radius: 4px;
		}
		.sysNvMblMore { background-image:url('../../i/buttons/btnm-menu.png'); }
		.sysNvMblAcc { background-image:url('../../i/buttons/btnm-acc.png'); }
		.sysMenuMobileBox { display:none; position:fixed; top:53px; left:15px; right:0; bottom:0; margin:auto; background:rgba(0,0,0,0.9); }
		.sysMnMblFrame { position:absolute; top:15px; left:25px; right:20px; bottom:15px; overflow-y:auto; }
		.sysMnMblFrame ul { list-style-type:none; }
		.sysMnMblFrame>ul>li { display:block; padding:8px; border-bottom:1px rgba(255,255,255,0.3) solid; text-align:left; }
		.nvMbl { display:block; position:relative; padding:2px; }
		.nvMbl>a { font-size:15px; color:#999999; font-weight:bold; }
		.nvMbl.nvMblOn>a { color:#FFFFFF; }
		/* navigation sub box */
		.sysMblSubBox { display:none; width:91%; padding:5px; margin-left:10px; }
		.sysMblSubBox li { padding:5px; border-top:1px rgba(255,255,255,0.15) solid; }
		.sysMblSubBox li>a { font-size:14px; }
		.sysMblSubBox li.sysSubLn { cursor:auto; padding:0; border-top:5px rgba(102,102,102,0.15) solid; margin:2px 0px 2px 0px; }
		.sysSubNote { color:#CCCCCC; }
		.sysSubNote>label { display:block; color:#99E5FF; font-weight:bold; font-size:16px; line-height:18px; margin-top:3px; white-space:nowrap; }
}