/* Width < 1024 */

@media only screen and (max-width : 1024px) {

    /* Min application width */
    
    html,
    body,
    header {
        min-width: 320px;
        margin: 0;
        padding: 0;
    }
    
    /* Enlarge header */

    header {
        top: 0;
        left: 0;
    } 
    header .logo {
        height: 58px;
        width: 58px;
        background: url("/content/themes/base/images/logoheader-metro.png") no-repeat 0 0 #303030;
        background-size: 100% auto;
        margin: 0;
        padding: 0;
    }
    nav li a, 
    #menucontainer li a,
    #user,
    .instance {
        line-height: 58px;
    }
    .mainouter {
        padding: 58px 0 0;
    }

    /* Dropdown Menu */
    nav ul {
        display: none;
        background: #fff;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
    }
    nav ul.expanded {
        display: block;
        position: fixed;
        top: 58px;
        left: 0;
        width: 100%;
        padding: 12px 0;
    }
    nav ul.expanded li {
        float: none;
    }
    nav ul.expanded li a {
        float: none;
        line-height: 32px;
        color: #4b87c6;
        margin: 0;
        padding: 0 20px;
    }

    /* Tighten margins */

    #wrap,
    #mainwrap,
    header div.inner,
    #header div.inner {
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }
    #mainwrap .inner {
        padding: 13px 14px 14px;
    }
    #mainwrap .module .v2 .inner {
        padding: 0;
    }

    div.module .v2 div.snapshotpanel,
    div.module .v2 div.toolform {
        width: 50%;
    }

    /* Hide edit/delete buttons */

    #main table td.r a.delete,
    #main table td.r a.edit {
        display: none;
    }

    /* Allocate */

    #main .allocateinfo {
        margin: 0 0 0 41px;
    }
    #main .allocateinfo .l,
    #main .allocateinfo .r {
        float: none;
        text-align: left;
    }  
        
    /* UI ovverides */

    div.ui-datepicker {
        width: 35%;
    }
    div.ui-datepicker .ui-datepicker-title select {
        font-size: 17px;
    }
    div.ui-datepicker th {
        font-size: 17px;
    }
    div.ui-datepicker td span, 
    div.ui-datepicker td a {
        font-size: 19px;
        line-height: 38px;
    }

    #map img {
        max-width: 50%;
    }

    #sidebar .module.buttons li a {
        font-size: 17px;
    }

    div.module .twocol,
    #assetmain .twocol {
        margin: 24px 0 0;
        width: 100%;
    }

    div.module .twocol.first,
    #assetmain .twocol.first,
    div.toolform .twocol,
    div.module form .twocol {
        margin: 0;
    }

    /* Data grids */

    #main div.datagrid div.datacell .inner {
        padding: 0;
        font-size: 17px;
        height: 34px;
        line-height: 34px;
    }
    div.datagrid.halves div.datacell {
        width: 100%;
    }
    div.datagrid.thirds div.datacell {
        width: 50%;
    }
    div.datagrid.quarters div.datacell {
        width: 33.3333%;
    }
    div.datagrid.fifths div.datacell {
        width: 25%;
    }

    /* Padding */

    #assetmain div.inner,
    #activity .inner,
    div.module div.inner,
    #assetinfo .barcode,
    #assetinfo .contract,
    .mainsearch #searchbuttons,
    #openprocesses .inner,
    #search .inner {
        padding: 12px;
    }
    #assetinfo .inner  {
        padding: 0;
    }

    /* jQuery Ui 

    body .ui-menu .ui-menu-item a {
        padding: 2px 4px;
        line-height: 32px;
        font-size: 19px;
    }
    */
    
    /* Login */

    #login {
        background-position: center 40px;
        padding: 168px 0 0;
        width: 70%;
        margin: 0 15%;
    }

    /* Home */

    div.chart {
        margin: 12px 0 0;
    }
    #main h3.message.home,
    #main h3.warning.home,
    #main h3.error.home,
    #main h3.success.home {
        margin-bottom: 12px;
    }

    /* Asset */

    #sidebar {
        float: none;
        width: 100%;
        position: relative;
    }
    assetinfo:after,
    #assetinfo .inner:after {
        content: ".";
        display: block;
        height: 0;
        overflow: hidden;
        clear: both;
    }
    #asset {
        float: none;
        padding-left: 0;
        width: 100%;
    }
    #sidebar .block-image {
        float: right;
        width: 35%;
        text-align: center;
        padding: 10px 10px 0 0;
    }
    #assetinfo .image {
        max-height: 260px;
        overflow: hidden;
    }
    #sidebar .barcode,
    #sidebar .block-details {
        float: left;
        width: 65%;
    }

    #assetinfo .contractexpired, #assetinfo .islost, #assetinfo .oncontractholiday {
        border-bottom: 0 none;
        padding: 0 0 0 10px;
    }
    #assetinfo .contractexpired:after, #assetinfo .oncontractholiday:after, #assetinfo .islost:after {
        float: left;
        margin: 6px 7px 0 0;
    }

    /*
    .block-image {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 35%;
        text-align: center;
    }
    */
    
}

/* Width < 768 */

@media only screen and (max-width : 768px) {
   
    /* Padding */

    #assetmain div.inner,
    #activity .inner,
    div.module div.inner,
    #assetinfo .barcode,
    #assetinfo .contract,
    #main #searchbuttons,
    #openprocesses .inner,
    #search .inner {
        padding: 12px;
    }

    /* Data grids */

    #main div.datagrid div.datacell .inner {
        font-size: 15px;
    }
    div.datagrid.halves div.datacell,
    div.datagrid.thirds div.datacell {
        width: 100%;
    }
    div.datagrid.quarters div.datacell {
        width: 50%;
    }
    div.datagrid.fifths div.datacell  {
        width: 33.3333%;
    }

    /* Allocate */

    #main .allocateinfo .l,
    #main .allocateinfo .r {
        float: none;
        text-align: left;
    }
    #main .allocateinfo .r {
        padding: 0 0 0 53px;
        text-align: left;
    }

    /* Search */

    .mainsearch .editor-autocomplete, 
    .mainsearch .editor-search {
        float: none;
    }
    .mainsearch .buttonrow {
        float: none;
    }
    #search p.buttonrow a:first-child {
        margin-left: 0;
    }
    p.buttonrow a,
    p.buttonrow #searchbuttons a.first,
    .mainsearch #searchbuttons a:last-child {
        margin: 0 10px 0 0;
    }

    /* Search buttons */

    .mainsearch #searchbuttons a,
    .mainsearch #searchbuttons span {
        display: block;
        text-align: right;
    }
    .mainsearch #searchbuttons a span {
        display: inline-block;
    }

    /* Messages */

    #main h3.error:before, 
    #main h3.warning:before, 
    #main h3.message:before, 
    #main h3.success:before, 
    #main h3.fyi:before {
        display: block;
        float: none;
        margin: 0 auto 4px auto;
    }
    #main h3.error, 
    #main h3.warning, 
    #main h3.message, 
    #main h3.success, 
    #main h3.fyi {
        line-height: 18px;
        padding: 0;
        text-align: center;
    }

    a.fauxbutton, 
    #main a.fauxbutton, 
    #main p.buttonrow a.fauxbutton {
        display: inline-block;
        float: none;
    }
    #main p.buttonrow {
        text-align: center;
    }

}

/* Width < 700 */

@media only screen and (max-width : 700px) {

}

/* Width < 640 */

@media only screen and (max-width : 640px) {
    
    #sidebar .block-image {
        width: 50%;
    }
    #sidebar .barcode,
    #sidebar .block-details {
        width: 50%;
    }    

    #assetnav ul li {
        width: auto;
        box-sizing: border-box;
    }
    #assetnav ul li a {
        padding: 0 14px;
        box-sizing: border-box;
    }

    /* Tool form */

    div.module .v2 div.snapshotpanel,
    div.module .v2 div.toolform {
        width: auto;
        float: none;
    }
    div.module .v2 div.snapshotpanel {
        border-bottom: 1px solid #e0e0e0;
    }

    /* Date picker */

    div.ui-datepicker {
        width: 100%;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        top: initial !important;
        right: initial !important;
        box-sizing: border-box;
        padding: 20px;
    }
    div.ui-datepicker .ui-datepicker-title select {
        font-size: 15px;
    }
    div.ui-datepicker th {
        font-size: 15px;
    }
    div.ui-datepicker td span, 
    div.ui-datepicker td a {
        font-size: 17px;
        line-height: 32px;
    }

}

/* Width < 520 */

@media only screen and (max-width : 520px) {

    /* Search */
    
    .mainsearch #search {
        float: none;
        width: 100%;
    }
    .mainsearch .editor-autocomplete, 
    .mainsearch .editor-search,
    .mainsearch #search {
        width: 100%;
    }

    .mainsearch #searchbuttons {
        float: none;
        padding-bottom: 0;
    }
    .mainsearch .buttonrow,
    .mainsearch #searchbuttons {
        text-align: center;    
    }
    p.buttonrow a,
    p.buttonrow #searchbuttons a.first,
    .mainsearch #searchbuttons a:last-child,
    #search p.buttonrow a:first-child {
        margin: 0 10px;
    }
    .mainsearch #searchbuttons a, 
    .mainsearch #searchbuttons span {
        display: inline-block;
    }

    #mainsearchoverlay .block {
        display: block;
        margin-right: 36px;
        vertical-align: top;
        width: 100%;
    }

    /* Temp - This might end up being added by javascript if the table is wider than the screen? */

    table.collapse,
    table.collapse tbody,
    table.collapse tr,
    table.collapse td {
        display: block;
    }
    table.collapse tr.headerrow,
    table.collapse tr.filtered {
        display: none;
    }
    table.collapse tr {
        padding: 8px 0;
    }
    table.master.collapse {
        border-top: 1px dotted #bbbbbb;
    }
    table.collapse tr:nth-child(2) {
        border-top: 0 none;
    }
    table.collapse td {
        padding: 0 10px;
    }

    #main ul.textlist li a, 
    #main table a.action {
        display: inline-block;
        float: none;
        margin: 4px 8px 4px 0;
    }

    div.module h2 .tablefilter,
    div.module h2 .responsive-datalist-filter {
        display: block;
        border-top: 1px dotted #c9c9bf;
        border-left: 0 none;
        float: none;
        width: auto;
    }
    div.module h2 .tablefilter .phrasewrap,
    div.module h2 .tablefilter .responsive-datalist-filter {
        margin-left: 6px;
    }

    /* Footer */

    footer, #footer {
        text-align: center;
    }

}

/* Width < 420 */

@media only screen and (max-width : 420px) {

    #sidebar .block-image {
        float: none;
        width: 100%;
        padding: 10px;
    }
    #sidebar .barcode,
    #sidebar .block-details {
        float: none;
        width: 100%;
        padding: 20px 0 5px;
    }
    #assetinfo {
        text-align: center;
    }
    #assetinfo .processinfo {
        margin: 0;
        padding: 6px 12px 12px 12px;
    }

    #map img {
        max-width: 100%;
    }
    #map img, #images .imageview {
        float: none;
    }

}