﻿@charset "utf-8";
/* CSS Document for SideNav plugin */


div[data-role="side-nav-button"] a.snp-icon-toggle-side-nav{
	height:30px;
	width:44px;
	display:block;
	margin:5px 0 3px 4px;
	background:rgba(0,0,0,0.3);
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#000000));
	background: -moz-linear-gradient(top, #ffffff, #000000);
	/*filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000');*/
	background-size: 44px 30px;
	background-repeat:no-repeat;
	background-image: url('toggle-side-nav.png');
	cursor:pointer;
	border:1px solid rgba(0,0,0,.5);
	-moz-border-radius:4px;
	-ms-border-radius:4px;
	-o-border-radius:4px;
	-webkit-border-radius:4px;
    border-radius:4px;
}

div[data-role="side-nav-button"] a.snp-icon-toggle-side-nav:active{
    background-image: url('toggle-side-nav-down.png');
}

/* Wrapper for the sidenav container */
div[data-role="side-nav-panel"] {
	background:#333336;
	margin:0 auto 0 0;
	width:275px;
	border:0;
	padding:0;
    top:0;
    left:0;
	z-index:1;
	display:block;
	height:100%;
	opacity:0;
	min-height:100% !important;	
    position:fixed !important;
}

div[data-role="side-nav-panel"] ul.snp-ul{
	list-style:none;
	width:275px;
	overflow-y:auto;
	overflow-x:hidden;	
	height:100%;
	margin-bottom:100px !important;
    -webkit-overflow-scrolling:touch;
    position:static;
}

div[data-role="side-nav-panel"] ul.snp-ul li{
	font-family:"Helvetica Nueue", Helvetica, "Lucida Sans Unicode", "Lucida Grande", Arial, sans-serif;
	text-align:left;
	padding:0;
	height:auto;
	min-height:18px;
	position:relative;
	background: #333336;
	border-top:1px solid #4e4e53;
	border-bottom:1px solid #1f2022;
	color:#ccc;
}

div[data-role="side-nav-panel"] ul.snp-ul li.snp-header-section{
	font-family:Helvetica, Arial, sans-serif;
	letter-spacing:0;
	text-transform:uppercase;
	min-height:16px;
	max-height:16px;
	font-size:60%;
	padding:5px 5px 0 5px;
	display:block;
	text-shadow:1px 1px 0 rgba(0,0,0,.3);
	font-weight:600;
	position:relative;
	background:#555;
	background: -webkit-gradient(linear, left top, left bottom, from(#494b4e), to(#393b40));
	background: -moz-linear-gradient(top,  #494b4e,  #393b40); 
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#494b4e', endColorstr='#393b40');
	border-top:1px solid #56585c;
	border-bottom:1px solid #1f2022;
	color:#999;
	
}

div[data-role="side-nav-panel"] ul.snp-ul li.company-section{
	height:35px;
	min-height:35px;
	max-height:35px;
	font-weight:700;
	font-size:110%;
	line-height:205%;
	color:#fff;
	padding:9px 2px 0 7px;
	background: -webkit-gradient(linear, left top, left bottom, from(#e98400), to(#ba5e01));
	background: -moz-linear-gradient(top, #e98400, #ba5e01);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e98400', endColorstr='#ba5e01');
	overflow:hidden;
	display:block;
}

div[data-role="side-nav-panel"] ul.snp-ul li.company-section span.company-section-company-name{
   width:auto;
   max-width:182px;
   overflow:hidden;
   -ms-text-overflow: ellipsis;
   -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
   float:left;
}

div[data-role="side-nav-panel"] ul.snp-ul li a{
	font-family:"Helvetica Nueue", Helvetica, "Lucida Sans Unicode", "Lucida Grande", Arial, sans-serif;
	border:0;
	color:#ccc;
	font-weight:500;
	font-size:90%;
	text-align:left;
	display:block;
	text-decoration:none;
	margin: 1px 7px 1px 3px;
	position:relative;
	width:220px;
	max-width:220px;
	height:auto;
	min-height:18px;
}

div[data-role="side-nav-panel"] ul.snp-ul li a span{
	margin:5px auto 0 30px;
	display:block;
	color:#ccc;
	text-shadow:-1px -1px 0 rgba(0,0,0,.5);
	cursor:pointer;
	font-weight:400;
	font-size:90%;
	white-space:pre-line;
	width:180px !important;
	max-width:180px !important;
	height:auto;
    padding: 5px;
}
div[data-role="side-nav-panel"] ul.snp-ul li a img{
	height:32px !important;
	width:32px !important;
	border:0;
	margin: 0 10px auto 0;
	top:12px;
	left:7px;
	position:absolute;
	display:block;
	vertical-align:middle;
}

.ui-listview li.ui-btn div{
	border:none;	
}

div[data-role="side-nav-panel"] ul.snp-ul li.snp-header-section div.sidenav-top-buttons{
	position:absolute;
	right:0;
	top:8px;
	width:80px;
	max-width:80px;
	height:35px;
	max-height:35px;
	overflow:hidden;
	padding:0;
	margin:0;
}

div[data-role="side-nav-panel"] ul.snp-ul li.snp-header-section div.sidenav-top-buttons a.snp-btn-home{
	width:32px;
	height:26px;
	overflow:hidden;
	background:url('home.png') no-repeat;
	background-size:100%;
	display:block;
	position:absolute;
	right:36px;
	top:0;
	padding:0;
}

div[data-role="side-nav-panel"] ul.snp-ul li.snp-header-section div.sidenav-top-buttons a.snp-btn-logout{
	width:32px;
	height:26px;
	overflow:hidden;
	background:url('logout.png') no-repeat;
	background-size:100%;
	display:block;
	position:absolute;
	right:8px;
	top:0;
	padding:0;
}

div[data-role="side-nav-panel"] ul.snp-ul li.snp-user-section {
    background:#1b1d21;
}

div[data-role="side-nav-panel"] ul.snp-ul li.snp-user-section a {
	position:relative;
	margin-bottom:0;
}

div[data-role="side-nav-panel"] ul.snp-ul li.snp-user-section p.snp-user-name{
	font-weight:700;
	margin:5px 0 0 32px;
	height:auto;
	width:auto !important;
	color:#fff;
	display:block;
}

div[data-role="side-nav-panel"] ul.snp-ul li.snp-user-section p.snp-user-name img{
	height:16px;
	width:16px;
	min-height:16px;
	min-width:16px;
	max-height:16px;
	max-width:16px;
	overflow:hidden;
	display:inline-block;
}

div[data-role="side-nav-panel"] ul.snp-ul li.snp-user-section p.snp-user-last-login{
	font-size:75%;
	display:block;
	margin:4px auto 0 32px;
	padding:0;
	color:rgba(255,255,255,.4);
	text-shadow:none;
	text-align:left;
	clear:both;
}

div[data-role="side-nav-panel"] ul.snp-ul li a p img{
	position: static;
	display: inline-block;
	margin-bottom: 6px;
	margin-left: 4px;
	height: 14px;
	width: 14px;
} 

div[data-role="side-nav-panel"] div.side-nav-spacer-div{
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    background: #1b1d21;
	border-top:1px solid #494c53;
	border-bottom:1px solid #1c1e21;
	position:relative;
	display:block;
	-moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

div[data-role="side-nav-panel"] .copyright {
    color:rgba(255,255,255,0.3);
    text-align:left !important;
    bottom:10px;
    padding-left:3px;
}


/*
==================================
	Media Queries
================================== */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	
	div[data-role="side-nav-button"] a.snp-icon-toggle-side-nav{
		margin-left:4px;
		background-image: url('toggle-side-nav@2x.png');
	}

	div[data-role="side-nav-panel"] ul.snp-u li.snp-header-section div.sidenav-top-buttons a.snp-btn-home{
		background:url('home@2x.png') no-repeat;
	}
	
	div[data-role="side-nav-panel"] ul.snp-u li.snp-header-section div.sidenav-top-buttons a.snp-btn-logout{
		background:url('logout@2x.png') no-repeat;
	}
}


@media only screen and (min-device-width:768px) and (max-device-width:1024px){
    div[data-role="side-nav-panel"] ul.snp-ul li a{
	    height:36px !important;
	    line-height:36px !important;
    }
    div[data-role="side-nav-panel"] ul.snp-ul li a span{
	   line-height:normal !important;
	   vertical-align:middle !important;
	   display:inline-block; 
    }
}
 