﻿.ui-effect-wrapper {
    display: inline-block;
}

.inline-icon {
    display: inline-block;
    *display: inline;
}

.centerText {
    text-align: center;
}

aside.commands {
    float: right;
    margin-top: 1.5em;
    margin-right: 20px;
    margin-left: 20px;
    width: 200px;
}

    aside.commands input, aside.commands a, aside.commands select {
        margin: 5px 0 10px 0;
        width: 83%;
    }

time {
    margin: 0 0 7px;
    color: #666;
    font-size: 0.9em;
    line-height: 1.3em;
}
/* JQueryUI Tabs changes
----------------------------------*/
.ui-tabs-nav.ui-widget-header {
    border-top-width: 0;
    border-right-width: 0;
    border-left-width: 0;
    -khtml-border-bottom-left-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -khtml-border-bottom-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -moz-border-radius-bottomleft: 0px;
    -moz-border-radius-bottomright: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.ui-tabs > .ui-tabs-nav > .ui-state-disabled { 
    display: none; /* disabled tabs don't show up */ 
} 

.ui-tabs {
    padding: 0 0 .2em 0;
}

    .ui-tabs .ui-tabs-panel {
        padding: 0px;
    }

/* JQueryUI Dialog Secondary Title Bar Button extension
----------------------------------*/
.ui-dialog-titlebar-secondary {
    position: absolute;
    top: 50%;
    right: 27px;
    margin: -10px 0 0 0;
    padding: 1px;
    width: 19px;
    height: 18px;
}
/* JQueryUI Dialog Title Icon
----------------------------------*/
.ui-dialog .ui-dialog-title .ui-icon {
    float: left;
    margin: 2px 4px 0 -5px;
}

/* Selectmenu
----------------------------------*/
.ui-selectmenu {
    position: relative;
    display: block;
    display: inline-block;
    overflow: visible;
    height: 2.2em;
    background: none !important;
    text-decoration: none;
    -ms-zoom: 1;
    zoom: 1;
}

.ui-selectmenu-icon {
    position: absolute;
    top: 50%;
    right: 6px;
    margin-top: -8px;
}

.ui-selectmenu-menu {
    position: absolute;
    top: 0;
    z-index: 1005;
    display: none;
    margin: 0;
    padding: 0;
}
    /* z-index: 1005 to make selectmenu work with dialog */
    .ui-selectmenu-menu ul {
        position: relative;
        overflow: auto;
        overflow-x: hidden;
        overflow-y: auto;
        margin: 0;
        padding: 0;
        list-style: none;
    }

.ui-selectmenu-open {
    display: block;
}

.ui-selectmenu-menu-popup {
    margin-top: -1px;
}

.ui-selectmenu-menu-dropdown {
}

.ui-selectmenu-menu li {
    display: block;
    margin: 0;
    padding: 0;
    border-top: 1px dotted transparent;
    border-right-width: 0 !important;
    border-bottom: 1px dotted transparent;
    border-left-width: 0 !important;
    font-weight: normal !important;
}

    .ui-selectmenu-menu li a, .ui-selectmenu-status {
        display: block;
        padding: 5px 2.1em 5px 5px;
        outline: none;
        text-decoration: none;
        line-height: 1.4em;
    }

    .ui-selectmenu-menu li.ui-state-disabled a, .ui-state-disabled {
        cursor: default;
    }

    .ui-selectmenu-menu li.ui-selectmenu-hasIcon a,
    .ui-selectmenu-hasIcon .ui-selectmenu-status {
        position: relative;
        margin-left: 5px;
        padding-left: 20px;
    }

    .ui-selectmenu-menu li .ui-icon, .ui-selectmenu-status .ui-icon {
        position: absolute;
        top: 1em;
        left: 0;
        margin-top: -8px;
    }

.ui-selectmenu-status {
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4em;
}

.ui-selectmenu-open li.ui-selectmenu-item-focus a {
}

.ui-selectmenu-open li.ui-selectmenu-item-selected {
}

.ui-selectmenu-menu li span, .ui-selectmenu-status span {
    display: block;
    margin-bottom: .2em;
}

.ui-selectmenu-menu li .ui-selectmenu-item-header {
    font-weight: bold;
}

.ui-selectmenu-menu li .ui-selectmenu-item-content {
}

.ui-selectmenu-menu li .ui-selectmenu-item-footer {
    opacity: .8;
}
/* for optgroups */
.ui-selectmenu-menu .ui-selectmenu-group {
    font-size: 1em;
}

    .ui-selectmenu-menu .ui-selectmenu-group .ui-selectmenu-group-label {
        display: block;
        padding: .6em .5em 0;
        font-weight: bold;
        line-height: 1.4em;
    }

    .ui-selectmenu-menu .ui-selectmenu-group ul {
        margin: 0;
        padding: 0;
    }
/* IE6 workaround (dotted transparent borders) */
* html .ui-selectmenu-menu li {
    width: 100%;
    border-color: pink;
    filter: chroma(color=pink);
}

    * html .ui-selectmenu-menu li a {
        position: relative;
    }
/* IE7 workaround (opacity disabled) */
* + html .ui-state-disabled, * + html .ui-state-disabled a {
    color: silver;
}

.half {
    width: 48%;
}

.full {
    width: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    position: relative;
    margin: 0;
    padding: 0;
    border: none !important;
    background: white url(images/body-bg.png) repeat-y;
    background-image: none !important;
    color: #555;
    font-size: 13px;
    font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
    /* This is so the ui-widget-content background doesn't show */
    /* This is so the ui-widget-content border doesn't show */
}

p {
    margin-bottom: 20px;
    line-height: 1.6em;
}

ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

header,
footer,
nav,
section {
    display: block;
}

h1.icon {
    margin: 0 0 10px 0;
    padding: 5px 0 0 65px;
}

h1.bigSearch {
    height: 42px;
    background: url(images/big-search.png) no-repeat;
}

h1.bigTicket {
    height: 42px;
    background: url(images/big-tickets.png) no-repeat;
}

h1.bigComputer {
    height: 42px;
    background: url(images/Big-Computer.png) no-repeat;
}

h1.bigClient {
    height: 42px;
    background: url(images/Big-Client.png) no-repeat;
}

h1.bigDashboard {
    height: 42px;
    background: url(images/Big-Dashboard.png) no-repeat;
}

h1.bigHome {
    height: 42px;
    background: url(images/Big-Home.png) no-repeat;
} 

.block {
    float: left;
    margin: 0 0 20px;
    width: 100%;
    border: 1px solid #CCC;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
/* Navigation
----------------------------------------------------------*/

nav {
    float: left;
    margin: 0px 2px 0px 0px;
    padding: 0px;
    width: 198px;
    border-right: solid 1px #F6F6F6;
    background: #F0F0F0;
}

    nav a {
        position: relative;
        display: block;
        margin: 0px;
        padding: 23px 18px 25px 70px;
        width: 110px;
        border-top: solid 1px #F6F6F6;
        border-right: solid 1px #CCC;
        border-bottom: solid 1px #CCC;
        background: -moz-linear-gradient(top, #F9F9F9, #E6E6E6);
        background: -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#E6E6E6));
        background-color: #F9F9F9;
        text-decoration: none;
        font-weight: bold;
        font-size: 1.3em;
        line-height: 1.0em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        /*filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#F9F9F9', EndColorStr='#E6E6E6', GradientType=0);*/
    }

        nav a:hover {
            background: -moz-linear-gradient(top, #E9E9E9, #E0E0E0);
            background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#E0E0E0));
            background-color: #E9E9E9;
            /*filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#E9E9E9', EndColorStr='#E0E0E0', GradientType=0);*/
        }

        nav a span {
            position: absolute;
            top: 50%;
            left: 20px;
            overflow: hidden;
            margin: -18px 0 0;
            width: 36px;
            height: 36px;
            outline: none;
            border: none;
            background: 0 0 no-repeat;
            background-position: center;
            text-align: left;
            text-indent: -9999em;
            line-height: 100px;
        }

.clientsNav span {
    background-image: url(images/clients.png);
}

.dashboardNav span {
    background-image: url(images/dashboard.png);
}

.ticketsNav span {
    background-image: url(images/tickets.png);
}

.homeNav span {
    background-image: url(images/home.png);
}

.computersNav span {
    background-image: url(Images/computers.png);
}
nav a.active {
    background: transparent url(images/active-bg.gif) repeat;
    color: #fff;
    -webkit-text-shadow: 0 0 3px #444;
    text-shadow: 0 0 3px #444;
}

nav .ui-state-active {
    border-right: solid white 1px !important;
}

/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    margin: 0px;
    font-size: 1.5em;
}

h1 {
    margin-bottom: 0;
    padding-bottom: 0;
    font-size: 2em;
}

h2 {
    padding: 0 0 10px 0;
}

h3 {
    margin: 0 5px;
    padding: 7px 10px;
    font-size: 1em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/


#main {
    overflow: hidden;
    padding: 30px 30px 40px 30px;
    -moz-border-radius: 4px 0 0 0;
    -webkit-border-radius: 4px 0 0 0;
    border-radius: 4px 0 0 0;
    /*background-color: #fff;*/
}

/* Header
----------------------------------------------------------*/
#mainHeader {
    position: relative;
    overflow: hidden;
    margin-bottom: 0px;
    padding: 0;
    border: 0;
}

    #mainHeader h1 {
        margin: 0;
        padding: 5px 0;
        border: none;
        -webkit-text-shadow: 0px 0px 20px #111;
        text-shadow: 0px 0px 20px #111;
        font-weight: bold;
        font-size: 32px !important;
        line-height: 2em;
    }

.headerRight {
    text-align: right;
}

#mainHeader ul {
    padding: 10px 0;
    list-style: none;
    line-height: 1.1em;
}

#mainHeader li {
    float: left;
    padding: 0 20px;
    width: auto;
    border-left: 1px solid #999;
    list-style-type: none;
    -webkit-text-shadow: 0px 0px 20px #111;
    text-shadow: 0px 0px 20px #111;
    font-weight: bold;
    font-size: 0.80em;
}

    #mainHeader li:first-child {
        border-left: none;
    }

#mainHeader a {
    text-decoration: none;
}

    #mainHeader a:hover {
        color: #bbb;
    }
/* Search form */
#searchForm {
    position: relative;
}

    #searchForm input[type='submit'] {
        position: absolute;
        right: 8px;
        *right: 28px;
        bottom: 5px;
        overflow: hidden;
        margin-top: 0px;
        width: 20px;
        height: 20px;
        border: none;
        background-color: transparent;
        background-image: url(images/search.png);
        background-position: center;
        background-repeat: no-repeat;
        text-indent: -9999px;
        line-height: 100px;
        cursor: pointer;
        /* IE7 or below */
    }

    #searchForm input[type='text'] {
        position: relative;
        margin: initial;
        padding-left: 10px;
        width: 250px;
        border-radius: 10px;
    }
/* Table Single Filter Input */
.filter {
    position: relative;
}

    .filter input[type='text'] {
        padding-right: 30px;
        padding-left: 5px;
        border-radius: 10px;
    }

    .filter button {
        position: absolute;
        bottom: 10px;
        overflow: hidden;
        margin-top: 0px;
        margin-left: -30px;
        width: 20px;
        height: 20px;
        border: none;
        background-color: transparent;
        background-image: url(images/filter.png);
        background-position: center;
        background-repeat: no-repeat;
        text-indent: -9999px;
        line-height: 100px;
        cursor: pointer;
    }
/* TAB MENU   
----------------------------------------------------------*/
ul#menu {
    position: relative;
    margin: 0;
    padding: 0 0 2px;
    border-bottom: 1px #5C87B2 solid;
    text-align: right;
}

    ul#menu li {
        display: inline;
        list-style: none;
    }

        ul#menu li#greeting {
            padding: 10px 20px;
            color: #fff;
            text-decoration: none;
            font-weight: bold;
            line-height: 2.8em;
        }

        ul#menu li a {
            padding: 10px 20px;
            -moz-border-radius: 4px 4px 0 0;
            -webkit-border-radius: 4px 4px 0 0;
            border-radius: 4px 4px 0 0;
            background-color: #e8eef4;
            color: #034af3;
            text-decoration: none;
            font-weight: bold;
            line-height: 2.8em;
        }

            ul#menu li a:hover {
                background-color: #fff;
                text-decoration: none;
            }

            ul#menu li a:active {
                background-color: #a6e2a6;
                text-decoration: none;
            }

        ul#menu li.selected a {
            background-color: #fff;
            color: #000;
        }

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

fieldset {
    margin: 1em 0 0 0;
    padding: .5em 1.4em;
    border: 1px solid #ddd;
}

textarea {
    min-height: 75px;
}

select {
    padding: 5px;
    border: 1px solid #ccc;
    color: #444;
    font-size: 1.2em;
}

input[type="submit"] {
    padding: 5px;
    font-size: 1em;
}

/* TABLE
----------------------------------------------------------*/

table {
    border-collapse: collapse;
    font-size: .85em;
}

    table td {
        padding: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    table th {
        position: relative;
        padding: 6px 5px;
        text-align: left;
    }

/* MISC  
----------------------------------------------------------*/
.clear {
    clear: both;
}

.error {
    color: Red;
}

#menucontainer {
    margin-top: 40px;
}

div#title {
    display: block;
    float: left;
    text-align: left;
}

#logindisplay {
    display: block;
    margin: 10px;
    color: White;
    text-align: right;
    font-size: 1.1em;
}

    #logindisplay a:link {
        color: white;
        text-decoration: underline;
    }

    #logindisplay a:visited {
        color: white;
        text-decoration: underline;
    }

    #logindisplay a:hover {
        color: white;
        text-decoration: none;
    }

.truncate {
text-overflow: ellipsis;
overflow:hidden;
white-space:nowrap;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #ff0000 !important;
}

.field-validation-valid {
    display: none !important;
}

.input-validation-error {
    border: 1px solid #ff0000 !important;
    background-color: #ffeeee !important;
}

.validation-summary-errors {
    color: #ff0000 !important;
    font-weight: bold !important;
}

.validation-summary-valid {
    display: none !important;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label,
.editor-label {
    margin: 1em 0 0 0;
}

.display-field,
.editor-field {
    margin: 0.5em 0 0 0;
}

.text-box {
    width: 30em;
}

    .text-box.multi-line {
        height: 6.5em;
    }

.tri-state {
    width: 6em;
}

/*	--------------------------------------------------
:: Inputs
-------------------------------------------------- */
input[type="text"], input[type="password"], input[type="email"], input[type="number"] {
    width: 200px;
    color: #444;
    position: relative;
    margin: 5px 0;
    padding: 5px;
    outline: none !important;
    border: solid 1px #bbb;
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background: url(Images/input-bg.png) #fff;
    font-size: 13px;
    font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.placeholder {
    color: #888 !important;
}

/*	--------------------------------------------------
:: Links
-------------------------------------------------- */
a {
    color: #64656c;
    text-decoration: none;
    line-height: inherit;
}
.linkIndicator {
    height: 1em;
    display: inline-block;
}
.headerRight .linkIndicator {
    *display: none;
}
.links li {
    padding-top: 5px;
}
a:hover {
    color: #64656c;
    font-weight: bold;
}

a:hover, a:active {
    outline: none;
}

p a, p a:visited {
    line-height: inherit;
}

a img {
    border: none;
}

#wrap > header {
    padding: 4px 14px 7px;
}

/* Footer Stuff */
html, body {
    height: 99.9%;
}

#wrap {
    min-height: 100%;
    width: 100%;
    background: url(Images/sidebg.png) repeat-y;
    -moz-background-size: 200px;
    -o-background-size: 200px;
    -webkit-background-size: 200px;
    background-size: 200px;
}

body > footer {
    position: relative;
    clear: both;
    margin-top: -40px;
    height: 40px;
    background: -moz-linear-gradient(top, #dddddd, #cccccc);
    background: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#cccccc));
    background-color: #d5d5d5;
    color: #444;
    /*filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#dddddd', EndColorStr='#cccccc', GradientType=0);*/
}

/*Opera Fix*/
body:before {
    float: left;
    margin-top: -32767px;
    width: 0;
    height: 100%;
    content: "";
}
/* End Footer Stuff */

/* .LogIn */
.LogIn nav {
    display: none;
}

.LogIn .headerRight {
    display: none;
}

Body.LogIn {
    background-image: none !important;
}

.LogIn h1 {
    margin: 30px auto;
    width: 50%;
    text-align: center;
    font-weight: bold;
    font-size: 2.25em;
}

.LogIn #container .floatLeft, .LogIn #container .floatRight {
    min-width: 300px;
    width: 46%;
}

.LogIn #container {
    margin: 0 auto;
    min-width: 700px;
    width: 50%;
}

.LogIn #Login input {
    padding-top: 5px;
    padding-bottom: 5px;
    width: 93%;
}

    .LogIn #Login input[type="submit"] {
        width: 100px;
    }

.LogIn .mobileSection {
    clear: both;
    text-align: center;
}

    .LogIn .mobileSection a {
        padding: 10px;
    }

.LogIn #wrap {
    background-image: none;
}

/* End .LogIn */

/* .SetPassword */
.SetPassword nav {
    display: none;
}

.SetPassword .headerRight {
    display: none;
}

.SetPassword .messageText {
    font-weight: normal;
}

Body.SetPassword {
    background-image: none !important;
}

.SetPassword h1 {
    margin: 30px auto;
    width: 50%;
    text-align: center;
    font-weight: bold;
    font-size: 2.25em;
}

.SetPassword #container .floatLeft, .SetPassword #container .floatRight {
    min-width: 300px;
    width: 46%;
}

.SetPassword #container {
    margin: 0 auto;
    min-width: 700px;
    width: 50%;
}

.SetPassword #Login input {
    padding-top: 5px;
    padding-bottom: 5px;
    width: 93%;
}

    .SetPassword #Login input[type="submit"] {
        width: auto;
        padding-left: 15px;
        padding-right: 15px;
    }

.SetPassword .mobileSection {
    clear: both;
    text-align: center;
}

    .SetPassword .mobileSection a {
        padding: 10px;
    }

.SetPassword #wrap {
    background-image: none;
}

/* End .SetPassword */

/* .Search */

#search-results {
    width: 82%;
}

.search-filters {
    width: 14%;
}

    .search-filters a.search-filter {
        display: block;
        overflow: hidden;
        margin: 5px 0px 0px 0px;
        padding-left: 30px;
        height: 28px;
        background-position: left top;
        text-decoration: none;
    }

        .search-filters a.search-filter:hover {
            color: #999;
        }

        .search-filters a.search-filter.active {
            background-position: left -29px;
            font-weight: bold;
        }

        .search-filters a.search-filter.clearResults {
            font-size: 0.9em;
        }

@media only screen and (max-width: 767px) {
    #search-results {
        width: 100% !important;
    }
}

/* End Search */
/* Dashboard */

.accordion {
    margin-left: 0px;
    padding-left: 0px;
    list-style-type: none;
}

.accordion-content {
    padding: 0px 20px;
}

.Home .customDropdown {
    width: 95%;
}

#StatusGraphs {
    text-align: center;
}

    #StatusGraphs li {
        display: inline-block;
        *display: inline;
    }
    #StatusGraphs li div {
        text-align: left;
    }
/* End Dashboard */
/* General Helpers */

.floatLeft {
    float: left;
}

.floatRight {
    float: right;
}

.clearFloat {
    clear: both;
}

.loading-indicator {
    width: 80px;
    height: 80px;
    background: url( 'images/loading.gif' );
    background-position: center center;
    background-repeat: no-repeat;
}

.loading-indicator-overlay {
    background-color: #FFFFFF;
    opacity: 0.6;
    /*filter: alpha(opacity = 60);*/
}

/* CustomDropdown */

.ui-combobox {
    position: relative;
    display: inline-block;
    margin: 5px;
}

.ui-dropdown-button {
    position: absolute;
    top: 0;
    *top: 0.1em;
    right: -1px;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
    *height: 1.7em;
    /* adjust styles for IE 6/7 */
}

.ui-autocomplete-input {
    margin: 0;
    padding: 0.3em;
}

.ui-combobox-input {
    cursor: pointer;
}

.ui-section {
    overflow: hidden;
    margin: 5px 5px 15px 5px;
    padding: 0.2em;
}

.ui-section-tabbed {
    overflow: hidden;
    margin-bottom: 15px;
    padding: 0 0 0.6em 0;
}

.ui-section-content {
    position: relative;
    overflow: auto;
    padding: .5em 0em .5em 1em;
    background: none;
    -ms-zoom: 1;
    zoom: 1;
}

.ui-widget-header.ui-section {
    background-position: top !important;
}

section .ui-widget-header {
    margin: 2px;
}

.ui-button {
    font-weight: bold !important;
}
/* ==== styleTable styles ==== */
/* IE7: setting "separate" results in bad visuals; all other browsers work fine with either value */
/* if set to "separate", then this rule is also needed to prevent double vertical borders on hover:
table.ui-styled-table tr * + th, table.ui-styled-table tr * + td  { border-left-width: 0px !important; } */
table.ui-styled-table {
    border-collapse: collapse;
}

    table.ui-styled-table tr {
        border-bottom: 1px solid lightgray;
    }

    table.ui-styled-table th {
        font-weight: bold !important;
    }

    /* undo the "bolding" that jQuery UI theme may cause on hovered elements
/* IE7: does not support "inherit", so use a MS proprietary expression along with an IE <= 7 targeting hack
        to make the visuals consistent across all supported browsers */
    table.ui-styled-table td.ui-state-hover {
        font-weight: inherit;
        *font-weight: expression(this.parentNode.currentStyle['fontWeight']);
    }

    /* initally remove bottom border for all cells */
    table.ui-styled-table th, table.ui-styled-table td {
        border-bottom-width: 0px !important;
    }

    /* hovered-row cells should show bottom border (will be highlighted) */
    table.ui-styled-table tbody tr:hover th,
    table.ui-styled-table tbody tr:hover td {
        border-bottom-width: 1px !important;
    }

    /* remove top border if the above row is being hovered to prevent double horizontal borders */
    table.ui-styled-table tbody tr:hover + tr th,
    table.ui-styled-table tbody tr:hover + tr td {
        border-top-width: 0px !important;
    }

    /* last-row cells should always show bottom border (not necessarily highlighted if not hovered) */
    /* IE7, IE8: selector dependent on CSS classes because of no support for :last-child */
    table.ui-styled-table tbody tr.last-child th,
    table.ui-styled-table tbody tr.last-child td {
        border-bottom-width: 1px !important;
    }

    /* last-row cells should always show bottom border (not necessarily highlighted if not hovered) */
    /* IE8 BUG: if these (unsupported) selectors are added to a rule, other selectors for that rule will stop working as well! */
    /* IE9+, FF, Chrome: make sure the visuals are working even without the CSS classes crutch */
    table.ui-styled-table tbody tr:last-child th,
    table.ui-styled-table tbody tr:last-child td {
        border-bottom-width: 1px !important;
    }

table.ui-styled-table-rowlink tbody tr {
    cursor: pointer;
}

table th.sortable span {
    float: right;
    margin-top: 0;
}

table th.sortable {
    cursor: pointer;
}

th.narrowColumn {
    width: 8em;
}

th.mediumColumn {
    width: 12em;
}

/* ==== End styleTable styles ==== */

.status-monitor {
    text-align: center;
}

    .status-monitor img {
        max-width: 100%;
        height: auto !important;
    }

.ResultList > li {
    display: block;
    clear: both;
    overflow: hidden;
    margin-bottom: 12px;
    padding: 0 0 10px 38px;
    border-bottom: 1px solid #e0e0e0;
}

    .ResultList > li > ul > label {
        font-weight: bold;
    }

    .ResultList > li > ul > li {
        display: inline-block;
        *display: inline;
        font-size: .9em;
    }

    .ResultList > li h4 {
        margin: 0;
    }

.ResultList label {
    font-weight: bold;
}

.ResultList {
    margin: 10px;
    padding: 10px 10px 0px 10px;
}

.ResultTable {
    width: 100%;
    table-layout: fixed;
}
table.ResultTable tr.dangerous {
    background-color: pink !important;
}
table.ResultTable tr.grayware {
    background-color: lightgray;
}
.client {
    background: url(images/clients-25.png) no-repeat left -29px;
}

.ticket {
    background: url(images/tickets-25.png) no-repeat left -29px;
}

.computer {
    background: url(images/computers-25.png) no-repeat left -29px;
}

.pager {
    margin: 5px 10px;
    font-size: .8em;
}

    .pager .pagerStatus {
        width: 12.5em;
    }

.installerLinks ul {
    padding-left: 10px;
    font-weight: normal;
}

@media only screen and (max-width: 767px) {
    #wrap {
        background-image: none;
    }

    nav {
        float: none !important;
        width: auto !important;
    }

        nav a {
            width: auto !important;
        }
}

/* ============== Computer Details ==================== */
.computerDetails {
    position: relative;
}

.computerDetails div.nextCheckIn {
    text-align: center;
}

    .computerDetails > header {
        padding: 5px;
        padding-left: 64px;
        background: url(images/Big-Computer.png) no-repeat;
    }

    .computerDetails header li {
        float: left;
        margin-right: 20px;
    }

    .computerDetails div#content {
        margin-right: 230px;
    }

    .computerDetails ul {
        clear: left;
    }

        .computerDetails ul.commandStatuses {
            overflow: auto;
            margin: 0 0 10px;
            height: 119px;
        }

            .computerDetails ul.commandStatuses li {
                position: relative;
                display: block;
                float: none;
                overflow: hidden;
                margin: 0 5px 10px;
                padding: 7px 10px 7px 28px;
                border: 1px solid;
                border-radius: 4px;
            }

            .computerDetails ul.commandStatuses span.message {
                margin-right: 30px;
            }

            .computerDetails ul.commandStatuses span.message, .computerDetails ul.commandStatuses span.status {
                font-weight: bold;
            }

            .computerDetails ul.commandStatuses li.script-Pending {
                border-color: #A8AEC5;
                background: -moz-linear-gradient(top, #F2F3F6, #D7DAE5);
                background: -webkit-gradient(linear, left top, left bottom, from(#F2F3F6), to(#D7DAE5));
                background: linear-gradient(to bottom, #F2F3F6 0%, #D7DAE5 100%);
                color: #222;
                filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#f2f3f6', EndColorStr='#d7dae5', GradientType=0);
            }

                .computerDetails ul.commandStatuses li.script-Pending span.ui-icon {
                    background: url(images/alert-pending.gif) no-repeat center;
                }

            .computerDetails ul.commandStatuses li.script-Fail {
                border-color: #DA9C9C;
                background: -moz-linear-gradient(top, #F6ECEC, #EEDCDC);
                background: -webkit-gradient(linear, left top, left bottom, from(#F6ECEC), to(#EEDCDC));
                background: linear-gradient(to bottom, #F6ECEC 0%, #EEDCDC 100%);
                color: #A00;
                filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#f6ecec', EndColorStr='#eedcdc', GradientType=0);
            }

                .computerDetails ul.commandStatuses li.script-Fail span.ui-icon {
                    background: url(images/alert-error.gif) no-repeat center;
                }

            .computerDetails ul.commandStatuses li.script-Success span.ui-icon {
                background: url(images/alert-success.gif) no-repeat center;
            }

            .computerDetails ul.commandStatuses li.script-Success {
                border-color: #80A364;
                background: -moz-linear-gradient(top, #EDF4E7, #E0EBD1);
                background: -webkit-gradient(linear, left top, left bottom, from(#EDF4E7), to(#E0EBD1));
                background: linear-gradient(to bottom, #EDF4E7 0%, #E0EBD1 100%);
                color: #3E7319;
                filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#edf4e7', EndColorStr='#e0ebd1', GradientType=0);
            }

        .computerDetails ul#computerInfo > li, .computerDetails ul#meters > li {
            float: left;
            padding: 0 10px;
            width: 30%;
        }

    .computerDetails label {
        color: #666;
    }

    .computerDetails ul#computerInfo ul li {
        margin: 0 0 5px;
        line-height: 1.5em;
    }

    .computerDetails div.progressBar {
        height: 22px;
    }

        .computerDetails div.progressBar .ui-progressbar-value {
            background-image: url(images/meter.gif);
            background-position: 0 -22px;
        }

        .computerDetails div.progressBar.low .ui-progressbar-value {
            background-position: 0px -22px;
        }

        .computerDetails div.progressBar.mid .ui-progressbar-value {
            background-position: 0px -44px;
        }

        .computerDetails div.progressBar.high .ui-progressbar-value {
            background-position: 0px -66px;
        }

    .computerDetails ul.meterLegend {
        padding-bottom: 15px;
        width: 100%;
        height: 1em;
    }

    .computerDetails fieldset#flags li {
        position: relative;
        float: left;
        padding: 4px 0 4px 28px;
        width: 30%;
    }

    .computerDetails li > span.ui-icon {
        position: absolute;
        top: 50%;
        left: 8px;
        margin: 0 5px 0 0;
        margin-top: -8px;
        -ms-zoom: 1;
        zoom: 1;
    }

.computer-Offline {
    color: Red;
    font-weight: bold;
}

.computer-Online {
    color: Green;
    font-weight: normal;
}

.ui-custom-icon-false {
    background-image: url(images/alert-error.gif) !important;
}

.ui-custom-icon-true {
    background-image: url(images/alert-success.gif) !important;
}

.ui-custom-icon-pending {
    background-image: url(images/alert-pending.gif) !important;
}

.ui-custom-icon-time {
    background-image: url(images/time.png) !important;
}

.softwareList, .monitorsList, .alertsList, .hotfixesList {
    margin: 10px auto;
    width: 95%;
}

table.ResultTable tr.missing {
    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top, #F6ACAC 0%, #EEDCDC 100%);
    /* Opera */ 
    background-image: -o-linear-gradient(top, #F6ACAC 0%, #EEDCDC 100%);
    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F6ACAC), color-stop(1, #EEDCDC));
    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #F6ACAC 0%, #EEDCDC 100%);
    /* W3C Markup, IE10 */ 
    background-image: linear-gradient(to bottom, #F6ACAC 0%, #EEDCDC 100%);
}
@media only screen and (max-width: 767px) {
    .computerDetails .ui-section, .computerDetails .ui-section-tabbed {
        margin-right: inherit;
    }
}

section#computerList table td {
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

section#computerList table .userActive {
    padding-left: 16px;
    background: url(images/user_active.png) no-repeat left 50%;
}

section#computerList table .userIdle {
    padding-left: 16px;
    background: url(images/user_idle.png) no-repeat left 50%;
}

section#computerList table .userOffline {
    padding-left: 16px;
    background: url(images/user_offline.png) no-repeat left 50%;
}


/* ============== Ticket Details ==================== */

.ticketDetails ul.details li {
    float: left;
    margin: 5px 0;
    min-width: 200px;
    width: 33%;
}

    .ticketDetails ul.details li.wide {
        width: 66%;
    }

    .ticketDetails ul.details li input {
        width: 93%;
    }
    /* Since padding on inputs seems to be handled differently than padding on selects
   when using a percentile width we have to specify input and select seperately so they
   are close to the same width */
    .ticketDetails ul.details li select {
        width: 96%;
    }

    .ticketDetails ul.details li.wide select, .ticketDetails ul.details li.wide input {
        width: 96.5%;
    }

.ticketDetails fieldset {
    position: relative;
    overflow: auto;
    margin: 0 0 12px;
    padding: 0 10px;
    font-size: .85em;
}

.ticketDetails ul.messageList li {
    position: relative;
    float: left;
    margin: 0;
    width: 100%;
}

.ticketDetails ul.messageList div {
    margin-left: 75px;
    padding: 10px 0;
    min-height: 65px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ccc;
}

.ticketDetails ul.messageList img {
    position: absolute;
    top: 13px;
    width: 58px;
    height: 58px;
    border: 1px solid #acacac;
    -moz-box-shadow: 0 0 6px #bbb;
    -webkit-box-shadow: 0 0 6px #bbb;
    box-shadow: 0 0 6px #bbb;
}

.ticketDetails ul.messageList p {
    margin: 0;
}

.ticketDetails textarea {
    width: 95%;
}

.ticketDetails label {
    color: #666;
}

.ticketDetails > header {
    padding: 5px;
    padding-left: 64px;
    background: url(images/Big-Ticket.png) no-repeat;
}

.ticketDetails header li {
    float: left;
    margin-right: 20px;
}

.ticketDetails #HistoryTab ul {
    margin: 0px 20px;
}

.ticketDetails #HistoryTab p {
    margin: 0px;
    padding: 0px;
    font-size: 13px;
}

.ticketDetails #HistoryTab li {
    padding: 10px 0;
    border-bottom: 1px solid #E0E0E0;
}

.ticketDetails #TimeTrackingTab table {
    margin: 15px auto;
    width: 98%;
}

.ticketDetails .timerNumbers {
    font-size: 2.5em;
}

.ticketDetails input.timeEntry {
    margin: 0px;
    width: 2em;
}

.ticketDetails .messageList select {
    width: 200px;
}

.ticketDetails .messageList .ui-selectmenu {
    margin: 5px 0;
}

@media only screen and (max-width: 767px) {
    .ticketDetails .ui-section, .ticketDetails .ui-section.tabbed {
        margin-right: 0px;
        margin-left: 0px;
        padding-right: 0px;
        padding-left: 0px;
    }

    .ticketDetails .ui-section-content {
        padding-right: 0px;
        padding-left: 0px;
    }

    aside.commands {
        position: relative;
        float: none;
        margin: 0 auto;
    }

    #main .floatLeft, #main .floatRight {
        float: none !important;
        width: inherit !important;
    }

    #container {
        min-width: 0 !important;
        width: 95% !important;
    }

    #main {
        padding: 30px 0px 40px 0px;
    }
}
/* IE10 snapped view support */
@media screen and (max-width: 320px) {
    @-ms-viewport {
        width: 320px;
    }
}


/* ============== Client Details ==================== */
.clientDetails .StatusGraphs {
    text-align: center;
}

    .clientDetails .StatusGraphs li {
        display: inline-block;
        *display: inline;
    }
.tableWrap {
    position: relative;
}
table.PasswordList,  table.ProductKeyList {
    table-layout:auto;
}

/* ====== Dashboard and End-User Home ================ */
div.dashButton {
    display: inline-block;
    margin: 5px 20px 10px 0px;
    width: 30%;
}

    div.dashButton a.button {
        padding-bottom: 10px;
        width: 94%;
        overflow: hidden;
    }

        div.dashButton a.button strong {
            display: inline-block;
            width: 75%;
            border-bottom: 1px solid #b9b9b9;
            font-size: 7em;
            line-height: 1.2;
        }

        div.dashButton a.button h2 {
            margin: auto;
            padding-top: 10px;
            width: 75%;
            border-top: 1px solid #fff;
            text-align: left;
            font-size: 1.5em;
        }

            div.dashButton a.button h2 span {
                float: left;
                padding-left: 35px;
                background-position: left center;
                background-repeat: no-repeat;
            }

        div.dashButton a.button sup {
            margin: 10px 0 0;
            vertical-align: super;
            font-size: 0.375em;
            line-height: 100%;
        }

        div.dashButton a.button h2.clients span {
            background-image: url(images/Small-Client.png);
        }

        div.dashButton a.button h2.computers span {
            background-image: url(images/Small-Computers.png);
        }

        div.dashButton a.button h2.monitors span {
            background-image: url(images/Small-Monitors.png);
        }

        div.dashButton a.button h2.tickets span {
            background-image: url(images/Small-Tickets.png);
        }

        div.dashButton a.button h2.upTime span {
            background-image: url(images/Small-upTime.png);
        }
@media only screen and (max-width: 767px) {
    div.dashButton{
        width:95%;
        margin-left: 15px;
    }
}
@media only screen and (max-width: 1080px) {

    div.dashButton a.button strong {
        font-size: 4em;
    }
}
/* ====== ClientDashboard ==========*/

.ClientDashboard .lineGraph {
    float: left;
    width: 60%;
}

.ClientDashboard .pieGraph {
    float: left;
    width: 30%;
}

.jqplot-pie-series.jqplot-data-label {
    color: white !important;
}