/* ---------------
* 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 {
        padding: 65px 15px 15px 15px;
        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: #a15883;
        text-decoration: none;
}
.sb-slidebar a:hover {
        color: #AEA8A8; /* 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. */
        color: #f2f2f2 !important;
        cursor:pointer;
}
.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.2); /* 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 {
        width: 100%;
        height: 50px;
        position: fixed;
        top: 0;
        left: auto;
        right: auto;
        z-index: 1000;
        background-color: #219AEB; /* 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-right{
        float: right;
}
.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: 15px;
        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-toggle-right, .sb-open-left, .sb-open-right, .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;
}
.sb-navbar .sb-toggle-right {
        width: 52px;
        float: right;
        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. */
}
.sb-navbar .sb-toggle-right:hover {
        background-color: rgba(0, 0, 0, 0.05); /* Will lighten any background colour you set. */
}
/* -------------------
* 006 - Media Queries
*/
@media (max-width: 767px) {
        /* This is entirely optional, it hides the navbar menu items when device width is under 768px. */
        .sb-navbar-menu {
                display: none;
        }
}