/* Minification failed. Returning unminified contents.
(2433,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '#margin-left'
(2865,62): run-time error CSS1054: JavaScript error in expression property: Variable has not been declared: cellSpacing
 */
.bg-color-blue{background-color:#2d89f0 !important;}
.bg-color-blueLight{background-color:#44a3aa !important;}
.bg-color-blueDark{background-color:#045097 !important;}
.bg-color-green{background-color:#01a31c !important;}
.bg-color-greenLight{background-color:#99b433 !important;}
.bg-color-greenDark{background-color:#005200 !important;}
/*.bg-color-red{background-color:#bc1c48 !important;}*/
.bg-color-red{background-color:#D22737 !important;}

.bg-color-yellow{background-color:#ffc40d !important;}
.bg-color-orange{background-color:#e3a21a !important;}
.bg-color-orangeDark{background-color:#d85237 !important;}
.bg-color-pink{background-color:#c3325f !important;}
.bg-color-pinkDark{background-color:#791868 !important;}
.bg-color-purple{background-color:#603cba !important;}
.bg-color-darken{background-color:#1c1c1c !important;}
.bg-color-white{background-color:#ffffff !important;}
.bg-color-grey{background-color:#999 !important;}

.form .metro-radio,
.form .metro-check{cursor:pointer;cursor:hand;position:relative;}

.form .metro-radio span,
.form .metro-check span{position:relative;}

.form .metro-radio input[type=radio],
.form .metro-radio input[type=radio]+span,
.form .metro-radio input[type=radio]+span::before,
.form .metro-radio input[type=radio]+span::after
{
    vertical-align:middle;
    display:inline-block;
}
    
.form .metro-radio input[type=radio] {
    position:absolute;
    filter:alpha(opacity=0);
    -moz-opacity:0;
    opacity:0;
    width: 25px;
}



.form .metro-radio input[type=radio]+span{font-weight:normal;}
.form .metro-radio input[type=radio]+span::before{content:"\2022";text-indent:-9999px;width:24px;height:24px;background:#cfcfcf;margin-right:10px;border-radius:50%;}
.form .metro-radio input[type=radio]:checked+span::after{text-indent:-9999px;position:absolute;content:"\2022";background:#212121;z-index:1000;width:12px;height:12px;border-radius:50%;left:6px;top:6px;}
.form .metro-radio input[type=radio]:checked+span::before{background:#d1d1d1;}
.form .metro-radio input[type=radio]:not(:checked):disabled+span::before{cursor:default;background:#868686;}
.form .metro-radio input[type=radio]:disabled+span::before{cursor:default;background:#868686;}
.form .metro-radio input[type=radio]:disabled+span::after{background:#484848;}

.form .metro-radio:hover input[type=radio]:not(:checked):disabled+span::before{background:#868686;}
.form .metro-radio:hover input[type=radio]:not(:checked)+span::before{background:#dfdfdf;}
.form .metro-radio:hover input[type=radio]:checked+span::before{background:#dfdfdf;}
.form .metro-radio:hover input[type=radio]:checked:disabled+span::before{background:#868686;}
.form .metro-radio:hover input[type=radio]:checked:disabled+span::after{background:#484848;}
.form .metro-radio:hover input[type=radio]:checked+span::after{background:#000000;}

.form .metro-check input[type=checkbox],
.form .metro-check input[type=checkbox]+input+span,
.form .metro-check input[type=checkbox]+input+span::before,.form .metro-check input[type=checkbox]+input+span::after{vertical-align:middle;display:inline-block;}
.form .metro-check input[type=checkbox]{position:absolute;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}
.form .metro-check input[type=checkbox]+input+span{font-weight:normal;}
.form .metro-check:hover input[type=checkbox]+input+span::before{background:#e1e1e1;}
.form .metro-check:hover input[type=checkbox]:checked+input+span::before{background:#e1e1e1;}
.form .metro-check input[type=checkbox]+input+span::before{content:"\2714";text-indent:-9999px;width:22px;height:22px;background:#d1d1d1;margin-right:10px;}


.form .metro-check input[type=checkbox]:checked+input+span::after
{
    position:absolute;
    content:"\00d7";
    color:#202020;
    z-index:1000;
    font-size:20px;
    font-weight:bold;
    font-family:Tahoma;
    left:3px;
    top:-1px;
    padding:0px;
}

.as-block {
display: block;
float: none !important;
}

.form .metro-check input[type=checkbox]:checked+input+span::before{background:#d1d1d1;}
.form .metro-check input[type=checkbox]:not(:checked):disabled+input+span::before{cursor:default;background:#767676;}
.form .metro-check input[type=checkbox]:disabled+input+span::before{cursor:default;background:#767676;}
.form .metro-check input[type=checkbox]:disabled+input+span::after{color:#4c4c4c;}
.form .metro-check:hover input[type=checkbox]:disabled+input+span::before{cursor:default;background:#767676;}

.form .metro-form-control
{
    min-height: 65px;
}

.form .metro-form-control label{font-size:11pt;}

.form label.metro-radio, .form label.metro-check
{
    margin-top: 8px;
    margin-right: 20px;
}

.form .metro-form-control .metro-text-box
{
    position:relative; 
    width:100%;
}

.form .metro-form-control select 
{
    background:#eeeeee; 
    border:2px #eeeeee solid;
    color:#333333;
    border-radius:0;
    font-size:11pt;
    width: 95%;
    outline:0;
    display: inline-block;    
    padding: 4px 8px;
    margin: 5px 0px;
}

.form .metro-form-control .metro-text-box input[type=text],
.form .metro-form-control .metro-text-box input[type=number],
.form .metro-form-control .metro-text-box input[type=password],
.form .metro-form-control .metro-text-box textarea
{
    background: #eeeeee; 
    border: 2px #eeeeee solid;
    color: #333333;
    border-radius: 0;
    font-size: 11pt;
    padding: 5px 8px;
    outline: 0;
    display: inline-block;
    width: 95%;
}

.form .metro-form-control .metro-text-box input[type=text].hasDatepicker {
    width: 150px !important;
}

.form .metro-form-control input[type=text].medium,
.form .metro-form-control input[type=number].medium
{
    width: 250px;
}

.form .metro-form-control input[type=text].small,
.form .metro-form-control input[type=number].small
{
    width: 125px;
}

.form .metro-form-control label.required:after
{
    content: " *";
    color: Red;
}

.form .metro-form-control .counter {
    position: relative;
    top: 3px;
    right: 42px;
    color: #777;
    width: 46px;
    float: right;
    text-align: right;
}

.form .metro-form-control .exceeded {
    color: Red;
}


.form .metro-form-control .metro-text-box input[type=text]:focus,
.form .metro-form-control .metro-text-box input[type=password]:focus,
.form .metro-form-control .metro-text-box textarea:focus,
.form .metro-form-control .metro-text-box input[type=text]:not(:focus):not(:disabled):hover,
.form .metro-form-control .metro-text-box input[type=text]:not(:focus):not(:read-only):hover,
.form .metro-form-control .metro-text-box input[type=password]:not(:focus):not(:read-only):hover
{

    border-color: #dedede; 
    color:#000;
}

.form .metro-form-control .metro-text-box input[type=text]:disabled,
.form .metro-form-control .metro-text-box input[type=text]:read-only,
.form .metro-form-control .metro-text-box textarea:read-only
{
    background: #fff;
    border-color: #eeeeee;
}

.form .metro-form-control .metro-text-box .helper
{
    display: block;
    cursor:pointer;
    z-index:100;
    color: #777777;
    margin-bottom: 15px;
}

.form .metro-form-control .metro-text-box input[type=text]+.helper::before
{
    display:inline-block;
    position:absolute;
    width:24px;
    height:24px;
    background:#ccc;
    top:3px;
    right:4px;
    visibility:hidden;
    font-size:15pt;
    font-weight:bold;
    color:#000;
    cursor:pointer;
    text-align:center;
 }
 
.form .metro-form-control .metro-text-box input[type=text]:focus+.helper::before
{
    visibility:visible;
}

.form .metro-form-control .metro-text-box:hover input[type=text]+.helper:before
{
    background: #dedede;
    border-color: #dedede;
}

.form .metro-form-control .metro-text-box:action input[type=text]+.helper:before
{
    background:#000 !important;
}

.form .metro-form-control label.error
{
    padding-bottom: 15px;
}


.metro .dashboard
{
    margin-top: 20px;
    margin-bottom: 20px;
    min-height: 160px;
}

.metro .tile {
    display:block;
    width:150px;
    height:150px;
    color:#fff;
    margin:5px;
    float:left;
    position:relative;
    cursor:pointer;
    overflow:hidden;
    text-decoration:none;
    position:relative;
    box-sizing:border-box;
    font-family:'Open Sans',sans-serif;
}

.metro .tile:hover {
    outline:3px #ccc solid;
}

.metro .tile .tile-title {position:absolute;font-size:19px;height:25px;color:#7ac479;text-align:left;margin:10px;color:#fff;}
.metro .tile .tile-dialog-large { position:absolute; top: 32px; text-align:center; background-color: #fff; width: 100%; height: 85px; opacity:1; filter:alpha(opacity=100);}
.metro .tile .tile-dialog-large p { color: #000; padding: 0px; margin-top: 10px; margin-bottom: 10px; font-weight:bold; }
.metro .tile .tile-dialog-large input { height: 32px; font-size: smaller; }


.metro .metro-sections
{
    height: auto;
    position: relative;
    overflow: hidden;
    margin-left: -5px;
}


.metro .metro-sections .metro-section{float:left;height:auto;position:relative;}
.metro .metro-sections .metro-section h2,
.metro .metro-sections .metro-section .metro-section-title{color:#000;font-size:18pt;}

.metro .metro-sections .metro-section >a{text-decoration:none;}
.metro .metro-sections .metro-section >a h2{font-weight:500;font-size:22pt;}
.metro .metro-sections .metro-section >a h2 small{margin-left:10px;font-weight:normal;font-size:12pt;color:#1e1e1e;}
.metro .metro-sections .metro-section >h2 small{margin-left:10px;font-weight:normal;font-size:12pt;color:#1e1e1e;}
.metro .metro-sections .metro-section .next-section{position:absolute;top:0px;right:-40px;background:url(/img/next.png);height:24px;width:24px;}
.metro .metro-sections .metro-section .next-section.back{background:url(/img/back.png);}
.metro .metro-sections .metro-section .tile.tile-active-right{-ms-transform:perspective(600px) rotatey(5deg);-o-transform:perspective(600px) rotatey(5deg);-moz-transform:perspective(600px) rotatey(5deg);-webkit-transform:perspective(600px) rotatey(5deg);transform:perspective(600px) rotatey(5deg);}
.metro .metro-sections .metro-section .tile.tile-active-left{-ms-transform:perspective(600px) rotatey(-5deg);-o-transform:perspective(600px) rotatey(-5deg);-moz-transform:perspective(600px) rotatey(-5deg);-webkit-transform:perspective(600px) rotatey(-5deg);transform:perspective(600px) rotatey(-5deg);}

.metro .tile .tile-icon-large{margin-top:20px;margin-left:0px;display:table-cell;vertical-align:middle !important;text-align:center;width:150px;padding-top:20px;}
.metro .tile .tile-icon-large img{width:96px;height:96px;}

.metro .tile .tile-icon-cover{
    vertical-align: middle !important;
    text-align: center;
    width: 100%;
    padding-top: 30px;
}

.metro .tile .tile-icon-cover img{max-width:90px;height:90px;}
.metro .tile .tile-icon{position:absolute;bottom:10px;left:20px;width:32px;height:32px;}
.metro .tile .tile-icon img{width:32px;height:32px;}
.metro .tile .tile-label{position:absolute;bottom:10px;left:20px;font-size:9pt;color:#fff;font-family:Tahoma,sans-serif,serif;z-index:100;}
.metro .tile .tile-caption{position:absolute;top:0px;left:0px;width:100%;padding:2px 10px;border-bottom:1px #ff4500 solid;background:#fff;font-size:14px;color:#000;font-size:10px;text-align:right;}
.metro .tile .tile-header{font-size:19px;color:#7ac479;text-align:left;margin:20px;}
.metro .tile .tile-counter{position:absolute;right:10px;bottom:5px;font-size:12pt;font-weight:bold;}
.metro .tile .tile-text{text-align:left;margin-top:10px;margin-left:20px;margin-right:20px;font-size:12px;}
.metro .tile .tile-text h2,
.metro .tile .tile-text p{color:#fff;margin:0;}
.metro .tile .tile-text h2{font-family:'Open Sans',sans-serif;font-size:20pt;font-weight:200;}
.metro .tile-text p{font-size:10pt;line-height:18px;font-family:Tahoma,sans-serif,serif;}

.metro .metro-sections .metro-section .tile .tile-image{padding:0px;}
.metro .metro-sections .metro-section .tile .tile-image img{min-height:100%;min-width:100%;max-height:100%;max-width:100%;}
.metro .metro-sections .metro-section .tile .tile-image-message .image{width:75px;height:75px;margin:20px 10px 20px 20px;float:left;}
.metro .metro-sections .metro-section .tile .tile-image-message .image img{width:100%;height:100%;}
.metro .metro-sections .metro-section .tile .tile-image-message .message{float:left;width:60%;margin:10px 0;}
.metro .metro-sections .metro-section .tile .tile-image-message .message .title{font-family:'Open Sans',sans-serif;font-size:20pt;font-weight:200;}
.metro .metro-sections .metro-section .tile .tile-image-message .message .text{font-size:10pt;line-height:16px;font-family:Tahoma,sans-serif,serif;}
.metro .metro-sections .metro-section .tile .tile-calendar-event .event-date{width:80px;height:80px;margin:20px 10px 20px 20px;float:left;padding:0;}
.metro .metro-sections .metro-section .tile .tile-calendar-event .event-date .event-date-num{font-size:55pt;font-family:"Open Sans",sans-serif,sans;font-weight:100 !important;margin:0;padding:0;line-height:50px;}
.metro .metro-sections .metro-section .tile .tile-calendar-event .event-date .event-date-month{font-size:14pt;font-family:"Open Sans",sans-serif,sans;font-weight:bold;margin:10px 0;padding:0;}
.metro .metro-sections .metro-section .tile .tile-calendar-event .event-data{float:left;width:60%;margin:15px 0;}
.metro .metro-sections .metro-section .tile .tile-calendar-event .event-data .title{font-family:'Open Sans',sans-serif;font-size:16pt;font-weight:200;}
.metro .metro-sections .metro-section .tile .tile-calendar-event .event-data .text{font-size:10pt;line-height:16px;font-family:Tahoma,sans-serif,serif;}
.metro .metro-sections .metro-section .tile .tile-text-data{margin:10px 20px;}
.metro .metro-sections .metro-section .tile .tile-text-data .title{font-family:'Open Sans',sans-serif;font-size:16pt;font-weight:200;}
.metro .metro-sections .metro-section .tile .tile-text-data .text{font-size:10pt;line-height:16px;font-family:Tahoma,sans-serif,serif;}
.metro .metro-sections .metro-section .tile .tile-text-data .text *{font-size:10pt;line-height:16px;font-family:Tahoma,sans-serif,serif;}
.metro .metro-sections .metro-section .tile .tile-image-slider{padding:0;margin:0;overflow:hidden;position:relative;width:100%;height:100%;}
.metro .metro-sections .metro-section .tile .tile-image-slider img{min-height:100%;min-width:100%;max-width:100%;top:0;left:0;}
.metro .metro-sections .metro-section .tile .tile-icon-title{text-align:left;padding-left:20px;padding-right:20px;padding-top:20px;}
.metro .metro-sections .metro-section .tile .tile-icon-title img{float:left;margin-right:20px;width:96px;height:96px;}
.metro .metro-sections .metro-section .tile .tile-icon-title span,
.metro .metro-sections .metro-section .tile .tile-icon-title h2{font-size:40pt;display:block;float:left;margin-top:20px;font-weight:200;font-family:'Open Sans',sans-serif;color:#fff;}
.metro .metro-sections .metro-section .tile .tile-overlay{position:absolute;height:50px;width:100%;z-index:1000;bottom:0;left:0px;opacity:.8;}
.metro .metro-sections .metro-section .tile .tile-overlay .tile-overlay-icon{position:absolute;left:10px;top:10px;}
.metro .metro-sections .metro-section .tile .tile-overlay .tile-overlay-icon img{width:32px;height:32px;}
.metro .metro-sections .metro-section .tile .tile-overlay .tile-overlay-text{font-size:10pt;margin:10px 50px;line-height:14px;font-family:Tahoma,sans-serif,serif;}
.metro .metro-sections .metro-section .tile .tile-overlay .tile-overlay-counter{position:absolute;font-size:11pt;font-weight:bold;right:20px;bottom:10px;}
.metro .metro-sections .metro-section .tile .tile-content-main{height:150px;position:relative;overflow:hidden;}
.metro .metro-sections .metro-section .tile .tile-content-sub{position:relative;margin:1px;height:50px;max-height:148px;padding:2px 5px;overflow:hidden;box-shadow-bottom:inset 0px 0px 3px #fff;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-content{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;min-height:100%;overflow:hidden;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-content img{width:100%;height:100%;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description{position:absolute;left:0;right:0;bottom:0;height:46px;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .text{opacity:.8;background:#1e1e1e;padding:10px;font-size:8pt;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .label{display:inline;position:absolute;width:auto;padding:4px 10px;top:-25px;left:0;font-weight:bold;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .label .stick{width:0px;height:0px;border-top:10px solid #000;border-right:10px solid transparent !important;position:absolute;display:block;z-index:100000;top:25px;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .label.label-color-blue{background:#2d89f0;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .label.label-color-blue .stick{border-top:10px solid #2d89f0 !important;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .label.label-color-green{background:#01a31c;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .label.label-color-green .stick{border-top:10px solid #01a31c !important;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .label.label-color-greenDark{background:#005200;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .label.label-color-greenDark .stick{border-top:10px solid #005200 !important;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .label.label-color-red{background:#bc1c48;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .label.label-color-red .stick{border-top:10px solid #bc1c48 !important;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .label.label-color-yellow{background:#ffc40d;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .label.label-color-yellow .stick{border-top:10px solid #ffc40d !important;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .label.label-color-orange{background:#e3a21a;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .label.label-color-orange .stick{border-top:10px solid #e3a21a !important;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .label.label-color-pink{background:#c3325f;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .label.label-color-pink .stick{border-top:10px solid #c3325f !important;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .label.label-color-purple{background:#603cba;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .label.label-color-purple .stick{border-top:10px solid #603cba !important;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .label.label-color-white{background:#ffffff;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .label.label-color-white .stick{border-top:10px solid #ffffff !important;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .label.label-color-black{background:#000000;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .label.label-color-black .stick{border-top:10px solid #000000 !important;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .label.label-color-darken{background:#1c1c1c;}
.metro .metro-sections .metro-section .tile .tile-announce .announce-description .label.label-color-darken .stick{border-top:10px solid #1c1c1c !important;}
.metro .tile.tile-double{width:310px;}
.metro .tile.tile-double .tile-icon-large{margin-top:20px;margin-left:107px;}
.metro .tile.tile-double .tile-icon-cover,
.metro .tile.tile-double .tile-icon-large{width:310px;}
.metro .tile.tile-double-vertical{height:310px;}
.metro .tile.tile-double-vertical .tile-icon-large{margin-top:20px;margin-left:107px;}
.metro .tile.tile-double-vertical .tile-icon-cover,
.metro .tile.tile-double-vertical .tile-icon-large{height:310px;}
.metro .tile.tile-triple-vertical{height:470px;}
.metro .tile.tile-triple-vertical .tile-icon-large{padding-top:187px;}
.metro .tile.tile-quadro-vertical{height:630px;}
.metro .tile.tile-quadro-vertical .tile-icon-large{padding-top:267px;}
.metro .tile.tile-triple{width:470px;}
.metro .tile.tile-triple .tile-icon-large{width:470px;}
.metro .tile.tile-quadro{width:630px;}
.metro .tile.tile-quadro .tile-icon-large{width:630px;}
.metro .tile.tile-max{width:100%;}

/*
.metro .metro-sections .metro-section.size1{width:160px !important;}
.metro .metro-sections .metro-section.size2{width:320px !important;}
.metro .metro-sections .metro-section.size3{width:480px !important;}
.metro .metro-sections .metro-section.size4{width:640px !important;}
.metro .metro-sections .metro-section.size5{width:800px !important;}
.metro .metro-sections .metro-section.size6{width:960px !important;}
    */


.switch {
  cursor: pointer;
  position: relative;
  padding-top: 6px;
  width: 56px;
}

.switch  > span {
  position: relative;
}

.switch input[type=checkbox],
.switch input[type=checkbox] + span,
.switch input[type=checkbox] + span::before,
.switch input[type=checkbox] + span::after {
    vertical-align: middle;
    display: inline-block;
    color: #fff;
    font-size: 0.9em;
    z-index: 0;
    padding-top: 2px;
}

.switch input[type=checkbox]:disabled + span {
    color: #ccc;
}

.switch input[type=checkbox] {
  position: absolute;
  display: none;
}

.switch input[type=checkbox] + span::before {
  content: "";
  width: 50px;
  height: 24px;
  outline: 2px #eee solid;
  border: 1px #fff solid;
  cursor: pointer;
  margin-left: 2px;
  position: relative;
  margin-right: -42px;
  z-index: -1;
  top: -1px;
}

.switch input[type=checkbox] + span::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 40px;
  width: 13px;
  height: 24px;
  background: #333;
  z-index: 1000;
}

.switch input[type=checkbox]:not(:checked) + span::after {

  left: 3px;
}
.switch input[type=checkbox]:not(:checked) + span::before {
  background: #ccc;
}
.switch input[type=checkbox]:disabled + span::before {
  cursor: default;
  background: #eee;
}

.switch input[type=checkbox]:disabled + span::after {
  background: #ccc;
}
.switch:hover input[type=checkbox]:not(:checked) + span::before {
  background: #ccc;
}


.switch:hover input[type=checkbox]:disabled + span::before {
  cursor: default;
  background: #eee;
}





.form .metro-form-control .metro-multi-select
{
    clear: both;
}

    .form .metro-form-control .metro-multi-select div.unassigned-total,
    .form .metro-form-control .metro-multi-select div.assigned-total
    {
        width: 45%;
        float: left;
    }

    .form .metro-form-control .metro-multi-select div.assigned-total
    {
        margin-left: 75px;
    }
    
    .form .metro-form-control .metro-multi-select select
    {
        display: none;
    }
    

.form .metro-form-control .metro-multi-select ul
{
    list-style: none;
    display: block; 
    border: solid 1px #ccc;
    height: 200px;
    padding: 0px;
    float: left;
    margin-right: 5px;
}

    .form .metro-form-control .metro-multi-select ul.list
    {
        overflow: auto;
        overflow-y: scroll;
        overflow-x: hidden;
        width: 45%;
    }

.form .metro-form-control .metro-multi-select ul li
{
    padding: 5px;
    margin: 0px;
}

    .form .metro-form-control .metro-multi-select ul li .photo
    {
        display: block;
        float: left;
        width: 27px;
        height: 27px;
        border: solid 1px #eee;
        margin-right: 5px;   
    }

        .form .metro-form-control .metro-multi-select ul li .photo img
        {
            width: 25px;
            border: solid 1px #fff;    
        }

    .form .metro-form-control .metro-multi-select ul li .name
    {
        display: block;
        margin-left: 30px;  
        padding-top: 5px;    
        height: 24px;  
    }
    


    .form .metro-form-control .metro-multi-select ul.list li:hover
    {
        cursor: pointer;
        background-color: #eee;
    }

    .form .metro-form-control .metro-multi-select ul li.selected
    {
        background-color: #eee;
    }

.form .metro-form-control .metro-multi-select ul.controls
{
    padding-top: 36px;
    width: 60px;
    height: 164px;
    text-align: center;
    border: none;
}

    .form .metro-form-control .metro-multi-select ul.controls li
    {
        margin: 0px 10px 5px 10px;
    }
/*
** DataTable Framework Styling.
*/
div.dataTables_wrapper 
{
    margin-top: 25px;
}

div.dataTables_length 
{
	position: absolute;
	top: 492px;
	left: 10px;
}

div.dataTables_length > label
{
    width: 175px;
    font-weight: normal;
    font-size: 1em;
}

div.dataTables_filter 
{
	float: right;
}

div.dataTables_info 
{
	padding: 14px 6px 6px 6px;
	float: left;
	margin-left: 0px;
	margin-bottom: 1px;
}

div.dataTables_paginate 
{
	display: none;
}

div.dataTables_length,
div.dataTables_filter,
div.dataTables_paginate 
{
	padding: 6px 1px 6px 6px;
}

div.dataTables_length
{
    display: none;
}

.dataTables_wrapper:after 
{
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
html[xmlns] .dataTables_wrapper 
{
	display: block;
}
 
* html .dataTables_wrapper 
{
	height: 1%;
}

/*
 * Table styles
 */
table
{
	width: 100%;
}

table td,
table th 
{
    padding: 2px 5px 0px 5px;
}

table td p.small
{
    font-size: 0.8em;
    padding: 0px;
    margin: 5px 0 2px 0;
    color: #777777;
    line-height: 1.4em;
}

table.subHeadings
{
    background-color:#000;
    color:#f2f2f2;
    margin:0px;
    padding:0px;
    border:none;
}

/* Header cells */
.dataTableContentPage thead th, .dataTableContentPage tbody th,
.dataTableContentModal thead th, .dataTableContentModal tbody th 
{
	text-align: left;
    font-weight: normal;
    background-color: #fff;
    padding: 9px 6px;
}

.dataTableContentPage thead th
{
    background-color: #ccc;
}

.dataTableContentPage thead th:hover
{
    cursor: pointer;
}
   
.dataTableContentPage thead th, .dataTableContentPage tbody th, .dataTableContentPage tbody td, .dataTableContentPage tbody tr.odd td
{
    border-right: 1px solid #000; 
}

.dataTableContentPage thead th:last-child
{
    border-right: 1px solid #fff;
}

.dataTableContentModal thead th, .dataTableContentModal tbody th, .dataTableContentModal tbody td, .dataTableContentModal tbody tr.odd td 
{
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
}

.dataTableContentModal thead th.expected
{
    background-color: #06455C;
}

.dataTableContentModal thead th.actual
{
    background-color: #008000;
}
	
.dataTableContentPage tbody td,
.dataTableContentModal tbody td 
{
	text-align: left;
	vertical-align: middle;
}

.dataTableContentModal tbody td 
{
    color: #E5E5E5;
}

.dataTableContentPage tbody td
{
    padding: 3px 6px;
    border-bottom: solid 1px #fff; 
}

.dataTableContentModal tbody td 
{
    background-color: #fff;
}

.dataTableContentPage tbody tr:hover
{ 
	cursor: pointer;
}

.dataTableContentPage tbody tr.odd td
{ 
	background-color: #eeeeee;
}

.dataTableContentModal tbody tr.odd td 
{
    background-color: #eeeeee;
}

.dataTableContentPage tbody tr td:last-child
{ 
    border-right: 1px solid #fff;
}

.dataTableContentPage tbody tr:hover td
{ 
    border-bottom: dotted 1px #000;
}

/* Footer cells */	
.dataTableContentPage tfoot th,
.dataTableContentModal tfoot th
{
	background: #cc0000;
	text-align: left;
}
	
.dataTableContentPage tfoot td,
.dataTableContentModal tfoot td
{
	background: #00cc00;
	text-align: center;
	font-weight: bold;
}

.dataTableContentPage td.alignCenter, .dataTableContentPage th.alignCenter,
.dataTableContentModal td.alignCenter, .dataTableContentModal th.alignCenter
{
    text-align: center;
    vertical-align: middle;
}

.dataTableContentPage td.alignCenter img,
.dataTableContentModal td.alignCenter img
{
    border: none;
    vertical-align: middle;
}

.dataTableContentPage td.alignRight, .dataTableContentPage th.alignRight,
.dataTableContentModal td.alignRight, .dataTableContentModal th.alignRight
{
    text-align: right;
    vertical-align: middle;
}

/*
* Pagination
*/
a.paginate_button,
a.paginate_active 
{
	display: inline-block;
	background-color: #fff;
	margin-left: 2px;
	text-align: center;
	padding-top: 5px;
	width: 30px;
	height: 25px;
	cursor: pointer;
	*cursor: hand;
	border: 2px solid #eeeeee;
	text-decoration: none;
}

a.paginate_active 
{
	background-color: #eeeeee;
	border: 2px solid #777777;
}

a.paginate_button_disabled 
{
	color: #777777;
}

.paging_full_numbers a:active 
{
	outline: none;
}

.paging_full_numbers a:hover 
{
	text-decoration: none;
	background-color: #eeeeee;
}

div.dataTables_paginate span>a 
{

	text-align: center;
}

/*
 * Sorting
 */
table.pretty thead th.sorting_asc 
{
	background: #ffffff url('datatable/sort_asc.png') no-repeat right center;
}

table.pretty thead th.sorting_desc 
{
	background: #ffffff url('datatable/sort_desc.png') no-repeat right center;
}

table.pretty thead th.sorting 
{
	background: #ffffff url('datatable/sort_both.png') no-repeat right center;
}


/*
** Main Content - Toolbar.
*/
.content-toolbar
{
    position: relative;
    width: 100%;
    border-right: 1px #fff solid;
    height: 45px;
}

.fixed
{
    position: fixed;
    top: 0px;
    z-index:500;
}

.employees
{
    width: 385px;
}

.content-toolbar a.toolbar-command
{
    float: left;
    margin-top: 7px;
    margin-left: 12px;
}

.content-toolbar span.divider
{
    display: block;
    float: left;
    height: 30px;
    width: 1px;
    background-color: #ffffff;
    margin-top: 8px;
    margin-left: 15px;
    margin-right: 5px;
}

.content-toolbar #toolbar-input
{
    position: relative;
    float: right;
}

#toolbar-input .advanced-search {
    position: absolute;
    top: 8px;
    left: 280px;
    height: 29px;
    width: 29px;
    margin: 0px;
    padding: 0px;
    background-color: #000000;
    border: none;
}

#toolbar-input .advanced-search:hover
{
    /*background: transparent url(datatable/advanced-search-over.png) 0px 0px no-repeat;*/
    background-color: #333333;
    cursor: pointer;
}

#toolbar-input .search-input
{
    border: none;
    width: 250px;
    margin-top: 8px;
    margin-right: 15px;  
    padding-right: 25px;
}

#g-search-button 
{
    display: inline-block;
    width: 20px;
    height: 16px;
    position: relative;
    left: -45px;
    top: 3px;
    background-image: url('datatable/search-icon.gif') ;
    background-repeat: no-repeat;
    background-position: right;
}

#g-search-button:hover
{
    cursor:pointer;
}


/*
** Command button sprites - large.
*/
a.cmd-settings, a.cmd-settings:hover
{ display: block; background: url('Buttons/cmd-buttons-sprite.png') no-repeat; margin-left: 5px;}

a.cmd-settings, a.cmd-settings:hover
{
	position: relative;
	float:right; 
	margin-top: 12px;
	margin-right: 10px;	   
}

a.cmd-search:hover { background-position: -5px -0px; width: 48px; height: 48px; }
a.cmd-refresh { background-position: -58px -0px; width: 48px; height: 48px; }
a.cmd-settings { background-position: -111px -0px; width: 48px; height: 48px; }
a.cmd-refresh:hover { background-position: -164px -0px; width: 48px; height: 48px; }
a.cmd-save:hover { background-position: -5px -53px; width: 48px; height: 48px; }
a.cmd-play { background-position: -58px -53px; width: 48px; height: 48px; }
a.cmd-delete { background-position: -111px -53px; width: 48px; height: 48px; }
a.cmd-settings:hover { background-position: -164px -53px; width: 48px; height: 48px; }
a.cmd-add { background-position: -5px -106px; width: 48px; height: 48px; }
a.cmd-cancel { background-position: -58px -106px; width: 48px; height: 48px; }
a.cmd-back:hover { background-position: -111px -106px; width: 48px; height: 48px; }
a.cmd-save { background-position: -164px -106px; width: 48px; height: 48px; }
a.cmd-add:hover { background-position: -5px -159px; width: 48px; height: 48px; }
a.cmd-search { background-position: -58px -159px; width: 48px; height: 48px; }
a.cmd-cancel:hover { background-position: -111px -159px; width: 48px; height: 48px; }
a.cmd-delete:hover { background-position: -164px -159px; width: 48px; height: 48px; }
a.cmd-play:hover { background-position: -5px -212px; width: 48px; height: 48px; }
a.cmd-back { background-position: -58px -212px; width: 48px; height: 48px; }

a.cmd-refresh-small:hover, a.cmd-cancel-small:hover, a.cmd-save-small:hover, a.cmd-cancel-small, a.cmd-settings-small, 
a.cmd-back-small, a.cmd-settings-small:hover, a.cmd-back-small:hover, a.cmd-delete-small:hover, a.cmd-add-small:hover, 
a.cmd-save-small, a.cmd-play-small, a.cmd-play-small:hover, a.cmd-search-small, a.cmd-refresh-small, 
a.cmd-search-small:hover, a.cmd-delete-small, a.cmd-add-small, a.cmd-copy-small
{ display: block; background: url('Buttons/small-cmd-buttons-sprite.png') no-repeat; }

a.cmd-copy-small { background-position: 0px -1px; width: 32px; height: 32px; }
a.cmd-copy-small:hover { background-position: 0px -69px; width: 32px; height: 32px; }

a.cmd-add-small { background-position: -42px -1px; width: 32px; height: 32px; }
a.cmd-add-small:hover { background-position: -42px -69px; width: 32px; height: 32px; }

a.cmd-search-small { background-position: -84px -1px; width: 32px; height: 32px; }
a.cmd-search-small:hover { background-position: -84px -69px; width: 32px; height: 32px; }

a.cmd-delete-small { background-position: -126px -1px; width: 32px; height: 32px; }
a.cmd-delete-small:hover { background-position: -126px -69px; width: 32px; height: 32px; }

a.cmd-play-small { background-position: -168px -1px; width: 32px; height: 32px; }
a.cmd-play-small:hover { background-position: -168px -69px; width: 32px; height: 32px; }

a.cmd-close-small { background-position: -210px -1px; width: 32px; height: 32px; }
a.cmd-close-small:hover { background-position: -210px -69px; width: 32px; height: 32px; }

a.cmd-refresh-small { background-position: -252px -1px; width: 32px; height: 32px; }
a.cmd-refresh-small:hover { background-position: -252px -69px; width: 32px; height: 32px; }

a.cmd-back-small { background-position: -294px -1px; width: 32px; height: 32px; }
a.cmd-back-small:hover { background-position: -294px -69px; width: 32px; height: 32px; }

a.cmd-previous-small { background-position: -336px -1px; width: 32px; height: 32px; }
a.cmd-previous-small:hover { background-position: -336px -69px; width: 32px; height: 32px; }

a.cmd-setting-small { background-position: -378px -1px; width: 32px; height: 32px; }
a.cmd-setting-small:hover { background-position: -378px -69px; width: 32px; height: 32px; }


a.list-edit,
a.list-note,
a.list-result,
a.list-preview,
a.list-history,
a.list-delete,
a.list-view
{ position: relative; display: inline-block; background: url('Buttons/list-buttons-sprite.png') no-repeat;}

a.list-edit { background-position: 2px -27px; width: 24px; height: 24px; }
a.list-note { background-position: -34px -27px; width: 24px; height: 24px; }
a.list-result { background-position: -68px -27px; width: 24px; height: 24px; }
a.list-preview { background-position: -102px -27px; width: 24px; height: 24px; }
a.list-history { background-position: -136px -27px; width: 24px; height: 24px; }
a.list-delete { background-position: -166px -27px; width: 24px; height: 24px; }
a.list-view { background-position: -102px -27px; width: 24px; height: 24px; }


a.list-toolbar-copy, a.list-toolbar-copy:hover,
a.list-toolbar-delete, a.list-toolbar-delete:hover,
a.list-toolbar-add, a.list-toolbar-add:hover,
a.list-toolbar-edit, a.list-toolbar-edit:hover
{ position: relative; display: inline-block; background: url('Buttons/list-toolbar-sprite.png') no-repeat; padding-left: 3px;}

a.list-toolbar-add:hover { background-position: 0px 0px; width: 20px; height: 20px; }
a.list-toolbar-add { background-position: 0px -22px; width: 20px; height: 20px; }

a.list-toolbar-delete:hover { background-position: -26px 0px; width: 20px; height: 20px; }
a.list-toolbar-delete { background-position: -26px -22px; width: 20px; height: 20px; }

a.list-toolbar-copy:hover { background-position: -51px 0px; width: 20px; height: 20px; }
a.list-toolbar-copy { background-position: -51px -22px; width: 20px; height: 20px; }

a.list-toolbar-edit:hover { background-position: -76px 0px; width: 20px; height: 20px; }
a.list-toolbar-edit { background-position: -76px -22px; width: 20px; height: 20px; }

a.button,
.content-toolbar,
ul#side-menu li a.selected,
ul#side-menu li.filled,
#divider-drop-down,
ul#sub-menu, 
ul#sub-menu li a,
input[type="submit"],
input[type="button"],
.button,
.ui-widget-header,
a#left-scrollbar-button,
a#right-scrollbar-button,
#divider-drop-down div.enabled:hover,
.list ul.toolbar,
span.badge,
a.back,
.switch input[type=checkbox] + span::before
{ 
    background-color: #0f75bc; /* dark */
}
 
a,
a:link, a:visited,
ul#side-menu li a:hover,
ul#sub-menu li a.selected,  
ul#sub-menu li a.selected:hover,
#divider-drop-down div.enabled,
.form h2,
.reveal-modal h2,
.list h2,
.message-success,
.ui-state-hover, 
.ui-widget-content .ui-state-hover, 
.ui-state-focus, 
.ui-widget-content .ui-state-focus,
.switch input[type=checkbox]:checked + span::before
{
    color: #0f75bc; /* dark */
}

a.selected .caret
{
    border-top-color: #0f75bc; /* dark */
}

input:focus, textarea:focus {
    border: 1px solid #0f75bc; /* dark */
}
    
#side-menu-close-button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.list ul.toolbar li a:hover,
.button:hover,
a#left-scrollbar-button:hover,s
a#right-scrollbar-button:hover,
ul#sub-menu li ul.dropdown-menu a:hover,
ul#sub-menu li a:hover,
input[type="submit"]:disabled,
input[type="button"]:disabled,
.ui-widget-header .ui-state-hover, 
.ui-widget-header .ui-state-focus,
.switch:hover input[type=checkbox] + span::before
{
    background-color: #47a7e9; /* light */
}

/*a:active, a:hover {
    background-color: #6F89C1!important; 
}*/

a.ui-state-hover,
.highlight,
.ui-widget-content .ui-state-active
{
    background-color: #47a7e9!important; /* light */
}

a:active, a:hover {
    color: #47a7e9; /* light */
}

    
html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
}

body {
    background-color: #fff;
    border-top: solid 10px #000;
    color: #333;
    margin: 0;
    padding: 0;
    font-size: .85em;
    font-family: "Roboto", Sans-Serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

a {
    outline: none;
    text-decoration: none;
}

    a.button
    {
        display: block;
        float: left;
        color: #ffffff;
        border: none;
        cursor: pointer;
        font-size: 1em;
        padding: 2px 13px 2px 13px;
        margin-right: 8px;
        width: auto;
    }
        
        a.button.large
        {
            padding: 10px 15px 10px 15px;
            font-size: 1em;
        }

    a.add
    {
        display: inline-block;
        padding: 0px;
        margin-left: 15px;
        margin-right: 1px;
        background-position: -186px -6px;
        height: 32px;
        top: 8px;
        position: relative;
        width: 32px;
        background-repeat: no-repeat;
        background-image: url('buttons/employee-list-toolbar-sprite.png');
        float: none;
    }

    a.small
    {
        display: inline;
        font-size: 0.8em;
        padding: 3px 6px 3px 6px;
        margin-left: 0px;
        margin-right: 1px;
        width: auto;
        font-weight: normal;
        float: none;
    }

    a.back
    {
        display: block;
        background-repeat: no-repeat;
        background-image: url('buttons/employee-list-toolbar-sprite.png'); 
        background-position: -3px -6px;
        margin: -2px 1px 0px 0px;
        padding: 0;
        width: 32px;
        height: 32px;        
    }
    
    a.delete
    {
        position: relative;
        display: inline-block;
        background: url('buttons/list-buttons-sprite.png') no-repeat;
        background-position: -166px -27px;
        height: 24px;
        width: 24px;
        top: 3px;
        left: 5px;
    }

    a.smalladd
    {
        position: relative;
        display: inline-block;
        background: url('buttons/list-toolbar-sprite.png') no-repeat;
        background-position: 0px -20px;
        height: 24px;
        width: 24px;
        top: 6px;
        left: 10px;
    }

header, footer, hgroup,
nav, section {
    display: block;
}

mark {
    padding-left: 5px;
    padding-right: 5px;
}

.float-left {
    float: left!important;
}

.float-right {
    float: right!important;
}

.clear
{
    clear: both;
    margin-top: 30px;
    padding-top: 10px;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

h1, h2, h3,
h4, h5, h6 
{
    font-weight: 300;
    color: #000;
    margin-bottom: 0;
    padding-bottom: 0;    
}

h1 {
    font-size: 1.6em;
    margin-top: -10px;
    margin-left: 0;
}

h2 {
    font-size: 1.75em;
}

    h2 .divider 
    {
        color: #E2E2E2;
    }

    h2 div.button.small
    {
        position: relative;
        top: 0px;
        margin-left: 30px;
        font-size: 0.7em;
    }
    
h3 {
    font-size: 1.2em;
    height: 30px;
}

    h3 a.add
    {
        position: relative;
        top: 0px;
        float: right;
        margin-left: 5px;
    }

    h3 div.button.small
    {
        float: left;
        margin-top: 1px;
        margin-right: 10px;
    }

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

    h5 a:link, h5 a:visited, h5 a:active {
        padding: 0;
        text-decoration: none;
    }

p.small
{
    font-size: 0.9em!important;
}

#company-selector {
    color: #999;
    font-size: 1.4em;
    margin: 0;
    width: 235px;
    padding: 17px 0 0 75px;
    float: left;
    height: 60px;
    line-height: 25px;
}

#company-selector.shifted {
    background-position: 19px -2px;
    padding-left: 96px;
}

.my {
    font-style: italic;
}

/* main layout
----------------------------------------------------------*/
.content-wrapper {
    margin: 10px 90px 0 15px;
}

#body {
    clear: both;
    padding-bottom: 35px;
}

    .main-content {
        padding-top: 10px;
        min-width: 750px;
        min-height: 500px;
    }

header 
{
    height: 79px;
}

    header nav
    {
        float: left;
        margin-left: 10px;
        width: 750px;
    }

header .content-wrapper {
    padding-top: 12px; 
}

footer {
    clear: both;
    background-color: #e2e2e2;
    font-size: .9em;
    height: 100px;
}

            
/* side bar
----------------------------------------------------------*/

#side-bar
{
    position: fixed;
    top: 0px;
    right: 0px;
    width: 70px;
    height: 100%;
    background-color: #000;
}
    
    #side-bar a {
        padding: 0;
    }

    #side-bar nav {

    }
    
    #side-bar ul {
        padding: 10px;
        width: 50px;
    }

    #side-bar li {
        display: inline;
        list-style: none;
    }
    
    #side-bar.open {
        width: 300px;
    }
    
    #side-bar .url
    {
        display: block;
        font-size: 0.8em;
        clear: both;
        color: #777777;
    }
    
    #side-bar h2
    {
        color: #ffffff;
        margin-top: 5px;
        margin-bottom: 12px;
    }

    
/* login
----------------------------------------------------------*/
#login {
    font-size: .85em;
    margin-top: 35px;
    margin-left: 10px;
    color: #fff;
    height: 60px;
}

    #login a {
        background-color: #d3dce0;
        margin-left: 10px;
        margin-right: 3px;
        padding: 2px 3px;
        text-decoration: none;
    }

    #login a.username {
        background: none;
        margin: 0;
        padding: 0;
        text-decoration: underline;
    }

    #login ul {
        margin: 0;
    }

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

    #login img
    {
        width: 50px;
        display: block;
        float: left;
    }
    
    #login .credentials {
        float: left;
        padding: 0;
        margin-left: 10px;
        width: 220px;
    }

    #login .username {
        font-size: 20px;
        margin: 0 0 2px 0;
        padding: 0;        
    }
    
    #login .company {
        font-size: 13px;
        margin: 0;
    }

    
    
.hidden {
    display: none;
}

#language-selection h2 img
{
    position:absolute;
    left:178px;
    top:8px;
    width:32px;
    height:32px;
}

#site-search,
#quick-links,
#language-selection
{
    position: absolute;
    top: 120px;
    width: 235px;
    color: #ffffff;    
    right: 0px;
}

#site-search input,
#language-selection select
{
    width: 210px;
}

#site-search ul,
#quick-links ul,
#language-selection ul
{
    margin: 0px 0px 0px 5px;
    padding: 0px;
    width: 100%;
}

#site-search li,
#quick-links li,
#language-selection li
{
    margin-top: 10px;
    display: block;
}



/* menu
----------------------------------------------------------*/

ul#menu 
{
    height: 520px;
    margin: 15px 0 0 0;
    padding: 0;
}

    ul#menu li
    {
        list-style: none;
        margin-bottom: 5px;
        padding: 0px;
        width: 286px;
        font-size: 1.2em;
    }

    ul#menu li a
    {
        display: block;
        padding: 8px 0 8px 14px;
        width: 100%;
    }

    ul#menu li:first-child
    {
        margin-top: 10px;
    }
    
    ul#menu li a.selected,
    ul#menu li a:hover
    {
        background-color: #eee;
        cursor: pointer;
    }
            

        
/* Side menu 
----------------------------------------------------------*/
ul#side-menu 
{
    font-size: 1.4em;
    margin: 0px 15px 0px 0px;
    padding: 0;
    width: 250px;    
}

    ul#side-menu li {
        list-style: none;
    }
    
        ul#side-menu li #search-employees
        {
            font-size: 1em;
            border: none;
            width: 208px;
            margin-top: 6px;
            margin-left: 1px;  
            padding-right: 25px;
        }
        
        ul#side-menu li #g-search-button
        {
            display: inline-block;
            width: 20px;
            height: 19px;
            position: relative;
            left: 215px;
            top: -34px;
            background-image: url('datatable/search-icon.gif');
            background-repeat: no-repeat;
            background-position: right;
        }

        ul#side-menu li a 
        {
            display: block;
            background: none;
            color: #999;
            text-decoration: none;
            padding: 10px 15px 10px 6px;
        }

        ul#side-menu li a:hover {
            text-decoration: none;
        }

        ul#side-menu li a.selected 
        {
            color: #fff;
        }

        ul#side-menu li.sub {
            padding-left: 20px;
        }
        
        ul#side-menu li.filled 
        {
            padding: 0px 5px 0px 5px;
        }
        
#side-menu.close
{
    display: none;   
}


#open-side-menu
{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 20px;
    height: 100%;
    padding: 0;
    margin: 0;
    background: #000 url('buttons/side-menu-control-open.png') no-repeat 0px 119px;
}

#open-side-menu:hover
{
    background-color: #777777;
}

/* sub menu
----------------------------------------------------------*/

div.scrollable 
{
    overflow: auto;
    overflow-y: hidden;
    overflow-x: hidden;
    height: 45px;
    width: 90%;
    float: left;
    border-right: none;
}

a#left-scrollbar-button,
a#right-scrollbar-button
{
    margin: 0;
    padding: 0;
    height: 45px;
    width: 28px;
}

a#left-scrollbar-button
{
    display: none;
    background: url('buttons/left-arrow.png') no-repeat 10px 7px;
}

a#right-scrollbar-button
{
    display: none;
    background: url('buttons/right-arrow.png') no-repeat 10px 7px;
    margin-left: 5px;
}

a#left-scrollbar-button.disabled,
a#right-scrollbar-button.disabled
{
    opacity: 0.2;
    filter: alpha(opacity=20); /* For IE8 and earlier */
}


        

ul#sub-menu
{
    font-size: 1.1em;
    margin: 0px;
    padding: 0;
    margin-left: 5px;
}
        
    ul#sub-menu li {
        list-style: none;
    }

        ul#sub-menu li a
        {
            display: block;
            float: left;
            text-align: center;
            color: #fff;
            text-decoration: none;
            margin-top: 5px;
            margin-right: 5px;         
            padding: 8px 12px 0px 12px;
            height: 32px;
            min-width: 50px;
        }

            ul#sub-menu a:focus {
                outline: none;
            }

        ul#sub-menu li a:hover
        {            
            color: #fff;
        }

        ul#sub-menu li a.selected
        {
            background-color: #fff;
            padding: 8px 12px 1px 12px;
        }

        ul#sub-menu li ul.dropdown-menu 
        {
            position: absolute;
            top: 45px;
            left: 0;
            z-index: 1000;
            display: none;
            float: left;
            min-width: 150px;
            padding: 0px;
            margin: 0;
            list-style: none;
        }

        ul#sub-menu li ul.dropdown-menu li
        {
            display: block;
            width: 100%;
        }     

        ul#sub-menu li ul.dropdown-menu li a
        {
            text-align: left;
            color: #777777;
            margin: 0px;
            padding: 10px 5px 0px 10px;
            background-color: #ffffff;
            height: 27px;
            font-size: 0.9em;
            width: 100%;
            border-left: solid 5px #eee;
            border-right: solid 5px #eee;
        }

            ul#sub-menu li ul.dropdown-menu li:last-child a
            {
                border-bottom: solid 5px #eee;
            }

        ul#sub-menu li ul.dropdown-menu a:hover
        {
            background-color: #eee;
        }
        
.caret 
{
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: top;
    border-top: 5px solid #fff;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: "";
    margin: 7px 0px 0px 3px;
}


/* tab menu 
----------------------------------------------------------*/

ul#tabs 
{
    font-size: 1em;
    margin: 20px 0;
    padding: 0px ;
    text-align: center;
    height: 45px;
    width: 100%;
    background-color: #999;
}

    ul#tabs li {
        margin-top: 5px;
        list-style: none;
        height: 40px;
        display:block; 
        float: left;
    }

        ul#tabs li a 
        {
            display:block;
            padding: 0;
            height: 24px; 
            color: #fff;
            text-decoration: none;
            padding: 8px 12px 8px 12px;
            float: left;      
            margin-left: 2px;
            margin-right: 2px;
            margin-top: 0px;
            min-width: 50px;
        }

        ul#tabs li:first-child a
        {
            margin-left: 5px;
        }

        ul#tabs li:last-child a
        {
            margin-right: 5px;
        }

        ul#tabs li a:hover {
            background-color: #aaa;
        }

        ul#tabs li a.selected 
        {
            background-color: #fff;
            color: #000;
        }
                

/* modal tab menu 
----------------------------------------------------------*/

ul#modal-tabs 
{
    font-size: 1em;
    margin: 20px 0;
    padding: 0px ;
    text-align: center;
    height: 45px;
    width: 100%;
    border-bottom: solid 1px #ccc;
}

    ul#modal-tabs li {
        margin-top: 5px;
        list-style: none;
        height: 40px;
        display:block; 
        float: left;
    }

        ul#modal-tabs li a 
        {
            display:block;
            height: 24px; 
            color: #666;
            text-decoration: none;
            padding: 10px 12px 7px 12px;
            float: left;      
            margin-left: 2px;
            margin-right: 2px;
            margin-top: 0px;
            min-width: 50px;
        }

        ul#modal-tabs li a.selected
        {
            border-top: solid 1px #ccc;
            border-right: solid 1px #ccc;
            border-left: solid 1px #ccc;
            padding-top: 9px;
        }

        ul#modal-tabs  li:first-child a
        {
            margin-left: 5px;
        }

        ul#modal-tabs  li:last-child a
        {
            margin-right: 5px;
        }

        ul#modal-tabs  li a:hover {
            color: #ccc;
        }

        ul#modal-tabs  li a.selected 
        {
            background-color: #fff;
            color: #000;
        }




/* Employee Detail
----------------------------------------------------------*/
.employee-detail, 
#employee-details,
#divider-drop-down
{
    display: none;   
}    

#employee-details 
{
    padding: 0 10px 0 0px;
}
            
    
/* page elements
----------------------------------------------------------*/
#loader div
{
    font-size: 1.8em;
    color: #777;
    font-weight: normal;
    text-align: center; 
    margin-bottom: 10px; 
    width: 100%;
}

img.loader{
    display: block;
    margin-left: 10px;
    margin-top: 20px;
    width: 300px;
    height: 40px;
}

#errors
{
    font-size: 1.1em;
    font-weight: normal;
}

    #errors h2 {
        color: #e80c4d;
        position: relative;
        display: inline-block;
        top: -3px;
        padding-left: 15px;
    }

#outcome-summary {
    padding: 10px 10px 10px 15px;
    margin-top: 15px;
    font-size: 1.1em;
    display: none;
}

#outcome-summary.success {    
    color: #696;
    background-color: #E5F1E5;
}

#outcome-summary.failure {
    color: #C66;
    background-color: #F1E5E5;
}

#outcome-summary.warning {
    color: #d27112;
    background-color: #F3ECE1;
}


form 
{
    clear: both;
    padding-top: 20px;
    padding-left: 10px;
}

fieldset
{
    
}

.form {
    float: left;
    padding-top: 0px;
    width: 100%;
}

    .form h2 {
        padding-left: 10px;
        height: 35px;
    }

    .form h3 {
        padding-left: 2px;
        font-family: "Segoe UI", Roboto, Arial, Verdana, Helvetica, Sans-Serif;
        font-weight: 600;
    }
    
    hr { 
        height: 5px;
        background-color: #777777;
        border: none;
        margin: 20px 0 20px 0;
        clear: left;        
    }

div#body .form {
    display: none;
}

#list
{

}

.list 
{
    margin-right: 15px;
    float: left;
    padding-top: 0;
    min-width: 300px;
    width: 300px;
}
    
    .list ul.toolbar 
    {
        display: block;
        position: relative;
        width: 300px;
        height: 45px;  
        margin: 0;
        padding: 0;
    }
    
    .list ul.toolbar li
    {
        margin: 0;
        padding: 0;
        list-style: none;
        display: block;
        height: 45px;
        float: left;
    }
    
    .list ul.toolbar li:first-child 
    {
        width: 278px;
        margin-left: 0;
    }
        
    .list ul.toolbar li a 
    {
        display: block;
        height: 45px;
        background-repeat: no-repeat;
        background-image: url('buttons/employee-list-toolbar-sprite.png'); 
        margin: 0;
        padding: 0;
    }
         
    .list ul.toolbar li a#divider
    {
        width: 44px;
        background-position:  -45px 0;
    }
    
    .list ul.toolbar li a#close-side-menu
    {
        width: 22px;
        background-position: -94px 0;
    }
    
    .list ul.toolbar input 
    {
        margin: 16px 9px 0 12px;     
        float: left;
    }     
    
    div#divider-drop-down 
    {
        position: absolute;
        top: 45px;
        left: 0;
        z-index: 10000;
        width: 280px;
        padding: 10px;
    }
        
        #divider-drop-down div
        {
            display:block;
            width: 29px;
            height: 25px;
            background-color: #fff;
            float: left;
            margin: 1px;
            padding-top: 5px;
            text-align: center;
            cursor: pointer;
            color: #ccc;
        }
        
        #divider-drop-down div.enabled:hover
        {
            color: #fff;
            cursor: pointer;
            
        }  


        span.badge {
            display: inline-block;
            width: 15px;
            height: 15px;
            position: relative;
            color: #fff;
            padding: 0;
            font-size: 0.7em;
            text-align: center;
            border: solid 1px #fff;
            top: -10px;
            left: 5px;
        }

        
.list .content-toolbar a.list-result,
.list .content-toolbar a.list-result:hover  
{
    display: block;
    margin: 7px 0 0 10px;
    background-position: -68px 0px; 
    width: 24px; 
    height: 24px; 
    padding: 0;
    float: left;
}

.list-details
{
    float: left;
    padding-top: 0px;
    width: 100%;
    min-width: 300px;    
}

    .employee-summary 
    {
        min-height: 160px;
        padding: 0px;
        margin-top: 20px;
    }
    
    .employee-summary h2 
    {
        color: #333;
        font-size: 1.6em;
        margin-top: 10px;
        margin-bottom: 0px;
        padding-left: 0px;
        margin-left: 10px;
    }
    
    .employee-summary dl {
        margin-top: 15px;
        display: block;
        height: 100px;
        width: 31%;
        float: left;
        margin-right: 5px;
        margin-left: 10px;
    }    
    
    .employee-summary dt {
        margin-bottom: 5px;       
    }
    
    .employee-summary .photo 
    {
        float: right;
        display: block;
        padding: 2px;
        border: 1px solid #eee;
        height: 150px;
        width: 150px;
        margin-right: 1px;
    }
    
    .employee-summary img 
    {
        width: 150px;
        height: 150px;
    }

/* forms */
fieldset {
    border: none;
    margin: 0;
    padding: 0;
    border-top: solid 1px #777777;
}

    fieldset legend {
        font-size: 1.2em;
        padding-right: 20px;
        font-weight: 600;
    }
        
    fieldset legend div.button {
        display: inline-block;
        padding: 5px;
        margin-left: 20px;
        color: #fff;
        font-weight: normal;
        font-size: 0.8em;
    }

    fieldset ol {
        padding: 0;
        list-style: none;
    }

        fieldset ol li {
            padding-bottom: 5px;
        }
        
.form-column
{ 
    width: 48%;
    float: left;
    margin: 15px 20px 15px 0px;
}

div#form-container div.form-column:last-child,
form fieldset div.form-column:last-child
{   
    margin-right: 0px;
}

label {
    display: inline-block;
    font-size: 1.1em;
    color: #777777;
}

label.checkbox {
    display: inline;
}

input, textarea {
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #333;
    font-size: 1em;
    margin: 5px 0 6px 0;
    padding: 5px;
    width: 300px;
}

textarea {
    font-family: inherit;
    width: 500px;
    height: 100px;
}

    input[type="checkbox"] {
        background: #fff;
        border: solid 1px #ccc;
        width: auto;
        -webkit-border-radius: 0;
    }

    input[type="text"]
    {
        -webkit-appearance: none;
        -webkit-border-radius: 0;
    }

    input[type="submit"],
    input[type="button"],
    .button {
        color: #ffffff;
        border: none;
        cursor: pointer;
        padding: 10px 15px 10px 15px;
        margin-right: 8px;
        width: auto;
        -webkit-appearance: none;
        -webkit-border-radius: 0;
    }

    input[type="submit"]:disabled,
    input[type="button"]:disabled {
        cursor: wait;
    }

    td input[type="submit"],
    td input[type="button"],
    td button {
        font-size: 1em;
        padding: 4px;
        margin-right: 4px;
    }

    div.button
    {
        display: inline-block;
        font-size: 0.6em;
        width: 160px;
        padding: 7px;
        margin-left: 15px;
    }

    div.button.small
    {
        display: inline;
        font-size: 0.8em;
        padding: 3px 15px 3px 15px;
        margin-top: 9px;
        margin-left: -5px;
        #margin-left: 0px;
        margin-right: 1px;
        width: auto;
        font-weight: normal;
        float: none;
    }

    .calculation {
        clear: left;   
    }

    .calculation div.metro-form-control {
        width: auto;
        float: left;
        margin-right: 3px;
    }

        .calculation div.metro-form-control input {
            width: 75px !important;
        }

        .calculation div.metro-form-control .field-validation-error {
            width: 100px;    
        }

        .calculation div.metro-form-control select {
            width: 200px !important;
        }

    .math-symbol {
        display: block;
        width: 22px;
        height: 50px;
        top: 8px;
        position: relative;
        background-repeat: no-repeat;
        background-image: url('images/math-symbols-sprite.png?rew6543');
        float: left;
        margin-top: 7px;
    }

        .math-symbol.left-bracket {
            background-position: -6px -3px;
        }

        .math-symbol.divide {
            background-position: -107px -3px;
        }

        .math-symbol.multiply {
            background-position: -69px -3px;
        }

        .math-symbol.right-bracket {
            background-position: -40px -3px;
        }

div.band-control .metro-text-box,
div.percentage-band-control .metro-text-box
{
    margin-top: 15px;
    margin-bottom: 15px;
}

.docx, .doc, .pdf, .jpg, .txt, .xls, .xlsx, .xml
{
    display: block;
    height: 24px;
    width: 20px;
    background-repeat: no-repeat;
    background-image: url('images/application-icons-sprite.png'); 
    margin: 0px;
    float: left;
}

.xls, .xlsx
{
    background-position: 0px 2px;
}

.docx, .doc
{
    background-position: -20px 2px;
}

.pdf
{
    background-position: -40px 2px;
}

.jpg
{
    background-position: -60px 2px;
}

.txt
{
    background-position: -80px 2px;
}

.csv
{
    background-position: -100px 2px;
}

.filename
{
    display: block;
    float: left;
    margin-left: 3px;
}


td a.pdf {
    margin: 0 auto 0 auto;
    float: none;
}

/* date picker */
.ui-datepicker-trigger 
{
    position: relative;
    top: 3px;
    left: 10px;
    padding: 0;
    margin: -5px 0;
    left: 10px;
    height: 30px;
    width: 30px;
}

.ui-icon  
{
    display: block; 
    text-indent: -99999px; 
    overflow: hidden; 
    background-repeat: no-repeat; 
}

.ui-icon-circle-triangle-w
{
    background: url('buttons/datepicker-sprite.png') no-repeat 3px 4px;
    width: 25px;
    height: 40px;
}

.ui-icon-circle-triangle-e 
{
    background: url('buttons/datepicker-sprite.png') no-repeat -17px 4px;
    width: 25px;
    height: 40px;
}

.ui-widget .ui-widget { font-size: 1em; }

.ui-widget-content  
{
    border: 1px solid #777777; 
    background-color: #ffffff; 
}

.ui-datepicker  
{
    width: 17em; 
    padding: .2em .2em 0; 
    display: none; 
    z-index: 1100!important;
}
                 
.ui-datepicker .ui-datepicker-header { position:relative; padding: 0; }

.ui-datepicker .ui-datepicker-prev, 
.ui-datepicker .ui-datepicker-next  
{
    position:absolute;
    width: 25px;
    height: 40px; 
}
    
.ui-datepicker .ui-datepicker-prev  
{
    top: 0px;
    left: 0px;
}

.ui-datepicker .ui-datepicker-next  
{
    top: 0px;
    right: 0px;                                      
}

.ui-datepicker .ui-datepicker-prev span, 
.ui-datepicker .ui-datepicker-next span 
{

}

.ui-datepicker .ui-datepicker-title  
{
    margin: 0px; 
    text-align: center; 
    color: #ffffff; 
    height: 30px;
    padding-top: 10px;
}

.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { 
    width: 30%;
    margin: 0 5px 0 5px;
}
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
.ui-datepicker th { padding: 1px; text-align: center; font-weight: normal; border: 0;  }
.ui-datepicker td { border: 0; padding: 1px; font-size: 1.1em;}
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }

.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default  
{
    background-color: #eeeeee;
    color: #777777;
}

.ui-widget-content .ui-state-active {
    background-color: #fff;
}


/* info and errors */
.message-info {
    border: 1px solid;
    clear: both;
    padding: 10px 20px;
}

.message-error {
    clear: both;
    color: #e80c4d;
    font-size: 1.1em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.message-success {
    font-size: 1.3em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

/* Gateway XML Viewer */

.error {
    color: #e80c4d;
}

.success {
    color: #696;
}

div.gateway-errors
{
    padding: 11px;
}

div.viewer-errors table tr td:first-child
{
    width: 120px;
    vertical-align: top;
}

    div.viewer
    {
        margin: 10px 0px 20px 12px;
        margin-bottom: 20px;
        overflow: auto;
        overflow-x: hidden;
        width: 99%;
        height: 300px;
    }




/* styles for validation helpers */
.field-validation-error {
    color: #e80c4d;
    margin-bottom: 17px;
display: block;
}

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

input.input-validation-error {
    border: 1px solid #e80c4d;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    background: #fff url('images/error.png') no-repeat;
    color: #e80c4d;
    font-size: 1.1em;
    margin-left: 10px;
    margin-top: 25px;
}

.validation-summary-errors ul {
    padding: 1px;
    margin-top: 5px;
    margin-bottom: 30px;
    margin-left: 35px;
    min-height: 25px;

}

.validation-summary-errors ul li {
    list-style: none;
}

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


/* tables
----------------------------------------------------------*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 0 none;
}

th {
    text-align: left;
    border: none 0px;
    padding-left: 0;
}

    th a {
        display: block;
        position: relative;
    }

    th a:link, th a:visited, th a:active, th a:hover {
        color: #333;
        font-weight: 600;
        text-decoration: none;
        padding: 0;
    }

    th a:hover {
        color: #000;
    }

    th.asc a, th.desc a {
        margin-right: .75em;
    }

    th.asc a:after, th.desc a:after {
        display: block;
        position: absolute;
        right: 0em;
        top: 0;
        font-size: 0.75em;
    }

    th.asc a:after {
        content: '▲';
    }

    th.desc a:after {
        content: '▼';
    }

td {
    padding: 0.25em 2em 0.25em 0em;
    border: 0 none;
}

tr.pager td {
    padding: 0 0.25em 0 0;
}


#device
{
    width: 150px;
    text-align: center;
    color: yellow;
    font-size: 0.8em;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100000;
    background-color: #000;
    padding: 8px;
}

    

/* Large desktop */
@media (min-width: 1024px) {
                             
    #device:after { content: "DESKTOP"; }
                             
}


/* Colour Picker */
.evo-pop {
	z-index:10000;
	width:204px;
	padding:3px 3px 0;
    border:solid 2px #c3c3c3;
    background-color: #E3E3E3;
}
.evo-pop-ie {
	z-index:10000;
	width:212px;
	padding:3px;
}

.evo-palette, .evo-palette-ie  {
	border-collapse: separate;
	border-spacing: 4px 0px;
	*border-collapse: expression('separate', cellSpacing = '2px');
}
.evo-palette td  {
	font-size:1px;
	border:solid 1px #c0c0c0;
	padding:7px;
	cursor:pointer;
}
.evo-palette tr.top td {
	border-bottom:0;
}
.evo-palette tr.in td {
	border-top:0;
	border-bottom:0;
}
.evo-palette tr.bottom td {
	border-top:0;
} 
.evo-palette th, .evo-palette-ie th  {
	border:0;
	padding:5px 3px;
	text-align:left;
	font-weight:normal;
	background:transparent !important;
}
.evo-palette div.sep {
	height:3px;
}
.evo-palette-ie td  {
	font-size:1px;
	border:solid 1px #c0c0c0;
	padding:7px;
	cursor:pointer;
} 

.evo-palette2, .evo-palette2-ie {
	margin:auto;
	border-collapse:collapse;
}
.evo-palette2 td, .evo-palette2-ie td{
	font-size:1px;
	cursor:pointer;
}
.evo-palette2 td{
	padding:6px 7px;
}
.evo-palette2-ie td{
	padding:5px;
} 
.evo-palcenter{
	padding:5px;
	text-align:center;
}

.evo-colorind,.evo-colorind-ie,.evo-colorind-ff{
	border:solid 2px #c3c3c3;
	width:22px;
	height:22px;
	float:right;
    margin: 3px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.evo-colorind{
	position:relative;
    margin-top: 0px;
}
.evo-colorind-ie{
	position:relative;
	top:-23px;
}
.evo-colorbox-ie{
	font-size:8px;
	padding:3px 9px !important;
}
.evo-colortxt-ie{
	position:relative;
	top:-6px;
}
.evo-pop:after,
.evo-pop-ie:after,
.evo-colorind:after, 
.evo-colorind-ie:after, 
.evo-colorind-ff:after, 
.evo-color span:after,
.evo-cHist:after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	font-size: 0;
}
.evo-color{
	width:94px;
	padding: 1px 3px 0 4px;
}
.evo-color div{
	border:solid 1px #808080;
	border-right:solid 1px #c0c0c0;
	border-bottom:solid 1px #c0c0c0;
	padding:3px;
	margin-bottom:5px;
	width:10px;
	height:10px;
	float:left;
}
.evo-color span{
	font-size:15px;
	margin: 1px 0 4px 3px;
	float:left;
}
.evo-sep{
	height:10px;
	font-size:0;
}
.evo-more{
	padding:4px 5px 4px;
	font-size:smaller;
}
.evo-cHist{
	padding:3px;
}
.evo-cHist div{
	cursor: pointer;
	border:solid 1px #c0c0c0;
	padding:3px;
	margin:5px;
	width:10px;
	height:10px;
	float:left;
}
a.evo-hist{
	margin-left:6px;
}

/* 
** Week pattern control styling.
*/
table.week
{
	position:relative;
	border:1px solid #C8C8C8;
	margin-bottom:10px;			
	width:100%;
}
			
/* Column Header */
table.week thead tr th
{
	position:relative;
	text-align:center;
	border-right: 1px solid #C8C8C8;
	border-bottom: 1px solid #C8C8C8;
	background-color:#f2f2f2;
	padding:5px 0px;
}
			
table.week thead tr th.week-no
{
	background-color:#D5D5D5;
	width:100px;
	padding-left:5px;
	text-align:left;
}
			
table.week thead tr th.notification
{
	text-align:left;
	font-weight:bold;
	padding-left:5px;
}
			
table.week thead tr th.command-delete
{
	position:relative;
	width:30px;
	height:24px;
	background: #7A7A7A url('buttons/employee-list-toolbar-sprite.png') no-repeat -234px -5px;				
}
			
table.week thead tr th.command-delete:hover, table.week thead tr th.command-add:hover
{
	background-color:#C8C8C8;
	cursor:pointer;
}

table.week thead tr th.command-add
{
	position:relative;
	width:30px;
	height:24px;
	background: #7A7A7A url('buttons/employee-list-toolbar-sprite.png') no-repeat -186px -5px;				
}			
			
/* Column Cells */
table.week tbody tr td
{
	border-bottom: 1px solid #E2E2E2;
}
			
table.week tbody tr td.field
{
	text-align:center;
}
			
table.week tbody tr td.label
{
	min-width:90px;
	padding-left: 5px;
	font-weight:normal;
}


/* 
** Basic Table Styling 
*/

table.basic-table { border: none; font-size: 14px;margin-bottom: 10px; }
			
table.basic-table td.header-col { color:#757575 }

table.basic-table td.sub-header-col { background-color: #d8d8d8; color: #4E4E4E; font-weight: normal; }

table.basic-table td.amount { text-align: right; }
        	
table.basic-table tr td { border-bottom: 1px solid #C3C3C3; border-right: 1px solid #C3C3C3; height:25px; padding-top: 5px; padding-bottom: 5px; }
			
table.basic-table tr.alt { background-color: #F6F6F6 }
table.basic-table.summary tr.alt { background-color: #fff }

/*table.basic-table thead tr { background-color: #eee; color: #000; font-weight: normal; }

table.basic-table thead tr + tr { background-color: #fff; color: #999; font-weight: normal; }*/

table.basic-table thead tr { background-color: #ccc; color: #000; font-weight: normal; }

table.basic-table thead tr + tr { background-color: #d8d8d8; color: #4E4E4E; font-weight: normal; }

table.basic-table tfoot tr td.amount { 
    background-color: #eee;
}

table.basic-table tr td.important { font-size: 1.6em;text-align: center;padding-bottom:8px }

div.no-records
{
    padding-left: 11px;
}

/* Login form */
#login-form .form
{
    width: 96%;
}

#login-form #login-button
{
    margin-top: 15px;
    width: 100px;
}


/* scroll bars */

::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    background-color: #eee;
}
 
::-webkit-scrollbar-thumb {
    background-color: #ccc;
}

/* 
** Timeline.
*/
table.timeline
{
	position:relative;
	margin-bottom:10px;			
	width:100%;    
}

table.timeline thead tr th 
{
	text-align:center;
	padding:5px 0px;  
}

table.timeline tbody tr td
{
	position:relative;
	padding:5px 5px; 
    background-color:#999; 
    color: #fff;  
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

table.timeline tbody tr td.error
{
	background-color: #D22737;
}

table.timeline tbody tr td.complete
{
    background-color: #01a31c;
}

div.timeline-legend
{
	border:none;
    font-weight:normal;
    text-align:left;
    background-color: transparent;     
}

div.timeline-legend div.item
{
    float:left;
    width:33%;
    padding:5px 0px; 
}

div.timeline-legend div.item em
{
    font-weight:bold;
    font-style: normal;
}

div.timeline-legend div.complete 
{
    /*text-decoration: line-through;*/
}


/*	--------------------------------------------------
Reveal Modals
-------------------------------------------------- */
		
.reveal-modal-bg { 
	position: fixed; 
	height: 100%;
	width: 100%;
	background: #000;
	background: rgba(0,0,0,.3);
	z-index: 100;
	display: none;
	top: 0;
	left: 0; 
	}
	
.reveal-modal {
	/*visibility: hidden;*/
    display: none;
	top: 100px; 
	left: 50%;
	margin-left: -300px;
	width: 600px;
	background-color: #fff;
	position: absolute;
	z-index: 1001;
	padding: 25px;
	-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
	-box-shadow: 0 0 10px rgba(0,0,0,.4);
	}
		
.reveal-modal.small 		{     
    width: 30%; 
    margin-left: -17%;
}

.reveal-modal.medium 		{     
    width: 50%; 
    margin-left: -28%;
}

.reveal-modal.large { 
    top: 10px; 
    width: 93%; 
    margin-left: 0px;
    left: 10px;
}



.reveal-modal .close-reveal-modal {
	font-size: 22px;
	line-height: .5;
	position: absolute;
	top: 15px;
	right: 18px;
	color: #aaa;
	text-shadow: 0 -1px 1px rbga(0,0,0,.6);
	font-weight: bold;
	cursor: pointer;
	text-decoration: none;
}

.reveal-modal #outcome-summary {
    position: relative;
    top: -25px;
    width: 100%;
    left: -25px;
    padding: 10px 13px 10px 37px;
    margin: 0;
}

.reveal-modal.medium #outcome-summary {
    padding: 11px 29px 10px 37px;
}

.reveal-modal-warning {
	color: #c00;
}

.reveal-modal h2
{
    margin-top: 0px;
}

.reveal-modal p, #error-list li
{
    font-size: 1.1em;
    line-height: 1.9em;
}

.buttons-container
{
    margin-top: 25px;
    height: 30px;
    text-align: center;
}

#error-modal 
{
    color: #B40404;
}

#error-modal .close-reveal-modal
{
    color: #B40404;
}

#error-list
{
    margin-left: 3px;
}

.reveal-modal #summary
{
    font-weight: bold;
}