/* Icons */
.sb-slidebar .icon-none { padding-left:44px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
.sb-slidebar .icon-home { width:24px; height:24px; float: left; margin:0px 10px; background:transparent url('/ui/images/mobile/trail-menu/home.png') no-repeat top left / 24px 24px; }
.sb-slidebar .icon-nearby { width:24px; height:24px; float: left; margin:0px 10px; background:transparent url('/ui/images/mobile/trail-menu/nearby.png') no-repeat top left / 24px 24px; }
.sb-slidebar .icon-toptrails { width:24px; height:24px; float: left; margin:0px 10px; background:transparent url('/ui/images/mobile/trail-menu/toptrails.png') no-repeat top left / 24px 24px; }
.sb-slidebar .icon-outdoor { width:24px; height:24px; float: left; margin:0px 10px; background:transparent url('/ui/images/mobile/trail-menu/outdoor.png') no-repeat top left / 24px 24px; }
.sb-slidebar .icon-travel { width:24px; height:24px; float: left; margin:0px 10px; background:transparent url('/ui/images/mobile/trail-menu/travel.png') no-repeat top left / 24px 24px; }
.sb-slidebar .icon-login { width:24px; height:24px; float: left; margin:0px 10px; background:transparent url('/ui/images/mobile/trail-menu/login.png') no-repeat top left / 24px 24px; }
.sb-slidebar .icon-signout { width:24px; height:24px; float: left; margin:0px 10px; background:transparent url('/ui/images/mobile/trail-menu/signout.png') no-repeat top left / 24px 24px; }

/* Override Defaults */
.sb-slidebar {
    background-color: #2f2f2f;
    height: 100%;
    overflow-y: auto;
    position: fixed;
    top: 0;
    visibility: hidden;
    z-index: 2;
}

/* Main Menu */
.sb-menu { /* Apply to <ul> or <ol>. */
	padding: 0;
	margin: 0;
	list-style-type: none;
}

.sb-menu li {
	width: 100%;
	padding: 0;
	margin: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1); /* Will lighten any background colour you set. */
	border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Will darken any background colour you set. */
}

.sb-menu > li:first-child {
	border-top: none; /* Removes top border from first list item.. */
}

.sb-menu > li:last-child {
	border-bottom: none; /* Removed bottom border from last list item. */
}

.sb-menu li a {
	width: 100%; /* Makes links full width. */
	display: inline-block;
	padding: 10px 0px; /* Creates an even padding the same size as your font. */
	color: #f2f2f2;
	font-size: 16px;
	font-weight:bold;
	text-decoration:none;
	line-height: 24px;
	-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
}

.sb-menu li a:hover {
	text-decoration: none;
	background-color: rgba(255, 255, 255, 0.05); /* Will lighten any background colour you set. */
}

/* Borders */
.sb-left .sb-menu li a {
	border-left: 3px solid transparent;
}

.sb-left .sb-menu li a:hover {
	border-left: 3px solid; /* Removes transparent colour, so border colour will be the same as link hover colour. */
}

.sb-right .sb-menu li a {
	border-right: 3px solid transparent;
}

.sb-right .sb-menu li a:hover {
	border-right: 3px solid; /* Removes transparent colour, so border colour will be the same as link hover colour. */
}

/* Submenus */
.sb-submenu {
	display: none;
	padding: 0;
	margin: 0;
	list-style-type: none;
	background-color: rgba(255, 255, 255, 0.1); /* Submenu background colour. */
}

/* Caret */
span.sb-caret {
	width: 0;
	height: 0;
	display: inline-block;
	margin: 0 5px;
	border: 5px solid transparent;
}

span.sb-caret { /* Caret Down */
	border-top: 5px solid;
	border-bottom: 0px solid transparent;
}

.sb-submenu-active > span.sb-caret { /* Caret Up */
	border-top: 0px solid transparent;
	border-bottom: 5px solid;
}