@font-face
{
    font-family: 'spotFont';
    src: url('SourceSansPro-Regular.otf');
    font-weight: normal;
}
@font-face
{
    font-family: 'spotFonts';
    src: url('SourceSansPro-Bold.otf');
    font-weight: bold;
}
@font-face
{
    font-family: 'spotFont';
    src: url('SourceSansPro-ExtraLightIt.otf');
    font-style: italic;
}


@media (max-width: 2600px){
    .ui-icon{margin-top: 4px;}
    .ui-menu{width: 286px; font-size: 16px;font-family: 'spotFont'; line-hight: 16px; margin-right: 20px;z-index: 2;}
    a.ui-corner-all {font-size: 18px}
    a.ui-tabs-anchor {font-size: 14px}
    
   
    #toggle-menu
    {
        display: none;
    }

    #menu > ul > li > ul
    {
        width: 150px;

    }
    #menu > ul > li > ul > li > a
    {
        font-size: 14px;
    }
    
    body
    {
        font-family: 'spotFont';
        font-size: 14px;
    }
    h1
    {
        font-size: 24px;
    }
    #top
    {
        margin-bottom: 20px;
        padding: 10px;
        background: #5c9ccc url("/tools/jquery-ui-1.10.4.custom/css/redmond/images/ui-bg_gloss-wave_55_5c9ccc_500x100.png") 50% 50% repeat-x;
        height: 75px;
        z-index: 1;
        width: 100%;
        position: fixed;
    }
    #top div.logo
    {
        display: none;
        height: 73px;
        width: 300px;
        float: right;
    }
    #top div.logo > img
    {
        clip: rect(4px,206px,68px,0px);
        position: absolute;

    }
    #top > div.header
    {
        position: absolute;
        top: 35px;
        font-size: 30px;

    }
    #menu
    {
        width: 300px;
        float: left; 
        position: fixed;
        z-index: 2;
        margin-top: 144px;
        

    }
    #menuSlide
    {
        position: relative;
        top: 85px;
    }
    #menuSlide .inner {
        position: absolute;
        left: 0;
        bottom: 0;
    }
    #toggle-menu {
        width: 58px;
        float: left;
        padding: 24px 0px 0px 0px;
    }
    .navicon-line {
        width: 24px;
        height: 4px;
        border-radius: 1px;
        margin-bottom: 3px;
        background-color: #fff;
    }
    #main
    {
    
        padding: 99px 20px 0px 300px;
        border-image-slice: 33% 33% 33% 33%; 
        border-image-width: 0em 0em 0em 6px; 
        border-image-source: url("jquery-ui-1.10.4.custom/css/redmond/images/ui-bg_gloss-wave_55_5c9ccc_500x100.png");
    }
    .table
        {
            display: table;
            width: 100%;
        }
        .title
        {
            display: table-caption;
            text-align: center;
            font-weight: bold;
            font-size: larger;
        }
        .heading
        {
            display: table-row;
            font-weight: bold;
            text-align: center;
        }
        .row
        {
            display: table-row;
        }
         .rowMouseOver
        {
            background-color: #efefef;
            cursor: hand;
        }
        .cell
        {
            display: table-cell;
            border: solid 1px black;
            border-width: 1px;
            padding: 5px;
            font-size: 14px;
            cursor: pointer;
        }
    
    .sortArrow
    {
        float: left;
        position: absolute;
    }
    .header
    {
        cursor: url(../gfx/cursorSort.png), auto;
    }
    .closeModal{
        position: relative;
        top: -10;
        float: right;
    }
    #editMarker
    {
        border: 0;
         background-color: white;
    }
    #editMarker > div
    {
        width: 10px;
        height: 10px;
        background-color: white;
    }
    .editRow
    {
        background-color: red;
    }
    .focusRow
    {
        background-color: green;
    }
    .iconEdit
    {
        background-image: url('../jquery-ui-1.10.4.custom/css/redmond/images/ui-icons_217bc0_256x240.png');
        background-position: -67px -116px;
        width: 17px;
        height: 16px;
    }
    #overlay
    {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background-color:rgba(0, 0, 0, 0.70);
        background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent\9; /* ie fallback png background image */
        z-index:10;
        color:white;
        display: none;
    }

    form
    {
        width: 500px;
    }
    .label
    {
        width: 200px;
        float: left;
        min-height: 26px;
    }
    .label .required
    {
        color: red;
    }
    .hidden
    {
        display: none;
    }
    .field
    {
        width: 300px;
        float: left;
        clear: right;
        min-height: 26px;
    }

    input:not([type="checkbox"]), select, textarea
    {
        width: 300px;
        moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    form > button, #emplTool > button, #requestTool, #new, #searchButton, button.roundButton
    {
        float: right;
        clear: left;
        cursor: hand;
        moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }
    form > button#deleteTool
    {
        float: left;
        clear: left;
        background-color: red;
        color: white;
    }

    #emplTool .label, #emplTool .field
    {
        border-bottom: solid 1px #efefef;
        padding: 5px 0px 5px 0px;
    }
    
    #modalWindow > fieldset
    {
        border: solid 1px black;
        padding: 10px;
    }
    
    #printPage
    {
        display: none;
    }
    #printPage > table
    {
        border: 1px solid black; 
        margin: 5px; 
        border-collapse: initial;
        width: 100%
        
    }
    #printPage > table > tbody > tr > td 
    {
        border:1px solid black;
    }
}

@media (max-width: 640px){
    
    .ui-icon{margin-top: 2px;}
    .ui-menu{width: 130px; font-size: 12px;font-family: 'spotFont'; line-hight: 12px; margin-right: 20px;z-index: 14;}
    a.ui-corner-all {font-size: 12px}
    a.ui-tabs-anchor {font-size: 12px}
    .ui-menu-item{height: 30px}
    #top
    {
        position: fixed;
        z-index: 1;
        width: 100%;
    }
    #toggle-menu
    {
        display: block;
    }
    #menu
    {
        top: 104px;
        margin-top: 0px;
    }
    #menu > ul > li > ul
    {
        width: 100px;
    }
    #menu > ul > li > ul > li > a
    {
        font-size: 12px;
    }
    body
    {
        font-family: 'spotFont';
        font-size: 14px;
    }
    #main
    {
        width: auto;
        padding: 0px;
        padding-top: 95px;
    }
    .ui-dialog
    {
        left: 0px;
    }
    .ui-tabs-panel, .ui-tabs, .ui-tabs-nav
    {
        padding: 0px;
    }
    .table
        {
            display: table;
            width: 100%;
        }
        .title
        {
            display: table-caption;
            text-align: center;
            font-weight: bold;
            font-size: larger;
        }
        .heading
        {
            display: table-row;
            font-weight: bold;
            text-align: center;
        }
        .row
        {
            display: table-row;
        }
         .rowMouseOver
        {
            background-color: #efefef;
            cursor: hand;
        }
        .cell
        {
            display: table-cell;
            border: solid 1px black;
            border-width: 1px;
            padding: 5px;
            font-size: 12px;
        }
    h1
    {
        font-size: 14px;
        padding-bottom: 10px;
    }
    form
    {
        width: auto;
    }
    .label
    {
        width: 100px;
        float: left;
        font-size: 12px;
        clear: left;
    }
    .label .required
    {
        color: red;
    }
    .hidden
    {
        display: none;
    }
    .field
    {
        width: 150px;
        float: left;
        clear: right;
        font-size: 12px;
    }

   input:not([type="checkbox"]), select, textarea
    {
        width: 150px;
        moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }
    
    .table #accountable, .table #editMarker, .table #dateOfPurchase, .table #lastService, .table #make, .table #standardLocation, .table #onLoanTo, .table #employeeNumber, .table #carNumber, .table #eMail
    {
        display: none;
    }
}

@media print {
    body
    { font-size: 18pt;
      height: 842px;
        width: 595px;
    }
        .table
        {
            display: table;
            width: 100%;
        }
        .title
        {
            display: table-caption;
            text-align: center;
            font-weight: bold;
            font-size: larger;
        }
        .heading
        {
            display: table-row;
            font-weight: bold;
            text-align: center;
        }
        .row
        {
            display: table-row;
        }
         .rowMouseOver
        {
            background-color: #efefef;
            cursor: hand;
        }
        .cell
        {
            display: table-cell;
            border: solid 1px black;
            border-width: 1px;
            padding: 5px;
            font-size: 14px;
        }
    
}