/* ---------------
 * Slidebars Theme
 *
 * ---------
 * CSS Index
 *
 * 001 - Box Model
 * 002 - Site
 * 003 - Slidebars
 * 004 - Slidebar Menus
 * 005 - Slidebar Widgets
 * 006 - Top Navigation Bar
 * 007 - Slidebar Controls
 *
 * ---------------
 * 001 - Box Model
 */

* { /* Highly recommended to avoid any width alterations in the Slidebars or Site, which may cause horizontal scrolling. */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* ----------
 * 002 - Site
 */

#sb-site {box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.3); /* Casts a shadow onto the Slidebars from site. */ }

/* ---------------
 * 003 - Slidebars
 */

.sb-slidebar { background-color: #222222; /* Background colour. */ color: #e8e8e8; /* Text colour. */ }
.sb-slidebar a { color: #f2f2f2; /* Link colour. */ text-decoration: none; }
.sb-slidebar a:hover { color: #49AEF2; /* Link hover colour. */ text-decoration: underline; }

/* --------------------
 * 004 - Slidebar Menus
 */

/* 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: 1em; /* Creates an even padding the same size as your font. */ }
.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. */ }

/* Submenus */
.sb-submenu { display: none; padding: 0; margin: 0; list-style-type: none; background-color: rgba(255, 255, 255, 0.05); /* 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; }

/* ----------------------
 * 005 - Slidebar Widgets
 */

.sb-widget { border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.1); /* Will lighten any background colour you set. */ margin: 14px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25); /* Slight shadow. */ }
.sb-widget-header { border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Will darken any background colour you set. */ padding: 14px; background-color: #292929; /* Widget title background colour. */ }
.sb-widget-title { margin: 0; /* Removes browser default margins for heading tags. */ }
.sb-widget-content { border-top: 1px solid rgba(255, 255, 255, 0.1); /* Will lighten any background colour you set. */ padding: 14px; background-color: #262626; /* Widget content background colour. */ }

/* ------------------------
 * 006 - Top Navigation Bar
 */

.sb-navbar { display: none; width: 100%; height: 52px; position: fixed; top: 0; left: auto; right: auto; z-index: 1000; background-color: #222222; /* Bar colour. */ box-shadow: /* Layered single pixel shadows to create a one sided shadow effect. */ 0 5px 0 0 rgba(0, 0, 0, 0.01), 0 4px 0 0 rgba(0, 0, 0, 0.02), 0 3px 0 0 rgba(0, 0, 0, 0.04), 0 2px 0 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.08), /* Top highlight */ 0 1px 0 0 rgba(255, 255, 255, 0.1) inset, /* Left highlight */ 1px 0 0 0 rgba(255, 255, 255, 0.1) inset, /* Right highlight */ -1px 0 0 0 rgba(255, 255, 255, 0.1) inset, /* Bottom lowlight */ 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset; /* Glass gradient overlay, works with any colour background. */ background-image: -webkit-linear-gradient(top, rgba(255,255,255, 0.05) 50%, rgba(0,0,0, 0.02) 51%); /*  Webkit syntax. */ background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0.02) 51%); /* Final syntax. */ background-size: 100%; background-repeat: no-repeat; }

html.sb-android .sb-navbar { position: absolute; /* Fix navbar to top for old versions of Android Browser. */ }

/* Navbar Menu Items */
.sb-navbar-menu { list-style-type: none; padding: 0; margin: 0; }
.sb-navbar-menu-left { float: left; }
.sb-navbar-menu li { padding: 0; margin: 0; display: block; float: left; }
.sb-navbar-menu li a { display: inline-block; color: #f2f2f2; /* Navbar link colour */ padding: 14px; text-decoration: none; }
.sb-navbar-menu li a:hover { color: #f2f2f2; /* Navbar link hover colour */ background-color: rgba(0, 0, 0, 0.05); /* Will lighten any background colour you set. */ }

/* -----------------------
 * 007 - Slidebar Controls
 */

.sb-toggle-left, .sb-open-left, .sb-close { cursor: pointer; /* Help desktop users with Slidebar controls. */ }

/* Navicons */
/* These are prefixed with .sb-navbar to avoid styling other Slidebar toggles you may be using. */
.sb-navbar .sb-toggle-left { width: 52px; float: left; padding: 14px; }

.navicon-line { width: 24px; height: 4px; border-radius: 1px; margin-bottom: 3px; background-color: #fff; /* Colour of navicon lines. */ }

/* Hover states to match navbar menu item hover. */
.sb-navbar .sb-toggle-left:hover { background-color: rgba(0, 0, 0, 0.05); /* Will lighten any background colour you set. */ }

/* -------------------
 * 006 - Media Queries
 */
@media (max-width: 1124px)
{
	/* This is entirely optional, it hides the navbar menu items when device width is under 768px. */
	.sb-navbar { display: inherit; }
}