/* JQUERY-UI CUSTOM
----------------------------------------------------------*/
div .ui-slider-vertical .ui-slider-handle
{
    left: 0;
    margin-bottom: -8px;
    width: 16px;
    z-index: 0;
}

div .ui-slider-vertical
{
    width: 18px;
}

/* MAIN
----------------------------------------------------------*/
body
{
    background-color: #EFEFEF;
    color: #464C4D;
    font-size: .73em;
    font-family: Tahoma, Arial, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    min-width: 860px;
}

#templates, #assets
{
    display: none;
}

/* HEADINGS   
----------------------------------------------------------*/

h1
{
    margin: 0 0 10px 0;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page
{
    margin: 18px 34px 0px 34px;
}

#header
{
    color: #000000;
    height: 80px;
}

.loggedInUser
{
    font-size: 13px;
}

.loggedInInfo
{
    color: #797D7D;
}

.main-menu-tab
{
    float: left;
}

.main-menu-tab.home {
    background: url(/Content/images/menu_opt_status_unselected.png) no-repeat;
    width: 79px;
    height: 48px;
}

.main-menu-tab.log {
    background: url(/Content/images/menu_opt_log_unselected.png) no-repeat;
    width: 87px;
    height: 48px;
}

.main-menu-tab.users {
    background: url(/Content/images/menu_opt_users_unselected.png) no-repeat;
    width: 105px;
    height: 48px;
}

.main-menu-tab.home.active {
    background: url(/Content/images/menu_opt_status_selected.png) no-repeat;
    width: 79px;
    height: 48px;
}

.main-menu-tab.log.active {
    background: url(/Content/images/menu_opt_log_selected.png) no-repeat;
    width: 87px;
    height: 48px;
}

.main-menu-tab.users.active {
    background: url(/Content/images/menu_opt_users_selected.png) no-repeat;
    width: 105px;
    height: 48px;
}

#menu-container
{
    height: 48px;
    background: url("/Content/images/menu_bg.png") repeat-x left;
    margin-left: 118px;
}

#title-logo
{
    margin: 10px 20px 0 0;
    float: left;
}

#logindisplay
{
    font-size: 14px;
    color: #464C4D;
    margin: 0 0 15px 124px;
}

#logindisplay a
{
    color: #464C4D;
    text-decoration: none;
}

#logindisplay a:hover
{
    text-decoration: underline;
    color: #1E8BC4;
}

#main
{
    padding-top: 25px;
}

.container-filled
{
    background-color: #46464B;
    color: #FFFFFF;
}

.container-outlined
{
    border: 1px solid #DADADA;
    padding: 0px;
}

.sensor-image-cell
{
    display: inline-block;
    margin-left: 10px;
    padding-bottom: 28px;
    cursor: pointer;
}

.sensor-offline-graphic
{
    display: none;
    position: absolute;
    margin-left: 10px;
}

.image-group
{
    padding: 15px 15px 5px 5px;
    display: inline-block;
}

.sensor-image
{
    background: url("/Content/images/ajax-loader-white-on-dark-gray.gif") no-repeat top left;
}

.sensor-image-time
{
    color: #B1B3B3;
}

#zoomed-sensor-image-cell
{
    display: none;
    padding: 5px;
    border: 1.5px solid #787D7D;
}

#content > h2:first-of-type {
    margin-top: 0;
}

/* TAB MENU   
----------------------------------------------------------*/

a img
{
    border: none;
}

#main-menu
{
    margin: 0;
    padding: 0;
}

#main-menu li
{
    display: inline;
    list-style: none;
}

/* LIST
----------------------------------------------------------*/

#selectable
{
    list-style-type: none;
    cursor: pointer;
    width: 420px;
    margin: 0px;
    float: left;
    display: block;
}
.list div.icon
{
    width: 15px;
}
.list div.icon img
{
    margin: 0px 4px;
}
.list div
{
    display: inline-block;
}
.list span
{
    display: inline-block;
}
.list span.day
{
    width: 55px;
}
.list span.time
{
    width: 50px;
}
.list span.description
{
    width: 250px;
}
.list span.site
{
    width: 100px;
}
.list
{
    border-bottom: 1px solid #DEDEDE;
    padding: 0.4em;
    background-color: #EFEFEF;
    color: #46464B;
}
.list.open-group-child
{
    background-color: #D6D7D7;
    color: #46464B;
    border-bottom-color: #EFEFEF;
}
.list.open-group-parent
{
    background-color: #787D7D;
    color: #FFFFFF;
    border-bottom-color: #787D7D;
    font-weight: bold;
}
.list.highlighted
{
    background-color: #2AD8FE;
    color: #46464B;
    border-bottom-color: #2AD8FE;
    font-weight: bold;
}
.list.active
{
    color: #BD2F24;
}
.list.inactive
{
    color: #AAABAB;
}
.list .status-icon.alarm
{
    background: url("/Content/images/sym_gardio_alarm_27x18.png") no-repeat top left;
}
.list .status-icon.armed
{
    background: url("/Content/images/sym_gardio_armed_27x18.png") no-repeat top left;
}
.list .status-icon.on
{
    background: url("/Content/images/sym_gardio_on_27x18.png") no-repeat top left;
}
/*
.list.open-group-parent .status-icon.alarm
{
    background: url("/Content/images/sym_gardio_alarm_parent_27x18.png") no-repeat top left;
}
.list.open-group-child .status-icon.armed
{
    background: url("/Content/images/sym_gardio_armed_child_27x18.png") no-repeat top left;
}
.list.open-group-child .status-icon.on
{
    background: url("/Content/images/sym_gardio_on_child_27x18.png") no-repeat top left;
}

.list.highlighted .status-icon.alarm
{
    background: url("/Content/images/sym_gardio_alarm_normal_27x18.png") no-repeat top left;
}
.list.highlighted .status-icon.armed
{
    background: url("/Content/images/sym_gardio_armed_normal_27x18.png") no-repeat top left;
}
.list.highlighted .status-icon.on
{
    background: url("/Content/images/sym_gardio_on_normal_27x18.png") no-repeat top left;
}
*/
.list .status-icon.in-use
{
    background: url("/Content/images/sym_activate-rule.png") no-repeat top left;
}
.list .status-icon.in-use
{
    background: url("/Content/images/sym_deactivate-rule.png") no-repeat top left;
}

/*.list.open-group-parent .folder-icon { background: url("/Content/images/list_collapse.gif") no-repeat top left; }*/

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

fieldset
{
    margin: 1em 0;
    padding: 1em;
    border: 1px solid #DADADA;
}

legend
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
    color: #464C4D;
}

input[type="text"], input[type="email"]
{
    width: 200px;
    border: 1px solid #DADADA;
}

input[type="password"]
{
    width: 200px;
    border: 1px solid #DADADA;
}

input[type="tel"]
{
    border: 1px solid #DADADA;
}

/* BOTTOM 
----------------------------------------------------------*/

#bottom
{
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
}

/* FILTERS
----------------------------------------------------------*/

#filters
{
    margin: 0px 34px;
    padding: 0 16px;
    color: #FFFFFF;
    height: 35px;
    background: url("/Content/images/box_filter_bg.gif");
    min-width: 850px;
}

#filters .filter-button
{
    margin-right: 4px;
}

.filter-separation
{
    float: left; /*padding: 5px;*/
    margin: 0px 16px;
}

.filter-description
{
    float: left; /*padding: 5px;*/
    margin-right: 4px;
    margin-top: 10px;
    font-weight: bold;
}

#bottom-fade-top
{
    height: 10px;
    margin: 0 34px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(239,239,239,0)), to(rgba(239,239,239,1))); /* Safari 4-5, Chrome 1-9 */
    background: -webkit-linear-gradient(top, rgba(239,239,239,0), rgba(239,239,239,1)); /* Safari 5.1, Chrome 10+ */
    background: -moz-linear-gradient(top, rgba(239,239,239,0), rgba(239,239,239,1)); /* Firefox 3.6+ */
    background: -ms-linear-gradient(top, rgba(239,239,239,0), rgba(239,239,239,1)); /* IE 10 */
    background: -o-linear-gradient(top, rgba(239,239,239,0), rgba(239,239,239,1)); /* Opera 11.10+ */
}

/* Custom buttons
----------------------------------------------------------*/

.button-component
{
    vertical-align: -5px;
}

.filter-button.filter-active
{
    background: url("/Content/images/btn_filter_bg.gif") repeat-x left;
}

.rule-menu-button
{
    background: url("/Content/images/btn_filter_bg.gif") repeat-x left;
    display: inline-block;
    height: 19px;
    color: #FFFFFF;
}

.composite-button
{
    display: inline-block;
    height: 19px;
    margin-top: 8px;
    cursor: pointer;
}

#logout-button-top
{
    margin-bottom: -14px;
}

.gardio-button
{
    display: inline-block;
    color: white !important;
    padding: 2px 8px 4px 8px;
    margin-top: 4px;
    text-decoration: none;
    font-family: Tahoma, Arial, Helvetica, Sans-Serif;
    font-weight: bold;
    cursor: pointer;
    border: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
}

a.gardio-button
{
    height: 16px;
    padding: 3px 8px 3px 8px;
}

.gardio-button.red
{
    background-color: #E40101;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,3,3,1)), to(rgba(202,0,0,1))); /* Safari 4-5, Chrome 1-9 */
    background: -webkit-linear-gradient(top, rgba(255,3,3,1), rgba(202,0,0,1)); /* Safari 5.1, Chrome 10+ */
    background: -moz-linear-gradient(top, rgba(255,3,3,1), rgba(202,0,0,1)); /* Firefox 3.6+ */
    background: -ms-linear-gradient(top, rgba(255,3,3,1), rgba(202,0,0,1)); /* IE 10 */
    background: -o-linear-gradient(top, rgba(255,3,3,1), rgba(202,0,0,1)); /* Opera 11.10+ */
}

.gardio-button.blue
{
    background-color: #51AFDA;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(102,192,231,1)), to(rgba(32,135,189,1))); /* Safari 4-5, Chrome 1-9 */
    background: -webkit-linear-gradient(top, rgba(102,192,231,1), rgba(32,135,189,1)); /* Safari 5.1, Chrome 10+ */
    background: -moz-linear-gradient(top, rgba(102,192,231,1), rgba(32,135,189,1)); /* Firefox 3.6+ */
    background: -ms-linear-gradient(top, rgba(102,192,231,1), rgba(32,135,189,1)); /* IE 10 */
    background: -o-linear-gradient(top, rgba(102,192,231,1), rgba(32,135,189,1)); /* Opera 11.10+ */
}

.gardio-button.gray
{
    background-color: #353A3A;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(63,68,69,1)), to(rgba(30,33,34,1))); /* Safari 4-5, Chrome 1-9 */
    background: -webkit-linear-gradient(top, rgba(63,68,69,1), rgba(30,33,34,1)); /* Safari 5.1, Chrome 10+ */
    background: -moz-linear-gradient(top, rgba(63,68,69,1), rgba(30,33,34,1)); /* Firefox 3.6+ */
    background: -ms-linear-gradient(top, rgba(63,68,69,1), rgba(30,33,34,1)); /* IE 10 */
    background: -o-linear-gradient(top, rgba(63,68,69,1), rgba(30,33,34,1)); /* Opera 11.10+ */
}

.gardio-button.disabled
{
    color: #EFEFEF !important;
    background-color: #797D7D;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(121,125,125,1)), to(rgba(121,125,125,1))); /* Safari 4-5, Chrome 1-9 */
    background: -webkit-linear-gradient(top, rgba(121,125,125,1), rgba(121,125,125,1)); /* Safari 5.1, Chrome 10+ */
    background: -moz-linear-gradient(top, rgba(121,125,125,1), rgba(121,125,125,1)); /* Firefox 3.6+ */
    background: -ms-linear-gradient(top, rgba(121,125,125,1), rgba(121,125,125,1)); /* IE 10 */
    background: -o-linear-gradient(top, rgba(121,125,125,1), rgba(121,125,125,1)); /* Opera 11.10+ */
}

/* TABLE
----------------------------------------------------------*/

table
{
    border-collapse: collapse;
}

table td
{
    padding: 5px;
}

table th
{
    padding: 6px 5px;
    text-align: left;
}

/* NUMPAD  
----------------------------------------------------------*/

#numpad
{
    background-color: #EFEFEF;
}

#numpad-head
{
    text-align: center;
}

#numpad-button-container
{
    width: 162px;
    height: 216px;
    margin: 0 auto 10px auto;
}

.asterisk
{
    color: #AAA;
    font-size: 2em;
    display: inline-block;
}

.asterisk.number-represented
{
    color: #000;
}

.numpad-button
{
    width: 47px;
    height: 30px;
    font-size: 2em;
    margin: 2px;
    padding: 20px 3px 0 0;
    float: left;
    background-color: #3C4142;
    background: url("/Content/images/btn_keypad-number_normal.png") no-repeat;
    text-align: right;
    color: #FFFFFF;
    cursor: pointer;
}

#clear-button
{
    background-color: #3C4142;
    background: url("/Content/images/btn_keypad-erase_normal.png") no-repeat;
}

.numpad-button.numpad-whitespace
{
    visibility: hidden;
}

.dialog-head
{
    margin-bottom: 10px;
}

.dialog-site
{
    font-weight: bold;
}

.dialog-user
{
    font-weight: bold;
}

/* MISC  
----------------------------------------------------------*/

.clear
{
    clear: both;
    visibility: hidden;
}

.error
{
    color: Red;
}

#selected-panel
{
    background: url("/Content/images/box_edit.png");
    padding: 30px 30px 20px 30px;
    width: 330px;
    height: 530px;
    float: right;
    overflow: auto;
    color: #FFFFFF;
}

#selected-panel h2
{
    color: #5FD6FA;
    margin: 0;
}

#selected-panel h2.user-name
{
    font-weight: normal;
}

#selected-panel h3
{
    color: #AAABAB;
    margin-bottom: 15px;
    display: inline-block;
}

#selected-panel #edit-name
{
    display: inline;
    float: none;
}

#selected-panel .editInProgress
{
    background-color: #3C4142;
}

#selected-panel .editInnerBox
{
    padding: 10px;
}

#selected-panel a
{
    display: block;
    color: #C3EDFF;
    float: left;
}

#selected-panel .entity
{
    display: inline-block;
    padding: 10px 5px 5px 5px;
    clear: left; /*overflow:hidden;*/
    width: 300px;
}

#selected-panel .editProps
{
    display: inline-block;
    clear: left;
    width: 300px;
    margin-top: 20px;
}

#selected-panel .createProps
{
    display: inline-block;
    clear: left;
    width: 300px;
}

#selected-panel .category
{
    margin-bottom: 10px;
}

#selected-panel input
{
    display: block;
}

#selected-panel select
{
    display: block;
    margin-bottom: 20px;
}

#selected-panel span
{
    display: block;
}

#selected-panel .entity-name
{
    float: left;
    display: block;
    width: 100px;
    margin-right: 5px;
}

#selected-panel .entity-value
{
    float: left;
    display: block;
    max-width: 300px;
    margin-right: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#selected-panel span.entity-value
{
    font-weight: bold;
}

#selected-panel .add
{
    display: inline-block;
    float: none;
}

#selected-panel .verify-contact-detail
{
    margin-top: 10px;
}

#selected-panel .verify-contact-detail .verification-code
{
    display: block;
    width: 32px;
    float: left;
}

.user-image-cell
{
    background: url("/Content/images/gardio_avatar_200x150.png") no-repeat top center;
    display: inline-block; /*background: url("/Content/images/box_user_active_unselected.png");*/
    height: 160px;
    width: 160px;
    color: #FFFFFF;
}

.user-image-cell.selected
{
    color: #4C4C4C;
}

.user-image-cell .user-selection-overlay
{
    background: url("/Content/images/box_user_active_unselected.png");
}

.user-image-cell.selected .user-selection-overlay
{
    background: url("/Content/images/box_user_active_selected.png");
}

.user-image-cell.inactive .user-selection-overlay
{
    background: url("/Content/images/box_user_inactive_unselected.png");
}

.user-image-cell.inactive.selected .user-selection-overlay
{
    background: url("/Content/images/box_user_inactive_selected.png");
}

/*
.user-image-cell .user-image
{
    position: relative;
    height: 134px;
}
*/
.user-image-cell .user-name
{
    position: relative;
    top: -26px;
    left: 10px;
}

.site-panel
{
    margin-left: 124px;
    margin-bottom: 45px;
}

.alarm-unit-button-container {
    margin-left: 124px;
}

#logEntry .site-panel {
    margin-left: 0px;
}

.site-panel .alarm-unit-active
{
    color: #1E8BC4;
}

.site-panel .alarm-unit-inactive
{
    color: #797D7D;
}

.site-panel .alarm-unit-attention
{
    color: #BD2F24;
}

.horisontal-separator
{
    background: url("/Content/images/misc_horisontal-separator.gif") repeat-x left;
    height: 30px;
}

/* Styles for validation helpers
-----------------------------------------------------------*/

.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/

.display-label, .editor-label, .display-field, .editor-field
{
    margin: 0.5em 0;
}

/* Settings
----------------------------------------------------------*/

.alarm-site-information-group
{
    padding: 6px;
}

.alarm-site-information-group.editing
{
    background-color: #DADADA;
    margin-bottom: 6px;
}

.alarm-site-information-entity
{
    margin-bottom: 20px;
    clear: left;
}
.alarm-site-information-entity-left
{
    width: 110px;
    float: left;
}
.alarm-site-information-entity-right
{
    width: 280px;
    overflow: hidden;
    float: left;
}
.alarm-site-information-entity-description
{
    margin-left: 400px;
    max-width: 350px;
}

.alarm-site-information-entity-description h4, .alarm-site-information-entity-description p
{
    margin-top: 0;
}

.alarm-site-information-entity .option
{
    display: none;
}

.alarm-site-information-entity .setting
{
    float: left;
    margin-right: 5px;
    font-weight: bold;
}

.alarm-site-information-entity .edit
{
    display: block;
    color: #1E8BC4;
    float: left;
}

.alarm-site-information-entity .option .alarm-site-name
{
    width: 246px;
}

.alarm-site-information-entity .option .alarm-site-phone-number
{
    width: 246px;
}

.alarm-site-information-entity .option .alarm-site-street-address
{
    width: 246px;
    margin-bottom: 2px;
}

.alarm-site-information-entity .option .alarm-site-zip-code
{
    width: 80px;
}

.alarm-site-information-entity .option .alarm-site-city
{
    width: 160px;
}

.alarm-site-information-entity .option .alarm-unit-secret
{
    width: 246px;
}

.alarm-site-information-entity .option .alarm-unit-free-text-info
{
    width: 240px;
}

.loading
{
    color: #797D7D;
}

/*** Misc ***/

.minor-note
{
    color: Gray;
    font-style: italic;
}

.note
{
    font-style: italic;
}

.major-note
{
    font-style: italic;
    font-weight: bold;
}

.center-text
{
    text-align: center;
}

.code
{
    font-family: "courier new", courier, monospace;
}

.site-panel-settings .validation
{
    display: none;
    margin-top: 5px;
    margin-bottom: 10px;
}

.site-panel-settings .invalid
{
    border: 1px solid #BD2F24;
    background-color: #FFE4E2;
}

#logEntry .toggle-settings
{
    display: none;
    visibility: hidden;
}

#mainPanel
{
    margin-left: 450px;
}

#log-content
{
    padding-bottom: 45px;
}

#log-scroll
{
    float: left;
    width: 445px;
    overflow: auto;
    margin-bottom: 10px;
}

#log-scroll.fixed {
    position: fixed;
    top: 10px;
}

#userList
{
    float: left;
    margin-right: 400px;
    display: inline-block;
    min-width: 320px;
    height: 0;
}

#users-content
{
    display: inline-block;
    min-height: 450px;
}

.mobile-layout
{
    display: none;
}

.mobile-device-helper
{
    display: none;
}

.content-block {
    display: inline-block;
    width: 100%;
    max-width: 28em;
    margin-right: 3em;
    vertical-align: top;
}

.content-block-separator {
    width: auto;
    margin: 1.1em 3em 1.1em 0;
    padding-top: 2px;
    text-align: center;
    font-style: italic;
    color: gray;
}

.content-block input[type="text"], .content-block input[type="email"], .content-block input[type="password"] {
    width: 99%;
}

.content-block input[type="submit"] {
    float: right;
}

.installation-table td {
    padding-right: 1.5em;
    padding-bottom: 1em;
}

.status .icon {
    width: 27px;
    height: 18px;
    background: url("/Content/images/sym_gardio_unknown_27x18.png") no-repeat top left;
}

.status .icon.none
{
    background: none;
}
.status .icon.alarm, .status .icon.panic
{
    background: url("/Content/images/sym_gardio_alarm_27x18.png") no-repeat top left;
}
.status .icon.armed
{
    background: url("/Content/images/sym_gardio_armed_27x18.png") no-repeat top left;
}
.status .icon.disarmed, .status .icon.on
{
    background: url("/Content/images/sym_gardio_on_27x18.png") no-repeat top left;
}
.status .icon.unknown
{
    background: url("/Content/images/sym_gardio_unknown_27x18.png") no-repeat top left;
}
.status .icon.large.alarm, .status .icon.large.panic
{
    background: url("/Content/images/sym_gardio_alarm_114x77.png") no-repeat top left;
}
.status .icon.large.armed
{
    background: url("/Content/images/sym_gardio_armed_114x77.png") no-repeat top left;
}
.status .icon.large.disarmed, .status .icon.large.on
{
    background: url("/Content/images/sym_gardio_on_114x77.png") no-repeat top left;
}
.status .icon.large.unknown
{
    background: url("/Content/images/sym_gardio_unknown_114x77.png") no-repeat top left;
}

.attention {
    color: #BD2F24;
    font-weight: bold;
}

@media only screen and (max-width: 860px)
{
    .mobile-layout
    {
        display: block;
    }

    .mobile-device-helper
    {
        display: inline-block;
    }

    body
    {
        min-width: 320px;
    }

    .page
    {
        margin: 0;
    }

    .secondary-content
    {
        display: none;
    }

    #header
    {
        height: auto;
    }

    #title-logo
    {
        display: none;
    }

    #logindisplay
    {
        display: none;
    }

    #menu-container
    {
        margin: 0;
        clear: both;
    }

    #image-space
    {
        margin: 0 6px;
    }
    
    .site-panel {
        margin-left: 0;
    }

    .alarm-unit-settings-error
    {
        clear: both;
    }

    .actionPanelSensorFeed
    {
        margin: 0;
    }

    .alarm-site-information-entity-right
    {
        width: 180px;
        overflow: auto;
    }

    .alarm-site-information-entity-description
    {
        clear: both;
        margin-left: 110px;
        padding-top: 1em;
    }

    #log-content
    {
        margin: 0 6px;
    }

    #log-content #image-space
    {
        margin: 0;
    }

    #log-scroll
    {
        overflow: visible;
        width: 0;
    }

    #selectable
    {
        width: 310px;
    }

    #selectable .list span.day
    {
        width: 50px;
    }

    #selectable .list span.time
    {
        width: 45px;
    }

    #selectable .list span.description
    {
        width: 115px;
    }

    #mainPanel
    {
        margin-left: 0;
    }

    #users-content
    {
        display: block;
        min-height: 0px;
    }

    #userList
    {
        width: auto;
        height: auto;
        margin: 0 0 34px 0;
    }

    #userListProps
    {
        margin: 0 6px;
    }

    #selected-panel
    {
        background: none;
        background-color: #46464B;
        padding: 6px;
        width: auto;
        height: auto;
        float: none;
        margin: 6px 6px 34px 6px;
        overflow: hidden;
    }

    .content-block {
        display: block;
    }

    .content-block-separator 
    {
        width: 28em;
        margin: 1.1em 0 1.1em 0;
    }
    
    .installation-table td 
    {
        min-width: 0 !important;
    }
}

/* Gardio Web 1.5 */

.control-panel
{
    border: 1px solid #DADADA;
    margin-bottom: 3em;
}

.control-panel h2 {
    margin: 12px;
}

.control-panel .hgroup {
    padding: 12px;
}

.control-panel .hgroup + .hgroup {
    padding-top: 0;
}

.control-panel .hgroup h3 {
    margin: 0 0 6px 0;
}

.control-panel .hgroup h4 {
    margin: 0;
}

.control-panel > p {
    margin: 12px 12px 0 12px;
}

.control-group {
    padding: 12px 4em 0 12px;
}

.control-group .content p:first-of-type, .control-group .content ul:first-of-type {
    margin-top: 0;
}

.control-group .content p:last-child, .control-group .content ul:last-child {
    margin-bottom: 0;
}

.control-group .content ul, .control-group .content ol {
    padding: 0;
    list-style: none;
}

.control-group .content input[type="text"], .control-group .content input[type="email"], .control-group .content input[type="password"] {
    width: 20em;
}

.control-group .content input.phonenumber {
    width: 11em;
}

.control-group .content input.pin {
    width: 3em;
}

.control-group .content li 
{
    list-style-type: none;
    min-height: 18px;
    padding-left: 22px;
    margin-bottom: 4px;
}

.control-group .display .data {
    font-weight: bold;
}

.control-group .display .description {
    display: inline-block;
}

.control-group .separator {
    height: 6px;
}

li.email {
    background: url(/Content/images/email.png) top left no-repeat;
}

li.mobile {
    background: url(/Content/images/mobile_phone.png) top left no-repeat;
}

li.phone {
    background: url(/Content/images/telephone.png) top left no-repeat;
}

.control-group .name 
{
    float: left;
    width: 14em;
    margin-bottom: 12px;
}

.control-group .content {
    float: left;
    width: 28em;
    margin-bottom: 12px;
}

.control-group .edit {
    float: right;
    width: 0;
}

.control-group.editing {
    background-color: #DADADA;
    padding-right: 12px;
}

.control-group.editing .content {
    width: 23em;
}

.control-group .content label 
{
    display: inline-block;
    min-width: 7em;
}

.control-group .content label.block {
    display: block;
    margin-bottom: .3em;
}

.control-group .content .change label {
    font-weight: bold;
}

label.block + ol, label.block + ul {
    margin-top: 0;
}

ul.topics {
    margin-bottom: 2em;
}

li.topic {
    margin-bottom: 1em;
}

@media only screen and (max-width: 860px) 
{
    #content {
        padding: 1em;
    }

    .control-panel 
    {
        width: 100%;
    }

    .control-group .name {
        width: 10em;
    }

    .control-group .content {
        width: 20em;
    }

    .control-group .content li .data {
        max-width: 15em;
        overflow: hidden;
        display: inline-block;
    }

    .alarm-unit-button-container {
        margin-left: 0;
        clear: both;
        padding-top: 6px;
    }

    .alarm-site-information-entity .option .alarm-site-name {
        width: 165px;
    }

    .alarm-site-information-entity .option .alarm-site-phone-number {
        width: 165px;
    }

    .alarm-site-information-entity .option .alarm-site-street-address {
        width: 165px;
    }

    .alarm-site-information-entity .option .alarm-site-zip-code {
        width: 45px;
    }

    .alarm-site-information-entity .option .alarm-site-city {
        width: 105px;
    }

    .alarm-site-information-entity .option .alarm-unit-secret {
        width: 165px;
    }

    .alarm-site-information-entity .option .alarm-unit-free-text-info {
        width: 165px;
    }

    .gardio-button, a.gardio-button {
        min-height: 30px;
        min-width: 44px;
        line-height: 30px;
        text-align: center;
        padding: 0 12px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
}

/* End Gardio Web 1.5 */

#demo-link {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    color: #ffffff;
    background-color: #fa9807;
    border-color: #f49100;
    padding: 5px 10px;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 3px;
    padding: 1px 5px;
    text-decoration: none;
    box-sizing: border-box;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}