/* ---------------
* 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-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/* ---------------
* 003 - Slidebars
*/
.sb-slidebar {
background-color: #0ea8e4; /* Background colour. */
color: #e8e8e8; /* Text colour. */
}
.sb-slidebar a {
color: #f2f2f2; /* Link colour. */
text-decoration: none;
}
.sb-slidebar a:hover {
color: #077ba8; /* Link hover colour. */
text-decoration: underline;
}
/* --------------------
* 004 - Slidebar Menus
*/
/* Main Menu */
.sb-menu { /* Apply to <ul> or <ol>. */
font-size:12pt;
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;
font-style: italic;
}
.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 {
font-size:10pt;
display: none;
padding: 0;
margin: 0;
list-style-type: none;
background-color: rgba(255, 255, 255, 0.2); /* Submenu background colour. */
font-style: italic;
}
/* 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: 0px 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: 0px 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: 120px;
position: fixed;
top: 0;
left: auto;
right: auto;
z-index: 1000;
background-color: rgba(14,168,228, 1); /* Bar colour. */
}
html.sb-android .sb-navbar {
position: absolute; /* Fix navbar to top for old versions of Android Browser. */
}
/* Navbar Menu Items */
.sb-navbar-menu {
font-family: "Microsoft JhengHei", sans-serif;
font-weight:500;
font-size:13pt;
list-style-type: none;
padding: 0;
margin: 0;
margin-top:25px;
margin-right:120px;
float:right;
}
.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: #003D79;
text-decoration: none;
padding-top: 24px;
padding-right: 0px;
padding-bottom: 2px;
padding-left: 0px;
margin-left:12px;
}
.sb-navbar-menu li a:hover {
color: #0054aa; /* Navbar link hover colour */
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: #0054aa;
}
/* -----------------------
* 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 {
margin-top:140px;
color:#0066FF;
font-size:1em;
width: 75px;
height:290px;
float: left;
padding: 14px;
background-image:url();
}
.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.00); /* 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. */
}
.mt18_1920 {
display:none;
}
.mt18_480 {
display:block;
}
/* -------------------
* 006 - Media Queries
*/
@media (min-width: 1200px) {
/* This is entirely optional, it hides the navbar menu items when device width is under 768px. */
.logo {
margin-left: 180px
}
.mt18_1920 {
display:block;
}
.mt18_480 {
display:none;
}
}
s
@media (min-width: 1100px) {
/* This is entirely optional, it hides the navbar menu items when device width is under 768px. */
.logo {
margin-left: 80px
}
}
@media (max-width: 980px) {
/* This is entirely optional, it hides the navbar menu items when device width is under 768px. */
.logo {
margin-left: 00px
}
}
@media (min-width: 990px) {
/* This is entirely optional, it hides the navbar menu items when device width is under 768px. */
.sb-toggle-right {
display: none;
}
}
@media (max-width: 989px) {
/* This is entirely optional, it hides the navbar menu items when device width is under 768px. */
.sb-navbar-menu {
display: none;
}
.sb-navbar .sb-toggle-left {
margin-top:140px;
color:#0066FF;
font-size:1em;
width: 40px;
float: left;
background-image:url();
padding-top: 14px;
padding-right: 00px;
padding-left: 0x;
}
}
}