#content-wrapper { padding-left: 0; margin-left: 0; width: 100%; height: auto; } @media only screen and (min-width: 561px) { #page-wrapper.open { padding-left: 250px; } } @media only screen and (max-width: 560px) { #page-wrapper.open { padding-left: 70px; } } #page-wrapper.open #sidebar-wrapper { left: 150px; } /** * Hamburg Menu * When the class of 'hamburg' is applied to the body tag of the document, * the sidebar changes it's style to attempt to mimic a menu on a phone app, * where the content is overlaying the content, rather than push it. */ @media only screen and (max-width: 560px) { body.hamburg #page-wrapper { padding-left: 0; } body.hamburg #page-wrapper:not(.open) #sidebar-wrapper { position: absolute; left: -100px; } body.hamburg #page-wrapper:not(.open) ul.sidebar .sidebar-title.separator { display: none; } body.hamburg #page-wrapper.open #sidebar-wrapper { position: fixed; } body.hamburg #page-wrapper.open #sidebar-wrapper ul.sidebar li.sidebar-main { margin-left: 0px; } body.hamburg #sidebar-wrapper ul.sidebar li.sidebar-main, body.hamburg .row.header .meta { margin-left: 70px; } body.hamburg #sidebar-wrapper ul.sidebar li.sidebar-main, body.hamburg #page-wrapper.open #sidebar-wrapper ul.sidebar li.sidebar-main { transition: margin-left 0.4s ease 0s; } } /** * Header */ .row.header { height: 60px; background: #fff; margin-bottom: 15px; } .row.header > div:last-child { padding-right: 0; } .row.header .meta .page { font-size: 17px; padding-top: 11px; } .row.header .meta .breadcrumb-links { font-size: 10px; } .row.header .meta div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row.header .login a { padding: 18px; display: block; } .row.header .user { min-width: 130px; } .row.header .user > .item { width: 65px; height: 60px; float: right; display: inline-block; text-align: center; vertical-align: middle; } .row.header .user > .item a { color: #919191; display: block; } .row.header .user > .item i { font-size: 20px; line-height: 55px; } .row.header .user > .item img { width: 40px; height: 40px; margin-top: 10px; border-radius: 2px; } .row.header .user > .item ul.dropdown-menu { border-radius: 2px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05); } .row.header .user > .item ul.dropdown-menu .dropdown-header { text-align: center; } .row.header .user > .item ul.dropdown-menu li.link { text-align: left; } .row.header .user > .item ul.dropdown-menu li.link a { padding-left: 7px; padding-right: 7px; } .row.header .user > .item ul.dropdown-menu:before { position: absolute; top: -7px; right: 23px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid rgba(0, 0, 0, 0.2); border-left: 7px solid transparent; content: ''; } .row.header .user > .item ul.dropdown-menu:after { position: absolute; top: -6px; right: 24px; display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid #ffffff; border-left: 6px solid transparent; content: ''; } .loading { width: 40px; height: 40px; position: relative; margin: 100px auto; } .double-bounce1, .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #333; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: bounce 2s infinite ease-in-out; animation: bounce 2s infinite ease-in-out; } .double-bounce2 { -webkit-animation-delay: -1s; animation-delay: -1s; } @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: scale(0); } 50% { -webkit-transform: scale(1); } } @keyframes bounce { 0%, 100% { transform: scale(0); -webkit-transform: scale(0); } 50% { transform: scale(1); -webkit-transform: scale(1); } } /* Fonts */ @font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-regular-webfont.eot'); src: url('../fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/montserrat-regular-webfont.woff') format('woff'), url('../fonts/montserrat-regular-webfont.ttf') format('truetype'), url('../fonts/montserrat-regular-webfont.svg#montserratregular') format('svg'); font-weight: normal; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio: 0) { @font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-regular-webfont.svg') format('svg'); } select { font-family: Arial, Helvetica, sans-serif; } } /* Base */ html { overflow-y: scroll; } body { background: #f3f3f3; font-family: 'Montserrat'; color: #333333 !important; } .row { margin-left: 0 !important; margin-right: 0 !important; } .row > div { margin-bottom: 15px; } .alerts-container .alert:last-child { margin-bottom: 0; } #page-wrapper { padding-left: 70px; height: 100%; } #sidebar-wrapper { margin-left: -150px; left: -30px; width: 250px; position: fixed; height: 100%; z-index: 999; } #page-wrapper, #sidebar-wrapper { transition: all 0.4s ease 0s; } .green { background: #23ae89 !important; } .blue { background: #2361ae !important; } .orange { background: #d3a938 !important; } .red { background: #ae2323 !important; } .form-group .help-block.form-group-inline-message { padding-top: 5px; } div.input-mask { padding-top: 7px; } /* #592727 RED */ /* #2f5927 GREEN */ /* #30426a BLUE (default)*/ /* Sidebar background color */ /* Sidebar header and footer color */ /* Sidebar title text colour */ /* Sidebar menu item hover color */ /** * Sidebar */ #sidebar-wrapper { background: #30426a; } ul.sidebar .sidebar-main a, .sidebar-footer, ul.sidebar .sidebar-list a:hover, #page-wrapper:not(.open) ul.sidebar .sidebar-title.separator { /* Sidebar header and footer color */ background: #2d3e63; } ul.sidebar { position: absolute; top: 0; bottom: 0; padding: 0; margin: 0; list-style: none; text-indent: 20px; overflow-x: hidden; overflow-y: auto; } ul.sidebar li a { color: #fff; display: block; float: left; text-decoration: none; width: 250px; } ul.sidebar .sidebar-main { height: 65px; } ul.sidebar .sidebar-main a { font-size: 18px; line-height: 60px; } ul.sidebar .sidebar-main a:hover { cursor: pointer; } ul.sidebar .sidebar-main .menu-icon { float: right; font-size: 18px; padding-right: 28px; line-height: 60px; } ul.sidebar .sidebar-title { color: #738bc0; font-size: 12px; height: 35px; line-height: 40px; text-transform: uppercase; transition: all 0.6s ease 0s; } ul.sidebar .sidebar-list { height: 40px; } ul.sidebar .sidebar-list a { text-indent: 25px; font-size: 15px; color: #b2bfdc; line-height: 40px; } ul.sidebar .sidebar-list a:hover { color: #fff; border-left: 3px solid #e99d1a; text-indent: 22px; } ul.sidebar .sidebar-list a:hover .menu-icon { text-indent: 25px; } ul.sidebar .sidebar-list .menu-icon { float: right; padding-right: 29px; line-height: 40px; width: 70px; } #page-wrapper:not(.open) ul.sidebar { bottom: 0; } #page-wrapper:not(.open) ul.sidebar .sidebar-title { display: none; height: 0px; text-indent: -100px; } #page-wrapper:not(.open) ul.sidebar .sidebar-title.separator { display: block; height: 2px; margin: 13px 0; } #page-wrapper:not(.open) ul.sidebar .sidebar-list a:hover span { border-left: 3px solid #e99d1a; text-indent: 22px; } #page-wrapper:not(.open) .sidebar-footer { display: none; } .sidebar-footer { position: absolute; height: 40px; bottom: 0; width: 100%; padding: 0; margin: 0; transition: all 0.6s ease 0s; text-align: center; } .sidebar-footer div a { color: #b2bfdc; font-size: 12px; line-height: 43px; } .sidebar-footer div a:hover { color: #ffffff; text-decoration: none; } /* #592727 RED */ /* #2f5927 GREEN */ /* #30426a BLUE (default)*/ /* Sidebar background color */ /* Sidebar header and footer color */ /* Sidebar title text colour */ /* Sidebar menu item hover color */ /** * Widgets */ .widget { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); background: #ffffff; border: 1px solid transparent; border-radius: 2px; border-color: #e9e9e9; } .widget .widget-header .pagination, .widget .widget-footer .pagination { margin: 0; } .widget .widget-header { color: #767676; background-color: #f6f6f6; padding: 10px 15px; border-bottom: 1px solid #e9e9e9; line-height: 30px; } .widget .widget-header i { margin-right: 5px; } .widget .widget-body { padding: 20px; } .widget .widget-body table thead { background: #fafafa; } .widget .widget-body table thead * { font-size: 14px !important; } .widget .widget-body table tbody * { font-size: 13px !important; } .widget .widget-body .error { color: #ff0000; } .widget .widget-body button { margin-left: 5px; } .widget .widget-body div.alert { margin-bottom: 10px; } .widget .widget-body.large { height: 350px; overflow-y: auto; } .widget .widget-body.medium { height: 250px; overflow-y: auto; } .widget .widget-body.small { height: 150px; overflow-y: auto; } .widget .widget-body.no-padding { padding: 0; } .widget .widget-body.no-padding .error, .widget .widget-body.no-padding .message { padding: 20px; } .widget .widget-footer { border-top: 1px solid #e9e9e9; padding: 10px; } .widget .widget-icon { background: #30426a; width: 65px; height: 65px; border-radius: 50%; text-align: center; vertical-align: middle; margin-right: 15px; } .widget .widget-icon i { line-height: 66px; color: #ffffff; font-size: 30px; } .widget .widget-footer { border-top: 1px solid #e9e9e9; padding: 10px; } .widget .widget-title .pagination, .widget .widget-footer .pagination { margin: 0; } .widget .widget-content .title { font-size: 28px; display: block; }