/*
 Note that each section should contain mostly the same items.
 The exception here is when the layout switches to portrait at smaller resolutions,
 so obviously the switch is needed.

 The first media section is annotated, the others aren't but as pointed out above
 should be the same in most cases.

 For reference the boundaries are at:
   - 1728px
   - 1552px
   - 1376px
   - 1200px
   - 1024px
   - 848px
   - 672px
   - 496px
   - 320px

*/

@media(1728px <= width) {

    /* Manage the horizontally padding for the main panel section */
    .container-fluid { padding: 0 40px; }

    /* Manage the vertical padding for the header section  */
    header{padding: 10px 0 0 0;}

    /* Sizes for the log-in/out section */
    .nav-logo img{height: 40px;}
    .navbar-right h1{font-size: 24px;line-height: 26px;}

    /* Select row spaces */
    .select-row ul li { margin: 0 12px 0 0; }
    .select-row-small ul li, .nav-row .btn-group > * { margin-right: 7px; }

    /* Small row (markets list) sizes */
    .select-row-small ul li, .nav-row .link-style-button {font-size: 18px; line-height: 20px; padding: 6px 10px; border-radius: 8px;}
    /* Specifically override padding to take into account larger border */
    .select-row-small ul li.link-style-button, .nav-row .link-style-button { padding: 5px 9px; }
    button.btn-select-filter img { height: 20px; }

    /* Type-ahead: main menu padding and suggestion text size */
    .tt-menu, div.list-header:hover ul { padding: 10px 20px; }
    .tt-suggestion, div.list-header:hover ul li {font-size: 18px; line-height: 20px;padding: 10px 6px;}

    /* Date picker */
    div.ui-datepicker { max-width: 350px; }
    .ui-datepicker-month option, .ui-datepicker-year option, select.ui-datepicker-month, select.ui-datepicker-year { font-size: 18px; }
    .ui-datepicker-calendar thead th, .ui-datepicker-calendar tbody td, .ui-datepicker-calendar tbody td a, .ui-datepicker-calendar tbody td span { font-size: 16px; line-height: 38px; }

    /* Specific input box widths */
    .user-size-input { width: 84px; }
    .search-box input {width: 88px;}
    .search-box .tt-menu {width: 800px;}
    .instru-box button { width: 320px; }
    .currency-box button { width: 64px; }

    /* Labels accompanying input boxes, and copyright */
    .form-group label, .copyright-panel p { font-size: 16px; line-height: 18px; }

    /* Input box (include more specific selectors for font) */
    .input-box-style { font-size: 18px; line-height: 20px; padding: 8px 12px; border-radius: 8px; }
    .input-box-style h4, .input-box-style input, .input-box-style label { font-size: 18px; line-height: 20px; }

    /* Links displayed as buttons */
    /* Any associated text - pad bottom to be as as button pad + button border */
    .nav-row .btn-group span, .nav-row .btn-group img { font-size: 18px; line-height: 20px; padding: 7px 0px; }
    /* And image */
    .nav-row .btn-group img { height: 34px; }

    /* Links displayed as links */
    .link-style-link a { font-size: 18px; line-height: 20px; padding: 0; }

    /* Label/input style entry with divider */
    .form-entry .form-label { padding: 0 10px 0 0; }
    .form-entry .input-box { padding: 0 0 0 10px; }

    .ad-block{max-height: 100%;height: 100%;}

    /* Box padding and title */
    .common-box { padding: 16px; }
    .common-box h2{font-size: 22px;}

    /* Table settings (could this be reduced?) */
    .common-box table tbody tr td, div.i-s-table div.i-s-data-row { padding: 4px 0; }
    .common-box table tbody tr td .tbl-box, .common-box table thead tr th .tbl-box, div.i-s-table div.i-s-header-cell .tbl-box { padding: 4px 8px; }
    /* One pixel less for the border when selected */
    div.i-s-table div.i-s-data-cell { padding: 3px 8px; }
    /* Cheat alert! Because we size the cells using em, we set the td and th the same font size (so that they are the same width), but set the inner th .tbl-box to be a larger font */
    .common-box table thead tr, .common-box table thead tr th, .common-box table tbody tr td, .common-box table tbody tr td .tbl-box > *, div.i-s-table div.i-s-data-cell { font-size: 16px; line-height: 18px; }
    .common-box table thead tr th .tbl-box, div.i-s-table div.i-s-header-cell { font-size: 18px;  line-height: 20px; }

    /* Reduce sizes when extra columns visible */
    .common-box table.table-expanded tbody tr td .tbl-box, .common-box table.table-expanded thead tr th .tbl-box, .table-expanded div.i-s-table div.i-s-header-cell .tbl-box  { padding: 4px 5px; }
    .table-expanded div.i-s-table div.i-s-data-cell { padding: 3px 5px; }
    .common-box table.table-expanded thead tr, .common-box table.table-expanded thead tr th, .common-box table.table-expanded tbody tr td, .common-box table.table-expanded tbody tr td .tbl-box > *, .table-expanded div.i-s-table div.i-s-data-cell { font-size: 14px; line-height: 16px; }
    .common-box table.table-expanded thead tr th .tbl-box, .table-expanded div.i-s-table div.i-s-header-cell { font-size: 16px; line-height: 18px; }

    div.button-header div.text img, div.list-header div.text img { height: 16px; }

    /* Date/time sizes */
    .form-control.datepicker { width: 98px; }
    .form-control.time-input-micro { width: 148px; }
    .form-control.time-input-milli { width: 122px; }
    .form-control.clock-display { width: 76px; }
}

@media(1552px <= width <= 1728px) {

    .container-fluid { padding: 0 36px; }

    header{padding: 9px 0 0 0;}

    .nav-logo img{height: 36px;}
    .navbar-right h1{font-size: 22px;line-height: 24px;}

    .select-row ul li { margin: 0 11px 0 0; }
    .select-row-small ul li, .nav-row .btn-group > * { margin-right: 7px; }

    .select-row-small ul li, .nav-row .link-style-button {font-size: 16px; line-height: 18px; padding: 4px 10px; border-radius: 7px;}
    .select-row-small ul li.link-style-button, .nav-row .link-style-button { padding: 3px 9px; }
    button.btn-select-filter img { height: 18px; }

    .tt-menu, div.list-header:hover ul { padding: 9px 18px; }
    .tt-suggestion, div.list-header:hover ul li {font-size: 16px; line-height: 18px; padding: 8px 6px; }

    div.ui-datepicker { max-width: 315px; }
    .ui-datepicker-month option, .ui-datepicker-year option, select.ui-datepicker-month, select.ui-datepicker-year { font-size: 16px; }
    .ui-datepicker-calendar thead th, .ui-datepicker-calendar tbody td, .ui-datepicker-calendar tbody td a, .ui-datepicker-calendar tbody td span { font-size: 15px; line-height: 34px; }

    .user-size-input { width: 76px; }
    .search-box .tt-menu {width: 700px;}
    .search-box input { width: 80px; }
    .instru-box button { width: 300px; }
    .filter-inner-list .form-group.currency-box button { width: 72px; }

    .form-group label, .copyright-panel p { font-size: 15px; line-height: 17px; }

    .input-box-style { font-size: 16px; line-height: 18px; padding: 8px 12px; border-radius: 7px; }
    .input-box-style h4, .input-box-style input, .input-box-style label { font-size: 16px; line-height: 18px; }

    .nav-row .btn-group span, .nav-row .btn-group img { font-size: 16px; line-height: 18px; padding: 5px 0px; }
    .nav-row .btn-group img { height: 28px; }

    .link-style-link a { font-size: 16px; line-height: 18px; padding: 0; }

    .form-entry .form-label { padding: 0 9px 0 0; }
    .form-entry .input-box { padding: 0 0 0 9px; }

    .ad-block{max-height: calc(26vh - 95px);}

    .common-box { padding: 14px; }
    .common-box h2{font-size: 20px;}

    .common-box table tbody tr td, div.i-s-table div.i-s-data-row { padding: 4px 0; }
    .common-box table tbody tr td .tbl-box, .common-box table thead tr th .tbl-box, div.i-s-table div.i-s-header-cell .tbl-box  { padding: 4px 7px; }
    div.i-s-table div.i-s-data-cell { padding: 3px 7px; }
    .common-box table thead tr, .common-box table thead tr th, .common-box table tbody tr td, .common-box table tbody tr td .tbl-box > *, div.i-s-table div.i-s-data-cell { font-size: 15px; line-height: 17px; }
    .common-box table thead tr th .tbl-box, div.i-s-table div.i-s-header-cell { font-size: 16px; line-height: 18px; }

    .common-box table.table-expanded tbody tr td .tbl-box, .common-box table.table-expanded thead tr th .tbl-box, .table-expanded div.i-s-table div.i-s-header-cell .tbl-box  { padding: 4px 4px; }
    .table-expanded div.i-s-table div.i-s-data-cell { padding: 3px 4px; }
    .common-box table.table-expanded thead tr, .common-box table.table-expanded thead tr th, .common-box table.table-expanded tbody tr td, .common-box table.table-expanded tbody tr td .tbl-box > *, .table-expanded div.i-s-table div.i-s-data-cell { font-size: 13px; line-height: 17px; }
    .common-box table.table-expanded thead tr th .tbl-box, .table-expanded div.i-s-table div.i-s-header-cell { font-size: 14px; line-height: 16px; }

    div.button-header div.text img, div.list-header div.text img { height: 14px; }

    .form-control.datepicker { width: 86px; }
    .form-control.time-input-micro { width: 128px; }
    .form-control.time-input-milli { width: 108px; }
    .form-control.clock-display { width: 68px; }
}

@media(1376px <= width <= 1552px) {

    .container-fluid { padding: 0 32px; }

    header{padding: 8px 0 0 0;}

    .nav-logo img{height: 32px;}
    .navbar-right h1{font-size: 22px;line-height: 24px;}

    .select-row ul li { margin: 0 10px 0 0; }
    .select-row-small ul li, .nav-row .btn-group > * { margin-right: 7px; }

    .select-row-small ul li, .nav-row .link-style-button {font-size: 15px; line-height: 18px; padding: 4px 10px; border-radius: 7px;}
    .select-row-small ul li.link-style-button, .nav-row .link-style-button { padding: 3px 9px; }
    button.btn-select-filter img { height: 18px; }

    .tt-menu, div.list-header:hover ul { padding: 8px 16px; }
    .tt-suggestion, div.list-header:hover ul li {font-size: 15px; line-height: 18px; padding: 7px 6px; }

    div.ui-datepicker { max-width: 280px; }
    .ui-datepicker-month option, .ui-datepicker-year option, select.ui-datepicker-month, select.ui-datepicker-year { font-size: 15px; }
    .ui-datepicker-calendar thead th, .ui-datepicker-calendar tbody td, .ui-datepicker-calendar tbody td a, .ui-datepicker-calendar tbody td span { font-size: 14px; line-height: 30px; }

    .user-size-input { width: 72px; }
    .search-box .tt-menu {width: 600px;}
    .search-box input { width: 72px; }
    .instru-box button { width: 280px; }

    .form-group label, .copyright-panel p { font-size: 14px; line-height: 16px; }

    .input-box-style { font-size: 15px; line-height: 17px; padding: 8px 12px; border-radius: 7px; }
    .input-box-style h4, .input-box-style input, .input-box-style label { font-size: 15px; line-height: 17px; }

    .nav-row .btn-group span, .nav-row .btn-group img { font-size: 15px; line-height: 17px; padding: 5px 0px; }
    .nav-row .btn-group img { height: 27px; }

    .link-style-link a { font-size: 15px; line-height: 17px; padding: 0; }

    .form-entry .form-label { padding: 0 8px 0 0; }
    .form-entry .input-box { padding: 0 0 0 8px; }

    .ad-block{max-height: calc(26vh - 95px);}

    .common-box { padding: 12px; }
    .common-box h2{font-size: 18px;}

    .common-box table tbody tr td, div.i-s-table div.i-s-data-row { padding: 3px 0; }
    .common-box table tbody tr td .tbl-box, .common-box table thead tr th .tbl-box, div.i-s-table div.i-s-header-cell .tbl-box  { padding: 4px 6px; }
    div.i-s-table div.i-s-data-cell { padding: 3px 6px; }
    .common-box table thead tr, .common-box table thead tr th, .common-box table tbody tr td, .common-box table tbody tr td .tbl-box > *, div.i-s-table div.i-s-data-cell { font-size: 14px; line-height: 16px; }
    .common-box table thead tr th .tbl-box, div.i-s-table div.i-s-header-cell { font-size: 15px; line-height: 17px; }

    .common-box table.table-expanded tbody tr td .tbl-box, .common-box table.table-expanded thead tr th .tbl-box, .table-expanded div.i-s-table div.i-s-header-cell .tbl-box  { padding: 4px 3px; }
    .table-expanded div.i-s-table div.i-s-data-cell { padding: 3px 3px; }
    .common-box table.table-expanded thead tr, .common-box table.table-expanded thead tr th, .common-box table.table-expanded tbody tr td, .common-box table.table-expanded tbody tr td .tbl-box > *, .table-expanded div.i-s-table div.i-s-data-cell { font-size: 13px; line-height: 17px; }
    .common-box table.table-expanded thead tr th .tbl-box, .table-expanded div.i-s-table div.i-s-header-cell { font-size: 14px; line-height: 16px; }

    div.button-header div.text img, div.list-header div.text img { height: 13px; }

    .form-control.datepicker { width: 80px; }
    .form-control.time-input-micro { width: 118px; }
    .form-control.time-input-milli { width: 102px; }
    .form-control.clock-display { width: 64px; }
}

@media(1200px <= width <= 1376px) {

    .container-fluid { padding: 0 28px; }

    header{padding: 7px 0 0 0;}

    .nav-logo img{height: 28px;}
    .navbar-right h1{font-size: 18px;line-height: 20px;}

    .select-row ul li {  margin: 0 9px 0 0;}
    .select-row-small ul li, .nav-row .btn-group > * { margin-right: 7px; }

    .select-row-small ul li, .nav-row .link-style-button {font-size: 14px; line-height: 16px; padding: 4px 10px; border-radius: 6px;}
    .select-row-small ul li.link-style-button, .nav-row .link-style-button { padding: 3px 9px; }
    button.btn-select-filter img { height: 16px; }

    .tt-menu, div.list-header:hover ul { padding: 7px 14px; }
    .tt-suggestion, div.list-header:hover ul li {font-size: 14px; line-height: 16px; padding: 6px 6px;}

    div.ui-datepicker { max-width: 245px; }
    .ui-datepicker-month option, .ui-datepicker-year option, select.ui-datepicker-month, select.ui-datepicker-year { font-size: 14px; }
    .ui-datepicker-calendar thead th, .ui-datepicker-calendar tbody td, .ui-datepicker-calendar tbody td a, .ui-datepicker-calendar tbody td span { font-size: 13px; line-height: 26px; }

    .user-size-input { width: 68px; }
    .search-box .tt-menu {width: 500px;}
    .search-box input { width: 68px; }
    .instru-box button { width: 260px; }

    .form-group label, .copyright-panel p { font-size: 13px; line-height: 15px; }

    .input-box-style { font-size: 14px; line-height: 16px; padding: 6px 10px; border-radius: 6px; }
    .input-box-style h4, .input-box-style input, .input-box-style label { font-size: 14px; line-height: 16px; }

    .nav-row .btn-group span, .nav-row .btn-group img { font-size: 14px; line-height: 16px; padding: 5px 0px; }
    .nav-row .btn-group img { height: 26px; }

    .link-style-link a { font-size: 14px; line-height: 16px; padding: 0; }

    .form-entry .form-label { padding: 0 7px 0 0; }
    .form-entry .input-box { padding: 0 0 0 7px; }

    .ad-block{max-height: calc(26vh - 95px);}

    .common-box { padding: 10px; }
    .common-box h2{font-size: 16px;}

    .common-box table tbody tr td, div.i-s-table div.i-s-data-row { padding: 2px 0; }
    .common-box table tbody tr td .tbl-box, .common-box table thead tr th .tbl-box, div.i-s-table div.i-s-header-cell .tbl-box  { padding: 4px 5px; }
    div.i-s-table div.i-s-data-cell { padding: 3px 5px; }
    .common-box table thead tr, .common-box table thead tr th, .common-box table tbody tr td, .common-box table tbody tr td .tbl-box > *, div.i-s-table div.i-s-data-cell { font-size: 13px; line-height: 15px; }
    .common-box table thead tr th .tbl-box, div.i-s-table div.i-s-header-cell { font-size: 14px; line-height: 16px; }

    .common-box table.table-expanded tbody tr td .tbl-box, .common-box table.table-expanded thead tr th .tbl-box, .table-expanded div.i-s-table div.i-s-header-cell .tbl-box  { padding: 4px 2px; }
    .table-expanded div.i-s-table div.i-s-data-cell { padding: 3px 2px; }
    .common-box table.table-expanded thead tr, .common-box table.table-expanded thead tr th, .common-box table.table-expanded tbody tr td, .common-box table.table-expanded tbody tr td .tbl-box > *, .table-expanded div.i-s-table div.i-s-data-cell { font-size: 11px; line-height: 13px; }
    .common-box table.table-expanded thead tr th .tbl-box, .table-expanded div.i-s-table div.i-s-header-cell { font-size: 12px; line-height: 14px; }

    div.button-header div.text img, div.list-header div.text img { height: 12px; }

    .form-control.datepicker { width: 76px; }
    .form-control.time-input-micro { width: 112px; }
    .form-control.time-input-milli { width: 96px; }
    .form-control.clock-display { width: 60px; }
}

/* Change to portrait */
@media(width <= 1200px) {
    /* Change main page from landscape to portrait - shouldn't boostrap do this for us? */
    .replay .main-page-flex {
        display: flex;
        flex-direction: column-reverse;
    }
    /* We want the last child to have no bottom padding, and because we have reversed the flex this is the first child */
    .replay .main-page-flex-child:first-child {
        padding-bottom: 0px;
    }
    .live .main-page-flex {
        display: flex;
        flex-direction: column;
    }
    /* In 'live' the flex is in normal direction so set last child */
    .live .main-page-flex-child:last-child {
        padding-bottom: 0px;
    }

    .main-page-flex-child {
        width: 100%;
        height: 50%;
        overflow: hidden;
        padding-bottom: 12px;
    }
}

@media(1024px <= width <= 1200px) {

    /* Hack...space between units isn't correct in portrait so add margin */
    #book-time-entry-border {
        padding-top: 8px; padding-bottom:8px;
    }

    .container-fluid { padding: 0 24px; }

    header{padding: 6px 0 0 0;}

    .nav-logo img{height: 24px;}
    .navbar-right h1{font-size: 16px;line-height: 18px;}

    .select-row ul li { margin: 0 8px 0 0; }
    .select-row-small ul li, .nav-row .btn-group > * { margin-right: 6px; }

    .select-row-small ul li, .nav-row .link-style-button {font-size: 14px; line-height: 16px; padding: 4px 10px; border-radius: 6px;}
    .select-row-small ul li.link-style-button, .nav-row .link-style-button { padding: 3px 9px; }
    button.btn-select-filter img { height: 16px; }

    .tt-menu, div.list-header:hover ul { padding: 6px 12px; }
    .tt-suggestion, div.list-header:hover ul li {font-size: 14px; line-height: 16px; padding: 6px 6px;}

    div.ui-datepicker { max-width: 245px; }
    .ui-datepicker-month option, .ui-datepicker-year option, select.ui-datepicker-month, select.ui-datepicker-year { font-size: 14px; }
    .ui-datepicker-calendar thead th, .ui-datepicker-calendar tbody td, .ui-datepicker-calendar tbody td a, .ui-datepicker-calendar tbody td span { font-size: 13px; line-height: 26px; }

    .user-size-input { width: 66px; }
    .search-box .tt-menu {width: 450px;}
    .search-box input {width: 68px; }
    .instru-box button { width: 246px; }

    .form-group label, .copyright-panel p { font-size: 12px; line-height: 14px; }

    .input-box-style { font-size: 14px; line-height: 16px; padding: 6px 7px; border-radius: 6px; }
    .input-box-style h4, .input-box-style input, .input-box-style label { font-size: 14px; line-height: 16px; }

    .nav-row .btn-group span, .nav-row .btn-group img { font-size: 14px; line-height: 16px; padding: 5px 0px; }
    .nav-row .btn-group img { height: 26px; }

    .link-style-link a { font-size: 14px; line-height: 16px; padding: 0; }

    .form-entry .form-label { padding: 0 6px 0 0; }
    .form-entry .input-box { padding: 0 0 0 6px; }

    .ad-block{max-height: calc(26vh - 95px);}

    .common-box { padding: 10px; }
    .common-box h2{font-size: 16px;}

    .common-box table tbody tr td, div.i-s-table div.i-s-data-row { padding: 4px 0; }
    .common-box table tbody tr td .tbl-box, .common-box table thead tr th .tbl-box, div.i-s-table div.i-s-header-cell .tbl-box  { padding: 4px 7px; }
    div.i-s-table div.i-s-data-cell { padding: 3px 7px; }
    .common-box table thead tr, .common-box table thead tr th, .common-box table tbody tr td, .common-box table tbody tr td .tbl-box > *, div.i-s-table div.i-s-data-cell { font-size: 15px; line-height: 17px; }
    .common-box table thead tr th .tbl-box, div.i-s-table div.i-s-header-cell { font-size: 16px; line-height: 18px; }

    .common-box table.table-expanded tbody tr td .tbl-box, .common-box table.table-expanded thead tr th .tbl-box, .table-expanded div.i-s-table div.i-s-header-cell .tbl-box  { padding: 4px 4px; }
    .table-expanded div.i-s-table div.i-s-data-cell { padding: 3px 4px; }
    .common-box table.table-expanded thead tr, .common-box table.table-expanded thead tr th, .common-box table.table-expanded tbody tr td, .common-box table.table-expanded tbody tr td .tbl-box > *, .table-expanded div.i-s-table div.i-s-data-cell { font-size: 13px; line-height: 17px; }
    .common-box table.table-expanded thead tr th .tbl-box, .table-expanded div.i-s-table div.i-s-header-cell { font-size: 14px; line-height: 16px; }

    div.button-header div.text img, div.list-header div.text img { height: 12px; }

    .form-control.datepicker { width: 76px; }
    .form-control.time-input-micro { width: 112px; }
    .form-control.time-input-milli { width: 96px; }
    .form-control.clock-display { width: 60px; }
}

@media(848px <= width <= 1024px) {

    /* Hack...space between units isn't correct in portrait so add margin */
    #book-time-entry-border {
        padding-top: 6px; padding-bottom:6px;
    }

    .container-fluid { padding: 0 20px; }

    header{padding: 5px 0 0 0;}

    .nav-logo img{height: 22px;}
    .navbar-right h1{font-size: 14px;line-height: 16px;}

    .select-row ul li { margin: 0 7px 0 0; }
    .select-row-small ul li, .nav-row .btn-group > * { margin-right: 5px; }

    .select-row-small ul li, .nav-row .link-style-button {font-size: 14px; line-height: 16px; padding: 3px 8px; border-radius: 6px;}
    .select-row-small ul li.link-style-button, .nav-row .link-style-button { padding: 2px 7px; }
    button.btn-select-filter img { height: 16px; }

    .tt-menu, div.list-header:hover ul { padding: 5px 10px; }
    .tt-suggestion, div.list-header:hover ul li {font-size: 14px; line-height: 16px; padding: 6px 6px;}

    div.ui-datepicker { max-width: 245px; }
    .ui-datepicker-month option, .ui-datepicker-year option, select.ui-datepicker-month, select.ui-datepicker-year { font-size: 14px; }
    .ui-datepicker-calendar thead th, .ui-datepicker-calendar tbody td, .ui-datepicker-calendar tbody td a, .ui-datepicker-calendar tbody td span { font-size: 13px; line-height: 26px; }

    .user-size-input { width: 64px; }
    .search-box .tt-menu {width: 400px;}
    .search-box input { width: 64px; }
    .instru-box button { width: 248px; }

    .form-group label, .copyright-panel p {font-size: 11px; line-height: 13px; }

    .input-box-style { font-size: 14px; line-height: 16px; padding: 5px 8px; border-radius: 6px; }
    .input-box-style h4, .input-box-style input, .input-box-style label { font-size: 14px; line-height: 16px; }

    .nav-row .btn-group span, .nav-row .btn-group img { font-size: 14px; line-height: 16px; padding: 4px 0px; }
    .nav-row .btn-group img { height: 24px; }

    .link-style-link a { font-size: 14px; line-height: 16px; padding: 0; }

    .form-entry .form-label { padding: 0 5px 0 0; }
    .form-entry .input-box { padding: 0 0 0 5px; }

    .ad-block{max-height: calc(26vh - 95px);}

    .common-box { padding: 10px; }
    .common-box h2{font-size: 16px;}

    .common-box table tbody tr td, div.i-s-table div.i-s-data-row { padding: 3px 0; }
    .common-box table tbody tr td .tbl-box, .common-box table thead tr th .tbl-box, div.i-s-table div.i-s-header-cell .tbl-box  { padding: 4px 6px; }
    div.i-s-table div.i-s-data-cell { padding: 3px 6px; }
    .common-box table thead tr, .common-box table thead tr th, .common-box table tbody tr td, .common-box table tbody tr td .tbl-box > *, div.i-s-table div.i-s-data-cell { font-size: 14px; line-height: 16px; }
    .common-box table thead tr th .tbl-box, div.i-s-table div.i-s-header-cell { font-size: 15px; line-height: 17px; }

    .common-box table.table-expanded tbody tr td .tbl-box, .common-box table.table-expanded thead tr th .tbl-box, .table-expanded div.i-s-table div.i-s-header-cell .tbl-box  { padding: 4px 3px; }
    .table-expanded div.i-s-table div.i-s-data-cell { padding: 3px 3px; }
    .common-box table.table-expanded thead tr, .common-box table.table-expanded thead tr th, .common-box table.table-expanded tbody tr td, .common-box table.table-expanded tbody tr td .tbl-box > *, .table-expanded div.i-s-table div.i-s-data-cell { font-size: 13px; line-height: 17px; }
    .common-box table.table-expanded thead tr th .tbl-box, .table-expanded div.i-s-table div.i-s-header-cell { font-size: 14px; line-height: 16px; }

    div.button-header div.text img, div.list-header div.text img { height: 12px; }

    .form-control.datepicker { width: 76px; }
    .form-control.time-input-micro { width: 112px; }
    .form-control.time-input-milli { width: 96px; }
    .form-control.clock-display { width: 58px; }
}

@media(672px <= width <= 848px) {

    /* Hack...space between units isn't correct in portrait so add margin */
    #book-time-entry-border {
        padding-top: 6px; padding-bottom:6px;
    }

    .container-fluid { padding: 0 20px; }

    header{padding: 4px 0 0 0;}

    .nav-logo img{height: 20px;}
    .navbar-right h1{font-size: 14px;line-height: 16px;}

    .select-row ul li { margin: 0 6px 0 0; }
    .select-row-small ul li, .nav-row .btn-group > * { margin-right: 4px; }

    .select-row-small ul li, .nav-row .link-style-button {font-size: 12px; line-height: 14px; padding: 3px 7px; border-radius: 6px;}
    .select-row-small ul li.link-style-button, .nav-row .link-style-button { padding: 2px 6px; }
    button.btn-select-filter img { height: 14px; }

    .tt-menu, div.list-header:hover ul { padding: 4px 8px; }
    .tt-suggestion, div.list-header:hover ul li {font-size: 14px; line-height: 16px; padding: 6px 6px;}

    div.ui-datepicker { max-width: 245px; }
    .ui-datepicker-month option, .ui-datepicker-year option, select.ui-datepicker-month, select.ui-datepicker-year { font-size: 14px; }
    .ui-datepicker-calendar thead th, .ui-datepicker-calendar tbody td, .ui-datepicker-calendar tbody td a, .ui-datepicker-calendar tbody td span { font-size: 13px; line-height: 26px; }

    .user-size-input { width: 60px; }
    .search-box .tt-menu {width: 350px;}
    .search-box input { width: 64px; }
    .instru-box button { width: 216px; }

    .form-group label, .copyright-panel p { font-size: 10px; line-height: 12px; }

    .input-box-style { font-size: 12px; line-height: 14px; padding: 4px 8px; border-radius: 6px; }
    .input-box-style h4, .input-box-style input, .input-box-style label { font-size: 12px; line-height: 14px; }

    .nav-row .btn-group span, .nav-row .btn-group img { font-size: 12px; line-height: 14px; padding: 4px 0px; }
    .nav-row .btn-group img { height: 22px; }

    .link-style-link a { font-size: 12px; line-height: 14px; padding: 0; }

    .form-entry .form-label { padding: 0 4px 0 0; }
    .form-entry .input-box { padding: 0 0 0 4px; }

    .ad-block{max-height: calc(26vh - 95px);}

    .common-box { padding: 10px; }
    .common-box h2{font-size: 16px;}

    .common-box table tbody tr td, div.i-s-table div.i-s-data-row { padding: 2px 0; }
    .common-box table tbody tr td .tbl-box, .common-box table thead tr th .tbl-box, div.i-s-table div.i-s-header-cell .tbl-box  { padding: 4px 4px; }
    div.i-s-table div.i-s-data-cell { padding: 3px 4px; }
    .common-box table thead tr, .common-box table thead tr th, .common-box table tbody tr td, .common-box table tbody tr td .tbl-box > *, div.i-s-table div.i-s-data-cell { font-size: 13px; line-height: 15px; }
    .common-box table thead tr th .tbl-box, div.i-s-table div.i-s-header-cell { font-size: 14px; line-height: 16px; }

    .common-box table.table-expanded tbody tr td .tbl-box, .common-box table.table-expanded thead tr th .tbl-box, .table-expanded div.i-s-table div.i-s-header-cell .tbl-box  { padding: 4px 1px; }
    .table-expanded div.i-s-table div.i-s-data-cell { padding: 3px 1px; }
    .common-box table.table-expanded thead tr, .common-box table.table-expanded thead tr th, .common-box table.table-expanded tbody tr td, .common-box table.table-expanded tbody tr td .tbl-box > *, .table-expanded div.i-s-table div.i-s-data-cell { font-size: 11px; line-height: 13px; }
    .common-box table.table-expanded thead tr th .tbl-box, .table-expanded div.i-s-table div.i-s-header-cell { font-size: 12px; line-height: 14px; }

    div.button-header div.text img, div.list-header div.text img { height: 12px; }

    .form-control.datepicker { width: 66px; }
    .form-control.time-input-micro { width: 98px; }
    .form-control.time-input-milli { width: 84px; }
    .form-control.clock-display { width: 52px; }
}

@media(496px <= width <= 672px) {

    /* Hack...space between units isn't correct in portrait so add margin */
    #book-time-entry-border {
        padding-top: 4px; padding-bottom: 4px;
    }

    .container-fluid { padding: 0 16px; }

    header{padding: 3px 0 0 0;}

    .nav-logo img{height: 18px;}
    .navbar-right h1{font-size: 13px;line-height: 15px;}

    .select-row ul li { margin: 0 5px 0 0; }
    .select-row-small ul li, .nav-row .btn-group > * { margin-right: 3px; }

    .select-row-small ul li, .nav-row .link-style-button  {font-size: 10px; line-height: 12px; padding: 3px 6px; border-radius: 6px;}
    .select-row-small ul li.link-style-button, .nav-row .link-style-button { padding: 2px 5px; }
    button.btn-select-filter img { height: 12px; }

    .tt-menu, div.list-header:hover ul { padding: 3px 6px; }
    .tt-suggestion, div.list-header:hover ul li {font-size: 13px; line-height: 15px; padding: 5px 6px; }

    div.ui-datepicker { max-width: 210px; }
    .ui-datepicker-month option, .ui-datepicker-year option, select.ui-datepicker-month, select.ui-datepicker-year { font-size: 13px; }
    .ui-datepicker-calendar thead th, .ui-datepicker-calendar tbody td, .ui-datepicker-calendar tbody td a, .ui-datepicker-calendar tbody td span { font-size: 12px; line-height: 22px; }

    .user-size-input { width: 48px; }
    .search-box .tt-menu {width: 300px;}
    .search-box input { width: 60px; }
    .instru-box button { width: 180px; }

    .form-group label, .copyright-panel p { font-size: 9px; line-height: 11px; }

    .input-box-style { font-size: 10px; line-height: 12px; padding: 4px 8px; border-radius: 6px; }
    .input-box-style h4, .input-box-style input, .input-box-style label { font-size: 10px; line-height: 12px; }

    .nav-row .btn-group span, .nav-row .btn-group img { font-size: 10px; line-height: 12px; padding: 4px 0px; }
    .nav-row .btn-group img { height: 20px; }

    .link-style-link a { font-size: 10px; line-height: 12px; padding: 0; }

    .form-entry .form-label { padding: 0 3px 0 0; }
    .form-entry .input-box { padding: 0 0 0 3px; }

    .ad-block{max-height: calc(26vh - 95px);}

    .common-box { padding: 8px; }
    .common-box h2{font-size: 15px;}

    .common-box table tbody tr td, div.i-s-table div.i-s-data-row { padding: 2px 0; }
    .common-box table tbody tr td .tbl-box, .common-box table thead tr th .tbl-box, div.i-s-table div.i-s-header-cell .tbl-box  { padding: 3px 3px; }
    div.i-s-table div.i-s-data-cell { padding: 2px 3px; }
    .common-box table thead tr, .common-box table thead tr th, .common-box table tbody tr td, .common-box table tbody tr td .tbl-box > *, div.i-s-table div.i-s-data-cell { font-size: 12px; line-height: 14px; }
    .common-box table thead tr th .tbl-box, div.i-s-table div.i-s-header-cell {font-size: 13px; line-height: 15px; }

    .common-box table.table-expanded tbody tr td .tbl-box, .common-box table.table-expanded thead tr th .tbl-box, .table-expanded div.i-s-table div.i-s-header-cell .tbl-box  { padding: 4px 0px; }
    .table-expanded div.i-s-table div.i-s-data-cell { padding: 3px 0px; }
    .common-box table.table-expanded thead tr, .common-box table.table-expanded thead tr th, .common-box table.table-expanded tbody tr td, .common-box table.table-expanded tbody tr td .tbl-box > *, .table-expanded div.i-s-table div.i-s-data-cell { font-size: 10px; line-height: 12px; }
    .common-box table.table-expanded thead tr th .tbl-box, .table-expanded div.i-s-table div.i-s-header-cell { font-size: 11px; line-height: 13px; }

    div.button-header div.text img, div.list-header div.text img { height: 11px; }

    .form-control.datepicker { width: 54px; }
    .form-control.time-input-micro { width: 78px; }
    .form-control.time-input-milli { width: 72px; }
    .form-control.clock-display { width: 44px; }
}

@media(width <= 496px) {

    /* Hack...space between units isn't correct in portrait so add margin */
    #book-time-entry-border {
        padding-top: 4px; padding-bottom: 4px;
    }

    .container-fluid { padding: 0 12px; }

    header{padding: 2px 0 0 0;}

    .nav-logo img{height: 16px;}
    .navbar-right h1{font-size: 12px;line-height: 14px;}

    .select-row ul li { margin: 0 4px 0 0; }
    .select-row-small ul li, .nav-row .btn-group > * { margin-right: 2px; }

    .select-row-small ul li, .nav-row .link-style-button {font-size: 10px; line-height: 12px; padding: 1px 5px; border-radius: 3px;}
    .select-row-small ul li.link-style-button, .nav-row .link-style-button { padding: 0px 4px; }
    button.btn-select-filter img { height: 12px; }

    .tt-menu, div.list-header:hover ul { padding: 2px 4px; }
    .tt-suggestion, div.list-header:hover ul li {font-size: 10px; line-height: 12px; padding: 4px 6px;}

    div.ui-datepicker { max-width: 175px; }
    .ui-datepicker-month option, .ui-datepicker-year option, select.ui-datepicker-month, select.ui-datepicker-year { font-size: 10px; }
    .ui-datepicker-calendar thead th, .ui-datepicker-calendar tbody td, .ui-datepicker-calendar tbody td a, .ui-datepicker-calendar tbody td span { font-size: 10px; line-height: 38px; }

    .user-size-input { width: 60px; }
    .search-box .tt-menu {width: 200px;}
    .search-box input { width: 60px; }
    .instru-box button { width: 180px; }

    .form-group label, .copyright-panel p { font-size: 8px; line-height: 10px; }

    .input-box-style { font-size: 10px; line-height: 12px; padding: 6px 12px; border-radius: 3px; }
    .input-box-style h4, .input-box-style input, .input-box-style label { font-size: 10px; line-height: 12px; }

    .nav-row .btn-group span, .nav-row .btn-group img { font-size: 10px; line-height: 12px; padding: 3px 0px; }
    .nav-row .btn-group img { height: 18px; }

    .link-style-link a { font-size: 10px; line-height: 12px; padding: 0; }

    .form-entry .form-label { padding: 0 2px 0 0; }
    .form-entry .input-box { padding: 0 0 0 2px; }

    .ad-block{max-height: 100%;height: 100%;}

    .common-box { padding: 6px; }
    .common-box h2{font-size: 11px;}

    .common-box table tbody tr td, div.i-s-table div.i-s-data-row { padding: 1px 0; }
    .common-box table tbody tr td .tbl-box, .common-box table thead tr th .tbl-box, div.i-s-table div.i-s-header-cell .tbl-box  { padding: 2px 2px; }
    div.i-s-table div.i-s-data-cell { padding: 1px 2px; }
    .common-box table thead tr, .common-box table thead tr th, .common-box table tbody tr td, .common-box table tbody tr td .tbl-box > *, div.i-s-table div.i-s-data-cell { font-size: 10px; line-height: 12px; }
    .common-box table thead tr th .tbl-box, div.i-s-table div.i-s-header-cell { font-size: 11px; line-height: 13px; }

    .common-box table.table-expanded tbody tr td .tbl-box, .common-box table.table-expanded thead tr th .tbl-box, .table-expanded div.i-s-table div.i-s-header-cell .tbl-box  { padding: 4px 0px; }
    .table-expanded div.i-s-table div.i-s-data-cell { padding: 3px 0px; }
    .common-box table.table-expanded thead tr, .common-box table.table-expanded thead tr th, .common-box table.table-expanded tbody tr td, .common-box table.table-expanded tbody tr td .tbl-box > *, .table-expanded div.i-s-table div.i-s-data-cell { font-size: 8px; line-height: 10px; }
    .common-box table.table-expanded thead tr th .tbl-box, .table-expanded div.i-s-table div.i-s-header-cell { font-size: 9px; line-height: 11px; }

    div.button-header div.text img, div.list-header div.text img { height: 10px; }

    .form-control.datepicker { width: 54px; }
    .form-control.time-input-micro { width: 78px; }
    .form-control.time-input-milli { width: 72px; }
    .form-control.clock-display { width: 44px; }
}