/* STYLE FOR THE LOGOUT / LOGIN PAGE */
body.login-body,
body.logout-body    {background:#63BAD8 url(images/login-bg.jpg) repeat-x; margin:0; height:100%;}
body, td            {font: normal 11px arial,verdana,tahoma; line-height:16px;}
body .WorkBox       { border:1px solid #555; background-color:#F5F5F5; width:650px; font-family:Arial; font-size:11px; vertical-align:middle; position:relative; top:50px; text-align:left;}
body .ErrorMessage  {color:#F00;padding:6px 30px 0 265px;}
body .ErrorMessage div {display:inline;}
body .ErrorMessage .color {color:#FF9000;display:inline;font-size:16px;font-weight:bold;}
body .welcome       {-webkit-border-radius: 12px 12px 0 0;-moz-border-radius: 12px 12px 0 0;border-radius: 11px 11px 0 0;background:url(images/login-header.png) no-repeat scroll right top #09C;height:100px;border-bottom:1px solid #FFF;}
body .welcome  span {font-size:25px;}
body .welcome .logo  {width:250px; height:250px; position:relative;left:20px;top:15px; background:transparent url(images/Chaselogo.png) no-repeat 0 0; }
body .WorkBox       {-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;-moz-box-shadow: 3px 3px 35px #333333;-webkit-box-shadow: 3px 3px 35px #333333;box-shadow: 3px 3px 35px #333333;}
body .login         {background-image: url(images/right.arrow.png) !important;background-position:70px 0 !important;width:120px !important;height:50px !important;font-size:24px !important;text-align:left !important;padding-left:10px !important;padding-bottom:6px !important;}
body .switch        {width:180px !important;height:50px !important;font-size:24px !important;text-align:left !important;padding-left:10px !important;padding-bottom:6px !important;}
body .x-panel-body  {background-color:transparent;}

@media screen and (max-width: 670px) 
{
    body .WorkBox       {width:94%; top:15px;}
    body .welcome       {background-image:url(images/login-header-mobile.png);height:75px;}
    body .welcome .logo {width:150px; height:150px; position:relative;left:0;top:0; background:transparent url(images/Chaselogo-mobile.png) no-repeat 0 0; }

    body .WorkBox label.x-form-item-label { width:85px !important;}
    body .WorkBox .x-form-element         { padding-left:90px !important;}
    body .WorkBox .x-form-element  .x-form-field-wrap {width:auto !important;}
    body .WorkBox .x-form-element  input.x-form-text {width:85% !important;}
    body .WorkBox .full-width > div > div:first-child  {width:100%;}
    body .WorkBox .x-form-element  .x-btn    {margin-top:5px;}
    body .WorkBox .x-box-layout-ct  {width:100% !important;}
    body .WorkBox .x-box-layout-ct .x-box-inner {width:100% !important; text-align:center; height:auto;}

    body .WorkBox #btn-login,
    body .WorkBox #btn-switch  { margin: 0 auto 5px !important; position:relative !important; left:0;}
    body .ErrorMessage  {padding:6px 30px 0 10px !important;}
    body .auto-height .x-box-inner {height: auto !important;}
    body .auto-height .x-box-inner #btn-switch {left: auto !important; margin-left: auto !important;}
}

/* Styles    for Time Tracker */
.chase-viewport       {position:absolute; top:30px; bottom:0; left:0; right:0;}
.chase-viewport > div {width:100% !important; height:100% !important;}
.time-header { position:absolute; left:0; right:0; height:30px; top:30px; z-index: 1;
            background:-webkit-gradient( linear, left top, left bottom, color-stop(0.5, #DDD), color-stop(0.57, #CCC), color-stop(0.99, #BBB));
            background:-moz-linear-gradient( center top, #DDD 5%, #CCC 57%, #BBB 99% ); padding-top:2px;}
.time-header button {height:26px;}
.time-header button.left {margin-left:10px;}
.time-header .inline-block {position:relative; top:-1px;}
.time-header .inline-block img.x-form-trigger {height:25px !important}
.time-header-controls {position: relative; margin: 4px 7px 0 0; position: absolute; right: 0;}
.white {background: none repeat scroll 0 0 #FFFFFF !important;}
.white-footer {background: none repeat scroll 0 0 #FFFFFF !important; bottom: -40px !important}

.time-footer { position:absolute; left:0; right:0; height:40px; text-align:center; bottom:0; z-index:1;
            background:-webkit-gradient( linear, left top, left bottom, color-stop(0.5, #CCC), color-stop(0.57, #BBB), color-stop(0.99, #AAA));
            background:-moz-linear-gradient( center top, #DDD 5%, #CCC 57%, #BBB 99% );}
.time-footer button {margin-top:5px; line-height:18px; padding:3px 8px 3px 8px !important;}

.x-list-body {bottom: 40px; position: absolute; top: 88px; height:auto !important;}
.x-list-body-inner {width:100% !important;}
.x-list-body-inner .notes {display:none;}
.shownotes .x-list-body-inner .notes {display:block;}
.x-list-body .lastitem {background-color: #EEE; border-top-width: 1px; bottom: 0; position: absolute; border-bottom: 1px solid #99BBE8; border-top: 1px solid #ACE;}
.timetracker {margin-top: 39px; height: 100%;}
.timetracker dl.lastitem .c2 {font-weight: bold;}
.whiteTabPanel .x-tab-panel-header{background:#FDFDFD !important; border:0 !important; padding-bottom: 0;}
.whiteTabPanel ul.x-tab-strip-top{background:transparent none; }

.todayHours {font-size: 14px; padding-left: 5px; padding-top: 12px; position: absolute; text-align: left;}
.weekHours {font-size: 14px; padding-left: 5px; padding-top: 12px; position: absolute; text-align: right; width: 97%;}