/* Higher than 1200 (desktop devices) ====================================================================== */ @media (min-width: 1200px) { .container-fluid-full { overflow: hidden; position: relative; height: 100%; } #content { width: 86.578%; padding: 28px; margin: 0px 0px; margin-left: 14.422% !important; } #sidebar-left { background: #1C2B36; margin-left: 0px !important; position: absolute; height: 100%; } .sidebar-nav > ul{ margin: 0px; } footer { margin: 0px 0px 0px 0px; padding: 10px 20px; } } /* Higher than 960 (desktop devices) ====================================================================== */ @media only screen and (min-width: 980px) and (max-width: 1199px){ .container-fluid-full { overflow: hidden; position: relative; height: 100%; } #content { width: 80.578%; padding: 20px; margin: 0px; margin-left: 14.422% !important; } .dark { padding: 20px; top: -20px; right: -12px; margin-bottom: -56px; margin-right: -30px; } #sidebar-left { background: #1C2B36; margin-left: 0px !important; position: absolute; height: 100%; } .sidebar-nav > ul{ margin: 0px; } .sparkLineStats { position: relative; padding-bottom: 4px; } .sparkLineStats li { font-size: 10px; line-height: 42px; } .sparkLineStats li .number { font-size: 16px; font-weight: 700; padding:0 0px; } .breadcrumb { margin: -20px -20px 20px -20px; } .statbox, .widget, .box, .circleStatsItemBox { margin-bottom: 20px; } /* Page: Tasks =================================================================== */ .task .desc { display: inline-block; width: 70%; padding: 10px 10px; font-size: 12px; } .task .desc .title { font-size: 16px; margin-bottom: 5px; } .task .time { display: inline-block; float: right; width: 20%; padding: 10px 10px; font-size: 12px; text-align: right; } .task .time .date { font-size: 16px; margin-bottom: 5px; } footer { margin: 0px; padding: 10px 20px; } } /* Tablet Portrait (devices and browsers) ====================================================================== */ @media only screen and (min-width: 768px) and (max-width: 979px) { .container-fluid-full { overflow: hidden; position: relative; height: 100%; } #content { width: 91.666%; padding: 22px; margin: 0px 0px; margin-left: 8.334% !important; } .dark { padding: 20px; top: -22px; right: -15px; margin-bottom: -56px; margin-right: -30px; } .breadcrumb { margin: -22px -22px 22px -22px; } .statbox, .widget, .box, .circleStatsItemBox { margin-bottom: 22px; } #sidebar-left { background: #1C2B36; margin-left: 0px !important; position: absolute; height: 100%; width: 8.334% !important; } .sidebar-nav > ul{ margin: 0px; } .nav-tabs.nav-stacked > li > a, .nav-tabs.nav-stacked > li > ul > li > a { text-align: center; margin-top: -2px; } .noMargin { margin-left: 0px !important; } .btn-navbar { display: none !important; } .nav-collapse, .nav-collapse.collapse { height: auto !important; overflow: visible !important; margin-left: 0px !important; } .stats-date .range { font-size: 16px; font-weight: 300; } .stat .left .number { font-size: 16px; font-weight: 300; } .stat .left .title { font-size: 9px; } .stat .right .percent { text-align: center; font-size: 12px; line-height: 16px; } .box-small-link { font-size: 20px; } .sparkLineStats { padding-bottom: 10px; } .sparkLineStats li { font-size: 10px; line-height: 43px; } .sparkLineStats li .number { font-size: 12px; font-weight: 700; padding:0 0px; } /* Page: Tasks =================================================================== */ .task { border-bottom: 1px solid #f9f9f9; margin-bottom: 1px; } .task.high { border-left: 2px solid rgba(250,96,61,1); } .task.medium { border-left: 2px solid rgba(250,187,61,1); } .task.low { border-left: 2px solid rgba(120,205,81,1); } .task .desc { display: inline-block; width: 65%; padding: 10px 10px; font-size: 10px; margin-right: -20px; } .task .desc .title{ font-size: 14px; margin-bottom: 5px; } .task .time { display: inline-block; float: right; width: 25%; padding: 10px 10px; font-size: 10px; text-align: right; } .task .time .date { font-size: 14px; margin-bottom: 5px; } .timeslot .task span { border: 2px solid rgba(103, 194, 239, 1); background: rgba(103, 194, 239, .1); padding: 5px; display: block; font-size: 10px; } .timeslot .task span span{ border: 0px; background: transparent; padding: 0px; } .timeslot .task span span.details{ font-size: 14px; margin-bottom: 0px; } .timeslot .task span span.remaining{ font-size: 12px; } footer { margin: 0px; padding: 10px 20px; } } /* All Mobile Sizes (devices and browser) ====================================================================== */ @media only screen and (max-width: 767px) { #content { overflow: hidden; margin: -10px 0px 0px 0px; } .breadcrumb { margin: -5px -5px 5px -5px; } .nav-tabs.nav-stacked > li > a, .nav-tabs.nav-stacked > li > ul > li > a { margin-top: -2px; } .dark { padding: 5px; top: 5px; right: 0px; margin-bottom: 0px; margin-right: 0px; position: relative; border: 0px; } .statbox, .widget, .box, .circleStatsItemBox { margin-bottom: 20px !important; } /* Page: Tasks =================================================================== */ .task { border-bottom: 1px solid #f9f9f9; margin-bottom: 1px; } .task.high { border-left: 2px solid rgba(250,96,61,1); } .task.medium { border-left: 2px solid rgba(250,187,61,1); } .task.low { border-left: 2px solid rgba(120,205,81,1); } .task .desc { display: inline-block; width: 65%; padding: 10px 10px; font-size: 10px; margin-right: -20px; } .task .desc .title{ font-size: 14px; margin-bottom: 5px; } .task .time { display: inline-block; float: right; width: 25%; padding: 10px 10px; font-size: 10px; text-align: right; } .task .time .date { font-size: 14px; margin-bottom: 5px; } .timeslot .task span { border: 2px solid rgba(103, 194, 239, 1); background: rgba(103, 194, 239, .1); padding: 5px; display: block; font-size: 10px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .timeslot .task span span{ border: 0px; background: transparent; padding: 0px; } .timeslot .task span span.details{ font-size: 14px; margin-bottom: 0px; } .timeslot .task span span.remaining{ font-size: 12px; } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) ====================================================================== */ @media only screen and (min-width: 480px) and (max-width: 767px) { body { padding: 0px; } #content { padding: 5px; } .stat { width: 50%; margin: 10px 0% 0% 0%; float: left; } .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; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) =================================================================== */ @media only screen and (max-width: 479px) { body { padding: 0px; } #content { padding: 5px; } .stat { width: 100%; margin: 1% 0% 0% 0%; float: left; } .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; } .ui-slider-handle { margin-top: 1px !important; } .sliderVertical .ui-slider-handle { margin: 0px 0px -10px 1px !important; } footer { padding: 10px 20px; } }