/*I'm already giving you a free plugin, don't steal my stylesheets, design your own menu.*/
*
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*----------
* 002 - Site
*/
#sb-site
{
padding: 65px 15px 15px;
box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.3);
}
/*---------------
* 003 - Slidebars
*/
.sb-slidebar
{
background-color: #222222;
color: #E8E8E8;
}
.sb-slidebar A
{
color: #FDB21C;
text-decoration: none;
}
.sb-slidebar A:hover
{
color: #F4B636;
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);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.sb-menu > LI:first-child
{
border-top: none;
}
.sb-menu > LI:last-child
{
border-bottom: none;
}
.sb-menu LI A
{
width: 100%;
/*Makes links full width.*/
display: inline-block;
padding: 0.6em;
color: #F2F2F2;
}
.sb-menu LI A:hover
{
text-decoration: none;
background-color: rgba(255, 255, 255, 0.05);
}
/*Borders*/
.sb-left .sb-menu LI A
{
border-left: 3px solid transparent;
}
.sb-left .sb-menu LI A:hover
{
border-left: 3px solid;
}
.sb-right .sb-menu LI A
{
border-right: 3px solid transparent;
}
.sb-right .sb-menu LI A:hover
{
border-right: 3px solid;
}
/*Submenus*/
.sb-submenu
{
display: none;
padding: 0;
margin: 0;
list-style-type: none;
background-color: rgba(255, 255, 255, 0.05);
}
/*Caret*/
SPAN.sb-caret
{
width: 0;
height: 0;
display: inline-block;
margin: 0 5px;
border: 5px solid transparent;
}
SPAN.sb-caret
{
border-top: 5px solid;
border-bottom: 0px solid transparent;
}
.sb-submenu-active > SPAN.sb-caret
{
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);
margin: 14px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
}
.sb-widget-header
{
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 14px;
background-color: #292929;
}
.sb-widget-title
{
margin: 0;
}
.sb-widget-content
{
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 14px;
background-color: #262626;
}
/*------------------------
* 006 - Top Navigation Bar
*/
.sb-navbar
{
width: 100%;
height: 50px;
position: fixed;
top: 0;
left: auto;
right: auto;
z-index: 1000;
background-color: #219AEB;
box-shadow: 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), inset 0 1px 0 0 rgba(255, 255, 255, 0.1), inset 1px 0 0 0 rgba(255, 255, 255, 0.1), inset -1px 0 0 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
/*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;
}
/*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;
padding: 15px;
text-decoration: none;
}
.sb-navbar-menu LI A:hover
{
color: #F2F2F2;
background-color: rgba(0, 0, 0, 0.05);
}
/*-----------------------
* 007 - Slidebar Controls
*/
.sb-toggle-left, .sb-toggle-right, .sb-open-left, .sb-open-right, .sb-close
{
cursor: pointer;
}
/*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;
}
/*Hover states to match navbar menu item hover.*/
.sb-navbar .sb-toggle-left:hover
{
background-color: rgba(0, 0, 0, 0.05);
}
.sb-navbar .sb-toggle-right:hover
{
background-color: rgba(0, 0, 0, 0.05);
}
/*-------------------
* 006 - Media Queries
*/
@media (max-width: 767px)
{
.sb-navbar-menu
{
display: none;
}
}