/* Higher than 1200 (desktop devices) ====================================================================== */ @media (min-width: 1200px) { #content { -webkit-box-shadow: -3px -1px 2px rgba(0,0,0,0.95); -moz-box-shadow: -3px -1px 2px rgba(0,0,0,0.95); box-shadow: -3px -1px 2px rgba(0,0,0,0.95); background: url(../img/bg.jpg) repeat; filter: none; padding: 25px 0px 25px 40px; margin: -25px -4px; position: relative; z-index: 1; min-height: 100%; } .sidebar-nav > ul{ margin: 20px 0px 0px -20px; border-top: 1px solid #0a0c0e !important; border-bottom: 1px solid #212121 !important; border-left: none; border-right: none; padding-bottom: 1px; } .sidebar-nav > ul > li > ul { margin: 0px; padding: 5px 0px 5px 25px; background: rgba(0,0,0,.45); list-style: none; display: none; } .sidebar-nav > ul > li > ul > li { padding: 5px 0px 5px 0px; } .sidebar-nav > ul > li > ul > li > a:hover { color: #fff; text-decoration: none; } .nav-tabs.nav-stacked > li > a { margin: 1px 0px 0px 0px; padding-left: 20px; color: #ddd; border-top: 1px solid #212121; border-bottom: 1px solid #0a0c0e; border-left: none; border-right: none; background: transparent; filter: none; text-shadow: 0px 1px 1px #000; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .nav-tabs.nav-stacked > li > a > i { opacity: .4; } .nav-tabs.nav-stacked > li > a:hover > i { opacity: .8; } .nav-tabs.nav-stacked > li > a:hover { margin: 1px 0px 0px 0px; color: #fff; border-top: 1px solid transparent; border-bottom: 1px solid #0a0c0e; border-left: none; border-right: none; background: rgba(0,0,0,.25); filter: none; text-shadow: 0px 1px 1px #000; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.45), inset 0 0px 1px rgba(0,0,0,0.25); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.45), inset 0 0px 1px rgba(0,0,0,0.25); box-shadow: inset 0 1px 1px rgba(0,0,0,0.45), inset 0 0px 1px rgba(0,0,0,0.25); -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .nav-tabs.nav-stacked > li.active > a { margin: 1px 0px 0px 0px; border-top: 1px solid transparent; border-bottom: 1px solid #0a0c0e; border-left: none; border-right: none; color: #fff; background: rgba(0,0,0,.45); text-shadow: 0px 1px 1px #000; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.45), inset 0 0px 1px rgba(0,0,0,0.25); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.45), inset 0 0px 1px rgba(0,0,0,0.25); box-shadow: inset 0 1px 1px rgba(0,0,0,0.45), inset 0 0px 1px rgba(0,0,0,0.25); -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .nav-tabs.nav-stacked > li:first-child > a { margin: 0px 0px 0px 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .nav-tabs.nav-stacked > li:last-child > a { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } footer { margin: -20px -20px 0px -20px; padding: 10px 20px; position: relative; z-index: 2; } } /* Higher than 960 (desktop devices) ====================================================================== */ @media only screen and (min-width: 980px) and (max-width: 1199px){ #content { -webkit-box-shadow: -3px -1px 2px rgba(0,0,0,0.95); -moz-box-shadow: -3px -1px 2px rgba(0,0,0,0.95); box-shadow: -3px -1px 2px rgba(0,0,0,0.95); background: url(../img/bg.jpg) repeat; filter: none; padding: 25px 0px 25px 40px; margin: -25px -4px; position: relative; z-index: 1px; } .sidebar-nav > ul { margin: 20px 0px 0px -20px; border-top: 1px solid #0a0c0e !important; border-bottom: 1px solid #212121 !important; border-left: none; border-right: none; padding-bottom: 1px; } .sidebar-nav > ul > li > ul { margin: 0px; padding: 5px 0px 5px 25px; background: rgba(0,0,0,.45); list-style: none; display: none; } .sidebar-nav > ul > li > ul > li { padding: 5px 0px 5px 0px; } .sidebar-nav > ul > li > ul > li > a:hover { color: #fff; text-decoration: none; } .nav-tabs.nav-stacked > li > a { margin: 1px 0px 0px 0px; padding-left: 20px; color: #ddd; border-top: 1px solid #212121; border-bottom: 1px solid #0a0c0e; border-left: none; border-right: none; background: transparent; text-shadow: 0px 1px 1px #000; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .nav-tabs.nav-stacked > li > a > i { opacity: .4; } .nav-tabs.nav-stacked > li > a:hover > i { opacity: .8; } .nav-tabs.nav-stacked > li > a:hover { margin: 1px 0px 0px 0px; color: #fff; border-top: 1px solid transparent; border-bottom: 1px solid #0a0c0e; border-left: none; border-right: none; background: rgba(0,0,0,.25); filter: none; text-shadow: 0px 1px 1px #000; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.45), inset 0 0px 1px rgba(0,0,0,0.25); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.45), inset 0 0px 1px rgba(0,0,0,0.25); box-shadow: inset 0 1px 1px rgba(0,0,0,0.45), inset 0 0px 1px rgba(0,0,0,0.25); -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .nav-tabs.nav-stacked > li.active > a { margin: 1px 0px 0px 0px; border-top: 1px solid transparent; border-bottom: 1px solid #0a0c0e; border-left: none; border-right: none; color: #fff; background: rgba(0,0,0,.45); text-shadow: 0px 1px 1px #000; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.45), inset 0 0px 1px rgba(0,0,0,0.25); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.45), inset 0 0px 1px rgba(0,0,0,0.25); box-shadow: inset 0 1px 1px rgba(0,0,0,0.45), inset 0 0px 1px rgba(0,0,0,0.25); -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .nav-tabs.nav-stacked > li:first-child > a { margin: 0px 0px 0px 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .nav-tabs.nav-stacked > li:last-child > a { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .sparkLineStats li .number { font-size: 16px; font-weight: 700; padding:0 5px; color: #FA5833; } footer { margin: -20px -20px 0px -20px; padding: 10px 20px; position: relative; z-index: 2; } } /* Tablet Portrait (devices and browsers) ====================================================================== */ @media only screen and (min-width: 768px) and (max-width: 979px) { #content { -webkit-box-shadow: -2px -1px 2px rgba(0,0,0,0.95); -moz-box-shadow: -2px -1px 2px rgba(0,0,0,0.95); box-shadow: -2px -1px 2px rgba(0,0,0,0.95); background: url(../img/bg.jpg) repeat; filter: none; padding: 25px 0px 25px 40px; margin: -25px -4px; position: relative; z-index: 1px; } .noMargin { margin-left: 0px !important; } .btn-navbar { display: none !important; } .nav-collapse, .nav-collapse.collapse { height: auto !important; overflow: visible !important; margin-left: -20px !important; } .sidebar-nav{ padding:0; margin-bottom:0; } .sidebar-nav > ul{ margin: 20px 0px 0px -20px; border-top: 1px solid #0a0c0e !important; border-bottom: 1px solid #212121 !important; border-left: none; border-right: none; padding-bottom: 1px; } .sidebar-nav > ul > li > ul { margin: 0px; padding: 0px 0px 0px 20px; background: rgba(0,0,0,.45); list-style: none; display: none; } .sidebar-nav > ul > li > ul > li { padding: 5px 0px 5px 0px; } .sidebar-nav > ul > li > ul > li > a:hover { color: #fff; text-decoration: none; } .nav-tabs.nav-stacked > li > a { margin: 1px 0px 0px 0px; padding-left: 20px; color: #ddd; border-top: 1px solid #212121; border-bottom: 1px solid #0a0c0e; border-left: none; border-right: none; background: transparent; text-shadow: 0px 1px 1px #000; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .nav-tabs.nav-stacked > li > a > i { opacity: .4; } .nav-tabs.nav-stacked > li > a:hover > i { opacity: .8; } .nav-tabs.nav-stacked > li > a:hover { margin: 1px 0px 0px 0px; color: #fff; border-top: 1px solid transparent; border-bottom: 1px solid #0a0c0e; border-left: none; border-right: none; background: rgba(0,0,0,.25); filter: none; text-shadow: 0px 1px 1px #000; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.45), inset 0 0px 1px rgba(0,0,0,0.25); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.45), inset 0 0px 1px rgba(0,0,0,0.25); box-shadow: inset 0 1px 1px rgba(0,0,0,0.45), inset 0 0px 1px rgba(0,0,0,0.25); -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .nav-tabs.nav-stacked > li.active > a { margin: 1px 0px 0px 0px; border-top: 1px solid transparent; border-bottom: 1px solid #0a0c0e; border-left: none; border-right: none; color: #fff; background: rgba(0,0,0,.45); text-shadow: 0px 1px 1px #000; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.45), inset 0 0px 1px rgba(0,0,0,0.25); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.45), inset 0 0px 1px rgba(0,0,0,0.25); box-shadow: inset 0 1px 1px rgba(0,0,0,0.45), inset 0 0px 1px rgba(0,0,0,0.25); -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .nav-tabs.nav-stacked > li:first-child > a { margin: 0px 0px 0px 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .nav-tabs.nav-stacked > li:last-child > a { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .box-small-link { font-size: 20px; } .sparkLineStats li .number { font-size: 14px; font-weight: 700; padding:0 5px; color: #FA5833; } footer { margin: -20px -20px 0px -20px; padding: 10px 20px; position: relative; z-index: 2; } } /* All Mobile Sizes (devices and browser) ====================================================================== */ @media only screen and (max-width: 767px) { } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) ====================================================================== */ @media only screen and (min-width: 480px) and (max-width: 767px) { body { background: url(../img/bg.jpg) repeat; } #overlay ul { margin: 150px auto 0; } #content { background: transparent; } .quick-button, .quick-button-small { margin-bottom: 20px; } .pull-right { width: 100%; margin: 10px auto; text-align: center; } .fc-button-today, .fc-button-month, .fc-button-agendaWeek, .fc-button-agendaDay { display: none; } footer { padding: 10px 20px; position: relative; z-index: 2; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) =================================================================== */ @media only screen and (max-width: 479px) { #overlay ul { margin: 150px auto 0; } body { background: url(../img/bg.jpg) repeat; } #content { background: transparent; } .quick-button, .quick-button-small { margin-bottom: 20px; } .pull-right { width: 100%; margin: 10px auto; text-align: center; } .fc-button-today, .fc-button-month, .fc-button-agendaWeek, .fc-button-agendaDay { display: none; } table, .pagination { font-size: 10px; } .pagination { padding: 5px; } footer { padding: 10px 20px; position: relative; z-index: 2; } }